Browse Source

产品能力

ctt
chutingting 2 years ago
parent
commit
deb6f95f42
21 changed files with 319 additions and 357 deletions
  1. BIN
      src/assets/img/product_1.png
  2. BIN
      src/assets/img/product_1_2.png
  3. BIN
      src/assets/img/product_1_3.png
  4. BIN
      src/assets/img/product_1_4.png
  5. BIN
      src/assets/img/product_1_5.png
  6. BIN
      src/assets/img/product_1_6.png
  7. BIN
      src/assets/img/product_2_2.png
  8. +0
    -0
      src/assets/img/product_2_3.png
  9. +0
    -0
      src/assets/img/product_2_4.png
  10. +0
    -0
      src/assets/img/product_2_5.png
  11. +0
    -0
      src/assets/img/product_2_6.png
  12. +0
    -0
      src/assets/img/product_2_7.png
  13. +0
    -0
      src/assets/img/product_2_8.png
  14. BIN
      src/assets/img/styleAdd_bg.png
  15. +1
    -1
      src/components/common/tail.vue
  16. +3
    -3
      src/components/common/top.vue
  17. +0
    -45
      src/components/home/home.vue
  18. +307
    -0
      src/components/product/index.vue
  19. +0
    -163
      src/components/styleAdd/index.vue
  20. +0
    -141
      src/components/styleAdd/styleAdd.vue
  21. +8
    -4
      src/router/index.js

BIN
src/assets/img/product_1.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 378 KiB

BIN
src/assets/img/product_1_2.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 3.2 MiB

BIN
src/assets/img/product_1_3.png View File

Before After
Width: 300  |  Height: 300  |  Size: 106 KiB

BIN
src/assets/img/product_1_4.png View File

Before After
Width: 300  |  Height: 300  |  Size: 129 KiB

BIN
src/assets/img/product_1_5.png View File

Before After
Width: 300  |  Height: 300  |  Size: 109 KiB

BIN
src/assets/img/product_1_6.png View File

Before After
Width: 300  |  Height: 300  |  Size: 72 KiB

BIN
src/assets/img/product_2_2.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 1.6 MiB

src/assets/img/styleAdd1.png → src/assets/img/product_2_3.png View File

Before After
Width: 240  |  Height: 240  |  Size: 48 KiB Width: 240  |  Height: 240  |  Size: 48 KiB

src/assets/img/styleAdd2.png → src/assets/img/product_2_4.png View File

Before After
Width: 240  |  Height: 240  |  Size: 70 KiB Width: 240  |  Height: 240  |  Size: 70 KiB

src/assets/img/styleAdd3.png → src/assets/img/product_2_5.png View File

Before After
Width: 240  |  Height: 240  |  Size: 58 KiB Width: 240  |  Height: 240  |  Size: 58 KiB

src/assets/img/styleAdd4.png → src/assets/img/product_2_6.png View File

Before After
Width: 240  |  Height: 240  |  Size: 84 KiB Width: 240  |  Height: 240  |  Size: 84 KiB

src/assets/img/styleAdd5.png → src/assets/img/product_2_7.png View File

Before After
Width: 240  |  Height: 240  |  Size: 72 KiB Width: 240  |  Height: 240  |  Size: 72 KiB

src/assets/img/styleAdd6.png → src/assets/img/product_2_8.png View File

Before After
Width: 240  |  Height: 240  |  Size: 78 KiB Width: 240  |  Height: 240  |  Size: 78 KiB

BIN
src/assets/img/styleAdd_bg.png View File

Before After
Width: 784  |  Height: 647  |  Size: 368 KiB

+ 1
- 1
src/components/common/tail.vue View File

@@ -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;


+ 3
- 3
src/components/common/top.vue View File

@@ -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',
}
]
},


+ 0
- 45
src/components/home/home.vue View File

@@ -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">


+ 307
- 0
src/components/product/index.vue View File

@@ -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>


+ 0
- 163
src/components/styleAdd/index.vue View File

@@ -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>


+ 0
- 141
src/components/styleAdd/styleAdd.vue View File

@@ -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>


+ 8
- 4
src/router/index.js View File

@@ -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

Loading…
Cancel
Save