nuxt/heart_cabin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
lwh 2023-08-16 02:08:57 +08:00
commit 42a2b69fe2
98 changed files with 17507 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env Normal file
View File

@ -0,0 +1,6 @@
# 后台接口地址(仅开发/预览环境生效)
NUXT_PROXY_API=http://localhost/AERWEN/heart_cabin/heart_cabin_api/public/admin.php/
# 后台图片地址(仅开发/预览环境生效)
NUXT_PROXY_UPLOADS=http://localhost/AERWEN/heart_cabin/heart_cabin_api/public/uploads/
# 后台富文本上传地址(仅开发/预览环境生效)
NUXT_PROXY_WEB_API=http://localhost:3003/api-v

7
.gitignore vendored Normal file
View File

@ -0,0 +1,7 @@
node_modules
*.log*
.nuxt
.nitro
.cache
.output
dist

8
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 数据源本地存储已忽略文件
/dataSources/
/dataSources.local.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/

9
.idea/houde_web_nuxt.iml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

24
.idea/inspectionProfiles/Project_Default.xml Normal file
View File

@ -0,0 +1,24 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="10">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
<item index="3" class="java.lang.String" itemvalue="noscript" />
<item index="4" class="java.lang.String" itemvalue="embed" />
<item index="5" class="java.lang.String" itemvalue="script" />
<item index="6" class="java.lang.String" itemvalue="carousel" />
<item index="7" class="java.lang.String" itemvalue="tab" />
<item index="8" class="java.lang.String" itemvalue="final" />
<item index="9" class="java.lang.String" itemvalue="components" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
</profile>
</component>

6
.idea/misc.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/houde_web_nuxt.iml" filepath="$PROJECT_DIR$/.idea/houde_web_nuxt.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

2
.npmrc Normal file
View File

@ -0,0 +1,2 @@
shamefully-hoist=true
strict-peer-dependencies=false

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"nuxt.isNuxtApp": false
}

42
README.md Normal file
View File

@ -0,0 +1,42 @@
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
```
## Development Server
Start the development server on http://localhost:3003
```bash
npm run dev
```
## Production
Build the application for production:
```bash
npm run build
```
Locally preview production build:
```bash
npm run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

55
assets/css/Carousel/index.scss Normal file
View File

@ -0,0 +1,55 @@
.b{
background: black;
}
.Carousel-container{
margin-top: 85px;
.carousel-box{
.carousel-items{
color: var(--swipercolor);
height: var(--swiperheight);
width: var(--swiperwidth);
margin: var(--swipermargin);
padding: var(--swiperpadding);
background: var(--swiperbackground);
& > img{
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
}
.swiper::v-deep(.swiper-pagination .swiper-pagination-bullet ){
color: var(--paginationcolor);
height: var(--paginationheight);
width: var(--paginationwidth);
margin: var(--paginationmargin);
padding: var(--paginationpadding);
background: var(--paginationbackground);
}
.swiper::v-deep(.swiper-pagination .swiper-pagination-bullet-active ){
color: var(--paginationActivecolor);
height: var(--paginationActiveheight);
width: var(--paginationActivewidth);
margin: var(--paginationActivemargin);
padding: var(--paginationActivepadding);
background: var(--paginationActivebackground);
}
.swiper::v-deep(.swiper-button-next){
color: var(--buttonNextcolor);
height: var(--buttonNextheight);
width: var(--buttonNextwidth);
margin: var(--buttonNextmargin);
padding: var(--buttonNextpadding);
background: var(--buttonNextbackground);
}
.swiper::v-deep(.swiper-button-prev){
color: var(--buttonPrevcolor);
height: var(--buttonPrevheight);
width: var(--buttonPrevwidth);
margin: var(--buttonPrevmargin);
padding: var(--buttonPrevpadding);
background: var(--buttonPrevbackground);
}

34
assets/css/Carousel/media.scss Normal file
View File

@ -0,0 +1,34 @@
//media.scss
/*480px*/
/*小于*/
@media screen and (max-width: 480px) {
.Carousel-container{
height: 40vw!important;
}
.carousel-items{
height: 40vw!important;
}
}
/*880px*/
/*小于*/
@media screen and (max-width: 880px) {
}
/*1200px*/
/*小于*/
@media screen and (max-width: 1200px) {
}
/*大于*/
@media screen and (min-width: 1200px) {
}
/*1440px*/
/*小于*/
@media screen and (max-width: 1440px) {
}

219
assets/css/Final/index.scss Normal file
View File

@ -0,0 +1,219 @@
//Final.scss
.Final {
a {
text-decoration: none;
}
position: relative;
// margin-top: 100px;
.Final-float-box {
position: relative;
z-index: 99;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
.Final-float {
position: absolute;
height: 13vw;
z-index: 99;
width: 60%;
margin: 0 auto;
top: -50px;
max-height: 80px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 10px;
padding: 10px 0;
img {
width: 45px;
z-index: 1;
margin-bottom: 5px;
}
.float-items {
text-align: center;
color: white;
cursor: pointer;
}
}
}
.Final-container {
// 底部背景颜色
background: #193066;
position: relative;
color: white;
.Final-big-box {
width: 100%;
display: flex;
justify-content: space-evenly;
flex-direction: column;
margin: 0 auto;
.Final-icon-box {
height: 60px;
width: 120px;
.icon-img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
.Final-middle-box {
display: flex;
justify-content: center;
align-items: flex-start;
.Final-middle-items {
margin: 0 30px;
text-align: center;
.title-head {
font-size: 20px !important;
}
.items {
margin-bottom: 10px;
color: white;
font-size: 15px;
cursor: pointer;
}
.items-title {
font-size: 22px;
margin-bottom: 20px;
color: white;
font-weight: 600;
}
}
}
.Final-code-box {
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
margin-top: 50px;
overflow: hidden;
.code-text {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
img {
width: 50%;
height: 50%;
}
}
}
}
.Final-bottom-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
color: white;
font-size: 15px;
font-weight: bold;
// 底部版权颜色
background-color:#193066;
}
}
.phone-text {
font-size: 20px !important;
}
.Final-middle-phone-title-box {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
.Final-middle-phone-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
}
.Final-middle-phone-content{
font-size: 20px;
font-family: "CenturyGothic", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "冬青黑体", "Microsoft YaHei", "微软雅黑", Helvetica, Arial, sans-serif;
}
.Final-middle-phone-box {
// display: none;
justify-content: space-evenly;
align-items: flex-start;
margin-top: 50px;
.Final-middle-items {
margin: 0 30px;
.items {
margin-bottom: 10px;
color: #e9e9e9;
font-size: 15px;
}
.items-title {
font-size: 16px;
margin-bottom: 20px;
color: black;
font-weight: 600;
}
}
}
//share-hide-main
.share-hide-main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: rgba(0, 10, 10, 0.5);
z-index: 99999999;
height: 100vh;
width: 100vw;
position: fixed;
left: 0;
top: 0;
.share-box {
background: white;
border-radius: 10px;
padding: 5px;
height: fit-content;
width: fit-content;
max-width: 430px !important;
max-height: 430px !important;
img {
height: 100%;
width: 100%;
}
}
}

70
assets/css/Final/media.scss Normal file
View File

@ -0,0 +1,70 @@
//media.scss
/*480px*/
/*小于*/
@media screen and (max-width: 480px) {
.Final-middle-phone-box{
display: flex!important;
flex-direction: column;
}
.Final-middle-box{
display: none!important;
}
}
/*880px*/
/*小于*/
@media screen and (max-width: 880px) {
.Final-icon-box{
display: none;
}
.Final-container{
flex-direction: column;
}
.Final-middle-box{
flex-direction: column;
}
.Final-middle-items{
display: flex;
.items-title{
margin-right: 28px!important;
font-size: 14px!important;
}
.items{
margin-right: 14px!important;
font-size: 12px!important;
}
.title-head{
font-size: 20px!important;
}
}
.Final-float{
height: 18vw!important;
}
.Final-float-box{
display: none!important;
}
.Final-code-box{
display: flex!important;
}
}
/*1200px*/
/*小于*/
@media screen and (max-width: 1200px) {
.Final-icon-box{
display: none;
}
}
/*大于*/
@media screen and (min-width: 1200px) {
}
/*1440px*/
/*小于*/
@media screen and (max-width: 1440px) {
}

31
assets/css/Header/icon.scss Normal file
View File

@ -0,0 +1,31 @@
//HeaderIcon.scss
.HeaderIcon {
.HeaderIcon-container {
height: 100%;
width: 100%;
max-width: 280px;
margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
padding-top: 1px;
.HeaderIcon-box {
height: 100%;
width: 100%;
position: relative;
img {
height: 100%;
width: 100%;
object-fit: contain;
// margin-top: 9px;
}
}
}
}
// 手机端
.phone_top_logo{
display: none ;
}

94
assets/css/Header/index.scss Normal file
View File

@ -0,0 +1,94 @@
[v-cloak] {
display: none !important;
}
.search-show{
height: 70px!important;
}
.search-input-show{
height: 38px!important;
border:1px solid #ccc!important;
}
.dNone{
display: none!important;
}
.search-have{
border-bottom: 0!important;
border-radius: 20px 20px 0 0 !important;
}
//Header.scss
.Header{
margin-top: -85px;
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
z-index: 99999;
background: #fff;
// background: rgba($color: #000000, $alpha: .2);
.Header-container{
display: flex;
justify-content: space-evenly;
align-items: center;
height:85px;
font-size: 14px;
}
.search-box{
height: 0;
width: 100%;
transition: 0.4s;
z-index: 9999;
// position: fixed;
top: 60px;
left: 0;
text-align: center;
.search-hide-box{
width: 70%;
background: rgb(250, 250, 250)!important;
margin: 0 auto;
display: block;
overflow: auto;
border-radius: 0 0 20px 20px ;
text-align: left;
max-height: 500px;
.search-hide-items{
padding: 15px 21px;
cursor: pointer;
transition: 0.4s;
color: #757575;
font-weight: 550;
&:hover{
background: rgb(230, 230, 230);
}
}
}
.search-box-input{
background:none;
outline:none;
border-radius: 20px;
width: 40%;
padding: 0 20px;
height: 0;
transition: 0.4s;
margin-top: 20px;
color: #757575;
font-weight: 550;
border: none;
background: rgb(250, 250, 250)!important;
&:focus{
width: 70%;
}
}
}
}
.phone-box{
display: none;
height: 50px;
}

84
assets/css/Header/media.scss Normal file
View File

@ -0,0 +1,84 @@
//media.scss
/*480px*/
/*小于*/
@media screen and (max-width: 480px) {
.Header {
position: fixed !important;
z-index: 99;
}
.phone-box {
display: block !important;
}
}
/*1037px*/
@media screen and (min-width:1037px) {
.HeaderSearch {
display: none !important;
}
}
/*小于*/
@media screen and (max-width: 1037px) {
.Header-container {
height: 50px !important;
}
.HeaderSearch-Icon {
display: none !important;
}
.HeaderSearch {
display: flex !important;
}
.HeaderNav {
display: none !important;
}
.HeaderIcon-box {
width: 100% !important;
height: 100% !important;
}
.phone_top_logo {
display: block !important;
margin-bottom: 5px;
}
.Header-container {
display: flex;
justify-content: left !important;
padding-left: 40px;
}
}
/*1333px*/
/*小于*/
@media screen and (max-width: 1333px) {
.Header-container {
width: 100%;
}
.HeaderNav {
padding-left: 5vw !important;
}
.Header-container {
font-size: 12px !important;
}
.HeaderNav-navItems {
padding: 0 20px !important;
}
}
/*大于*/
@media screen and (min-width: 1333px) {}
/*1440px*/
/*小于*/
@media screen and (max-width: 1440px) {}

84
assets/css/Header/nav.scss Normal file
View File

@ -0,0 +1,84 @@
a {
color: black;
text-decoration: none;
}
[v-cloak] {
display: none !important;
}
//HeaderNav.scss
.HeaderNav {
//margin-right: 10%;
.HeaderNav-container {
display: flex;
justify-content: space-between;
align-items: center;
.nav-active {
display: flex;
align-items: center;
// &::before {
// content: '';
// width: 0;
// height: 0;
// position: absolute;
// bottom: -30px;
// text-align: center;
// margin: 15px 0 auto;
// transition: 0.3s;
// border-width: 0 10px 10px;
// border-style: solid;
// border-color: transparent transparent black!important;
// }
span {
color: black !important;
}
// padding: 60px 30px !important;
}
.HeaderNav-navItems {
padding: 0 25px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
// color: rgb(198, 198, 198);
color: black;
position: relative;
transition: 0.4s;
// &::before {
// content: '';
// width: 0;
// height: 0;
// position: absolute;
// bottom: -30px;
// text-align: center;
// margin: 15px 0 auto;
// transition: 0.3s;
// border-width: 0 10px 10px;
// border-style: solid;
// border-color: transparent transparent transparent;
// }
&:hover {
// &::before{
// border-color: transparent transparent black!important;
// }
span {
color: #f9b54c !important;
}
}
}
}
}

80
assets/css/Header/search.scss Normal file
View File

@ -0,0 +1,80 @@
.dNone{
display: none!important;
}
a {
text-decoration: none; /* 去除默认的下划线 */
outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
}
.app-nav{
height: 100vh;
width: 100vw;
position: fixed;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.8);
// backdrop-filter: blur(2px);
left: 0;
top:70px;
padding-top: 1px;
color: white;
user-select: none;
.app-box{
height: 80vh;
overflow-y: auto;
overflow-x: hidden;
.app-nav-items{
padding: 30px;
border-bottom: 1px solid white;
cursor: pointer;
transition: 0.4s;
display: block!important;
color: white!important;
a{
color: white!important;
}
.app-nav-second-items{
padding: 10px 0 10px 20px;
cursor: pointer;
margin-top: 30px;
}
}
}
}
//HeaderSearch.scss
.HeaderSearch{
// margin-right: 14%;
.HeaderSearch-container{
.HeaderSearch-box{
display: flex;
justify-content: center;
align-items: center;
.HeaderSearch-Icon{
cursor: pointer;
}
.HeaderSearch-button{
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
div{
height: 3px;
width: 30px;
margin: 4px 0;
background: #ffffff;
}
}
}
.HeaderSearch-search-box{
height: 20px;
width: 50px;
background: black;
}
}
}

65
assets/css/ImgDetail/index.scss Normal file
View File

@ -0,0 +1,65 @@
.ImgDetail-main {
.ImgDetail-container {
height: 100vh;
width: 100%;
background: rgba(0, 10, 10, 0.5);
z-index: 9999999;
overflow: hidden;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
left: 0;
top: 0;
.ImgDetail-box {
display: flex;
justify-content: center;
align-items: center;
.left-box {
border-radius: 50%;
height: 60px;
width: 60px;
background: rgba(0, 10, 10, 0.2);
position: absolute;
left: 1vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.right-box {
height: 60px;
width: 60px;
border-radius: 50%;
background: rgba(0, 10, 10, 0.2);
position: absolute;
right: 1vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.img-box{
height: 80vh;
width: 80vw;
img{
height: 100%;
width: 100%;
object-fit: contain;
}
}
.close-btn{
color: white;
font-size: 28px;
position: absolute;
right: 2vw;
top: 2vw;
cursor: pointer;
}
}
}
}

61
assets/css/ImgDetail/media.scss Normal file
View File

@ -0,0 +1,61 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (min-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
/*小于*/
@media screen and (max-width: 1200px) {
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
.img-box{
width: 60vw!important;
}
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
.right-box{
height: 40px!important;
width: 40px!important;
img{
height: 30px!important;
width: 30px!important;
}
}
.left-box{
height: 40px!important;
width: 40px!important;
img{
height: 30px!important;
width: 30px!important;
}
}
}

29
assets/css/Load/index.scss Normal file
View File

@ -0,0 +1,29 @@
.Load-main {
opacity: 1;
transition: 0.4s;
.Load-container {
.Load-box {
height: 100vh;
width: 100vw;
background: rgba(255, 255, 255, 1);
fill-opacity: 1;
transition: 0.4s;
position: fixed;
left: 0;
top: 0;
z-index: 9999999999;
display: flex;
justify-content: center;
align-items: center;
background-color: #0a0a0a !important;
span {
font-size: 50px;
letter-spacing: 10px;
color: var(--rootColor);
transition: 0.4s;
}
}
}
}

46
assets/css/Load/media.scss Normal file
View File

@ -0,0 +1,46 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (min-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
/*小于*/
@media screen and (max-width: 1200px) {
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
.Load-box{
top: -50px !important;
}
}

76
assets/css/Tab/index.scss Normal file
View File

@ -0,0 +1,76 @@
a{
color: black;
text-decoration: none;
}
.Tab-main{
.Tab-container{
border-radius: 10px;
.Tab-box{
background: #f5f2f0;
box-shadow: 0 5px 25px 3px rgb(0 0 0 / 10%);
padding: 20px 15%;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
flex-wrap: wrap;
width: 60vw;
.Tab-items{
margin: 15px 0;
cursor: pointer;
text-align: center;
font-size: 18px;
transition: 0.4s;
min-width: 72px;
position: relative;
._Tab-item{
transition: .4s;
&:hover {
color: #a30000;
}
&.active {
color: #a30000;
}
}
.Tab-child-box{
position: absolute;
right: calc(40% - 79px/2);
top: 35px;
z-index: 99;
background: white;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Tab-child-items{
padding: 3px 8px;
font-size: 14px;
color: #686868;
width: 79px;
}
&:after{
content: '';
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 20px;
text-align: center;
margin: 15px 0 auto;
transition: 0.3s;
border-width: 0 10px 10px;
border-style: solid;
border-color: transparent transparent #ffffff !important;
}
}
}
}
}
}

47
assets/css/Tab/media.scss Normal file
View File

@ -0,0 +1,47 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (min-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
/*小于*/
@media screen and (max-width: 1200px) {
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
.Tab-items{
width: 50%!important;
}
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
.Tab-box{
box-shadow: 0 0 25px 2px rgb(0 0 0 / 10%)!important;
}
.Tab-items{
width: 100%!important;
}
}

131
assets/css/business/news/index.scss Normal file
View File

@ -0,0 +1,131 @@
// 新闻类型
.news-titile-pos-box {
width: 100%;
display: flex;
justify-content: center;
margin: 50px 0;
.news-title-box {
display: flex;
align-items: center;
.news-title {
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: .4s;
}
.news-title:hover {
color: #f08519;
}
.news-title-active {
color: #f08519;
}
.news-title-line {
width: 1px;
height: 36px;
background-color: #999999;
margin: 0 30px;
}
}
}
// 新闻内容盒子
.news-contianer {
margin: 0px auto;
height: 300px;
width: 80%;
display: flex;
align-items: center;
padding: 10px 35px;
transition: .4s;
cursor: pointer;
margin-bottom: 35px;
}
.news-contianer:hover {
box-shadow: 0 0 15px 1px #e5e4e4;
}
.news-content-box {
height: 65%;
width: 100%;
display: flex;
overflow: hidden;
}
.news-cover-box {
overflow: hidden;
margin-right: 20px;
height: 100%;
width: 25%;
object-fit: cover;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.news-content-right-box {
width: 70%;
}
.news-title {
font-weight: normal;
font-size: 18px;
letter-spacing: 1px;
color: rgb(51, 51, 51);
}
.news-time {
font-size: 14px;
color: rgb(153, 153, 153);
margin: 15px 0px;
}
.news-intro {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
color: rgb(102, 102, 102);
width: 100%;
text-align: justify;
line-height: 22px;
}
// ted栏
.Top_navigation {
display: flex;
justify-content: center;
z-index: 9;
position: relative;
}
// 分页
.page-box {
width: 100%;
display: flex;
justify-content: center;
.page {
margin-bottom: 80px;
}
}
.news-content-sublevel {
display: flex;
justify-content: space-between;
}
.jump {
text-decoration: dashed;
color: black;
}

41
assets/css/business/news/media.scss Normal file
View File

@ -0,0 +1,41 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
.container {
max-width: 1420px;
}
}
/*小于*/
@media screen and (min-width: 1440px) {}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {}
/*小于*/
@media screen and (max-width: 1200px) {}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {}
/*小于*/
@media screen and (max-width: 880px) {
.ach-container{
float: left;
margin-top: 120px;
}
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {}
/*小于*/
@media screen and (max-width: 480px) {
.news-box{
padding: 0 !important;
}
}

45
assets/css/business/news/news_details/index.scss Normal file
View File

@ -0,0 +1,45 @@
.joint-details-pos-box {
padding-bottom: 15rem;
}
// 标题
.joint-details-title-box {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding: 0rem 0 2rem 0;
.joint-details-title {
font-size: 30px;
font-weight: bold;
font-family: '阿里妈妈数黑体';
}
.joint-details-time {
margin-top: 2rem;
}
}
.return {
width: 60px;
height: 50%;
// margin-left: 300px;
margin-top: 50px;
cursor: pointer;
}
// 翻页
.Turn-the-page {
line-height: 80px;
.Turn-the-page-box {
display: flex;
justify-content: space-between;
a {
text-decoration: dashed;
color: gray;
}
}
}

34
assets/css/business/news/news_details/media.scss Normal file
View File

@ -0,0 +1,34 @@
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {}
/*小于*/
@media screen and (min-width: 1440px) {}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {}
/*小于*/
@media screen and (max-width: 1200px) {}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {}
/*小于*/
@media screen and (max-width: 880px) {}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {}
/*小于*/
@media screen and (max-width: 480px) {
.Turn-the-page-box{
flex-direction: column;
}
.return {
display: none;
}
}

146
assets/css/index/card.css Normal file
View File

@ -0,0 +1,146 @@
.card-pos-box{
width: 100%;
margin: 150px 0;
}
.content {
width: 100%;
position: relative;
display: flex;
justify-content: center;
}
.content .card1 {
position: relative;
cursor: pointer;
height: 500px;
margin: 0 80px;
}
.content .card1 .show-wrapper {
z-index: 10;
transition: 0.4s;
}
.content .card1 .show-wrapper .pic-wrapper {
width: 300px;
height: 300px;
transition: 0.4s;
}
.content .card1 .show-wrapper .pic-wrapper img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.content .card1 .show-wrapper .title {
margin: 10px 0;
}
.content .card1 .show-wrapper .show-info {
display: flex;
flex-direction: row;
color: #cccccc;
justify-content: space-between;
}
.content .card1 .show-wrapper .show-info .show-info-item svg {
width: 30px;
height: 30px;
vertical-align: middle;
}
.content .card1 .hover-wrapper {
display: none;
position: relative;
flex-direction: column;
align-items: center;
opacity: 1;
transition: 0.5s;
}
.content .card1 .hover-wrapper .hover-info {
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
font-size: 2vw;
}
.content .card1 .hover-wrapper .hover-info .info-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
font-size: 0.8vw;
color: #cccccc;
}
.content .card1 .hover-wrapper .hover-info .line {
width: 2px;
height: 4vh;
margin: 0 1vw;
background: #cccccc;
}
.content .card1 .hover-wrapper .btn {
width: 90%;
margin-top: 1.5vh;
border-radius: 50px;
background-color: rgb(67, 119, 216);
border: 0;
font-size: 1vw;
cursor: pointer;
color: #fff;
}
.content .card1 .background {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
z-index: -1;
transition: 0.5s;
transform: scale(0.2, 0.9);
opacity: 0;
height: 80%;
box-shadow: 0px 10px 32px 1px rgb(221, 219, 219);
background-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 20%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%), url(http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.content .card1:hover .show-wrapper {
transform: translateY(-25%);
}
.content .card1:hover .show-wrapper .pic-wrapper {
transform: scale(0.8);
}
.content .card1:hover .show-wrapper .title {
animation: nameAmt 0.5s ease-in-out forwards;
}
.content .card1:hover .show-wrapper .show-info {
opacity: 0;
}
.content .card1:hover .hover-wrapper {
animation: hoverWrapperAmt 0.5s ease-in-out forwards;
display: flex;
transform: translateY(-100%);
}
.content .card1:hover .background {
opacity: 1;
transform: scale(1.1);
}
@keyframes nameAmt {
0% {
opacity: 0;
text-align: center;
}
100% {
opacity: 1;
text-align: center;
transform: translateY(-55%);
}
}
@keyframes hoverWrapperAmt {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}/*# sourceMappingURL=style.css.map */

116
assets/css/index/index.scss Normal file
View File

@ -0,0 +1,116 @@
.box{
width: 100%;
// background-color: black;
}
// 米尔产品
.product-big-box{
background-color: #f8f8f8;
padding: 100px 0 100px 0;
}
.product-pos-box {
margin: 0 auto;
width: 85%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.product-title-box {}
.product-title {
letter-spacing: 3px;
font-size: 35px;
font-weight: bold;
}
.product-type-box {
padding: 10px;
margin: 30px 0px;
display: flex;
justify-content: space-around;
align-items: center;
}
.product-typ-item {
font-size: 18px;
margin: 0px 50px 0px 0px;
cursor: pointer;
}
.product-content-box {
width: 72%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20px;
}
.product-content-left-box {
overflow: hidden;
height: 300px;
width: 45%;
box-shadow: rgb(219, 219, 219) 0px 0px 10px 1px;
border-radius: 10px;
// transform: translateY(-10px);
}
.product-content-left-box img {
width: 100%;
height: 100%;
}
.product-content-right-box {
height: 300px;
width: 50%;
}
.product-content-right-intro {
font-size: 16px;
color: rgb(155, 155, 155);
}
.product-advantage-pos-box {
display: flex;
justify-content: space-around;
align-items: center;
margin: 50px 0 0 0px;
}
.product-advantage-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.product-advantage-img-box {
height: 45px;
width: 45px;
margin: 0px 0px 10px;
}
.product-advantage-img-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.product-advantage-text {
width: 70px;
font-size: 16px;
color: rgb(130, 130, 130);
text-align: center;
}
.product-content-btn-box {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}

44
assets/css/index/media.scss Normal file
View File

@ -0,0 +1,44 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (min-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
/*小于*/
@media screen and (max-width: 1200px) {
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
}

1
assets/css/index/style.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,SAAA;ACCJ;;ADEA;EACI,oCAAA;EACA,uCAAA;EACA,yBAAA;EACA,4BAAA;EACA,WAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;ACCJ;ADAI;EACI,kBAAA;ACER;ADDQ;EACI,WAAA;EACA,gBAAA;ACGZ;ADFY;EACI,YAAA;EACA,aAAA;EACA,gBAAA;ACIhB;ADHgB;EACI,WAAA;EACA,YAAA;EACA,mBAAA;ACKpB;ADFY;EACI,cAAA;ACIhB;ADFY;EACI,aAAA;EACA,mBAAA;EACA,cAAA;EACA,8BAAA;ACIhB;ADFoB;EACI,WAAA;EACA,YAAA;EACA,sBAAA;ACIxB;ADCQ;EACI,aAAA;EACA,kBAAA;EACA,sBAAA;EACA,mBAAA;EACA,UAAA;EACA,gBAAA;ACCZ;ADAY;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,cAAA;ACEhB;ADDgB;EACI,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ACGpB;ADFoB;EACI,gBAAA;EACA,cAAA;ACIxB;ADDgB;EACI,UAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;ACGpB;ADAY;EACI,UAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,mCAAA;EACA,SAAA;EACA,cAAA;EACA,eAAA;EACA,WAAA;ACEhB;ADCQ;EACI,sBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,WAAA;EACA,gBAAA;EACA,0BAAA;EACA,UAAA;EACA,WAAA;EACA,gDAAA;EACA,kKAAA;EAOA,sBAAA;EACA,4BAAA;EACA,wBAAA;ACLZ;ADQY;EACI,2BAAA;ACNhB;ADOgB;EACI,qBAAA;ACLpB;ADOgB;EACI,4CAAA;ACLpB;ADOgB;EACI,UAAA;ACLpB;ADQY;EACI,oDAAA;EACA,aAAA;EACA,4BAAA;ACNhB;ADQY;EACI,UAAA;EACA,qBAAA;ACNhB;;ADYA;EACI;IACI,UAAA;IACA,kBAAA;ECTN;EDWE;IACI,UAAA;IACA,kBAAA;IACA,2BAAA;ECTN;AACF;ADYA;EACI;IACI,UAAA;ECVN;EDYE;IACI,UAAA;ECVN;AACF","file":"style.css"}

36
assets/css/poster/index.scss Normal file
View File

@ -0,0 +1,36 @@
.Poster-main{
position: relative;
.Poster-container{
position: relative;
height: 30vw;
width: 100%;
margin-top: 85px;
.Poster-img{
height: 100%;
width: 100%;
position: absolute;
left: 0 ;
bottom: 0 ;
object-fit: cover;
// object-position: 0 40%;
}
.Poster-content-box{
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
.Poster-title{
font-size: 36px;
font-weight: 900;
margin-bottom: 30px;
}
.Poster-text{
font-size: 20px;
}
}
}
}

42
assets/css/poster/media.scss Normal file
View File

@ -0,0 +1,42 @@
//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (max-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
/*小于*/
@media screen and (max-width: 1440px) {
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
.Poster-title{
font-size: 22px!important;
}
.Poster-text{
font-size: 12px!important;
}
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
.Poster-text{
display: none !important;
}
}

943
assets/css/root/animation.scss Normal file
View File

@ -0,0 +1,943 @@
//animation.scss
/*动画从右往左进入效果*/
.slide-in-blurred-right {
-webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
/*动画从左往右出去效果*/
}
.slide-out-blurred-right {
-webkit-animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-8 14:24:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-blurred-right
* ----------------------------------------
*/
@-webkit-keyframes slide-out-blurred-right {
0% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
transform: translateX(1000px) scaleX(2) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
@keyframes slide-out-blurred-right {
0% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
transform: translateX(1000px) scaleX(2) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
/*动画从上往下进入*/
.slide-in-blurred-top {
-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-8 15:15:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-blurred-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
/*动画从左往右进入效果*/
.slide-in-blurred-left {
-webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-14 9:41:31
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-blurred-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
// 弹动
.bounce-in-fwd {
-webkit-animation: bounce-in-fwd 1.1s both;
animation: bounce-in-fwd 1.1s both;
}
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
// 侧边切入
.tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 11:53:18
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation bounce-in-fwd
* ----------------------------------------
*/
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.slide-in-elliptic-top-fwd {
-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
// 字体
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.slide-in-elliptic-top-fwd {
-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-27 8:52:52
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-elliptic-top-fwd
* ----------------------------------------
*/
@-webkit-keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
}
@keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
}
.slide-out-elliptic-top-bck {
-webkit-animation: slide-out-elliptic-top-bck 0.7s ease-in both;
animation: slide-out-elliptic-top-bck 0.7s ease-in both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-27 8:55:0
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-elliptic-top-bck
* ----------------------------------------
*/
@-webkit-keyframes slide-out-elliptic-top-bck {
0% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
100% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
@keyframes slide-out-elliptic-top-bck {
0% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
100% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
/*动画从右到左进入慢速效果*/
.slide-in-right {
-webkit-animation: slide-in-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:47:38
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/*动画从左到右进入慢速效果*/
.slide-in-left {
-webkit-animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:48:33
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/*动画从下往上进入慢速效果*/
.slide-in-bottom {
-webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:49:11
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/*动画从上往下进入慢速效果*/
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:50:5
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

92
assets/css/root/media.scss Normal file
View File

@ -0,0 +1,92 @@
//media.scss
.--box--{
width: 100%;
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
.--box--{
width: 95%;
margin: 0 auto;
}
}
/*小于*/
@media screen and (max-width: 480px) {
.--box--{
width: 100%;
}
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
.--box--{
width: 840px;
margin: 0 auto;
}
}
/*小于*/
@media screen and (max-width: 880px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
.--box--{
width: 1140px;
margin: 0 auto;
}
}
/*小于*/
@media screen and (max-width: 1200px) {
}
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
.--box--{
width: 1380px;
margin: 0 auto;
}
}
/*小于*/
@media screen and (max-width: 1440px) {
}
// media.scss
// /*1440px*/
// /*大于*/
// @media screen and (min-width: 1440px) {
// }
// /*小于*/
// @media screen and (max-width: 1440px) {
// }
// /*1200px*/
// /*大于*/
// @media screen and (min-width: 1200px) {
// }
// /*小于*/
// @media screen and (max-width: 1440px) {
// }
// /*880px*/
// /*大于*/
// @media screen and (min-width: 880px) {
// }
// /*小于*/
// @media screen and (max-width: 880px) {
// }
// /*480px*/
// /*大于*/
// @media screen and (min-width: 480px) {
// }
// /*小于*/
// @media screen and (max-width: 480px) {
// }

67
assets/css/root/root.scss Normal file
View File

@ -0,0 +1,67 @@
$rootColor : #193066;
body{
// background-color: #0a0a0a;
font-family: Inter;
}
:root{
--rootColor:#193066;
}
.dNone{
display: None!important;
}
.f1{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.f2{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.f3{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.f4{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.f5{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.op0{
opacity: 0;
}
*{
font-family:华文细黑;
font-weight: 550;
}
.rootBg{
background-color: $rootColor;
}
.rootFc{
color: $rootColor;
}
.list_none animate__animated animate__fadeIn{
width: 100%;
display: flex;
justify-content: center;
}

5
assets/css/test/test.css Normal file
View File

@ -0,0 +1,5 @@
.test_box{
width: 100px;
height: 100px;
background-color: red;
}

BIN
assets/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

121
components/Booth/index.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div class="tb-booth"
@mouseover="onMouseOver"
@mouseout="onMouseOut"
@mousemove="onMouseMove"
ref="boothRef"
:style="option"
>
<img :src=modelValue />
<div class="mask" ref="mask" v-show="state.boxShow" />
<div class="big-img_box" ref="bigImgBox" v-show="state.boxShow">
<img class="big-img" ref="bigImg"
:src=modelValue />
</div>
</div>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: Object,
default(v) {
return v;
}
},
option: {
type: Object,
default: null
}
});
const boothRef = ref(null);
const mask = ref(null);
const bigImg = ref(null);
const bigImgBox = ref(null);
const state = reactive({
boxShow: false
});
const onMouseOver = () => {
state.boxShow = true;
};
const onMouseOut = () => {
state.boxShow = false;
};
const onMouseMove = (e) => {
let x = e.pageX - boothRef.value.offsetLeft;
let y = e.pageY - boothRef.value.offsetTop;
let maskX = x - mask.value.offsetWidth / 2;
let maskY = y - mask.value.offsetHeight / 2;
// mask的x最大移动距离
let maskXMaxMove = boothRef.value.offsetWidth - mask.value.offsetWidth;
let maskYMaxMove = boothRef.value.offsetHeight - mask.value.offsetHeight;
let bigImgXMaxMove =
bigImgBox.value.offsetWidth - bigImg.value.offsetWidth;
let bigImgYMaxMove =
bigImgBox.value.offsetHeight - bigImg.value.offsetHeight;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskXMaxMove) {
maskX = maskXMaxMove;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskYMaxMove) {
maskY = maskYMaxMove;
}
mask.value.style.left = maskX + "px";
mask.value.style.top = maskY + "px";
// 大图片移动距离 = mask的移动距离*大盒子最大移动距离 / mask的x最大移动距离
let bixImgXMove = (maskX * bigImgXMaxMove) / maskXMaxMove;
let bixImgYMove = (maskY * bigImgYMaxMove) / maskYMaxMove;
bigImg.value.style.left = bixImgXMove + "px";
bigImg.value.style.top = bixImgYMove + "px";
};
</script>
<style lang="scss" scoped>
.tb-booth {
width: 100%;
height: 100%;
position: relative;
border: 1px solid #cccccc;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgb(61, 110, 206);
opacity: 0.5;
cursor: move;
}
.big-img_box {
position: absolute;
top: 0;
left: 530px;
width: 500px;
height: 500px;
background-color: #fff;
border: 1px solid #cccccc;
overflow: hidden;
}
.big-img {
position: absolute;
left: 0;
top: 0;
z-index: 99;
}
</style>

128
components/Carousel/index.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div class="Carousel-container" :style="styleContainer">
<!--
initialSlide：默认选中第几张
modules：引入模块
navigation：左右的按钮
pagination：分页器导航
autoplay：自动播放
loop：循环
swiperStyle：自定义样式
-->
<swiper id="swiper" ref="swiperRef"
:initialSlide="0"
:modules="modules"
:navigation="{ clickable: true }"
:pagination="{ clickable: true }"
:autoplay="{delay: 10000}"
:loop="true"
:style="swiperStyle"
class="carousel-box"
>
<swiper-slide v-for="item in banner_list">
<div class="carousel-items animate__animated animate__fadeIn animate__slow">
<img alt="" :src="item.banner_img">
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script setup>
// 引入模块
import { Pagination, Navigation, Autoplay } from 'swiper'
// noinspection ES6CheckImport
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
// 获取轮播图列表
const banner_list = ref([
{
// banner_img:`/img/loading.gif`,
},
])
const params = reactive({
page: 1,
limit: 10
})
// const getBannerListFun = async () => {
// await get("/Banner.Banner/getBannerList", params).then(res => {
// let data = JSON.parse(res.value).data
// banner_list.value = data
// }).catch((err) => {
// })
// }
//
// setTimeout(() => {
// (async () => {
// await getBannerListFun()
// })()
// })
// 获取海报
useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
banner_list.value = JSON.parse(res.data.value).data
})
/**整体轮播图样式*/
let styleContainer = reactive({
height: '33vw',
})
const modules = ref([Pagination, Navigation, Autoplay])
const swiperStyle = conversionStyleVal(reactive({
/**轮播图样式*/
color: '', //设置字体颜色
height: '33vw', //设置高度
width: '100%', //设置高度
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
background: '', //设置背景颜色
/**右边按钮样式*/
buttonNext: {
color: 'rgb(255, 255, 255,0.5)', //设置字体颜色
height: '', //设置高度
width: '', //设置高度
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
background: '' //设置背景颜色
},
/**左边按钮样式*/
buttonPrev: {
color: 'rgb(255, 255, 255,0.5)', //设置字体颜色
height: '', //设置高度
width: '', //设置高度
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
background: '' //设置背景颜色
},
/**小圆点样式*/
pagination: {
color: '', //设置字体颜色
height: '8px', //设置高度
width: '8px', //设置高度
margin: '0 10px ', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
background: 'rgb(255, 255, 255)' //设置背景颜色
},
/**选中的小圆点样式*/
paginationActive: {
color: '', //设置字体颜色
height: '8px', //设置高度
width: '8px', //设置高度
margin: '0 10px', //设置margin 按照上 右 下 左 或 上下 左右 设置
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
background: 'rgb(255, 255, 255)' //设置背景颜色
}
}), 'swiper')
</script>
<style scoped src="~/assets/css/Carousel/index.scss"></style>
<style scoped src="~/assets/css/Carousel/media.scss"></style>

171
components/Final/index.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<div class="share-hide-main animate__animated animate__fadeIn " @click.self="closeShare" v-show="showShare">
<div class="share-box">
<!-- <img id="code-box" src="/img/wx_qrcode.jpg" alt=""> -->
</div>
</div>
<div class="Final op0" data-animation="animate__animated animate__fadeInUp">
<!-- <div class="Final-float-box ">
<div class="Final-float rootBg">
<template v-for="item in shareList">
<div class="float-items" @click="createShareCode(item.contact_scancode_img)">
<img :src="item.contact_scancode_icon" alt="">
<div>{{ item.contact_scancode_title }}</div>
</div>
</template>
</div>
</div> -->
<div class="Final-container" :style="FinalStyle">
<div class="Final-big-box">
<!-- <div class="Final-icon-box" :style="FinalStyle.FinalLeft">
<img src="/img/icon/logo1.ico" class="icon-img" alt="">
</div> -->
<div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
<div class="Final-middle-items">
<div class="items-title">关于我们</div>
<nuxt-link to="/about/intro/0">
<div class="items">厚德简介</div>
</nuxt-link>
<nuxt-link to="/about/env/1-1">
<div class="items">教学环境</div>
</nuxt-link>
<nuxt-link to="/about/history/2">
<div class="items">发展历程</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">招生报名</div>
<nuxt-link to="/signUp/signUp_introduction/0-1">
<div class="items">招生简介</div>
</nuxt-link>
<nuxt-link to="/signUp/classes_intro/1-1">
<div class="items">班型介绍</div>
</nuxt-link>
<nuxt-link to="/signUp/enrol_aq/2">
<div class="items">招生回答</div>
</nuxt-link>
<nuxt-link to="/signUp/signup_way/3">
<div class="items">报名方式</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">师资力量</div>
<nuxt-link to="/teachers/0">
<div class="items">教师列表</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">荣誉成绩</div>
<nuxt-link to="/achievement/school_achievement/0">
<div class="items">录取院校</div>
</nuxt-link>
<nuxt-link to="/achievement/joint_achievement/1-1">
<div class="items">联考成绩</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">作品欣赏</div>
<nuxt-link to="/works/0">
<div class="items">作品列表</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">艺考资讯</div>
<nuxt-link to="/news/0-1">
<div class="items">资讯列表</div>
</nuxt-link>
</div>
<div class="Final-middle-items">
<div class="items-title">联系我们</div>
<nuxt-link to="/contactUs/contact_info/0">
<div class="items">联系方式</div>
</nuxt-link>
<nuxt-link to="/contactUs/signup/1">
<div class="items">在线报名</div>
</nuxt-link>
<nuxt-link to="/contactUs/leave_message/2">
<div class="items">用户留言</div>
</nuxt-link>
<nuxt-link to="/contactUs/join_apply/3">
<div class="items">合作加盟</div>
</nuxt-link>
</div>
</div>
</div>
<div class="Final-middle-phone-box">
<div class="Final-middle-phone-title-box">
<div class="Final-middle-phone-title">全国咨询热线</div>
<div class="Final-middle-phone-content-box">
<div v-for="(item, index) in bottomData.hoteline" class="Final-middle-phone-content">
{{ item.consulting_hotline_user }} : {{ item.consulting_hotline_phone }}
</div>
</div>
</div>
</div>
<!-- <div class="Final-code-box">
<div class="code-text">扫描关注微信公众号</div>
<img :src=bottomData.wx_office_accounts_img alt="微信公众号图片">
</div> -->
<div class="Final-bottom-box">©2023 米尔科技有限公司 版权所有</div>
</div>
</div>
</template>
<script setup>
// 样式配置
const FinalStyle = {
padding: "80px 0 0 0",
FinalLeft: {
},
FinalMiddle: {
},
}
let shareList = ref([
// {
// contact_scancode_icon: '',
// contact_scancode_img: '',
// contact_scancode_title: '--'
// },
// {
// contact_scancode_icon: '/img/icon/wbIcon.png',
// contact_scancode_img: '',
// contact_scancode_title: '微博'
// },
// {
// contact_scancode_icon: '/img/icon/qqIcon.png',
// contact_scancode_img: '',
// contact_scancode_title: 'QQ'
// },
])
let showShare = ref(false)
const closeShare = function () {
showShare.value = false
}
const createShareCode = function (code) {
showShare.value = true
document.getElementById('code-box').src = code
}
// 获取
let bottomData = ref({})
useFetch('/api/contactUs/getContactInfo').then(res => {
let resValue = JSON.parse(res.data.value).data
bottomData.value = resValue
shareList.value = resValue.qrcode
})
onMounted(() => {
htmlAddAnimations()
})
</script>
<style lang="scss" scoped src="~/assets/css/Final/index.scss"></style>
<style lang="scss" scoped src="~/assets/css/Final/media.scss"></style>

29
components/Header/HeaderIcon.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="HeaderIcon" :style="[HeaderIcon]">
<div class="HeaderIcon-container">
<nuxt-link to="/" >
<div class="HeaderIcon-box">
<img class="pc_top_logo" id="top_logo" src="/img/icon/logo.png" alt="">
</div>
</nuxt-link>
</div>
</div>
</template>
<script>
export default {
name: "HeaderIcon",
props:{
HeaderIcon:Object
},
setup(prop){
return {
...prop
}
}
}
</script>
<style scoped src="~/assets/css/Header/icon.scss" lang="scss"></style>
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>

23
components/Header/HeaderNav.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="HeaderNav" :style="[props.HeaderNav]">
<div class="HeaderNav-container">
<nuxt-link :to="item.href" :class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
v-for="item in props.navList" v-cloak :key="item.name">
<span>{{ item.name }}</span>
</nuxt-link>
</div>
</div>
</template>
<script setup>
const props = defineProps({
HeaderNav: Object,
navList: Array
})
const route = useRouter()
const currentRoute = route.currentRoute.value.matched[0]['name']
const con = console
</script>
<style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>

61
components/Header/HeaderSearch.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="HeaderSearch" :style="[props.HeaderSearch]">
<div class="HeaderSearch-container">
<div class="HeaderSearch-box">
<!-- <img src="/img/icon/searchIcon.png" @click="showSearchBox" class="HeaderSearch-Icon" alt=""> -->
<div class="HeaderSearch-button" @click="toggleAppNavShow">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow" :style="props.appNav" @click="closeAppNavShow($event)">
<div class="app-box" @click="closeAppNavShow($event)">
<nuxt-link :to="item.href" class="app-nav-items" v-for="item in props.navList" :key="item.name" @click="appNavItemEvent(item,$event)">
<div >{{item.name}}</div>
<div class="app-nav-second-items animate__animated animate__fadeIn dNone" v-for="_item in item.children" :key="_item.name" >
<nuxt-link :to="item.href">{{_item.name}}</nuxt-link>
</div>
</nuxt-link>
</div>
</div>
</div>
</template>
<script setup>
const appNavShow = ref(false)
const props = defineProps({
HeaderSearch:Object,
appNav:Object,
navList:Array
})
const emit = defineEmits(['showSearchBox'])
const appNavItemEvent = function (item,e){
if(item.children.length!==0){
let tag = e.target
tag.classList.toggle('active');
[...tag.children].filter(item=>item.nodeName==='DIV').map(item=>{
item.classList.toggle('dNone')
})
}
}
const toggleAppNavShow = function (){
appNavShow.value = !appNavShow.value
}
const closeAppNavShow = function (e){
let tag = e.target
if(tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className==='app-box'){
appNavShow.value = false
document.body.style.overflowY = 'auto'
}
}
const showSearchBox = function (){
emit('showSearchBox')
}
</script>
<style scoped src="~/assets/css/Header/search.scss" lang="scss"></style>

135
components/Header/index.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div class="Header " >
<div class="Header-container" :style="[HeaderStyleOption]">
<HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
<HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
<HeaderSearch :HeaderSearch="HeaderStyleOption.HeaderSearch" :appNav="HeaderStyleOption.appNav" :navList="navList"
@showSearchBox="showSearchBox"></HeaderSearch>
</div>
<div class="search-box ">
<input type="text" class="search-box-input " @blur="showSearchHideBox([])" @input="searchEvent">
<div class="search-hide-box ">
<div class="search-hide-items" v-for="item in searchRes">
<nuxtLink :to="item.href">
{{ item.txt }}
</nuxtLink>
</div>
</div>
</div>
</div>
<div class="phone-box">
</div>
</template>
<script setup>
import HeaderIcon from "./HeaderIcon.vue";
import HeaderNav from "./HeaderNav.vue";
import HeaderSearch from "./HeaderSearch.vue";
const route = useRouter()
/**样式配置*/
const HeaderStyleOption = reactive({
/**导航样式*/
HeaderNav: {
'padding-left': '25vw'
},
/**icon样式*/
HeaderIcon: {
},
/**搜索样式*/
HeaderSearch: {
position: ' absolute',
right: '20px',
},
/**手机菜单栏样式*/
appNav: {
top: ' 0',
height: '100%',
width: '100%'
}
})
let info_article_type_id = ref(0)
// '/product'
// '/product/child'
// 'child'
let navList = [
{
name: '首页',
children: [],
href: '/',
alias: 'index'
},
{
name: '产品中心',
children: [],
href: 'https://gitee.com/zhi-lan_0/aerowen-toolbox',
alias: 'Gitee'
},
{
name: '服务与支持',
children: [],
href: 'https://github.com/Abbh1/AerwenTool',
alias: 'GitHub'
},
{
name: '新闻中心',
children: [],
href: '/news/0-1',
alias: 'news'
},
{
name: '关于我们',
children: [],
href: 'https://github.com/Abbh1/AerwenTool',
alias: 'GitHub'
},
]
// [
// {
// txt:'123',
// href:''
// }
// ]
let searchRes = ref(null)
const showSearchBox = function () {
document.getElementsByClassName('search-box')[0].classList.toggle('search-show')
document.getElementsByClassName('search-box-input')[0].classList.toggle('search-input-show')
}
let timer = null
const searchEvent = function (e) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
let searchVal = e.target.value
// get('请求接口',searchVal).then((res)=>{
// showSearchHideBox(res)
// })
// showSearchHideBox(res)
}, 1000)
}
const showSearchHideBox = function (data) {
searchRes.value = data
if (data && data.length !== 0) {
document.getElementsByClassName('search-box-input')[0].classList.add('search-have')
} else {
document.getElementsByClassName('search-box-input')[0].classList.remove('search-have')
}
}
</script>
<style lang="scss" scoped src="~/assets/css/Header/index.scss"></style>
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style>

66
components/ImgDetail/index.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="ImgDetail-main" ref="ImgDetail-main" @click="closeImgDetail($event)" style="display: none">
<div class="ImgDetail-container" >
<div class="ImgDetail-box">
<div class="close-btn" @click="closeImgDetail($event)">X</div>
<div class="left-box">
<img src="/img/leftImgDetailIcon.png" title="图片" alt="暂无图片"
@click="leftEvent">
</div>
<div class="right-box">
<img src="/img/rightImgDetailIcon.png" title="图片" alt="暂无图片"
@click="rightEvent">
</div>
<div class="img-box">
<template v-for="(item,idx) in props.imgList">
<img v-show="idx === imgIdx" :src="item" alt="">
</template>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
imgList:Array,
imgIdx:Number
})
const emits = defineEmits()
const imgIdx = ref(props.imgIdx)
const closeImgDetail = function (e){
document.getElementsByClassName('ImgDetail-main')[0].style.display='none'
}
const leftEvent = function (){
if(!imgIdx.value <= 0){
imgIdx.value -=1
emits('left')
}
}
const rightEvent = function (){
if(imgIdx.value < props.imgList.length-1){
imgIdx.value += 1
emits('right')
}
}
watch(props,nv=>{
imgIdx.value = nv.imgIdx
})
defineExpose({
showImgDetail(){
document.getElementsByClassName('ImgDetail-main')[0].style.display='block'
}
})
</script>
<style scoped src="~/assets/css/ImgDetail/index.scss"></style>
<style scoped src="~/assets/css/ImgDetail/media.scss"></style>

124
components/Load/index.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="Load-main">
<div class="Load-container">
<div class="Load-box">
<template v-for="(item,idx) in _loadTxt">
<span class="Load-txt op0" v-html="item" :style="'--delayTime:'+idx*0.5+'s'"></span>
</template>
</div>
</div>
</div>
</template>
<script setup>
/**
*
* Load:
* @author:黄勇文
* @example:
* <Load
* :loadTxt='这是你要传入的动画文本'
* :speed='这是你要传入的文本显示时间'
* :chockTime='这是等待文本隐藏的间隔时间'
* />
* */
const props = defineProps({
loadTxt:{
type:String,
default:'Aerwen 工具箱'
},
speed:{
type:Number,
default:150,
},
chockTime:{
type:Number,
default:2000
}
})
/**配置项**/
/**动画文本**/
let loadTxt = props.loadTxt || 'Aerwen 工具箱'
/**动画速度**/
let speed = props.speed || 150
/**等待文本隐藏时间**/
let chockTime = props.chockTime || 2000
/**格式优化**/
let _loadTxt = (()=>{
let res = [],
_i = 0
for (let i = 0; i < loadTxt.length; i++) {
let item = loadTxt[i]
let _item = item === ' ' ? '&nbsp;' : item
if(_item === '&nbsp;'){
res[_i] += _item
}else{
_i = i
res.push(_item)
}
}
return res
})()
onMounted(()=>{
document.body.style.overflowY='hidden'
/**动画显示执行**/
;(()=>{
;[...document.getElementsByClassName('Load-txt')].map((item,idx)=>{
setTimeout(()=>{
item.classList.remove('op0')
},idx*speed)
})
})();
/**动画隐藏执行**/
let hideAnimation = (async ()=>{
/**阻塞动画**/
await chockAnimation()
let oTxt = [...document.getElementsByClassName('Load-txt')]
let b = 0
await new Promise(r=>{
for (let i = oTxt.length-1; i >= 0; i--) {
b+=1
let item = oTxt[i]
setTimeout((b)=>{
item.classList.add('op0')
if(b===oTxt.length){
r(true)
}
},b*speed,b)
}
})
/**显示页面**/
await new Promise(r=>{
setTimeout(()=>{
r(true)
},1000)
})
;(()=>{
document.getElementsByClassName('Load-box')[0].style.background = 'rgba(255,255,255,0)'
setTimeout(()=>{
document.getElementsByClassName('Load-box')[0].style.display = 'none'
document.body.style.overflowY='auto'
},400)
})()
})();
function chockAnimation(){
return new Promise(r=>{
setTimeout(()=>{
r(true)
},chockTime)
})
}
})
</script>
<style scoped src="~/assets/css/Load/index.scss"></style>
<style scoped src="~/assets/css/Load/media.scss"></style>

247
components/Map/index.vue Normal file
View File

@ -0,0 +1,247 @@
<template>
<!-- <client-only> -->
<div class="map-wrapper">
<div id="mapcontainer"></div>
<div class="search-box">
<el-autocomplete v-if="props.isSearch" v-model="location.address" :fetch-suggestions="handleSearch"
:trigger-on-focus="false" clearable placeholder="输入城市+关键字搜索" @select="handleSelect"
style="width: 300px" />
<el-input v-if="props.isShowInput" v-model="location.longitude" placeholder="选择经度" maxlength="15" readonly
style="width: 150px; margin: 0 10px 0 20px"></el-input>
<el-input v-if="props.isShowInput" v-model="location.latitude" placeholder="选择纬度" maxlength="15" readonly
style="width: 150px"></el-input>
</div>
</div>
<!-- </client-only> -->
</template>
<script setup>
const props = defineProps({
// v-model (经纬度)
modelValue: {
type: Object,
default(v) {
return v;
}
},
// 是否显示搜索
isSearch: {
type: Boolean,
default: true
},
// 是否可以点击
isClick: {
type: Boolean,
default: true
},
// 是否展示当前经纬度
isShowInput: {
type: Boolean,
default: true
},
mapCb: {
type: Function,
default: function () {
}
}
});
const emit = defineEmits(['update:modelValue']);
const map = shallowRef(null);
const location = ref(props.modelValue);
onMounted(async () => {
// if (process.client) {
await initMap();
// }
});
watch(location.value, val => {
// if (process.client) {
if (val.longitude && val.latitude) {
drawMarker();
}
// }
});
const keyword = ref('');
let placeSearch, AMapObj, marker, geocoder;
async function initMap() {
const AMapLoader = await import('@amap/amap-jsapi-loader');
AMapLoader.load({
key: '582deef9a68a17068f3b7e291807045d', // 申请好的Web端Key，首次调用 load 时必填
version: '2.0'
}).then(async AMap => {
await props.mapCb()
AMapObj = AMap;
map.value = new AMap.Map('mapcontainer');
// 添加点击事件
if (props.isClick) {
map.value.on('click', onMapClick);
}
if (location.value.longitude) {
drawMarker();
}
AMap.plugin(
[
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.Geocoder'
],
() => {
// 缩放条
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
// 定位
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RT', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
});
geocoder = new AMap.Geocoder({
city: '全国'
});
map.value.addControl(geolocation);
map.value.addControl(toolbar);
map.value.addControl(scale);
placeSearch = new AMap.PlaceSearch({
map: map.value,
city: '',
pageSize: 30, // 单页显示结果条数
pageIndex: 1, // 页码
citylimit: false, // 是否强制限制在设置的城市内搜索
autoFitView: true
});
}
);
});
}
// 搜索地图
function handleSearch(queryString, cb) {
placeSearch.search(queryString, (status, result) => {
if (result && typeof result === 'object' && result.poiList) {
const list = result.poiList.pois;
list.forEach(item => {
item.value = item.name;
item.label = item.name;
});
cb(list);
} else {
cb([]);
}
});
}
// 点击地图
function onMapClick(e) {
const { lng, lat } = e.lnglat;
// 逆地理编码
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
const { addressComponent, formattedAddress } = result.regeocode;
let { city, province, district } = addressComponent;
if (!city) {
// 直辖市
city = province;
}
// location.value = {
// longitude: lng,
// latitude: lat,
// address: formattedAddress,
// zone: [province, city, district],
// };
location.value.longitude = lng;
location.value.latitude = lat;
location.value.address = formattedAddress;
location.value.zone = [province, city, district];
}
});
}
// 点击搜索项
function handleSelect(item) {
// const { pname, cityname, adname, address, name } = item;
const { lng, lat } = item.location;
// 逆地理编码
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
const { addressComponent, formattedAddress } = result.regeocode;
let { city, province, district } = addressComponent;
if (!city) {
// 直辖市
city = province;
}
// location.value = {
// longitude: lng,
// latitude: lat,
// address: formattedAddress,
// zone: [province, city, district],
// };
location.value.longitude = lng;
location.value.latitude = lat;
location.value.address = formattedAddress;
location.value.zone = [province, city, district];
}
});
// location.value = {
// longitude: lng,
// latitude: lat,
// address,
// zone: [pname, cityname, adname],
// name
// };
// location.value.longitude = lng;
// location.value.latitude = lat;
// location.value.address = address;
// location.value.name = name;
// location.value.zone = [pname, cityname, adname];
map.value.setZoomAndCenter(16, [lng, lat]);
}
// 绘制地点marker
function drawMarker(val) {
const { longitude, latitude } = location.value || val;
if (marker) {
marker.setMap(null);
}
marker = new AMapObj.Marker({
position: new AMapObj.LngLat(longitude, latitude),
anchor: 'bottom-center'
});
map.value.add(marker);
map.value.setZoomAndCenter(16, [longitude, latitude]);
}
</script>
<style lang="scss" scoped>
.map-wrapper {
position: relative;
width: 100%;
height: 400px;
display: flex;
#mapcontainer {
width: 100%;
height: 100%;
}
.search-box {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
</style>

118
components/Pagination/index.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination large background v-model:current-page="currentPage" v-model:page-size="pageSize" :layout="layout"
:page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</template>
<script>
// import { scrollTo } from "@/utils/scroll-to";
import { computed } from 'vue'
export default {
name: 'pagingation',
emits: ['update:page', 'update:limit', 'pagination'],
props: {
total: {
required: true,
type: Number,
},
page: {
type: Number,
default: 1,
},
limit: {
type: Number,
default: 10,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50, 100]
},
},
// 移动端页码按钮的数量端默认值5
pagerCount: {
type: Number,
default: 7,
},
layout: {
type: String,
default: 'total, prev, pager, next, jumper',
},
background: {
type: Boolean,
default: true,
},
autoScroll: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
},
setup(props, { ctx, emit }) {
const currentPage = computed({
get() {
return props.page
},
set(val) {
emit('update:page', val)
},
})
const pageSize = computed({
get() {
return props.limit
},
set(val) {
emit('update:limit', val)
},
})
function handleSizeChange(val) {
emit('pagination', { page: currentPage.value, limit: val })
if (props.autoScroll) {
// scrollTo(0, 800);
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize.value })
if (props.autoScroll) {
// scrollTo(0, 800);
}
}
onMounted(() => {
createMediaList({
480(m){
if(m.matches){
document.getElementsByClassName('el-pagination__total ')[0].style.display = 'none'
}else{
document.getElementsByClassName('el-pagination__total ')[0].style.display = 'block'
}
}
})
})
return {
currentPage,
pageSize,
handleSizeChange,
handleCurrentChange,
}
},
}
</script>
<style scoped>
.pagination-container {
/* background: #fff; */
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

41
components/Poster/index.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="Poster-main op0" data-animation="animate__animated animate__fadeIn animate__slow">
<div class="Poster-container" :style="posterStyle">
<img class="Poster-img" :src="posterInfo.imgSrc" alt="">
<div class="Poster-content-box">
<!-- <div class="Poster-title">— {{ posterInfo.title }} —</div> -->
<!-- <div class="Poster-text">{{ posterInfo.text }}</div> -->
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
type: Number
})
let posterInfo = ref({
// imgSrc: '',
// title: '',
// text: ''
}),
posterStyle = {
height: '23vw'
}
// 获取海报
useFetch('/api/poster/getPoster', { params: { poster_location: props.type } }).then(res => {
posterInfo.value = JSON.parse(res.data.value).data
setTimeout(() => {
htmlAddAnimations()
});
})
</script>
<style scoped src="~/assets/css/poster/index.scss"></style>
<style scoped src="~/assets/css/poster/media.scss"></style>

81
components/Tab/index.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="Tab-main">
<div class="Tab-container">
<div class="Tab-box" @click="switchIdx($event)">
<template v-for="(item,idx) in props.tabList" >
<div class="Tab-items" >
<nuxt-link :data-idx = 'idx' :class="props.active.idx === idx ? '_Tab-item active':'_Tab-item'" :to="item?.nuxtLink" @click="changChildren(!!item.children,$event)">{{item.name}}</nuxt-link>
<div class="Tab-child-box dNone" v-if="item?.children">
<template v-for="(_item,_idx) in item.children">
<nuxt-link :to="_item?.nuxtLink" class="Tab-child-items" @click="switchCIdx(_idx,$evnet)">{{_item.name}}</nuxt-link>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script setup>
/**
*
* @type {Readonly<ExtractPropTypes<{tabList: ArrayConstructor, active: ObjectConstructor}>>}
* @description 接收两个参数，第一个是tabList，第二个是active
* @example：
* tabList：[
* {
name: '招生新闻', //名字
target: news //组件 也可以是a标签路径,可选
},
//。。。
* ]
* active：reactive({idx:0}) //必须用reactive包裹成一个对象，里面必须包含idx属性
，这个idx为默认先展示第几个
* @return 这个组件没有返回值，如果你选中了一个选项，它会更新这个active，你可以用watch监听这个active
*/
const props = defineProps({
tabList:Array,
active:Object
})
let idx = 0
const switchIdx = function (e){
let tag = e.target,
cl = tag.classList
if(cl.value.indexOf('_Tab-item')!==-1){
tag.parentElement.parentElement.children[idx].children[0].classList.remove('active')
idx = Number(tag.dataset.idx)
tag.parentElement.parentElement.children[idx].children[0].classList.add('active')
props.active.idx = idx
props.active.name = tag.innerText;
if('target' in props.active){
props.active.target = props.tabList[idx].target
}
props.active.nuxtLink = props.tabList[idx].nuxtLink
}
}
const changChildren = function (has,e){
if(has){
let tag = e.target,
cl = tag.classList
if(cl.value.indexOf('_Tab-item')!==-1){
tag.nextElementSibling.classList.toggle('dNone')
}
}else {
[...document.getElementsByClassName('Tab-child-box')].map(item=>{
item.classList.add('dNone')
})
}
}
const switchCIdx = function (_idx,e){
props.active.cIdx = _idx
}
</script>
<style scoped src="~/assets/css/Tab/index.scss"></style>
<style scoped src="~/assets/css/Tab/media.scss"></style>

0
layout/index.vue Normal file
View File

8
middleware/auth.ts Normal file
View File

@ -0,0 +1,8 @@
// export default defineNuxtRouteMiddleware((to) => {
// const path = to['_route'].path
// const router = useRouter()
// if(path === '/'){
// console.log('要跳转到load页')
// location.href = '/load'
// }
// })

39
nuxt.config.ts Normal file
View File

@ -0,0 +1,39 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
// import process from 'process/browser';
export default defineNuxtConfig({
ssr: true,
nitro: {
devProxy: {
"/api-v": {
target: "http://localhost/Aerwen/mr_web/mr_web_api/public/api.php/", // 文豪
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/api.php/", // 君豪
// target: "http://houde_web.back.aerwen.net/api", // 这里是线上接口地址
changeOrigin: true,
prependPath: true,
},
"/uploads": {
target: "http://localhost/Aerwen/mr_web/mr_web_api/public/uploads", // 文豪
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/uploads", // 君豪
// target: "https://houde.api.aerwen.net/uploads", // 这里是线上接口地址
changeOrigin: true,
prependPath: true,
},
},
},
plugins: [
// '~/middleware/auth.ts'
],
css: [
"bootstrap/dist/css/bootstrap.min.css",
// "swiper/css/swiper.css",
"~/assets/css/root/media.scss",
"~/assets/css/root/root.scss",
"~/assets/css/root/animation.scss",
"swiper/css",
"animate.css"
],//追加
})

11994
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --port 3003",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxtjs/style-resources": "^1.2.1",
"node-sass": "^8.0.0",
"nuxt": "^3.2.2",
"sass-loader": "^13.2.0",
"unplugin-auto-import": "^0.10.3",
"unplugin-icons": "^0.13.2",
"unplugin-vue-components": "^0.22.8"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"animate.css": "^4.1.1",
"bootstrap": "^5.3.0-alpha1",
"element-plus": "^2.2.32",
"hyw-load": "^1.0.1",
"jquery": "^3.6.4",
"nuxt-build-optimisations": "^1.0.7",
"path": "^0.12.7",
"sass": "^1.58.3",
"swiper": "^8.4.7",
"v3-lazyload-hyw": "^1.5.7",
"vue-awesome-swiper": "^5.0.1"
}
}

211
pages/card.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div id="_drag-container_"> <!-- 卡片展示 -->
<div class="card-pos-box">
<div class="content">
<div class="card1" v-for="(item, idx) in 3">
<div class="show-wrapper">
<div class="pic-wrapper">
<img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png">
</div>
<h2 class="title">Mario</h2>
<div class="show-info">
<div class="show-info-item">
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
<path
d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
fill="" p-id="1643"></path>
<path
d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
fill="#FF5F5F" p-id="1644"></path>
<path
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
fill="#FFFFFF" p-id="1645"></path>
</svg>
132k
</div>
<div class="show-info-item">
<svg t="1690023393353" class="icon Watch-icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1798" width="128" height="128">
<path
d="M512 853.333333c-263.9872 0-477.866667-284.672-477.866667-341.230933C34.133333 471.3472 248.0128 170.666667 512 170.666667c263.918933 0 477.866667 303.445333 477.866667 341.435733C989.7984 568.900267 775.850667 853.333333 512 853.333333z m-6.144-521.1136c-127.658667 0-276.5824 60.279467-276.5824 187.938134s148.8896 174.318933 276.548267 174.318933 279.005867-46.660267 279.005866-174.318933-151.3472-187.938133-279.005866-187.938134z m2.594133 93.7984a79.325867 79.325867 0 0 0 79.223467 79.291734c10.376533 0 19.968-2.1504 29.013333-5.563734 0.341333 3.6864 1.297067 7.202133 1.297067 11.0592a113.220267 113.220267 0 1 1-226.542933 0 113.322667 113.322667 0 0 1 113.220266-113.3568c3.1744 0 6.178133 0.7168 9.216 0.989867-3.345067 8.6016-5.4272 17.749333-5.4272 27.579733z"
fill="#85C2FF" p-id="1799"></path>
</svg>
12k
</div>
</div>
</div>
<div class="hover-wrapper">
<div class="hover-info">
<div class="info-item">
<span>13k</span>
<span class="info-item-title">Loveing</span>
</div>
<div class="line"></div>
<div class="info-item">
<span>14k</span>
<span class="info-item-title">Watching</span>
</div>
</div>
<button class="btn">查看更多</button>
</div>
<div class="background"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup >
</script>
<style lang="scss" scoped>
.card-pos-box{
width: 100%;
margin: 150px 0;
}
.content {
width: 100%;
position: relative;
display: flex;
justify-content: center;
}
.content .card1 {
position: relative;
cursor: pointer;
height: 500px;
margin: 0 80px;
}
.content .card1 .show-wrapper {
z-index: 10;
transition: 0.4s;
}
.content .card1 .show-wrapper .pic-wrapper {
width: 300px;
height: 300px;
transition: 0.4s;
}
.content .card1 .show-wrapper .pic-wrapper img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.content .card1 .show-wrapper .title {
margin: 10px 0;
}
.content .card1 .show-wrapper .show-info {
display: flex;
flex-direction: row;
color: #cccccc;
justify-content: space-between;
}
.content .card1 .show-wrapper .show-info .show-info-item svg {
width: 30px;
height: 30px;
vertical-align: middle;
}
.content .card1 .hover-wrapper {
display: none;
position: relative;
flex-direction: column;
align-items: center;
opacity: 1;
transition: 0.5s;
}
.content .card1 .hover-wrapper .hover-info {
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
font-size: 2vw;
}
.content .card1 .hover-wrapper .hover-info .info-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
font-size: 0.8vw;
color: #cccccc;
}
.content .card1 .hover-wrapper .hover-info .line {
width: 2px;
height: 4vh;
margin: 0 1vw;
background: #cccccc;
}
.content .card1 .hover-wrapper .btn {
width: 90%;
margin-top: 1.5vh;
border-radius: 50px;
background-color: rgb(67, 119, 216);
border: 0;
font-size: 1vw;
cursor: pointer;
color: #fff;
}
.content .card1 .background {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
z-index: -1;
transition: 0.5s;
transform: scale(0.2, 0.9);
opacity: 0;
height: 80%;
box-shadow: 0px 10px 32px 1px rgb(221, 219, 219);
background-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 20%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%), url(http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.content .card1:hover .show-wrapper {
transform: translateY(-25%);
}
.content .card1:hover .show-wrapper .pic-wrapper {
transform: scale(0.8);
}
.content .card1:hover .show-wrapper .title {
animation: nameAmt 0.5s ease-in-out forwards;
}
.content .card1:hover .show-wrapper .show-info {
opacity: 0;
}
.content .card1:hover .hover-wrapper {
animation: hoverWrapperAmt 0.5s ease-in-out forwards;
display: flex;
transform: translateY(-100%);
}
.content .card1:hover .background {
opacity: 1;
transform: scale(1.1);
}
@keyframes nameAmt {
0% {
opacity: 0;
text-align: center;
}
100% {
opacity: 1;
text-align: center;
transform: translateY(-55%);
}
}
@keyframes hoverWrapperAmt {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}/*# sourceMappingURL=style.css.map */
</style>

181
pages/index.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<!-- <Load></Load> -->
<!-- <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail> -->
<Head>
<Title>{{ tdk.tdk_title }}</Title>
<Meta :content=tdk.tdk_keyword name="keywords" />
<Meta :content=tdk.tdk_description name="description" />
<Meta name="baidu-site-verification" content="" />
</Head>
<Header></Header>
<Carousel></Carousel>
<div class="Home-main">
<!-- 卡片展示 -->
<div class="card-pos-box">
<div class="content">
<div class="card1" v-for="(item, idx) in 3">
<div class="show-wrapper">
<div class="pic-wrapper">
<img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png"/>
</div>
<h2 class="title">Mario</h2>
<div class="show-info">
<div class="show-info-item">
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
<path
d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
fill="" p-id="1643"></path>
<path
d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
fill="#FF5F5F" p-id="1644"></path>
<path
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
fill="#FFFFFF" p-id="1645"></path>
</svg>
132k
</div>
<div class="show-info-item">
<svg t="1690023393353" class="icon Watch-icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1798" width="128" height="128">
<path
d="M512 853.333333c-263.9872 0-477.866667-284.672-477.866667-341.230933C34.133333 471.3472 248.0128 170.666667 512 170.666667c263.918933 0 477.866667 303.445333 477.866667 341.435733C989.7984 568.900267 775.850667 853.333333 512 853.333333z m-6.144-521.1136c-127.658667 0-276.5824 60.279467-276.5824 187.938134s148.8896 174.318933 276.548267 174.318933 279.005867-46.660267 279.005866-174.318933-151.3472-187.938133-279.005866-187.938134z m2.594133 93.7984a79.325867 79.325867 0 0 0 79.223467 79.291734c10.376533 0 19.968-2.1504 29.013333-5.563734 0.341333 3.6864 1.297067 7.202133 1.297067 11.0592a113.220267 113.220267 0 1 1-226.542933 0 113.322667 113.322667 0 0 1 113.220266-113.3568c3.1744 0 6.178133 0.7168 9.216 0.989867-3.345067 8.6016-5.4272 17.749333-5.4272 27.579733z"
fill="#85C2FF" p-id="1799"></path>
</svg>
12k
</div>
</div>
</div>
<div class="hover-wrapper">
<div class="hover-info">
<div class="info-item">
<span>13k</span>
<span class="info-item-title">Loveing</span>
</div>
<div class="line"></div>
<div class="info-item">
<span>14k</span>
<span class="info-item-title">Watching</span>
</div>
</div>
<button class="btn">查看更多</button>
</div>
<div class="background"></div>
</div>
</div>
</div>
<!-- 米尔产品 -->
<div class="product-big-box">
<div class="product-pos-box">
<div class="product-title-box">
<h1 class="product-title">米尔产品 </h1>
</div>
<div class="product-type-box">
<div v-for="item in 4" class="product-typ-item">
ARM开发工具
</div>
</div>
<div class="product-content-box op0" data-animation="animate__animated animate__fadeInUp animate__animated_slow">
<div class="product-content-left-box"><img src="https://www.myir-tech.com/public/images/index/product_02.jpg?1">
</div>
<div class="product-content-right-box" style="">
<div class="product-content-right-intro">
米尔通过与ST，TI，NXP，全志，Microchip等芯片原厂保持深度密切合作，自主研发了系列应用于工业控制及物联网等相关领域的核心板和开发板等产品，帮助客户实现产品及方案的快速开发。
</div>
<div class="product-advantage-pos-box">
<div class="product-advantage-box" v-for="(item, idx) in 3">
<div class="product-advantage-img-box">
<img src="https://www.myir-tech.com/public/images/index/my_product_icon_04.png">
</div>
<div class="product-advantage-text">品质优良 性能卓越</div>
</div>
</div>
<div class="product-content-btn-box">
<el-button type="warning">查看产品</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 图片预览示例 -->
<!-- <div class="top-show-box">
<img @click="handleImg(0)" :src=openImg1 alt="">
</div> -->
<Final></Final>
</template>
<script setup>
/** 基础变量 **/
let imgList = ref([])
let imgIdx = ref(0)
let ImgDetailRef = ref(null)
/**预对接的数据**/
let openImg1 = ref("/img/home/open/open1.png")
/**js常量的定义**/
/**js操控的逻辑变量**/
/**方法函数**/
// 预览图片
function handleImg(v) {
ImgDetailRef.value.showImgDetail()
imgIdx.value = v
}
/**
* 接口对接
*/
// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1 } }).then(res => {
tdk.value = JSON.parse(res.data.value).data
})
/**onMounted**/
onMounted(() => {
// imgList.value.push(openImg1.value)
htmlAddAnimations({ tagDom: 'Home-main', preload: 1.3 })
})
/**export**/
defineExpose({
middleware: 'auth'
})
</script>
<style scoped src="~/assets/css/index/index.scss"></style>
<style scoped src="~/assets/css/index/card.css"></style>
<style scoped src="~/assets/css/index/media.scss"></style>

167
pages/news/[idx]-[page].vue Normal file
View File

@ -0,0 +1,167 @@
<template>
<Head>
<Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
<Meta :content=tdk.tdk_keyword name="keywords" />
<Meta :content=tdk.tdk_description name="description" />
</Head>
<Header></Header>
<Poster :type=1></Poster>
<div class="background_box">
<!-- 新闻类型 -->
<div class="news-titile-pos-box">
<div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
<div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'"
@click="handleClickType(index)">{{ item.dictionary_name }}</div>
<div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
</div>
</div>
<main class="container ">
<!--招生新闻-->
<div class="news-container-box container">
<!-- 模块渲染列表 -->
<div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
<div class="news-box col-lg-12" v-for="(item, index) in newsList">
<div class="news-s-box">
<nuxt-link :to="getLink(item)" class="jump">
<div class="news-contianer" style="border: 1px solid #e5e4e4">
<div class="news-content-box">
<div class="news-cover-box">
<img :src=item.news_cover>
</div>
<div class="news-content-right-box">
<div class="news-title">{{ item.news_title }}</div>
<div class="news-time">{{ item.news_issue_date }}</div>
<div class="news-intro">{{ item.news_intro }}</div>
<el-button type="info">查看详情</el-button>
</div>
</div>
</div>
</nuxt-link>
</div>
</div>
</div>
<div class="list_none" v-else>
<el-empty description="暂无数据" />
</div>
</div>
<!-- 分页 -->
<div class="page-box">
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
@pagination="routerJump()" />
</div>
</main>
</div>
<Final></Final>
</template>
<script setup>
// 预对接
let newsList = ref(
[
// {
// news_id: '1',
// news_title: "米尔喊你抽奖啦！NXP i.MX开发板、米家台灯、血压计等礼品~",
// news_intro: "一年一度端午节，与往常不一样的是今年的端午节多了一个特别的礼物那就是米尔将联合XP福利送~\n免费赠送i.MX开发板、台灯、血压计快来参与，你就是锦鲤~一等奖(5名)米尔基于NXPi.MX6U儿的开发板（价值558元）\n",
// news_cover: "/uploads/NewsImg/20230629\\b3897ad4ecce0204b2086110539ec1b3.jpg",
// news_issue_date: "2023-02-23",
// },
]
)
let newsTypeList = ref([
{
dictionary_name: '---',
idx: 0
},
])
let tdkNewType = ref()
const route = useRoute()
const router = useRouter()
let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })
onMounted(() => {
})
watch(active, (nv) => {
router.push(String(nv['idx']) + "-1")
})
// --- 参数 ---
let total = ref(0)
const queryParams = reactive({
page: parseInt(route.params.page) || 1,
idx: parseInt(route.params.idx) || 0,
limit: 10
})
// --- 方法 ---
const routerJump = function () {
let { page } = queryParams
router.push(String(newsTypeList.value[active['idx']]) + "-" + String(page))
}
const handleClickType = function (index) {
let { page } = queryParams
router.push(String(index) + "-" + String(page))
}
const getLink = function (item) {
if (item.news_link) {
return item.news_link;
} else {
return "/news/details/" + item.news_id;
}
}
/**
* 接口对接
*/
// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
tdk.value = JSON.parse(res.data.value).data
})
// 获取新闻类型
useFetch('/api/news/getNewsType').then(res => {
newsTypeList.value = JSON.parse(res.data.value).data || []
tdkNewType.value = newsTypeList?.value[active.idx]?.dictionary_name
})
// // 获取新闻列表
useFetch('/api/news/getNewsList', { params: queryParams }).then(res => {
total.value = JSON.parse(res.data.value).count || 0
newsList.value = JSON.parse(res.data.value).data || []
})
// // 添加流量访问
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
// fontSizeReactive({
// 880: 1,
// 480: 3,
// })
onMounted(() => {
htmlAddAnimations()
})
</script>
<style scoped src="~/assets/css/business/news/index.scss"></style>
<style scoped src="~/assets/css/business/news/media.scss"></style>

52
pages/news/details/[id].vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<Head>
<Title>{{ infoArticleInfo.info_article_title }}{{ tdk.tdk_title }}</Title>
<Meta :content=tdk.tdk_keyword name="keywords" />
<Meta :content=tdk.tdk_description name="description" />
</Head>
<Header></Header>
<Final></Final>
</template>
<script setup>
// --- 接口对接 ---
// 参数
const route = useRoute()
const router = useRouter()
// 预对接
let infoArticleInfo = ref({})
// 获取新闻详情
// useFetch('/api/news/getinfoArticleInfo', { params: { info_article_id: route.params.id } }).then(res => {
// infoArticleInfo.value = JSON.parse(res.data.value).data
// setTimeout(() => {
// [...document.querySelectorAll('.joint-details-content-box img')].map(item => {
// item.style.maxWidth = 100 + '%'
// item.style.height = 0 + '%'
// })
// htmlAddAnimations()
// });
// })
// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: route.name } }).then(res => {
tdk.value = JSON.parse(res.data.value).data
})
// 添加流量访问
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
</script>
<style scoped src="~/assets/css/business/news/news_details/index.scss"></style>
<style scoped src="~/assets/css/business/news/news_details/media.scss"></style>

33
pages/test.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<Head>
<!-- <Title>test</Title> -->
<Title>{{ tdk.tdk_title }}</Title>
<Meta name="keywords" :content=tdk.tdk_keyword />
<Meta name="description" :content=tdk.tdk_description />
</Head>
<h1>{{ contactInfo }}</h1>
<h2>{{ tdk }}</h2>
</template>
<script setup>
let contactInfo = ref({})
const headers = useRequestHeaders(['cookie'])
let tdk = ref({})
onMounted(async () => {
// 带请求头
// let data = useFetch('/api/contactUs/getContactInfo',{headers})
// let contactInfoData = await useFetch('/api/contactUs/getContactInfo', { headers })
// contactInfo.value = JSON.parse(contactInfoData.data.value)
})
useFetch('/api/tdk/getTdk', { params: { tdk_type: "index" } }).then(res => {
tdk.value = JSON.parse(res.data.value).data
})
</script>

16
plugins/element-plus.ts Normal file
View File

@ -0,0 +1,16 @@
// plugins\element-plus.ts
import { defineNuxtPlugin } from '#app'
import '~/style/element/index.scss'
import { ID_INJECTION_KEY } from 'element-plus';
// 引入中文包
import locale from 'element-plus/lib/locale/lang/zh-cn'
import ElementPlus from 'element-plus'
export default defineNuxtPlugin(nuxtApp => {
// Doing something with nuxtApp
nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
prefix: Math.floor(Math.random() * 10000),
current: 0,
})
nuxtApp.vueApp.use(ElementPlus, { locale })
})

11
plugins/v3-lazyload-hyw.js Normal file
View File

@ -0,0 +1,11 @@
import createLazyLoad from 'v3-lazyload-hyw'
import { defineNuxtPlugin } from '#app'
const LazyOption = {
error:'http://localhost:3003/img/error.png',
loading:'http://localhost:3003/img/loading.gif',
payload:1
}
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.directive('lazy',createLazyLoad(LazyOption))
})

5
plugins/vue-swiper.js Normal file
View File

@ -0,0 +1,5 @@
import VueAwesomeSwiper from "vue-awesome-swiper";
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(VueAwesomeSwiper)
})

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/img/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/img/home/icons8-github.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/img/icon/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
public/img/icon/logo_black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/img/icon/logo_cyan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/img/icon/logo_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/img/icon/qqIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 861 B

BIN
public/img/icon/searchIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 793 B

BIN
public/img/icon/wbIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/img/icon/wxIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/img/leftImgDetailIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 B

BIN
public/img/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/img/rightImgDetailIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

9
public/site.txt Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://aitool.aerwen.net/</loc>
<lastmod>2023-05-10</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
</urlset>

9
public/site.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://aitool.aerwen.net/</loc>
<lastmod>2023-05-10</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
</urlset>

21
server/api/banner/getBanner.js Normal file
View File

@ -0,0 +1,21 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch( "http://mr.api.aerwen.net/api.php/Banners.Banner/getBannerList", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

21
server/api/flow/addFlowRecord.js Normal file
View File

@ -0,0 +1,21 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/Flow.Flow/AddFlowRecord", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

24
server/api/home/getHome.js Normal file
View File

@ -0,0 +1,24 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
/**
* 获取首页数据
*/
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/Home.Home/getHome", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

24
server/api/news/getNewsInfo.js Normal file
View File

@ -0,0 +1,24 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
/**
* 获取新闻详情
*/
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getinfoNews", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

25
server/api/news/getNewsList.js Normal file
View File

@ -0,0 +1,25 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
/**
* 获取新闻列表
*/
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getNewsList", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

24
server/api/news/getNewsType.js Normal file
View File

@ -0,0 +1,24 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
/**
* 获取新闻类型列表
*/
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getNewsType", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

21
server/api/poster/getPoster.js Normal file
View File

@ -0,0 +1,21 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch("http://mr.api.aerwen.net/api.php/Banners.Poster/getPoster", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

21
server/api/tdk/getTdk.js Normal file
View File

@ -0,0 +1,21 @@
import {
readRawBody,
getQuery,
getMethod
} from 'h3'
export default defineEventHandler(async (event) => {
// 基础url
const baseURL = process.env.NUXT_PROXY_WEB_API
const method = getMethod(event).toUpperCase()
let body
if (method !== 'GET') body = await readRawBody(event)
const res = await $fetch( "http://mr.api.aerwen.net/api.php/Tdk.Tdk/getTdkInfo", {
method,
baseURL: event.context.baseUrl,
headers: event.context.headers,
params: getQuery(event),
body
})
return res
})

14
server/middleware/auth.js Normal file
View File

@ -0,0 +1,14 @@
// /api/middleware/auth.js
import { getHeaders } from 'h3'
export default defineEventHandler(async (event) => {
const reqHeaders = getHeaders(event)
const ssrHeader = new Headers()
const { app } = useRuntimeConfig()
ssrHeader.set('cookie', reqHeaders.cookie)
ssrHeader.set('x-xsrf-token', app['XSRF_HEADER'])
ssrHeader.set('app-id', app['APP_ID'])
// ssrHeader.set('client-id', await getFingerPrint())
event.context.headers = ssrHeader
event.context.baseUrl = app['BASE_URL']
})

0
store/pinia.vue Normal file
View File

16
style/element/index.scss Normal file
View File

@ -0,0 +1,16 @@
/* element-puls 主题色 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #193066,
),
),
);
// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/base.scss" as *;
@use "element-plus/theme-chalk/src/message.scss" as *;
@use "element-plus/theme-chalk/src/empty.scss" as *;
@use "element-plus/theme-chalk/src/input.scss" as *;
@use "element-plus/theme-chalk/src/button.scss" as *;
@use "element-plus/theme-chalk/src/pagination.scss" as *;

4
tsconfig.json Normal file
View File

@ -0,0 +1,4 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
}

168
utils/Tool.js Normal file
View File

@ -0,0 +1,168 @@
/***
*
* js媒体查询
* @param opt
* @return {{}}
* @example:
createMediaList({
480(ctx){
console.log('is 480',ctx)
},
880(ctx){
console.log('is 880',ctx)
},
1220(ctx){
console.log('is 1220',ctx)
},
1440(ctx){
console.log('is 1440',ctx)
},
})
*
*/
export function createMediaList(opt) {
for (let optKey in opt) {
let mediaCtx = window !== undefined ? window.matchMedia(`(max-width: ${optKey}px)`) : global.matchMedia(`(max-width: ${optKey}px)`)
if (mediaCtx ?.matches) {
opt[optKey](mediaCtx)
}
mediaCtx.addListener(opt[optKey])
}
}
/**
*
* 对象转换成css样式变量
* @param obj
* @param prefix
* @return {{}}
*/
export function conversionStyleVal(obj, prefix) {
let res = {}
for (let key in obj) {
if (obj[key] instanceof Object) {
!prefix ? res[key] = conversionStyleVal(obj[key], key) :
Object.assign(res, conversionStyleVal(obj[key], key))
} else {
prefix ? res['--' + prefix + key] = obj[key] :
res['--' + key] = obj[key]
}
}
return res
}
/**
* 滑动到指定位置触发动画
* 需要放到onMounted使用
* @param {*} tagDom (需要触发的class盒子，可读取子级，一般填最外层盒子)
* author: hyw
*
* 用法：
* <div data-animation="animate__animated animate__fadeInLeft" class="box op0">
* htmlAddAnimations('box')
*
* 参数说明：
* data-animation: 填写需要添加的动画效果class名 （https://animate.style/）（https://blog.csdn.net/a1056244734/article/details/113884374）
* op0：除 /可视区域/ 外在class加上此class名
*/
export function htmlAddAnimations(opt) {
let oTagDomList = opt?.tagDom ? [...document.getElementsByClassName(opt.tagDom)[0].querySelectorAll('*')] : [...document.body.querySelectorAll('*')],
domAnimationInfoPool = []
oTagDomList.map((domItem, idx) => {
let animationName = domItem.getAttribute('data-animation')
if (animationName) {
domAnimationInfoPool.push({
dom: domItem,
animationName
})
}
})
let windowScrollEvent = function (e) {
for (let i = domAnimationInfoPool.length - 1; i >= 0; i--) {
let infoItem = domAnimationInfoPool[i]
if (infoItem.dom.getBoundingClientRect().top +
infoItem.dom.getBoundingClientRect().height <
window.innerHeight * (opt?.preload || 1.5)) {
infoItem.dom.classList.remove('op0')
infoItem.animationName.split(' ').map(item => {
if (item) {
infoItem.dom.classList.add(item)
}
})
}
}
}
window.addEventListener('scroll', windowScrollEvent, false)
windowScrollEvent()
}
/**
*
* @param opt
* opt:{
* 触发的分辨率：要减少的字体
* }
* 需要放到onMounted使用
* @example：
* 使用前要在对应的容器加上类名：font-size-box
* fontSizeReactive({
* 880:1,
* 480:2
* })
* 这里要注意的是，减少的字体是会叠加减少的，例如：
* 我初始字体是15px，我的配置项为
* {
* 880：1，
* 480：2
* }，一般来说按照这个配置项的话，我字体在屏幕小于880px的时候会变成14px，在小于480的时候会变成13px
* 但实际的话是在小于880的时候会变成14px，小于480的时候会变成12px，也就是会把880也算上
*/
export function fontSizeReactive(opt = {
880: 1,
480: 1,
}) {
let oBox = document.getElementsByClassName('font-size-box')[0]
let tag = oBox ? [...oBox.querySelectorAll('*')] : [...document.querySelectorAll('*')]
tag.map(item => {
let fontSize = getComputedStyle(item, null)['fontSize'].replace('px', '')
item.style.setProperty('font-size', fontSize + 'px')
})
let fnTpl = ''
for (let key in opt) {
fnTpl += `
${key}(ctx) {
if (ctx.matches) {
tag.map(item => {
item.style.fontSize = item.style.fontSize.replace('px', '') - ${opt[key]} + 'px'
})
} else {
tag.map(item => {
item.style.fontSize = Number(item.style.fontSize.replace('px', '')) + ${opt[key]} + 'px'
})
}
},`
}
(new Function('fn,tag', `
fn({
${fnTpl}
})
`))(function (opt) {
for (let optKey in opt) {
let mediaCtx = window !== undefined ? window.matchMedia(`(max-width: ${optKey}px)`) : global.matchMedia(`(max-width: ${optKey}px)`)
if (mediaCtx ?.matches) {
opt[optKey](mediaCtx)
}
mediaCtx.addListener(opt[optKey])
}
}, tag)
}

10
utils/api.ts Normal file
View File

@ -0,0 +1,10 @@
import Http from './request'
export const get = (address,params?) => {
return Http.get(address, params)
}
export const post = (address,params?) => {
return Http.post(address, params)
}

62
utils/request.ts Normal file
View File

@ -0,0 +1,62 @@
import { _AsyncData } from 'nuxt3/dist/app/composables/asyncData'
//import baseUrl from './baseUrl'
import { ElMessage } from 'element-plus'
let baseUrl = '/api-v'
// 指定后端返回的基本数据类型
export interface ResponseConfig {
code: number,
status: number,
data: any,
msg: string
}
export interface ValueConfig {
value: any,
}
const fetch = (url: string, options?: any): Promise<any> => {
const reqUrl = baseUrl + url
return new Promise((resolve, reject) => {
useFetch(reqUrl, { ...options }).then(({ data, error }: _AsyncData) => {
if (error.value) {
reject(error.value)
return
}
const value = data.value
if (!value) {
// 这里处理错误回调
// reject(value)
// $router.replace('/reject/' + value.status)
}else if(value.code == 1){
ElMessage({
message: value.msg,
type: 'error',
})
} else {
resolve(ref(value))
}
}).catch((err: any) => {
reject(err)
})
})
}
export default new class Http {
get(url: string, params?: any): Promise<any> {
return fetch(url, { method: 'get', params })
}
post(url: string, params?: any): Promise<any> {
return fetch(url, { method: 'post', params })
}
put(url: string, body?: any): Promise<any> {
return fetch(url, { method: 'put', body })
}
delete(url: string, body?: any): Promise<any> {
return fetch(url, { method: 'delete', body })
}
}