Selaa lähdekoodia

upload

ctt_ywq
HolyKnightIX 2 vuotta sitten
vanhempi
commit
5dd7a35be3
4 muutettua tiedostoa jossa 284 lisäystä ja 284 poistoa
  1. +2
    -2
      src/components/common/top.vue
  2. +147
    -131
      src/components/views/live.vue
  3. +131
    -147
      src/components/views/shadow.vue
  4. +4
    -4
      src/router/index.js

+ 2
- 2
src/components/common/top.vue Näytä tiedosto

@@ -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">{{


+ 147
- 131
src/components/views/live.vue Näytä tiedosto

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


+ 131
- 147
src/components/views/shadow.vue Näytä tiedosto

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


+ 4
- 4
src/router/index.js Näytä tiedosto

@@ -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"),
},
]



Ladataan…
Peruuta
Tallenna