@@ -2,7 +2,6 @@ | |||
node_modules | |||
/dist | |||
# local env files | |||
.env.local | |||
.env.*.local | |||
@@ -21,3 +20,5 @@ pnpm-debug.log* | |||
*.njsproj | |||
*.sln | |||
*.sw? | |||
.7z | |||
.zip |
@@ -1,19 +1,25 @@ | |||
# home | |||
## Project setup | |||
``` | |||
npm install | |||
``` | |||
### Compiles and hot-reloads for development | |||
``` | |||
npm run serve | |||
``` | |||
### Compiles and minifies for production | |||
``` | |||
npm run build | |||
``` | |||
### Customize configuration | |||
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> | |||
<div id="app"> | |||
<top/> | |||
<top /> | |||
<transition name="app" mode="out-in"> | |||
<router-view></router-view> | |||
</transition> | |||
<tail/> | |||
<tail /> | |||
</div> | |||
</template> | |||
<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 { | |||
components:{ | |||
components: { | |||
top, | |||
tail | |||
tail, | |||
}, | |||
data(){ | |||
return{} | |||
data() { | |||
return {}; | |||
}, | |||
} | |||
methods: {}, | |||
created() {}, | |||
}; | |||
</script> | |||
<style lang="scss"> | |||
body,p{ | |||
body, | |||
p { | |||
margin: 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> |
@@ -1,23 +1,30 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="Box" id="top"> | |||
<div class="title">遂芒科技</div> | |||
<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> | |||
<img src="../../assets/img/my_1.png" alt class="myimg"> | |||
<img src="../../assets/img/my_1.png" alt class="myimg" /> | |||
<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="title">团队介绍</div> | |||
<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> | |||
@@ -25,24 +32,42 @@ | |||
</div> | |||
<div class="title1">公司愿景</div> | |||
<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> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from "vuex"; | |||
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({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
created() { | |||
this.$nextTick(() => { | |||
this.goView("top"); | |||
}); | |||
}, | |||
}; | |||
</script> | |||
@@ -128,4 +153,3 @@ export default { | |||
} | |||
} | |||
</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') { | |||
register(`${process.env.BASE_URL}service-worker.js`, { | |||
ready () { | |||
ready() { | |||
console.log( | |||
'App is being served from cache by a service worker.\n' + | |||
'For more details, visit https://goo.gl/AFskqB' | |||
) | |||
}, | |||
registered () { | |||
registered() { | |||
console.log('Service worker has been registered.') | |||
}, | |||
cached () { | |||
cached() { | |||
console.log('Content has been cached for offline use.') | |||
}, | |||
updatefound () { | |||
updatefound() { | |||
console.log('New content is downloading.') | |||
}, | |||
updated () { | |||
updated() { | |||
console.log('New content is available; please refresh.') | |||
}, | |||
offline () { | |||
offline() { | |||
console.log('No internet connection found. App is running in offline mode.') | |||
}, | |||
error (error) { | |||
error(error) { | |||
console.error('Error during service worker registration:', error) | |||
} | |||
}) | |||
@@ -8,32 +8,64 @@ const originalPush = VueRouter.prototype.push | |||
VueRouter.prototype.push = function push(location) { | |||
return originalPush.call(this, location).catch(err => err) | |||
} | |||
const routes = [ | |||
{ | |||
path: '/', | |||
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', | |||
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({ | |||
mode: 'history', | |||
// mode: 'history', | |||
base: process.env.BASE_URL, | |||
routes | |||
routes, | |||
}) | |||
export default router |
@@ -1,15 +1,16 @@ | |||
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 | |||
} | |||
}, | |||
actions:{ | |||
setCharacters(context,data){ | |||
context.commit("setCharacters" ,data) | |||
actions: { | |||
setCharacters(context, data) { | |||
context.commit("setCharacters", data) | |||
} | |||
} | |||
} |
@@ -4,26 +4,26 @@ module.exports = { | |||
css: { | |||
// 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: { | |||
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/ | |||
devServer: { | |||
overlay: { | |||
@@ -37,11 +37,13 @@ module.exports = { | |||
pathRewrite: { | |||
'^/api': '' | |||
}, | |||
}, | |||
} | |||
}, | |||
publicPath: './', | |||
lintOnSave: false, | |||
publicPath: './', // 打包后引用的资源路径 | |||
// 打包后引用的资源路径 | |||
} |