| @@ -1,21 +1,19 @@ | |||
| <template> | |||
| <div class="Box" id="top"> | |||
| <div class="module_1"> | |||
| <div class="module_1" style="position: relative; background-color: #47aa5a; height: 800px"> | |||
| <video | |||
| ref="video" | |||
| src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | |||
| style="position: absolute; right: -20%" | |||
| src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4" | |||
| width="100%" | |||
| height="100%" | |||
| autoplay | |||
| muted="muted" | |||
| 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> | |||
| @@ -23,24 +21,15 @@ | |||
| </div> | |||
| <!-- 英文部分 --> | |||
| <div class="title_item1" v-if="characters != 1">MetaStream</div> | |||
| <div class="title_item1_y" v-if="characters != 1"> | |||
| Digital human content production has never been so efficient and | |||
| convenient | |||
| </div> | |||
| <div class="title_item1_y" v-if="characters != 1">Digital human content production has never been so efficient and convenient</div> | |||
| <div class="desc" v-if="characters != 1"> | |||
| <div> | |||
| Text, voice, and source video multiple drive methods support the | |||
| production of content at any time and keep up with hot spots | |||
| </div> | |||
| <div> | |||
| High naturalness and realism let your digital human completely cross | |||
| the uncanny valley | |||
| </div> | |||
| <div>Text, voice, and source video multiple drive methods support the production of content at any time and keep up with hot spots</div> | |||
| <div>High naturalness and realism let your digital human completely cross the uncanny valley</div> | |||
| </div> | |||
| <div class="title_btn" @click="showBox"> | |||
| {{ characters == 1 ? "立刻体验" : "Try it now" }} | |||
| {{ characters == 1 ? '立刻体验' : 'Try it now' }} | |||
| </div> | |||
| </div> | |||
| <div class="md1" id="md1"></div> | |||
| @@ -49,70 +38,32 @@ | |||
| <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" | |||
| /> | |||
| <video ref="videoII" src="../../assets/video/video2.mp4" /> | |||
| <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 style="" ref="videoII" src="https://video.metavatar.cc/sv/20bbc23b-1883359e457/20bbc23b-1883359e457.mp4" /> | |||
| </div> | |||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||
| </li> | |||
| @@ -122,60 +73,34 @@ | |||
| <div class="module_3"> | |||
| <div class="title" v-if="characters == 1">中之人驱动</div> | |||
| <div class="title" v-if="characters != 1">“中の人” driving</div> | |||
| <img | |||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" | |||
| alt="" | |||
| /> | |||
| <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" /> | |||
| </div> | |||
| <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() { | |||
| @@ -185,14 +110,14 @@ export default { | |||
| charactersMy: 1, | |||
| // | |||
| userName: "", | |||
| phone: "", | |||
| email: "", | |||
| userName: '', | |||
| phone: '', | |||
| email: '', | |||
| form: { | |||
| name: "", | |||
| phone: "", | |||
| email: "", | |||
| name: '', | |||
| phone: '', | |||
| email: '' | |||
| }, | |||
| rules: { | |||
| @@ -201,16 +126,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) { | |||
| @@ -218,18 +143,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) { | |||
| @@ -237,12 +162,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: [ | |||
| @@ -250,60 +175,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; | |||
| }, | |||
| @@ -316,10 +241,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),); | |||
| }, | |||
| @@ -327,48 +252,46 @@ 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, | |||
| @@ -376,27 +299,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> | |||
| @@ -482,7 +405,7 @@ export default { | |||
| .titleBox { | |||
| width: 36%; | |||
| position: absolute; | |||
| top: 390px; | |||
| top: 240px; | |||
| left: 194px; | |||
| overflow: hidden; | |||
| // color: #323232; | |||
| @@ -588,8 +511,9 @@ export default { | |||
| } | |||
| // background-color: #16e9d6; | |||
| video { | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: #47aa5a; | |||
| width: 423px; | |||
| height: 540px; | |||
| } | |||
| &:hover { | |||
| .play { | |||