@@ -704,7 +704,7 @@ export default { | |||||
path: "", | path: "", | ||||
}, | }, | ||||
{ | { | ||||
url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner7_1.png", | |||||
url: "https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/parter7_1.png", | |||||
path: "", | path: "", | ||||
}, | }, | ||||
], | ], | ||||
@@ -1,11 +1,21 @@ | |||||
<template> | <template> | ||||
<div class="Box" id="top"> | <div class="Box" id="top"> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<video ref="video" src="../../assets/video/P1 横版_x264.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> | |||||
<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%" /> --> | <!-- <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> | |||||
<div class="title_item1_y" v-if="characters == 1"> | |||||
数字人内容生产从未如此高效便捷 | |||||
</div> | |||||
<div class="desc" v-if="characters == 1"> | <div class="desc" v-if="characters == 1"> | ||||
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | <div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | ||||
@@ -13,15 +23,24 @@ | |||||
</div> | </div> | ||||
<!-- 英文部分 --> | <!-- 英文部分 --> | ||||
<div class="title_item1" v-if="characters != 1">MetaStream</div> | <div class="title_item1" v-if="characters != 1">MetaStream</div> | ||||
<div class="title_item1_y" v-if="characters != 1">Digital human content production has never been so efficient and convenient</div> | |||||
<div class="title_item1_y" v-if="characters != 1"> | |||||
Digital human content production has never been so efficient and | |||||
convenient | |||||
</div> | |||||
<div class="desc" v-if="characters != 1"> | <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</div> | |||||
<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 | |||||
</div> | |||||
</div> | </div> | ||||
<div class="title_btn" @click="showBox"> | <div class="title_btn" @click="showBox"> | ||||
{{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="md1" id="md1"></div> | <div class="md1" id="md1"></div> | ||||
@@ -30,28 +49,69 @@ | |||||
<div class="module_2"> | <div class="module_2"> | ||||
<div class="title" v-if="characters == 1"> | <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" /> | |||||
<img | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" | |||||
/> | |||||
步完成一条数字人视频内容生成 | 步完成一条数字人视频内容生成 | ||||
</div> | </div> | ||||
<div class="title" v-if="characters != 1"> | <div class="title" v-if="characters != 1"> | ||||
Just | Just | ||||
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" /> | |||||
<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 | step to complete the generation of digital human video content | ||||
</div> | </div> | ||||
<div class="images"> | <div class="images"> | ||||
<li> | <li> | ||||
<img 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_live/001@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" | |||||
alt="" | |||||
/> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<img 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@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> | ||||
<li> | <li> | ||||
<img 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_live/003@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" | |||||
alt="" | |||||
/> | |||||
</li> | </li> | ||||
<li class="videoLi"> | <li class="videoLi"> | ||||
<div class="imgBox1" @click="goSetVedio(isPlayed)"> | <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" /> | |||||
<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" /> | <video ref="videoII" src="../../assets/video/video2.mp4" /> | ||||
</div> | </div> | ||||
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | ||||
@@ -62,34 +122,60 @@ | |||||
<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 src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" /> | |||||
<img | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.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-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
<el-dialog | |||||
:title=" | |||||
characters == 1 | |||||
? '留下您的信息,我们会尽快与您取得联系' | |||||
: 'Tell us about yourself, we ll be in touch right away.' | |||||
" | |||||
:visible.sync="dialogVisible" | |||||
width="34%" | |||||
> | |||||
<el-form | |||||
ref="form" | |||||
:rules="characters == 1 ? rules : rulesEnglish" | |||||
:model="form" | |||||
> | |||||
<el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||||
<el-input | |||||
v-model="form.name" | |||||
maxlength="10" | |||||
:placeholder="characters == 1 ? '姓名' : 'Name'" | |||||
></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||||
<el-input | |||||
v-model="form.phone" | |||||
:placeholder="characters == 1 ? '手机' : 'Phone'" | |||||
></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="width" prop="email"> | <el-form-item class="width" prop="email"> | ||||
<el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
<span slot="footer" class="dialog-footer"> | <span slot="footer" class="dialog-footer"> | ||||
<el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button> | |||||
<el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button> | |||||
<el-button @click="dialogVisible = false">{{ | |||||
characters == 1 ? "取 消" : "Cancel" | |||||
}}</el-button> | |||||
<el-button type="primary" @click="submit()">{{ | |||||
characters == 1 ? "提 交" : "Submit" | |||||
}}</el-button> | |||||
</span> | </span> | ||||
</el-dialog> | </el-dialog> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import 'swiper/dist/js/swiper'; | |||||
import 'swiper/dist/css/swiper.css'; | |||||
import Swiper from 'swiper'; | |||||
import { mapState, mapActions } from 'vuex'; | |||||
import "swiper/dist/js/swiper"; | |||||
import "swiper/dist/css/swiper.css"; | |||||
import Swiper from "swiper"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
@@ -99,14 +185,14 @@ export default { | |||||
charactersMy: 1, | charactersMy: 1, | ||||
// | // | ||||
userName: '', | |||||
phone: '', | |||||
email: '', | |||||
userName: "", | |||||
phone: "", | |||||
email: "", | |||||
form: { | form: { | ||||
name: '', | |||||
phone: '', | |||||
email: '' | |||||
name: "", | |||||
phone: "", | |||||
email: "", | |||||
}, | }, | ||||
rules: { | rules: { | ||||
@@ -115,16 +201,16 @@ export default { | |||||
required: true, | required: true, | ||||
min: 1, | min: 1, | ||||
max: 10, | max: 10, | ||||
message: '此项必填,内容最大10个字符!', | |||||
trigger: 'blur' | |||||
} | |||||
message: "此项必填,内容最大10个字符!", | |||||
trigger: "blur", | |||||
}, | |||||
], | ], | ||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: '请先输手机号', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "请先输手机号", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
@@ -132,18 +218,18 @@ export default { | |||||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
let phone = /^1[35789]\d{9}$/; | let phone = /^1[35789]\d{9}$/; | ||||
if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
callback('抱歉,请输入正确的手机号'); | |||||
callback("抱歉,请输入正确的手机号"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
}, | |||||
}, | |||||
], | ], | ||||
email: [ | email: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: '请输入邮箱!', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "请输入邮箱!", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
@@ -151,12 +237,12 @@ export default { | |||||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||||
if (value && !email.test(value)) { | if (value && !email.test(value)) { | ||||
callback('抱歉,请输入正确的邮箱'); | |||||
callback("抱歉,请输入正确的邮箱"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
] | |||||
}, | |||||
}, | |||||
], | |||||
}, | }, | ||||
rulesEnglish: { | rulesEnglish: { | ||||
name: [ | name: [ | ||||
@@ -164,60 +250,60 @@ export default { | |||||
required: true, | required: true, | ||||
min: 1, | min: 1, | ||||
max: 10, | max: 10, | ||||
message: 'This item is required !', | |||||
trigger: 'blur' | |||||
} | |||||
message: "This item is required !", | |||||
trigger: "blur", | |||||
}, | |||||
], | ], | ||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: 'Please enter your cell phone number', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "Please enter your cell phone number", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
var errors = []; | var errors = []; | ||||
let phone = /^1[35789]\d{9}$/; | let phone = /^1[35789]\d{9}$/; | ||||
if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
callback('Sorry, please enter the correct cell phone number'); | |||||
callback("Sorry, please enter the correct cell phone number"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
}, | |||||
}, | |||||
], | ], | ||||
email: [ | email: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: 'Please enter email!', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "Please enter email!", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
var errors = []; | var errors = []; | ||||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||||
if (value && !email.test(value)) { | if (value && !email.test(value)) { | ||||
callback('Sorry, please enter the correct email address'); | |||||
callback("Sorry, please enter the correct email address"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
] | |||||
}, | |||||
}, | |||||
], | |||||
}, | }, | ||||
// characters: 1, //1=》中文 2=》英文 | // characters: 1, //1=》中文 2=》英文 | ||||
timeFlag: 5, | timeFlag: 5, | ||||
dialogVisible: false | |||||
dialogVisible: false, | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
...mapActions(['setCharacters']), | |||||
...mapActions(["setCharacters"]), | |||||
goSetVedio(flag) { | goSetVedio(flag) { | ||||
if (flag) { | if (flag) { | ||||
this.$refs['videoII'].play(); | |||||
this.$refs["videoII"].play(); | |||||
} else { | } else { | ||||
this.$refs['videoII'].pause(); | |||||
this.$refs["videoII"].pause(); | |||||
} | } | ||||
this.isPlayed = !flag; | this.isPlayed = !flag; | ||||
}, | }, | ||||
@@ -230,10 +316,10 @@ export default { | |||||
this.dialogVisible = true; | this.dialogVisible = true; | ||||
}, | }, | ||||
goView(id) { | goView(id) { | ||||
document.querySelector('#' + id).scrollIntoView({ | |||||
behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
document.querySelector("#" + id).scrollIntoView({ | |||||
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
}); | }); | ||||
// console.log(document.querySelector(id),); | // console.log(document.querySelector(id),); | ||||
}, | }, | ||||
@@ -241,46 +327,48 @@ export default { | |||||
this.$router.push(`/${path}`); | this.$router.push(`/${path}`); | ||||
}, | }, | ||||
submit() { | submit() { | ||||
this.$refs.form.validate(valid => { | |||||
this.$refs.form.validate((valid) => { | |||||
console.log(valid); | console.log(valid); | ||||
if (valid) { | if (valid) { | ||||
let params = { | let params = { | ||||
mallName: this.form.email, //邮箱 | mallName: this.form.email, //邮箱 | ||||
applicant: this.form.name, //姓名 | applicant: this.form.name, //姓名 | ||||
phone: this.form.phone //电话 | |||||
phone: this.form.phone, //电话 | |||||
}; | }; | ||||
this.$axios({ | this.$axios({ | ||||
method: 'post', | |||||
url: '/C/api/wxMallApply/add', | |||||
method: "post", | |||||
url: "/C/api/wxMallApply/add", | |||||
headers: { | headers: { | ||||
'Content-Type': 'application/json;charset=UTF-8' | |||||
"Content-Type": "application/json;charset=UTF-8", | |||||
}, | }, | ||||
data: params | |||||
data: params, | |||||
}) | }) | ||||
.then(res => { | |||||
this.form.email = ''; | |||||
this.form.name = ''; | |||||
this.form.phone = ''; | |||||
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||||
.then((res) => { | |||||
this.form.email = ""; | |||||
this.form.name = ""; | |||||
this.form.phone = ""; | |||||
this.$message.success( | |||||
this.characters == 1 ? "提交成功" : "submit successfully" | |||||
); | |||||
this.dialogVisible = false; | this.dialogVisible = false; | ||||
}) | }) | ||||
.catch(err => { | |||||
.catch((err) => { | |||||
this.$message.error(err.message); | this.$message.error(err.message); | ||||
}); | }); | ||||
} | } | ||||
}); | }); | ||||
} | |||||
}, | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: state => state.publicObj.characters | |||||
}) | |||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
// console.log(); | // console.log(); | ||||
// this.$refs["vidoe"].play(); | // this.$refs["vidoe"].play(); | ||||
new Swiper('.swiper-container', { | |||||
new Swiper(".swiper-container", { | |||||
slidesPerView: 3, | slidesPerView: 3, | ||||
spaceBetween: 30, | spaceBetween: 30, | ||||
centeredSlides: true, | centeredSlides: true, | ||||
@@ -288,27 +376,27 @@ export default { | |||||
// 如果需要分页器 | // 如果需要分页器 | ||||
pagination: { | pagination: { | ||||
el: '.swiper-pagination', | |||||
clickable: true // 分页器可以点击 | |||||
el: ".swiper-pagination", | |||||
clickable: true, // 分页器可以点击 | |||||
}, | }, | ||||
// 如果需要前进后退按钮 | // 如果需要前进后退按钮 | ||||
navigation: { | navigation: { | ||||
nextEl: '.swiper-button-next', | |||||
prevEl: '.swiper-button-prev' | |||||
nextEl: ".swiper-button-next", | |||||
prevEl: ".swiper-button-prev", | |||||
}, | }, | ||||
// 如果需要滚动条 | // 如果需要滚动条 | ||||
scrollbar: { | scrollbar: { | ||||
el: '.swiper-scrollbar' | |||||
} | |||||
el: ".swiper-scrollbar", | |||||
}, | |||||
}); | }); | ||||
}, | }, | ||||
created() { | created() { | ||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
this.goView('top'); | |||||
this.goView("top"); | |||||
}); | }); | ||||
} | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -1,10 +1,16 @@ | |||||
<template> | <template> | ||||
<div class="Box" id="top"> | <div class="Box" id="top"> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" width="100%" height="100%" /> | |||||
<img | |||||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@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> | |||||
<div class="title_item1_y" v-if="characters == 1"> | |||||
直播虚拟人自然逼真,分身真假难辨 | |||||
</div> | |||||
<div class="desc" v-if="characters == 1"> | <div class="desc" v-if="characters == 1"> | ||||
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | <div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | ||||
@@ -12,15 +18,21 @@ | |||||
</div> | </div> | ||||
<!-- 英文部分 --> | <!-- 英文部分 --> | ||||
<div class="title_item1" v-if="characters != 1">MetaManeuver</div> | <div class="title_item1" v-if="characters != 1">MetaManeuver</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.</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. | |||||
</div> | |||||
<div class="desc" v-if="characters != 1"> | <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</div> | |||||
<div> | |||||
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>Can work for you 7*24 in various scenarios</div> | ||||
</div> | </div> | ||||
<div class="title_btn" @click="showBox"> | <div class="title_btn" @click="showBox"> | ||||
{{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="md1" id="md1"></div> | <div class="md1" id="md1"></div> | ||||
@@ -28,63 +40,138 @@ | |||||
<div class="module_2"> | <div class="module_2"> | ||||
<div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div> | <div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</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.</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. | |||||
</div> | |||||
<div class="imgBox"> | <div class="imgBox"> | ||||
<li style="position: relative"> | <li style="position: relative"> | ||||
<img v-if="characters == 1" 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_shadow/imgList1@2xEnglish.png" alt="" /> | |||||
<img | |||||
v-if="characters == 1" | |||||
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_shadow/imgList1@2xEnglish.png" | |||||
alt="" | |||||
/> | |||||
<div class="textInImg" v-if="characters != 1">中の人</div> | <div class="textInImg" v-if="characters != 1">中の人</div> | ||||
</li> | </li> | ||||
<li style="position: relative"> | <li style="position: relative"> | ||||
<img v-if="characters == 1" 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_shadow/imgList2@2xEnglish.png" alt="" /> | |||||
<div class="textInImg" v-if="characters != 1">Digital live streaming</div> | |||||
<img | |||||
v-if="characters == 1" | |||||
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_shadow/imgList2@2xEnglish.png" | |||||
alt="" | |||||
/> | |||||
<div class="textInImg" v-if="characters != 1"> | |||||
Digital live streaming | |||||
</div> | |||||
</li> | </li> | ||||
<li style="position: relative"> | <li style="position: relative"> | ||||
<img v-if="characters == 1" 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_shadow/imgList3@2xEnglish.png" alt="" /> | |||||
<img | |||||
v-if="characters == 1" | |||||
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_shadow/imgList3@2xEnglish.png" | |||||
alt="" | |||||
/> | |||||
<div class="textInImg" v-if="characters != 1">Toonman live</div> | <div class="textInImg" v-if="characters != 1">Toonman live</div> | ||||
</li> | </li> | ||||
<div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | <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 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> | </div> | ||||
<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">Script-driven digital human live broadcast</div> | |||||
<img 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"> | |||||
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="" | |||||
/> | |||||
<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> | </div> | ||||
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | |||||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
<el-dialog | |||||
:title=" | |||||
characters == 1 | |||||
? '留下您的信息,我们会尽快与您取得联系' | |||||
: 'Tell us about yourself, we ll be in touch right away.' | |||||
" | |||||
:visible.sync="dialogVisible" | |||||
width="34%" | |||||
> | |||||
<el-form | |||||
ref="form" | |||||
:rules="characters == 1 ? rules : rulesEnglish" | |||||
:model="form" | |||||
> | |||||
<el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||||
<el-input | |||||
v-model="form.name" | |||||
maxlength="10" | |||||
:placeholder="characters == 1 ? '姓名' : 'Name'" | |||||
></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||||
<el-input | |||||
v-model="form.phone" | |||||
:placeholder="characters == 1 ? '手机' : 'Phone'" | |||||
></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="width" prop="email"> | <el-form-item class="width" prop="email"> | ||||
<el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
<span slot="footer" class="dialog-footer"> | <span slot="footer" class="dialog-footer"> | ||||
<el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button> | |||||
<el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button> | |||||
<el-button @click="dialogVisible = false">{{ | |||||
characters == 1 ? "取 消" : "Cancel" | |||||
}}</el-button> | |||||
<el-button type="primary" @click="submit()">{{ | |||||
characters == 1 ? "提 交" : "Submit" | |||||
}}</el-button> | |||||
</span> | </span> | ||||
</el-dialog> | </el-dialog> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import 'swiper/dist/js/swiper'; | |||||
import 'swiper/dist/css/swiper.css'; | |||||
import Swiper from 'swiper'; | |||||
import { mapState, mapActions } from 'vuex'; | |||||
import "swiper/dist/js/swiper"; | |||||
import "swiper/dist/css/swiper.css"; | |||||
import Swiper from "swiper"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
@@ -94,14 +181,14 @@ export default { | |||||
// | // | ||||
userName: '', | |||||
phone: '', | |||||
email: '', | |||||
userName: "", | |||||
phone: "", | |||||
email: "", | |||||
form: { | form: { | ||||
name: '', | |||||
phone: '', | |||||
email: '' | |||||
name: "", | |||||
phone: "", | |||||
email: "", | |||||
}, | }, | ||||
rules: { | rules: { | ||||
@@ -110,16 +197,16 @@ export default { | |||||
required: true, | required: true, | ||||
min: 1, | min: 1, | ||||
max: 10, | max: 10, | ||||
message: '此项必填,内容最大10个字符!', | |||||
trigger: 'blur' | |||||
} | |||||
message: "此项必填,内容最大10个字符!", | |||||
trigger: "blur", | |||||
}, | |||||
], | ], | ||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: '请先输手机号', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "请先输手机号", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
@@ -127,18 +214,18 @@ export default { | |||||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
let phone = /^1[35789]\d{9}$/; | let phone = /^1[35789]\d{9}$/; | ||||
if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
callback('抱歉,请输入正确的手机号'); | |||||
callback("抱歉,请输入正确的手机号"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
}, | |||||
}, | |||||
], | ], | ||||
email: [ | email: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: '请输入邮箱!', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "请输入邮箱!", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
@@ -146,12 +233,12 @@ export default { | |||||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||||
if (value && !email.test(value)) { | if (value && !email.test(value)) { | ||||
callback('抱歉,请输入正确的邮箱'); | |||||
callback("抱歉,请输入正确的邮箱"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
] | |||||
}, | |||||
}, | |||||
], | |||||
}, | }, | ||||
rulesEnglish: { | rulesEnglish: { | ||||
name: [ | name: [ | ||||
@@ -159,54 +246,54 @@ export default { | |||||
required: true, | required: true, | ||||
min: 1, | min: 1, | ||||
max: 10, | max: 10, | ||||
message: 'This item is required !', | |||||
trigger: 'blur' | |||||
} | |||||
message: "This item is required !", | |||||
trigger: "blur", | |||||
}, | |||||
], | ], | ||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: 'Please enter your cell phone number', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "Please enter your cell phone number", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
var errors = []; | var errors = []; | ||||
let phone = /^1[35789]\d{9}$/; | let phone = /^1[35789]\d{9}$/; | ||||
if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
callback('Sorry, please enter the correct cell phone number'); | |||||
callback("Sorry, please enter the correct cell phone number"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
}, | |||||
}, | |||||
], | ], | ||||
email: [ | email: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: 'change', | |||||
message: 'Please enter email!', | |||||
trigger: 'blur' | |||||
trigger: "change", | |||||
message: "Please enter email!", | |||||
trigger: "blur", | |||||
}, | }, | ||||
{ | { | ||||
validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
var errors = []; | var errors = []; | ||||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||||
if (value && !email.test(value)) { | if (value && !email.test(value)) { | ||||
callback('Sorry, please enter the correct email address'); | |||||
callback("Sorry, please enter the correct email address"); | |||||
} | } | ||||
callback(errors); | callback(errors); | ||||
} | |||||
} | |||||
] | |||||
}, | |||||
}, | |||||
], | |||||
}, | }, | ||||
// characters: 1, //1=》中文 2=》英文 | // characters: 1, //1=》中文 2=》英文 | ||||
timeFlag: 5, | timeFlag: 5, | ||||
dialogVisible: false | |||||
dialogVisible: false, | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
...mapActions(['setCharacters']), | |||||
...mapActions(["setCharacters"]), | |||||
change(value) { | change(value) { | ||||
console.log(value); | console.log(value); | ||||
@@ -217,10 +304,10 @@ export default { | |||||
this.dialogVisible = true; | this.dialogVisible = true; | ||||
}, | }, | ||||
goView(id) { | goView(id) { | ||||
document.querySelector('#' + id).scrollIntoView({ | |||||
behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
document.querySelector("#" + id).scrollIntoView({ | |||||
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
}); | }); | ||||
// console.log(document.querySelector(id),); | // console.log(document.querySelector(id),); | ||||
}, | }, | ||||
@@ -228,46 +315,48 @@ export default { | |||||
this.$router.push(`/${path}`); | this.$router.push(`/${path}`); | ||||
}, | }, | ||||
submit() { | submit() { | ||||
this.$refs.form.validate(valid => { | |||||
this.$refs.form.validate((valid) => { | |||||
console.log(valid); | console.log(valid); | ||||
if (valid) { | if (valid) { | ||||
let params = { | let params = { | ||||
mallName: this.form.email, //邮箱 | mallName: this.form.email, //邮箱 | ||||
applicant: this.form.name, //姓名 | applicant: this.form.name, //姓名 | ||||
phone: this.form.phone //电话 | |||||
phone: this.form.phone, //电话 | |||||
}; | }; | ||||
this.$axios({ | this.$axios({ | ||||
method: 'post', | |||||
url: '/C/api/wxMallApply/add', | |||||
method: "post", | |||||
url: "/C/api/wxMallApply/add", | |||||
headers: { | headers: { | ||||
'Content-Type': 'application/json;charset=UTF-8' | |||||
"Content-Type": "application/json;charset=UTF-8", | |||||
}, | }, | ||||
data: params | |||||
data: params, | |||||
}) | }) | ||||
.then(res => { | |||||
this.form.email = ''; | |||||
this.form.name = ''; | |||||
this.form.phone = ''; | |||||
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||||
.then((res) => { | |||||
this.form.email = ""; | |||||
this.form.name = ""; | |||||
this.form.phone = ""; | |||||
this.$message.success( | |||||
this.characters == 1 ? "提交成功" : "submit successfully" | |||||
); | |||||
this.dialogVisible = false; | this.dialogVisible = false; | ||||
}) | }) | ||||
.catch(err => { | |||||
.catch((err) => { | |||||
this.$message.error(err.message); | this.$message.error(err.message); | ||||
}); | }); | ||||
} | } | ||||
}); | }); | ||||
} | |||||
}, | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: state => state.publicObj.characters | |||||
}) | |||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
// console.log(); | // console.log(); | ||||
// this.$refs["vidoe"].play(); | // this.$refs["vidoe"].play(); | ||||
new Swiper('.swiper-container', { | |||||
new Swiper(".swiper-container", { | |||||
slidesPerView: 3, | slidesPerView: 3, | ||||
spaceBetween: 30, | spaceBetween: 30, | ||||
centeredSlides: true, | centeredSlides: true, | ||||
@@ -275,27 +364,27 @@ export default { | |||||
// 如果需要分页器 | // 如果需要分页器 | ||||
pagination: { | pagination: { | ||||
el: '.swiper-pagination', | |||||
clickable: true // 分页器可以点击 | |||||
el: ".swiper-pagination", | |||||
clickable: true, // 分页器可以点击 | |||||
}, | }, | ||||
// 如果需要前进后退按钮 | // 如果需要前进后退按钮 | ||||
navigation: { | navigation: { | ||||
nextEl: '.swiper-button-next', | |||||
prevEl: '.swiper-button-prev' | |||||
nextEl: ".swiper-button-next", | |||||
prevEl: ".swiper-button-prev", | |||||
}, | }, | ||||
// 如果需要滚动条 | // 如果需要滚动条 | ||||
scrollbar: { | scrollbar: { | ||||
el: '.swiper-scrollbar' | |||||
} | |||||
el: ".swiper-scrollbar", | |||||
}, | |||||
}); | }); | ||||
}, | }, | ||||
created() { | created() { | ||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
this.goView('top'); | |||||
this.goView("top"); | |||||
}); | }); | ||||
} | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||