| @@ -2,7 +2,6 @@ | |||||
| node_modules | node_modules | ||||
| /dist | /dist | ||||
| # local env files | # local env files | ||||
| .env.local | .env.local | ||||
| .env.*.local | .env.*.local | ||||
| @@ -21,3 +20,5 @@ pnpm-debug.log* | |||||
| *.njsproj | *.njsproj | ||||
| *.sln | *.sln | ||||
| *.sw? | *.sw? | ||||
| .7z | |||||
| .zip | |||||
| @@ -1,19 +1,25 @@ | |||||
| # home | # home | ||||
| ## Project setup | ## Project setup | ||||
| ``` | ``` | ||||
| npm install | npm install | ||||
| ``` | ``` | ||||
| ### Compiles and hot-reloads for development | ### Compiles and hot-reloads for development | ||||
| ``` | ``` | ||||
| npm run serve | npm run serve | ||||
| ``` | ``` | ||||
| ### Compiles and minifies for production | ### Compiles and minifies for production | ||||
| ``` | ``` | ||||
| npm run build | npm run build | ||||
| ``` | ``` | ||||
| ### Customize configuration | ### Customize configuration | ||||
| See [Configuration Reference](https://cli.vuejs.org/config/). | See [Configuration Reference](https://cli.vuejs.org/config/). | ||||
| 若要稳定运行此项目,请确保node版本为v16.14.0 | |||||
| @@ -1,31 +1,31 @@ | |||||
| { | |||||
| "name": "Metavatar", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "dev": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build" | |||||
| }, | |||||
| "dependencies": { | |||||
| "amfe-flexible": "^2.2.1", | |||||
| "axios": "^0.27.2", | |||||
| "element-ui": "^2.15.9", | |||||
| "lib-flexible": "^0.3.2", | |||||
| "postcss-px2rem-exclude": "0.0.6", | |||||
| "register-service-worker": "^1.7.1", | |||||
| "swiper": "^4.5.1", | |||||
| "video.js": "^7.20.1", | |||||
| "vue": "^2.6.11", | |||||
| "vue-router": "^3.2.0", | |||||
| "vuex": "^3.4.0" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-pwa": "~4.5.13", | |||||
| "@vue/cli-plugin-router": "~4.5.13", | |||||
| "@vue/cli-plugin-vuex": "~4.5.13", | |||||
| "@vue/cli-service": "~4.5.13", | |||||
| "node-sass": "^4.12.0", | |||||
| "sass-loader": "^8.0.2", | |||||
| "vue-template-compiler": "^2.6.11" | |||||
| } | |||||
| } | |||||
| { | |||||
| "name": "Metavatar", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "dev": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build" | |||||
| }, | |||||
| "dependencies": { | |||||
| "amfe-flexible": "^2.2.1", | |||||
| "axios": "^0.27.2", | |||||
| "element-ui": "^2.15.9", | |||||
| "lib-flexible": "^0.3.2", | |||||
| "postcss-px2rem-exclude": "0.0.6", | |||||
| "register-service-worker": "^1.7.1", | |||||
| "swiper": "^4.5.1", | |||||
| "video.js": "^7.20.1", | |||||
| "vue": "^2.6.11", | |||||
| "vue-router": "^3.2.0", | |||||
| "vuex": "^3.4.0" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-pwa": "~4.5.13", | |||||
| "@vue/cli-plugin-router": "~4.5.13", | |||||
| "@vue/cli-plugin-vuex": "~4.5.13", | |||||
| "@vue/cli-service": "~4.5.13", | |||||
| "node-sass": "6.0.1", | |||||
| "sass-loader": "7.0.3", | |||||
| "vue-template-compiler": "^2.6.11" | |||||
| } | |||||
| } | |||||
| @@ -1,37 +1,39 @@ | |||||
| <template> | <template> | ||||
| <div id="app"> | <div id="app"> | ||||
| <top/> | |||||
| <top /> | |||||
| <transition name="app" mode="out-in"> | <transition name="app" mode="out-in"> | ||||
| <router-view></router-view> | <router-view></router-view> | ||||
| </transition> | </transition> | ||||
| <tail/> | |||||
| <tail /> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import top from "./components/common/top" | |||||
| import tail from "./components/common/tail" | |||||
| import top from "./components/common/top"; | |||||
| import tail from "./components/common/tail"; | |||||
| export default { | export default { | ||||
| components:{ | |||||
| components: { | |||||
| top, | top, | ||||
| tail | |||||
| tail, | |||||
| }, | }, | ||||
| data(){ | |||||
| return{} | |||||
| data() { | |||||
| return {}; | |||||
| }, | }, | ||||
| } | |||||
| methods: {}, | |||||
| created() {}, | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="scss"> | <style lang="scss"> | ||||
| body,p{ | |||||
| body, | |||||
| p { | |||||
| margin: 0 0; | margin: 0 0; | ||||
| padding: 0 0; | padding: 0 0; | ||||
| } | } | ||||
| input{ | |||||
| background:none; | |||||
| outline:none; | |||||
| border:none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| input { | |||||
| background: none; | |||||
| outline: none; | |||||
| border: none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,23 +1,30 @@ | |||||
| <template> | <template> | ||||
| <div class="Box"> | |||||
| <div class="Box" id="top"> | |||||
| <div class="title">遂芒科技</div> | <div class="title">遂芒科技</div> | ||||
| <div class="cont"> | <div class="cont"> | ||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||||
| 同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国 | |||||
| 企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
| 11.6%;完成营业收入 1.62万亿元,同比增长 | |||||
| 13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||||
| 同比增长7.3%;基本每股收益 1.07 元,同比增长 | |||||
| 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 | |||||
| 500 强第 13 位,中国 企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
| 家工程承包商”第 1 | |||||
| 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| </div> | </div> | ||||
| <img src="../../assets/img/my_1.png" alt class="myimg"> | |||||
| <img src="../../assets/img/my_1.png" alt class="myimg" /> | |||||
| <div class="teamBox"> | <div class="teamBox"> | ||||
| <img src="../../assets//img//myS.png" alt class="teamImg"> | |||||
| <img src="../../assets//img//myS.png" alt class="teamImg" /> | |||||
| <div class="introduceBox"> | <div class="introduceBox"> | ||||
| <div class="title">团队介绍</div> | <div class="title">团队介绍</div> | ||||
| <p> | <p> | ||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%; | |||||
| 完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4 | |||||
| 49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
| 11.6%; 完成营业收入 1.62万亿元,同比增长 | |||||
| 13.7%;实现归属于上市公司股东的净利润 4 49.4 | |||||
| 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||||
| 业唯一新签合同额 | 业唯一新签合同额 | ||||
| 营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位, | |||||
| 中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续 | |||||
| 营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 | |||||
| 位, 中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 | |||||
| 位,继续 | |||||
| 保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | 保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | ||||
| 进一步巩固。 | 进一步巩固。 | ||||
| </p> | </p> | ||||
| @@ -25,24 +32,42 @@ | |||||
| </div> | </div> | ||||
| <div class="title1">公司愿景</div> | <div class="title1">公司愿景</div> | ||||
| <p class="vision"> | <p class="vision"> | ||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每 | |||||
| 股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
| 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
| 11.6%;完成营业收入 1.62万亿元,同比增长 | |||||
| 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每 | |||||
| 股收益 1.07 元,同比增长 | |||||
| 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 | |||||
| 500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
| 家工程承包商”第 1 | |||||
| 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| </p> | </p> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { mapState } from "vuex"; | import { mapState } from "vuex"; | ||||
| export default { | export default { | ||||
| data(){ | |||||
| return{ | |||||
| } | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | }, | ||||
| computed: { | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | ...mapState({ | ||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| }); | |||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| @@ -128,4 +153,3 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,306 +1,591 @@ | |||||
| <template> | |||||
| <div class="tailBox"> | |||||
| <div class="taillong"> | |||||
| <img src="../../assets/img/LOGO1.png" alt> | |||||
| </div> | |||||
| <div class="tiemBox"> | |||||
| <div class="taolIconBox"> | |||||
| <div class="taolIconText">{{characters ==1?'关注我们':'follow Us'}}</div> | |||||
| <div class="iconBox"> | |||||
| <img src="../../assets/img/f.png" alt> | |||||
| <img src="../../assets/img/o.png" alt> | |||||
| <img src="../../assets/img/ft.png" alt> | |||||
| <img src="../../assets/img/x.png" alt> | |||||
| </div> | |||||
| </div> | |||||
| <div class="contentBox"> | |||||
| <div class="taolIconText">{{characters ==1?'联系我们':'Contact us'}}</div> | |||||
| <div class="contentInput"> | |||||
| <!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> --> | |||||
| <el-input v-model="userName" :placeholder="characters==1?'姓名':'Name'"></el-input> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> --> | |||||
| <el-input v-model="phone" :placeholder="characters ==1?'手机':'Phone Number'" ></el-input> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> --> | |||||
| <el-input v-model="email" :placeholder="characters ==1?'E-mail':'Mail'" ></el-input> | |||||
| </div> | |||||
| <div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div> | |||||
| </div> | |||||
| <div class="rqCodeBox"> | |||||
| <div class="phone">TEL:86 152 1093 7300</div> | |||||
| <div | |||||
| class="site" | |||||
| >{{characters ==1?'北京市海淀区中关村南大街12号农业科学院信息楼311室':'311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'}}</div> | |||||
| <div class="rqCodeTiemBox"> | |||||
| <div class="rqCodeTiem"> | |||||
| <div class="rqcode"> | |||||
| <img src="../../assets/img/wechat.png" alt> | |||||
| </div> | |||||
| <div class="rqtext">Wechat</div> | |||||
| </div> | |||||
| <div class="rqCodeTiem1"> | |||||
| <div class="rqcode"> | |||||
| <img src="../../assets/img/tiktok.png" alt> | |||||
| </div> | |||||
| <div class="rqtext">Tiktok</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="tailText">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "" | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| submit() { | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (this.userName == "") { | |||||
| this.$message.error( | |||||
| this.characters == 1 ? "请输入姓名" : "Please enter your name" | |||||
| ); | |||||
| return; | |||||
| } else if (!phone.test(this.phone)) { | |||||
| this.$message.error( | |||||
| this.characters == 1 | |||||
| ? "请输入手机号" | |||||
| : "Please enter your mobile phone number" | |||||
| ); | |||||
| return; | |||||
| } else if (this.email == "") { | |||||
| this.$message.error( | |||||
| 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.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .tailBox { | |||||
| overflow: hidden; | |||||
| height: 578px; | |||||
| background: #f1f4f7; | |||||
| .taillong { | |||||
| width: 168px; | |||||
| height: 50px; | |||||
| margin-top: 60px; | |||||
| margin-left: 360px; | |||||
| img { | |||||
| width: 168px; | |||||
| height: 50px; | |||||
| } | |||||
| } | |||||
| .tiemBox{ | |||||
| overflow: hidden; | |||||
| margin-top: 20px; | |||||
| } | |||||
| .taolIconBox { | |||||
| margin-left: 380px; | |||||
| float: left; | |||||
| } | |||||
| .taolIconText { | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #323232; | |||||
| line-height: 62px; | |||||
| } | |||||
| .iconBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| width: 124px; | |||||
| img { | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| } | |||||
| } | |||||
| .contentBox { | |||||
| // position: absolute; | |||||
| // margin-top: 120px; | |||||
| float: left; | |||||
| margin-left: 260px; | |||||
| .contentInput { | |||||
| width: 286px; | |||||
| height: 36px; | |||||
| background: #ffffff; | |||||
| text-align: center; | |||||
| margin-bottom: 10px; | |||||
| input { | |||||
| width: 200px; | |||||
| height: 36px; | |||||
| } | |||||
| input::placeholder { | |||||
| font-weight: 400; | |||||
| color: #949494; | |||||
| } | |||||
| } | |||||
| .subBtn { | |||||
| width: 140px; | |||||
| height: 48px; | |||||
| background: #ffffff; | |||||
| border-radius: 24px; | |||||
| text-align: center; | |||||
| line-height: 48px; | |||||
| margin-top: 20px; | |||||
| cursor: pointer; | |||||
| font-size: 24px; | |||||
| } | |||||
| } | |||||
| .rqCodeBox { | |||||
| width: 360px; | |||||
| // position: absolute; | |||||
| // top: 130px; | |||||
| float: left; | |||||
| margin-left: 260px; | |||||
| .phone { | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| } | |||||
| .site { | |||||
| font-size: 14px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| margin-top: 10px; | |||||
| } | |||||
| .rqCodeTiemBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: 30px; | |||||
| .rqCodeTiem { | |||||
| overflow: hidden; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| .rqCodeTiem1 { | |||||
| margin-left: 30px; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .showBoxP { | |||||
| font-size: 16px !important; | |||||
| text-align: center !important; | |||||
| line-height: 20px !important; | |||||
| color: #696969 !important; | |||||
| } | |||||
| .tailText { | |||||
| // position: absolute; | |||||
| // width: 100%; | |||||
| // bottom: 6%; | |||||
| margin-top: 80px; | |||||
| // left: 0; | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| line-height: 62px; | |||||
| opacity: 0.5; | |||||
| } | |||||
| } | |||||
| ::-webkit-input-placeholder { | |||||
| /* WebKit browsers,webkit内核浏览器 */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| :-moz-placeholder { | |||||
| /* Mozilla Firefox 4 to 18 */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| ::-moz-placeholder { | |||||
| /* Mozilla Firefox 19+ */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| :-ms-input-placeholder { | |||||
| /* Internet Explorer 10+ */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| </style> | |||||
| <template> | |||||
| <div class="tailBox"> | |||||
| <div class="taillong"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LOGO1.png" | |||||
| alt | |||||
| /> | |||||
| <div class="taolIconBox"> | |||||
| <!-- <div class="taolIconText"> --> | |||||
| <!-- {{ characters == 1 ? "关注我们" : "follow Us" }} --> | |||||
| <!-- {{ characters == 1 ? "" : "" }} --> | |||||
| <!-- </div> --> | |||||
| <div class="iconBox"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png" | |||||
| alt | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="tiemBox" id="tiemBox"> | |||||
| <div v-if="false" class="taolIconBox"> | |||||
| <!-- <div class="taolIconText"> --> | |||||
| <!-- {{ characters == 1 ? "关注我们" : "follow Us" }} --> | |||||
| <!-- {{ characters == 1 ? "" : "" }} --> | |||||
| <!-- </div> --> | |||||
| <div class="iconBox"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png" | |||||
| alt | |||||
| /> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png" | |||||
| alt | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| <div class="contentBox"> | |||||
| <div class="taolIconText" style="margin-top: 0px"> | |||||
| {{ characters == 1 ? "联系我们" : "Contact us" }} | |||||
| </div> | |||||
| <!-- <div class="contentInput"> | |||||
| <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input> | |||||
| </div> | |||||
| <div class="subBtn" @click="submit()"> | |||||
| {{ characters == 1 ? '提交' : 'Submit' }} | |||||
| </div> --> | |||||
| <el-form v-if="showForm" ref="form" :rules="rules1" :model="form"> | |||||
| <el-form-item class="width" prop="userName"> | |||||
| <el-input | |||||
| v-model="form.userName" | |||||
| 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-form-item> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | |||||
| </el-form-item> | |||||
| <el-button class="subBtn1" type="primary" @click="submit()">{{ | |||||
| characters == 1 ? "提 交" : "Submit" | |||||
| }}</el-button> | |||||
| </el-form> | |||||
| </div> | |||||
| <div class="rqCodeBox"> | |||||
| <div class="phone">TEL:+86 152-1093-7300</div> | |||||
| <div class="site"> | |||||
| {{ | |||||
| characters == 1 | |||||
| ? "北京市海淀区中关村南大街12号农业科学院信息楼311室" | |||||
| : "311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing" | |||||
| }} | |||||
| </div> | |||||
| <div class="phone" v-if="characters == 1" style="margin-top: 10px"> | |||||
| 周女士 +65 9422 2858 | |||||
| </div> | |||||
| <div class="phone" v-if="characters != 1" style="margin-top: 10px"> | |||||
| Chow +65 9422 2858 | |||||
| </div> | |||||
| <div class="site"> | |||||
| {{ | |||||
| characters == 1 | |||||
| ? "新加坡北桥路111号,半岛广场07-11号,邮编179098" | |||||
| : "111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098" | |||||
| }} | |||||
| </div> | |||||
| <div v-if="characters == 1" class="rqCodeTiemBox"> | |||||
| <div class="rqCodeTiem"> | |||||
| <div class="rqcode"> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> --> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/vx.jpg" | |||||
| alt | |||||
| /> | |||||
| </div> | |||||
| <div class="rqtext">Wechat</div> | |||||
| </div> | |||||
| <div class="rqCodeTiem1"> | |||||
| <div class="rqcode"> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> --> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/dy.png" | |||||
| alt | |||||
| /> | |||||
| </div> | |||||
| <div class="rqtext">Tiktok</div> | |||||
| </div> | |||||
| </div> | |||||
| <div v-if="characters != 1" class="rqCodeTiemBox"> | |||||
| <div class="rqCodeTiem"> | |||||
| <div class="rqcode"> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> --> | |||||
| <img src="../../assets/img/vx_en.png" alt /> | |||||
| </div> | |||||
| <div class="rqtext">Wechat</div> | |||||
| </div> | |||||
| <div class="rqCodeTiem1"> | |||||
| <div class="rqcode"> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> --> | |||||
| <img src="../../assets/img/dy_en.png" alt /> | |||||
| </div> | |||||
| <div class="rqtext">Tiktok</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="tailText"> | |||||
| <!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 --> | |||||
| © 2021 Copyright 北京邃芒科技有限公司 版权所有 | |||||
| <a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| userName: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| userName: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rules1: null, | |||||
| showForm: true, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| submit() { | |||||
| // let phone = /^1[35789]\d{9}$/; | |||||
| // if (this.userName == '') { | |||||
| // this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name'); | |||||
| // return; | |||||
| // } else if (!phone.test(this.phone)) { | |||||
| // this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number'); | |||||
| // return; | |||||
| // } else if (this.email == '') { | |||||
| // this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address'); | |||||
| // return; | |||||
| // } | |||||
| // let params = { | |||||
| // mallName: this.email, //邮箱 | |||||
| // applicant: this.userName, //姓名 | |||||
| // phone: this.phone //电话 | |||||
| // }; | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.userName, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.email = ""; | |||||
| this.userName = ""; | |||||
| this.phone = ""; | |||||
| this.form.email = ""; | |||||
| this.form.userName = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| created() { | |||||
| this.rules1 = this.rules; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| watch: { | |||||
| characters: function (newValue) { | |||||
| this.showForm = false; | |||||
| if (newValue === 1) { | |||||
| this.rules1 = this.rules; | |||||
| } else { | |||||
| this.rules1 = this.rulesEnglish; | |||||
| } | |||||
| setTimeout(() => { | |||||
| this.showForm = true; | |||||
| }, 100); | |||||
| }, | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .tailBox { | |||||
| overflow: hidden; | |||||
| height: 508px; | |||||
| background: #f1f4f7; | |||||
| // padding-bottom: 54px; | |||||
| .taillong { | |||||
| padding-top: 20px; | |||||
| padding-left: 360px; | |||||
| // width: 168px; | |||||
| // height: 50px; | |||||
| // margin-top: 20px; | |||||
| // margin-left: 360px; | |||||
| > img { | |||||
| width: 168px; | |||||
| height: 50px; | |||||
| margin-bottom: 10px; | |||||
| } | |||||
| } | |||||
| .tiemBox { | |||||
| overflow: hidden; | |||||
| padding-left: 500px; | |||||
| // margin-top: 30px; | |||||
| } | |||||
| .taolIconBox { | |||||
| // margin-left: 380px; | |||||
| margin-left: 20px; | |||||
| // float: left; | |||||
| } | |||||
| .taolIconText { | |||||
| // margin-top: 20px; | |||||
| margin-bottom: 20px; | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #323232; | |||||
| // line-height: 62px; | |||||
| } | |||||
| .iconBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| width: 124px; | |||||
| img { | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| } | |||||
| } | |||||
| .contentBox { | |||||
| // position: absolute; | |||||
| // margin-top: 120px; | |||||
| float: left; | |||||
| margin-left: 260px; | |||||
| .contentInput { | |||||
| width: 286px; | |||||
| height: 36px; | |||||
| // background: #ffffff; | |||||
| text-align: center; | |||||
| margin-bottom: 11px; | |||||
| input { | |||||
| width: 200px; | |||||
| height: 36px; | |||||
| } | |||||
| input::placeholder { | |||||
| font-weight: 400; | |||||
| color: #949494; | |||||
| } | |||||
| } | |||||
| .subBtn { | |||||
| width: 140px; | |||||
| height: 48px; | |||||
| background: #ffffff; | |||||
| border-radius: 24px; | |||||
| text-align: center; | |||||
| line-height: 48px; | |||||
| margin-top: 24px; | |||||
| cursor: pointer; | |||||
| font-size: 14px; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #16e9d6; | |||||
| } | |||||
| } | |||||
| ::v-deep .el-form-item { | |||||
| width: 300px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| .subBtn1 { | |||||
| border: none; | |||||
| width: 140px; | |||||
| height: 48px; | |||||
| color: #191919; | |||||
| // margin-top: 15px; | |||||
| background: #ffffff; | |||||
| border-radius: 24px; | |||||
| text-align: center; | |||||
| line-height: 24px; | |||||
| cursor: pointer; | |||||
| font-size: 14px; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #16e9d6; | |||||
| } | |||||
| } | |||||
| } | |||||
| .rqCodeBox { | |||||
| // padding-top: -10px; | |||||
| width: 360px; | |||||
| // position: absolute; | |||||
| // top: 130px; | |||||
| float: left; | |||||
| margin-left: 260px; | |||||
| .phone { | |||||
| // margin-top: 10px; | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| } | |||||
| .site { | |||||
| font-size: 14px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| // margin-top: 10px; | |||||
| } | |||||
| .rqCodeTiemBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: 30px; | |||||
| .rqCodeTiem { | |||||
| overflow: hidden; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| .rqCodeTiem1 { | |||||
| margin-left: 30px; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .showBoxP { | |||||
| font-size: 16px !important; | |||||
| text-align: center !important; | |||||
| line-height: 20px !important; | |||||
| color: #696969 !important; | |||||
| } | |||||
| .tailText { | |||||
| // position: absolute; | |||||
| // width: 100%; | |||||
| // bottom: 6%; | |||||
| margin-top: 20px; | |||||
| // left: 0; | |||||
| text-align: center; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| line-height: 62px; | |||||
| opacity: 0.5; | |||||
| a { | |||||
| text-decoration: none; | |||||
| color: #333; | |||||
| } | |||||
| a:hover, | |||||
| a:visited, | |||||
| a:link, | |||||
| a:active { | |||||
| color: #333; | |||||
| // 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写 | |||||
| } | |||||
| } | |||||
| } | |||||
| ::-webkit-input-placeholder { | |||||
| /* WebKit browsers,webkit内核浏览器 */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| :-moz-placeholder { | |||||
| /* Mozilla Firefox 4 to 18 */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| ::-moz-placeholder { | |||||
| /* Mozilla Firefox 19+ */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| :-ms-input-placeholder { | |||||
| /* Internet Explorer 10+ */ | |||||
| color: #ccc; | |||||
| font-size: 16px; | |||||
| } | |||||
| .el-input.is-active .el-input__inner, | |||||
| .el-input__inner:focus { | |||||
| border-color: #16e9d6; | |||||
| outline: 0; | |||||
| } | |||||
| </style> | |||||
| @@ -1,163 +1,275 @@ | |||||
| <template> | |||||
| <div class="topBox"> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/logo.png" alt class="logo"> | |||||
| <div class="logoTitle">metavatar</div> | |||||
| </div> | |||||
| <div class="categoryBox"> | |||||
| <div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div> | |||||
| <div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div> | |||||
| <div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div> | |||||
| <!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> --> | |||||
| <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> | |||||
| </div> | |||||
| <div class="cutBox"> | |||||
| <div class="en"> | |||||
| <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> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| export default { | |||||
| name: "top", | |||||
| data() { | |||||
| return { | |||||
| languageLsit: [ | |||||
| { | |||||
| name: "Cn", | |||||
| value: 1, | |||||
| url: require("../../assets/img/cn.jpeg") | |||||
| }, | |||||
| { | |||||
| name: "En", | |||||
| value: 2, | |||||
| url: require("../../assets/img/en.jpg") | |||||
| } | |||||
| ], | |||||
| charactersMy: 1 | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| // languageLsit(newVal) { | |||||
| // this.setCharacters([ | |||||
| // { | |||||
| // name: "Cn", | |||||
| // value: 1 | |||||
| // }, | |||||
| // { | |||||
| // name: "En", | |||||
| // value: 2 | |||||
| // } | |||||
| // ]); | |||||
| // } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| go(url){ | |||||
| this.$router.push(url) | |||||
| }, | |||||
| }, | |||||
| mounted() { | |||||
| console.log(this.languageLsit, "characters"); | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .topBox { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 100; | |||||
| background-color: #fff; | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 20px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 20px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| width: 60px; | |||||
| height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 30%; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 6%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .categoryitem { | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem:hover{ | |||||
| background-color: #1358ba; | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 20px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 6px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .el-select{ | |||||
| width: 120px; | |||||
| } | |||||
| </style> | |||||
| <template> | |||||
| <div class="topBox" ref="scrollDiv"> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/logo.png" | |||||
| alt | |||||
| class="logo" | |||||
| /> | |||||
| <div class="logoTitle">metavatar</div> | |||||
| </div> | |||||
| <div class="categoryBox"> | |||||
| <div class="categoryitem"> | |||||
| <el-dropdown @command="handleCommand"> | |||||
| <span class="el-dropdown-link"> | |||||
| {{ characters == 1 ? "产品能力" : "Products" }} | |||||
| <i class="el-icon-arrow-down el-icon--right"></i> | |||||
| </span> | |||||
| <el-dropdown-menu slot="dropdown"> | |||||
| <el-dropdown-item command="PhotoTalk"> | |||||
| {{ characters == 1 ? "邃芒慧语" : "MetaTalker" }} | |||||
| </el-dropdown-item> | |||||
| <el-dropdown-item command="MetaGene"> | |||||
| {{ characters == 1 ? "邃芒慧生" : "MetaGene" }} | |||||
| </el-dropdown-item> | |||||
| <el-dropdown-item command="MetaNeuver">{{ | |||||
| characters == 1 ? "邃芒慧影" : "MetaNeuver" | |||||
| }}</el-dropdown-item> | |||||
| <el-dropdown-item command="MetaStreaming">{{ | |||||
| characters == 1 ? "邃芒慧播" : "MetaStreaming" | |||||
| }}</el-dropdown-item> | |||||
| <el-dropdown-item command="MetaTuring">{{ | |||||
| characters == 1 ? "邃芒慧侃" : "MetaTuring" | |||||
| }}</el-dropdown-item> | |||||
| <!-- <el-dropdown-item command="realTime">{{ | |||||
| characters == 1 ? "实时对话" : "实时对话" | |||||
| }}</el-dropdown-item> --> | |||||
| </el-dropdown-menu> | |||||
| </el-dropdown> | |||||
| </div> | |||||
| <div class="categoryitem" @click="goView('Technology')"> | |||||
| {{ characters == 1 ? "创新技术" : "Technology" }} | |||||
| </div> | |||||
| <div class="categoryitem" @click="goView('Solutions')"> | |||||
| {{ characters == 1 ? "解决方案" : "Solutions" }} | |||||
| </div> | |||||
| <!-- <div class="categoryitem" @click="goView('Cases')"> | |||||
| {{ characters == 1 ? "经典案例" : "Cases" }} | |||||
| </div> --> | |||||
| <div class="categoryitem" @click="goView('aboutUs')"> | |||||
| {{ characters == 1 ? "关于我们" : "About us" }} | |||||
| </div> | |||||
| <div class="categoryitem" @click="goView('tiemBox')"> | |||||
| {{ characters == 1 ? "联系我们" : "Contact us" }} | |||||
| </div> | |||||
| </div> | |||||
| <div class="cutBox"> | |||||
| <!-- <img src="@/assets/img/earth.png" alt="" /> --> | |||||
| <div class="en"> | |||||
| <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> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| export default { | |||||
| name: "top", | |||||
| data() { | |||||
| return { | |||||
| languageLsit: [ | |||||
| { | |||||
| name: "中文(中国)", | |||||
| value: 1, | |||||
| url: require("../../assets/img/cn.jpeg"), | |||||
| }, | |||||
| { | |||||
| name: "English(USA)", | |||||
| value: 2, | |||||
| url: require("../../assets/img/en.jpg"), | |||||
| }, | |||||
| ], | |||||
| charactersMy: 1, | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| handleCommand(path) { | |||||
| if (path == "PhotoTalk") { | |||||
| window.open("https://photo.metavatar.cc"); | |||||
| return; | |||||
| } | |||||
| if (path == "MetaNeuver") { | |||||
| window.open("https://neuver.metavatar.cc"); | |||||
| return; | |||||
| } | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| goView(id) { | |||||
| if (id == "Technology" || id == "Solutions" || id == "aboutUs") { | |||||
| this.$router.push(`/`); | |||||
| setTimeout(() => { | |||||
| document.querySelector("#" + id).scrollIntoView({ | |||||
| behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
| block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
| inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
| }); | |||||
| }, 100); | |||||
| } else { | |||||
| document.querySelector("#" + id).scrollIntoView({ | |||||
| behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
| block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
| inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
| }); | |||||
| } | |||||
| }, | |||||
| goPage(path) { | |||||
| this.$router.push(path); | |||||
| // this.goView(path); | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| // 滚动到顶部 | |||||
| handleScrollTop() { | |||||
| this.$nextTick(() => { | |||||
| let scrollElem = this.$refs.scrollDiv; | |||||
| scrollElem.scrollTo({ top: 0, behavior: "smooth" }); | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| mounted() { | |||||
| console.log(this.languageLsit, "characters"); | |||||
| }, | |||||
| created() { | |||||
| this.handleScrollTop(); | |||||
| // this.charactersMy = this.$store.state.publicObj.characters; | |||||
| // console.log(); | |||||
| // console.log(this.charactersMy); | |||||
| }, | |||||
| watch: { | |||||
| "$store.state.publicObj.characters": { | |||||
| handler(newVal) { | |||||
| console.log(newVal, "vuex"); | |||||
| this.charactersMy = newVal; | |||||
| }, | |||||
| }, | |||||
| // languageLsit(newVal) { | |||||
| // this.setCharacters([ | |||||
| // { | |||||
| // name: "Cn", | |||||
| // value: 1 | |||||
| // }, | |||||
| // { | |||||
| // name: "En", | |||||
| // value: 2 | |||||
| // } | |||||
| // ]); | |||||
| // } | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .topBox { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 100; | |||||
| background-color: #fff; | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 20px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 20px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| width: 60px; | |||||
| height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 30%; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 6%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .categoryitem { | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| .categoryitem:hover { | |||||
| color: #16e9d6; | |||||
| } | |||||
| .el-dropdown-menu__item:focus, | |||||
| .el-dropdown-menu__item:not(.is-disabled):hover { | |||||
| background-color: #16e9d6; | |||||
| color: #fff; | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 20px; | |||||
| margin-right: 100px; | |||||
| cursor: pointer; | |||||
| img { | |||||
| position: relative; | |||||
| bottom: 3px; | |||||
| float: left; | |||||
| width: 45px; | |||||
| height: 45px; | |||||
| margin-right: 5px; | |||||
| } | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 6px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .el-select { | |||||
| width: 150px; | |||||
| } | |||||
| .el-dropdown-link { | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,609 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div | |||||
| class="module_1" | |||||
| style="position: relative; background-color: #000; height: 800px" | |||||
| @click="goSetVedio(isPlayed)" | |||||
| > | |||||
| <video | |||||
| style="position: absolute; right: 250px" | |||||
| ref="videoPlayer" | |||||
| src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4" | |||||
| max-width="800px" | |||||
| height="800px" | |||||
| autoplay | |||||
| muted | |||||
| controls | |||||
| loop="loop" | |||||
| /> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> --> | |||||
| <div class="titleBox"> | |||||
| <div class="title_item1" v-if="characters == 1">邃芒慧生</div> | |||||
| <div class="title_item1_y" v-if="characters == 1"> | |||||
| AI全自动生成,高逼真自然度数字人 | |||||
| </div> | |||||
| <div class="desc" v-if="characters == 1"> | |||||
| <div> | |||||
| 满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象 | |||||
| </div> | |||||
| <div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div> | |||||
| </div> | |||||
| <!-- 英文部分 --> | |||||
| <div class="title_item1" v-if="characters != 1">MetaGene</div> | |||||
| <div class="title_item1_y" v-if="characters != 1"> | |||||
| AI platform generates high-fidelity, natural digital humans | |||||
| automatically by using labels and prompts. | |||||
| </div> | |||||
| <div class="desc" v-if="characters != 1"> | |||||
| <!-- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div> | |||||
| <div>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div> --> | |||||
| <div> | |||||
| Meets the demands of digital avatars, virtual creation, and original | |||||
| painting reproduction. With MetaGene, you can effortlessly create | |||||
| exclusive virtual IPs from scratch, eliminating concerns about IP | |||||
| copyright. In just minutes, you can finalize the IP image, ensuring | |||||
| a unique and original creation. | |||||
| </div> | |||||
| </div> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
| </div> | |||||
| </div> | |||||
| <div class="md1" id="md1"></div> | |||||
| </div> | |||||
| <div class="module_2"> | |||||
| <div class="title">Metavatar AI</div> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| </div> | |||||
| <div class="module_3"> | |||||
| <div class="title" v-if="characters == 1"> | |||||
| 保持人脸特征 自由调整各类心仪风格 | |||||
| </div> | |||||
| <div class="title" v-if="characters != 1"> | |||||
| Maintain facial features and freely adjust various favorite styles | |||||
| </div> | |||||
| <div class="style">STYLE</div> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| </div> | |||||
| <div class="module_4"> | |||||
| <div class="imgBox"> | |||||
| <div class="textInsideBox"> | |||||
| <div class="title" v-if="characters == 1"> | |||||
| 丰富的状态编辑 完整的IP形象展示 | |||||
| </div> | |||||
| <div class="title" v-if="characters != 1"> | |||||
| Rich status editing, complete IP image display | |||||
| </div> | |||||
| <div class="style">FULL AGE</div> | |||||
| </div> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| </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-form-item class="width" prop="name"> | |||||
| <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-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> | |||||
| </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"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| goSetVedio(flag) { | |||||
| if (flag) { | |||||
| this.$refs["videoII"].play(); | |||||
| } else { | |||||
| this.$refs["videoII"].pause(); | |||||
| } | |||||
| this.isPlayed = !flag; | |||||
| }, | |||||
| showBox() { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| this.$refs.videoPlayer.muted = false; | |||||
| this.$refs.videoPlayer.play(); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| .titleBox { | |||||
| width: 36%; | |||||
| position: absolute; | |||||
| top: 240px; | |||||
| left: 194px; | |||||
| overflow: hidden; | |||||
| color: #ffffff; | |||||
| .title_item1 { | |||||
| margin-bottom: 14px; | |||||
| font-size: 60px; | |||||
| } | |||||
| .title_item1_y { | |||||
| // margin-bottom: 14px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .title_item2 { | |||||
| margin-bottom: 20px; | |||||
| font-size: 42px; | |||||
| } | |||||
| .title_item3 { | |||||
| font-size: 16px; | |||||
| line-height: 30px; | |||||
| } | |||||
| .title_btn { | |||||
| margin-top: 60px; | |||||
| height: 60px; | |||||
| width: 220px; | |||||
| text-align: center; | |||||
| line-height: 60px; | |||||
| color: #ffffff; | |||||
| border-radius: 40px; | |||||
| border: #ffffff solid 3px; | |||||
| font-size: 18px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| border: #16e9d6 solid 3px; | |||||
| } | |||||
| } | |||||
| .desc { | |||||
| margin-top: 29px; | |||||
| font-size: 16px; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_2 { | |||||
| height: 930px; | |||||
| // height: 1080px; | |||||
| background-color: #fff; | |||||
| padding-top: 53px; | |||||
| // padding-top: 133px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 48px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #232324; | |||||
| line-height: 62px; | |||||
| margin-bottom: 44px; | |||||
| } | |||||
| img { | |||||
| width: 1293px; | |||||
| height: 798px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_3 { | |||||
| height: 850px; | |||||
| background-color: #ebeef7; | |||||
| padding-top: 53px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 82px; | |||||
| } | |||||
| .style { | |||||
| text-align: center; | |||||
| font-size: 24px; | |||||
| letter-spacing: 20px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 99px; | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 527px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_4 { | |||||
| height: 850px; | |||||
| background-color: #fff; | |||||
| padding-top: 26px; | |||||
| padding-left: 116px; | |||||
| text-align: center; | |||||
| .imgBox { | |||||
| position: relative; | |||||
| width: 1669px; | |||||
| height: 782px; | |||||
| .textInsideBox { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 40px; | |||||
| transform: translateX(-50%); | |||||
| // margin-left: 570px; | |||||
| z-index: 99; | |||||
| .title { | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| text-align: center; | |||||
| margin-bottom: 94px; | |||||
| } | |||||
| .style { | |||||
| font-size: 24px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| letter-spacing: 20px; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,651 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div class="module_1"> | |||||
| <img | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" | |||||
| width="100%" | |||||
| height="100%" | |||||
| /> | |||||
| <div class="titleBox"> | |||||
| <div class="title_item1" v-if="characters == 1">邃芒慧播</div> | |||||
| <div class="title_item1_y" v-if="characters == 1"> | |||||
| 直播虚拟人自然逼真,分身真假难辨 | |||||
| </div> | |||||
| <div class="desc" v-if="characters == 1"> | |||||
| <div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||||
| <div>能为您在各种场景下7*24工作</div> | |||||
| </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="desc" v-if="characters != 1"> | |||||
| <!-- <div>Virtual live broadcast solves real-world problems such as production capacity of real people, IP ownership, etc. by virtual digital human</div> | |||||
| <div>Can work for you 7*24 in various scenarios</div> --> | |||||
| <div> | |||||
| Virtual live broadcasting solves real-world challenges like | |||||
| production capacity and IP ownership by utilizing virtual digital | |||||
| humans. These virtual counterparts work 24/7 across various | |||||
| scenarios. | |||||
| </div> | |||||
| </div> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
| </div> | |||||
| </div> | |||||
| <div class="md1" id="md1"></div> | |||||
| </div> | |||||
| <div class="module_2"> | |||||
| <div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div> | |||||
| <!-- <div class="title" v-if="characters != 1">Digital live broadcasting manipulated by AI, text, voice, video etc.to free real people workforce on camera.</div> --> | |||||
| <div class="title" v-if="characters != 1"> | |||||
| AI-powered digital live broadcasting frees real people from on-camera | |||||
| work by utilizing text, voice, and video. | |||||
| </div> | |||||
| <div class="imgBox"> | |||||
| <li style="position: relative"> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png" | |||||
| alt="" | |||||
| /> | |||||
| <div class="textInImg" v-if="characters != 1">中の人</div> | |||||
| </li> | |||||
| <li style="position: relative"> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png" | |||||
| alt="" | |||||
| /> | |||||
| <div class="textInImg" v-if="characters != 1"> | |||||
| Virtual human frees real person | |||||
| </div> | |||||
| </li> | |||||
| <li style="position: relative"> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png" | |||||
| alt="" | |||||
| /> | |||||
| <div class="textInImg" v-if="characters != 1">Cartoon character</div> | |||||
| </li> | |||||
| <div class="redCard" v-if="characters == 1">无缝接入各主流平台</div> | |||||
| <div class="redCard" v-if="characters != 1"> | |||||
| Seamless access to all platforms, tictok,intagram, facebook,wechat | |||||
| etc. | |||||
| </div> | |||||
| <div class="pinkCard" v-if="characters == 1"> | |||||
| IP版权归属明确 无后顾之忧 | |||||
| </div> | |||||
| <div class="pinkCard" v-if="characters != 1"> | |||||
| No IP copyright concerns | |||||
| </div> | |||||
| <div class="blueCard" v-if="characters == 1"> | |||||
| 出镜声形从此统一 打造沉淀企业IP | |||||
| </div> | |||||
| <div class="blueCard" v-if="characters != 1"> | |||||
| Unified voice and appearance for digital IP of the precipitation | |||||
| enterprise will be created。 | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="module_3"> | |||||
| <div class="title" v-if="characters == 1">脚本驱动数字人直播</div> | |||||
| <div class="title" v-if="characters != 1"> | |||||
| Script-driven digital human live broadcast | |||||
| </div> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png" | |||||
| alt="" | |||||
| /> | |||||
| </div> | |||||
| <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-form-item> | |||||
| <el-form-item class="width" prop="phone"> | |||||
| <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> | |||||
| </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"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| showBox() { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| .titleBox { | |||||
| width: 36%; | |||||
| position: absolute; | |||||
| top: 240px; | |||||
| left: 194px; | |||||
| overflow: hidden; | |||||
| color: #fefefe; | |||||
| .title_item1 { | |||||
| margin-bottom: 14px; | |||||
| font-size: 60px; | |||||
| } | |||||
| .title_item1_y { | |||||
| // margin-bottom: 14px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .title_item2 { | |||||
| margin-bottom: 20px; | |||||
| font-size: 42px; | |||||
| } | |||||
| .title_item3 { | |||||
| font-size: 16px; | |||||
| line-height: 30px; | |||||
| } | |||||
| .title_btn { | |||||
| margin-top: 60px; | |||||
| height: 60px; | |||||
| width: 220px; | |||||
| text-align: center; | |||||
| line-height: 60px; | |||||
| color: #fefefe; | |||||
| border-radius: 40px; | |||||
| border: #fefefe solid 3px; | |||||
| font-size: 18px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| border: #16e9d6 solid 3px; | |||||
| } | |||||
| } | |||||
| .desc { | |||||
| margin-top: 29px; | |||||
| font-size: 16px; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_2 { | |||||
| height: 810px; | |||||
| background: #ffffff; | |||||
| padding-top: 32px; | |||||
| padding-left: 331px; | |||||
| padding-right: 306px; | |||||
| .title { | |||||
| text-align: center; | |||||
| margin-bottom: 52px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .imgBox { | |||||
| display: flex; | |||||
| position: relative; | |||||
| justify-content: space-between; | |||||
| text-align: center; | |||||
| li { | |||||
| list-style: none; | |||||
| margin-right: 7px; | |||||
| .textInImg { | |||||
| position: absolute; | |||||
| top: 20px; | |||||
| left: 20px; | |||||
| width: 10px; | |||||
| font-size: 35px; | |||||
| line-height: 35px; | |||||
| color: #fff; | |||||
| font-weight: 900; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| img { | |||||
| width: 423px; | |||||
| height: 639px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548); | |||||
| transform: translateY(-20px); | |||||
| } | |||||
| &:hover ~ .textInImg { | |||||
| transform: translateY(-20px); | |||||
| } | |||||
| } | |||||
| img:hover .textInImg { | |||||
| top: -5px; | |||||
| } | |||||
| } | |||||
| .redCard { | |||||
| position: absolute; | |||||
| left: -111px; | |||||
| bottom: 69px; | |||||
| width: 230px; | |||||
| // height: 50px; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| text-align: center; | |||||
| color: #ffffff; | |||||
| line-height: 46px; | |||||
| border-radius: 4px; | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
| background: #e7627b; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| .pinkCard { | |||||
| position: absolute; | |||||
| left: 325px; | |||||
| bottom: 204px; | |||||
| width: 288px; | |||||
| height: 50px; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 46px; | |||||
| border-radius: 4px; | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
| background: #dc62e7; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| .blueCard { | |||||
| position: absolute; | |||||
| right: -49px; | |||||
| bottom: 51px; | |||||
| width: 321px; | |||||
| // height: 50px; | |||||
| font-size: 18px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 46px; | |||||
| border-radius: 4px; | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548); | |||||
| background: #6462e7; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_3 { | |||||
| height: 700px; | |||||
| background-color: #ebeef7; | |||||
| padding-top: 33px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: -25px; | |||||
| } | |||||
| img { | |||||
| width: 1446px; | |||||
| height: 638px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,504 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div | |||||
| class="module_1" | |||||
| style="position: relative; background-color: #000; height: 800px" | |||||
| @click="goSetVedio(isPlayed)" | |||||
| > | |||||
| <video | |||||
| style="position: absolute; right: 250px" | |||||
| ref="videoPlayer" | |||||
| src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4" | |||||
| max-width="800px" | |||||
| height="800px" | |||||
| autoplay | |||||
| muted | |||||
| controls | |||||
| loop="loop" | |||||
| /> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> --> | |||||
| <div class="titleBox"> | |||||
| <div class="title_item1" v-if="characters == 1"> | |||||
| We breathe life into generative AI | |||||
| </div> | |||||
| <!-- 英文部分 --> | |||||
| <div class="title_item1" v-if="characters != 1"> | |||||
| We breathe life into generative AI | |||||
| </div> | |||||
| <div class="title_btn" @click="startTalking"> | |||||
| {{ characters == 1 ? "开始对话" : "Start to talk" }} | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import "swiper/dist/js/swiper"; | |||||
| import "swiper/dist/css/swiper.css"; | |||||
| import Swiper from "swiper"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| goSetVedio(flag) { | |||||
| if (flag) { | |||||
| this.$refs["videoII"].play(); | |||||
| } else { | |||||
| this.$refs["videoII"].pause(); | |||||
| } | |||||
| this.isPlayed = !flag; | |||||
| }, | |||||
| showBox() { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| startTalking() { | |||||
| this.$router.push("/realTimeC"); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| this.$refs.videoPlayer.muted = false; | |||||
| this.$refs.videoPlayer.play(); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| .titleBox { | |||||
| width: 36%; | |||||
| position: absolute; | |||||
| top: 240px; | |||||
| left: 194px; | |||||
| overflow: hidden; | |||||
| color: #ffffff; | |||||
| .title_item1 { | |||||
| margin-bottom: 14px; | |||||
| font-size: 60px; | |||||
| } | |||||
| .title_item1_y { | |||||
| // margin-bottom: 14px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .title_item2 { | |||||
| margin-bottom: 20px; | |||||
| font-size: 42px; | |||||
| } | |||||
| .title_item3 { | |||||
| font-size: 16px; | |||||
| line-height: 30px; | |||||
| } | |||||
| .title_btn { | |||||
| margin-top: 60px; | |||||
| height: 60px; | |||||
| width: 220px; | |||||
| text-align: center; | |||||
| line-height: 60px; | |||||
| color: #ffffff; | |||||
| border-radius: 40px; | |||||
| border: #ffffff solid 3px; | |||||
| font-size: 18px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| border: #16e9d6 solid 3px; | |||||
| } | |||||
| } | |||||
| .desc { | |||||
| margin-top: 29px; | |||||
| font-size: 16px; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_2 { | |||||
| height: 930px; | |||||
| // height: 1080px; | |||||
| background-color: #fff; | |||||
| padding-top: 53px; | |||||
| // padding-top: 133px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 48px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #232324; | |||||
| line-height: 62px; | |||||
| margin-bottom: 44px; | |||||
| } | |||||
| img { | |||||
| width: 1293px; | |||||
| height: 798px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_3 { | |||||
| height: 850px; | |||||
| background-color: #ebeef7; | |||||
| padding-top: 53px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 82px; | |||||
| } | |||||
| .style { | |||||
| text-align: center; | |||||
| font-size: 24px; | |||||
| letter-spacing: 20px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 99px; | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 527px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_4 { | |||||
| height: 850px; | |||||
| background-color: #fff; | |||||
| padding-top: 26px; | |||||
| padding-left: 116px; | |||||
| text-align: center; | |||||
| .imgBox { | |||||
| position: relative; | |||||
| width: 1669px; | |||||
| height: 782px; | |||||
| .textInsideBox { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 40px; | |||||
| transform: translateX(-50%); | |||||
| // margin-left: 570px; | |||||
| z-index: 99; | |||||
| .title { | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| text-align: center; | |||||
| margin-bottom: 94px; | |||||
| } | |||||
| .style { | |||||
| font-size: 24px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| letter-spacing: 20px; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,463 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div class="module_1" style="background-color: #fafffc"> | |||||
| <img style="width: 55%" src="../../assets/img/demo.png" alt="" /> | |||||
| <div class="itemBox left"> | |||||
| <img src="../../assets/icon/voice.png" alt="" /> | |||||
| </div> | |||||
| <div class="itemBox right"> | |||||
| <img src="../../assets/icon/input.png" alt="" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import "swiper/dist/js/swiper"; | |||||
| import "swiper/dist/css/swiper.css"; | |||||
| import Swiper from "swiper"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| goSetVedio(flag) { | |||||
| if (flag) { | |||||
| this.$refs["videoII"].play(); | |||||
| } else { | |||||
| this.$refs["videoII"].pause(); | |||||
| } | |||||
| this.isPlayed = !flag; | |||||
| }, | |||||
| showBox() { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| startTalking() { | |||||
| this.$router.push(""); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| this.$refs.videoPlayer.muted = false; | |||||
| this.$refs.videoPlayer.play(); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| text-align: center; | |||||
| .itemBox { | |||||
| position: absolute; | |||||
| bottom: 50px; | |||||
| width: 50px; | |||||
| height: 50px; | |||||
| background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); | |||||
| border-radius: 50%; | |||||
| text-align: center; | |||||
| padding: 20px; | |||||
| transition: all 0.3s; | |||||
| cursor: pointer; | |||||
| &.left { | |||||
| left: 250px; | |||||
| } | |||||
| &.right { | |||||
| right: 250px; | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| &:hover { | |||||
| opacity: 0.8; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_2 { | |||||
| height: 930px; | |||||
| // height: 1080px; | |||||
| background-color: #fff; | |||||
| padding-top: 53px; | |||||
| // padding-top: 133px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 48px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #232324; | |||||
| line-height: 62px; | |||||
| margin-bottom: 44px; | |||||
| } | |||||
| img { | |||||
| width: 1293px; | |||||
| height: 798px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_3 { | |||||
| height: 850px; | |||||
| background-color: #ebeef7; | |||||
| padding-top: 53px; | |||||
| text-align: center; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 82px; | |||||
| } | |||||
| .style { | |||||
| text-align: center; | |||||
| font-size: 24px; | |||||
| letter-spacing: 20px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 99px; | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 527px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_4 { | |||||
| height: 850px; | |||||
| background-color: #fff; | |||||
| padding-top: 26px; | |||||
| padding-left: 116px; | |||||
| text-align: center; | |||||
| .imgBox { | |||||
| position: relative; | |||||
| width: 1669px; | |||||
| height: 782px; | |||||
| .textInsideBox { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 40px; | |||||
| transform: translateX(-50%); | |||||
| // margin-left: 570px; | |||||
| z-index: 99; | |||||
| .title { | |||||
| font-size: 36px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| text-align: center; | |||||
| margin-bottom: 94px; | |||||
| } | |||||
| .style { | |||||
| font-size: 24px; | |||||
| font-family: Alibaba PuHuiTi; | |||||
| font-weight: 400; | |||||
| letter-spacing: 20px; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,650 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div | |||||
| class="module_1" | |||||
| style="position: relative; background-color: #7868ca; height: 800px" | |||||
| > | |||||
| <video | |||||
| ref="videoPlayer" | |||||
| style="position: absolute; right: 250px" | |||||
| src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4" | |||||
| max-width="800px" | |||||
| height="800px" | |||||
| autoplay | |||||
| muted | |||||
| controls | |||||
| 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="desc" v-if="characters == 1"> | |||||
| <div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div> | |||||
| <div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div> | |||||
| </div> | |||||
| <!-- 英文部分 --> | |||||
| <div class="title_item1" v-if="characters != 1">MetaNeuver</div> | |||||
| <div class="title_item1_y" v-if="characters != 1"> | |||||
| Supports multimodal user input, text, voice, and source video. | |||||
| </div> | |||||
| <div class="desc" v-if="characters != 1"> | |||||
| <div> | |||||
| Allows your digital human to seamlessly cross the uncanny valley, | |||||
| ensuring an immersive and believable experience.enabling content | |||||
| production at any time and keeping up with all the latest trends. | |||||
| </div> | |||||
| <div v-if="false"> | |||||
| High naturalness and realism let your digital human completely cross | |||||
| the uncanny valley | |||||
| </div> | |||||
| </div> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
| </div> | |||||
| </div> | |||||
| <div class="md1" id="md1"></div> | |||||
| </div> | |||||
| <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" | |||||
| /> | |||||
| 步完成一条数字人视频内容生成 | |||||
| </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" | |||||
| /> | |||||
| 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="" | |||||
| /> | |||||
| </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="" | |||||
| /> | |||||
| </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="" | |||||
| /> | |||||
| </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="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4" /> --> | |||||
| <video | |||||
| ref="videoII" | |||||
| src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4" | |||||
| /> | |||||
| </div> | |||||
| <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> --> | |||||
| </li> | |||||
| </div> | |||||
| </div> | |||||
| <div class="module_3"> | |||||
| <div class="title" v-if="characters == 1">中之人驱动</div> | |||||
| <div class="title" v-if="characters != 1">“中の人” driving</div> | |||||
| <img | |||||
| v-if="characters == 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png" | |||||
| alt="" | |||||
| /> | |||||
| <img | |||||
| v-if="characters != 1" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png" | |||||
| alt="" | |||||
| /> | |||||
| </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-form-item class="width" prop="name"> | |||||
| <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-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> | |||||
| </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"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| isPlayed: true, | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| goSetVedio(flag) { | |||||
| if (flag) { | |||||
| this.$refs["videoII"].play(); | |||||
| } else { | |||||
| this.$refs["videoII"].pause(); | |||||
| } | |||||
| this.isPlayed = !flag; | |||||
| }, | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| showBox() { | |||||
| 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"。 | |||||
| }); | |||||
| // console.log(document.querySelector(id),); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| this.$refs.videoPlayer.muted = false; | |||||
| this.$refs.videoPlayer.play(); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| .titleBox { | |||||
| width: 36%; | |||||
| position: absolute; | |||||
| top: 240px; | |||||
| left: 194px; | |||||
| overflow: hidden; | |||||
| // color: #323232; | |||||
| color: #fff; | |||||
| .title_item1 { | |||||
| margin-bottom: 14px; | |||||
| font-size: 60px; | |||||
| } | |||||
| .title_item1_y { | |||||
| // margin-bottom: 14px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .title_item2 { | |||||
| margin-bottom: 20px; | |||||
| font-size: 42px; | |||||
| } | |||||
| .title_item3 { | |||||
| font-size: 16px; | |||||
| line-height: 30px; | |||||
| } | |||||
| .title_btn { | |||||
| margin-top: 60px; | |||||
| height: 60px; | |||||
| width: 220px; | |||||
| text-align: center; | |||||
| line-height: 60px; | |||||
| color: #fff; | |||||
| // color: #323232; | |||||
| border-radius: 40px; | |||||
| border: #fff solid 3px; | |||||
| // border: #323232 solid 3px; | |||||
| font-size: 18px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| border: #16e9d6 solid 3px; | |||||
| } | |||||
| } | |||||
| .desc { | |||||
| margin-top: 29px; | |||||
| font-size: 16px; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_2 { | |||||
| height: 760px; | |||||
| background: #ffffff; | |||||
| padding-top: 32px; | |||||
| padding-left: 116px; | |||||
| padding-right: 85px; | |||||
| .title { | |||||
| text-align: center; | |||||
| margin-bottom: 72px; | |||||
| font-size: 36px; | |||||
| img { | |||||
| position: relative; | |||||
| top: 18px; | |||||
| width: 59px; | |||||
| height: 60px; | |||||
| } | |||||
| } | |||||
| .images { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| li { | |||||
| list-style: none; | |||||
| margin-right: 9px; | |||||
| > img { | |||||
| width: 423px; | |||||
| height: 540px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548); | |||||
| transform: translateY(-20px); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .videoLi { | |||||
| overflow: hidden; | |||||
| .imgBox1 { | |||||
| position: relative; | |||||
| float: left; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| cursor: pointer; | |||||
| .play { | |||||
| position: absolute; | |||||
| top: 42%; | |||||
| left: 38%; | |||||
| transform: translate(-50%, -50%); | |||||
| width: 100px; | |||||
| height: 100px; | |||||
| z-index: 99; | |||||
| transition: all 0.3s; | |||||
| transform: scale(10); | |||||
| opacity: 0; | |||||
| } | |||||
| // background-color: #16e9d6; | |||||
| video { | |||||
| background-color: #7868ca; | |||||
| width: 423px; | |||||
| height: 540px; | |||||
| } | |||||
| &:hover { | |||||
| .play { | |||||
| transform: scale(1); | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .module_3 { | |||||
| height: 810px; | |||||
| background-color: #ebeef7; | |||||
| padding-top: 33px; | |||||
| text-align: center; | |||||
| transition: all 0.3s; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 48px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #4d4d4d; | |||||
| line-height: 36px; | |||||
| margin-bottom: 44px; | |||||
| } | |||||
| img { | |||||
| width: 1250px; | |||||
| height: 665px; | |||||
| opacity: 0.85; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,563 @@ | |||||
| <template> | |||||
| <div class="Box" id="top"> | |||||
| <div class="module_1"> | |||||
| <img | |||||
| ref="vidoe" | |||||
| src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LiLei@2x.png" | |||||
| width="100%" | |||||
| height="100%" | |||||
| autoplay | |||||
| muted="muted" | |||||
| loop="loop" | |||||
| /> | |||||
| <div class="titleBox"> | |||||
| <div class="title_item1" v-if="characters == 1">邃芒慧侃</div> | |||||
| <!-- <div class="title_item3" v-if="characters == 1"> | |||||
| 轻松创造您独一无二的数字人IP | |||||
| </div> --> | |||||
| <!-- <div class="title_item3" v-if="characters==1">创造生成 超真实 超写实 风格化 不同性别</div> | |||||
| <div class="title_item3" v-if="characters==1">多人种 分身化身随心创造</div> --> | |||||
| <div class="title_item1_y" v-if="characters == 1">与李雷成为朋友</div> | |||||
| <div class="title_item1" v-if="characters != 1">MetaTuring</div> | |||||
| <div class="title_item1_y" v-if="characters != 1"> | |||||
| Be friend with Lee | |||||
| </div> | |||||
| <!-- <div class="title_item3" v-if="characters != 1"> | |||||
| Easily create your unique digital IP | |||||
| </div> --> | |||||
| <div | |||||
| class="title_btn" | |||||
| @click="showBox" | |||||
| v-if="$store.state.publicObj.showTryItNow" | |||||
| > | |||||
| {{ characters == 1 ? "与李雷交谈" : "coming soon" }} | |||||
| </div> | |||||
| </div> | |||||
| <div class="md1" id="md1"></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-form-item class="width" prop="name"> | |||||
| <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-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> | |||||
| </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"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| //零时存放 | |||||
| charactersMy: 1, | |||||
| languageLsit: [ | |||||
| { | |||||
| name: "Cn", | |||||
| value: 1, | |||||
| url: require("../../assets/img/cn.jpeg"), | |||||
| }, | |||||
| { | |||||
| name: "En", | |||||
| value: 2, | |||||
| url: require("../../assets/img/en.jpg"), | |||||
| }, | |||||
| ], | |||||
| // | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| form: { | |||||
| name: "", | |||||
| phone: "", | |||||
| email: "", | |||||
| }, | |||||
| rules: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "此项必填,内容最大10个字符!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请先输手机号", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "change", | |||||
| message: "请输入邮箱!", | |||||
| trigger: "blur", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: "This item is required !", | |||||
| trigger: "blur", | |||||
| }, | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| 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(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // characters: 1, //1=》中文 2=》英文 | |||||
| timeFlag: 5, | |||||
| dialogVisible: false, | |||||
| module_6_data: [ | |||||
| { | |||||
| url: require("../../assets/img/demo_1.png"), | |||||
| name: "增加电子商务销售额", | |||||
| name_y: "Increase eCommerce sales", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_2.png"), | |||||
| name: "推动品牌声誉", | |||||
| name_y: "Drive Brand engagement", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_3.png"), | |||||
| name: "拓展客户服务", | |||||
| name_y: "Scale customer service", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_4.png"), | |||||
| name: " 节约您的劳动成本", | |||||
| name_y: " Augment your current workforce", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_5.png"), | |||||
| name: " 提供支持和陪伴", | |||||
| name_y: "Provide support and companionship", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_6.png"), | |||||
| name: "投资元宇宙的未来", | |||||
| name_y: "Deliver knowledge and learning", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_7.png"), | |||||
| name: "数字化名人的力量", | |||||
| name_y: "Leverage the power of Digital Celebrities", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/demo_8.png"), | |||||
| name: "传递学习和知识", | |||||
| name_y: " Invest in the metaverse future", | |||||
| }, | |||||
| ], | |||||
| carouselLsit: [ | |||||
| { | |||||
| url: require("../../assets/img/carousel1.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel2.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel3.png"), | |||||
| }, | |||||
| ], | |||||
| partnerLsit: [ | |||||
| { | |||||
| url: require("../../assets/img/partner1.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/partner2.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/partner3.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/partner4.png"), | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/partner5.png"), | |||||
| }, | |||||
| ], | |||||
| timeLsit: [ | |||||
| { | |||||
| title: "2018-10", | |||||
| ctn1_y: "Team built up in Oct. 2018", | |||||
| // ctn2_y: "Team built up in Oct. 2018", | |||||
| ctn1: "团队组建", | |||||
| // ctn2: "团队组建" | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel2.png"), | |||||
| title: "2019", | |||||
| ctn1_y: "Deliver the first movie project in May. 2019", | |||||
| // ctn2_y: "Deliver the first movie project in May. 2019", | |||||
| ctn1: "第一个影视特效 ", | |||||
| ctn2: "项目交付", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel3.png"), | |||||
| title: "2021-05", | |||||
| ctn1_y: "Beta of MetaGene published in May,2021", | |||||
| // ctn2_y: "Beta of MetaGene published in May,2021", | |||||
| ctn1: "内部产品", | |||||
| ctn2: "Metagene V1完成", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel3.png"), | |||||
| title: "2021-08", | |||||
| ctn1_y: "Metavatar built up in Aug, 2021", | |||||
| // ctn2_y: "Metavatar built up in Aug, 2021", | |||||
| ctn1: "邃芒科技成立", | |||||
| // ctn2: "邃芒科技成立", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel3.png"), | |||||
| title: "2022-01", | |||||
| ctn1_y: "Angel fund in Jan, 2022", | |||||
| // ctn2_y: "Angel fund in Jan, 2022", | |||||
| ctn1: "获得天使轮融资", | |||||
| // ctn2: "获得天使轮融资", | |||||
| }, | |||||
| { | |||||
| url: require("../../assets/img/carousel3.png"), | |||||
| title: "2022-06", | |||||
| ctn1_y: | |||||
| "Deliver the first project based on Magenta for our strategic partner in Jun,2022", | |||||
| // ctn2_y: "Beta of MetaGene published in May,2021", | |||||
| ctn1: "为战略合作伙伴新奥特", | |||||
| ctn2: "交付首个基于MetaGene的内容生产项目", | |||||
| }, | |||||
| ], | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| change(value) { | |||||
| console.log(value); | |||||
| this.setCharacters(value); | |||||
| }, | |||||
| showBox() { | |||||
| this.dialogVisible = true; | |||||
| }, | |||||
| goView(id) { | |||||
| document.querySelector("#" + id).scrollIntoView({ | |||||
| //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
| block: "start", | |||||
| //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
| inline: "nearest", | |||||
| //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
| behavior: "smooth", | |||||
| }); | |||||
| }, | |||||
| goPages(path) { | |||||
| this.$router.push(`/${path}`); | |||||
| }, | |||||
| submit() { | |||||
| this.$refs.form.validate((valid) => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.name, //姓名 | |||||
| phone: this.form.phone, //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/C/api/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| }, | |||||
| data: params, | |||||
| }) | |||||
| .then((res) => { | |||||
| this.form.email = ""; | |||||
| this.form.name = ""; | |||||
| this.form.phone = ""; | |||||
| this.$message.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| this.dialogVisible = false; | |||||
| }) | |||||
| .catch((err) => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| mounted() { | |||||
| // console.log(); | |||||
| // this.$refs["vidoe"].play(); | |||||
| new Swiper(".swiper-container", { | |||||
| slidesPerView: 3, | |||||
| spaceBetween: 30, | |||||
| centeredSlides: true, | |||||
| loop: true, | |||||
| // 如果需要分页器 | |||||
| pagination: { | |||||
| el: ".swiper-pagination", | |||||
| clickable: true, // 分页器可以点击 | |||||
| }, | |||||
| // 如果需要前进后退按钮 | |||||
| navigation: { | |||||
| nextEl: ".swiper-button-next", | |||||
| prevEl: ".swiper-button-prev", | |||||
| }, | |||||
| // 如果需要滚动条 | |||||
| scrollbar: { | |||||
| el: ".swiper-scrollbar", | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| created() { | |||||
| this.$nextTick(() => { | |||||
| this.goView("top"); | |||||
| }); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .topBox { | |||||
| width: 90%; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 1000; | |||||
| // background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .logoBox { | |||||
| margin-top: 35px; | |||||
| margin-left: 35px; | |||||
| margin-bottom: 35px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| // width: 60px; | |||||
| // height: 30px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 30px; | |||||
| margin-left: 10px; | |||||
| font-size: 22px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 30px; | |||||
| width: 600px; | |||||
| float: left; | |||||
| margin-top: 20px; | |||||
| margin-left: 16%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| cursor: pointer; | |||||
| } | |||||
| .categoryitem { | |||||
| width: 110px; | |||||
| line-height: 30px; | |||||
| color: #7d7d7d; | |||||
| font-size: 15px; | |||||
| // background-color: #16e9d6 | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 35px; | |||||
| margin-right: 50px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .module_1 { | |||||
| width: 100%; | |||||
| // height: 1080px; | |||||
| // background-color: aquamarine; | |||||
| // background-image: url("../../assets/img/bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| overflow: hidden; | |||||
| position: relative; | |||||
| margin-top: 80px; | |||||
| background-color: #f1f4f7; | |||||
| .titleBox { | |||||
| width: 36%; | |||||
| position: absolute; | |||||
| top: 390px; | |||||
| left: 190px; | |||||
| overflow: hidden; | |||||
| color: #fff; | |||||
| .title_item1 { | |||||
| margin-bottom: 14px; | |||||
| font-size: 60px; | |||||
| } | |||||
| .title_item1_y { | |||||
| // margin-bottom: 14px; | |||||
| font-size: 36px; | |||||
| } | |||||
| .title_item2 { | |||||
| margin-bottom: 20px; | |||||
| font-size: 42px; | |||||
| } | |||||
| .title_item3 { | |||||
| font-size: 16px; | |||||
| line-height: 30px; | |||||
| } | |||||
| .title_btn { | |||||
| margin-top: 60px; | |||||
| height: 60px; | |||||
| width: 220px; | |||||
| text-align: center; | |||||
| line-height: 60px; | |||||
| color: #fff; | |||||
| border-radius: 40px; | |||||
| border: #fff solid 3px; | |||||
| font-size: 18px; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #16e9d6; | |||||
| border: #16e9d6 solid 3px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -4,28 +4,28 @@ import { register } from 'register-service-worker' | |||||
| if (process.env.NODE_ENV === 'production') { | if (process.env.NODE_ENV === 'production') { | ||||
| register(`${process.env.BASE_URL}service-worker.js`, { | register(`${process.env.BASE_URL}service-worker.js`, { | ||||
| ready () { | |||||
| ready() { | |||||
| console.log( | console.log( | ||||
| 'App is being served from cache by a service worker.\n' + | 'App is being served from cache by a service worker.\n' + | ||||
| 'For more details, visit https://goo.gl/AFskqB' | 'For more details, visit https://goo.gl/AFskqB' | ||||
| ) | ) | ||||
| }, | }, | ||||
| registered () { | |||||
| registered() { | |||||
| console.log('Service worker has been registered.') | console.log('Service worker has been registered.') | ||||
| }, | }, | ||||
| cached () { | |||||
| cached() { | |||||
| console.log('Content has been cached for offline use.') | console.log('Content has been cached for offline use.') | ||||
| }, | }, | ||||
| updatefound () { | |||||
| updatefound() { | |||||
| console.log('New content is downloading.') | console.log('New content is downloading.') | ||||
| }, | }, | ||||
| updated () { | |||||
| updated() { | |||||
| console.log('New content is available; please refresh.') | console.log('New content is available; please refresh.') | ||||
| }, | }, | ||||
| offline () { | |||||
| offline() { | |||||
| console.log('No internet connection found. App is running in offline mode.') | console.log('No internet connection found. App is running in offline mode.') | ||||
| }, | }, | ||||
| error (error) { | |||||
| error(error) { | |||||
| console.error('Error during service worker registration:', error) | console.error('Error during service worker registration:', error) | ||||
| } | } | ||||
| }) | }) | ||||
| @@ -8,32 +8,64 @@ const originalPush = VueRouter.prototype.push | |||||
| VueRouter.prototype.push = function push(location) { | VueRouter.prototype.push = function push(location) { | ||||
| return originalPush.call(this, location).catch(err => err) | return originalPush.call(this, location).catch(err => err) | ||||
| } | } | ||||
| const routes = [ | const routes = [ | ||||
| { | { | ||||
| path: '/', | path: '/', | ||||
| name: 'Home', | name: 'Home', | ||||
| // component: Home | |||||
| component: ()=> import("../components/home/home"), | |||||
| component: () => import("../components/home/home"), | |||||
| }, | |||||
| { | |||||
| path: '/index.html', | |||||
| name: 'Home', | |||||
| component: () => import("../components/home/home"), | |||||
| }, | }, | ||||
| { | { | ||||
| path: '/aboutUe', | |||||
| name: 'aboutUe', | |||||
| // component: Home | |||||
| component: ()=> import("../components/aboutUe/aboutUe"), | |||||
| path: '/aboutUs', | |||||
| name: 'aboutUs', | |||||
| component: () => import("../components/aboutUs/aboutUs"), | |||||
| }, | }, | ||||
| { | { | ||||
| path: '/styleAdd', | path: '/styleAdd', | ||||
| name: 'styleAdd', | name: 'styleAdd', | ||||
| // component: Home | |||||
| component: ()=> import("../components/styleAdd/styleAdd"), | |||||
| component: () => import("../components/styleAdd/styleAdd"), | |||||
| }, | |||||
| { | |||||
| path: '/MetaTuring', | |||||
| name: 'turing', | |||||
| component: () => import("../components/views/turing"), | |||||
| }, | |||||
| { | |||||
| path: '/MetaStreaming', | |||||
| name: 'live', | |||||
| component: () => import("../components/views/live"), | |||||
| }, | |||||
| { | |||||
| path: '/MetaGene', | |||||
| name: 'generate', | |||||
| component: () => import("../components/views/generate"), | |||||
| }, | |||||
| { | |||||
| path: '/MetaNeuver', | |||||
| name: 'shadow', | |||||
| component: () => import("../components/views/shadow"), | |||||
| }, | |||||
| { | |||||
| path: '/realTime', | |||||
| name: 'realTime', | |||||
| component: () => import("../components/views/realTime"), | |||||
| }, | |||||
| { | |||||
| path: '/realTimeC', | |||||
| name: 'realTimeC', | |||||
| component: () => import("../components/views/realTimeC"), | |||||
| }, | }, | ||||
| ] | ] | ||||
| const router = new VueRouter({ | const router = new VueRouter({ | ||||
| mode: 'history', | |||||
| // mode: 'history', | |||||
| base: process.env.BASE_URL, | base: process.env.BASE_URL, | ||||
| routes | |||||
| routes, | |||||
| }) | }) | ||||
| export default router | export default router | ||||
| @@ -1,15 +1,16 @@ | |||||
| let publicObj = { | let publicObj = { | ||||
| state:{ | |||||
| characters:1,//1=》中文 2=》英文 | |||||
| state: { | |||||
| characters: 1,//1=》中文 2=》英文 | |||||
| showTryItNow: false | |||||
| }, | }, | ||||
| mutations:{ | |||||
| setCharacters(state,data){ | |||||
| mutations: { | |||||
| setCharacters(state, data) { | |||||
| state.characters = data | state.characters = data | ||||
| } | } | ||||
| }, | }, | ||||
| actions:{ | |||||
| setCharacters(context,data){ | |||||
| context.commit("setCharacters" ,data) | |||||
| actions: { | |||||
| setCharacters(context, data) { | |||||
| context.commit("setCharacters", data) | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -4,26 +4,26 @@ module.exports = { | |||||
| css: { | css: { | ||||
| // options here will be passed to css-loader | // options here will be passed to css-loader | ||||
| }, | }, | ||||
| // postcss: { | |||||
| // // options here will be passed to postcss-loader | |||||
| // plugins: [require('postcss-px2rem')({ | |||||
| // remUnit: 75 | |||||
| // })] | |||||
| // } | |||||
| postcss: { | |||||
| // options here will be passed to postcss-loader | |||||
| // plugins: [require('postcss-px2rem')({ | |||||
| // remUnit: 75 | |||||
| // })] | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| pwa: { | pwa: { | ||||
| iconPaths: { | iconPaths: { | ||||
| favicon32: 'favicon.ico', | |||||
| favicon16: 'favicon.ico', | |||||
| appleTouchIcon: 'favicon.ico', | |||||
| maskIcon: 'favicon.ico', | |||||
| msTileImage: 'favicon.ico' | |||||
| favicon32: 'favicon.ico', | |||||
| favicon16: 'favicon.ico', | |||||
| appleTouchIcon: 'favicon.ico', | |||||
| maskIcon: 'favicon.ico', | |||||
| msTileImage: 'favicon.ico' | |||||
| } | } | ||||
| }, | |||||
| }, | |||||
| //http://www.metavatar.cc/ | //http://www.metavatar.cc/ | ||||
| devServer: { | devServer: { | ||||
| overlay: { | overlay: { | ||||
| @@ -37,11 +37,13 @@ module.exports = { | |||||
| pathRewrite: { | pathRewrite: { | ||||
| '^/api': '' | '^/api': '' | ||||
| }, | }, | ||||
| }, | }, | ||||
| } | } | ||||
| }, | }, | ||||
| publicPath: './', | |||||
| lintOnSave: false, | lintOnSave: false, | ||||
| publicPath: './', // 打包后引用的资源路径 | |||||
| // 打包后引用的资源路径 | |||||
| } | } | ||||