@@ -7,10 +7,11 @@ | |||
/> | |||
</div> | |||
<div class="tiemBox"> | |||
<div class="tiemBox" id="tiemBox"> | |||
<div class="taolIconBox"> | |||
<div class="taolIconText"> | |||
{{ characters == 1 ? "关注我们" : "follow Us" }} | |||
<!-- {{ characters == 1 ? "关注我们" : "follow Us" }} --> | |||
{{ characters == 1 ? "" : "" }} | |||
</div> | |||
<div class="iconBox"> | |||
<img | |||
@@ -32,8 +33,8 @@ | |||
</div> | |||
</div> | |||
<div class="contentBox"> | |||
<div class="taolIconText"> | |||
<div class="contentBox" 啊实打实> | |||
<div class="taolIconText" style="margin-top: 0px"> | |||
{{ characters == 1 ? "联系我们" : "Contact us" }} | |||
</div> | |||
<!-- <div class="contentInput"> | |||
@@ -121,6 +122,7 @@ | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from "vuex"; | |||
export default { | |||
@@ -337,7 +339,7 @@ export default { | |||
float: left; | |||
} | |||
.taolIconText { | |||
margin-top: -20px; | |||
margin-top: 20px; | |||
font-size: 14px; | |||
font-family: Inter; | |||
font-weight: 400; | |||
@@ -45,6 +45,9 @@ | |||
<div class="categoryitem" @click="goView('aboutUs')"> | |||
{{ characters == 1 ? "关于我们" : "About us" }} | |||
</div> | |||
<div class="categoryitem" @click="goView('tiemBox')"> | |||
{{ characters == 1 ? "联系我们" : "Contact us" }} | |||
</div> | |||
</div> | |||
<div class="cutBox"> | |||
<!-- <img src="@/assets/img/earth.png" alt="" /> --> | |||
@@ -88,20 +91,7 @@ export default { | |||
charactersMy: 1, | |||
}; | |||
}, | |||
watch: { | |||
// languageLsit(newVal) { | |||
// this.setCharacters([ | |||
// { | |||
// name: "Cn", | |||
// value: 1 | |||
// }, | |||
// { | |||
// name: "En", | |||
// value: 2 | |||
// } | |||
// ]); | |||
// } | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
@@ -117,7 +107,7 @@ export default { | |||
this.$router.push(`/${path}`); | |||
}, | |||
goView(id) { | |||
if (id == "Technology" || id == "Solutions") { | |||
if (id == "Technology" || id == "Solutions" || id == "aboutUs") { | |||
this.$router.push(`/`); | |||
setTimeout(() => { | |||
document.querySelector("#" + id).scrollIntoView({ | |||
@@ -154,6 +144,29 @@ export default { | |||
}, | |||
created() { | |||
this.handleScrollTop(); | |||
// this.charactersMy = this.$store.state.publicObj.characters; | |||
// console.log(); | |||
// console.log(this.charactersMy); | |||
}, | |||
watch: { | |||
"$store.state.publicObj.characters": { | |||
handler(newVal) { | |||
console.log(newVal, "vuex"); | |||
this.charactersMy = newVal; | |||
}, | |||
}, | |||
// languageLsit(newVal) { | |||
// this.setCharacters([ | |||
// { | |||
// name: "Cn", | |||
// value: 1 | |||
// }, | |||
// { | |||
// name: "En", | |||
// value: 2 | |||
// } | |||
// ]); | |||
// } | |||
}, | |||
}; | |||
</script> | |||
@@ -42,7 +42,11 @@ | |||
freely | |||
</div> | |||
<div class="title_btn" @click="showBox"> | |||
<div | |||
class="title_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
@@ -162,13 +166,27 @@ | |||
</div> | |||
</div> | |||
<div class="module_4" id="module_4"> | |||
<div class="btnBox1"> | |||
<div class="btnText" @click="showBox"> | |||
<div | |||
class="btnBox1" | |||
:style="$store.state.publicObj.showTryItNow ? '' : 'height: 40px'" | |||
> | |||
<div | |||
class="btnText" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
<div class="btnBox2"> | |||
<div class="btnText" @click="showBox"> | |||
<div | |||
class="btnBox2" | |||
:style="$store.state.publicObj.showTryItNow ? '' : 'height: 40px'" | |||
> | |||
<div | |||
class="btnText" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
@@ -225,7 +243,11 @@ | |||
}} | |||
</div> | |||
</div> | |||
<div class="bnt_look" @click="showBox"> | |||
<div | |||
class="bnt_look" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
@@ -274,7 +296,11 @@ | |||
}} | |||
</div> | |||
<div class="read_btn" @click="showBox"> | |||
<div | |||
class="read_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "了解详情" : "Read more" }} | |||
</div> | |||
</div> | |||
@@ -920,18 +946,22 @@ export default { | |||
// 浏览器为IE的情况 | |||
if (Browser_Agent.indexOf(" MSIE ") != -1) { | |||
const a = navigator.browserLanguage; | |||
if (a != "zh-cn") { | |||
// 英文网站 | |||
console.log("英文网站"); | |||
if (a == "zh-cn") { | |||
// 中文网站 | |||
console.log("中文网站"); | |||
this.setCharacters(1); | |||
} else { | |||
this.setCharacters(2); | |||
} | |||
} | |||
// 浏览器非IE的情况 | |||
else { | |||
const b = navigator.language; | |||
if (b != "zh-CN") { | |||
// 英文网站 | |||
console.log("英文网站"); | |||
if (b == "zh-CN") { | |||
// 中文网站 | |||
console.log("中文网站"); | |||
this.setCharacters(1); | |||
} else { | |||
this.setCharacters(2); | |||
} | |||
} | |||
@@ -1,6 +1,10 @@ | |||
<template> | |||
<div class="Box" id="top"> | |||
<div class="module_1" style="position: relative; background-color: #000; height: 800px" @click="goSetVedio(isPlayed)"> | |||
<div | |||
class="module_1" | |||
style="position: relative; background-color: #000; height: 800px" | |||
@click="goSetVedio(isPlayed)" | |||
> | |||
<video | |||
style="position: absolute; right: 250px" | |||
ref="videoPlayer" | |||
@@ -10,32 +14,47 @@ | |||
autoplay | |||
muted | |||
controls | |||
loop="loop" /> | |||
loop="loop" | |||
/> | |||
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> --> | |||
<div class="titleBox"> | |||
<div class="title_item1" v-if="characters == 1">邃芒慧生</div> | |||
<div class="title_item1_y" v-if="characters == 1">AI全自动生成,高逼真自然度数字人</div> | |||
<div class="title_item1_y" v-if="characters == 1"> | |||
AI全自动生成,高逼真自然度数字人 | |||
</div> | |||
<div class="desc" v-if="characters == 1"> | |||
<div>满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象</div> | |||
<div> | |||
满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象 | |||
</div> | |||
<div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div> | |||
</div> | |||
<!-- 英文部分 --> | |||
<div class="title_item1" v-if="characters != 1">MetaGene</div> | |||
<div class="title_item1_y" v-if="characters != 1">AI platform generates high-fidelity, natural digital humans automatically by using labels and prompts.</div> | |||
<div class="title_item1_y" v-if="characters != 1"> | |||
AI platform generates high-fidelity, natural digital humans | |||
automatically by using labels and prompts. | |||
</div> | |||
<div class="desc" v-if="characters != 1"> | |||
<!-- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div> | |||
<div>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div> --> | |||
<div> | |||
Meets the demands of digital avatars, virtual creation, and original painting reproduction. With MetaGene, you can effortlessly create exclusive virtual IPs from scratch, eliminating | |||
concerns about IP copyright. In just minutes, you can finalize the IP image, ensuring a unique and original creation. | |||
Meets the demands of digital avatars, virtual creation, and original | |||
painting reproduction. With MetaGene, you can effortlessly create | |||
exclusive virtual IPs from scratch, eliminating concerns about IP | |||
copyright. In just minutes, you can finalize the IP image, ensuring | |||
a unique and original creation. | |||
</div> | |||
</div> | |||
<div class="title_btn" @click="showBox"> | |||
{{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||
<div | |||
class="title_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
<div class="md1" id="md1"></div> | |||
@@ -43,53 +62,93 @@ | |||
<div class="module_2"> | |||
<div class="title">Metavatar AI</div> | |||
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png" alt="" /> | |||
<img | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png" | |||
alt="" | |||
/> | |||
</div> | |||
<div class="module_3"> | |||
<div class="title" v-if="characters == 1">保持人脸特征 自由调整各类心仪风格</div> | |||
<div class="title" v-if="characters != 1">Maintain facial features and freely adjust various favorite styles</div> | |||
<div class="title" v-if="characters == 1"> | |||
保持人脸特征 自由调整各类心仪风格 | |||
</div> | |||
<div class="title" v-if="characters != 1"> | |||
Maintain facial features and freely adjust various favorite styles | |||
</div> | |||
<div class="style">STYLE</div> | |||
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png" alt="" /> | |||
<img | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png" | |||
alt="" | |||
/> | |||
</div> | |||
<div class="module_4"> | |||
<div class="imgBox"> | |||
<div class="textInsideBox"> | |||
<div class="title" v-if="characters == 1">丰富的状态编辑 完整的IP形象展示</div> | |||
<div class="title" v-if="characters != 1">Rich status editing, complete IP image display</div> | |||
<div class="title" v-if="characters == 1"> | |||
丰富的状态编辑 完整的IP形象展示 | |||
</div> | |||
<div class="title" v-if="characters != 1"> | |||
Rich status editing, complete IP image display | |||
</div> | |||
<div class="style">FULL AGE</div> | |||
</div> | |||
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@2x.png" alt="" /> | |||
<img | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@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-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 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 class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<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> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<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 { | |||
data() { | |||
@@ -97,14 +156,14 @@ export default { | |||
//零时存放 | |||
charactersMy: 1, | |||
// | |||
userName: '', | |||
phone: '', | |||
email: '', | |||
userName: "", | |||
phone: "", | |||
email: "", | |||
form: { | |||
name: '', | |||
phone: '', | |||
email: '' | |||
name: "", | |||
phone: "", | |||
email: "", | |||
}, | |||
rules: { | |||
@@ -113,16 +172,16 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: '此项必填,内容最大10个字符!', | |||
trigger: 'blur' | |||
} | |||
message: "此项必填,内容最大10个字符!", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请先输手机号", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -130,18 +189,18 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号'); | |||
callback("抱歉,请输入正确的手机号"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请输入邮箱!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -149,12 +208,12 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
callback("抱歉,请输入正确的邮箱"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
@@ -162,54 +221,54 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
message: "This item is required !", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
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) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
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); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "Please enter email!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
callback("Sorry, please enter the correct email address"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
// characters: 1, //1=》中文 2=》英文 | |||
timeFlag: 5, | |||
dialogVisible: false | |||
dialogVisible: false, | |||
}; | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
...mapActions(["setCharacters"]), | |||
change(value) { | |||
console.log(value); | |||
@@ -218,9 +277,9 @@ export default { | |||
goSetVedio(flag) { | |||
if (flag) { | |||
this.$refs['videoII'].play(); | |||
this.$refs["videoII"].play(); | |||
} else { | |||
this.$refs['videoII'].pause(); | |||
this.$refs["videoII"].pause(); | |||
} | |||
this.isPlayed = !flag; | |||
}, | |||
@@ -229,10 +288,10 @@ export default { | |||
this.dialogVisible = true; | |||
}, | |||
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),); | |||
}, | |||
@@ -240,46 +299,48 @@ export default { | |||
this.$router.push(`/${path}`); | |||
}, | |||
submit() { | |||
this.$refs.form.validate(valid => { | |||
this.$refs.form.validate((valid) => { | |||
console.log(valid); | |||
if (valid) { | |||
let params = { | |||
mallName: this.form.email, //邮箱 | |||
applicant: this.form.name, //姓名 | |||
phone: this.form.phone //电话 | |||
phone: this.form.phone, //电话 | |||
}; | |||
this.$axios({ | |||
method: 'post', | |||
url: '/C/api/wxMallApply/add', | |||
method: "post", | |||
url: "/C/api/wxMallApply/add", | |||
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; | |||
}) | |||
.catch(err => { | |||
.catch((err) => { | |||
this.$message.error(err.message); | |||
}); | |||
} | |||
}); | |||
} | |||
}, | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
mounted() { | |||
// console.log(); | |||
// this.$refs["vidoe"].play(); | |||
new Swiper('.swiper-container', { | |||
new Swiper(".swiper-container", { | |||
slidesPerView: 3, | |||
spaceBetween: 30, | |||
centeredSlides: true, | |||
@@ -287,29 +348,29 @@ export default { | |||
// 如果需要分页器 | |||
pagination: { | |||
el: '.swiper-pagination', | |||
clickable: true // 分页器可以点击 | |||
el: ".swiper-pagination", | |||
clickable: true, // 分页器可以点击 | |||
}, | |||
// 如果需要前进后退按钮 | |||
navigation: { | |||
nextEl: '.swiper-button-next', | |||
prevEl: '.swiper-button-prev' | |||
nextEl: ".swiper-button-next", | |||
prevEl: ".swiper-button-prev", | |||
}, | |||
// 如果需要滚动条 | |||
scrollbar: { | |||
el: '.swiper-scrollbar' | |||
} | |||
el: ".swiper-scrollbar", | |||
}, | |||
}); | |||
}, | |||
created() { | |||
this.$nextTick(() => { | |||
this.goView('top'); | |||
this.goView("top"); | |||
this.$refs.videoPlayer.muted = false; | |||
this.$refs.videoPlayer.play(); | |||
}); | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -1,10 +1,16 @@ | |||
<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" 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="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>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||
@@ -12,19 +18,28 @@ | |||
</div> | |||
<!-- 英文部分 --> | |||
<div class="title_item1" v-if="characters != 1">MetaStreaming</div> | |||
<div class="title_item1_y" v-if="characters != 1">MetaStreaming Virtual Person for live broadcasts is incredibly realistic, blurring the line between virtual and real.</div> | |||
<div class="title_item1_y" v-if="characters != 1"> | |||
MetaStreaming Virtual Person for live broadcasts is incredibly | |||
realistic, blurring the line between virtual and real. | |||
</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</div> | |||
<div>Can work for you 7*24 in various scenarios</div> --> | |||
<div> | |||
Virtual live broadcasting solves real-world challenges like production capacity and IP ownership by utilizing virtual digital humans. These virtual counterparts work 24/7 across various | |||
Virtual live broadcasting solves real-world challenges like | |||
production capacity and IP ownership by utilizing virtual digital | |||
humans. These virtual counterparts work 24/7 across various | |||
scenarios. | |||
</div> | |||
</div> | |||
<div class="title_btn" @click="showBox"> | |||
{{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||
<div | |||
class="title_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
<div class="md1" id="md1"></div> | |||
@@ -33,64 +48,138 @@ | |||
<div class="module_2"> | |||
<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">AI-powered digital live broadcasting frees real people from on-camera work by utilizing text, voice, and video.</div> | |||
<div class="title" v-if="characters != 1"> | |||
AI-powered digital live broadcasting frees real people from on-camera | |||
work by utilizing text, voice, and video. | |||
</div> | |||
<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_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> | |||
</li> | |||
<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">Virtual human frees real person</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"> | |||
Virtual human frees real person | |||
</div> | |||
</li> | |||
<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">Cartoon character</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> | |||
<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">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 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> | |||
<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-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 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 class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<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> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<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 { | |||
data() { | |||
@@ -100,14 +189,14 @@ export default { | |||
// | |||
userName: '', | |||
phone: '', | |||
email: '', | |||
userName: "", | |||
phone: "", | |||
email: "", | |||
form: { | |||
name: '', | |||
phone: '', | |||
email: '' | |||
name: "", | |||
phone: "", | |||
email: "", | |||
}, | |||
rules: { | |||
@@ -116,16 +205,16 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: '此项必填,内容最大10个字符!', | |||
trigger: 'blur' | |||
} | |||
message: "此项必填,内容最大10个字符!", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请先输手机号", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -133,18 +222,18 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号'); | |||
callback("抱歉,请输入正确的手机号"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请输入邮箱!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -152,12 +241,12 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
callback("抱歉,请输入正确的邮箱"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
@@ -165,54 +254,54 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
message: "This item is required !", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
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) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
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); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "Please enter email!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
callback("Sorry, please enter the correct email address"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
// characters: 1, //1=》中文 2=》英文 | |||
timeFlag: 5, | |||
dialogVisible: false | |||
dialogVisible: false, | |||
}; | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
...mapActions(["setCharacters"]), | |||
change(value) { | |||
console.log(value); | |||
@@ -223,10 +312,10 @@ export default { | |||
this.dialogVisible = true; | |||
}, | |||
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),); | |||
}, | |||
@@ -234,46 +323,48 @@ export default { | |||
this.$router.push(`/${path}`); | |||
}, | |||
submit() { | |||
this.$refs.form.validate(valid => { | |||
this.$refs.form.validate((valid) => { | |||
console.log(valid); | |||
if (valid) { | |||
let params = { | |||
mallName: this.form.email, //邮箱 | |||
applicant: this.form.name, //姓名 | |||
phone: this.form.phone //电话 | |||
phone: this.form.phone, //电话 | |||
}; | |||
this.$axios({ | |||
method: 'post', | |||
url: '/C/api/wxMallApply/add', | |||
method: "post", | |||
url: "/C/api/wxMallApply/add", | |||
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; | |||
}) | |||
.catch(err => { | |||
.catch((err) => { | |||
this.$message.error(err.message); | |||
}); | |||
} | |||
}); | |||
} | |||
}, | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
mounted() { | |||
// console.log(); | |||
// this.$refs["vidoe"].play(); | |||
new Swiper('.swiper-container', { | |||
new Swiper(".swiper-container", { | |||
slidesPerView: 3, | |||
spaceBetween: 30, | |||
centeredSlides: true, | |||
@@ -281,27 +372,27 @@ export default { | |||
// 如果需要分页器 | |||
pagination: { | |||
el: '.swiper-pagination', | |||
clickable: true // 分页器可以点击 | |||
el: ".swiper-pagination", | |||
clickable: true, // 分页器可以点击 | |||
}, | |||
// 如果需要前进后退按钮 | |||
navigation: { | |||
nextEl: '.swiper-button-next', | |||
prevEl: '.swiper-button-prev' | |||
nextEl: ".swiper-button-next", | |||
prevEl: ".swiper-button-prev", | |||
}, | |||
// 如果需要滚动条 | |||
scrollbar: { | |||
el: '.swiper-scrollbar' | |||
} | |||
el: ".swiper-scrollbar", | |||
}, | |||
}); | |||
}, | |||
created() { | |||
this.$nextTick(() => { | |||
this.goView('top'); | |||
this.goView("top"); | |||
}); | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -1,6 +1,9 @@ | |||
<template> | |||
<div class="Box" id="top"> | |||
<div class="module_1" style="position: relative; background-color: #7868ca; height: 800px"> | |||
<div | |||
class="module_1" | |||
style="position: relative; background-color: #7868ca; height: 800px" | |||
> | |||
<video | |||
ref="videoPlayer" | |||
style="position: absolute; right: 250px" | |||
@@ -10,11 +13,14 @@ | |||
autoplay | |||
muted | |||
controls | |||
loop="loop" /> | |||
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_y" v-if="characters == 1">数字人内容生产从未如此高效便捷</div> | |||
<div class="title_item1_y" v-if="characters == 1"> | |||
数字人内容生产从未如此高效便捷 | |||
</div> | |||
<div class="desc" v-if="characters == 1"> | |||
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||
@@ -22,18 +28,28 @@ | |||
</div> | |||
<!-- 英文部分 --> | |||
<div class="title_item1" v-if="characters != 1">MetaNeuver</div> | |||
<div class="title_item1_y" v-if="characters != 1">Supports multimodl user input, text, voice, and source video.</div> | |||
<div class="title_item1_y" v-if="characters != 1"> | |||
Supports multimodl user input, text, voice, and source video. | |||
</div> | |||
<div class="desc" v-if="characters != 1"> | |||
<div> | |||
Allows your digital human to seamlessly cross the uncanny valley, ensuring an immersive and believable experience.enabling content production at any time and keeping up with all the latest | |||
trends. | |||
Allows your digital human to seamlessly cross the uncanny valley, | |||
ensuring an immersive and believable experience.enabling content | |||
production at any time and keeping up with all the latest trends. | |||
</div> | |||
<div v-if="false"> | |||
High naturalness and realism let your digital human completely cross | |||
the uncanny valley | |||
</div> | |||
<div v-if="false">High naturalness and realism let your digital human completely cross the uncanny valley</div> | |||
</div> | |||
<div class="title_btn" @click="showBox"> | |||
{{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||
<div | |||
class="title_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
</div> | |||
</div> | |||
<div class="md1" id="md1"></div> | |||
@@ -42,33 +58,74 @@ | |||
<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" /> | |||
<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"> | |||
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 | |||
</div> | |||
<div class="images"> | |||
<li> | |||
<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="" /> | |||
<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> | |||
<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="" /> | |||
<img | |||
v-if="characters == 1" | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png" | |||
alt="" | |||
/> | |||
<img | |||
v-if="characters != 1" | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg" | |||
alt="" | |||
/> | |||
</li> | |||
<li> | |||
<img 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="" /> | |||
<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 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" /> | |||
<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="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4" /> --> | |||
<video ref="videoII" src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4" /> | |||
<video | |||
ref="videoII" | |||
src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4" | |||
/> | |||
</div> | |||
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||
</li> | |||
@@ -78,35 +135,66 @@ | |||
<div class="module_3"> | |||
<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_live/huibo333_zh.png" alt="" /> | |||
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png" alt="" /> | |||
<img | |||
v-if="characters == 1" | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png" | |||
alt="" | |||
/> | |||
<img | |||
v-if="characters != 1" | |||
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png" | |||
alt="" | |||
/> | |||
</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-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 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 class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<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> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<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 { | |||
data() { | |||
@@ -116,14 +204,14 @@ export default { | |||
charactersMy: 1, | |||
// | |||
userName: '', | |||
phone: '', | |||
email: '', | |||
userName: "", | |||
phone: "", | |||
email: "", | |||
form: { | |||
name: '', | |||
phone: '', | |||
email: '' | |||
name: "", | |||
phone: "", | |||
email: "", | |||
}, | |||
rules: { | |||
@@ -132,16 +220,16 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: '此项必填,内容最大10个字符!', | |||
trigger: 'blur' | |||
} | |||
message: "此项必填,内容最大10个字符!", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请先输手机号", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -149,18 +237,18 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号'); | |||
callback("抱歉,请输入正确的手机号"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "请输入邮箱!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -168,12 +256,12 @@ export default { | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
callback("抱歉,请输入正确的邮箱"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
@@ -181,60 +269,60 @@ export default { | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
message: "This item is required !", | |||
trigger: "blur", | |||
}, | |||
], | |||
phone: [ | |||
{ | |||
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) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
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); | |||
} | |||
} | |||
}, | |||
}, | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
trigger: "change", | |||
message: "Please enter email!", | |||
trigger: "blur", | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
callback("Sorry, please enter the correct email address"); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
}, | |||
], | |||
}, | |||
// characters: 1, //1=》中文 2=》英文 | |||
timeFlag: 5, | |||
dialogVisible: false | |||
dialogVisible: false, | |||
}; | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
...mapActions(["setCharacters"]), | |||
goSetVedio(flag) { | |||
if (flag) { | |||
this.$refs['videoII'].play(); | |||
this.$refs["videoII"].play(); | |||
} else { | |||
this.$refs['videoII'].pause(); | |||
this.$refs["videoII"].pause(); | |||
} | |||
this.isPlayed = !flag; | |||
}, | |||
@@ -247,10 +335,10 @@ export default { | |||
this.dialogVisible = true; | |||
}, | |||
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),); | |||
}, | |||
@@ -258,46 +346,48 @@ export default { | |||
this.$router.push(`/${path}`); | |||
}, | |||
submit() { | |||
this.$refs.form.validate(valid => { | |||
this.$refs.form.validate((valid) => { | |||
console.log(valid); | |||
if (valid) { | |||
let params = { | |||
mallName: this.form.email, //邮箱 | |||
applicant: this.form.name, //姓名 | |||
phone: this.form.phone //电话 | |||
phone: this.form.phone, //电话 | |||
}; | |||
this.$axios({ | |||
method: 'post', | |||
url: '/C/api/wxMallApply/add', | |||
method: "post", | |||
url: "/C/api/wxMallApply/add", | |||
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; | |||
}) | |||
.catch(err => { | |||
.catch((err) => { | |||
this.$message.error(err.message); | |||
}); | |||
} | |||
}); | |||
} | |||
}, | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
mounted() { | |||
// console.log(); | |||
// this.$refs["vidoe"].play(); | |||
new Swiper('.swiper-container', { | |||
new Swiper(".swiper-container", { | |||
slidesPerView: 3, | |||
spaceBetween: 30, | |||
centeredSlides: true, | |||
@@ -305,29 +395,29 @@ export default { | |||
// 如果需要分页器 | |||
pagination: { | |||
el: '.swiper-pagination', | |||
clickable: true // 分页器可以点击 | |||
el: ".swiper-pagination", | |||
clickable: true, // 分页器可以点击 | |||
}, | |||
// 如果需要前进后退按钮 | |||
navigation: { | |||
nextEl: '.swiper-button-next', | |||
prevEl: '.swiper-button-prev' | |||
nextEl: ".swiper-button-next", | |||
prevEl: ".swiper-button-prev", | |||
}, | |||
// 如果需要滚动条 | |||
scrollbar: { | |||
el: '.swiper-scrollbar' | |||
} | |||
el: ".swiper-scrollbar", | |||
}, | |||
}); | |||
}, | |||
created() { | |||
this.$nextTick(() => { | |||
this.goView('top'); | |||
this.goView("top"); | |||
this.$refs.videoPlayer.muted = false; | |||
this.$refs.videoPlayer.play(); | |||
}); | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -29,7 +29,11 @@ | |||
Easily create your unique digital IP | |||
</div> --> | |||
<div class="title_btn" @click="showBox"> | |||
<div | |||
class="title_btn" | |||
@click="showBox" | |||
v-if="$store.state.publicObj.showTryItNow" | |||
> | |||
{{ characters == 1 ? "与李雷交谈" : "coming soon" }} | |||
</div> | |||
</div> | |||
@@ -1,6 +1,7 @@ | |||
let publicObj = { | |||
state: { | |||
characters: 1,//1=》中文 2=》英文 | |||
showTryItNow: false | |||
}, | |||
mutations: { | |||
setCharacters(state, data) { | |||