|
@@ -0,0 +1,458 @@ |
|
|
|
|
|
<template> |
|
|
|
|
|
<div class="Box"> |
|
|
|
|
|
<!-- <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" @click="goView('md1')"> |
|
|
|
|
|
{{ characters == 1 ? "产品能力" : "Product" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goView('module_5')"> |
|
|
|
|
|
{{ characters == 1 ? "创新技术" : "Technology" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goView('md2')"> |
|
|
|
|
|
{{ characters == 1 ? "解决方案" : "Solutions" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goView('module_8')"> |
|
|
|
|
|
{{ characters == 1 ? "经典案例" : "Cases" }} |
|
|
|
|
|
</div> --> |
|
|
|
|
|
<!-- <div class="categoryitem" @click="goPages('turing')"> |
|
|
|
|
|
{{ characters == 1 ? "邃芒图灵" : "SuiMangTuring" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goPages('live')"> |
|
|
|
|
|
{{ characters == 1 ? "邃芒慧播" : "SuiMangLive" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goPages('generate')"> |
|
|
|
|
|
{{ characters == 1 ? "邃芒慧生" : "SuiMangGen" }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="categoryitem" @click="goPages('shadow')"> |
|
|
|
|
|
{{ characters == 1 ? "邃芒慧影" : "SuiMangReflex" }} |
|
|
|
|
|
</div> --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="categoryitem" @click="goView('module_9')"> |
|
|
|
|
|
{{ 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> --> |
|
|
|
|
|
|
|
|
|
|
|
<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="rules" :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="Pmail"> |
|
|
|
|
|
<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: "请先输手机号", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
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: "请先输邮箱", |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
// 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({ |
|
|
|
|
|
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: "/api/callback/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", |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
</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; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |