Browse Source

首页更换视频

ctt_ywq
congzc 2 years ago
parent
commit
f31731df81
2 changed files with 31 additions and 18 deletions
  1. +29
    -16
      src/components/home/home.vue
  2. +2
    -2
      src/components/views/shadow.vue

+ 29
- 16
src/components/home/home.vue View File

@@ -30,15 +30,11 @@
<div class="ctnBox"> <div class="ctnBox">
<div class="title_ctn1"> <div class="title_ctn1">
{{ {{
characters == 1 ? '用户仅需输入文字或语音,即可实现智能全自动的内容生产(AIGC)' : 'Multimodal Input: Seamlessly Manipulate Virtual Humans through Text and Audio in Multiple Languages.'
characters == 1 ? '用户仅需输入文字或语音,即可实现智能全自动的内容生产(AIGC)' : 'Multimodal Input: Seamlessly Manipulate Virtual Humans through Text and Audio in Multiple Languages'
}} }}
</div> </div>
<div class="title_ctn1"> <div class="title_ctn1">
{{
characters == 1
? '呈现出色的真实感和流畅度,卓越的自然度,自动辨认支持多语言'
: 'Unleash Exiiting Realism with Metavatar AIGC Pipeline: High-Resolution, Naturally Vivid Character Movements.'
}}
{{ characters == 1 ? '呈现出色的真实感和流畅度,卓越的自然度,自动辨认支持多语言' : 'Unleash Realism with Metavatar AlGC: High-Resolution, Naturally Vivid Character Movements' }}
</div> </div>
<div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 50px"> <div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 50px">
{{ 'Bring new intelligence experience for user far more exciting than ever in few minutes' }} {{ 'Bring new intelligence experience for user far more exciting than ever in few minutes' }}
@@ -73,8 +69,13 @@
<img v-else class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" /> <img v-else class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" />
<video ref="videoII" src="https://video.metavatar.cc/sv/3564ae64-18841d254a8/3564ae64-18841d254a8.mp4" /> <video ref="videoII" src="https://video.metavatar.cc/sv/3564ae64-18841d254a8/3564ae64-18841d254a8.mp4" />
</div> </div>
<div class="imgBox2">
<!-- <div class="imgBox2">
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_3_2.png" alt /> <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_3_2.png" alt />
</div> -->
<div class="imgBox2" @click="goSetVedio2(isPlayed2)">
<img v-if="isPlayed2" class="play" style="left: 42%" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png" title="click to play" />
<img v-else class="play" style="left: 42%" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" />
<video ref="videoIII" src="https://video.metavatar.cc/sv/549c903-18843089e4c/549c903-18843089e4c.mp4" />
</div> </div>
</div> </div>
<div class="module_4" id="module_4"> <div class="module_4" id="module_4">
@@ -349,6 +350,7 @@ export default {
data() { data() {
return { return {
isPlayed: true, isPlayed: true,
isPlayed2: true,
// 轮播图效果 // 轮播图效果
swiperIndex: 0, swiperIndex: 0,
timer: null, timer: null,
@@ -676,6 +678,14 @@ export default {
} }
this.isPlayed = !flag; this.isPlayed = !flag;
}, },
goSetVedio2(flag) {
if (flag) {
this.$refs['videoIII'].play();
} else {
this.$refs['videoIII'].pause();
}
this.isPlayed2 = !flag;
},
showBox() { showBox() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
@@ -1016,9 +1026,12 @@ export default {
// margin-top: 40px; // margin-top: 40px;
} }
.module_3 { .module_3 {
display: flex;
justify-content: space-between;
overflow: hidden; overflow: hidden;
background-color: #202020; background-color: #202020;
.imgBox1 {
.imgBox1,
.imgBox2 {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
float: left; float: left;
@@ -1050,14 +1063,14 @@ export default {
} }
} }
.imgBox2 { .imgBox2 {
width: 49%;
height: 570px;
float: right;
// background-color: #16e9d6;
img {
width: 100%;
height: 100%;
}
// width: 49%;
// height: 570px;
// float: right;
// // background-color: #16e9d6;
// img {
// width: 100%;
// height: 100%;
// }
} }
} }
.module_4 { .module_4 {


+ 2
- 2
src/components/views/shadow.vue View File

@@ -78,8 +78,8 @@
<div class="module_3"> <div class="module_3">
<div class="title" v-if="characters == 1">中之人驱动</div> <div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div> <div class="title" v-if="characters != 1">“中の人” driving</div>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" />
<img v-if="characters != 1" src="../../assets/img/zhongzhiren.jpg" alt="" />
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png" alt="" />
</div> </div>
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">


Loading…
Cancel
Save