Parcourir la source

图片间距调整

ctt_ywq
congzc il y a 2 ans
Parent
révision
9d26207060
5 fichiers modifiés avec 183 ajouts et 88 suppressions
  1. +8
    -6
      src/components/common/tail.vue
  2. +154
    -63
      src/components/home/home.vue
  3. +9
    -7
      src/components/views/generate.vue
  4. +6
    -6
      src/components/views/live.vue
  5. +6
    -6
      src/components/views/shadow.vue

+ 8
- 6
src/components/common/tail.vue Voir le fichier

@@ -56,7 +56,7 @@
: '311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing' : '311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'
}} }}
</div> </div>
<div class="phone" v-if="characters == 1">周先生 +65 9422 2858</div>
<div class="phone" v-if="characters == 1">周女士 +65 9422 2858</div>
<div class="phone" v-if="characters != 1">Chow +65 9422 2858</div> <div class="phone" v-if="characters != 1">Chow +65 9422 2858</div>
<div class="site"> <div class="site">
{{ characters == 1 ? '新加坡北桥路111号,半岛广场07-11号,邮编179098' : '111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098' }} {{ characters == 1 ? '新加坡北桥路111号,半岛广场07-11号,邮编179098' : '111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098' }}
@@ -278,14 +278,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tailBox { .tailBox {
overflow: hidden; overflow: hidden;
height: 578px;
height: 508px;
background: #f1f4f7; background: #f1f4f7;
padding-bottom: 54px;
// padding-bottom: 54px;
.taillong { .taillong {
width: 168px; width: 168px;
height: 50px; height: 50px;
margin-top: 60px;
margin-top: 20px;
margin-left: 360px; margin-left: 360px;
img { img {
width: 168px; width: 168px;
@@ -301,6 +301,7 @@ export default {
float: left; float: left;
} }
.taolIconText { .taolIconText {
margin-top: -20px;
font-size: 14px; font-size: 14px;
font-family: Inter; font-family: Inter;
font-weight: 400; font-weight: 400;
@@ -376,6 +377,7 @@ export default {
} }
} }
.rqCodeBox { .rqCodeBox {
padding-top: -10px;
width: 360px; width: 360px;
// position: absolute; // position: absolute;
// top: 130px; // top: 130px;
@@ -451,10 +453,10 @@ export default {
// position: absolute; // position: absolute;
// width: 100%; // width: 100%;
// bottom: 6%; // bottom: 6%;
margin-top: 80px;
margin-top: 20px;
// left: 0; // left: 0;
text-align: center; text-align: center;
font-size: 12px;
font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #191919; color: #191919;


+ 154
- 63
src/components/home/home.vue Voir le fichier

@@ -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;


+ 9
- 7
src/components/views/generate.vue Voir le fichier

@@ -547,9 +547,11 @@ export default {
} }
} }
.module_2 { .module_2 {
height: 1080px;
height: 930px;
// height: 1080px;
background-color: #fff; background-color: #fff;
padding-top: 133px;
padding-top: 53px;
// padding-top: 133px;
text-align: center; text-align: center;
.title { .title {
text-align: center; text-align: center;
@@ -558,7 +560,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #232324; color: #232324;
line-height: 62px; line-height: 62px;
margin-bottom: 84px;
margin-bottom: 44px;
} }
img { img {
width: 1293px; width: 1293px;
@@ -571,9 +573,9 @@ export default {
} }
} }
.module_3 { .module_3 {
height: 1000px;
height: 850px;
background-color: #ebeef7; background-color: #ebeef7;
padding-top: 135px;
padding-top: 53px;
text-align: center; text-align: center;
.title { .title {
text-align: center; text-align: center;
@@ -605,9 +607,9 @@ export default {
} }
} }
.module_4 { .module_4 {
height: 1000px;
height: 850px;
background-color: #fff; background-color: #fff;
padding-top: 156px;
padding-top: 26px;
padding-left: 116px; padding-left: 116px;
text-align: center; text-align: center;
.imgBox { .imgBox {


+ 6
- 6
src/components/views/live.vue Voir le fichier

@@ -557,15 +557,15 @@ export default {
} }
} }
.module_2 { .module_2 {
height: 960px;
height: 760px;
background: #ffffff; background: #ffffff;
padding-top: 162px;
padding-top: 32px;
padding-left: 116px; padding-left: 116px;
padding-right: 85px; padding-right: 85px;
.title { .title {
text-align: center; text-align: center;
margin-bottom: 132px;
margin-bottom: 72px;
font-size: 36px; font-size: 36px;
img { img {
position: relative; position: relative;
@@ -594,9 +594,9 @@ export default {
} }
} }
.module_3 { .module_3 {
height: 960px;
height: 810px;
background-color: #ebeef7; background-color: #ebeef7;
padding-top: 133px;
padding-top: 33px;
text-align: center; text-align: center;
.title { .title {
text-align: center; text-align: center;
@@ -605,7 +605,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #4d4d4d; color: #4d4d4d;
line-height: 36px; line-height: 36px;
margin-bottom: 84px;
margin-bottom: 44px;
} }
img { img {
width: 1250px; width: 1250px;


+ 6
- 6
src/components/views/shadow.vue Voir le fichier

@@ -558,15 +558,15 @@ export default {
} }
} }
.module_2 { .module_2 {
height: 960px;
height: 810px;
background: #ffffff; background: #ffffff;
padding-top: 112px;
padding-top: 32px;
padding-left: 331px; padding-left: 331px;
padding-right: 306px; padding-right: 306px;
.title { .title {
text-align: center; text-align: center;
margin-bottom: 132px;
margin-bottom: 52px;
font-size: 36px; font-size: 36px;
} }
.imgBox { .imgBox {
@@ -660,9 +660,9 @@ export default {
} }
} }
.module_3 { .module_3 {
height: 900px;
height: 700px;
background-color: #ebeef7; background-color: #ebeef7;
padding-top: 133px;
padding-top: 33px;
text-align: center; text-align: center;
.title { .title {
text-align: center; text-align: center;
@@ -671,7 +671,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #4d4d4d; color: #4d4d4d;
line-height: 36px; line-height: 36px;
margin-bottom: 5px;
margin-bottom: -25px;
} }
img { img {
width: 1446px; width: 1446px;


Chargement…
Annuler
Enregistrer