- 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
- 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
+
+
+ High naturalness and realism let your digital human completely cross
+ the uncanny valley
-
Can work for you 7*24 in various scenarios
-
真人无需出镜驱动数字人直播
+
+ 只需
+

+ 步完成一条数字人视频内容生成
+
- Digital live broadcasting manipulated by AI, text, voice, video etc.to
- free real people workforce on camera.
+ Just
+

+ step to complete the generation of digital human video content
-
-
+
+
- 中の人
-
+
-
- Digital live streaming
-
-
+
- Toonman live
-
无缝接入各主流平台
-
- Seamless access to all platforms, tictok,intagram, facebook,wechat
- etc.
-
-
- IP版权归属明确 无后顾之忧
-
-
- No IP copyright concerns
-
-
- 出镜声形从此统一 打造沉淀企业IP
-
-
- Unified voice and appearance for digital IP of the precipitation
- enterprise will be created。
-
+
+
+

+

+
+
+
+
-
脚本驱动数字人直播
-
- Script-driven digital human live broadcast
-
+
中之人驱动
+
“中の人” driving

-
@@ -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 {
diff --git a/src/router/index.js b/src/router/index.js
index 74fc5b5..2991b77 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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"),
},
]