generated from nuxt/nuxt_site
Initial commit
This commit is contained in:
nuxt
commit
8cdcf475a5
10
.env
Normal file
10
.env
Normal file
@ -0,0 +1,10 @@
|
||||
# 后台接口地址(仅开发/预览环境生效)
|
||||
NUXT_PROXY_API=http://localhost/site/site_api/public/api.php/
|
||||
# NUXT_PROXY_API=http://lbie.dev.org/api.php/
|
||||
|
||||
# 后台图片地址(仅开发/预览环境生效)
|
||||
NUXT_PROXY_UPLOADS=http://localhost/site/site_api/public/uploads/
|
||||
# NUXT_PROXY_UPLOADS=http://lbie.dev.org/uploads/
|
||||
|
||||
# 后台接口地址
|
||||
NUXT_PUBLIC_API_GATEWAY=http://localhost:3003/api-v
|
||||
2
.env.production
Normal file
2
.env.production
Normal file
@ -0,0 +1,2 @@
|
||||
# 后台接口地址
|
||||
NUXT_PUBLIC_API_GATEWAY=/public/api.php
|
||||
9
.gitignore
vendored
Normal file
9
.gitignore
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
dist
|
||||
.vscode
|
||||
.idea
|
||||
3
.npmrc
Normal file
3
.npmrc
Normal file
@ -0,0 +1,3 @@
|
||||
shamefully-hoist=true
|
||||
strict-peer-dependencies=false
|
||||
node-linker=hoisted
|
||||
42
README.md
Normal file
42
README.md
Normal 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.
|
||||
45
assets/css/About/index.scss
Normal file
45
assets/css/About/index.scss
Normal file
@ -0,0 +1,45 @@
|
||||
article {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
section+section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--rootColor);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1+h2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
div.bg-gray {
|
||||
padding: 24px 60px;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
55
assets/css/Carousel/index.scss
Normal file
55
assets/css/Carousel/index.scss
Normal 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
34
assets/css/Carousel/media.scss
Normal 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) {
|
||||
|
||||
}
|
||||
289
assets/css/Final/index.scss
Normal file
289
assets/css/Final/index.scss
Normal file
@ -0,0 +1,289 @@
|
||||
//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: #000000;
|
||||
position: relative;
|
||||
color: white;
|
||||
padding: 80px 0px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.Final-big-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 auto;
|
||||
|
||||
.Final-left-box {
|
||||
max-width: 40vh;
|
||||
font-size: 16px;
|
||||
|
||||
.Final-left-title {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.Final-left-info-item {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
|
||||
.Final-left-info-item-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Final-icon-box {
|
||||
height: 60px;
|
||||
width: 120px;
|
||||
|
||||
.icon-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.Final-right-box {
|
||||
max-width: 30vh;
|
||||
|
||||
.Final-right-title {
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--rootColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.Final-right-time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.Final-right-time-icon {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.Final-right-ctx {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.Final-right-title-line {
|
||||
border: 1px solid #4d4d4d;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.Final-right-btn {
|
||||
color: #ffffff !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--rootColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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: 20px;
|
||||
color: white;
|
||||
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.items-title {
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--rootColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.items-title-line {
|
||||
border: 1px solid #4d4d4d;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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: 90%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
padding: 30px 0;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
// 底部版权颜色
|
||||
background-color: #000000;
|
||||
border-top: 1px solid #4d4d4d;
|
||||
}
|
||||
}
|
||||
|
||||
.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: white;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
assets/css/Final/media.scss
Normal file
81
assets/css/Final/media.scss
Normal file
@ -0,0 +1,81 @@
|
||||
|
||||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
/*1043px*/
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1043px) {
|
||||
.Final-icon-box{
|
||||
display: none;
|
||||
}
|
||||
.Final-container{
|
||||
flex-direction: column;
|
||||
}
|
||||
.Final-big-box{
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
.items-title-line{
|
||||
margin-right: 20px!important;
|
||||
}
|
||||
}
|
||||
.Final-right-box{
|
||||
max-width: 100vh!important;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.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
31
assets/css/Header/icon.scss
Normal 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 ;
|
||||
}
|
||||
103
assets/css/Header/index.scss
Normal file
103
assets/css/Header/index.scss
Normal file
@ -0,0 +1,103 @@
|
||||
|
||||
[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;
|
||||
}
|
||||
.search-btn{
|
||||
position: relative;
|
||||
top: 26px;
|
||||
right: -10px;
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
outline:none;
|
||||
text-decoration: none;
|
||||
}
|
||||
//Header.scss
|
||||
.Header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
|
||||
// background: rgba($color: #000000, $alpha: .2);
|
||||
.Header-container{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height:var(--headerheight);
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-box{
|
||||
height: 0;
|
||||
width: 100%;
|
||||
transition: 0.4s;
|
||||
z-index: 9999;
|
||||
// position: fixed;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.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: 50%;
|
||||
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;
|
||||
}
|
||||
86
assets/css/Header/media.scss
Normal file
86
assets/css/Header/media.scss
Normal file
@ -0,0 +1,86 @@
|
||||
//media.scss
|
||||
|
||||
/*480px*/
|
||||
/*小于*/
|
||||
@media screen and (max-width: 480px) {
|
||||
.Header {
|
||||
position: fixed !important;
|
||||
z-index: 99;
|
||||
}
|
||||
.HeaderIcon-box{
|
||||
}
|
||||
|
||||
.HeaderSearch-Icon {
|
||||
display:block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*1037px*/
|
||||
/*小于*/
|
||||
@media screen and (max-width:1037px) {
|
||||
.HeaderSearch-button{
|
||||
display: flex!important;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1037px) {
|
||||
|
||||
|
||||
//.HeaderSearch-Icon {
|
||||
// display: none !important;
|
||||
//}
|
||||
|
||||
.HeaderSearch {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.HeaderNav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.HeaderIcon-box {
|
||||
width: 80%!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) {}
|
||||
87
assets/css/Header/nav.scss
Normal file
87
assets/css/Header/nav.scss
Normal file
@ -0,0 +1,87 @@
|
||||
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;
|
||||
|
||||
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: 3px;
|
||||
background: var(--rootColor);
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
text-align: center;
|
||||
margin: 15px 0 auto;
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover{
|
||||
&::before {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.HeaderNav-navItems-child-box {
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 40px;
|
||||
border-radius: 5px;
|
||||
z-index: 9999999999999999;
|
||||
min-width: 190px;
|
||||
.HeaderNav-navItems-child-items {
|
||||
padding: 10px 40px;
|
||||
word-break: keep-all;
|
||||
|
||||
&:hover {
|
||||
|
||||
a {
|
||||
color: var(--rootColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
91
assets/css/Header/search.scss
Normal file
91
assets/css/Header/search.scss
Normal file
@ -0,0 +1,91 @@
|
||||
.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;
|
||||
unicode-bidi: isolate;
|
||||
|
||||
a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.app-nav-second-items {
|
||||
div{
|
||||
padding: 5px 0 5px 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: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
height: 3px;
|
||||
width: 30px;
|
||||
margin: 4px 0;
|
||||
background: var(--rootColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.HeaderSearch-search-box {
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
assets/css/ImgDetail/index.scss
Normal file
65
assets/css/ImgDetail/index.scss
Normal 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
61
assets/css/ImgDetail/media.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
872
assets/css/IndexDetail/index.scss
Normal file
872
assets/css/IndexDetail/index.scss
Normal file
@ -0,0 +1,872 @@
|
||||
* {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.allmain {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.allmain_li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.allmain_box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.allmainimg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding-top: 66%;
|
||||
}
|
||||
|
||||
.allmainimg img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.allmain_cover {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--rootColor);
|
||||
z-index: 999;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.allmain_txt {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
z-index: 9999;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.allmain_txt h3 {
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.allmain_txt p {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
z-index: 9999;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.allmain_li:hover .allmain_txt {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.allmain_li:hover .allmain_cover {
|
||||
// transform: scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.allmainflex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand {
|
||||
background: url(/img/home/img5.jpg) no-repeat 50% 50%;
|
||||
background-size: 100%;
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
// z-index: -1;
|
||||
}
|
||||
|
||||
.brandcover {
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(300deg, #000000BD 83%, var(--rootColor) 60%);
|
||||
opacity: 0.95;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.brand_txt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
width: 45%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand_txt h2 {
|
||||
margin-bottom: 30px;
|
||||
font-size: 48px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
line-height: 58px;
|
||||
}
|
||||
|
||||
.brand_txt p {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.brand_more {
|
||||
display: block;
|
||||
padding: 15px 60px;
|
||||
background-color: var(--rootColor);
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin: 50px auto 0 auto;
|
||||
z-index: 99;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.brand_more:hover {
|
||||
padding: 15px 90px;
|
||||
transform: scale(1.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.brand_txt a {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.bcard {
|
||||
background: url(/img/home/img2.jpg) no-repeat 50% 50%;
|
||||
background-size: 100%;
|
||||
padding: 100px 0 100px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// .bcard_li {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background-color: #000;
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
.bcardcover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bcard_title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.bcard_title span {
|
||||
font-size: 24px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.bcard_title h2 {
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.bcard_box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bcardicon {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--rootColor);
|
||||
margin-right: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bcardicon i {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bcard_txt {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bcard_txt h3 {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bcard_txt p {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bcard_more {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.bcard_more h4 {
|
||||
font-size: 18px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bcard_more i {
|
||||
font-size: 18px;
|
||||
color: var(--rootColor);
|
||||
margin-left: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bcard_li {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.bcard_more:hover {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.number {
|
||||
background-color: var(--rootColor);
|
||||
|
||||
}
|
||||
|
||||
.number_con {
|
||||
background-color: var(--rootColor);
|
||||
// box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
padding: 30px 30px 20px;
|
||||
// margin-bottom: -20px;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.number_con ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.number_con li {
|
||||
// width: calc((100% - 20px) / 4);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.number_con li i {
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number_con li span {
|
||||
padding-left: 1px;
|
||||
margin-right: 5px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--rootColor);
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-family: "impact";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.number_con li p {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.videocard {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.videocard_title span {
|
||||
font-size: 24px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.videocard_title h2 {
|
||||
font-size: 48px;
|
||||
color: #0B2154;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.videocard_title p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.videocard_list {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.videocard_list ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.videocard_list li {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 15px;
|
||||
width: 48%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.videocard_list li span {
|
||||
margin-top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--rootColor);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.videocard_list li i {
|
||||
font-size: 16px;
|
||||
color: var(--rootColor);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videocard_list li p {
|
||||
font-size: 16px;
|
||||
color: #0B2154;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.videocard_right_img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.videoimgbtn {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.videoimgbtn img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.videocardflex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.videoplay {
|
||||
animation: scale2 2s infinite;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--rootColor);
|
||||
}
|
||||
|
||||
.point2 {
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
left: 8%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.point2 i {
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 60%;
|
||||
transform: translate(-60%, -50%);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.videomain {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999999999999999999999;
|
||||
}
|
||||
|
||||
.videoclose {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.videoclose img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.videobox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.videobox video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.videobbb {
|
||||
animation: scale2 2s infinite;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
line-height: 130px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--rootColor);
|
||||
}
|
||||
|
||||
@keyframes scale2 {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.acard {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.acardflex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.acard_right {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.acardimg {
|
||||
box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.acardimg img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.acard_list {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.acard_list ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.acard_list li {
|
||||
width: 31%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.acardli {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.acardlicover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
background-color: var(--rootColor);
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.acardli i {
|
||||
font-size: 50px;
|
||||
color: var(--rootColor);
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.acardli p {
|
||||
z-index: 999;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-top: 10px;
|
||||
color: #0B2154;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.acard_list li:hover .acardlicover {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.acard_list li:hover .acardli i,
|
||||
.acard_list li:hover .acardli p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// .acard_list ul li:nth-child(2) .acardlicover {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// .acard_list ul li:nth-child(2) .acardli i,
|
||||
// .acard_list ul li:nth-child(2) .acardli p {
|
||||
// color: #fff;
|
||||
// }
|
||||
.blog {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.blog_title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.blog_title span {
|
||||
font-size: 24px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog_title h2 {
|
||||
font-size: 48px;
|
||||
color: #0B2154;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blogflex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.blog_box {
|
||||
position: relative;
|
||||
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.blog_img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding-top: 67%;
|
||||
}
|
||||
|
||||
.blog_img img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.blog_txt {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.blog_txt h3 {
|
||||
font-size: 20px;
|
||||
color: #0B2154;
|
||||
font-weight: bold;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog_txt p {
|
||||
margin: 15px 0 30px 0;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog_more {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.blog_more span {
|
||||
font-size: 18px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blog_more i {
|
||||
font-size: 18px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.blog_li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blogtime {
|
||||
background-color: var(--rootColor);
|
||||
padding: 5px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.blogtime span {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blogtime p {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.blog_li:hover .blog_img img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.blog_li:hover .blog_box {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.blog_li:hover .blog_txt h3,
|
||||
.blog_li:hover .blog_txt p,
|
||||
.blog_li:hover .blog_more span,
|
||||
.blog_li:hover .blog_more i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog_more:hover {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.partners_flex {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.partners_li {
|
||||
margin: 10px;
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// box-shadow: 0px 0px 6px #555;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.partners_li img {
|
||||
line-height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Home-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
83
assets/css/IndexDetail/media.scss
Normal file
83
assets/css/IndexDetail/media.scss
Normal file
@ -0,0 +1,83 @@
|
||||
//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) {
|
||||
.bcard, .brand, .move {
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*880px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 880px) {
|
||||
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 880px) {
|
||||
.img-box{
|
||||
width: 60vw!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
|
||||
}
|
||||
/*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;
|
||||
}
|
||||
}
|
||||
.number_con li {
|
||||
width: 100%;
|
||||
}
|
||||
// .partners_li {
|
||||
// margin: 10px;
|
||||
// width: 100%;
|
||||
// // width: calc((100% - 20px) / 6);
|
||||
// // align-items: center;
|
||||
// display: block;
|
||||
// // align-items: center;
|
||||
// // box-shadow: 0px 0px 6px #555;
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
// .partners_flex {
|
||||
// display: block;
|
||||
// // justify-content: space-evenly;
|
||||
// // flex-wrap: wrap;
|
||||
// }
|
||||
}
|
||||
|
||||
29
assets/css/Load/index.scss
Normal file
29
assets/css/Load/index.scss
Normal 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
46
assets/css/Load/media.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
108
assets/css/Popup/message-us.scss
Normal file
108
assets/css/Popup/message-us.scss
Normal file
@ -0,0 +1,108 @@
|
||||
.messageUs.show {
|
||||
bottom: 350px !important;
|
||||
}
|
||||
|
||||
.messageUs {
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
position: fixed;
|
||||
width: 340px;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
box-shadow: 0 20px 40px 8px rgba(0, 0, 0, 0.25);
|
||||
font-size: 14px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 9999999;
|
||||
transition: bottom .5s ease;
|
||||
}
|
||||
|
||||
.messageUs .messageUsHeader {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: #ffffff;
|
||||
text-indent: 50px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.messageUs .eMailIco {
|
||||
background: url("/img/emailIco.png") 16px center no-repeat #A72027;
|
||||
background-size: 21px auto;
|
||||
}
|
||||
|
||||
.messageUsForm {
|
||||
padding: 16px 16px 40px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.messageUsForm .tips {
|
||||
color: #222d38;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.messageUsForm .line {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.messageUsForm .line input,
|
||||
.messageUsForm .line textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 1px #ccc;
|
||||
color: #222d38;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.messageUsForm textarea {
|
||||
resize: none;
|
||||
height: 78px;
|
||||
padding: 11px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.messageUsForm .line input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.messageUsForm .btn {
|
||||
background: #A72027;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
height: 40px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.messageUs .closeBtn {
|
||||
background: url("/img/closeBtn.png") no-repeat;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-size: 28px 28px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.messageUs .closeBtn.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.messageUsForm__error {
|
||||
color: #dc3232;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
136
assets/css/Popup/sidebar.scss
Normal file
136
assets/css/Popup/sidebar.scss
Normal file
@ -0,0 +1,136 @@
|
||||
.sidebar,
|
||||
.sidebar a {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
transition: top .6s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.sidebar a {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
position: fixed !important;
|
||||
top: 150px !important;
|
||||
transition: right .5s ease-in !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: 150px;
|
||||
right: 0;
|
||||
z-index: 999999999999;
|
||||
}
|
||||
|
||||
.show_btn {
|
||||
width: 0;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.side_content {
|
||||
width: 166px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.side_content .side_list {
|
||||
width: 140px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.side_content .side_list .hd img {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
|
||||
.side_content .side_list .cont li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.side_content .side_list .cont li i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
color: #A72027
|
||||
}
|
||||
|
||||
.side_content .side_list .cont li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 0 0 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.side_content .side_list .cont li a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
width: 25px;
|
||||
height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
|
||||
.side_content .side_list .t-code {
|
||||
padding: 10px 10px 7px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
|
||||
.side_content .side_list .t-code img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.side_content .side_list .side_title {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.side_content .side_list .side_title .close_btn {
|
||||
background: url("/img/close.png") no-repeat center center;
|
||||
width: 12px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side_content .side_list .side_title .close_btn span {
|
||||
display: none;
|
||||
}
|
||||
418
assets/css/ProductList/Detail/index.scss
Normal file
418
assets/css/ProductList/Detail/index.scss
Normal file
@ -0,0 +1,418 @@
|
||||
* {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.messageUsForm__error {
|
||||
color: #dc3232;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
margin-top: 85px;
|
||||
// padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.product_right .shop_li {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border: 1px solid var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion .link {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 15px 15px 15px 15px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--rootColor);
|
||||
position: relative;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-o-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion li:last-child .link {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion li i {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-o-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.accordion li i.fa-chevron-down {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.accordion li:hover .link {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion li:hover .link {
|
||||
color: #fff;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.accordion li:hover i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion li:hover i.fa-chevron-down {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion .active .link {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion .active .link {
|
||||
color: #fff;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.accordion .active i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion .active i.fa-chevron-down {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.product_left_menu h2 {
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
background-color: var(--rootColor);
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.productnametitle h1 {
|
||||
font-size: 22px;
|
||||
color: #000;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--rootColor);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.productnametitle p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.productnametitle span {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
background-color: var(--rootColor);
|
||||
color: #fff;
|
||||
border: 1px solid var(--rootColor);
|
||||
font-size: 18px;
|
||||
margin-top: 40px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.productnametitle a:hover {
|
||||
padding: 15px 60px;
|
||||
background-color: #fff;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.feedbackForm {
|
||||
padding: 16px 16px 40px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.feedbackForm .tips {
|
||||
color: #222d38;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.feedbackForm .line {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feedbackForm .line input,
|
||||
.feedbackForm .line textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 1px #ccc;
|
||||
color: #222d38;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feedbackForm textarea {
|
||||
resize: none;
|
||||
height: 78px;
|
||||
padding: 11px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.feedbackForm .line input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.feedbackForm .btn {
|
||||
background: var(--rootColor);
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
height: 40px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback .closeBtn {
|
||||
// background: url("../images/closeBtn.png") no-repeat;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-size: 28px 28px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
.detail_class{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
// .detail_class table{
|
||||
// // font-weight: 550;
|
||||
// display: block;
|
||||
// overflow: scroll;
|
||||
// width: 100%;
|
||||
// }
|
||||
.collapse_title {
|
||||
|
||||
color: var(--rootColor);
|
||||
font-weight: 550;
|
||||
font-size: 24px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.exzoom {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.exzoom_nav {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
left: 16px;
|
||||
height: 62px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span {
|
||||
border: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span img {
|
||||
// max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
top: 7.5px;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_btn {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_btn a {
|
||||
display: block;
|
||||
width: 15px;
|
||||
border: 1px solid #ddd;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #eee;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -62px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_btn a:hover {
|
||||
background: #ff8b34;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_btn a.exzoom_next_btn {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: #b1191d !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid var(--rootColor) !important;
|
||||
}
|
||||
|
||||
.collapse_detail {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// .collapse_detail :deep(.el-collapse) {
|
||||
// // border-bottom: none;
|
||||
// }
|
||||
.detail_div {
|
||||
border: 1px solid #dddddd;
|
||||
padding: 1px 10px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// .detail_div :deep( .el-collapse-item__wrap) {
|
||||
// // border-bottom: none;
|
||||
// }
|
||||
// .detail_div :deep( .el-collapse-item__header) {
|
||||
// // border-bottom: none;
|
||||
// }
|
||||
.Tip {
|
||||
border: 2px solid #ffb900;
|
||||
padding: 5px 10px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent h3) {
|
||||
font-size: 36px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
border-left: 4px solid var(--rootColor);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent p) {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent img) {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
:deep(.productmorecontent td) {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent tbody tr:nth-child(odd)) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent tbody tr:nth-child(even)) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.productmorecontent tbody tr:nth-child(1)) {
|
||||
background-color: var(--rootColor);
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-size: 16px;
|
||||
line-height: 15px;
|
||||
}
|
||||
:deep(.el-collapse-item__content) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
:deep(.productmorecontent .table_wrap) {
|
||||
overflow-x: scroll
|
||||
}
|
||||
|
||||
:deep(.productmorecontent h3) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
179
assets/css/ProductList/Detail/media.scss
Normal file
179
assets/css/ProductList/Detail/media.scss
Normal file
@ -0,0 +1,179 @@
|
||||
//media.scss
|
||||
/*1440px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*1200px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1200px) {
|
||||
|
||||
}
|
||||
@media (min-width: 993px) and (max-width: 1200px) {
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1200px) {
|
||||
.bcard, .brand, .move {
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*880px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 880px) {
|
||||
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 880px) {
|
||||
.img-box{
|
||||
width: 60vw!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_txt,
|
||||
.newsboxtxt {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
/*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;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
418
assets/css/ProductList/index.scss
Normal file
418
assets/css/ProductList/index.scss
Normal file
@ -0,0 +1,418 @@
|
||||
* {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
margin-top: 85px;
|
||||
// padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bannercontent_title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bannercontent_title h2 {
|
||||
font-size: 46px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bannercontent_link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.bannercontent_link a {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannercontent_link i {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.last {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.product_right .shop_li {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border: 1px solid var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion .link {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 15px 15px 15px 15px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--rootColor);
|
||||
position: relative;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-o-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion li:last-child .link {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion li i {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-o-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.accordion li i.fa-chevron-down {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.accordion li:hover .link {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion li:hover .link {
|
||||
color: #fff;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.accordion li:hover i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion li:hover i.fa-chevron-down {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion .active .link {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
.accordion .active .link {
|
||||
color: #fff;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.accordion .active i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion .active i.fa-chevron-down {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.product_left_menu h2 {
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
background-color: var(--rootColor);
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 30px auto 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
padding: 5px 10px;
|
||||
background-color: #fff;
|
||||
margin-right: 10px;
|
||||
color: #b1191d;
|
||||
border: 1px solid #b1191d;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: #b1191d !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid #b1191d !important;
|
||||
}
|
||||
|
||||
.pagination a:hover {
|
||||
background-color: #b1191d !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid #b1191d !important;
|
||||
|
||||
}
|
||||
|
||||
.current2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.three_li {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.three_box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
|
||||
padding: 50px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.three_box i {
|
||||
z-index: 99;
|
||||
font-size: 60px;
|
||||
color: var(--rootColor);
|
||||
text-align: center;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.three_box h3 {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin: 0 auto 15px auto;
|
||||
}
|
||||
|
||||
.three_box p {
|
||||
z-index: 99;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.three_box a {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.threeflex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.threeline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: var(--rootColor);
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.three_li:hover .threeline {
|
||||
width: 100%;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.three_li:hover .three_box i {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.three_li:hover .three_box p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.three_li:hover .productimg img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.productimg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding-top: 70%;
|
||||
}
|
||||
|
||||
.productimg img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product .three_box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.producttxt {
|
||||
padding: 20px 15px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.producttxt p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.producttxt h3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.productmore {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 15px 40px;
|
||||
background-color: var(--rootColor);
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.productmore span {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.productmore i {
|
||||
font-size: 16px;
|
||||
color: #fff !important;
|
||||
margin-left: 10px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.three_li:hover .productmore {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.three_li:hover:hover .productmore span,
|
||||
.three_li:hover:hover .productmore i {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.three_li:hover .producttxt h3,
|
||||
.three_li:hover .producttxt p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.product>.container>.row {
|
||||
min-height: 650px;
|
||||
}
|
||||
179
assets/css/ProductList/media.scss
Normal file
179
assets/css/ProductList/media.scss
Normal file
@ -0,0 +1,179 @@
|
||||
//media.scss
|
||||
/*1440px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*1200px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1200px) {
|
||||
|
||||
}
|
||||
@media (min-width: 993px) and (max-width: 1200px) {
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1200px) {
|
||||
.bcard, .brand, .move {
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*880px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 880px) {
|
||||
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 880px) {
|
||||
.img-box{
|
||||
width: 60vw!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_txt,
|
||||
.newsboxtxt {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
/*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;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
76
assets/css/Tab/index.scss
Normal file
76
assets/css/Tab/index.scss
Normal 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
47
assets/css/Tab/media.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
207
assets/css/business/contact/index.scss
Normal file
207
assets/css/business/contact/index.scss
Normal file
@ -0,0 +1,207 @@
|
||||
.messageUsForm__error {
|
||||
color: #dc3232;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactus_hd {
|
||||
padding: 100px 0 0 0;
|
||||
}
|
||||
|
||||
.section1_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section1_title_text {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contactus_hd h3 {
|
||||
font-size: 17px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.contactus_way {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.ways {
|
||||
height: 100%;
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 30px 0 rgb(0 0 0 / 6%);
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.ways p {
|
||||
font-size: 22px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.wayscon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ways i {
|
||||
color: #A72027;
|
||||
text-align: center;
|
||||
margin: 0 auto 10px auto;
|
||||
font-size: 50px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
.ways p {
|
||||
font-size: 22px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.contactus_bd {
|
||||
padding: 100px 0 100px 0;
|
||||
}
|
||||
|
||||
.contactus_table {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.wpcf7 .screen-reader-response {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.feedbackForm {
|
||||
padding: 16px 16px 40px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.feedbackForm .line {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feedbackForm .line input {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.contactus_table input {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
border: none;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
transition: all 0.3s;
|
||||
background-size: 15px;
|
||||
background-color: #f4f4f4;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 15px center;
|
||||
}
|
||||
|
||||
.feedbackForm .line input,
|
||||
.feedbackForm .line textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 1px #ccc;
|
||||
color: #222d38;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feedbackForm .btn {
|
||||
background: #A72027;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
height: 40px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.wpcf7-spinner {
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
background-color: #23282d;
|
||||
opacity: 0.75;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
margin: 0 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contactus_table textarea {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
border: none;
|
||||
resize: none;
|
||||
font-size: 16px;
|
||||
height: 200px;
|
||||
padding: 10px 10px;
|
||||
transition: all 0.3s;
|
||||
background-size: 15px;
|
||||
background-color: #f4f4f4;
|
||||
background-repeat: no-repeat;
|
||||
margin: 30px 0 40px 0;
|
||||
}
|
||||
|
||||
.contact_us_link {
|
||||
color: black !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
29
assets/css/business/contact/media.scss
Normal file
29
assets/css/business/contact/media.scss
Normal file
@ -0,0 +1,29 @@
|
||||
/*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) {
|
||||
|
||||
}
|
||||
131
assets/css/business/news/index.scss
Normal file
131
assets/css/business/news/index.scss
Normal 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
41
assets/css/business/news/media.scss
Normal 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
45
assets/css/business/news/news_details/index.scss
Normal 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
34
assets/css/business/news/news_details/media.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
323
assets/css/index/font/iconfont.css
Normal file
323
assets/css/index/font/iconfont.css
Normal file
@ -0,0 +1,323 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3992581 */
|
||||
src: url('iconfontc555.woff2?t=1683697529931') format('woff2'),
|
||||
url('iconfontc555.woff?t=1683697529931') format('woff'),
|
||||
url('iconfontc555.ttf?t=1683697529931') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e741";
|
||||
}
|
||||
|
||||
.icon-yinxingqia:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.icon-tuikuan_icon:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-fahuochaxunbeifen2x:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-instagram-fill:before {
|
||||
content: "\e88f";
|
||||
}
|
||||
|
||||
.icon-whatsapp-fill:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.icon-vk:before {
|
||||
content: "\ec2c";
|
||||
}
|
||||
|
||||
.icon-youxiatianchong:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-fensuijiicon02:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.icon-fanjishiposuiji:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.icon-sanjiaoxing:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-dianhua11:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
|
||||
.icon-weixin:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-kuangshanjixie:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-jiancaijixie:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-xiazai1:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.icon-youxiang5:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.icon-dizifuben:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-shan:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-baojiaquotation:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.icon-bofang:before {
|
||||
content: "\e87c";
|
||||
}
|
||||
|
||||
.icon-weixiu:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
||||
.icon-jurassic_check-data:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.icon-icon_kefu:before {
|
||||
content: "\e7b4";
|
||||
}
|
||||
|
||||
.icon-kuaisu_jiasu:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.icon-maobi:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.icon-dizhixinxi:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-shouji:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-facebook1:before {
|
||||
content: "\eb8d";
|
||||
}
|
||||
|
||||
.icon-meiyuanbizhuanyongzhanghu:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-fasong:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.icon-youxiang3:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.icon-gouwudai:before {
|
||||
content: "\e801";
|
||||
}
|
||||
|
||||
.icon-daohangdizhi:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.icon-zhengque:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-jiangzhang:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-gf-telephone:before {
|
||||
content: "\e96c";
|
||||
}
|
||||
|
||||
.icon-tuite:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-youxiang2:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-ins:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-dizhi:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-facebook:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.icon-double-circle:before {
|
||||
content: "\ea6c";
|
||||
}
|
||||
|
||||
.icon-a-youjiantouzhixiangyoujiantou:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-youtube:before {
|
||||
content: "\ec32";
|
||||
}
|
||||
|
||||
.icon-lingying:before {
|
||||
content: "\ee48";
|
||||
}
|
||||
|
||||
.icon-31dianhua:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-correct-bold:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.icon-xinxizhongxin:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.icon-whatsapp:before {
|
||||
content: "\e8ea";
|
||||
}
|
||||
|
||||
.icon-tubiao207:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-xiaoshouqushi:before {
|
||||
content: "\e636";
|
||||
}
|
||||
|
||||
.icon-zuanshi:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-Group-:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.icon-chubujilu:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.icon-zhiliangshenhe:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.icon-xinwenxiangqing-shangyipian:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-xinwenxiangqing-shangyipian-copy:before {
|
||||
content: "\ea83";
|
||||
}
|
||||
|
||||
.icon-xingxing:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-24gf-playCircle:before {
|
||||
content: "\ea82";
|
||||
}
|
||||
|
||||
.icon-icon:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-logo-whatsapp:before {
|
||||
content: "\e6fa";
|
||||
}
|
||||
|
||||
.icon-4fanhuidingbucheng:before {
|
||||
content: "\e85d";
|
||||
}
|
||||
|
||||
.icon-fanhuidingbu:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-dianhua1:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.icon-dizhiguanli:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-youjiantou:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-youxiang1:before {
|
||||
content: "\e908";
|
||||
}
|
||||
|
||||
.icon-youjiantou1:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-dianhua2:before {
|
||||
content: "\e8ad";
|
||||
}
|
||||
|
||||
.icon-xiala:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.icon-pailietubiao-22:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-dianhuahover:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-youxiang:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-gf-telephone2:before {
|
||||
content: "\e96d";
|
||||
}
|
||||
|
||||
.icon-dianhua:before {
|
||||
content: "\e8c3";
|
||||
}
|
||||
|
||||
BIN
assets/css/index/font/iconfontc555.ttf
Normal file
BIN
assets/css/index/font/iconfontc555.ttf
Normal file
Binary file not shown.
BIN
assets/css/index/font/iconfontc555.woff
Normal file
BIN
assets/css/index/font/iconfontc555.woff
Normal file
Binary file not shown.
BIN
assets/css/index/font/iconfontc555.woff2
Normal file
BIN
assets/css/index/font/iconfontc555.woff2
Normal file
Binary file not shown.
107
assets/css/index/font2/iconfont.css
Normal file
107
assets/css/index/font2/iconfont.css
Normal file
@ -0,0 +1,107 @@
|
||||
@font-face {
|
||||
font-family: "iconfont3"; /* Project id 4067912 */
|
||||
src: url('iconfont14f5.woff2?t=1684389979045') format('woff2'),
|
||||
url('iconfont14f5.woff?t=1684389979045') format('woff'),
|
||||
url('iconfont14f5.ttf?t=1684389979045') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont3 {
|
||||
font-family: "iconfont3" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-tuite:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-ins:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-icon6:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.icon-tuandui:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-icon-test:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-shigongrenyuan:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-tuanduixiezuo:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-shangye-:before {
|
||||
content: "\eaa3";
|
||||
}
|
||||
|
||||
.icon-touzijihuaguanli:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.icon-xinfengkai:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-24gl-city3:before {
|
||||
content: "\e832";
|
||||
}
|
||||
|
||||
.icon-dianli:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-gerenzhuanjia:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-Nxiaodihezuo:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.icon-wuliuquanqiuwuliu:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-21-Time:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-gongyegongcheng_linggan:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.icon-icon-person-hezuo1:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-a-tadiao_huaban1:before {
|
||||
content: "\e808";
|
||||
}
|
||||
|
||||
.icon-shigong03:before {
|
||||
content: "\eb35";
|
||||
}
|
||||
|
||||
.icon-guanbi:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e8b9";
|
||||
}
|
||||
|
||||
BIN
assets/css/index/font2/iconfont14f5.ttf
Normal file
BIN
assets/css/index/font2/iconfont14f5.ttf
Normal file
Binary file not shown.
BIN
assets/css/index/font2/iconfont14f5.woff
Normal file
BIN
assets/css/index/font2/iconfont14f5.woff
Normal file
Binary file not shown.
BIN
assets/css/index/font2/iconfont14f5.woff2
Normal file
BIN
assets/css/index/font2/iconfont14f5.woff2
Normal file
Binary file not shown.
391
assets/css/index/iconfont/iconfont.css
Normal file
391
assets/css/index/iconfont/iconfont.css
Normal file
@ -0,0 +1,391 @@
|
||||
@font-face {
|
||||
font-family: "iconfont2"; /* Project id 4017520 */
|
||||
src: url('iconfont.woff2?t=1681548759797') format('woff2'),
|
||||
url('iconfont.woff?t=1681548759797') format('woff'),
|
||||
url('iconfont.ttf?t=1681548759797') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont2 {
|
||||
font-family: "iconfont2" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-tree-table:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-unlock:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.icon-zujian:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.icon-theme:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.icon-swagger:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.icon-star:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.icon-time:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.icon-upload:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.icon-weixin:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.icon-system:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.icon-web:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-tree:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.icon-tool:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.icon-zip:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.icon-link:before {
|
||||
content: "\e636";
|
||||
}
|
||||
|
||||
.icon-list:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-international:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.icon-language:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.icon-index:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
|
||||
.icon-ipvisits:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-money:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-message:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-login:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-lock:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-menu:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-log:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.icon-logininfor:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-mnt:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.icon-password:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-peoples:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-post:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.icon-permission:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-phone:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-people:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-online:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.icon-pdf:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.icon-redis:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.icon-size:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-server:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-select:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.icon-question:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.icon-rate:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.icon-monitor:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-source:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.icon-role:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.icon-shopping:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.icon-skill:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.icon-number:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.icon-a-404:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-email:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-example:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-error:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.icon-excel:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-education:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-eye-open:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-eye:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-guide:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-gonggao:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-icon1:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-fullscreen:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-icon:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-image:before {
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.icon-form:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.icon-job:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
||||
.icon-cascader:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-alipay:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-anq:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-backup:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-bug:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-button:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-chain:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-chart:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-checkbox:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-clipboard:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-codeConsole:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-code:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-color:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-database:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-component:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-dashboard:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-date:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-deploy:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-develop:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-dept:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-dictionary:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-documentation:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-doc:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-download:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-dict:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-edit:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-app:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
1
assets/css/index/iconfont/iconfont.js
Normal file
1
assets/css/index/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
667
assets/css/index/iconfont/iconfont.json
Normal file
667
assets/css/index/iconfont/iconfont.json
Normal file
@ -0,0 +1,667 @@
|
||||
{
|
||||
"id": "4017520",
|
||||
"name": "admin",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "35076965",
|
||||
"name": "tree-table",
|
||||
"font_class": "tree-table",
|
||||
"unicode": "e637",
|
||||
"unicode_decimal": 58935
|
||||
},
|
||||
{
|
||||
"icon_id": "35076967",
|
||||
"name": "unlock",
|
||||
"font_class": "unlock",
|
||||
"unicode": "e654",
|
||||
"unicode_decimal": 58964
|
||||
},
|
||||
{
|
||||
"icon_id": "35076968",
|
||||
"name": "zujian",
|
||||
"font_class": "zujian",
|
||||
"unicode": "e655",
|
||||
"unicode_decimal": 58965
|
||||
},
|
||||
{
|
||||
"icon_id": "35076969",
|
||||
"name": "theme",
|
||||
"font_class": "theme",
|
||||
"unicode": "e659",
|
||||
"unicode_decimal": 58969
|
||||
},
|
||||
{
|
||||
"icon_id": "35076970",
|
||||
"name": "swagger",
|
||||
"font_class": "swagger",
|
||||
"unicode": "e65c",
|
||||
"unicode_decimal": 58972
|
||||
},
|
||||
{
|
||||
"icon_id": "35076971",
|
||||
"name": "star",
|
||||
"font_class": "star",
|
||||
"unicode": "e661",
|
||||
"unicode_decimal": 58977
|
||||
},
|
||||
{
|
||||
"icon_id": "35076972",
|
||||
"name": "time",
|
||||
"font_class": "time",
|
||||
"unicode": "e662",
|
||||
"unicode_decimal": 58978
|
||||
},
|
||||
{
|
||||
"icon_id": "35076973",
|
||||
"name": "upload",
|
||||
"font_class": "upload",
|
||||
"unicode": "e663",
|
||||
"unicode_decimal": 58979
|
||||
},
|
||||
{
|
||||
"icon_id": "35076974",
|
||||
"name": "weixin",
|
||||
"font_class": "weixin",
|
||||
"unicode": "e664",
|
||||
"unicode_decimal": 58980
|
||||
},
|
||||
{
|
||||
"icon_id": "35076977",
|
||||
"name": "system",
|
||||
"font_class": "system",
|
||||
"unicode": "e667",
|
||||
"unicode_decimal": 58983
|
||||
},
|
||||
{
|
||||
"icon_id": "35076979",
|
||||
"name": "web",
|
||||
"font_class": "web",
|
||||
"unicode": "e668",
|
||||
"unicode_decimal": 58984
|
||||
},
|
||||
{
|
||||
"icon_id": "35076980",
|
||||
"name": "tree",
|
||||
"font_class": "tree",
|
||||
"unicode": "e669",
|
||||
"unicode_decimal": 58985
|
||||
},
|
||||
{
|
||||
"icon_id": "35076981",
|
||||
"name": "user",
|
||||
"font_class": "user",
|
||||
"unicode": "e66a",
|
||||
"unicode_decimal": 58986
|
||||
},
|
||||
{
|
||||
"icon_id": "35076982",
|
||||
"name": "tool",
|
||||
"font_class": "tool",
|
||||
"unicode": "e66b",
|
||||
"unicode_decimal": 58987
|
||||
},
|
||||
{
|
||||
"icon_id": "35076986",
|
||||
"name": "zip",
|
||||
"font_class": "zip",
|
||||
"unicode": "e66c",
|
||||
"unicode_decimal": 58988
|
||||
},
|
||||
{
|
||||
"icon_id": "35076492",
|
||||
"name": "link",
|
||||
"font_class": "link",
|
||||
"unicode": "e636",
|
||||
"unicode_decimal": 58934
|
||||
},
|
||||
{
|
||||
"icon_id": "35076494",
|
||||
"name": "list",
|
||||
"font_class": "list",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
},
|
||||
{
|
||||
"icon_id": "35076495",
|
||||
"name": "international",
|
||||
"font_class": "international",
|
||||
"unicode": "e639",
|
||||
"unicode_decimal": 58937
|
||||
},
|
||||
{
|
||||
"icon_id": "35076496",
|
||||
"name": "language",
|
||||
"font_class": "language",
|
||||
"unicode": "e63a",
|
||||
"unicode_decimal": 58938
|
||||
},
|
||||
{
|
||||
"icon_id": "35076497",
|
||||
"name": "index",
|
||||
"font_class": "index",
|
||||
"unicode": "e63b",
|
||||
"unicode_decimal": 58939
|
||||
},
|
||||
{
|
||||
"icon_id": "35076498",
|
||||
"name": "ipvisits",
|
||||
"font_class": "ipvisits",
|
||||
"unicode": "e63c",
|
||||
"unicode_decimal": 58940
|
||||
},
|
||||
{
|
||||
"icon_id": "35076499",
|
||||
"name": "money",
|
||||
"font_class": "money",
|
||||
"unicode": "e63d",
|
||||
"unicode_decimal": 58941
|
||||
},
|
||||
{
|
||||
"icon_id": "35076500",
|
||||
"name": "message",
|
||||
"font_class": "message",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "35076501",
|
||||
"name": "login",
|
||||
"font_class": "login",
|
||||
"unicode": "e63f",
|
||||
"unicode_decimal": 58943
|
||||
},
|
||||
{
|
||||
"icon_id": "35076502",
|
||||
"name": "lock",
|
||||
"font_class": "lock",
|
||||
"unicode": "e640",
|
||||
"unicode_decimal": 58944
|
||||
},
|
||||
{
|
||||
"icon_id": "35076503",
|
||||
"name": "menu",
|
||||
"font_class": "menu",
|
||||
"unicode": "e641",
|
||||
"unicode_decimal": 58945
|
||||
},
|
||||
{
|
||||
"icon_id": "35076505",
|
||||
"name": "log",
|
||||
"font_class": "log",
|
||||
"unicode": "e643",
|
||||
"unicode_decimal": 58947
|
||||
},
|
||||
{
|
||||
"icon_id": "35076506",
|
||||
"name": "logininfor",
|
||||
"font_class": "logininfor",
|
||||
"unicode": "e644",
|
||||
"unicode_decimal": 58948
|
||||
},
|
||||
{
|
||||
"icon_id": "35076507",
|
||||
"name": "mnt",
|
||||
"font_class": "mnt",
|
||||
"unicode": "e645",
|
||||
"unicode_decimal": 58949
|
||||
},
|
||||
{
|
||||
"icon_id": "35076509",
|
||||
"name": "password",
|
||||
"font_class": "password",
|
||||
"unicode": "e646",
|
||||
"unicode_decimal": 58950
|
||||
},
|
||||
{
|
||||
"icon_id": "35076510",
|
||||
"name": "peoples",
|
||||
"font_class": "peoples",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "35076511",
|
||||
"name": "post",
|
||||
"font_class": "post",
|
||||
"unicode": "e648",
|
||||
"unicode_decimal": 58952
|
||||
},
|
||||
{
|
||||
"icon_id": "35076512",
|
||||
"name": "permission",
|
||||
"font_class": "permission",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "35076513",
|
||||
"name": "phone",
|
||||
"font_class": "phone",
|
||||
"unicode": "e64a",
|
||||
"unicode_decimal": 58954
|
||||
},
|
||||
{
|
||||
"icon_id": "35076514",
|
||||
"name": "people",
|
||||
"font_class": "people",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "35076516",
|
||||
"name": "online",
|
||||
"font_class": "online",
|
||||
"unicode": "e64d",
|
||||
"unicode_decimal": 58957
|
||||
},
|
||||
{
|
||||
"icon_id": "35076518",
|
||||
"name": "pdf",
|
||||
"font_class": "pdf",
|
||||
"unicode": "e64f",
|
||||
"unicode_decimal": 58959
|
||||
},
|
||||
{
|
||||
"icon_id": "35076519",
|
||||
"name": "redis",
|
||||
"font_class": "redis",
|
||||
"unicode": "e650",
|
||||
"unicode_decimal": 58960
|
||||
},
|
||||
{
|
||||
"icon_id": "35076520",
|
||||
"name": "size",
|
||||
"font_class": "size",
|
||||
"unicode": "e651",
|
||||
"unicode_decimal": 58961
|
||||
},
|
||||
{
|
||||
"icon_id": "35076521",
|
||||
"name": "search",
|
||||
"font_class": "search",
|
||||
"unicode": "e652",
|
||||
"unicode_decimal": 58962
|
||||
},
|
||||
{
|
||||
"icon_id": "35076522",
|
||||
"name": "server",
|
||||
"font_class": "server",
|
||||
"unicode": "e653",
|
||||
"unicode_decimal": 58963
|
||||
},
|
||||
{
|
||||
"icon_id": "35076525",
|
||||
"name": "select",
|
||||
"font_class": "select",
|
||||
"unicode": "e656",
|
||||
"unicode_decimal": 58966
|
||||
},
|
||||
{
|
||||
"icon_id": "35076526",
|
||||
"name": "question",
|
||||
"font_class": "question",
|
||||
"unicode": "e657",
|
||||
"unicode_decimal": 58967
|
||||
},
|
||||
{
|
||||
"icon_id": "35076527",
|
||||
"name": "rate",
|
||||
"font_class": "rate",
|
||||
"unicode": "e658",
|
||||
"unicode_decimal": 58968
|
||||
},
|
||||
{
|
||||
"icon_id": "35076529",
|
||||
"name": "monitor",
|
||||
"font_class": "monitor",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "35076530",
|
||||
"name": "source",
|
||||
"font_class": "source",
|
||||
"unicode": "e65b",
|
||||
"unicode_decimal": 58971
|
||||
},
|
||||
{
|
||||
"icon_id": "35076532",
|
||||
"name": "role",
|
||||
"font_class": "role",
|
||||
"unicode": "e65d",
|
||||
"unicode_decimal": 58973
|
||||
},
|
||||
{
|
||||
"icon_id": "35076533",
|
||||
"name": "shopping",
|
||||
"font_class": "shopping",
|
||||
"unicode": "e65e",
|
||||
"unicode_decimal": 58974
|
||||
},
|
||||
{
|
||||
"icon_id": "35076534",
|
||||
"name": "skill",
|
||||
"font_class": "skill",
|
||||
"unicode": "e65f",
|
||||
"unicode_decimal": 58975
|
||||
},
|
||||
{
|
||||
"icon_id": "35076535",
|
||||
"name": "number",
|
||||
"font_class": "number",
|
||||
"unicode": "e660",
|
||||
"unicode_decimal": 58976
|
||||
},
|
||||
{
|
||||
"icon_id": "35076366",
|
||||
"name": "404",
|
||||
"font_class": "a-404",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "35076470",
|
||||
"name": "email",
|
||||
"font_class": "email",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "35076471",
|
||||
"name": "example",
|
||||
"font_class": "example",
|
||||
"unicode": "e624",
|
||||
"unicode_decimal": 58916
|
||||
},
|
||||
{
|
||||
"icon_id": "35076472",
|
||||
"name": "error",
|
||||
"font_class": "error",
|
||||
"unicode": "e625",
|
||||
"unicode_decimal": 58917
|
||||
},
|
||||
{
|
||||
"icon_id": "35076473",
|
||||
"name": "excel",
|
||||
"font_class": "excel",
|
||||
"unicode": "e626",
|
||||
"unicode_decimal": 58918
|
||||
},
|
||||
{
|
||||
"icon_id": "35076474",
|
||||
"name": "education",
|
||||
"font_class": "education",
|
||||
"unicode": "e627",
|
||||
"unicode_decimal": 58919
|
||||
},
|
||||
{
|
||||
"icon_id": "35076475",
|
||||
"name": "eye-open",
|
||||
"font_class": "eye-open",
|
||||
"unicode": "e628",
|
||||
"unicode_decimal": 58920
|
||||
},
|
||||
{
|
||||
"icon_id": "35076476",
|
||||
"name": "eye",
|
||||
"font_class": "eye",
|
||||
"unicode": "e629",
|
||||
"unicode_decimal": 58921
|
||||
},
|
||||
{
|
||||
"icon_id": "35076480",
|
||||
"name": "github",
|
||||
"font_class": "github",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "35076481",
|
||||
"name": "guide",
|
||||
"font_class": "guide",
|
||||
"unicode": "e62c",
|
||||
"unicode_decimal": 58924
|
||||
},
|
||||
{
|
||||
"icon_id": "35076482",
|
||||
"name": "gonggao",
|
||||
"font_class": "gonggao",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
},
|
||||
{
|
||||
"icon_id": "35076483",
|
||||
"name": "icon1",
|
||||
"font_class": "icon1",
|
||||
"unicode": "e62e",
|
||||
"unicode_decimal": 58926
|
||||
},
|
||||
{
|
||||
"icon_id": "35076484",
|
||||
"name": "fullscreen",
|
||||
"font_class": "fullscreen",
|
||||
"unicode": "e62f",
|
||||
"unicode_decimal": 58927
|
||||
},
|
||||
{
|
||||
"icon_id": "35076485",
|
||||
"name": "icon",
|
||||
"font_class": "icon",
|
||||
"unicode": "e630",
|
||||
"unicode_decimal": 58928
|
||||
},
|
||||
{
|
||||
"icon_id": "35076486",
|
||||
"name": "image",
|
||||
"font_class": "image",
|
||||
"unicode": "e631",
|
||||
"unicode_decimal": 58929
|
||||
},
|
||||
{
|
||||
"icon_id": "35076487",
|
||||
"name": "form",
|
||||
"font_class": "form",
|
||||
"unicode": "e632",
|
||||
"unicode_decimal": 58930
|
||||
},
|
||||
{
|
||||
"icon_id": "35076491",
|
||||
"name": "job",
|
||||
"font_class": "job",
|
||||
"unicode": "e635",
|
||||
"unicode_decimal": 58933
|
||||
},
|
||||
{
|
||||
"icon_id": "35076284",
|
||||
"name": "cascader",
|
||||
"font_class": "cascader",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "35076315",
|
||||
"name": "alipay",
|
||||
"font_class": "alipay",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "35076316",
|
||||
"name": "anq",
|
||||
"font_class": "anq",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "35076317",
|
||||
"name": "backup",
|
||||
"font_class": "backup",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "35076318",
|
||||
"name": "bug",
|
||||
"font_class": "bug",
|
||||
"unicode": "e607",
|
||||
"unicode_decimal": 58887
|
||||
},
|
||||
{
|
||||
"icon_id": "35076321",
|
||||
"name": "button",
|
||||
"font_class": "button",
|
||||
"unicode": "e609",
|
||||
"unicode_decimal": 58889
|
||||
},
|
||||
{
|
||||
"icon_id": "35076323",
|
||||
"name": "chain",
|
||||
"font_class": "chain",
|
||||
"unicode": "e60b",
|
||||
"unicode_decimal": 58891
|
||||
},
|
||||
{
|
||||
"icon_id": "35076324",
|
||||
"name": "chart",
|
||||
"font_class": "chart",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "35076325",
|
||||
"name": "checkbox",
|
||||
"font_class": "checkbox",
|
||||
"unicode": "e60d",
|
||||
"unicode_decimal": 58893
|
||||
},
|
||||
{
|
||||
"icon_id": "35076326",
|
||||
"name": "clipboard",
|
||||
"font_class": "clipboard",
|
||||
"unicode": "e60e",
|
||||
"unicode_decimal": 58894
|
||||
},
|
||||
{
|
||||
"icon_id": "35076327",
|
||||
"name": "codeConsole",
|
||||
"font_class": "codeConsole",
|
||||
"unicode": "e60f",
|
||||
"unicode_decimal": 58895
|
||||
},
|
||||
{
|
||||
"icon_id": "35076328",
|
||||
"name": "code",
|
||||
"font_class": "code",
|
||||
"unicode": "e610",
|
||||
"unicode_decimal": 58896
|
||||
},
|
||||
{
|
||||
"icon_id": "35076329",
|
||||
"name": "color",
|
||||
"font_class": "color",
|
||||
"unicode": "e611",
|
||||
"unicode_decimal": 58897
|
||||
},
|
||||
{
|
||||
"icon_id": "35076330",
|
||||
"name": "database",
|
||||
"font_class": "database",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "35076331",
|
||||
"name": "component",
|
||||
"font_class": "component",
|
||||
"unicode": "e613",
|
||||
"unicode_decimal": 58899
|
||||
},
|
||||
{
|
||||
"icon_id": "35076332",
|
||||
"name": "dashboard",
|
||||
"font_class": "dashboard",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "35076333",
|
||||
"name": "date",
|
||||
"font_class": "date",
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "35076334",
|
||||
"name": "deploy",
|
||||
"font_class": "deploy",
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "35076335",
|
||||
"name": "develop",
|
||||
"font_class": "develop",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "35076337",
|
||||
"name": "dept",
|
||||
"font_class": "dept",
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "35076340",
|
||||
"name": "dictionary",
|
||||
"font_class": "dictionary",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "35076341",
|
||||
"name": "documentation",
|
||||
"font_class": "documentation",
|
||||
"unicode": "e61b",
|
||||
"unicode_decimal": 58907
|
||||
},
|
||||
{
|
||||
"icon_id": "35076342",
|
||||
"name": "doc",
|
||||
"font_class": "doc",
|
||||
"unicode": "e61c",
|
||||
"unicode_decimal": 58908
|
||||
},
|
||||
{
|
||||
"icon_id": "35076343",
|
||||
"name": "download",
|
||||
"font_class": "download",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "35076344",
|
||||
"name": "dict",
|
||||
"font_class": "dict",
|
||||
"unicode": "e61e",
|
||||
"unicode_decimal": 58910
|
||||
},
|
||||
{
|
||||
"icon_id": "35076351",
|
||||
"name": "edit",
|
||||
"font_class": "edit",
|
||||
"unicode": "e620",
|
||||
"unicode_decimal": 58912
|
||||
},
|
||||
{
|
||||
"icon_id": "35075963",
|
||||
"name": "app",
|
||||
"font_class": "app",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
assets/css/index/iconfont/iconfont.ttf
Normal file
BIN
assets/css/index/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
assets/css/index/iconfont/iconfont.woff
Normal file
BIN
assets/css/index/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
assets/css/index/iconfont/iconfont.woff2
Normal file
BIN
assets/css/index/iconfont/iconfont.woff2
Normal file
Binary file not shown.
116
assets/css/index/index.scss
Normal file
116
assets/css/index/index.scss
Normal 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
44
assets/css/index/media.scss
Normal 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) {
|
||||
|
||||
}
|
||||
|
||||
36
assets/css/poster/index.scss
Normal file
36
assets/css/poster/index.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.Poster-main{
|
||||
position: relative;
|
||||
.Poster-container{
|
||||
position: relative;
|
||||
height: 30vw;
|
||||
width: 100%;
|
||||
margin-top: var(--headerheight);
|
||||
.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
42
assets/css/poster/media.scss
Normal 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
943
assets/css/root/animation.scss
Normal 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
92
assets/css/root/media.scss
Normal 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) {
|
||||
// }
|
||||
120
assets/css/root/root.scss
Normal file
120
assets/css/root/root.scss
Normal file
@ -0,0 +1,120 @@
|
||||
:root {
|
||||
--rootColor: #b01e28;
|
||||
--headerheight:105px
|
||||
}
|
||||
|
||||
// body {
|
||||
// // background-color: #0a0a0a;
|
||||
// font-family: Inter;
|
||||
// }
|
||||
|
||||
html,body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input, button, textarea, checkbox, select, radio, form {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.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: var(--rootColor);
|
||||
}
|
||||
|
||||
.rootFc {
|
||||
color: var(--rootColor);
|
||||
}
|
||||
|
||||
.list_none animate__animated animate__fadeIn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ible-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
background-color: var(--rootColor);
|
||||
transition: all 0.35s ease-in-out;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
-moz-transition: all 0.35s ease-in-out;
|
||||
-ms-transition: all 0.35s ease-in-out;
|
||||
-o-transition: all 0.35s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ible-btn:hover {
|
||||
background-color: #fff;
|
||||
transform: scale(0.9);
|
||||
color: var(--rootColor)
|
||||
}
|
||||
|
||||
.ible-btn:link, .ible-btn:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
121
components/Booth/index.vue
Normal file
121
components/Booth/index.vue
Normal 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>
|
||||
140
components/Carousel/index.vue
Normal file
140
components/Carousel/index.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="Carousel-container" :style="styleContainer">
|
||||
<!--
|
||||
initialSlide：默认选中第几张
|
||||
modules：引入模块
|
||||
navigation：左右的按钮
|
||||
pagination：分页器导航
|
||||
autoplay：自动播放
|
||||
loop：循环
|
||||
swiperStyle：自定义样式
|
||||
-->
|
||||
<div style="padding-top: 20px;">
|
||||
|
||||
<swiper id="swiper" ref="swi perRef" :initialSlide="0" :modules="modules" :navigation="{ clickable: true }"
|
||||
:pagination="{ clickable: true }" :autoplay="{ delay: 10000 }" :loop="true" :style="swiperStyle"
|
||||
class="carousel-box">{{ banner_list }}
|
||||
<swiper-slide v-for="item in banner_list">
|
||||
<nuxt-link :to="item.banner_link" >
|
||||
<div class="carousel-items animate__animated animate__fadeIn animate__slow">
|
||||
|
||||
<!-- <img alt="" src="img/home/banner2-2.jpg" > -->
|
||||
<img alt="" :src="item.banner_img">
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
||||
</div>
|
||||
|
||||
</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 { t, locale } = useI18n()
|
||||
|
||||
// 获取轮播图列表
|
||||
const banner_list = ref([
|
||||
{
|
||||
// banner_img:`img/home/banner2-2.jpg`,
|
||||
},
|
||||
])
|
||||
const params = reactive({
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
// await get("/api/banners/getBannerList", params).then(res => {
|
||||
// let data = JSON.parse(res.value).data
|
||||
// console.log(data);
|
||||
// banner_list.value = data
|
||||
// })
|
||||
const getBannerListFun = async () => {
|
||||
useFetch('/api/banner/getBanner', { params: { banner_location: 1, locale: locale.value } }).then(res => {
|
||||
banner_list.value = JSON.parse(res.data.value).data
|
||||
console.log(banner_list.value, '@@@@banner_list');
|
||||
})
|
||||
.catch((err) => {
|
||||
banner_list.value = [{
|
||||
banner_img: `img/home/banner2-2.jpg`,
|
||||
banner_img: `img/home/banner2-2.jpg`,
|
||||
}]
|
||||
// console.log(banner_list.value,'@');
|
||||
})
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
(async () => {
|
||||
await getBannerListFun()
|
||||
})()
|
||||
})
|
||||
// 获取海报
|
||||
|
||||
|
||||
|
||||
/**整体轮播图样式*/
|
||||
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: '#a8232a', //设置字体颜色
|
||||
height: '', //设置高度
|
||||
width: '', //设置高度
|
||||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||
background: '' //设置背景颜色
|
||||
},
|
||||
/**左边按钮样式*/
|
||||
buttonPrev: {
|
||||
color: '#a8232a', //设置字体颜色
|
||||
height: '', //设置高度
|
||||
width: '', //设置高度
|
||||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||
background: '' //设置背景颜色
|
||||
},
|
||||
/**小圆点样式*/
|
||||
pagination: {
|
||||
color: '#fff', //设置字体颜色
|
||||
height: '8px', //设置高度
|
||||
width: '8px', //设置高度
|
||||
margin: '0 10px ', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||
background: 'rgb(255, 255, 255)' //设置背景颜色
|
||||
},
|
||||
/**选中的小圆点样式*/
|
||||
paginationActive: {
|
||||
color: '#a72027', //设置字体颜色
|
||||
height: '8px', //设置高度
|
||||
width: '8px', //设置高度
|
||||
margin: '0 10px', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||
background: '#a72027' //设置背景颜色
|
||||
}
|
||||
}), 'swiper')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped src="~/assets/css/Carousel/index.scss"></style>
|
||||
<style scoped src="~/assets/css/Carousel/media.scss"></style>
|
||||
182
components/Final/index.vue
Normal file
182
components/Final/index.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<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 font" :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-left-box">
|
||||
<img src="/img/icon/logo.png" class="icon-img" alt="">
|
||||
<div class="Final-left-title font">{{ $t('common.footer.desc') }}</div>
|
||||
<div class="Final-left-info font">
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img.png" alt="">
|
||||
</div>
|
||||
<div>{{ $t('common.footer.loc') }}</div>
|
||||
</div>
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img3.png" alt="">
|
||||
</div>
|
||||
<div>postmaster@lbie-group.com</div>
|
||||
</div>
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img2.png" alt="">
|
||||
</div>
|
||||
<div>17702075449</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
|
||||
<div class="Final-middle-items">
|
||||
<div class="items-title">{{ $t("common.footer.fastLink") }}</div>
|
||||
<div class="items-title-line"></div>
|
||||
<nuxt-link :to="getHerf('/about')">
|
||||
<div class="items">{{ $t("common.header.about") }}</div>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="getHerf('/news/1-1')">
|
||||
<div class="items">{{ $t("common.header.news") }}</div>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="getHerf('/contact')">
|
||||
<div class="items">{{ $t("common.header.contact") }}</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="Final-middle-items">
|
||||
<div class="items-title">{{ $t("common.footer.usefulLinks") }}</div>
|
||||
<div class="items-title-line"></div>
|
||||
<template v-for="(item, idx) in productTypeList">
|
||||
<nuxt-link v-if="item?.name && idx < 5" :to="getHerf(item.href)">
|
||||
<div class="items">{{ item.name }}</div>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Final-right-box">
|
||||
<div class="Final-right-title font">
|
||||
{{ $t('common.footer.worktime') }}
|
||||
</div>
|
||||
<div class="Final-right-title-line"></div>
|
||||
<div class="Final-right-time">
|
||||
<div class="Final-right-time-icon">
|
||||
<img src="/img/icon/Final_right_time.png" alt="">
|
||||
</div>
|
||||
<div>{{ $t('common.footer.time') }}</div>
|
||||
</div>
|
||||
<div class="Final-right-ctx">
|
||||
{{ $t('common.footer.desc') }}
|
||||
</div>
|
||||
<nuxt-link class="Final-right-btn ible-btn font" target="_blank" :to="'tel:17702075449'">
|
||||
{{ $t('common.footer.contact') }}
|
||||
</nuxt-link>
|
||||
</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">
|
||||
<div>
|
||||
Copyright © {{ $t('common.copyright') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { t, locale } = useI18n()
|
||||
// 样式配置
|
||||
const FinalStyle = {
|
||||
padding: "80px 0 0 0",
|
||||
FinalLeft: {},
|
||||
FinalMiddle: {},
|
||||
}
|
||||
const productTypeList = ref([])
|
||||
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
|
||||
// })
|
||||
|
||||
|
||||
//请求产品
|
||||
useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
|
||||
let data = JSON.parse(res.data.value).data || []
|
||||
res = []
|
||||
for (let key in data) {
|
||||
let obj = {}
|
||||
obj.name = data[key].product_type_name
|
||||
obj.href = '/product/product_list/' + data[key]['product_type_id'] + '-1'
|
||||
res.push(obj)
|
||||
}
|
||||
productTypeList.value = res
|
||||
})
|
||||
|
||||
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
29
components/Header/HeaderIcon.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="HeaderIcon" :style="[HeaderIcon]">
|
||||
<div class="HeaderIcon-container">
|
||||
<nuxt-link :to="getHerf('/')" >
|
||||
<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>
|
||||
53
components/Header/HeaderNav.vue
Normal file
53
components/Header/HeaderNav.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="HeaderNav" :style="[props.HeaderNav]">
|
||||
<div class="HeaderNav-container">
|
||||
|
||||
<nuxt-link :to="getHerf(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 v-if="item.children.length === 0" class="font">{{ item.name }}</span>
|
||||
<span v-else @mouseenter.self="enterNavEnter" class="font">{{ item.name }}</span>
|
||||
<div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
|
||||
v-if="item.children.length >= 1">
|
||||
<div v-for="_item in item.children" class="HeaderNav-navItems-child-items ">
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="font f1" @mouseenter="enterNavEnter">
|
||||
{{ _item.name }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</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']
|
||||
|
||||
//事件
|
||||
let navTimer = null
|
||||
const enterNavEnter = e => {
|
||||
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
|
||||
ele &&
|
||||
ele.classList.remove('dNone')
|
||||
clearInterval(navTimer)
|
||||
navTimer = setTimeout(() => {
|
||||
ele &&
|
||||
ele.classList.add('dNone')
|
||||
}, 1000)
|
||||
}
|
||||
const enterNavLeave = e => {
|
||||
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
|
||||
ele &&
|
||||
ele.classList.add('dNone')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>
|
||||
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>
|
||||
63
components/Header/HeaderSearch.vue
Normal file
63
components/Header/HeaderSearch.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<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="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name" @click="appNavItemEvent(item,$event.target)">
|
||||
<div @click="appNavItemEvent(item,$event.target.parentElement)" >{{item.name}}</div>
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone" v-for="_item in item.children" :key="_item.name" >
|
||||
<div >{{_item.name}}</div>
|
||||
</nuxt-link>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const appNavShow = ref(false)
|
||||
const log = console.log
|
||||
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
|
||||
tag.classList.toggle('active');
|
||||
[...tag.children].filter(item=>item.nodeName==='A').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>
|
||||
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>
|
||||
176
components/Header/index.vue
Normal file
176
components/Header/index.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="Header ">
|
||||
<div class="Header-container" :style="[HeaderStyleOption]">
|
||||
<HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
|
||||
<HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
|
||||
<HeaderSearch v-if="_lazy_with_fix_" :HeaderSearch="HeaderStyleOption.HeaderSearch"
|
||||
:appNav="HeaderStyleOption.appNav" :navList="navList" @showSearchBox="showSearchBox"></HeaderSearch>
|
||||
</div>
|
||||
<div class="search-box " @mouseleave="showSearchHideBox([])">
|
||||
<!-- @input="searchEvent" -->
|
||||
<input type="text" class="search-box-input " v-model='inputval' @keydown="keyDownEvent">
|
||||
<nuxt-link @click="showSearchBox()" class="search-btn" :to="url + $('search-box-input')[0].value">搜索</nuxt-link>
|
||||
<div class="search-hide-box ">
|
||||
<div class="search-hide-items" v-for="item in searchRes">
|
||||
<nuxtLink :to="{ path: getHerf(item.href), query: { s: item.txt } }">
|
||||
{{ 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 $ = document ? document.getElementsByClassName.bind(document) : () => [{ value: '' }]
|
||||
const _lazy_with_fix_ = ref(false)
|
||||
setTimeout(() => _lazy_with_fix_.value = true)
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
/**样式配置*/
|
||||
const HeaderStyleOption = reactive({
|
||||
|
||||
/**导航样式*/
|
||||
HeaderNav: {
|
||||
'padding-left': '25vw'
|
||||
},
|
||||
/**icon样式*/
|
||||
HeaderIcon: {},
|
||||
/**搜索样式*/
|
||||
HeaderSearch: {
|
||||
position: ' absolute',
|
||||
right: '20px',
|
||||
},
|
||||
/**手机菜单栏样式*/
|
||||
appNav: {
|
||||
top: ' 0',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
})
|
||||
let inputval = ref('')
|
||||
let info_article_type_id = ref(0)
|
||||
|
||||
// '/product'
|
||||
// '/product/child'
|
||||
// 'child'
|
||||
let navList = ref([
|
||||
{
|
||||
name: t('common.header.home'),
|
||||
children: [],
|
||||
href: '/',
|
||||
alias: 'home'
|
||||
},
|
||||
{
|
||||
name: t('common.header.products'),
|
||||
// href: '/product/product_list/0-1',
|
||||
children: [],
|
||||
alias: 'products'
|
||||
},
|
||||
{
|
||||
name: t('common.header.about'),
|
||||
children: [],
|
||||
href: '/about',
|
||||
alias: 'about'
|
||||
},
|
||||
{
|
||||
name: t('common.header.news'),
|
||||
children: [],
|
||||
href: '/news/1-1',
|
||||
alias: 'news'
|
||||
},
|
||||
{
|
||||
name: t('common.header.contact'),
|
||||
children: [],
|
||||
href: '/contact',
|
||||
alias: 'contact'
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
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 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')
|
||||
}
|
||||
}
|
||||
|
||||
/**对接区域**/
|
||||
const searchEvent = function (e) {
|
||||
return
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
let searchVal = e.target.value
|
||||
useFetch('/api/product/getProductList', {
|
||||
params: {
|
||||
"product_name": searchVal || ' ',
|
||||
locale: locale.value
|
||||
}
|
||||
}).then((res) => {
|
||||
let searchData = []
|
||||
for (let item of JSON.parse(res.data.value).data) {
|
||||
let obj = {}
|
||||
obj.href = '/product/product_list/' + item['product_id'] + '-1'
|
||||
obj.txt = item['product_name']
|
||||
searchData.push(obj)
|
||||
}
|
||||
|
||||
showSearchHideBox(searchData)
|
||||
})
|
||||
|
||||
}, 1000)
|
||||
}
|
||||
let url = getHerf('/product/product_list/0-1?s=')
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + $event.target.value))
|
||||
// console.log(123);
|
||||
$event.keyCode === 13 && showSearchBox()
|
||||
|
||||
|
||||
}
|
||||
|
||||
useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
|
||||
let data = JSON.parse(res.data.value).data || []
|
||||
res = []
|
||||
for (let item of data) {
|
||||
let obj = {}
|
||||
obj.name = item.product_type_name
|
||||
obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
|
||||
res.push(obj)
|
||||
}
|
||||
/**新增全系列跳转**/
|
||||
res.unshift({
|
||||
href: '/product/product_list/0-1',
|
||||
name: t('home.products.all')
|
||||
})
|
||||
for (let key in navList.value) {
|
||||
if (navList.value[key].alias === 'products') {
|
||||
navList.value[key].children = res
|
||||
}
|
||||
}
|
||||
})
|
||||
</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
66
components/ImgDetail/index.vue
Normal 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>
|
||||
465
components/IndexDetail/index.vue
Normal file
465
components/IndexDetail/index.vue
Normal file
@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<section>
|
||||
<div class="acard">
|
||||
<div class="container">
|
||||
<div class="row acardflex">
|
||||
<div class="acard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||||
data-animation="slide-in-blurred-left">
|
||||
<div class="videocard_title">
|
||||
<span> {{ $t('home.who.title') }} </span>
|
||||
<h2>{{ $t('home.who.company') }}</h2>
|
||||
<p>{{ $t('home.who.desc') }}</p>
|
||||
</div>
|
||||
<div class="acard_list">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont"></i>
|
||||
<p>{{ $t('home.who.tech') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont"></i>
|
||||
<p>{{ $t('home.who.service') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont"></i>
|
||||
<p>{{ $t('home.who.price') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||||
data-animation="slide-in-blurred-right">
|
||||
<div class="acardimg videoimgbtn videobtns">
|
||||
<img src="/img/home/about-2.jpg" alt="about">
|
||||
<a href="https://www.youtube.com/watch?v=2qpzCPHUv8g" target="_blank" rel="nofollow">
|
||||
<div class="videobbb">
|
||||
<div class="videoplay">
|
||||
<div class="point2">
|
||||
<i class="iconfont"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="bcard">
|
||||
<div class="bcardcover"></div>
|
||||
<div class="container">
|
||||
<div class="bcard_title right">
|
||||
<span>{{ $t('home.service.our') }}</span>
|
||||
<h2>{{ $t('home.service.pro') }}</h2>
|
||||
</div>
|
||||
<div class="bcard_list op0 " data-animation="slide-in-blurred-left">
|
||||
<div class="row">
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.1.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.1.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.2.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.2.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.3.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.3.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.4.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.4.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.5.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.5.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ $t('home.service.items.6.title') }}</h3>
|
||||
</a>
|
||||
<p>{{ $t('home.service.items.6.desc') }}</p>
|
||||
<a href="javascrpit:;" class="bcard_more">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="number bottom op0" data-animation="slide-in-elliptic-top-fwd">
|
||||
<div class="container">
|
||||
<div class="number_con">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="iconfont"></i>
|
||||
<span class="timer numadd" data-to="125" data-speed="3000">{{ _timer_data[0] }}</span>
|
||||
<p>{{ $t('home.statistics.expert') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="iconfont"></i>
|
||||
<span class="timer numadd" data-to="1250" data-speed="3000">{{ _timer_data[1] }}</span>
|
||||
<p>{{ $t('home.statistics.project') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="iconfont"></i>
|
||||
<span class="timer numadd" data-to="850" data-speed="3000">{{ _timer_data[2] }}</span>
|
||||
<p>{{ $t('home.statistics.satisfied') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="iconfont"></i>
|
||||
<span class="timer numadd" data-to="135" data-speed="3000">{{ _timer_data[3] }}</span>
|
||||
<p>{{ $t('home.statistics.award') }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="videocard">
|
||||
<div class="container">
|
||||
<div class="row videocardflex">
|
||||
<div class="videocard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||||
data-animation="slide-in-blurred-left">
|
||||
<div class="videoleftmain">
|
||||
<div class="videocard_title">
|
||||
<span>{{ $t('home.why.title') }}</span>
|
||||
<h2>{{ $t('home.why.company') }}</h2>
|
||||
<p>{{ $t('home.why.desc') }}</p>
|
||||
</div>
|
||||
<div class="videocard_list">
|
||||
<ul>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.1') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.2') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.3') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.4') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.5') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ $t('home.why.series.6') }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="videocard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||||
data-animation="slide-in-blurred-right">
|
||||
<div class="videocard_right_img">
|
||||
<img src="/img/home/img4.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="videomain">
|
||||
<div class="videoclose">
|
||||
<img src="/img/home/closeBtn.png" alt="">
|
||||
</div>
|
||||
<div class="videobox">
|
||||
<!--<video src="" controls></video>-->
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qpzCPHUv8g?si=AjSckeq0WxEFPzH1"
|
||||
title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="brand colormove" data-animation="slide-in-elliptic-top-fwd">
|
||||
<div class="brandcover"></div>
|
||||
<div class="brand_txt">
|
||||
<h2>{{ $t('home.for.title') }}</h2>
|
||||
<p>{{ $t('home.for.desc') }}</p>
|
||||
<a href="products/index.html" class="brand_more">{{ $t('home.for.start') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="allmain">
|
||||
<div class="blog_title right op0" data-animation="slide-in-blurred-left">
|
||||
<span>{{ $t('home.products.title') }}</span>
|
||||
<h2>{{ $t('home.products.desc') }}</h2>
|
||||
</div>
|
||||
<div class="allmain_list">
|
||||
<div class="row allmainflex">
|
||||
|
||||
<div class="allmain_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in product_data">
|
||||
<div class="allmain_box">
|
||||
<div class="allmain_cover"></div>
|
||||
<a href="javascript:;" class="allmain_txt">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.abstract }}</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="allmainimg">
|
||||
<img :src="item.img" alt="токарно фрезерный станок с чпу завод" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<img width=100% src="/img/home/38a0b923.png" alt="图片1">
|
||||
</div>
|
||||
</section>
|
||||
<!-- 新闻 -->
|
||||
<section>
|
||||
<div class="blog">
|
||||
<div class="container">
|
||||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||||
<span>{{ $t('home.news.title') }}</span>
|
||||
<h2>{{ $t('home.news.desc') }}</h2>
|
||||
</div>
|
||||
<div class="blog_main">
|
||||
<div class="row blogflex">
|
||||
|
||||
<div class="blog_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="(item, i) in new_data">
|
||||
<div class="blog_box">
|
||||
<div class="blogtime">
|
||||
<span>{{ item.news_issue_date }}</span>
|
||||
<p>{{ item.year }}</p>
|
||||
</div>
|
||||
<a :href='item.url' class="blog_img">
|
||||
<img :src="item.img" alt="" />
|
||||
</a>
|
||||
<div class="blog_txt">
|
||||
<a :href='item.url'>
|
||||
<h3> {{ item.title }}</h3>
|
||||
</a>
|
||||
<p>{{ item.news_intro }}
|
||||
</p>
|
||||
<a :href='item.url' class="blog_more">
|
||||
<span>Читать больше</span>
|
||||
<i class="iconfont"> </i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let new_data = ref([{
|
||||
year: '2023',
|
||||
blogtime: '08-15',
|
||||
title: '2014 год',
|
||||
abstract: 'Первый фрезерный станок 4 + 4 с живым циклом был успешно разработан и подал з...',
|
||||
img: '/img/home/b50504e1.jpg',
|
||||
url: "javascript:;"
|
||||
|
||||
}, {
|
||||
year: '2023',
|
||||
blogtime: '08-15',
|
||||
title: 'В 2009 году',
|
||||
abstract: '2014 годПрервав технические барьеры для встроенных Y – осевых фрезерны...',
|
||||
img: '/img/home/b50504e1.jpg',
|
||||
url: "javascript:;"
|
||||
},
|
||||
])
|
||||
let product_data = ref([
|
||||
// {
|
||||
// url: '2023',
|
||||
// blogtime: '08-15',
|
||||
// title: 'токарный с чпу по металлу Производитель',
|
||||
// abstract: 'токарно фрезерный станок с чпуТокарно фрезерный станок с ЧПУ – это высокотехнологичное оборудование, котороеиспользуется вметаллообрабатывающей промышленности для выполнения различных видо...',
|
||||
// img: '/img/home/W7-8-6D.jpg'
|
||||
|
||||
// }
|
||||
])
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
let timer_data = reactive(['125', '1250', '850', '135'])
|
||||
let _timer_data = reactive(['0', '0', '0', '0'])
|
||||
let i = ref('1')
|
||||
let key = ref(0)
|
||||
onMounted(() => {
|
||||
|
||||
const totalHeight = document.body.scrollHeight;
|
||||
|
||||
// 监听滚动事件
|
||||
window.addEventListener('scroll', function () {
|
||||
// 获取当前视窗的高度
|
||||
const viewportHeight = window.innerHeight;
|
||||
// 获取当前滚动位置
|
||||
const scrollPosition = window.scrollY;
|
||||
// 设置关键位置（例如页面高度的一半）
|
||||
const keyPosition = 1200
|
||||
// console.log(scrollPosition);
|
||||
// 检查是否滚动到关键位置
|
||||
if (scrollPosition >= keyPosition) {
|
||||
if (key.value == 0) {
|
||||
handleKeyPosition();
|
||||
key.value = 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 处理到达关键位置的函数
|
||||
function handleKeyPosition() {
|
||||
for (let i = 0; i < _timer_data.length; i++) {
|
||||
if (_timer_data[i] != timer_data[i]) {
|
||||
_timer_data[i]++;
|
||||
setTimeout(() => {
|
||||
handleKeyPosition()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// const getlist = function () {
|
||||
// product_data.value = []
|
||||
let data = []
|
||||
useFetch('/api/product/getProductList', { params: { locale: locale.value } }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// product_list.value = JSON.parse(res.data.value).data || []
|
||||
// console.log(product_list.value[0],'@@@@@');
|
||||
JSON.parse(res.data.value).data.forEach(element => {
|
||||
element.product_img = element.product_img.split(",")[0];
|
||||
data.push(element)
|
||||
});
|
||||
console.log(data);
|
||||
if (data.length <= 6) {
|
||||
product_data.value = data
|
||||
for (let s = 0; s <= 6 - data.length; s++) {
|
||||
// console.log(data[s], '@@')
|
||||
product_data.value.push(data[s])
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
product_data.value = data.slice(0, 6)
|
||||
}
|
||||
})
|
||||
// }
|
||||
// getlist()
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped src="~/assets/css/IndexDetail/index.scss"></style>
|
||||
<style scoped src="~/assets/css/IndexDetail/media.scss"></style>
|
||||
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
|
||||
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>
|
||||
51
components/InfiniteRotation/index.scss
Normal file
51
components/InfiniteRotation/index.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.isInfinite {
|
||||
|
||||
padding: 30px;
|
||||
|
||||
.swiper-wrapper {
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
}
|
||||
.isOpenMargin{
|
||||
.swiper-slide{
|
||||
width: fit-content!important;
|
||||
}
|
||||
}
|
||||
|
||||
.InfiniteRotation-box {
|
||||
-webkit-transition-timing-function: linear;
|
||||
-moz-transition-timing-function: linear;
|
||||
-o-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
|
||||
.InfiniteRotation-carousel-items {
|
||||
.image-container {
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img_div {
|
||||
max-height: 380px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
max-height: inherit;
|
||||
margin-right: 30px;
|
||||
// object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
88
components/InfiniteRotation/index.vue
Normal file
88
components/InfiniteRotation/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<swiper id="swiper" :class="
|
||||
( props?.Infinite ? 'isInfinite InfiniteRotation-box '
|
||||
: 'InfiniteRotation-box ') + (
|
||||
props?.openMargin ? 'isOpenMargin' : ''
|
||||
)
|
||||
" ref="perRef" :initialSlide="0" :autoplay="{
|
||||
delay: props?.Infinite == true ? 0 : props.autoPlayDelay,
|
||||
stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
|
||||
disableOnInteraction: false,
|
||||
reverseDirection: props.direction,
|
||||
}"
|
||||
:space-between="props['spaceBetween']"
|
||||
:speed="props.speed"
|
||||
:slidesPerView="props.slidesPerView" :loop="true" :modules="swiperModules">{{
|
||||
banner_list
|
||||
}}
|
||||
<swiper-slide v-for="item in banner_list">
|
||||
<div class="InfiniteRotation-carousel-items">
|
||||
<nuxt-link :to="getHerf(item.src)">
|
||||
<div class="image-container">
|
||||
<div class="img_div">
|
||||
<img alt="" :src="item.banner_img">
|
||||
</div>
|
||||
<div>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css'
|
||||
import { Autoplay } from "swiper";
|
||||
|
||||
/**
|
||||
* Infinite:是否无限滚动
|
||||
* autoPlayDelay：自动播放延迟
|
||||
* slidesPerView：一次显示几张
|
||||
* bannerList:{
|
||||
* {
|
||||
* banner_img:图片路径,
|
||||
* src:跳转路径
|
||||
* }
|
||||
* }
|
||||
* openMargin:是否开启margin间距设置
|
||||
* 如果要改样式请去该组件下的index.scss或
|
||||
*media.scss进行修改
|
||||
*/
|
||||
const props = defineProps({
|
||||
speed: {
|
||||
default: 4000
|
||||
},
|
||||
Infinite: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoPlayDelay: {
|
||||
// type: Number,
|
||||
default: 1500,
|
||||
|
||||
},
|
||||
direction: {
|
||||
default: false
|
||||
},
|
||||
slidesPerView: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
bannerList: {
|
||||
type: Object,
|
||||
default: []
|
||||
},
|
||||
openMargin:{
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
const swiperModules = [Autoplay]
|
||||
const banner_list = ref(props.bannerList)
|
||||
console.log(props.openMargin)
|
||||
// const direction=ref(props.direction)
|
||||
</script>
|
||||
<style src="./index.scss"></style>
|
||||
<style src="./media.scss"></style>
|
||||
0
components/InfiniteRotation/media.scss
Normal file
0
components/InfiniteRotation/media.scss
Normal file
124
components/Load/index.vue
Normal file
124
components/Load/index.vue
Normal 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 === ' ' ? ' ' : item
|
||||
if(_item === ' '){
|
||||
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>
|
||||
37
components/Magnify/index.scss
Normal file
37
components/Magnify/index.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.Magnify-main {
|
||||
position: relative;
|
||||
.Magnify-container {
|
||||
position: relative;
|
||||
// height: 50vh;
|
||||
// width: 50vw;
|
||||
.__magnify__img {
|
||||
border: 1px solid #999;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.__magnify__zoom {
|
||||
background-color: yellow;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.__magnify__img-big-box {
|
||||
|
||||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
.__magnify__img-big-img{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
155
components/Magnify/index.vue
Normal file
155
components/Magnify/index.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<main class="Magnify-main">
|
||||
<div class="Magnify-container">
|
||||
<!-- 图片展示 -->
|
||||
<div class="__magnify__img">
|
||||
<img :src="props.imgSrc" alt="">
|
||||
<!--颜色块-->
|
||||
<div class="__magnify__zoom"
|
||||
:style="`height:${props.zoomRect.h}vh;
|
||||
width:${props.zoomRect.w}vh;
|
||||
display:{};
|
||||
`"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!--放大-->
|
||||
<div class="__magnify__img-big-box"
|
||||
:style="`height:${props.imgBigRect.h}vh;
|
||||
width:${props.imgBigRect.w}vh;
|
||||
left:${props.imgBigRect.l}vh;
|
||||
top:${props.imgBigRect.t}vh;
|
||||
`"
|
||||
>
|
||||
<img class="__magnify__img-big-img" :src="props.imgSrc" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
/**
|
||||
* @author:hyw
|
||||
* @param:
|
||||
* rate：放大比例
|
||||
* imgBigSrc：大图src
|
||||
* imgSrc：小图路径
|
||||
* zoomRect:{
|
||||
* h:颜色块高度
|
||||
* w:颜色快宽度
|
||||
* }
|
||||
* imgBigRect:{
|
||||
* h:大图高度
|
||||
* w:大图宽度
|
||||
* l:大图x位置
|
||||
* t:大图y位置
|
||||
* }
|
||||
* zoomColor:颜色快颜色
|
||||
* 以上位置均为vh
|
||||
*/
|
||||
const props = defineProps({
|
||||
rate: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
imgBigSrc: {
|
||||
type: String,
|
||||
default: '/img/zwt.png'
|
||||
},
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: '/img/zwt.png',
|
||||
},
|
||||
zoomRect: {
|
||||
type: Object,
|
||||
default: {
|
||||
h: 10,
|
||||
w: 10
|
||||
}
|
||||
},
|
||||
imgBigRect: {
|
||||
type: Object,
|
||||
default: {
|
||||
h: 50,
|
||||
w: 50,
|
||||
l: 80,
|
||||
t: 0,
|
||||
lc : 75,
|
||||
speed:2
|
||||
}
|
||||
},
|
||||
zoomColor: {
|
||||
type: String,
|
||||
default: 'yellow'
|
||||
}
|
||||
})
|
||||
|
||||
// 放大的比例
|
||||
const RATE = props.rate;
|
||||
|
||||
onMounted(() => {
|
||||
let oImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img")[0];
|
||||
let oZoom = <HTMLDivElement>document.getElementsByClassName("__magnify__zoom")[0];
|
||||
let oImgBig = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-box")[0];
|
||||
let oImgBigImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-img")[0];
|
||||
|
||||
//init
|
||||
(() => {
|
||||
oZoom.style.backgroundColor = props.zoomColor
|
||||
})()
|
||||
|
||||
oImg.onmouseover = function () {
|
||||
oZoom.style.display = "block";
|
||||
oImgBig.style.display = "block";
|
||||
}
|
||||
|
||||
oImg.onmouseout = function () {
|
||||
oZoom.style.display = "none";
|
||||
oImgBig.style.display = "none";
|
||||
}
|
||||
let zoomX = 0,
|
||||
zoomY = 0
|
||||
oImg.onmousemove = function (e) {
|
||||
|
||||
zoomX = e.clientX - oImg.getBoundingClientRect().left
|
||||
zoomY = e.clientY - oImg.getBoundingClientRect().top;
|
||||
|
||||
if (zoomX < 0) {
|
||||
zoomX = 0
|
||||
}
|
||||
if (zoomX + oZoom.offsetWidth >
|
||||
oImg.getBoundingClientRect().left +
|
||||
oZoom.offsetWidth
|
||||
) {
|
||||
zoomX = oImg.getBoundingClientRect().left
|
||||
}
|
||||
if (zoomY < 0) {
|
||||
zoomY = 0
|
||||
}
|
||||
if (e.clientY >
|
||||
oImg.getBoundingClientRect().top +
|
||||
oImg.getBoundingClientRect().height
|
||||
-
|
||||
oZoom.offsetWidth
|
||||
) {
|
||||
zoomY =
|
||||
oImg.getBoundingClientRect().height
|
||||
-
|
||||
oZoom.offsetWidth
|
||||
|
||||
}
|
||||
|
||||
oZoom.style.left = zoomX + "px";
|
||||
oZoom.style.top = zoomY + 'px';
|
||||
|
||||
oImgBigImg.style.left = (props.imgBigRect.lc || 75) + -zoomX * (props.imgBigRect.speed || 2)+ "px";
|
||||
oImgBigImg.style.top = -zoomY * (props.imgBigRect.speed || 2)+ "px";
|
||||
oImgBigImg.style.height = props.rate + "%";
|
||||
oImgBigImg.style.width = props.rate + "%";
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="./index.scss"></style>
|
||||
<style scoped src="./media.scss"></style>
|
||||
44
components/Magnify/media.scss
Normal file
44
components/Magnify/media.scss
Normal 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) {
|
||||
|
||||
}
|
||||
|
||||
247
components/Map/index.vue
Normal file
247
components/Map/index.vue
Normal 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>
|
||||
126
components/Pagination/index.vue
Normal file
126
components/Pagination/index.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<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: 'prev, pager, next',
|
||||
},
|
||||
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) {
|
||||
if (document.getElementsByClassName('el-pagination__total ')[0]) {
|
||||
|
||||
document.getElementsByClassName('el-pagination__total ')[0].style.display = 'none'
|
||||
}
|
||||
} else {
|
||||
if (document.getElementsByClassName('el-pagination__total ')[0]) {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
:deep(li.is-active) {
|
||||
background-color: var(--rootColor) !important;
|
||||
}
|
||||
</style>
|
||||
113
components/Popup/ImagePreview.vue
Normal file
113
components/Popup/ImagePreview.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div @click="closePreview" :class="{ preview__container: true, hidden: hidden }">
|
||||
<div @click.stop="toLeft" class="arrow-left"></div>
|
||||
<div @click.stop="" class="preview__container__image">
|
||||
<img loading="lazy" :src="src" alt="">
|
||||
</div>
|
||||
<div @click.stop="toRight" class="arrow-right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps(['modelValue', 'images'])
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const src = ref("");
|
||||
|
||||
let idx = 0
|
||||
const openPreview = () => {
|
||||
document.body.style.overflow = 'hidden'
|
||||
let index = props.images.indexOf(props.modelValue)
|
||||
if (index !== -1) {
|
||||
idx = props.images.indexOf(props.modelValue)
|
||||
}
|
||||
src.value = props.images[idx]
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
document.body.style.overflow = 'auto'
|
||||
src.value = ""
|
||||
emit('update:modelValue', src.value)
|
||||
}
|
||||
|
||||
const hidden = computed(() => {
|
||||
return props.modelValue.length === 0
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val.length > 0) {
|
||||
openPreview()
|
||||
}
|
||||
})
|
||||
|
||||
const toLeft = () => {
|
||||
if (idx === 0) {
|
||||
idx = props.images.length - 1
|
||||
} else {
|
||||
idx--
|
||||
}
|
||||
src.value = props.images[idx]
|
||||
}
|
||||
|
||||
const toRight = () => {
|
||||
if (idx === props.images.length - 1) {
|
||||
idx = 0
|
||||
} else {
|
||||
idx++
|
||||
}
|
||||
src.value = props.images[idx]
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.preview__container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
background-color: rgba(11, 11, 11, 0.7);
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview__container__image {
|
||||
&>img {
|
||||
max-width: 100%;
|
||||
max-height: 767px;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 18px solid transparent;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
border-left: 18px solid #BBBBBB;
|
||||
right: 5%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
border-right: 18px solid #BBBBBB;
|
||||
left: 5%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
102
components/Popup/MessageUs.vue
Normal file
102
components/Popup/MessageUs.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<!-- TODO i18n -->
|
||||
<template>
|
||||
<div @click="slideUp" ref="messageUs" :class="{ messageUs: true, show: show }" style="height: 40px;">
|
||||
<h3 class="messageUsHeader eMailIco">{{ $t('common.message_us.please') }}</h3>
|
||||
<span @click.stop="slideOut" :class="{ closeBtn: true, show: show }"></span>
|
||||
<div>
|
||||
<form>
|
||||
<div class="messageUsForm">
|
||||
<div class="line">
|
||||
<input type="text" name="leave_message_name" v-model="formData.leave_message_name" size="40"
|
||||
:placeholder="$t('common.message_us.name')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<input type="text" name="leave_message_phone" v-model="formData.leave_message_phone" size="40"
|
||||
:placeholder="$t('common.message_us.tel')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<input type="email" name="leave_message_email" v-model="formData.leave_message_email" size="40"
|
||||
:placeholder="$t('common.message_us.email')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<textarea name="leave_message_info" cols="40" rows="10"
|
||||
:placeholder="$t('common.message_us.msg')" v-model="formData.leave_message_info"></textarea>
|
||||
</div>
|
||||
<p>
|
||||
<div class="messageUsForm__error ">{{ errorMsg }}</div>
|
||||
<div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
|
||||
<input @click.prevent="submit" class="btn" type="submit" :value="$t('common.message_us.submit')">
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const messageUs = ref(null);
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
const slideOut = () => {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const slideUp = () => {
|
||||
show.value = true;
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
leave_message_name: "",
|
||||
leave_message_phone: "",
|
||||
leave_message_email: "",
|
||||
leave_message_info: ""
|
||||
}
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const formData = reactive({ ...initialState })
|
||||
|
||||
const errorMsg = ref("");
|
||||
|
||||
const submit = () => {
|
||||
const phoneRegex = /^[+\- ()0-9]*$/;
|
||||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
||||
|
||||
if (!formData.leave_message_name.trim()) {
|
||||
errorMsg.value = t('common.message_us.name_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_phone.trim() || !phoneRegex.test(formData.leave_message_phone)) {
|
||||
errorMsg.value = t('common.message_us.tel_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_email.trim() || !emailRegex.test(formData.leave_message_email)) {
|
||||
errorMsg.value = t('common.message_us.email_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_info.trim()) {
|
||||
errorMsg.value = t('common.message_us.msg_error')
|
||||
return
|
||||
}
|
||||
|
||||
useFetch('/api/msg/addLeaveMessage', { params: formData }).then(res => {
|
||||
if (JSON.parse(res.data.value).code !== 0) {
|
||||
ElMessage.error(t('home.products.detail.error'))
|
||||
return
|
||||
}
|
||||
errorMsg.value = ""
|
||||
Object.assign(formData, initialState)
|
||||
showSuccess.value = true
|
||||
setTimeout(() => {
|
||||
showSuccess.value = false
|
||||
slideOut()
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/Popup/message-us.scss" lang="scss"></style>
|
||||
87
components/Popup/Sidebar.vue
Normal file
87
components/Popup/Sidebar.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<!-- TODO i18n -->
|
||||
<template>
|
||||
<aside :class="{ sidebar: true, hidden: !show }" id="sidebar"
|
||||
:style="{ right: show ? '0px' : '-170px', top: offset + 'px' }">
|
||||
<div class="side_content">
|
||||
<div class="side_list">
|
||||
<header class="hd">
|
||||
<img src="/img/title_pic.png" :alt="$t('common.contact.online')">
|
||||
</header>
|
||||
<div class="cont">
|
||||
<li>
|
||||
<a class="email" :href="`mailto:${contactUsData.contact_us_mail}`">
|
||||
<i class="fa">
|
||||
<Evalope />
|
||||
</i>
|
||||
{{ $t('common.contact.email') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="whatsapp" target="_blank" :href="`tel:${contactUsData.contact_us_phone}`">
|
||||
<i class="fa">
|
||||
<Phone />
|
||||
</i>
|
||||
{{ $t('common.contact.tel') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" class="skype"
|
||||
:href="`https://wa.me/${contactUsData.contact_us_mobile_phone}`">
|
||||
<i class="fa">
|
||||
<WhatsApp />
|
||||
</i>
|
||||
{{ $t('common.contact.whatsapp') }}
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
<div class="side_title">
|
||||
<a @click.prevent="slideOut" class="close_btn"><span>x</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Evalope from '~icons/fa/envelope'
|
||||
import Phone from '~icons/fa/phone'
|
||||
import WhatsApp from '~icons/fa/whatsapp'
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const show = ref(true);
|
||||
const scrollY = ref(0);
|
||||
const defaultY = 150;
|
||||
|
||||
const delayAnimation = debounce(() => {
|
||||
scrollY.value = window.scrollY
|
||||
}, 100)
|
||||
|
||||
const offset = computed(() => {
|
||||
return scrollY.value + defaultY;
|
||||
})
|
||||
|
||||
const removeEventListener = () => {
|
||||
window.removeEventListener('scroll', delayAnimation)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', delayAnimation)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeEventListener()
|
||||
})
|
||||
|
||||
const slideOut = () => {
|
||||
removeEventListener()
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
let contactUsData = ref({})
|
||||
useFetch('/api/contactUs/getContactUs', { params: { locale: locale.value } }).then(res => {
|
||||
contactUsData.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/Popup/sidebar.scss" lang="scss"></style>
|
||||
48
components/Poster/index.vue
Normal file
48
components/Poster/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<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">{{ props.title }}</div>
|
||||
<div class="Poster-text">{{ props.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
type: Number,
|
||||
title: String,
|
||||
text: String,
|
||||
})
|
||||
|
||||
const initState = {
|
||||
imgSrc: '/img/product_list/banner2.jpg',
|
||||
title: '',
|
||||
text: ''
|
||||
}
|
||||
let posterInfo = ref({ ...initState })
|
||||
let posterStyle = {
|
||||
height: '23vw',
|
||||
}
|
||||
|
||||
// 获取海报
|
||||
// useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
|
||||
// const data = JSON.parse(res.data.value).data
|
||||
// posterInfo.value = data || { ...initState }
|
||||
|
||||
// setTimeout(() => {
|
||||
// htmlAddAnimations()
|
||||
// });
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/poster/index.scss"></style>
|
||||
<style scoped src="~/assets/css/poster/media.scss"></style>
|
||||
86
components/ProductBanner/index.scss
Normal file
86
components/ProductBanner/index.scss
Normal file
@ -0,0 +1,86 @@
|
||||
* {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
// margin-top: 20px;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
padding: 30px 0px;
|
||||
|
||||
}
|
||||
|
||||
.bannercontent_title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bannercontent_title h2 {
|
||||
font-size: 46px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bannercontent_link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bannercontent_link span {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannercontent_link i {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.last {
|
||||
color: #fff;
|
||||
}
|
||||
36
components/ProductBanner/index.vue
Normal file
36
components/ProductBanner/index.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section style="margin: 85px 0px 0px 0px;">
|
||||
<div class="bannercontent">
|
||||
<!-- <div class="bannercontentcover"></div> -->
|
||||
<img src="/img/product_list/banner2.jpg" />
|
||||
<div class="bannercontent_title">
|
||||
<h2>{{ props.title }}</h2>
|
||||
<div class="bannercontent_link">
|
||||
<nav aria-label="breadcrumbs" class="rank-math-breadcrumb">
|
||||
<p><span v-for="(item, i ) in props.Subtitle">{{ item }}
|
||||
<span class="separator" v-if="i+1!==props.Subtitle.length"> - </span>
|
||||
|
||||
</span>
|
||||
</p>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
/**
|
||||
* title:大标题
|
||||
* Subtitle 小标题
|
||||
|
||||
* 如果要改样式请去该组件下的index.scss或
|
||||
*media.scss进行修改
|
||||
*/
|
||||
const props = defineProps({
|
||||
title: '',
|
||||
Subtitle: []
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="./index.scss"></style>
|
||||
<style scoped src="./media.scss"></style>
|
||||
195
components/ProductBanner/media.scss
Normal file
195
components/ProductBanner/media.scss
Normal file
@ -0,0 +1,195 @@
|
||||
//media.scss
|
||||
/*1440px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
}
|
||||
|
||||
/*1200px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1200px) {
|
||||
|
||||
}
|
||||
@media (min-width: 993px) and (max-width: 1200px) {
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1200px) {
|
||||
.bcard, .brand, .move {
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*880px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 880px) {
|
||||
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 880px) {
|
||||
.img-box{
|
||||
width: 60vw!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
// .bannercontent {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
// height: 280px;
|
||||
// }
|
||||
|
||||
// .bannercontent img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: middle;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
.product,
|
||||
.news {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.product_left,
|
||||
.news_left {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fanye {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product_row_txt,
|
||||
.newsboxtxt {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.product_row_more,
|
||||
.newsboxtxt_bottom {
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
/*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;
|
||||
// }
|
||||
}
|
||||
.bannercontent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.bannercontent img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
45
components/Product_InfiniteRotation/index.scss
Normal file
45
components/Product_InfiniteRotation/index.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.isInfinite {
|
||||
|
||||
padding: 30px;
|
||||
|
||||
.swiper-wrapper {
|
||||
transition-timing-function: linear !important;
|
||||
/* 没错就是这个属性 */
|
||||
}
|
||||
}
|
||||
|
||||
.InfiniteRotation-box {
|
||||
-webkit-transition-timing-function: linear;
|
||||
-moz-transition-timing-function: linear;
|
||||
-o-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
|
||||
.InfiniteRotation-carousel-items {
|
||||
.image-container {
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img_div {
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
76
components/Product_InfiniteRotation/index.vue
Normal file
76
components/Product_InfiniteRotation/index.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<swiper id="swiper" :class="props?.Infinite ? 'isInfinite InfiniteRotation-box '
|
||||
: 'InfiniteRotation-box '" ref="perRef" :initialSlide="0" :autoplay="{
|
||||
delay: props?.Infinite == true ? 0 : props.autoPlayDelay,
|
||||
stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
|
||||
disableOnInteraction: false,
|
||||
reverseDirection: props.direction
|
||||
}" :speed="props.speed" :injectStyles="['.swiper-wrapper{transition-timing-function: linear !important;}']"
|
||||
:slidesPerView="props.slidesPerView" :loop="true" :modules="swiperModules">{{
|
||||
banner_list
|
||||
}}
|
||||
<swiper-slide v-for="item in banner_list">
|
||||
<div class="InfiniteRotation-carousel-items">
|
||||
<nuxt-link :to="getHerf(item.src)">
|
||||
<div class="image-container">
|
||||
<div class="img_div">
|
||||
<img alt="" :src="item.banner_img">
|
||||
</div>
|
||||
<div>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css'
|
||||
import { Autoplay } from "swiper";
|
||||
|
||||
/**
|
||||
* Infinite:是否无限滚动
|
||||
* autoPlayDelay：自动播放延迟
|
||||
* slidesPerView：一次显示几张
|
||||
* bannerList:{
|
||||
* {
|
||||
* banner_img:图片路径,
|
||||
* src:跳转路径
|
||||
* }
|
||||
* }
|
||||
* 如果要改样式请去该组件下的index.scss或
|
||||
*media.scss进行修改
|
||||
*/
|
||||
const props = defineProps({
|
||||
speed: {
|
||||
default: 4000
|
||||
},
|
||||
Infinite: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoPlayDelay: {
|
||||
// type: Number,
|
||||
default: 1500,
|
||||
|
||||
},
|
||||
direction: {
|
||||
default: false
|
||||
},
|
||||
slidesPerView: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
bannerList: {
|
||||
type: Object,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
const swiperModules = [Autoplay]
|
||||
const banner_list = ref(props.bannerList)
|
||||
// const direction=ref(props.direction)
|
||||
</script>
|
||||
<style scoped src="./index.scss"></style>
|
||||
<style scoped src="./media.scss"></style>
|
||||
0
components/Product_InfiniteRotation/media.scss
Normal file
0
components/Product_InfiniteRotation/media.scss
Normal file
81
components/Tab/index.vue
Normal file
81
components/Tab/index.vue
Normal 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="getHerf(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="getHerf(_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>
|
||||
12
i18n.config.ts
Normal file
12
i18n.config.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import zh from './lang/zh-CN.json'
|
||||
import en from './lang/en-US.json'
|
||||
|
||||
export default defineI18nConfig(() => ({
|
||||
legacy: false, // 是否兼容之前
|
||||
lazy: true,
|
||||
fallbackLocale: 'en', // 区配不到的语言就用en
|
||||
messages: {
|
||||
zh: zh,
|
||||
en: en,
|
||||
}
|
||||
}))
|
||||
116
lang/en-US.json
Normal file
116
lang/en-US.json
Normal file
@ -0,0 +1,116 @@
|
||||
{
|
||||
"common": {
|
||||
"copyright": "Guangdong Longbang Intelligent Equipment Industrial Co., Ltd.",
|
||||
"header": {
|
||||
"home": "Home",
|
||||
"products": "Products",
|
||||
"about": "About Us",
|
||||
"news": "News",
|
||||
"contact": "Contact Us"
|
||||
},
|
||||
"footer": {
|
||||
"desc": "High quality and reliability of products are the hallmark of the company.",
|
||||
"loc": "Room 101, Building 2, Central Intelligent Manufacturing Center, No. 15 Shunye West Road, Xingtan Town, Shunde District, Foshan City, Guangdong Province",
|
||||
"worktime": "Operating Hours",
|
||||
"time": "Monday to Saturday 9:00-17:00",
|
||||
"contact": "Call Us Now",
|
||||
"fastLink": "fastLink",
|
||||
"usefulLinks": "usefulLinks"
|
||||
},
|
||||
"message_us": {
|
||||
"please": "Please Message Us",
|
||||
"name": "Your Name: *",
|
||||
"tel": "Your Telephone: *",
|
||||
"email": "Your Email: *",
|
||||
"msg": "Your Message: *",
|
||||
"submit": "Submit",
|
||||
"name_error": "Name cannot be empty",
|
||||
"tel_error": "Phone number format error",
|
||||
"email_error": "Email format error",
|
||||
"msg_error": "Message cannot be empty"
|
||||
},
|
||||
"contact": {
|
||||
"online": "Online Inuiry",
|
||||
"email": "Send Email",
|
||||
"tel": "Telephone",
|
||||
"whatsapp": "Whatsapp"
|
||||
},
|
||||
"poster": {
|
||||
"contact": "Contact Us - LBIE",
|
||||
"news": "News - LBIE",
|
||||
"about": "About Us - LBIE"
|
||||
}
|
||||
},
|
||||
"about": {
|
||||
"profile": "Company Profile",
|
||||
"intro": "Longban is a Chinese factory specializing in the research, production, sales and service of turning and milling machine tools. The company was founded in 2007. In 2009, it successfully developed China's first 4+4 live tool turning-milling machine. In 2014, the technical obstacle of the interpolated Y-axis on turn-mill machines was overcome. In 2022, a dual-spindle turning-milling machine with two turrets was developed. The company has a history of 15 years, so we have enough experience to provide customers with effective and reliable products.",
|
||||
"futhermore": "It is worth mentioning that we have China Military Standard Quality System Certification, which gives us the right to produce general military equipment. Not only that, we also serve many industries such as nuclear energy, aerospace, auto parts, and home appliances. In addition, we are looking for global agents to cooperate so that more customers can enjoy high-quality products and first-class services from China.",
|
||||
"honor": "Our Honor",
|
||||
"factory": "Factory Photo",
|
||||
"exhibition": "Our Exhibition"
|
||||
},
|
||||
"contact": {
|
||||
"method": "Contact Details",
|
||||
"desc": "High quality and reliability of products are the hallmark of the company.",
|
||||
"card": {
|
||||
"loc": "Address:",
|
||||
"tel": "Telephone:",
|
||||
"email": "Email:",
|
||||
"whatsapp": "Tel/WhatsApp:"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
"who": {
|
||||
"title": "Who We Are",
|
||||
"company": "Guangdong Longbang Intelligent Equipment Industrial Co., Ltd.",
|
||||
"desc": "Longbang is a Chinese factory specializing in the research, production, sales, and service of lathe and milling machines. The company was founded in 2007.",
|
||||
"tech": "First-class technology",
|
||||
"service": "High-quality service",
|
||||
"price": "Affordable price"
|
||||
},
|
||||
"service": {
|
||||
"our": "Our Services",
|
||||
"pro": "Professional and high-quality services",
|
||||
"more": "Read More"
|
||||
},
|
||||
"for": {
|
||||
"title": "Committed to improving turning and milling efficiency",
|
||||
"desc": "The high quality and reliability of our products are the hallmark of our company.",
|
||||
"start": "Start"
|
||||
},
|
||||
"partners": {
|
||||
"title": "Our partners",
|
||||
"desc": "Partners"
|
||||
},
|
||||
"products": {
|
||||
"title": "Our Products",
|
||||
"desc": "Popular Products",
|
||||
"type_title": "Products",
|
||||
"detail_button": "Products Details",
|
||||
"nodata": "no data",
|
||||
"all": "ALL",
|
||||
"company_short": "LBIE",
|
||||
"pageitem1": "- Page ",
|
||||
"pageitem2": " -",
|
||||
"detail": {
|
||||
"contact": "contact us",
|
||||
"description": "Product Description",
|
||||
"qustion": "Frequently questions",
|
||||
"other": "Other popular products",
|
||||
"button": "send",
|
||||
"contact_error": "Information input error. Please confirm the fields and resend them",
|
||||
"succmessage": "Sent successfully",
|
||||
"error": "The request failed. Please try again later"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"title": "Our News",
|
||||
"desc": "Latest News"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"more": "Read More",
|
||||
"noprev": "No Previous Page",
|
||||
"nonext": "No Next Page"
|
||||
}
|
||||
}
|
||||
8
lang/fetch.js
Normal file
8
lang/fetch.js
Normal file
@ -0,0 +1,8 @@
|
||||
export default defineI18nLocale(async locale => {
|
||||
const res = await $fetch('/api/i18n/getLangListByLocale', { params: { code: locale } })
|
||||
const { code, msg, data } = JSON.parse(res)
|
||||
// 接口返回问题，如果没有数据返回的是 Array，有数据返回的是 Object
|
||||
// 判断是否有数据
|
||||
if (Array.isArray(data)) return {}
|
||||
return data
|
||||
})
|
||||
118
lang/zh-CN.json
Normal file
118
lang/zh-CN.json
Normal file
@ -0,0 +1,118 @@
|
||||
{
|
||||
"common": {
|
||||
"copyright": "广东隆邦智能装备实业有限公司",
|
||||
"header": {
|
||||
"home": "首页",
|
||||
"products": "产品",
|
||||
"about": "关于我们",
|
||||
"news": "新闻",
|
||||
"contact": "联系我们"
|
||||
},
|
||||
"footer": {
|
||||
"desc": "产品的高质量和可靠性，是我们公司的金字招牌。",
|
||||
"loc": "广东省佛山市顺德区杏坛镇顺业西路15号中集智能制造中心2号楼101室",
|
||||
"worktime": "工作时间",
|
||||
"time": "周一至周六 9:00-17:00",
|
||||
"contact": "立即致电我们",
|
||||
"fastLink": "快速链接",
|
||||
"usefulLinks": "有用的链接"
|
||||
},
|
||||
"message_us": {
|
||||
"please": "请给我们留言",
|
||||
"name": "您的姓名：*",
|
||||
"tel": "您的电话：*",
|
||||
"email": "您的邮箱：*",
|
||||
"msg": "您的信息：*",
|
||||
"submit": "提交",
|
||||
"name_error": "姓名不能为空",
|
||||
"tel_error": "电话号码格式错误",
|
||||
"email_error": "邮箱格式错误",
|
||||
"msg_error": "信息不能为空",
|
||||
"success": "留言成功"
|
||||
},
|
||||
"contact": {
|
||||
"online": "在线咨询",
|
||||
"email": "发送邮件",
|
||||
"tel": "电话",
|
||||
"whatsapp": "WhatsApp"
|
||||
},
|
||||
"poster": {
|
||||
"contact": "联系我们 - LBIE",
|
||||
"news": "新闻 - LBIE",
|
||||
"about": "关于我们 - LBIE"
|
||||
}
|
||||
},
|
||||
"about": {
|
||||
"profile": "公司简介",
|
||||
"intro": "隆邦——这是一家致力于车铣复合加工机床的研发、生产、销售及服务的中式企业。自2007年创立以来，我们不断研磨技艺，于2009年成功研制出中国首台4+4车铣复合加工中心，实现了活的刀具在车铣加工中的运用。2014年，我们再次突破技术难关，解决了车铣复合加工中心Y轴插补的技术难题。到了2022年，我们研发出双主轴双刀塔的车铣复合加工中心，进一步巩固了我们在行业中的领先地位。历经15年的发展，我们积累了丰富的经验，能够为客户提供高效可靠的产品。",
|
||||
"futhermore": "值得一提的是，我们拥有中国军用标准质量体系认证，这使得我们有权生产通用军事装备。不仅如此，我们还服务于核能、航空航天、汽车零部件、家电等多个行业。此外，我们正在寻找全球代理商进行合作，让更多的客户能够享受到来自中国的优质产品和一流服务",
|
||||
"honor": "荣誉资质",
|
||||
"factory": "工厂照片",
|
||||
"exhibition": "展会信息"
|
||||
},
|
||||
"contact": {
|
||||
"method": "联系方式",
|
||||
"desc": "产品的高质量和可靠性，是我们公司的金字招牌。",
|
||||
"card": {
|
||||
"loc": "地址：",
|
||||
"tel": "电话：",
|
||||
"email": "邮箱：",
|
||||
"whatsapp": "电话/WhatsApp："
|
||||
},
|
||||
"please": "给我们留言"
|
||||
},
|
||||
"home": {
|
||||
"who": {
|
||||
"title": "我们是谁",
|
||||
"company": "广东隆邦智能装备实业有限公司",
|
||||
"desc": "隆邦是一家专业从事车铣床研究、生产、销售和服务的中国工厂。 公司成立于2007年。",
|
||||
"tech": "技术一流",
|
||||
"service": "优质服务",
|
||||
"price": "价格实惠"
|
||||
},
|
||||
"service": {
|
||||
"our": "我们的服务",
|
||||
"pro": "专业优质服务",
|
||||
"more": "阅读更多"
|
||||
},
|
||||
"for": {
|
||||
"title": "致力于提高车削和铣削效率",
|
||||
"desc": "产品的高质量和可靠性，是我们公司的金字招牌。",
|
||||
"start": "开始"
|
||||
},
|
||||
"partners": {
|
||||
"title": "我的的伙伴",
|
||||
"desc": "合作伙伴"
|
||||
},
|
||||
"products": {
|
||||
"title": "我们的产品",
|
||||
"desc": "热门产品",
|
||||
"type_title": "产品",
|
||||
"detail_button": "产品细节",
|
||||
"nodata": "暂无数据",
|
||||
"all": "全系列",
|
||||
"company_short": "LBIE",
|
||||
"pageitem1": "- 第",
|
||||
"pageitem2": "页 -",
|
||||
"detail": {
|
||||
"contact": "联系我们",
|
||||
"description": "产品描述",
|
||||
"qustion": "常见问题",
|
||||
"other": "其他流行产品",
|
||||
"button": "发送",
|
||||
"contact_error": "信息输入错误。请确认字段并重新发送",
|
||||
"succmessage": "发送成功",
|
||||
"error": "请求失败，请稍后再试"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"title": "我们的新闻",
|
||||
"desc": "最新新闻"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"more": "阅读更多",
|
||||
"noprev": "没有上一页",
|
||||
"nonext": "没有下一页"
|
||||
}
|
||||
}
|
||||
0
layout/index.vue
Normal file
0
layout/index.vue
Normal file
8
middleware/auth.ts
Normal file
8
middleware/auth.ts
Normal 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'
|
||||
// }
|
||||
// })
|
||||
14
middleware/i18n.global.js
Normal file
14
middleware/i18n.global.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
// skip middleware on broswer
|
||||
if (import.meta.browser) return
|
||||
|
||||
const broswerLocale = useBrowserLocale()
|
||||
const cookieLocale = useCookie('i18n_redirected')
|
||||
// 如果访问的是默认页面，如 http://localhost/about ，则跳转到 http://localhost/zh/about
|
||||
// 如果访问的不是默认页面，如 http://localhost/en/about，则不做处理
|
||||
if (to.name.includes('___en') && !/^\/en\/.*$/.test(to.path)) {
|
||||
if (broswerLocale === 'zh') {
|
||||
return navigateTo(`/${broswerLocale}${to.path}`)
|
||||
}
|
||||
}
|
||||
});
|
||||
35
middleware/wechat.global.js
Normal file
35
middleware/wechat.global.js
Normal file
@ -0,0 +1,35 @@
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
// skip middleware on server
|
||||
if (import.meta.server) return
|
||||
|
||||
// 判断是否为微信浏览器
|
||||
if (!isWechat()) return
|
||||
|
||||
// 防止微信浏览器修改默认字体大小
|
||||
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
|
||||
handleFontSize();
|
||||
} else {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
|
||||
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
|
||||
}
|
||||
}
|
||||
function handleFontSize() {
|
||||
// 设置网页字体为默认大小
|
||||
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
|
||||
// 重写设置网页字体大小的事件
|
||||
WeixinJSBridge.on('menu:setfont', function () {
|
||||
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
|
||||
});
|
||||
}
|
||||
|
||||
if (sessionStorage.getItem('wechat_user')) return;
|
||||
|
||||
// 设置 session ，表示用户此次会话已经授权
|
||||
sessionStorage.setItem('wechat_user', true)
|
||||
|
||||
const baseURL = useRuntimeConfig().public.apiGateway
|
||||
window.location.href = baseURL + '/Wechat.Wechat/getAccess?refer_url=' + encodeURIComponent(window.location.href);
|
||||
});
|
||||
54
nuxt.config.ts
Normal file
54
nuxt.config.ts
Normal file
@ -0,0 +1,54 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: ["@nuxtjs/i18n", "@element-plus/nuxt", "unplugin-icons/nuxt"],
|
||||
i18n: {
|
||||
strategy: 'prefix_and_default', // 添加路由前缀的方式
|
||||
locales: [
|
||||
{ code: "zh", file: "fetch.js", iso: "zh", name: "中文" },
|
||||
{ code: "en", file: "fetch.js", iso: "en", name: "English" },
|
||||
{ code: "ja", file: "fetch.js", iso: "ja", name: "日本語" },
|
||||
{ code: "ko", file: "fetch.js", iso: "ko", name: "한국어" },
|
||||
{ code: "de", file: "fetch.js", iso: "de", name: "Deutsch" },
|
||||
{ code: "fr", file: "fetch.js", iso: "fr", name: "Français" },
|
||||
{ code: "es", file: "fetch.js", iso: "es", name: "Español" },
|
||||
{ code: "ru", file: "fetch.js", iso: "ru", name: "Русский" },
|
||||
],
|
||||
lazy: true,
|
||||
langDir: "lang",
|
||||
defaultLocale: "en",
|
||||
detectBrowserLanguage: {
|
||||
useCookie: true,
|
||||
cookieKey: "i18n_redirected",
|
||||
},
|
||||
vueI18n: './i18n.config.ts', // 通过vueI18n配置
|
||||
},
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiGateway: "http://www.lbie-group.com/public/api.php",
|
||||
}
|
||||
},
|
||||
ssr: true,
|
||||
nitro: {
|
||||
devProxy: {
|
||||
"/api-v": {
|
||||
target: process.env.NUXT_PROXY_API,
|
||||
changeOrigin: true,
|
||||
prependPath: true,
|
||||
},
|
||||
"/uploads": {
|
||||
target: process.env.NUXT_PROXY_UPLOADS,
|
||||
changeOrigin: true,
|
||||
prependPath: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
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",
|
||||
], //追加
|
||||
});
|
||||
11916
package-lock.json
generated
Normal file
11916
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev --host --port 3003",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"production": "nuxt build --mode production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@element-plus/nuxt": "^1.0.8",
|
||||
"@iconify-json/fa": "^1.1.8",
|
||||
"@nuxtjs/i18n": "^8.3.0",
|
||||
"nuxt": "^3.11.1",
|
||||
"sass": "^1.71.1",
|
||||
"unplugin-icons": "^0.18.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@intlify/unplugin-vue-i18n": "^4.0.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"bootstrap": "^5.3.0-alpha1",
|
||||
"element-plus": "^2.2.32",
|
||||
"hyw-load": "^1.0.1",
|
||||
"jquery": "^3.6.4",
|
||||
"path": "^0.12.7",
|
||||
"swiper": "^8.4.7",
|
||||
"v3-lazyload-hyw": "^1.5.7",
|
||||
"vue-awesome-swiper": "^5.0.1"
|
||||
}
|
||||
}
|
||||
112
pages/about.vue
Normal file
112
pages/about.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
|
||||
<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>
|
||||
<Poster :type=1 :title="$t('common.poster.about')"></Poster>
|
||||
|
||||
<div class="Home-main">
|
||||
<div class="container">
|
||||
<article>
|
||||
<section>
|
||||
<h1>Company Profile</h1>
|
||||
<h2>{{ $t("about.profile") }}</h2>
|
||||
<p> {{ $t('about.intro') }} </p>
|
||||
<img :src="aboutUs.about_us_profile" alt="">
|
||||
<div class="bg-gray">
|
||||
<p>{{ $t('about.futhermore') }}</p>
|
||||
</div>
|
||||
<img :src="aboutUs.about_us_profile_history" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h1>Our honor</h1>
|
||||
<h2>{{ $t("about.honor") }}</h2>
|
||||
<img :src="aboutUs.about_us_honor" alt="">
|
||||
<div class="row gy-3">
|
||||
<template v-for="item in ourHonor">
|
||||
<img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Factory Photo</h1>
|
||||
<h2>{{ $t("about.factory") }}</h2>
|
||||
<div class="row gy-3">
|
||||
<template v-for="item in factoryPhoto">
|
||||
<img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Our exhibition</h1>
|
||||
<h2>{{ $t("about.exhibition") }}</h2>
|
||||
<div class="row gy-3">
|
||||
<template v-for="item in ourExhibition">
|
||||
<img class="col-lg-3 col-md-6 col-sm-12" @click="openPreview(item)" :src="item" alt="">
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<Final></Final>
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<PopupImagePreview :images="images" v-model="current"></PopupImagePreview>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { l, locale } = useI18n()
|
||||
|
||||
const current = ref("");
|
||||
const openPreview = (item) => {
|
||||
current.value = item
|
||||
}
|
||||
|
||||
const ourHonor = ref([])
|
||||
const factoryPhoto = ref([])
|
||||
const ourExhibition = ref([])
|
||||
const images = ref([]);
|
||||
let aboutUs = ref({})
|
||||
useFetch('/api/aboutUs/getAboutUs', { params: { locale: locale.value } }).then(res => {
|
||||
aboutUs.value = JSON.parse(res.data.value).data || {}
|
||||
ourHonor.value = aboutUs.value.about_us_honor_more.split(',')
|
||||
factoryPhoto.value = aboutUs.value.about_us_factory.split(',')
|
||||
ourExhibition.value = aboutUs.value.about_us_exhibition.split(',')
|
||||
images.value = [
|
||||
...ourHonor.value,
|
||||
...factoryPhoto.value,
|
||||
...ourExhibition.value,
|
||||
]
|
||||
})
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations({
|
||||
tagDom: 'Home-main', preload: 1.3
|
||||
})
|
||||
})
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/About/index.scss"></style>
|
||||
210
pages/contact.vue
Normal file
210
pages/contact.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
|
||||
<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>
|
||||
<Poster :type=1 :title="$t('common.poster.contact')"></Poster>
|
||||
|
||||
<div class="Contact-main">
|
||||
<div class="--box--">
|
||||
<section>
|
||||
|
||||
<div class="contactus">
|
||||
<div class="container">
|
||||
<!-- 联系方式 -->
|
||||
<div class="contactus_hd">
|
||||
<div class="section1_title">
|
||||
<h2 class="section1_title_text">{{ $t('contact.method') }}</h2>
|
||||
</div>
|
||||
<h3>{{ $t('contact.desc') }}</h3>
|
||||
<div class="row contactus_way">
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span> {{ $t('contact.card.loc') }} </span>
|
||||
<p>{{ $t('contact.address') }}</p>
|
||||
<!-- <p>{{ contactUsData.contact_us_address }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span>{{ $t('contact.card.tel') }}</span>
|
||||
<p>{{ contactUsData.contact_us_phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span>{{ $t('contact.card.email') }}</span>
|
||||
<p><a class="contact_us_link" href="mailto:postmaster@lbie-group.com">{{
|
||||
contactUsData.contact_us_mail }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span>{{ $t('contact.card.whatsapp') }}</span>
|
||||
<p>{{ contactUsData.contact_us_mobile_phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系方式填写表单 -->
|
||||
<div class="contactus_bd">
|
||||
<div class="section1_title">
|
||||
<h2 class="section1_title_text"> {{ $t('contact.please') }} </h2>
|
||||
</div>
|
||||
<div class="contactus_table">
|
||||
<div class="row">
|
||||
<div role="form" class="wpcf7" id="wpcf7-f19-o2" lang="en-US" dir="ltr">
|
||||
<div class="screen-reader-response">
|
||||
<p role="status" aria-live="polite" aria-atomic="true"></p>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<form novalidate="novalidate">
|
||||
<div class="feedbackForm">
|
||||
<div class="line">
|
||||
<input type="text" name="leave_message_name" v-model="formData.leave_message_name" size="40"
|
||||
aria-required="true" aria-invalid="false" :placeholder="$t('common.message_us.name')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<input type="text" name="leave_message_phone" v-model="formData.leave_message_phone" size="40"
|
||||
aria-required="true" aria-invalid="false" :placeholder="$t('common.message_us.tel')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<input type="email" name="leave_message_email" v-model="formData.leave_message_email"
|
||||
size="40" aria-required="true" aria-invalid="false"
|
||||
:placeholder="$t('common.message_us.email')">
|
||||
</div>
|
||||
<div class="line">
|
||||
<textarea name="leave_message_info" v-model="formData.leave_message_info" cols="40" rows="10"
|
||||
aria-required="true" aria-invalid="false"
|
||||
:placeholder="$t('common.message_us.msg')"></textarea>
|
||||
</div>
|
||||
<div class="messageUsForm__error ">{{ errorMsg }}</div>
|
||||
<p> <input type="submit" @click.prevent="submit" :value="$t('common.message_us.submit')"
|
||||
class="btn"><br>
|
||||
</p>
|
||||
<div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
|
||||
</div>
|
||||
<div aria-hidden="true"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> -->
|
||||
<script setup>
|
||||
|
||||
/** 基础变量 **/
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
|
||||
const errorMsg = ref("");
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 5, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
// 获取联系我们内容
|
||||
let contactUsData = ref({})
|
||||
useFetch('/api/contactUs/getContactUs').then(res => {
|
||||
contactUsData.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations({
|
||||
tagDom: 'Contact-main', preload: 1.3
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const initialState = {
|
||||
leave_message_name: "",
|
||||
leave_message_phone: "",
|
||||
leave_message_email: "",
|
||||
leave_message_info: ""
|
||||
}
|
||||
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const formData = reactive({ ...initialState })
|
||||
const submit = () => {
|
||||
const phoneRegex = /^[+\- ()0-9]*$/;
|
||||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
||||
|
||||
if (!formData.leave_message_name.trim()) {
|
||||
errorMsg.value = t('common.message_us.name_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_phone.trim() || !phoneRegex.test(formData.leave_message_phone)) {
|
||||
errorMsg.value = t('common.message_us.tel_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_email.trim() || !emailRegex.test(formData.leave_message_email)) {
|
||||
errorMsg.value = t('common.message_us.email_error')
|
||||
return
|
||||
}
|
||||
if (!formData.leave_message_info.trim()) {
|
||||
errorMsg.value = t('common.message_us.msg_error')
|
||||
return
|
||||
}
|
||||
|
||||
useFetch('/api/msg/addLeaveMessage', { params: formData }).then(res => {
|
||||
if (JSON.parse(res.data.value).code !== 0) {
|
||||
ElMessage.error(t('home.products.detail.error'))
|
||||
return
|
||||
}
|
||||
errorMsg.value = ""
|
||||
showSuccess.value = true
|
||||
setTimeout(() => {
|
||||
showSuccess.value = false
|
||||
}, 3000)
|
||||
Object.assign(formData, initialState)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/contact/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/contact/media.scss"></style>
|
||||
396
pages/index.vue
Normal file
396
pages/index.vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
|
||||
<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="main">
|
||||
<section>
|
||||
<div class="acard">
|
||||
<div class="container">
|
||||
<div class="row acardflex">
|
||||
<div class="acard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||||
data-animation="slide-in-blurred-left">
|
||||
<div class="videocard_title">
|
||||
<span> {{ $t('home.who.title') }} </span>
|
||||
<h2>{{ $t('home.who.company') }}</h2>
|
||||
<p>{{ $t('home.who.desc') }}</p>
|
||||
</div>
|
||||
<div class="acard_list">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont3"></i>
|
||||
<p>{{ $t('home.who.tech') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont"></i>
|
||||
<p>{{ $t('home.who.service') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="acardli">
|
||||
<i class="iconfont"></i>
|
||||
<p>{{ $t('home.who.price') }}</p>
|
||||
<div class="acardlicover"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||||
data-animation="slide-in-blurred-right">
|
||||
<!-- <div class="acardimg videoimgbtn videobtns"> -->
|
||||
<!-- <div class="acard_video"> -->
|
||||
<video ref="videoPlay" class="acardimg" controls width="100%" autoplay muted="muted"
|
||||
:poster="video_url?.home_video_cover ? video_url?.home_video_cover : '/img/home/about-2.jpg'">
|
||||
<source :src="video_url?.home_video_url">
|
||||
</video>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 优质服务 -->
|
||||
<section>
|
||||
<div class="bcard">
|
||||
<div class="bcardcover"></div>
|
||||
<div class="container">
|
||||
<div class="bcard_title right">
|
||||
<span>{{ $t('home.service.our') }}</span>
|
||||
<h2>{{ $t('home.service.pro') }}</h2>
|
||||
</div>
|
||||
<div class="bcard_list op0 " data-animation="slide-in-blurred-left">
|
||||
<div class="row">
|
||||
|
||||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4" v-for="item in Professional_data">
|
||||
<div class="bcard_box">
|
||||
<span class="bcardicon"><i class="iconfont2" v-html="item.professional_service_icon"></i></span>
|
||||
<div class="bcard_txt">
|
||||
<a href="javascrpit:;">
|
||||
<h3>{{ item.professional_service_title }}</h3>
|
||||
</a>
|
||||
<p>{{ item.professional_service_describe }}</p>
|
||||
<nuxt-link class="bcard_more" :to="item.professional_service_link">
|
||||
<h4>{{ $t('home.service.more') }}</h4>
|
||||
<i class="iconfont"></i>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 高光 -->
|
||||
<section>
|
||||
<div class="number bottom op0" data-animation="slide-in-elliptic-top-fwd">
|
||||
<div class="container">
|
||||
<div class="number_con">
|
||||
<ul>
|
||||
<li v-for="item in heightlight_data">
|
||||
<span><i class="iconfont"></i></span>
|
||||
<p>{{ item.highlights_title }}</p>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="double_banner">
|
||||
|
||||
<div style="margin-bottom:20px">
|
||||
|
||||
<InfiniteRotation
|
||||
:openMargin="true"
|
||||
:slidesPerView="slidesPerView" :Infinite="true" :direction='false'
|
||||
:bannerList="bannerListUp">
|
||||
</InfiniteRotation>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
|
||||
<!-- <InfiniteRotation :slidesPerView="slidesPerView" :direction='true' :bannerList="bannerListDown">-->
|
||||
<!-- </InfiniteRotation>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- 第二横幅 -->
|
||||
<section>
|
||||
<div class="brand colormove" data-animation="slide-in-elliptic-top-fwd">
|
||||
|
||||
<div class="brand_txt">
|
||||
<h2>{{ $t('home.for.title') }}</h2>
|
||||
<p>{{ $t('home.for.desc') }}</p>
|
||||
|
||||
<nuxt-link :to="getHerf('/product/product_list/0-1')">
|
||||
<div class="brand_more">
|
||||
|
||||
{{ $t('home.for.start') }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
<!-- <a href="products/index.html" class="brand_more">{{ $t('home.for.start') }}</a> -->
|
||||
</div>
|
||||
<div class="brandcover"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品列表 -->
|
||||
<section>
|
||||
<div class="allmain">
|
||||
<div class="blog_title right op0" data-animation="slide-in-blurred-left">
|
||||
<span>{{ $t('home.products.title') }}</span>
|
||||
<h2>{{ $t('home.products.desc') }}</h2>
|
||||
</div>
|
||||
<div class="allmain_list">
|
||||
<div class="row allmainflex">
|
||||
|
||||
<div class="allmain_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in product_data">
|
||||
<nuxt-link :to="getHerf(getProductLink(item))" class="jump">
|
||||
<div class="allmain_box">
|
||||
<div class="allmain_cover"></div>
|
||||
<a href="javascript:;" class="allmain_txt">
|
||||
<h3>{{ item.product_name }}</h3>
|
||||
<p>{{ item.product_description }}</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="allmainimg">
|
||||
<img :src="item.product_img" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<img width=100% src="/img/home/38a0b923.png" alt="图片1">
|
||||
</div>
|
||||
</section>
|
||||
<!-- 新闻 -->
|
||||
<section>
|
||||
<div class="blog">
|
||||
<div class="container">
|
||||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||||
<span>{{ $t('home.news.title') }}</span>
|
||||
<h2>{{ $t('home.news.desc') }}</h2>
|
||||
</div>
|
||||
<div class="blog_main">
|
||||
<div class="row blogflex">
|
||||
|
||||
<div class="blog_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="(item, i) in newsList">
|
||||
<nuxt-link :to="getHerf(getNewsLink(item))" class="jump">
|
||||
<div class="blog_box">
|
||||
<div class="blogtime">
|
||||
<span>{{ item.news_issue_date_month }}-{{ item.news_issue_date_day }}</span>
|
||||
<p>{{ item.news_issue_year }}</p>
|
||||
</div>
|
||||
<span class="blog_img">
|
||||
<img :src="item.news_cover" alt="" />
|
||||
</span>
|
||||
<div class="blog_txt">
|
||||
|
||||
<h3> {{ item.news_title }}</h3>
|
||||
|
||||
<p>{{ item.news_intro }}
|
||||
</p>
|
||||
<span class="blog_more">
|
||||
<span>{{ $t('news.more') }}</span>
|
||||
<i class="iconfont"> </i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="blog">
|
||||
<div class="container">
|
||||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||||
<span>{{ $t('home.partners.title') }}</span>
|
||||
<h2>{{ $t('home.partners.desc') }}</h2>
|
||||
</div>
|
||||
<div class="partners_main">
|
||||
<div class="partners_flex">
|
||||
<div class=" partners_li" v-for="item in partners_data">
|
||||
<!-- <div class="partners_div"> -->
|
||||
<img :src="item.partners_img" alt="">
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { fontSizeReactive } from "~/utils/Tool";
|
||||
let newsList = ref([
|
||||
])
|
||||
let product_data = ref([])
|
||||
/** 基础变量 **/
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
/**预对接的数据**/
|
||||
let openImg1 = ref("/img/home/open/open1.png")
|
||||
|
||||
|
||||
/**
|
||||
* 接口对接
|
||||
*/
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
let timer_data = reactive(['125', '1250', '850', '135'])
|
||||
let _timer_data = reactive(['0', '0', '0', '0'])
|
||||
let i = ref('1')
|
||||
let key = ref(0)
|
||||
|
||||
const slidesPerView = ref(7)
|
||||
/**onMounted**/
|
||||
onMounted(() => {
|
||||
// console.log(locale,'locale');
|
||||
/**
|
||||
* 字体自适应，当小于880的时候字体-=1，480的时候-=1
|
||||
* */
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations({
|
||||
tagDom: 'Home-main', preload: 1, isRe: true
|
||||
})
|
||||
const totalHeight = document.body.scrollHeight;
|
||||
})
|
||||
|
||||
const bannerListUp = ref([])
|
||||
|
||||
await useFetch('/api/home/crossBanner/getCrossBanner').then(res => {
|
||||
let data = JSON.parse(res.data.value).data
|
||||
const val = data['up']?.map(v => { return { banner_img: v.cross_banner_img, src: '' } })
|
||||
if (val.length < 7) val.push(...val)
|
||||
bannerListUp.value = val
|
||||
|
||||
})
|
||||
|
||||
const videoPlay = ref()
|
||||
let video_url = ref('')
|
||||
useFetch('/api/home/video/getHomeVideo', { params: { locale: locale.value } }).then(res => {
|
||||
video_url.value = JSON.parse(res.data.value).data[0]
|
||||
videoPlay.value.src = video_url.value.home_video_url
|
||||
})
|
||||
const Professional_data = ref([])
|
||||
useFetch('/api/home/ProfessionalService/getProfessionalServiceList', { params: { locale: locale.value } }).then(res => {
|
||||
Professional_data.value = JSON.parse(res.data.value).data
|
||||
// console.log(JSON.parse(res.data.value).data, 'getProfessionalServiceList@@');
|
||||
})
|
||||
const partners_data = ref([])
|
||||
useFetch('/api/home/partners/getPartnersList').then(res => {
|
||||
partners_data.value = JSON.parse(res.data.value).data
|
||||
// console.log(partners_data.value, '1partners@@');
|
||||
})
|
||||
const heightlight_data = ref([])
|
||||
useFetch('/api/home/Highlights/getHighlightsList', { params: { locale: locale.value } }).then(res => {
|
||||
heightlight_data.value = JSON.parse(res.data.value).data
|
||||
// console.log(heightlight_data.value, '1heightlight_data@@');
|
||||
})
|
||||
|
||||
|
||||
useFetch('/api/product/getHotProductList', { params: { locale: locale.value } }).then(res => {
|
||||
let data = []
|
||||
JSON.parse(res.data.value).data.forEach(element => {
|
||||
element.product_img = element.product_img.split(",")[0];
|
||||
product_data.value.push(element)
|
||||
});
|
||||
})
|
||||
|
||||
useFetch('/api/news/getNewsList', { params: { idx: 1, locale: locale.value } }).then(res => {
|
||||
let data = JSON.parse(res.data.value).data
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let element = data[i]
|
||||
if (!element) break;
|
||||
element.news_issue_year = element.news_issue_date?.split("-")[0];
|
||||
element.news_issue_date_month = element.news_issue_date?.split("-")[1];
|
||||
element.news_issue_date_day = element.news_issue_date?.split("-")[2];
|
||||
newsList.value.push(element)
|
||||
}
|
||||
// console.log(newsList.value, 'news@@');
|
||||
})
|
||||
|
||||
const getNewsLink = function (item) {
|
||||
if (item.news_link) {
|
||||
return item.news_link;
|
||||
} else {
|
||||
return "/news/details/" + item.news_id;
|
||||
}
|
||||
}
|
||||
|
||||
function getProductLink(item) {
|
||||
if (item.product_link) {
|
||||
return item.product_link;
|
||||
} else {
|
||||
return "/product/details/" + item.product_id;
|
||||
}
|
||||
}
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||||
<style scoped src="~/assets/css/index/media.scss"></style>
|
||||
<style scoped src="~/assets/css/IndexDetail/index.scss"></style>
|
||||
<style scoped src="~/assets/css/IndexDetail/media.scss"></style>
|
||||
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
|
||||
<style scoped src="~/assets/css/index/iconfont/iconfont.css"></style>
|
||||
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>
|
||||
241
pages/news/[idx]-[page].vue
Normal file
241
pages/news/[idx]-[page].vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<Poster :type=1 :title="$t('common.poster.news')"></Poster>
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container ">
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="newsList.length != 0" class="news-big-box animate__animated animate__fadeIn">
|
||||
<div class="news-box" v-for="(item, index) in newsList">
|
||||
|
||||
<nuxt-link :to="getHerf(getLink(item))" class="jump">
|
||||
<div class="news-card">
|
||||
<div class="row">
|
||||
<div class="news-card__preview col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="news-card__preview-image">
|
||||
<img :src="item.news_cover" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-8">
|
||||
<div class="news-card__content">
|
||||
<div class="news-card__title">
|
||||
{{ item.news_title }}
|
||||
</div>
|
||||
<div class="news-card__desc">
|
||||
{{ item.news_intro }}
|
||||
</div>
|
||||
<div class="news-card__footer">
|
||||
<div class="news-card__time">{{ item.news_issue_date }}</div>
|
||||
<div class="news-card__read-more">{{ $t('news.more') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</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>
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let newsList = ref([])
|
||||
|
||||
let newsTypeList = ref([])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })
|
||||
|
||||
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,
|
||||
locale: locale.value,
|
||||
limit: 10
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams
|
||||
router.push("1-" + 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: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
// // 获取新闻列表
|
||||
useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/news/media.scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.news-big-box {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.35s ease-in-out;
|
||||
|
||||
.row {
|
||||
&:hover {
|
||||
background-color: var(--rootColor);
|
||||
transition: all 0.35s ease-in-out;
|
||||
|
||||
.news-card {
|
||||
|
||||
&__title,
|
||||
&__desc,
|
||||
&__time,
|
||||
&__read-more {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__preview img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 40px 30px 30px 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 25px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 25px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding-top: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&__read-more {
|
||||
font-size: 16px;
|
||||
color: var(--rootColor);
|
||||
font-weight: bold;
|
||||
transition: all 0.35s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user