diff --git a/src/assets/img/module_5_bg_cut.png b/src/assets/img/module_5_bg_cut.png new file mode 100644 index 0000000..ea7b4ac Binary files /dev/null and b/src/assets/img/module_5_bg_cut.png differ diff --git a/src/components/home/home.vue b/src/components/home/home.vue index 5c34401..c6ff697 100644 --- a/src/components/home/home.vue +++ b/src/components/home/home.vue @@ -76,7 +76,7 @@ -
Hyperrealism
+
Hyperrealism
Digital human creator
@@ -162,8 +162,7 @@ -
- +
{{ @@ -209,7 +208,7 @@ {{ characters == 1 ? "让如此优秀的数字人服务于您的更多应用场景吧!" - : "Scenarios that Suimang Digital Humans can serve" + : "Let such excellent digital people serve more of your application scenarios!" }}
@@ -677,7 +676,7 @@ export default { mounted() { // console.log(); - this.$refs["vidoe"].play(); + // this.$refs["vidoe"].play(); new Swiper(".swiper-container", { slidesPerView: 3, spaceBetween: 30, @@ -980,15 +979,104 @@ export default { } } } -.module_5 { +.module_5_0 { height: 1080px; background-color: #010101; position: relative; + overflow: hidden; background-image: url("../../assets/img/module_5_bg1.png"); background-repeat: no-repeat; background-size: 92% 100%; background-position: 166% 20%; + + .titleBox { + // position: absolute; + // top: 26%; + // 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; + } + } +} +.module_5_1 { + height: 1080px; + background-color: #010101; + position: relative; overflow: hidden; + background-image: url("../../assets/img/module_5_bg_cut.png"); + background-repeat: no-repeat; + background-size: 92% 100%; + background-position: 166% 20%; + .titleBox { // position: absolute; // top: 26%; @@ -1064,6 +1152,11 @@ export default { border: #16e9d6 solid 3px; font-size: 16px; cursor: pointer; + transition: all 0.3s; + &:hover { + color: #fff; + background-color: #16e9d6; + } } } } diff --git a/src/store/modules/public.js b/src/store/modules/public.js index bc42575..ac9649f 100644 --- a/src/store/modules/public.js +++ b/src/store/modules/public.js @@ -1,15 +1,15 @@ let publicObj = { - state:{ - characters:1,//1=》中文 2=》英文 + state: { + characters: 1,//1=》中文 2=》英文 }, - mutations:{ - setCharacters(state,data){ + mutations: { + setCharacters(state, data) { state.characters = data } }, - actions:{ - setCharacters(context,data){ - context.commit("setCharacters" ,data) + actions: { + setCharacters(context, data) { + context.commit("setCharacters", data) } } }