@@ -264,7 +264,7 @@ export default { | |||
// position: absolute; | |||
// width: 100%; | |||
// bottom: 6%; | |||
margin-top: 80px; | |||
margin-top: 60px; | |||
// left: 0; | |||
text-align: center; | |||
font-size: 12px; | |||
@@ -70,15 +70,15 @@ export default { | |||
list: [ | |||
{ | |||
name: '人脸生成', | |||
url: '/styleAdd/1', | |||
url: '/product/1', | |||
}, | |||
{ | |||
name: '个性化', | |||
url: '/styleAdd/2', | |||
url: '/product/2', | |||
}, | |||
{ | |||
name: '风格化', | |||
url: '/styleAdd/3', | |||
url: '/product/3', | |||
} | |||
] | |||
}, | |||
@@ -1,50 +1,5 @@ | |||
<template> | |||
<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"> | |||
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/> | |||
<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 | |||
* @Date: 2022-08-08 14:23:52 | |||
* @LastEditors: Chuting | |||
* @LastEditTime: 2022-08-10 23:19:14 | |||
* @LastEditTime: 2022-08-11 21:35:55 | |||
* @Description: | |||
*/ | |||
import Vue from 'vue' | |||
@@ -30,10 +30,10 @@ const routes = [ | |||
component: ()=> import("../components/aboutUe/aboutUe"), | |||
}, | |||
{ | |||
path: '/styleAdd/:id?', | |||
name: 'styleAdd', | |||
path: '/product/:id?', | |||
name: 'product', | |||
// component: Home | |||
component: ()=> import("../components/styleAdd/styleAdd"), | |||
component: ()=> import("../components/product"), | |||
}, | |||
{ | |||
path: '/case', | |||
@@ -57,5 +57,9 @@ const router = new VueRouter({ | |||
base: process.env.BASE_URL, | |||
routes | |||
}) | |||
router.afterEach(() => { | |||
document.body.scrollTop = 0; | |||
document.documentElement.scrollTop = 0; | |||
}) | |||
export default router |