邃芒官网(PC) https://www.metavatar.cc
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

308 рядки
8.7 KiB

  1. <template>
  2. <div class="product">
  3. <div class="top">
  4. <img :src="product[id][characters].imgUrl" alt="">
  5. <div class="top_ct">
  6. <h6 v-html="product[id][characters].title"></h6>
  7. <p>{{ product[id][characters].desc }}</p>
  8. <span>{{ product[id][characters].btn }}</span>
  9. </div>
  10. </div>
  11. <div class="ct_2">
  12. <img :src="product[id][characters].ct2ImgUrl" alt="">
  13. </div>
  14. <div class="ct_3">
  15. <h6 v-html="product[id][characters].ct3.title"></h6>
  16. <div class="list">
  17. <div v-for="(item, index) in product[id][characters].ct3.list" :key="index">
  18. <img :src="item.img" alt="">
  19. <p>{{item.name}}</p>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import { mapState } from "vuex";
  27. export default {
  28. data() {
  29. return {
  30. product: {
  31. 1: {
  32. 1: {
  33. imgUrl: require('@/assets/img/product_1.png'),
  34. title: `无中生有<br/>让数字人面容生成全部交给ai`,
  35. desc: `无需复杂操作,简单易用的邃芒数字人面容生成工具满足您海量面容生成需求`,
  36. btn: '立刻体验',
  37. ct2ImgUrl: require('@/assets/img/product_1_2.png'),
  38. ct3: {
  39. title: '邃芒ai数字人面容技术点',
  40. list: [
  41. {
  42. img: require('@/assets/img/product_1_3.png'),
  43. name: '无需复杂操作'
  44. },
  45. {
  46. img: require('@/assets/img/product_1_4.png'),
  47. name: '生产内容自主IP'
  48. },
  49. {
  50. img: require('@/assets/img/product_1_5.png'),
  51. name: '支持二次创作 '
  52. },
  53. {
  54. img: require('@/assets/img/product_1_6.png'),
  55. name: '节省劳动成本'
  56. },
  57. {
  58. img: require('@/assets/img/product_1_3.png'),
  59. name: '无需复杂操作'
  60. },
  61. {
  62. img: require('@/assets/img/product_1_3.png'),
  63. name: '无需复杂操作'
  64. },
  65. {
  66. img: require('@/assets/img/product_1_3.png'),
  67. name: '无需复杂操作'
  68. },
  69. {
  70. img: require('@/assets/img/product_1_3.png'),
  71. name: '无需复杂操作'
  72. },
  73. {
  74. img: require('@/assets/img/product_1_3.png'),
  75. name: '无需复杂操作'
  76. },
  77. {
  78. img: require('@/assets/img/product_1_3.png'),
  79. name: '无需复杂操作'
  80. }
  81. ]
  82. }
  83. }
  84. },
  85. 2: {
  86. 1: {
  87. imgUrl: require('@/assets/img/product_1.png'),
  88. title: `独一无二<br/>让邃芒“高定”您的专有数字人`,
  89. desc: `从五官、表情到配饰,邃芒数字人将完美展示您的数字形象`,
  90. btn: '立刻体验',
  91. ct2ImgUrl: require('@/assets/img/product_2_2.png'),
  92. ct3: {
  93. title: '邃芒ai数字人10大个性化特点',
  94. list: [
  95. {
  96. img: require('@/assets/img/product_2_3.png'),
  97. name: '画质增强'
  98. },
  99. {
  100. img: require('@/assets/img/product_2_4.png'),
  101. name: '超分处理'
  102. },
  103. {
  104. img: require('@/assets/img/product_2_5.png'),
  105. name: '肤色人种调整'
  106. },
  107. {
  108. img: require('@/assets/img/product_2_6.png'),
  109. name: '面部特征修饰'
  110. },
  111. {
  112. img: require('@/assets/img/product_2_7.png'),
  113. name: '五官自定义精修'
  114. },
  115. {
  116. img: require('@/assets/img/product_2_8.png'),
  117. name: '无需复杂操作'
  118. },
  119. {
  120. img: require('@/assets/img/product_2_3.png'),
  121. name: '支持二次创作 '
  122. },
  123. {
  124. img: require('@/assets/img/product_2_8.png'),
  125. name: '无需复杂操作'
  126. },
  127. {
  128. img: require('@/assets/img/product_2_3.png'),
  129. name: '支持二次创作 '
  130. },
  131. {
  132. img: require('@/assets/img/product_2_3.png'),
  133. name: '支持二次创作 '
  134. }
  135. ]
  136. }
  137. }
  138. },
  139. 3: {
  140. 1: {
  141. imgUrl: require('@/assets/img/product_1.png'),
  142. title: `生动有趣<br/>主流艺术风格让您的照片多姿多彩`,
  143. desc: `让您在社交媒体上展示个性自我`,
  144. btn: '立刻体验',
  145. ct2ImgUrl: require('@/assets/img/product_2_2.png'),
  146. ct3: {
  147. title: '邃芒ai数字人10大个性化特点',
  148. list: [
  149. {
  150. img: require('@/assets/img/product_2_3.png'),
  151. name: '画质增强'
  152. },
  153. {
  154. img: require('@/assets/img/product_2_4.png'),
  155. name: '超分处理'
  156. },
  157. {
  158. img: require('@/assets/img/product_2_5.png'),
  159. name: '肤色人种调整'
  160. },
  161. {
  162. img: require('@/assets/img/product_2_6.png'),
  163. name: '面部特征修饰'
  164. },
  165. {
  166. img: require('@/assets/img/product_2_7.png'),
  167. name: '五官自定义精修'
  168. },
  169. {
  170. img: require('@/assets/img/product_2_8.png'),
  171. name: '无需复杂操作'
  172. },
  173. {
  174. img: require('@/assets/img/product_2_3.png'),
  175. name: '支持二次创作 '
  176. },
  177. {
  178. img: require('@/assets/img/product_2_3.png'),
  179. name: '节省劳动成本'
  180. },
  181. {
  182. img: require('@/assets/img/product_2_3.png'),
  183. name: '支持二次创作 '
  184. },
  185. {
  186. img: require('@/assets/img/product_2_3.png'),
  187. name: '节省劳动成本'
  188. }
  189. ]
  190. }
  191. }
  192. }
  193. },
  194. id: this.$route.params.id
  195. };
  196. },
  197. computed: {
  198. ...mapState({
  199. characters: state => state.publicObj.characters
  200. })
  201. },
  202. watch: {
  203. "$route.params": {
  204. immediate: true,
  205. handler(new_value, old_value) {
  206. this.id = new_value.id
  207. },
  208. }
  209. }
  210. };
  211. </script>
  212. <style lang="scss" scoped>
  213. .product {
  214. margin-top: 70px;
  215. h6{
  216. margin: 0;
  217. }
  218. img{
  219. width: 100%;
  220. display: block;
  221. }
  222. .top {
  223. width: 100%;
  224. position: relative;
  225. img{
  226. width: 100%;
  227. display: block;
  228. }
  229. .top_ct {
  230. position: absolute;
  231. left: 194px;
  232. top: 363px;
  233. h6{
  234. font-size: 48px;
  235. font-weight: 400;
  236. color: #FFFFFF;
  237. margin: 0;
  238. }
  239. p{
  240. width: 448px;
  241. font-size: 16px;
  242. font-weight: 400;
  243. color: #FEFEFE;
  244. line-height: 36px;
  245. margin-top: 39px;
  246. }
  247. span{
  248. width: 220px;
  249. height: 60px;
  250. border: 2px solid #FFFFFF;
  251. border-radius: 30px;
  252. text-align: center;
  253. font-size: 18px;
  254. line-height: 60px;
  255. display: inline-block;
  256. color: #FEFEFE;
  257. margin-top: 60px;
  258. }
  259. }
  260. }
  261. .ct_2{
  262. margin-top: -2px;
  263. img{
  264. width: 100%;
  265. }
  266. }
  267. .ct_3{
  268. width: 100%;
  269. height: 1080px;
  270. h6{
  271. font-size: 24px;
  272. font-weight: 400;
  273. padding-top: 126px;
  274. text-align: center;
  275. color: #232324;
  276. }
  277. .list{
  278. display: flex;
  279. flex-flow: wrap;
  280. width: 1275px;
  281. margin: 125px auto 0;
  282. div{
  283. flex: 1;
  284. position: relative;
  285. margin-bottom: 28px;
  286. img{
  287. width: 240px;
  288. height: 240px;
  289. }
  290. p{
  291. position: absolute;
  292. bottom: 27px;
  293. right: 0;
  294. left: 0;
  295. font-size: 14px;
  296. font-weight: 400;
  297. color: #FFFFFF;
  298. text-align: center;
  299. margin-top: 20px;
  300. }
  301. }
  302. }
  303. }
  304. }
  305. </style>