@@ -264,7 +264,7 @@ export default { | |||||
// position: absolute; | // position: absolute; | ||||
// width: 100%; | // width: 100%; | ||||
// bottom: 6%; | // bottom: 6%; | ||||
margin-top: 80px; | |||||
margin-top: 60px; | |||||
// left: 0; | // left: 0; | ||||
text-align: center; | text-align: center; | ||||
font-size: 12px; | font-size: 12px; | ||||
@@ -70,15 +70,15 @@ export default { | |||||
list: [ | list: [ | ||||
{ | { | ||||
name: '人脸生成', | name: '人脸生成', | ||||
url: '/styleAdd/1', | |||||
url: '/product/1', | |||||
}, | }, | ||||
{ | { | ||||
name: '个性化', | name: '个性化', | ||||
url: '/styleAdd/2', | |||||
url: '/product/2', | |||||
}, | }, | ||||
{ | { | ||||
name: '风格化', | name: '风格化', | ||||
url: '/styleAdd/3', | |||||
url: '/product/3', | |||||
} | } | ||||
] | ] | ||||
}, | }, | ||||
@@ -1,50 +1,5 @@ | |||||
<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="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">{{characters==1?'精选案例':'Cases'}}</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> --> | |||||
<div class="module_1"> | <div class="module_1"> | ||||
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/> | <video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/> | ||||
<div class="titleBox"> | <div class="titleBox"> | ||||
@@ -0,0 +1,307 @@ | |||||
<template> | |||||
<div class="product"> | |||||
<div class="top"> | |||||
<img :src="product[id][characters].imgUrl" alt=""> | |||||
<div class="top_ct"> | |||||
<h6 v-html="product[id][characters].title"></h6> | |||||
<p>{{ product[id][characters].desc }}</p> | |||||
<span>{{ product[id][characters].btn }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="ct_2"> | |||||
<img :src="product[id][characters].ct2ImgUrl" alt=""> | |||||
</div> | |||||
<div class="ct_3"> | |||||
<h6 v-html="product[id][characters].ct3.title"></h6> | |||||
<div class="list"> | |||||
<div v-for="(item, index) in product[id][characters].ct3.list" :key="index"> | |||||
<img :src="item.img" alt=""> | |||||
<p>{{item.name}}</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from "vuex"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
product: { | |||||
1: { | |||||
1: { | |||||
imgUrl: require('@/assets/img/product_1.png'), | |||||
title: `无中生有<br/>让数字人面容生成全部交给ai`, | |||||
desc: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量面容生成需求`, | |||||
btn: '立刻体验', | |||||
ct2ImgUrl: require('@/assets/img/product_1_2.png'), | |||||
ct3: { | |||||
title: '邃芒ai数字人面容技术点', | |||||
list: [ | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_4.png'), | |||||
name: '生产内容自主IP' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_5.png'), | |||||
name: '支持二次创作 ' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_6.png'), | |||||
name: '节省劳动成本' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_1_3.png'), | |||||
name: '无需复杂操作' | |||||
} | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
2: { | |||||
1: { | |||||
imgUrl: require('@/assets/img/product_1.png'), | |||||
title: `独一无二<br/>让邃芒“高定”您的专有数字人`, | |||||
desc: `从五官、表情到配饰,邃芒数字人将完美展示您的数字形象`, | |||||
btn: '立刻体验', | |||||
ct2ImgUrl: require('@/assets/img/product_2_2.png'), | |||||
ct3: { | |||||
title: '邃芒ai数字人10大个性化特点', | |||||
list: [ | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '画质增强' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_4.png'), | |||||
name: '超分处理' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_5.png'), | |||||
name: '肤色人种调整' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_6.png'), | |||||
name: '面部特征修饰' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_7.png'), | |||||
name: '五官自定义精修' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_8.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '支持二次创作 ' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_8.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '支持二次创作 ' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '支持二次创作 ' | |||||
} | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
3: { | |||||
1: { | |||||
imgUrl: require('@/assets/img/product_1.png'), | |||||
title: `生动有趣<br/>主流艺术风格让您的照片多姿多彩`, | |||||
desc: `让您在社交媒体上展示个性自我`, | |||||
btn: '立刻体验', | |||||
ct2ImgUrl: require('@/assets/img/product_2_2.png'), | |||||
ct3: { | |||||
title: '邃芒ai数字人10大个性化特点', | |||||
list: [ | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '画质增强' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_4.png'), | |||||
name: '超分处理' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_5.png'), | |||||
name: '肤色人种调整' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_6.png'), | |||||
name: '面部特征修饰' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_7.png'), | |||||
name: '五官自定义精修' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_8.png'), | |||||
name: '无需复杂操作' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '支持二次创作 ' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '节省劳动成本' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '支持二次创作 ' | |||||
}, | |||||
{ | |||||
img: require('@/assets/img/product_2_3.png'), | |||||
name: '节省劳动成本' | |||||
} | |||||
] | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
id: this.$route.params.id | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
}, | |||||
watch: { | |||||
"$route.params": { | |||||
immediate: true, | |||||
handler(new_value, old_value) { | |||||
this.id = new_value.id | |||||
}, | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.product { | |||||
margin-top: 70px; | |||||
h6{ | |||||
margin: 0; | |||||
} | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
.top { | |||||
width: 100%; | |||||
position: relative; | |||||
img{ | |||||
width: 100%; | |||||
display: block; | |||||
} | |||||
.top_ct { | |||||
position: absolute; | |||||
left: 194px; | |||||
top: 363px; | |||||
h6{ | |||||
font-size: 48px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
margin: 0; | |||||
} | |||||
p{ | |||||
width: 448px; | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
color: #FEFEFE; | |||||
line-height: 36px; | |||||
margin-top: 39px; | |||||
} | |||||
span{ | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #FFFFFF; | |||||
border-radius: 30px; | |||||
text-align: center; | |||||
font-size: 18px; | |||||
line-height: 60px; | |||||
display: inline-block; | |||||
color: #FEFEFE; | |||||
margin-top: 60px; | |||||
} | |||||
} | |||||
} | |||||
.ct_2{ | |||||
margin-top: -2px; | |||||
img{ | |||||
width: 100%; | |||||
} | |||||
} | |||||
.ct_3{ | |||||
width: 100%; | |||||
height: 1080px; | |||||
h6{ | |||||
font-size: 24px; | |||||
font-weight: 400; | |||||
padding-top: 126px; | |||||
text-align: center; | |||||
color: #232324; | |||||
} | |||||
.list{ | |||||
display: flex; | |||||
flex-flow: wrap; | |||||
width: 1275px; | |||||
margin: 125px auto 0; | |||||
div{ | |||||
flex: 1; | |||||
position: relative; | |||||
margin-bottom: 28px; | |||||
img{ | |||||
width: 240px; | |||||
height: 240px; | |||||
} | |||||
p{ | |||||
position: absolute; | |||||
bottom: 27px; | |||||
right: 0; | |||||
left: 0; | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
text-align: center; | |||||
margin-top: 20px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
@@ -1,163 +0,0 @@ | |||||
<template> | |||||
<div class="Box"> | |||||
<div class="topBox"> | |||||
<div class="title1">生动有趣</div> | |||||
<div class="title2">主流艺术风格让您的照片多姿多彩</div> | |||||
<div class="title3">让您在社交媒体上展示个性自我</div> | |||||
<div class="btn">立刻体验</div> | |||||
</div> | |||||
<div class="vdBox"></div> | |||||
<div class="caseBox"> | |||||
<div class="title">邃芒ai数字人10大个性化特点</div> | |||||
<div class="caseLsit"> | |||||
<div class="itemBox" v-for="(item,index) in 10" :key="index"> | |||||
<img src="../../assets/img/styleAdd1.png" alt> | |||||
<div class="itemCont">文案</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from "vuex"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
style: { | |||||
1: { | |||||
1: { | |||||
imgUrl: require('@/assets/img/introduce_3_1.png'), | |||||
title: '数字人孪生', | |||||
desc: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量 | |||||
无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海 | |||||
量面容生成需求面容生成需求`, | |||||
btn: '立刻体验' | |||||
} | |||||
} | |||||
}, | |||||
id: this.$route.params.id | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
}, | |||||
watch: { | |||||
"$route.params": { | |||||
immediate: true, | |||||
handler(new_value, old_value) { | |||||
this.id = new_value.id | |||||
}, | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.Box { | |||||
margin-top: 70px; | |||||
// background-color: #202020; | |||||
overflow: hidden; | |||||
.topBox { | |||||
height: 1080px; | |||||
background: #202020; | |||||
background-image: url("../../assets/img/styleAdd_bg.png"); | |||||
background-repeat: no-repeat; | |||||
// background-size: 100% 100%; | |||||
background-position-x: 854px; | |||||
background-position-y: 300px; | |||||
overflow: hidden; | |||||
.title1 { | |||||
margin-left: 192px; | |||||
margin-top: 371px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title2 { | |||||
margin-left: 192px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title3 { | |||||
margin-left: 192px; | |||||
font-size: 16px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #fefefe; | |||||
line-height: 62px; | |||||
} | |||||
.btn { | |||||
margin-top: 60px; | |||||
margin-left: 192px; | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #ffffff; | |||||
border-radius: 30px; | |||||
font-size: 18px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
.vdBox { | |||||
height: 1080px; | |||||
background-image: url("../../assets/img/vd.png"); | |||||
background-repeat: no-repeat; | |||||
background-size: 100% 100%; | |||||
} | |||||
.caseBox { | |||||
height: 1080px; | |||||
background: #fff; | |||||
overflow: hidden; | |||||
.title { | |||||
text-align: center; | |||||
font-size: 24px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #232324; | |||||
line-height: 62px; | |||||
margin: 120px 0; | |||||
} | |||||
.caseLsit { | |||||
width: 1280px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
flex-wrap: wrap; | |||||
margin: 0 auto; | |||||
.itemBox { | |||||
width: 240px; | |||||
height: 240px; | |||||
position: relative; | |||||
margin-bottom: 20px; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.itemCont { | |||||
width: 100%; | |||||
font-size: 14px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 24px; | |||||
text-align: center; | |||||
position: absolute; | |||||
left: 0; | |||||
bottom: 26px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
@@ -1,141 +0,0 @@ | |||||
<template> | |||||
<div class="Box"> | |||||
<div class="topBox"> | |||||
<div class="title1">生动有趣</div> | |||||
<div class="title2">主流艺术风格让您的照片多姿多彩</div> | |||||
<div class="title3">让您在社交媒体上展示个性自我</div> | |||||
<div class="btn">立刻体验</div> | |||||
</div> | |||||
<div class="vdBox"></div> | |||||
<div class="caseBox"> | |||||
<div class="title">邃芒ai数字人10大个性化特点</div> | |||||
<div class="caseLsit"> | |||||
<div class="itemBox" v-for="(item,index) in 10" :key="index"> | |||||
<img src="../../assets/img/styleAdd1.png" alt> | |||||
<div class="itemCont">文案</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from "vuex"; | |||||
export default { | |||||
data() { | |||||
return {}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.Box { | |||||
margin-top: 70px; | |||||
// background-color: #202020; | |||||
overflow: hidden; | |||||
.topBox { | |||||
height: 1080px; | |||||
background: #202020; | |||||
background-image: url("../../assets/img/styleAdd_bg.png"); | |||||
background-repeat: no-repeat; | |||||
// background-size: 100% 100%; | |||||
background-position-x: 854px; | |||||
background-position-y: 300px; | |||||
overflow: hidden; | |||||
.title1 { | |||||
margin-left: 192px; | |||||
margin-top: 371px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title2 { | |||||
margin-left: 192px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title3 { | |||||
margin-left: 192px; | |||||
font-size: 16px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #fefefe; | |||||
line-height: 62px; | |||||
} | |||||
.btn { | |||||
margin-top: 60px; | |||||
margin-left: 192px; | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #ffffff; | |||||
border-radius: 30px; | |||||
font-size: 18px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
.vdBox { | |||||
height: 1080px; | |||||
background-image: url("../../assets/img/vd.png"); | |||||
background-repeat: no-repeat; | |||||
background-size: 100% 100%; | |||||
} | |||||
.caseBox { | |||||
height: 1080px; | |||||
background: #fff; | |||||
overflow: hidden; | |||||
.title { | |||||
text-align: center; | |||||
font-size: 24px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #232324; | |||||
line-height: 62px; | |||||
margin: 120px 0; | |||||
} | |||||
.caseLsit { | |||||
width: 1280px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
flex-wrap: wrap; | |||||
margin: 0 auto; | |||||
.itemBox { | |||||
width: 240px; | |||||
height: 240px; | |||||
position: relative; | |||||
margin-bottom: 20px; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.itemCont { | |||||
width: 100%; | |||||
font-size: 14px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 24px; | |||||
text-align: center; | |||||
position: absolute; | |||||
left: 0; | |||||
bottom: 26px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
@@ -2,7 +2,7 @@ | |||||
* @Autor: Chuting | * @Autor: Chuting | ||||
* @Date: 2022-08-08 14:23:52 | * @Date: 2022-08-08 14:23:52 | ||||
* @LastEditors: Chuting | * @LastEditors: Chuting | ||||
* @LastEditTime: 2022-08-10 23:19:14 | |||||
* @LastEditTime: 2022-08-11 21:35:55 | |||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
import Vue from 'vue' | import Vue from 'vue' | ||||
@@ -30,10 +30,10 @@ const routes = [ | |||||
component: ()=> import("../components/aboutUe/aboutUe"), | component: ()=> import("../components/aboutUe/aboutUe"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/styleAdd/:id?', | |||||
name: 'styleAdd', | |||||
path: '/product/:id?', | |||||
name: 'product', | |||||
// component: Home | // component: Home | ||||
component: ()=> import("../components/styleAdd/styleAdd"), | |||||
component: ()=> import("../components/product"), | |||||
}, | }, | ||||
{ | { | ||||
path: '/case', | path: '/case', | ||||
@@ -57,5 +57,9 @@ const router = new VueRouter({ | |||||
base: process.env.BASE_URL, | base: process.env.BASE_URL, | ||||
routes | routes | ||||
}) | }) | ||||
router.afterEach(() => { | |||||
document.body.scrollTop = 0; | |||||
document.documentElement.scrollTop = 0; | |||||
}) | |||||
export default router | export default router |