| @@ -20,10 +20,10 @@ | |||
| <el-dropdown-item command="MetaGene"> | |||
| {{ characters == 1 ? "邃芒慧生" : "MetaGene" }} | |||
| </el-dropdown-item> | |||
| <el-dropdown-item command="MetaManeuver">{{ | |||
| <el-dropdown-item command="MetaNeuver">{{ | |||
| characters == 1 ? "邃芒慧影" : "MetaNeuver" | |||
| }}</el-dropdown-item> | |||
| <el-dropdown-item command="MetaStream">{{ | |||
| <el-dropdown-item command="MetaStreaming">{{ | |||
| characters == 1 ? "邃芒慧播" : "MetaStreaming" | |||
| }}</el-dropdown-item> | |||
| <el-dropdown-item command="MetaTuring">{{ | |||
| @@ -1,42 +1,34 @@ | |||
| <template> | |||
| <div class="Box" id="top"> | |||
| <div class="module_1"> | |||
| <video | |||
| ref="video" | |||
| src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | |||
| <img | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" | |||
| width="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="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> | |||
| <div class="desc" v-if="characters == 1"> | |||
| <div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||
| <div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div> | |||
| <div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||
| <div>能为您在各种场景下7*24工作</div> | |||
| </div> | |||
| <!-- 英文部分 --> | |||
| <div class="title_item1" v-if="characters != 1">MetaStream</div> | |||
| <div class="title_item1" v-if="characters != 1">MetaStreaming</div> | |||
| <div class="title_item1_y" v-if="characters != 1"> | |||
| Digital human content production has never been so efficient and | |||
| convenient | |||
| The live broadcast virtual person is natural and lifelike, | |||
| ultra-realistic hardly to tell the differences from real human being. | |||
| </div> | |||
| <div class="desc" v-if="characters != 1"> | |||
| <div> | |||
| 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 | |||
| Virtual live broadcast solves real-world problems such as production | |||
| capacity of real people, IP ownership, etc. by virtual digital human | |||
| </div> | |||
| <div>Can work for you 7*24 in various scenarios</div> | |||
| </div> | |||
| <div class="title_btn" @click="showBox"> | |||
| @@ -47,83 +39,87 @@ | |||
| </div> | |||
| <div class="module_2"> | |||
| <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> | |||
| <div class="title" v-if="characters != 1"> | |||
| 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 | |||
| Digital live broadcasting manipulated by AI, text, voice, video etc.to | |||
| free real people workforce on camera. | |||
| </div> | |||
| <div class="images"> | |||
| <li> | |||
| <div class="imgBox"> | |||
| <li style="position: relative"> | |||
| <img | |||
| v-if="characters == 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png" | |||
| alt="" | |||
| /> | |||
| <img | |||
| v-if="characters != 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png" | |||
| alt="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1">中の人</div> | |||
| </li> | |||
| <li> | |||
| <li style="position: relative"> | |||
| <img | |||
| v-if="characters == 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@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" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png" | |||
| alt="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1"> | |||
| Digital live streaming | |||
| </div> | |||
| </li> | |||
| <li> | |||
| <li style="position: relative"> | |||
| <img | |||
| v-if="characters == 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png" | |||
| alt="" | |||
| /> | |||
| <img | |||
| v-if="characters != 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png" | |||
| alt="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1">Toonman live</div> | |||
| </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 ref="videoII" src="../../assets/video/video2.mp4" /> | |||
| </div> | |||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||
| </li> | |||
| <div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | |||
| <div class="redCard" v-if="characters != 1"> | |||
| Seamless access to all platforms, tictok,intagram, facebook,wechat | |||
| etc. | |||
| </div> | |||
| <div class="pinkCard" v-if="characters == 1"> | |||
| IP版权归属明确 无后顾之忧 | |||
| </div> | |||
| <div class="pinkCard" v-if="characters != 1"> | |||
| No IP copyright concerns | |||
| </div> | |||
| <div class="blueCard" v-if="characters == 1"> | |||
| 出镜声形从此统一 打造沉淀企业IP | |||
| </div> | |||
| <div class="blueCard" v-if="characters != 1"> | |||
| Unified voice and appearance for digital IP of the precipitation | |||
| enterprise will be created。 | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="module_3"> | |||
| <div class="title" v-if="characters == 1">中之人驱动</div> | |||
| <div class="title" v-if="characters != 1">“中の人” driving</div> | |||
| <div class="title" v-if="characters == 1">脚本驱动数字人直播</div> | |||
| <div class="title" v-if="characters != 1"> | |||
| Script-driven digital human live broadcast | |||
| </div> | |||
| <img | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" | |||
| v-if="characters == 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" | |||
| alt="" | |||
| /> | |||
| <img | |||
| v-if="characters != 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png" | |||
| alt="" | |||
| /> | |||
| </div> | |||
| @@ -180,9 +176,9 @@ import { mapState, mapActions } from "vuex"; | |||
| export default { | |||
| data() { | |||
| return { | |||
| isPlayed: true, | |||
| //零时存放 | |||
| charactersMy: 1, | |||
| // | |||
| userName: "", | |||
| @@ -299,14 +295,6 @@ export default { | |||
| methods: { | |||
| ...mapActions(["setCharacters"]), | |||
| goSetVedio(flag) { | |||
| if (flag) { | |||
| this.$refs["videoII"].play(); | |||
| } else { | |||
| this.$refs["videoII"].pause(); | |||
| } | |||
| this.isPlayed = !flag; | |||
| }, | |||
| change(value) { | |||
| console.log(value); | |||
| this.setCharacters(value); | |||
| @@ -482,11 +470,10 @@ export default { | |||
| .titleBox { | |||
| width: 36%; | |||
| position: absolute; | |||
| top: 390px; | |||
| top: 240px; | |||
| left: 194px; | |||
| overflow: hidden; | |||
| // color: #323232; | |||
| color: #fff; | |||
| color: #fefefe; | |||
| .title_item1 { | |||
| margin-bottom: 14px; | |||
| font-size: 60px; | |||
| @@ -509,11 +496,9 @@ export default { | |||
| width: 220px; | |||
| text-align: center; | |||
| line-height: 60px; | |||
| color: #fff; | |||
| // color: #323232; | |||
| color: #fefefe; | |||
| border-radius: 40px; | |||
| border: #fff solid 3px; | |||
| // border: #323232 solid 3px; | |||
| border: #fefefe solid 3px; | |||
| font-size: 18px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| @@ -530,93 +515,124 @@ export default { | |||
| } | |||
| } | |||
| .module_2 { | |||
| height: 760px; | |||
| height: 810px; | |||
| background: #ffffff; | |||
| padding-top: 32px; | |||
| padding-left: 116px; | |||
| padding-right: 85px; | |||
| padding-left: 331px; | |||
| padding-right: 306px; | |||
| .title { | |||
| text-align: center; | |||
| margin-bottom: 72px; | |||
| margin-bottom: 52px; | |||
| font-size: 36px; | |||
| img { | |||
| position: relative; | |||
| top: 18px; | |||
| width: 59px; | |||
| height: 60px; | |||
| } | |||
| } | |||
| .images { | |||
| .imgBox { | |||
| display: flex; | |||
| position: relative; | |||
| justify-content: space-between; | |||
| text-align: center; | |||
| li { | |||
| list-style: none; | |||
| margin-right: 9px; | |||
| > img { | |||
| margin-right: 7px; | |||
| .textInImg { | |||
| position: absolute; | |||
| top: 20px; | |||
| left: 20px; | |||
| width: 10px; | |||
| font-size: 35px; | |||
| line-height: 35px; | |||
| color: #fff; | |||
| font-weight: 900; | |||
| transition: all 0.3s; | |||
| } | |||
| img { | |||
| width: 423px; | |||
| height: 540px; | |||
| height: 639px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548); | |||
| box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548); | |||
| transform: translateY(-20px); | |||
| } | |||
| &:hover ~ .textInImg { | |||
| transform: translateY(-20px); | |||
| } | |||
| } | |||
| img:hover .textInImg { | |||
| top: -5px; | |||
| } | |||
| } | |||
| } | |||
| .videoLi { | |||
| overflow: hidden; | |||
| .imgBox1 { | |||
| position: relative; | |||
| float: left; | |||
| width: 100%; | |||
| height: 100%; | |||
| .redCard { | |||
| position: absolute; | |||
| left: -111px; | |||
| bottom: 69px; | |||
| width: 230px; | |||
| // height: 50px; | |||
| font-size: 18px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| text-align: center; | |||
| color: #ffffff; | |||
| line-height: 46px; | |||
| border-radius: 4px; | |||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||
| background: #e7627b; | |||
| cursor: pointer; | |||
| .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 { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| &:hover { | |||
| .play { | |||
| transform: scale(1); | |||
| opacity: 1; | |||
| } | |||
| } | |||
| 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; | |||
| } | |||
| } | |||
| } | |||
| .module_3 { | |||
| height: 810px; | |||
| height: 700px; | |||
| background-color: #ebeef7; | |||
| padding-top: 33px; | |||
| text-align: center; | |||
| .title { | |||
| text-align: center; | |||
| font-size: 48px; | |||
| font-size: 36px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| color: #4d4d4d; | |||
| line-height: 36px; | |||
| margin-bottom: 44px; | |||
| margin-bottom: -25px; | |||
| } | |||
| img { | |||
| width: 1250px; | |||
| height: 665px; | |||
| width: 1446px; | |||
| height: 638px; | |||
| opacity: 0.85; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| @@ -1,34 +1,42 @@ | |||
| <template> | |||
| <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" | |||
| <video | |||
| ref="video" | |||
| src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | |||
| width="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="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> | |||
| <div class="desc" v-if="characters == 1"> | |||
| <div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||
| <div>能为您在各种场景下7*24工作</div> | |||
| <div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||
| <div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div> | |||
| </div> | |||
| <!-- 英文部分 --> | |||
| <div class="title_item1" v-if="characters != 1">MetaManeuver</div> | |||
| <div class="title_item1" v-if="characters != 1">MetaNeuver</div> | |||
| <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 class="desc" v-if="characters != 1"> | |||
| <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>Can work for you 7*24 in various scenarios</div> | |||
| </div> | |||
| <div class="title_btn" @click="showBox"> | |||
| @@ -39,87 +47,83 @@ | |||
| </div> | |||
| <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"> | |||
| 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 class="imgBox"> | |||
| <li style="position: relative"> | |||
| <div class="images"> | |||
| <li> | |||
| <img | |||
| 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="" | |||
| /> | |||
| <img | |||
| 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="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1">中の人</div> | |||
| </li> | |||
| <li style="position: relative"> | |||
| <li> | |||
| <img | |||
| 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/002@2x.png" | |||
| alt="" | |||
| /> | |||
| <img | |||
| 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/002_en.jpg" | |||
| alt="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1"> | |||
| Digital live streaming | |||
| </div> | |||
| </li> | |||
| <li style="position: relative"> | |||
| <li> | |||
| <img | |||
| v-if="characters == 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png" | |||
| alt="" | |||
| /> | |||
| <img | |||
| v-if="characters != 1" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png" | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg" | |||
| alt="" | |||
| /> | |||
| <div class="textInImg" v-if="characters != 1">Toonman live</div> | |||
| </li> | |||
| <div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | |||
| <div class="redCard" v-if="characters != 1"> | |||
| Seamless access to all platforms, tictok,intagram, facebook,wechat | |||
| etc. | |||
| </div> | |||
| <div class="pinkCard" v-if="characters == 1"> | |||
| IP版权归属明确 无后顾之忧 | |||
| </div> | |||
| <div class="pinkCard" v-if="characters != 1"> | |||
| No IP copyright concerns | |||
| </div> | |||
| <div class="blueCard" v-if="characters == 1"> | |||
| 出镜声形从此统一 打造沉淀企业IP | |||
| </div> | |||
| <div class="blueCard" v-if="characters != 1"> | |||
| Unified voice and appearance for digital IP of the precipitation | |||
| enterprise will be created。 | |||
| </div> | |||
| <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 ref="videoII" src="../../assets/video/video2.mp4" /> | |||
| </div> | |||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||
| </li> | |||
| </div> | |||
| </div> | |||
| <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> | |||
| <div class="title" v-if="characters == 1">中之人驱动</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_shadow/scriptDrive@2x.png" | |||
| alt="" | |||
| /> | |||
| <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="" | |||
| /> | |||
| </div> | |||
| @@ -176,9 +180,9 @@ import { mapState, mapActions } from "vuex"; | |||
| export default { | |||
| data() { | |||
| return { | |||
| isPlayed: true, | |||
| //零时存放 | |||
| charactersMy: 1, | |||
| // | |||
| userName: "", | |||
| @@ -295,6 +299,14 @@ export default { | |||
| methods: { | |||
| ...mapActions(["setCharacters"]), | |||
| goSetVedio(flag) { | |||
| if (flag) { | |||
| this.$refs["videoII"].play(); | |||
| } else { | |||
| this.$refs["videoII"].pause(); | |||
| } | |||
| this.isPlayed = !flag; | |||
| }, | |||
| change(value) { | |||
| console.log(value); | |||
| this.setCharacters(value); | |||
| @@ -470,10 +482,11 @@ export default { | |||
| .titleBox { | |||
| width: 36%; | |||
| position: absolute; | |||
| top: 240px; | |||
| top: 390px; | |||
| left: 194px; | |||
| overflow: hidden; | |||
| color: #fefefe; | |||
| // color: #323232; | |||
| color: #fff; | |||
| .title_item1 { | |||
| margin-bottom: 14px; | |||
| font-size: 60px; | |||
| @@ -496,9 +509,11 @@ export default { | |||
| width: 220px; | |||
| text-align: center; | |||
| line-height: 60px; | |||
| color: #fefefe; | |||
| color: #fff; | |||
| // color: #323232; | |||
| border-radius: 40px; | |||
| border: #fefefe solid 3px; | |||
| border: #fff solid 3px; | |||
| // border: #323232 solid 3px; | |||
| font-size: 18px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| @@ -515,124 +530,93 @@ export default { | |||
| } | |||
| } | |||
| .module_2 { | |||
| height: 810px; | |||
| height: 760px; | |||
| background: #ffffff; | |||
| padding-top: 32px; | |||
| padding-left: 331px; | |||
| padding-right: 306px; | |||
| padding-left: 116px; | |||
| padding-right: 85px; | |||
| .title { | |||
| text-align: center; | |||
| margin-bottom: 52px; | |||
| margin-bottom: 72px; | |||
| font-size: 36px; | |||
| img { | |||
| position: relative; | |||
| top: 18px; | |||
| width: 59px; | |||
| height: 60px; | |||
| } | |||
| } | |||
| .imgBox { | |||
| .images { | |||
| display: flex; | |||
| position: relative; | |||
| justify-content: space-between; | |||
| text-align: center; | |||
| li { | |||
| list-style: none; | |||
| margin-right: 7px; | |||
| .textInImg { | |||
| position: absolute; | |||
| top: 20px; | |||
| left: 20px; | |||
| width: 10px; | |||
| font-size: 35px; | |||
| line-height: 35px; | |||
| color: #fff; | |||
| font-weight: 900; | |||
| transition: all 0.3s; | |||
| } | |||
| img { | |||
| margin-right: 9px; | |||
| > img { | |||
| width: 423px; | |||
| height: 639px; | |||
| height: 540px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548); | |||
| transform: translateY(-20px); | |||
| } | |||
| &:hover ~ .textInImg { | |||
| box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548); | |||
| transform: translateY(-20px); | |||
| } | |||
| } | |||
| img:hover .textInImg { | |||
| top: -5px; | |||
| } | |||
| } | |||
| .redCard { | |||
| position: absolute; | |||
| left: -111px; | |||
| bottom: 69px; | |||
| width: 230px; | |||
| // height: 50px; | |||
| font-size: 18px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| text-align: center; | |||
| color: #ffffff; | |||
| line-height: 46px; | |||
| border-radius: 4px; | |||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||
| background: #e7627b; | |||
| 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; | |||
| } | |||
| .videoLi { | |||
| overflow: hidden; | |||
| .imgBox1 { | |||
| position: relative; | |||
| float: left; | |||
| width: 100%; | |||
| height: 100%; | |||
| 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 { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| &:hover { | |||
| .play { | |||
| transform: scale(1); | |||
| opacity: 1; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .module_3 { | |||
| height: 700px; | |||
| height: 810px; | |||
| background-color: #ebeef7; | |||
| padding-top: 33px; | |||
| text-align: center; | |||
| .title { | |||
| text-align: center; | |||
| font-size: 36px; | |||
| font-size: 48px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| color: #4d4d4d; | |||
| line-height: 36px; | |||
| margin-bottom: -25px; | |||
| margin-bottom: 44px; | |||
| } | |||
| img { | |||
| width: 1446px; | |||
| height: 638px; | |||
| width: 1250px; | |||
| height: 665px; | |||
| opacity: 0.85; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| @@ -36,9 +36,9 @@ const routes = [ | |||
| component: () => import("../components/views/turing"), | |||
| }, | |||
| { | |||
| path: '/MetaStream', | |||
| path: '/MetaStreaming', | |||
| name: 'live', | |||
| component: () => import("../components/views/shadow"), | |||
| component: () => import("../components/views/live"), | |||
| }, | |||
| { | |||
| path: '/MetaGene', | |||
| @@ -46,9 +46,9 @@ const routes = [ | |||
| component: () => import("../components/views/generate"), | |||
| }, | |||
| { | |||
| path: '/MetaManeuver', | |||
| path: '/MetaNeuver', | |||
| name: 'shadow', | |||
| component: () => import("../components/views/live"), | |||
| component: () => import("../components/views/shadow"), | |||
| }, | |||
| ] | |||