| @@ -7,10 +7,11 @@ | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <div class="tiemBox"> | |||||
| <div class="tiemBox" id="tiemBox"> | |||||
| <div class="taolIconBox"> | <div class="taolIconBox"> | ||||
| <div class="taolIconText"> | <div class="taolIconText"> | ||||
| {{ characters == 1 ? "关注我们" : "follow Us" }} | |||||
| <!-- {{ characters == 1 ? "关注我们" : "follow Us" }} --> | |||||
| {{ characters == 1 ? "" : "" }} | |||||
| </div> | </div> | ||||
| <div class="iconBox"> | <div class="iconBox"> | ||||
| <img | <img | ||||
| @@ -32,8 +33,8 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="contentBox"> | |||||
| <div class="taolIconText"> | |||||
| <div class="contentBox" 啊实打实> | |||||
| <div class="taolIconText" style="margin-top: 0px"> | |||||
| {{ characters == 1 ? "联系我们" : "Contact us" }} | {{ characters == 1 ? "联系我们" : "Contact us" }} | ||||
| </div> | </div> | ||||
| <!-- <div class="contentInput"> | <!-- <div class="contentInput"> | ||||
| @@ -121,6 +122,7 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { mapState } from "vuex"; | import { mapState } from "vuex"; | ||||
| export default { | export default { | ||||
| @@ -337,7 +339,7 @@ export default { | |||||
| float: left; | float: left; | ||||
| } | } | ||||
| .taolIconText { | .taolIconText { | ||||
| margin-top: -20px; | |||||
| margin-top: 20px; | |||||
| font-size: 14px; | font-size: 14px; | ||||
| font-family: Inter; | font-family: Inter; | ||||
| font-weight: 400; | font-weight: 400; | ||||
| @@ -45,6 +45,9 @@ | |||||
| <div class="categoryitem" @click="goView('aboutUs')"> | <div class="categoryitem" @click="goView('aboutUs')"> | ||||
| {{ characters == 1 ? "关于我们" : "About us" }} | {{ characters == 1 ? "关于我们" : "About us" }} | ||||
| </div> | </div> | ||||
| <div class="categoryitem" @click="goView('tiemBox')"> | |||||
| {{ characters == 1 ? "联系我们" : "Contact us" }} | |||||
| </div> | |||||
| </div> | </div> | ||||
| <div class="cutBox"> | <div class="cutBox"> | ||||
| <!-- <img src="@/assets/img/earth.png" alt="" /> --> | <!-- <img src="@/assets/img/earth.png" alt="" /> --> | ||||
| @@ -88,20 +91,7 @@ export default { | |||||
| charactersMy: 1, | charactersMy: 1, | ||||
| }; | }; | ||||
| }, | }, | ||||
| watch: { | |||||
| // languageLsit(newVal) { | |||||
| // this.setCharacters([ | |||||
| // { | |||||
| // name: "Cn", | |||||
| // value: 1 | |||||
| // }, | |||||
| // { | |||||
| // name: "En", | |||||
| // value: 2 | |||||
| // } | |||||
| // ]); | |||||
| // } | |||||
| }, | |||||
| computed: { | computed: { | ||||
| ...mapState({ | ...mapState({ | ||||
| characters: (state) => state.publicObj.characters, | characters: (state) => state.publicObj.characters, | ||||
| @@ -117,7 +107,7 @@ export default { | |||||
| this.$router.push(`/${path}`); | this.$router.push(`/${path}`); | ||||
| }, | }, | ||||
| goView(id) { | goView(id) { | ||||
| if (id == "Technology" || id == "Solutions") { | |||||
| if (id == "Technology" || id == "Solutions" || id == "aboutUs") { | |||||
| this.$router.push(`/`); | this.$router.push(`/`); | ||||
| setTimeout(() => { | setTimeout(() => { | ||||
| document.querySelector("#" + id).scrollIntoView({ | document.querySelector("#" + id).scrollIntoView({ | ||||
| @@ -154,6 +144,29 @@ export default { | |||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.handleScrollTop(); | 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> | </script> | ||||
| @@ -42,7 +42,11 @@ | |||||
| freely | freely | ||||
| </div> | </div> | ||||
| <div class="title_btn" @click="showBox"> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "立刻体验" : "Try it now" }} | {{ characters == 1 ? "立刻体验" : "Try it now" }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -162,13 +166,27 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="module_4" id="module_4"> | <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" }} | {{ characters == 1 ? "立刻体验" : "Try it now" }} | ||||
| </div> | </div> | ||||
| </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" }} | {{ characters == 1 ? "立刻体验" : "Try it now" }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -225,7 +243,11 @@ | |||||
| }} | }} | ||||
| </div> | </div> | ||||
| </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" }} | {{ characters == 1 ? "立刻体验" : "Try it now" }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -274,7 +296,11 @@ | |||||
| }} | }} | ||||
| </div> | </div> | ||||
| <div class="read_btn" @click="showBox"> | |||||
| <div | |||||
| class="read_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "了解详情" : "Read more" }} | {{ characters == 1 ? "了解详情" : "Read more" }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -920,18 +946,22 @@ export default { | |||||
| // 浏览器为IE的情况 | // 浏览器为IE的情况 | ||||
| if (Browser_Agent.indexOf(" MSIE ") != -1) { | if (Browser_Agent.indexOf(" MSIE ") != -1) { | ||||
| const a = navigator.browserLanguage; | const a = navigator.browserLanguage; | ||||
| if (a != "zh-cn") { | |||||
| // 英文网站 | |||||
| console.log("英文网站"); | |||||
| if (a == "zh-cn") { | |||||
| // 中文网站 | |||||
| console.log("中文网站"); | |||||
| this.setCharacters(1); | |||||
| } else { | |||||
| this.setCharacters(2); | this.setCharacters(2); | ||||
| } | } | ||||
| } | } | ||||
| // 浏览器非IE的情况 | // 浏览器非IE的情况 | ||||
| else { | else { | ||||
| const b = navigator.language; | const b = navigator.language; | ||||
| if (b != "zh-CN") { | |||||
| // 英文网站 | |||||
| console.log("英文网站"); | |||||
| if (b == "zh-CN") { | |||||
| // 中文网站 | |||||
| console.log("中文网站"); | |||||
| this.setCharacters(1); | |||||
| } else { | |||||
| this.setCharacters(2); | this.setCharacters(2); | ||||
| } | } | ||||
| } | } | ||||
| @@ -1,6 +1,10 @@ | |||||
| <template> | <template> | ||||
| <div class="Box" id="top"> | <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 | <video | ||||
| style="position: absolute; right: 250px" | style="position: absolute; right: 250px" | ||||
| ref="videoPlayer" | ref="videoPlayer" | ||||
| @@ -10,32 +14,47 @@ | |||||
| autoplay | autoplay | ||||
| muted | muted | ||||
| controls | 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%" /> --> | <!-- <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="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">AI全自动生成,高逼真自然度数字人</div> | |||||
| <div class="title_item1_y" v-if="characters == 1"> | |||||
| AI全自动生成,高逼真自然度数字人 | |||||
| </div> | |||||
| <div class="desc" v-if="characters == 1"> | <div class="desc" v-if="characters == 1"> | ||||
| <div>满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象</div> | |||||
| <div> | |||||
| 满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象 | |||||
| </div> | |||||
| <div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div> | <div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div> | ||||
| </div> | </div> | ||||
| <!-- 英文部分 --> | <!-- 英文部分 --> | ||||
| <div class="title_item1" v-if="characters != 1">MetaGene</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 class="desc" v-if="characters != 1"> | ||||
| <!-- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div> | <!-- <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>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div> --> | ||||
| <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> | </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> | </div> | ||||
| <div class="md1" id="md1"></div> | <div class="md1" id="md1"></div> | ||||
| @@ -43,53 +62,93 @@ | |||||
| <div class="module_2"> | <div class="module_2"> | ||||
| <div class="title">Metavatar AI</div> | <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> | ||||
| <div class="module_3"> | <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> | <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> | ||||
| <div class="module_4"> | <div class="module_4"> | ||||
| <div class="imgBox"> | <div class="imgBox"> | ||||
| <div class="textInsideBox"> | <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 class="style">FULL AGE</div> | ||||
| </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> | ||||
| </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() { | ||||
| @@ -97,14 +156,14 @@ export default { | |||||
| //零时存放 | //零时存放 | ||||
| charactersMy: 1, | charactersMy: 1, | ||||
| // | // | ||||
| userName: '', | |||||
| phone: '', | |||||
| email: '', | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | form: { | ||||
| name: '', | |||||
| phone: '', | |||||
| email: '' | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | }, | ||||
| rules: { | rules: { | ||||
| @@ -113,16 +172,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) { | ||||
| @@ -130,18 +189,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) { | ||||
| @@ -149,12 +208,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: [ | ||||
| @@ -162,54 +221,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); | ||||
| @@ -218,9 +277,9 @@ export default { | |||||
| 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; | ||||
| }, | }, | ||||
| @@ -229,10 +288,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),); | ||||
| }, | }, | ||||
| @@ -240,46 +299,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, | ||||
| @@ -287,29 +348,29 @@ 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"); | |||||
| this.$refs.videoPlayer.muted = false; | this.$refs.videoPlayer.muted = false; | ||||
| this.$refs.videoPlayer.play(); | this.$refs.videoPlayer.play(); | ||||
| }); | }); | ||||
| } | |||||
| }, | |||||
| }; | }; | ||||
| </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,19 +18,28 @@ | |||||
| </div> | </div> | ||||
| <!-- 英文部分 --> | <!-- 英文部分 --> | ||||
| <div class="title_item1" v-if="characters != 1">MetaStreaming</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 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> | ||||
| 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. | scenarios. | ||||
| </div> | </div> | ||||
| </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> | </div> | ||||
| <div class="md1" id="md1"></div> | <div class="md1" id="md1"></div> | ||||
| @@ -33,64 +48,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="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"> | <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">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> | ||||
| <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">Cartoon character</div> | <div class="textInImg" v-if="characters != 1">Cartoon character</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 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> | </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() { | ||||
| @@ -100,14 +189,14 @@ export default { | |||||
| // | // | ||||
| userName: '', | |||||
| phone: '', | |||||
| email: '', | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | form: { | ||||
| name: '', | |||||
| phone: '', | |||||
| email: '' | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | }, | ||||
| rules: { | rules: { | ||||
| @@ -116,16 +205,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) { | ||||
| @@ -133,18 +222,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) { | ||||
| @@ -152,12 +241,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: [ | ||||
| @@ -165,54 +254,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); | ||||
| @@ -223,10 +312,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),); | ||||
| }, | }, | ||||
| @@ -234,46 +323,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, | ||||
| @@ -281,27 +372,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,6 +1,9 @@ | |||||
| <template> | <template> | ||||
| <div class="Box" id="top"> | <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 | <video | ||||
| ref="videoPlayer" | ref="videoPlayer" | ||||
| style="position: absolute; right: 250px" | style="position: absolute; right: 250px" | ||||
| @@ -10,11 +13,14 @@ | |||||
| autoplay | autoplay | ||||
| muted | muted | ||||
| controls | controls | ||||
| loop="loop" /> | |||||
| 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> | ||||
| @@ -22,18 +28,28 @@ | |||||
| </div> | </div> | ||||
| <!-- 英文部分 --> | <!-- 英文部分 --> | ||||
| <div class="title_item1" v-if="characters != 1">MetaNeuver</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 class="desc" v-if="characters != 1"> | ||||
| <div> | <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> | ||||
| <div v-if="false">High naturalness and realism let your digital human completely cross the uncanny valley</div> | |||||
| </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> | </div> | ||||
| <div class="md1" id="md1"></div> | <div class="md1" id="md1"></div> | ||||
| @@ -42,33 +58,74 @@ | |||||
| <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 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> | ||||
| <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> | ||||
| <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> | ||||
| <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="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4" /> --> | <!-- <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> | </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="" /> --> | ||||
| </li> | </li> | ||||
| @@ -78,35 +135,66 @@ | |||||
| <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 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> | </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() { | ||||
| @@ -116,14 +204,14 @@ export default { | |||||
| charactersMy: 1, | charactersMy: 1, | ||||
| // | // | ||||
| userName: '', | |||||
| phone: '', | |||||
| email: '', | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | form: { | ||||
| name: '', | |||||
| phone: '', | |||||
| email: '' | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | }, | ||||
| rules: { | rules: { | ||||
| @@ -132,16 +220,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) { | ||||
| @@ -149,18 +237,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) { | ||||
| @@ -168,12 +256,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: [ | ||||
| @@ -181,60 +269,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; | ||||
| }, | }, | ||||
| @@ -247,10 +335,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),); | ||||
| }, | }, | ||||
| @@ -258,46 +346,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, | ||||
| @@ -305,29 +395,29 @@ 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"); | |||||
| this.$refs.videoPlayer.muted = false; | this.$refs.videoPlayer.muted = false; | ||||
| this.$refs.videoPlayer.play(); | this.$refs.videoPlayer.play(); | ||||
| }); | }); | ||||
| } | |||||
| }, | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| @@ -29,7 +29,11 @@ | |||||
| Easily create your unique digital IP | Easily create your unique digital IP | ||||
| </div> --> | </div> --> | ||||
| <div class="title_btn" @click="showBox"> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "与李雷交谈" : "coming soon" }} | {{ characters == 1 ? "与李雷交谈" : "coming soon" }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -1,6 +1,7 @@ | |||||
| let publicObj = { | let publicObj = { | ||||
| state: { | state: { | ||||
| characters: 1,//1=》中文 2=》英文 | characters: 1,//1=》中文 2=》英文 | ||||
| showTryItNow: false | |||||
| }, | }, | ||||
| mutations: { | mutations: { | ||||
| setCharacters(state, data) { | setCharacters(state, data) { | ||||