|
@@ -133,6 +133,7 @@ |
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
|
|
|
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
|
|
|
|
|
|
<img src="../../assets/img/module_5_bg_cut.png" alt="" />
|
|
|
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
|
|
|
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
|
|
|
<div class="title">
|
|
|
<div class="title">
|
|
|
{{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }}
|
|
|
{{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }}
|
|
@@ -631,7 +632,7 @@ export default { |
|
|
if (that.swiperIndex >= that.timeLsit.length) {
|
|
|
if (that.swiperIndex >= that.timeLsit.length) {
|
|
|
that.swiperIndex = 0;
|
|
|
that.swiperIndex = 0;
|
|
|
}
|
|
|
}
|
|
|
}, 3000); // 每 3 秒执行一次
|
|
|
|
|
|
|
|
|
}, 1000); // 每 3 秒执行一次
|
|
|
},
|
|
|
},
|
|
|
// 清除定时器
|
|
|
// 清除定时器
|
|
|
stopTimer() {
|
|
|
stopTimer() {
|
|
@@ -1081,22 +1082,34 @@ export default { |
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.module_5_0 {
|
|
|
.module_5_0 {
|
|
|
height: 1080px;
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 25%;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
// height: 880px;
|
|
|
|
|
|
height: 760px;
|
|
|
background-color: #010101;
|
|
|
background-color: #010101;
|
|
|
position: relative;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
overflow: hidden;
|
|
|
// background-image: url("../../assets/img/module_5_bg1.png");
|
|
|
// background-image: url("../../assets/img/module_5_bg1.png");
|
|
|
background-image: url('../../assets/img/module_5_bg_cut.png');
|
|
|
|
|
|
|
|
|
// background-image: url('../../assets/img/module_5_bg_cut.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 92% 100%;
|
|
|
background-size: 92% 100%;
|
|
|
background-position: 166% 20%;
|
|
|
background-position: 166% 20%;
|
|
|
|
|
|
|
|
|
.titleBox {
|
|
|
.titleBox {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 2;
|
|
|
// position: absolute;
|
|
|
// position: absolute;
|
|
|
// top: 26%;
|
|
|
// top: 26%;
|
|
|
// left: 16%;
|
|
|
// left: 16%;
|
|
|
margin-left: 220px;
|
|
|
margin-left: 220px;
|
|
|
margin-top: 14%;
|
|
|
|
|
|
|
|
|
margin-top: 5%;
|
|
|
width: 680px;
|
|
|
width: 680px;
|
|
|
.title {
|
|
|
.title {
|
|
|
font-size: 48px;
|
|
|
font-size: 48px;
|
|
@@ -1109,13 +1122,13 @@ export default { |
|
|
margin-bottom: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
color: #7e7e7e;
|
|
|
color: #7e7e7e;
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
line-height: 30px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
}
|
|
|
.read_btn {
|
|
|
.read_btn {
|
|
|
margin-top: 36px;
|
|
|
|
|
|
|
|
|
margin-top: 76px;
|
|
|
height: 60px;
|
|
|
height: 60px;
|
|
|
width: 220px;
|
|
|
width: 220px;
|
|
|
text-align: center;
|
|
|
text-align: center;
|
|
@@ -1170,21 +1183,34 @@ export default { |
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.module_5_1 {
|
|
|
.module_5_1 {
|
|
|
height: 1080px;
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 25%;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
// height: 880px;
|
|
|
|
|
|
height: 760px;
|
|
|
background-color: #010101;
|
|
|
background-color: #010101;
|
|
|
position: relative;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
overflow: hidden;
|
|
|
background-image: url('../../assets/img/module_5_bg_cut.png');
|
|
|
|
|
|
|
|
|
// background-image: url("../../assets/img/module_5_bg1.png");
|
|
|
|
|
|
// background-image: url('../../assets/img/module_5_bg_cut.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 92% 100%;
|
|
|
background-size: 92% 100%;
|
|
|
background-position: 166% 20%;
|
|
|
background-position: 166% 20%;
|
|
|
|
|
|
|
|
|
.titleBox {
|
|
|
|
|
|
|
|
|
.titleBox1 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 2;
|
|
|
// position: absolute;
|
|
|
// position: absolute;
|
|
|
// top: 26%;
|
|
|
// top: 26%;
|
|
|
// left: 16%;
|
|
|
// left: 16%;
|
|
|
margin-left: 220px;
|
|
|
margin-left: 220px;
|
|
|
margin-top: 14%;
|
|
|
|
|
|
|
|
|
margin-top: 5%;
|
|
|
width: 680px;
|
|
|
width: 680px;
|
|
|
.title {
|
|
|
.title {
|
|
|
font-size: 48px;
|
|
|
font-size: 48px;
|
|
@@ -1197,54 +1223,13 @@ export default { |
|
|
margin-bottom: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
color: #7e7e7e;
|
|
|
color: #7e7e7e;
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.read_btn {
|
|
|
|
|
|
margin-top: 36px;
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
width: 220px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
|
color: #16e9d6;
|
|
|
|
|
|
border-radius: 40px;
|
|
|
|
|
|
border: #16e9d6 solid 3px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
font-size: 16px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: #16e9d6;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.titleBox1 {
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// top: 20%;
|
|
|
|
|
|
// left: 16%;
|
|
|
|
|
|
margin-left: 220px;
|
|
|
|
|
|
margin-top: 12%;
|
|
|
|
|
|
width: 680px;
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
|
font-family: Inter;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
.paragraph {
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #7e7e7e;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
line-height: 20px;
|
|
|
|
|
|
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
}
|
|
|
.read_btn {
|
|
|
.read_btn {
|
|
|
margin-top: 36px;
|
|
|
|
|
|
|
|
|
margin-top: 46px;
|
|
|
height: 60px;
|
|
|
height: 60px;
|
|
|
width: 220px;
|
|
|
width: 220px;
|
|
|
text-align: center;
|
|
|
text-align: center;
|
|
@@ -1262,9 +1247,113 @@ export default { |
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// .module_5_1 {
|
|
|
|
|
|
// position: relative;
|
|
|
|
|
|
// img {
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// top: 0;
|
|
|
|
|
|
// left: 20%;
|
|
|
|
|
|
// z-index: 1;
|
|
|
|
|
|
// max-width: 100%;
|
|
|
|
|
|
// height: 100%;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// // height: 880px;
|
|
|
|
|
|
// height: 880px;
|
|
|
|
|
|
// background-color: #010101;
|
|
|
|
|
|
// position: relative;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
// // background-image: url("../../assets/img/module_5_bg1.png");
|
|
|
|
|
|
// // background-image: url('../../assets/img/module_5_bg_cut.png');
|
|
|
|
|
|
// background-repeat: no-repeat;
|
|
|
|
|
|
// background-size: 92% 100%;
|
|
|
|
|
|
// background-position: 166% 20%;
|
|
|
|
|
|
|
|
|
|
|
|
// .titleBox1 {
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// z-index: 2;
|
|
|
|
|
|
// // left: 16%;
|
|
|
|
|
|
// margin-left: 220px;
|
|
|
|
|
|
// margin-top: 14%;
|
|
|
|
|
|
// width: 680px;
|
|
|
|
|
|
// .title {
|
|
|
|
|
|
// font-size: 48px;
|
|
|
|
|
|
// font-family: Inter;
|
|
|
|
|
|
// font-weight: 600;
|
|
|
|
|
|
// margin-bottom: 70px;
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// .paragraph {
|
|
|
|
|
|
// margin-bottom: 20px;
|
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
|
// color: #7e7e7e;
|
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
|
// font-family: Microsoft YaHei;
|
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
|
// line-height: 30px;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// .read_btn {
|
|
|
|
|
|
// margin-top: 36px;
|
|
|
|
|
|
// height: 60px;
|
|
|
|
|
|
// width: 220px;
|
|
|
|
|
|
// text-align: center;
|
|
|
|
|
|
// line-height: 60px;
|
|
|
|
|
|
// color: #16e9d6;
|
|
|
|
|
|
// border-radius: 40px;
|
|
|
|
|
|
// border: #16e9d6 solid 3px;
|
|
|
|
|
|
// font-size: 16px;
|
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
|
// transition: all 0.3s;
|
|
|
|
|
|
// &:hover {
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
// background-color: #16e9d6;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// .titleBox1 {
|
|
|
|
|
|
// // position: absolute;
|
|
|
|
|
|
// // top: 20%;
|
|
|
|
|
|
// // left: 16%;
|
|
|
|
|
|
// margin-left: 220px;
|
|
|
|
|
|
// margin-top: 12%;
|
|
|
|
|
|
// width: 680px;
|
|
|
|
|
|
// .title {
|
|
|
|
|
|
// font-size: 44px;
|
|
|
|
|
|
// font-family: Inter;
|
|
|
|
|
|
// font-weight: 600;
|
|
|
|
|
|
// margin-bottom: 40px;
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// .paragraph {
|
|
|
|
|
|
// margin-bottom: 20px;
|
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
|
// color: #7e7e7e;
|
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
|
// font-family: Microsoft YaHei;
|
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
|
// line-height: 20px;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// .read_btn {
|
|
|
|
|
|
// margin-top: 36px;
|
|
|
|
|
|
// height: 60px;
|
|
|
|
|
|
// width: 220px;
|
|
|
|
|
|
// text-align: center;
|
|
|
|
|
|
// line-height: 60px;
|
|
|
|
|
|
// color: #16e9d6;
|
|
|
|
|
|
// border-radius: 40px;
|
|
|
|
|
|
// border: #16e9d6 solid 3px;
|
|
|
|
|
|
// font-size: 16px;
|
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
|
// transition: all 0.3s;
|
|
|
|
|
|
// &:hover {
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
// background-color: #16e9d6;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
.module_6 {
|
|
|
.module_6 {
|
|
|
// margin-top: -100px;
|
|
|
|
|
|
height: 880px;
|
|
|
|
|
|
|
|
|
margin-top: -100px;
|
|
|
|
|
|
height: 800px;
|
|
|
// height: 1080px;
|
|
|
// height: 1080px;
|
|
|
background-color: #fff;
|
|
|
background-color: #fff;
|
|
|
.title {
|
|
|
.title {
|
|
@@ -1276,7 +1365,7 @@ export default { |
|
|
.imgBox {
|
|
|
.imgBox {
|
|
|
width: 1280px;
|
|
|
width: 1280px;
|
|
|
height: 640px;
|
|
|
height: 640px;
|
|
|
margin: 130px auto 0 auto;
|
|
|
|
|
|
|
|
|
margin: 50px auto 0 auto;
|
|
|
display: flex;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
@@ -1301,7 +1390,7 @@ export default { |
|
|
margin: auto;
|
|
|
margin: auto;
|
|
|
color: #fff;
|
|
|
color: #fff;
|
|
|
width: 90%;
|
|
|
width: 90%;
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
|
font-size: 20px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
line-height: 24px;
|
|
|
line-height: 24px;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
@@ -1341,9 +1430,11 @@ export default { |
|
|
opacity: 0;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
.des {
|
|
|
.des {
|
|
|
|
|
|
font-size: 18px;
|
|
|
opacity: 1;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
.des_y {
|
|
|
.des_y {
|
|
|
|
|
|
font-size: 18px;
|
|
|
opacity: 1;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1351,7 +1442,7 @@ export default { |
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.module_7 {
|
|
|
.module_7 {
|
|
|
height: 1000px;
|
|
|
|
|
|
|
|
|
height: 900px;
|
|
|
background-color: #f0f4f7;
|
|
|
background-color: #f0f4f7;
|
|
|
position: relative;
|
|
|
position: relative;
|
|
|
background-image: url('../../assets/img/module_7_bg.png');
|
|
|
background-image: url('../../assets/img/module_7_bg.png');
|
|
@@ -1497,10 +1588,10 @@ export default { |
|
|
background-color: #d7d8de;
|
|
|
background-color: #d7d8de;
|
|
|
overflow: hidden;
|
|
|
overflow: hidden;
|
|
|
.weBox {
|
|
|
.weBox {
|
|
|
margin-top: 130px;
|
|
|
|
|
|
|
|
|
margin-top: 70px;
|
|
|
margin-left: auto;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
margin-right: auto;
|
|
|
margin-bottom: 180px;
|
|
|
|
|
|
|
|
|
margin-bottom: 70px;
|
|
|
width: 1300px;
|
|
|
width: 1300px;
|
|
|
height: 550px;
|
|
|
height: 550px;
|
|
|
cursor: pointer;
|
|
|
cursor: pointer;
|
|
@@ -1523,7 +1614,7 @@ export default { |
|
|
}
|
|
|
}
|
|
|
.title_h {
|
|
|
.title_h {
|
|
|
height: 18px;
|
|
|
height: 18px;
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
|
font-size: 28px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
color: #ffffff;
|
|
@@ -1540,7 +1631,7 @@ export default { |
|
|
}
|
|
|
}
|
|
|
.ctn_c {
|
|
|
.ctn_c {
|
|
|
// width: 434px;
|
|
|
// width: 434px;
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
color: #7e7e7e;
|
|
|
color: #7e7e7e;
|
|
@@ -1562,7 +1653,7 @@ export default { |
|
|
.ctn_c1 {
|
|
|
.ctn_c1 {
|
|
|
width: 436px;
|
|
|
width: 436px;
|
|
|
height: 222px;
|
|
|
height: 222px;
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-weight: 400;
|
|
|
color: #7e7e7e;
|
|
|
color: #7e7e7e;
|
|
|