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