@@ -1,19 +1,36 @@ | |||||
# home | # home | ||||
## Project setup | ## Project setup | ||||
``` | ``` | ||||
npm install | npm install | ||||
``` | ``` | ||||
### Compiles and hot-reloads for development | ### Compiles and hot-reloads for development | ||||
``` | ``` | ||||
npm run serve | npm run serve | ||||
``` | ``` | ||||
### Compiles and minifies for production | ### Compiles and minifies for production | ||||
``` | ``` | ||||
npm run build | npm run build | ||||
``` | ``` | ||||
### Customize configuration | ### Customize configuration | ||||
See [Configuration Reference](https://cli.vuejs.org/config/). | See [Configuration Reference](https://cli.vuejs.org/config/). | ||||
未知的node版本,若要稳定运行此项目,请确保node版本为v10.24.1,且运行忽略node版本检查 | |||||
```powershell | |||||
yarn config set ignore-engines true | |||||
``` | |||||
Unknow node.js Engines,if you want to run project,please make sure your node.js Version 10.24.1,then go ignore check | |||||
node,js Engines. | |||||
```powershell | |||||
yarn config set ignore-engines true | |||||
``` |
@@ -1,37 +1,37 @@ | |||||
<template> | <template> | ||||
<div id="app"> | <div id="app"> | ||||
<top/> | |||||
<top /> | |||||
<transition name="app" mode="out-in"> | <transition name="app" mode="out-in"> | ||||
<router-view></router-view> | <router-view></router-view> | ||||
</transition> | </transition> | ||||
<tail/> | |||||
<tail /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import top from "./components/common/top" | |||||
import tail from "./components/common/tail" | |||||
import top from "./components/common/top"; | |||||
import tail from "./components/common/tail"; | |||||
export default { | export default { | ||||
components:{ | |||||
components: { | |||||
top, | top, | ||||
tail | |||||
tail, | |||||
}, | }, | ||||
data(){ | |||||
return{} | |||||
data() { | |||||
return {}; | |||||
}, | }, | ||||
} | |||||
}; | |||||
</script> | </script> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
body,p{ | |||||
body, | |||||
p { | |||||
margin: 0 0; | margin: 0 0; | ||||
padding: 0 0; | padding: 0 0; | ||||
} | } | ||||
input{ | |||||
background:none; | |||||
outline:none; | |||||
border:none; | |||||
padding: 0; | |||||
margin: 0; | |||||
input { | |||||
background: none; | |||||
outline: none; | |||||
border: none; | |||||
padding: 0; | |||||
margin: 0; | |||||
} | } | ||||
</style> | </style> |
@@ -1,23 +1,30 @@ | |||||
<template> | <template> | ||||
<div class="Box"> | |||||
<div class="Box" id="top"> | |||||
<div class="title">遂芒科技</div> | <div class="title">遂芒科技</div> | ||||
<div class="cont"> | <div class="cont"> | ||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||||
同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国 | |||||
企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
11.6%;完成营业收入 1.62万亿元,同比增长 | |||||
13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||||
同比增长7.3%;基本每股收益 1.07 元,同比增长 | |||||
10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 | |||||
500 强第 13 位,中国 企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
家工程承包商”第 1 | |||||
位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
</div> | </div> | ||||
<img src="../../assets/img/my_1.png" alt class="myimg"> | |||||
<img src="../../assets/img/my_1.png" alt class="myimg" /> | |||||
<div class="teamBox"> | <div class="teamBox"> | ||||
<img src="../../assets//img//myS.png" alt class="teamImg"> | |||||
<img src="../../assets//img//myS.png" alt class="teamImg" /> | |||||
<div class="introduceBox"> | <div class="introduceBox"> | ||||
<div class="title">团队介绍</div> | <div class="title">团队介绍</div> | ||||
<p> | <p> | ||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%; | |||||
完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4 | |||||
49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
11.6%; 完成营业收入 1.62万亿元,同比增长 | |||||
13.7%;实现归属于上市公司股东的净利润 4 49.4 | |||||
亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||||
业唯一新签合同额 | 业唯一新签合同额 | ||||
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位, | |||||
中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续 | |||||
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 | |||||
位, 中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 | |||||
位,继续 | |||||
保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | 保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | ||||
进一步巩固。 | 进一步巩固。 | ||||
</p> | </p> | ||||
@@ -25,24 +32,42 @@ | |||||
</div> | </div> | ||||
<div class="title1">公司愿景</div> | <div class="title1">公司愿景</div> | ||||
<p class="vision"> | <p class="vision"> | ||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每 | |||||
股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 | |||||
11.6%;完成营业收入 1.62万亿元,同比增长 | |||||
13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每 | |||||
股收益 1.07 元,同比增长 | |||||
10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 | |||||
500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
家工程承包商”第 1 | |||||
位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
</p> | </p> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { mapState } from "vuex"; | import { mapState } from "vuex"; | ||||
export default { | export default { | ||||
data(){ | |||||
return{ | |||||
} | |||||
data() { | |||||
return {}; | |||||
}, | |||||
methods: { | |||||
goView(id) { | |||||
document.querySelector("#" + id).scrollIntoView({ | |||||
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||||
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||||
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||||
}); | |||||
// console.log(document.querySelector(id),); | |||||
}, | }, | ||||
computed: { | |||||
}, | |||||
computed: { | |||||
...mapState({ | ...mapState({ | ||||
characters: state => state.publicObj.characters | |||||
}) | |||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
}, | |||||
created() { | |||||
this.$nextTick(() => { | |||||
this.goView("top"); | |||||
}); | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -128,4 +153,3 @@ export default { | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
@@ -49,7 +49,7 @@ | |||||
</div> | </div> | ||||
<div class="rqCodeBox"> | <div class="rqCodeBox"> | ||||
<div class="phone">TEL:86 152 1093 7300</div> | |||||
<div class="phone">TEL:+86 152-1093-7300</div> | |||||
<div class="site"> | <div class="site"> | ||||
{{ | {{ | ||||
characters == 1 | characters == 1 | ||||
@@ -149,6 +149,7 @@ export default { | |||||
overflow: hidden; | overflow: hidden; | ||||
height: 578px; | height: 578px; | ||||
background: #f1f4f7; | background: #f1f4f7; | ||||
padding-bottom: 54px; | |||||
.taillong { | .taillong { | ||||
width: 168px; | width: 168px; | ||||
@@ -5,17 +5,33 @@ | |||||
<div class="logoTitle">metavatar</div> | <div class="logoTitle">metavatar</div> | ||||
</div> | </div> | ||||
<div class="categoryBox"> | <div class="categoryBox"> | ||||
<div class="categoryitem"> | |||||
<div class="categoryitem" @click="goPage('Product')"> | |||||
{{ characters == 1 ? "产品能力" : "Product" }} | {{ characters == 1 ? "产品能力" : "Product" }} | ||||
</div> | </div> | ||||
<div class="categoryitem"> | |||||
<div class="categoryitem" @click="goPage('Technology')"> | |||||
{{ characters == 1 ? "创新技术" : "Technology" }} | {{ characters == 1 ? "创新技术" : "Technology" }} | ||||
</div> | </div> | ||||
<div class="categoryitem"> | |||||
<div class="categoryitem" @click="goPage('Solutions')"> | |||||
{{ characters == 1 ? "解决方案" : "Solutions" }} | {{ characters == 1 ? "解决方案" : "Solutions" }} | ||||
</div> | </div> | ||||
<!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> --> | |||||
<div class="categoryitem" @click="go('/aboutUe')"> | |||||
<div class="categoryitem" @click="goPage('Cases')"> | |||||
{{ characters == 1 ? "经典案例" : "Cases" }} | |||||
</div> | |||||
<div class="categoryitem"> | |||||
<el-dropdown trigger="click" @command="handleCommand"> | |||||
<span class="el-dropdown-link"> | |||||
{{ characters == 1 ? "更多案例" : "AllCases" | |||||
}}<i class="el-icon-arrow-down el-icon--right"></i> | |||||
</span> | |||||
<el-dropdown-menu slot="dropdown"> | |||||
<el-dropdown-item command="turing">邃图灵</el-dropdown-item> | |||||
<el-dropdown-item command="live">邃芒慧播</el-dropdown-item> | |||||
<el-dropdown-item command="generate">邃芒慧生</el-dropdown-item> | |||||
<el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
</div> | |||||
<div class="categoryitem" @click="goPage('aboutUs')"> | |||||
{{ characters == 1 ? "关于我们" : "About us" }} | {{ characters == 1 ? "关于我们" : "About us" }} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -40,6 +56,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
export default { | export default { | ||||
name: "top", | name: "top", | ||||
data() { | data() { | ||||
@@ -84,6 +101,12 @@ export default { | |||||
console.log(value); | console.log(value); | ||||
this.setCharacters(value); | this.setCharacters(value); | ||||
}, | }, | ||||
handleCommand(path) { | |||||
this.$router.push(`/${path}`); | |||||
}, | |||||
goPage(path) { | |||||
this.$router.push(`/?id=${path}`); | |||||
}, | |||||
go(url) { | go(url) { | ||||
this.$router.push(url); | this.$router.push(url); | ||||
}, | }, | ||||
@@ -152,6 +175,11 @@ export default { | |||||
.categoryitem:hover { | .categoryitem:hover { | ||||
color: #16e9d6; | color: #16e9d6; | ||||
} | } | ||||
.el-dropdown-menu__item:focus, | |||||
.el-dropdown-menu__item:not(.is-disabled):hover { | |||||
background-color: #16e9d6; | |||||
color: #fff; | |||||
} | |||||
.cutBox { | .cutBox { | ||||
float: right; | float: right; | ||||
margin-top: 20px; | margin-top: 20px; | ||||
@@ -1,48 +1,39 @@ | |||||
<template> | <template> | ||||
<div class="Box"> | <div class="Box"> | ||||
<!-- <div class="topBox"> | |||||
<div class="categoryBox"> | |||||
<div class="categoryitem" @click="goView('md1')"></div> | |||||
<div class="categoryitem" @click="goView('module_5')"></div> | |||||
<div class="categoryitem" @click="goView('md2')"></div> | |||||
<div class="categoryitem" @click="goView('module_9')"></div> | |||||
</div> | |||||
</div> --> | |||||
<div class="topBox"> | <div class="topBox"> | ||||
<div class="logoBox" @click="go('/')"> | <div class="logoBox" @click="go('/')"> | ||||
<img src="../../assets/img/logo.png" alt class="logo" /> | <img src="../../assets/img/logo.png" alt class="logo" /> | ||||
<div class="logoTitle">metavatar</div> | <div class="logoTitle">metavatar</div> | ||||
</div> | </div> | ||||
<div class="categoryBox"> | <div class="categoryBox"> | ||||
<div class="categoryitem" @click="goView('md1')"> | |||||
<div class="categoryitem" @click="goView('Product')"> | |||||
{{ characters == 1 ? "产品能力" : "Product" }} | {{ characters == 1 ? "产品能力" : "Product" }} | ||||
</div> | </div> | ||||
<div class="categoryitem" @click="goView('module_5')"> | |||||
<div class="categoryitem" @click="goView('Technology')"> | |||||
{{ characters == 1 ? "创新技术" : "Technology" }} | {{ characters == 1 ? "创新技术" : "Technology" }} | ||||
</div> | </div> | ||||
<div class="categoryitem" @click="goView('md2')"> | |||||
<div class="categoryitem" @click="goView('Solutions')"> | |||||
{{ characters == 1 ? "解决方案" : "Solutions" }} | {{ characters == 1 ? "解决方案" : "Solutions" }} | ||||
</div> | </div> | ||||
<div class="categoryitem" @click="goView('module_8')"> | |||||
<div class="categoryitem" @click="goView('Cases')"> | |||||
{{ characters == 1 ? "经典案例" : "Cases" }} | {{ characters == 1 ? "经典案例" : "Cases" }} | ||||
</div> | </div> | ||||
<!-- <div class="categoryitem" @click="goPages('turing')"> | |||||
{{ characters == 1 ? "邃芒图灵" : "SuiMangTuring" }} | |||||
<div class="categoryitem"> | |||||
<el-dropdown trigger="click" @command="handleCommand"> | |||||
<span class="el-dropdown-link"> | |||||
{{ characters == 1 ? "更多案例" : "AllCases" | |||||
}}<i class="el-icon-arrow-down el-icon--right"></i> | |||||
</span> | |||||
<el-dropdown-menu slot="dropdown"> | |||||
<el-dropdown-item command="turing">邃图灵</el-dropdown-item> | |||||
<el-dropdown-item command="live">邃芒慧播</el-dropdown-item> | |||||
<el-dropdown-item command="generate">邃芒慧生</el-dropdown-item> | |||||
<el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
</div> | </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')"> | |||||
<div class="categoryitem" @click="goView('aboutUs')"> | |||||
{{ characters == 1 ? "关于我们" : "About us" }} | {{ characters == 1 ? "关于我们" : "About us" }} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -70,15 +61,7 @@ | |||||
</div> | </div> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<img | |||||
ref="vidoe" | |||||
src="../../assets/img/BG@2x.png" | |||||
width="100%" | |||||
height="100%" | |||||
autoplay | |||||
muted="muted" | |||||
loop="loop" | |||||
/> | |||||
<img src="../../assets/img/BG@2x.png" width="100%" height="100%" /> | |||||
<div class="titleBox"> | <div class="titleBox"> | ||||
<div class="title_item1" v-if="characters == 1"> | <div class="title_item1" v-if="characters == 1"> | ||||
超写实!虚拟数字人创造者 | 超写实!虚拟数字人创造者 | ||||
@@ -102,7 +85,7 @@ | |||||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | {{ characters == 1 ? "立刻体验" : "Try it now" }} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="md1" id="md1"></div> | |||||
<div class="md1" id="Product"></div> | |||||
</div> | </div> | ||||
<div class="module_2" id="module_2"> | <div class="module_2" id="module_2"> | ||||
@@ -176,7 +159,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="module_5"> | |||||
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology"> | |||||
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'"> | <div :class="characters == 1 ? 'titleBox' : 'titleBox1'"> | ||||
<div class="title"> | <div class="title"> | ||||
{{ | {{ | ||||
@@ -214,7 +197,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="md1" id="md2"></div> | |||||
<div class="md1" id="Solutions"></div> | |||||
</div> | </div> | ||||
<div class="module_6" id="module_6"> | <div class="module_6" id="module_6"> | ||||
@@ -294,7 +277,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="module_8" id="module_8"> | |||||
<div class="module_8" id="Cases"> | |||||
<div class="title">SELECTED CASES</div> | <div class="title">SELECTED CASES</div> | ||||
<div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div> | <div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div> | ||||
<div class="xian"></div> | <div class="xian"></div> | ||||
@@ -308,6 +291,8 @@ | |||||
<img class="swiper-slide-img" :src="item.url" /> | <img class="swiper-slide-img" :src="item.url" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="swiper-button-prev"></div> | |||||
<div class="swiper-button-next"></div> | |||||
</div> | </div> | ||||
<div class="tiktok"> | <div class="tiktok"> | ||||
{{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }} | {{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }} | ||||
@@ -321,7 +306,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="module_9" id="module_9"> | |||||
<div class="module_9" id="aboutUs"> | |||||
<div class="weBox" @click="goPages('aboutUs')"> | <div class="weBox" @click="goPages('aboutUs')"> | ||||
<div class="weText"> | <div class="weText"> | ||||
<div class="conBox"> | <div class="conBox"> | ||||
@@ -364,14 +349,15 @@ | |||||
> | > | ||||
<div class="timeText">{{ item.title }}</div> | <div class="timeText">{{ item.title }}</div> | ||||
<div class="ImgBox"> | <div class="ImgBox"> | ||||
<img | |||||
<!-- <img | |||||
:src=" | :src=" | ||||
timeFlag == index | timeFlag == index | ||||
? require('../../assets/img/a.png') | ? require('../../assets/img/a.png') | ||||
: require('../../assets/img/h.png') | : require('../../assets/img/h.png') | ||||
" | " | ||||
alt | alt | ||||
/> | |||||
/> --> | |||||
<div class="circle"></div> | |||||
</div> | </div> | ||||
<div class="ctn"> | <div class="ctn"> | ||||
{{ characters == 1 ? item.ctn1 : item.ctn1_y }} | {{ characters == 1 ? item.ctn1 : item.ctn1_y }} | ||||
@@ -649,6 +635,11 @@ export default { | |||||
showBox() { | showBox() { | ||||
this.dialogVisible = true; | this.dialogVisible = true; | ||||
}, | }, | ||||
goPages(path) { | |||||
this.$router.push(path); | |||||
}, | |||||
goView(id) { | goView(id) { | ||||
document.querySelector("#" + id).scrollIntoView({ | document.querySelector("#" + id).scrollIntoView({ | ||||
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | ||||
@@ -657,9 +648,11 @@ export default { | |||||
}); | }); | ||||
// console.log(document.querySelector(id),); | // console.log(document.querySelector(id),); | ||||
}, | }, | ||||
goPages(path) { | |||||
handleCommand(path) { | |||||
this.$router.push(`/${path}`); | this.$router.push(`/${path}`); | ||||
}, | }, | ||||
submit() { | submit() { | ||||
this.$refs.form.validate((valid) => { | this.$refs.form.validate((valid) => { | ||||
console.log(valid); | console.log(valid); | ||||
@@ -696,6 +689,7 @@ export default { | |||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: (state) => state.publicObj.characters, | characters: (state) => state.publicObj.characters, | ||||
view: (state) => state.publicObj.view, | |||||
}), | }), | ||||
}, | }, | ||||
@@ -726,6 +720,14 @@ export default { | |||||
}, | }, | ||||
}); | }); | ||||
}, | }, | ||||
created() { | |||||
const id = this.$route.query.id; | |||||
if (id) { | |||||
this.$nextTick(() => { | |||||
this.goView(id); | |||||
}); | |||||
} | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@@ -1251,12 +1253,13 @@ export default { | |||||
border-right-color: #fff; | border-right-color: #fff; | ||||
float: left; | float: left; | ||||
margin-top: 20px; | margin-top: 20px; | ||||
transition: all 0.3s; | |||||
} | } | ||||
.news1 { | .news1 { | ||||
padding: 0 40px; | padding: 0 40px; | ||||
height: 68px; | height: 68px; | ||||
background: #ffffff; | background: #ffffff; | ||||
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1); | |||||
// box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1); | |||||
border-radius: 12px; | border-radius: 12px; | ||||
font-size: 18px; | font-size: 18px; | ||||
font-family: Inter; | font-family: Inter; | ||||
@@ -1264,6 +1267,8 @@ export default { | |||||
color: #232324; | color: #232324; | ||||
line-height: 62px; | line-height: 62px; | ||||
float: left; | float: left; | ||||
transition: all 0.3s; | |||||
cursor: pointer; | |||||
} | } | ||||
} | } | ||||
.hintBox_1 { | .hintBox_1 { | ||||
@@ -1282,7 +1287,7 @@ export default { | |||||
padding: 0 40px; | padding: 0 40px; | ||||
height: 68px; | height: 68px; | ||||
background: #ffffff; | background: #ffffff; | ||||
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1); | |||||
// box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1); | |||||
border-radius: 12px; | border-radius: 12px; | ||||
font-size: 18px; | font-size: 18px; | ||||
font-family: Inter; | font-family: Inter; | ||||
@@ -1290,6 +1295,7 @@ export default { | |||||
color: #232324; | color: #232324; | ||||
line-height: 62px; | line-height: 62px; | ||||
float: left; | float: left; | ||||
cursor: pointer; | |||||
} | } | ||||
} | } | ||||
@@ -1498,6 +1504,17 @@ export default { | |||||
height: 23px; | height: 23px; | ||||
margin: 30px auto 10px auto; | margin: 30px auto 10px auto; | ||||
// margin-bottom: 10px; | // margin-bottom: 10px; | ||||
.circle { | |||||
width: 23px; | |||||
height: 23px; | |||||
background: url("../../assets/img/h.png"); | |||||
background-size: cover; | |||||
background-repeat: no-repeat; | |||||
background-position: center; | |||||
background-position: center; | |||||
transform: scale(0.9); | |||||
transition: all 0.3s; | |||||
} | |||||
img { | img { | ||||
width: 23px; | width: 23px; | ||||
height: 23px; | height: 23px; | ||||
@@ -1515,8 +1532,18 @@ export default { | |||||
text-align: center; | text-align: center; | ||||
} | } | ||||
&:hover { | &:hover { | ||||
opacity: 0.5; | |||||
opacity: 0.65; | |||||
transform: scale(1.1); | transform: scale(1.1); | ||||
.circle { | |||||
width: 23px; | |||||
height: 23px; | |||||
background: url("../../assets/img/a.png"); | |||||
background-size: cover; | |||||
background-repeat: no-repeat; | |||||
background-position: center; | |||||
background-position: center; | |||||
transform: scale(0.9); | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -1595,9 +1622,11 @@ export default { | |||||
width: 479px; | width: 479px; | ||||
height: 600px; | height: 600px; | ||||
cursor: pointer; | cursor: pointer; | ||||
opacity: 0.9; | |||||
transition: all 0.3s; | transition: all 0.3s; | ||||
&:hover { | &:hover { | ||||
transform: scale(1.3); | |||||
opacity: 1; | |||||
transform: scale(1.1); | |||||
} | } | ||||
} | } | ||||
@@ -1644,6 +1673,11 @@ export default { | |||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
} | } | ||||
.el-dropdown-menu__item:focus, | |||||
.el-dropdown-menu__item:not(.is-disabled):hover { | |||||
background-color: #16e9d6; | |||||
color: #fff; | |||||
} | |||||
.categoryitem:hover { | .categoryitem:hover { | ||||
color: #16e9d6; | color: #16e9d6; | ||||
} | } | ||||
@@ -0,0 +1,625 @@ | |||||
<template> | |||||
<div class="Box" id="top"> | |||||
<div class="module_1"> | |||||
<img | |||||
src="../../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">邃芒慧生</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_btn" @click="showBox"> | |||||
{{ 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="../../assets/img/metavatar_generate/model2-IMG@2x.png" alt="" /> | |||||
</div> | |||||
<div class="module_3"> | |||||
<div class="title">保持人脸特征 自由调整各类心仪风格</div> | |||||
<div class="style">STYLE</div> | |||||
<img src="../../assets/img/metavatar_generate/model3-IMG@2x.png" alt="" /> | |||||
</div> | |||||
<div class="module_4"> | |||||
<div class="imgBox"> | |||||
<div class="textInsideBox"> | |||||
<div class="title">丰富的状态编辑 完整的IP形象展示</div> | |||||
<div class="style">FULL AGE</div> | |||||
</div> | |||||
<img | |||||
src="../../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="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", | |||||
}, | |||||
}); | |||||
}, | |||||
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: 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: 1080px; | |||||
background-color: #fff; | |||||
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: 84px; | |||||
} | |||||
img { | |||||
width: 1293px; | |||||
height: 798px; | |||||
opacity: 0.85; | |||||
transition: all 0.3s; | |||||
&:hover { | |||||
opacity: 1; | |||||
} | |||||
} | |||||
} | |||||
.module_3 { | |||||
height: 1000px; | |||||
background-color: #ebeef7; | |||||
padding-top: 135px; | |||||
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: 1000px; | |||||
background-color: #fff; | |||||
padding-top: 156px; | |||||
padding-left: 116px; | |||||
text-align: center; | |||||
.imgBox { | |||||
position: relative; | |||||
width: 1669px; | |||||
height: 782px; | |||||
.textInsideBox { | |||||
position: absolute; | |||||
top: 40px; | |||||
margin-left: 570px; | |||||
.title { | |||||
font-size: 36px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #4d4d4d; | |||||
line-height: 36px; | |||||
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,584 @@ | |||||
<template> | |||||
<div class="Box" id="top"> | |||||
<div class="module_1"> | |||||
<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">邃芒慧影</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_btn" @click="showBox"> | |||||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
</div> | |||||
</div> | |||||
<div class="md1" id="md1"></div> | |||||
</div> | |||||
<div class="module_2"> | |||||
<div class="title"> | |||||
只需<img | |||||
src="../../assets/img/metavatar_live/3@2x.png" | |||||
/>步完成一条数字人视频内容生成 | |||||
</div> | |||||
<div class="images"> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_live/001@2x.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_live/002@2x.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_live/003@2x.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_live/004@2x.png" alt="" /> | |||||
</li> | |||||
</div> | |||||
</div> | |||||
<div class="module_3"> | |||||
<div class="title">中之人驱动</div> | |||||
<img src="../../assets/img/metavatar_live/picInside@2x.png" alt="" /> | |||||
</div> | |||||
<el-dialog | |||||
:title=" | |||||
characters == 1 | |||||
? '留下您的信息,我们会尽快与您取得联系' | |||||
: 'Tell us about yourself, we ll be in touch right away.' | |||||
" | |||||
:visible.sync="dialogVisible" | |||||
width="34%" | |||||
> | |||||
<el-form ref="form" :rules="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", | |||||
}, | |||||
}); | |||||
}, | |||||
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: 194px; | |||||
overflow: hidden; | |||||
color: #323232; | |||||
.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: #323232; | |||||
border-radius: 40px; | |||||
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: 960px; | |||||
background: #ffffff; | |||||
padding-top: 162px; | |||||
padding-left: 116px; | |||||
padding-right: 85px; | |||||
.title { | |||||
text-align: center; | |||||
margin-bottom: 132px; | |||||
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); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.module_3 { | |||||
height: 960px; | |||||
background-color: #ebeef7; | |||||
padding-top: 133px; | |||||
text-align: center; | |||||
.title { | |||||
text-align: center; | |||||
font-size: 48px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #4d4d4d; | |||||
line-height: 36px; | |||||
margin-bottom: 84px; | |||||
} | |||||
img { | |||||
width: 1250px; | |||||
height: 665px; | |||||
opacity: 0.85; | |||||
transition: all 0.3s; | |||||
&:hover { | |||||
opacity: 1; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -1,64 +1,61 @@ | |||||
<template> | <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 class="Box" id="top"> | |||||
<div class="module_1"> | |||||
<img | |||||
src="../../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> | ||||
<div class="categoryitem" @click="goView('module_5')"> | |||||
{{ characters == 1 ? "创新技术" : "Technology" }} | |||||
<div class="desc" v-if="characters == 1"> | |||||
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||||
<div>能为您在各种场景下7*24工作</div> | |||||
</div> | </div> | ||||
<div class="categoryitem" @click="goView('md2')"> | |||||
{{ characters == 1 ? "解决方案" : "Solutions" }} | |||||
<div class="title_item1" v-if="characters != 1">邃芒慧播</div> | |||||
<div class="title_item1_y" v-if="characters != 1"> | |||||
直播虚拟人自然逼真,分身真假难辨 | |||||
</div> | </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="desc" v-if="characters != 1"> | |||||
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div> | |||||
<div>能为您在各种场景下7*24工作</div> | |||||
</div> | |||||
<!-- <div class="categoryitem" @click="goView('module_9')"> | |||||
{{ characters == 1 ? "关于我们" : "About us" }} | |||||
<div class="title_btn" @click="showBox"> | |||||
{{ characters == 1 ? "立刻体验" : "Try it now" }} | |||||
</div> | </div> | ||||
</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 class="md1" id="md1"></div> | |||||
</div> | |||||
<div class="module_2"> | |||||
<div class="title">真人无需出镜驱动数字人直播</div> | |||||
<div class="imgBox"> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_shadow/imgList1@2x.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_shadow/imgList2@2x.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="../../assets/img/metavatar_shadow/imgList3@2x.png" alt="" /> | |||||
</li> | |||||
<div class="redCard">无缝接入各主流平台</div> | |||||
<div class="pinkCard">IP版权归属明确 无后顾之忧</div> | |||||
<div class="blueCard">出镜声形从此统一 打造沉淀企业IP</div> | |||||
</div> | </div> | ||||
</div> --> | |||||
</div> | |||||
<div class="module_3"> | |||||
<div class="title">脚本驱动数字人直播</div> | |||||
<img src="../../assets/img/metavatar_shadow/scriptDrive@2x.png" alt="" /> | |||||
</div> | |||||
<el-dialog | <el-dialog | ||||
:title=" | :title=" | ||||
@@ -385,6 +382,11 @@ export default { | |||||
}, | }, | ||||
}); | }); | ||||
}, | }, | ||||
created() { | |||||
this.$nextTick(() => { | |||||
this.goView("top"); | |||||
}); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -455,4 +457,171 @@ export default { | |||||
float: left; | float: left; | ||||
font-size: 15px; | 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: 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: 960px; | |||||
background: #ffffff; | |||||
padding-top: 112px; | |||||
padding-left: 331px; | |||||
padding-right: 306px; | |||||
.title { | |||||
text-align: center; | |||||
margin-bottom: 132px; | |||||
font-size: 36px; | |||||
} | |||||
.imgBox { | |||||
display: flex; | |||||
position: relative; | |||||
justify-content: space-between; | |||||
text-align: center; | |||||
li { | |||||
list-style: none; | |||||
margin-right: 7px; | |||||
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); | |||||
} | |||||
} | |||||
} | |||||
.redCard { | |||||
position: absolute; | |||||
left: -111px; | |||||
bottom: 69px; | |||||
width: 200px; | |||||
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: #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: 900px; | |||||
background-color: #ebeef7; | |||||
padding-top: 133px; | |||||
text-align: center; | |||||
.title { | |||||
text-align: center; | |||||
font-size: 36px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #4d4d4d; | |||||
line-height: 36px; | |||||
margin-bottom: 5px; | |||||
} | |||||
img { | |||||
width: 1446px; | |||||
height: 638px; | |||||
opacity: 0.85; | |||||
transition: all 0.3s; | |||||
&:hover { | |||||
opacity: 1; | |||||
} | |||||
} | |||||
} | |||||
</style> | </style> |
@@ -0,0 +1,491 @@ | |||||
<template> | |||||
<div class="Box" id="top"> | |||||
<div class="module_1"> | |||||
<img | |||||
ref="vidoe" | |||||
src="../../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">邃图灵</div> | |||||
<div class="title_item1_y" v-if="characters != 1">与李雷成为朋友</div> | |||||
<!-- <div class="title_item3" v-if="characters != 1"> | |||||
Easily create your unique digital IP | |||||
</div> --> | |||||
<div class="title_btn" @click="showBox"> | |||||
{{ characters == 1 ? "与xxx交谈" : "converse to xxx" }} | |||||
</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="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", | |||||
}, | |||||
}); | |||||
}, | |||||
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> |
@@ -13,43 +13,36 @@ const routes = [ | |||||
{ | { | ||||
path: '/', | path: '/', | ||||
name: 'Home', | name: 'Home', | ||||
// component: Home | |||||
component: () => import("../components/home/home"), | component: () => import("../components/home/home"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/aboutUs', | path: '/aboutUs', | ||||
name: 'aboutUs', | name: 'aboutUs', | ||||
// component: Home | |||||
component: () => import("../components/aboutUs/aboutUs"), | component: () => import("../components/aboutUs/aboutUs"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/styleAdd', | path: '/styleAdd', | ||||
name: 'styleAdd', | name: 'styleAdd', | ||||
// component: Home | |||||
component: () => import("../components/styleAdd/styleAdd"), | component: () => import("../components/styleAdd/styleAdd"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/turing', | path: '/turing', | ||||
name: 'turing', | name: 'turing', | ||||
// component: Home | |||||
component: () => import("../components/views/turing"), | component: () => import("../components/views/turing"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/live', | path: '/live', | ||||
name: 'live', | name: 'live', | ||||
// component: Home | |||||
component: () => import("../components/views/live"), | component: () => import("../components/views/live"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/generate', | path: '/generate', | ||||
name: 'generate', | name: 'generate', | ||||
// component: Home | |||||
component: () => import("../components/views/generate"), | component: () => import("../components/views/generate"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/shadow', | path: '/shadow', | ||||
name: 'shadow', | name: 'shadow', | ||||
// component: Home | |||||
component: () => import("../components/views/shadow"), | component: () => import("../components/views/shadow"), | ||||
}, | }, | ||||
] | ] | ||||