| @@ -1,5 +1,5 @@ | |||
| { | |||
| "name": "Metavatar", | |||
| "name": "metavatar", | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "scripts": { | |||
| @@ -1,2 +0,0 @@ | |||
| User-agent: * | |||
| Disallow: | |||
| @@ -19,23 +19,6 @@ | |||
| <div class="wire"></div> | |||
| <div class="wire"></div> | |||
| </div> | |||
| <!-- <el-select v-model="charactersMy" placeholder="请选择" @change="change"> | |||
| <el-option | |||
| v-for="item in languageLsit" | |||
| :key="item.value" | |||
| :label="item.name" | |||
| :value="item.value" | |||
| > | |||
| <div class> | |||
| <img | |||
| :src="item.url" | |||
| alt | |||
| class="cutImg" | |||
| > | |||
| <span>{{item.name}}</span> | |||
| </div> | |||
| </el-option> | |||
| </el-select>--> | |||
| </div> | |||
| </div> | |||
| @@ -44,10 +27,25 @@ | |||
| position="top" | |||
| :style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}" | |||
| > | |||
| <div class="goItem">{{characters==1?'产品能力':'Product'}}</div> | |||
| <div class="goItem" @click="menuChange(1)">{{characters==1?'产品能力':'Product'}} | |||
| </div> | |||
| <div class="menu" v-if="menuFlag1"> | |||
| <p>人脸生成</p> | |||
| <p>个性化</p> | |||
| <p>风格化</p> | |||
| </div> | |||
| <div class="goItem" @click="go('/technology')">{{characters==1?'创新技术':'Technology'}}</div> | |||
| <div class="goItem">{{characters==1?'解决方案':'Solutions'}}</div> | |||
| <!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> --> | |||
| <div class="goItem" @click="menuChange(2)"> | |||
| {{characters==1?'解决方案':'Solutions'}} | |||
| </div> | |||
| <div class="menu" v-if="menuFlag2"> | |||
| <p @click="go('/introduce/1')">数字人客服</p> | |||
| <p @click="go('/introduce/1')">虚拟主播</p> | |||
| <p @click="go('/introduce/1')">数字讲师</p> | |||
| <p @click="go('/introduce/2')">视频换脸</p> | |||
| <p @click="go('/introduce/3')">数字人孪生</p> | |||
| </div> | |||
| <div class="goItem" @click="go('/case')">{{characters==1?'精选案例':'Cases'}}</div> | |||
| <div class="goItem" @click="go('/about')">{{characters==1?'关于我们':'About us'}}</div> | |||
| <div class="languageImgBox" @click="change(1)"> | |||
| <img src="../../assets/img/cn.jpeg" alt class="cutImg"> | |||
| @@ -69,6 +67,8 @@ export default { | |||
| data() { | |||
| return { | |||
| show: false, | |||
| menuFlag1: false, | |||
| menuFlag2: false, | |||
| languageLsit: [ | |||
| { | |||
| name: "Cn", | |||
| @@ -109,25 +109,37 @@ export default { | |||
| this.show = true; | |||
| }, | |||
| change(value) { | |||
| this.setCharacters(value); | |||
| this.show = false; | |||
| }, | |||
| go(url) { | |||
| this.$router.push(url); | |||
| this.show = false; | |||
| this.menuFlag1 = false | |||
| this.menuFlag2 = false | |||
| }, | |||
| menuChange(tag) { | |||
| let num = tag === 2 ? 1 : 2 | |||
| this[`menuFlag${num}`] = false | |||
| this[`menuFlag${tag}`] = true | |||
| } | |||
| }, | |||
| mounted() { | |||
| console.log(this.languageLsit, "characters"); | |||
| } | |||
| mounted() {} | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .goItem { | |||
| margin: 20px; | |||
| color: #fff; | |||
| font-size: 26px; | |||
| line-height: 50px; | |||
| padding: 0 20px; | |||
| } | |||
| .menu{ | |||
| padding-left: 50px; | |||
| color: #fff; | |||
| font-size: 26px; | |||
| line-height: 50px; | |||
| } | |||
| .languageImgBox { | |||
| @@ -0,0 +1,139 @@ | |||
| <!-- | |||
| * @Autor: Chuting | |||
| * @Date: 2022-08-16 14:39:13 | |||
| * @LastEditors: Chuting | |||
| * @LastEditTime: 2022-08-16 14:42:42 | |||
| * @Description: | |||
| --> | |||
| <template> | |||
| <van-popup v-model:show="dialogVisible" closeable> | |||
| <div class="contentBox"> | |||
| <div class="contentInput"> | |||
| <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> | |||
| </div> | |||
| <div class="contentInput"> | |||
| <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> | |||
| </div> | |||
| <div class="contentInput"> | |||
| <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> | |||
| </div> | |||
| <div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div> | |||
| </div> | |||
| </van-popup> | |||
| </template> | |||
| <script> | |||
| import { Toast } from "vant"; | |||
| export default { | |||
| components: { | |||
| [Toast.name]: Toast | |||
| }, | |||
| data() { | |||
| return { | |||
| dialogVisible: false, | |||
| userName: "", | |||
| phone: "", | |||
| email: "", | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| methods: { | |||
| submit() { | |||
| let phone = /^1[35789]\d{9}$/; | |||
| if (this.userName == "") { | |||
| Toast.fail(this.characters == 1 ? "请输入姓名" : "Please enter your name"); | |||
| return; | |||
| } else if (!phone.test(this.phone)) { | |||
| Toast.fail( | |||
| this.characters == 1 | |||
| ? "请输入手机号" | |||
| : "Please enter your mobile phone number" | |||
| ); | |||
| return; | |||
| } else if (this.email == "") { | |||
| Toast.fail( | |||
| this.characters == 1 ? "请输入邮箱" : "Please enter email address" | |||
| ); | |||
| return; | |||
| } | |||
| let params = { | |||
| mallName: this.email, //邮箱 | |||
| applicant: this.userName, //姓名 | |||
| phone: this.phone //电话 | |||
| }; | |||
| this.$axios({ | |||
| method: "post", | |||
| url: "/api/callback/wxMallApply/add", | |||
| headers: { | |||
| "Content-Type": "application/json;charset=UTF-8" | |||
| }, | |||
| data: params | |||
| }) | |||
| .then(res => { | |||
| this.email = ""; | |||
| this.userName = ""; | |||
| this.phone = ""; | |||
| this.dialogVisible = false; | |||
| this.$emit('close'); | |||
| Toast.success( | |||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||
| ); | |||
| }) | |||
| .catch(err => { | |||
| Toast.fail(err.message); | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .contentBox { | |||
| width: 600px; | |||
| padding: 30px; | |||
| .titleBox{ | |||
| overflow: hidden; | |||
| .guan{ | |||
| float: right; | |||
| font-size: 18px; | |||
| padding: 10px 20px; | |||
| text-align: center; | |||
| color: #fff; | |||
| } | |||
| } | |||
| .contentInput { | |||
| width: 80%; | |||
| height: 60px; | |||
| background: #ffffff; | |||
| text-align: center; | |||
| margin: 0 auto 20px auto; | |||
| input { | |||
| width: 100%; | |||
| height: 60px; | |||
| font-size: 24px; | |||
| border-bottom: 1px solid #c8c9cc; | |||
| } | |||
| input::placeholder { | |||
| font-weight: 400; | |||
| color: #949494; | |||
| } | |||
| } | |||
| .subBtn { | |||
| width: 80%; | |||
| height: 80px; | |||
| background: #ffffff; | |||
| border-radius: 40px; | |||
| text-align: center; | |||
| line-height: 80px; | |||
| cursor: pointer; | |||
| font-size: 24px; | |||
| margin: 40px auto 10px auto; | |||
| border: 1px solid #c8c9cc; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -22,7 +22,7 @@ | |||
| <div | |||
| class="title_ctn" | |||
| >{{characters==1?'让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。':'supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before .'}}</div> | |||
| <div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
| <div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
| </div> | |||
| <div class="module_3" id="module_3"> | |||
| @@ -42,7 +42,7 @@ | |||
| <div | |||
| class="title_ctn" | |||
| >{{characters==1?' 为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。':'complex cases Provide extremely expenses saving & extendable user experience in digital content producing process .'}}</div> | |||
| <div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
| <div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div> | |||
| </div> | |||
| <div class="module_3" id="module_3"> | |||
| @@ -0,0 +1,333 @@ | |||
| <template> | |||
| <div class="introduce"> | |||
| <div class="top"> | |||
| <img :src="introduce[characters][id].imgUrl" alt=""> | |||
| <div> | |||
| <h1>{{ introduce[characters][id].title}}</h1> | |||
| <p>{{ introduce[characters][id].desc1}}</p> | |||
| </div> | |||
| </div> | |||
| <div class="ct_1"> | |||
| <h1> {{ introduce[characters][id].ct1.title }}</h1> | |||
| <div class="lst"> | |||
| <div v-for="(item, index) in introduce[characters][id].ct1.list" :key="index"> | |||
| <img :src="item.imgUrl" alt=""> | |||
| <!-- <p> | |||
| <span v-for="(des, idx) in item.desc.split(',')" :key="idx">{{des}}</span> | |||
| </p> --> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="ct_2"> | |||
| <img :src="introduce[characters][id].ct2ImgUrl" alt=""> | |||
| </div> | |||
| <div class="ct_3"> | |||
| <h1>{{introduce[characters][id].ct3.title}}</h1> | |||
| <div class="lst"> | |||
| <div v-for="(item, index) in introduce[characters][id].ct3.list" :key="index"> | |||
| <img :src="item.imgUrl" alt=""> | |||
| <p> {{item.desc}} </p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="ct_4" v-if="introduce[characters][id].ct4"> | |||
| <h1>{{introduce[characters][id].ct4.title}}</h1> | |||
| <p>{{introduce[characters][id].ct4.desc}}</p> | |||
| <img :src="introduce[characters][id].ct4.imgUrl" alt=""> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| data(){ | |||
| return { | |||
| id: this.$route.params.id, | |||
| introduce: { | |||
| 1: { | |||
| 1: { | |||
| imgUrl: require('@/assets/img/introduce_11_1.png'), | |||
| title: '数字人客服', | |||
| desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 量面容生成需求面容生成需求`, | |||
| ct1: { | |||
| title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_11_2.png'), | |||
| desc: 'i计算,节省85%以上成本' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_11_3.png'), | |||
| desc: '影视级别,效果无可挑剔' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_11_4.png'), | |||
| desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_11_5.png'), | |||
| desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
| } | |||
| ] | |||
| }, | |||
| ct2ImgUrl: require('@/assets/img/introduce_11_6.png'), | |||
| ct3: { | |||
| title: '邃芒数字人的更多服务解决方案', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
| desc: '数字人客服' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
| desc: '虚拟主播' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
| desc: '数字讲师' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
| desc: '数字人孪生' | |||
| } | |||
| ] | |||
| }, | |||
| ct4: { | |||
| title: '邃芒数字人的技术优势', | |||
| desc: '邃芒数字人通过StyleGAN和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创造带入了全新世代!和基于神经辐射场(NeRF)的场景表征与容积渲染将数字人创', | |||
| imgUrl: require('@/assets/img/introduce_11_11.png') | |||
| } | |||
| }, | |||
| 2: { | |||
| imgUrl: require('@/assets/img/introduce_1_1.png'), | |||
| title: '视频换脸', | |||
| desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 | |||
| 无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 | |||
| 量面容生成需求面容生成需求`, | |||
| ct1: { | |||
| title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_2.png'), | |||
| desc: 'i计算,节省85%以上成本' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_3.png'), | |||
| desc: '影视级别,效果无可挑剔' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_4.png'), | |||
| desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_5.png'), | |||
| desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
| } | |||
| ] | |||
| }, | |||
| ct2ImgUrl: require('@/assets/img/introduce_1_6.png'), | |||
| ct3: { | |||
| title: '邃芒数字人的更多服务解决方案', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
| desc: '数字人客服' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
| desc: '虚拟主播' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
| desc: '数字讲师' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
| desc: '数字人孪生' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| 3: { | |||
| imgUrl: require('@/assets/img/introduce_3_1.png'), | |||
| title: '数字人孪生', | |||
| desc1: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 | |||
| 无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 | |||
| 量面容生成需求面容生成需求`, | |||
| ct1: { | |||
| title: '邃芒数字人视频换脸 影视级效果让人赞不绝口', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_3_2.png'), | |||
| desc: 'i计算,节省85%以上成本' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_3_3.png'), | |||
| desc: '影视级别,效果无可挑剔' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_3_4.png'), | |||
| desc: '数字人脸众生库、 ,客制化 满足任何需求' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_3_5.png'), | |||
| desc: '面容替换+声音替换,让数字人进化为专有IP' | |||
| } | |||
| ] | |||
| }, | |||
| ct2ImgUrl: require('@/assets/img/introduce_3_6.png'), | |||
| ct3: { | |||
| title: '邃芒数字人的更多服务解决方案', | |||
| list: [ | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_7.png'), | |||
| desc: '数字人客服' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_8.png'), | |||
| desc: '虚拟主播' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_9.png'), | |||
| desc: '数字讲师' | |||
| }, | |||
| { | |||
| imgUrl: require('@/assets/img/introduce_1_10.png'), | |||
| desc: '数字人孪生' | |||
| } | |||
| ] | |||
| }, | |||
| } | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| watch: { | |||
| "$route.params": { | |||
| immediate: true, | |||
| handler(new_value, old_value) { | |||
| this.id = Number(new_value.id) | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .introduce{ | |||
| .top{ | |||
| position: relative; | |||
| div{ | |||
| position: absolute; | |||
| left: 95px; | |||
| right: 95px; | |||
| bottom: 90px; | |||
| h1{ | |||
| font-size: 34px; | |||
| color: #fff; | |||
| } | |||
| p{ | |||
| font-size: 26px; | |||
| margin-top: 35px; | |||
| color: #fff; | |||
| } | |||
| } | |||
| } | |||
| .ct_1{ | |||
| h1{ | |||
| font-size: 26px; | |||
| font-weight: 400; | |||
| color: #232324; | |||
| padding-top: 48px; | |||
| text-align: center; | |||
| margin-bottom: 20px; | |||
| } | |||
| .lst{ | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| margin: 0 40px; | |||
| div{ | |||
| flex: 1; | |||
| position: relative; | |||
| img{ | |||
| width: 300px; | |||
| height: 520px; | |||
| margin-top: 20px; | |||
| } | |||
| p{ | |||
| position: absolute; | |||
| bottom: 36px; | |||
| left: 38px; | |||
| font-size: 24px; | |||
| font-weight: 400; | |||
| color: #FFFFFF; | |||
| line-height: 36px; | |||
| span{ | |||
| display: block; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .ct_2{ | |||
| margin-top: 30px; | |||
| } | |||
| .ct_3{ | |||
| width: 100%; | |||
| background: #202020; | |||
| padding-bottom: 90px; | |||
| h1{ | |||
| font-size: 24px; | |||
| font-weight: 400; | |||
| color: #fff; | |||
| padding-top: 48px; | |||
| text-align: center; | |||
| } | |||
| .lst{ | |||
| display: flex; | |||
| margin: 68px auto 0; | |||
| width: 90%; | |||
| div{ | |||
| flex: 1; | |||
| position: relative; | |||
| margin: 0 10px; | |||
| p{ | |||
| bottom: 36px; | |||
| left: 38px; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #FFFFFF; | |||
| text-align: center; | |||
| margin-top: 20px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .ct_4{ | |||
| background: #eaeff3; | |||
| padding: 40px 0; | |||
| h1{ | |||
| font-size: 38px; | |||
| font-weight: normal; | |||
| text-align: center; | |||
| color: #323232; | |||
| padding: 0 94px; | |||
| } | |||
| p{ | |||
| font-size: 22px; | |||
| color: #323232; | |||
| margin-top: 33px; | |||
| padding: 0 94px; | |||
| } | |||
| img{ | |||
| margin-top: 20px; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -2,7 +2,7 @@ | |||
| * @Autor: Chuting | |||
| * @Date: 2022-08-08 14:25:11 | |||
| * @LastEditors: Chuting | |||
| * @LastEditTime: 2022-08-13 23:34:39 | |||
| * @LastEditTime: 2022-08-14 11:34:03 | |||
| * @Description: | |||
| */ | |||
| import Vue from 'vue' | |||
| @@ -47,6 +47,12 @@ const routes = [ | |||
| // component: Home | |||
| component: ()=> import("@/components/case"), | |||
| }, | |||
| { | |||
| path: '/introduce/:id?', | |||
| name: 'introduce', | |||
| // component: Home | |||
| component: ()=> import("@/components/introduce"), | |||
| }, | |||
| { | |||
| path: '/styleAdd', | |||
| name: 'styleAdd', | |||
| @@ -18,5 +18,5 @@ module.exports = { | |||
| } | |||
| }, | |||
| lintOnSave: false, | |||
| publicPath: './', // 打包后引用的资源路径 | |||
| publicPath: '/', // 打包后引用的资源路径 | |||
| } | |||