| @@ -1,15 +1,24 @@ | |||||
| <template> | <template> | ||||
| <div class="Box" id="top"> | <div class="Box" id="top"> | ||||
| <div class="module_1"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" | |||||
| <div | |||||
| class="module_1" | |||||
| style="position: relative; background-color: #47aa5a; height: 800px" | |||||
| > | |||||
| <video | |||||
| ref="video" | |||||
| style="position: absolute; right: -20%" | |||||
| src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4" | |||||
| width="100%" | width="100%" | ||||
| height="100%" | height="100%" | ||||
| autoplay | |||||
| muted="muted" | |||||
| loop="loop" | |||||
| /> | /> | ||||
| <!-- <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" /> --> | |||||
| <div class="titleBox"> | <div class="titleBox"> | ||||
| <div class="title_item1" v-if="characters == 1">邃芒慧播</div> | |||||
| <div class="title_item1" v-if="characters == 1">邃芒慧影</div> | |||||
| <div class="title_item1_y" v-if="characters == 1"> | <div class="title_item1_y" v-if="characters == 1"> | ||||
| 直播虚拟人自然逼真,分身真假难辨 | |||||
| 数字人内容生产从未如此高效便捷 | |||||
| </div> | </div> | ||||
| <div class="desc" v-if="characters == 1"> | <div class="desc" v-if="characters == 1"> | ||||
| @@ -17,18 +26,21 @@ | |||||
| <div>能为您在各种场景下7*24工作</div> | <div>能为您在各种场景下7*24工作</div> | ||||
| </div> | </div> | ||||
| <!-- 英文部分 --> | <!-- 英文部分 --> | ||||
| <div class="title_item1" v-if="characters != 1">MetaStreaming</div> | |||||
| <div class="title_item1" v-if="characters != 1">MetaStream</div> | |||||
| <div class="title_item1_y" v-if="characters != 1"> | <div class="title_item1_y" v-if="characters != 1"> | ||||
| The live broadcast virtual person is natural and lifelike, | |||||
| ultra-realistic hardly to tell the differences from real human being. | |||||
| Digital human content production has never been so efficient and | |||||
| convenient | |||||
| </div> | </div> | ||||
| <div class="desc" v-if="characters != 1"> | <div class="desc" v-if="characters != 1"> | ||||
| <div> | <div> | ||||
| Virtual live broadcast solves real-world problems such as production | |||||
| capacity of real people, IP ownership, etc. by virtual digital human | |||||
| Text, voice, and source video multiple drive methods support the | |||||
| production of content at any time and keep up with hot spots | |||||
| </div> | |||||
| <div> | |||||
| High naturalness and realism let your digital human completely cross | |||||
| the uncanny valley | |||||
| </div> | </div> | ||||
| <div>Can work for you 7*24 in various scenarios</div> | |||||
| </div> | </div> | ||||
| <div class="title_btn" @click="showBox"> | <div class="title_btn" @click="showBox"> | ||||
| @@ -39,38 +51,76 @@ | |||||
| </div> | </div> | ||||
| <div class="module_2"> | <div class="module_2"> | ||||
| <div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div> | |||||
| <div class="title" v-if="characters == 1"> | |||||
| 只需 | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" | |||||
| /> | |||||
| 步完成一条数字人视频内容生成 | |||||
| </div> | |||||
| <div class="title" v-if="characters != 1"> | <div class="title" v-if="characters != 1"> | ||||
| Digital live broadcasting manipulated by AI, text, voice, video etc.to | |||||
| free real people workforce on camera. | |||||
| Just | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" | |||||
| /> | |||||
| step to complete the generation of digital human video content | |||||
| </div> | </div> | ||||
| <div class="imgBox"> | |||||
| <li style="position: relative"> | |||||
| <div class="images"> | |||||
| <li> | |||||
| <img | <img | ||||
| v-if="characters == 1" | v-if="characters == 1" | ||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png" | |||||
| alt="" | alt="" | ||||
| /> | /> | ||||
| <img | <img | ||||
| v-if="characters != 1" | v-if="characters != 1" | ||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg" | |||||
| alt="" | alt="" | ||||
| /> | /> | ||||
| <div class="textInImg" v-if="characters != 1">中の人</div> | |||||
| </li> | </li> | ||||
| <li style="position: relative"> | |||||
| <li> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg" | |||||
| alt="" | |||||
| /> | |||||
| </li> | |||||
| <li> | |||||
| <img | <img | ||||
| v-if="characters == 1" | v-if="characters == 1" | ||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png" | |||||
| alt="" | alt="" | ||||
| /> | /> | ||||
| <img | <img | ||||
| v-if="characters != 1" | v-if="characters != 1" | ||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg" | |||||
| alt="" | alt="" | ||||
| /> | /> | ||||
| <div class="textInImg" v-if="characters != 1"> | |||||
| Digital live streaming | |||||
| </li> | |||||
| <li class="videoLi"> | |||||
| <div class="imgBox1" @click="goSetVedio(isPlayed)"> | |||||
| <img | |||||
| v-if="isPlayed" | |||||
| class="play" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png" | |||||
| title="click to play" | |||||
| /> | |||||
| <img | |||||
| v-else | |||||
| class="play" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" | |||||
| title="click to pause" | |||||
| /> | |||||
| <video | |||||
| style="" | |||||
| ref="videoII" | |||||
| src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4" | |||||
| /> | |||||
| </div> | </div> | ||||
| </li> | </li> | ||||
| <li style="position: relative"> | <li style="position: relative"> | ||||
| @@ -108,18 +158,10 @@ | |||||
| </div> | </div> | ||||
| <div class="module_3"> | <div class="module_3"> | ||||
| <div class="title" v-if="characters == 1">脚本驱动数字人直播</div> | |||||
| <div class="title" v-if="characters != 1"> | |||||
| Script-driven digital human live broadcast | |||||
| </div> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <div class="title" v-if="characters == 1">中之人驱动</div> | |||||
| <div class="title" v-if="characters != 1">“中の人” driving</div> | |||||
| <img | <img | ||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" | |||||
| alt="" | alt="" | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| @@ -295,6 +337,14 @@ export default { | |||||
| methods: { | methods: { | ||||
| ...mapActions(["setCharacters"]), | ...mapActions(["setCharacters"]), | ||||
| goSetVedio(flag) { | |||||
| if (flag) { | |||||
| this.$refs["videoII"].play(); | |||||
| } else { | |||||
| this.$refs["videoII"].pause(); | |||||
| } | |||||
| this.isPlayed = !flag; | |||||
| }, | |||||
| change(value) { | change(value) { | ||||
| console.log(value); | console.log(value); | ||||
| this.setCharacters(value); | this.setCharacters(value); | ||||
| @@ -578,41 +628,30 @@ export default { | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | ||||
| background: #e7627b; | background: #e7627b; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| transition: all 0.3s; | |||||
| } | |||||
| .pinkCard { | |||||
| position: absolute; | |||||
| left: 325px; | |||||
| bottom: 204px; | |||||
| width: 288px; | |||||
| height: 50px; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 46px; | |||||
| border-radius: 4px; | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
| background: #dc62e7; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| .blueCard { | |||||
| position: absolute; | |||||
| right: -49px; | |||||
| bottom: 51px; | |||||
| width: 321px; | |||||
| // height: 50px; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 46px; | |||||
| border-radius: 4px; | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
| background: #6462e7; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| .play { | |||||
| position: absolute; | |||||
| top: 42%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| width: 100px; | |||||
| height: 100px; | |||||
| z-index: 99; | |||||
| transition: all 0.3s; | |||||
| transform: scale(10); | |||||
| opacity: 0; | |||||
| } | |||||
| // background-color: #16e9d6; | |||||
| video { | |||||
| background-color: #47aa5a; | |||||
| width: 423px; | |||||
| height: 540px; | |||||
| } | |||||
| &:hover { | |||||
| .play { | |||||
| transform: scale(1); | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||