邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

142 řádky
3.2 KiB

  1. <template>
  2. <div class="Box">
  3. <div class="topBox">
  4. <div class="title1">生动有趣</div>
  5. <div class="title2">主流艺术风格让您的照片多姿多彩</div>
  6. <div class="title3">让您在社交媒体上展示个性自我</div>
  7. <div class="btn">立刻体验</div>
  8. </div>
  9. <div class="vdBox"></div>
  10. <div class="caseBox">
  11. <div class="title">邃芒ai数字人10大个性化特点</div>
  12. <div class="caseLsit">
  13. <div class="itemBox" v-for="(item,index) in 10" :key="index">
  14. <img src="../../assets/img/styleAdd1.png" alt>
  15. <div class="itemCont">文案</div>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. import { mapState } from "vuex";
  23. export default {
  24. data() {
  25. return {};
  26. },
  27. computed: {
  28. ...mapState({
  29. characters: state => state.publicObj.characters
  30. })
  31. }
  32. };
  33. </script>
  34. <style lang="scss" scoped>
  35. .Box {
  36. margin-top: 70px;
  37. // background-color: #202020;
  38. overflow: hidden;
  39. .topBox {
  40. height: 1080px;
  41. background: #202020;
  42. background-image: url("../../assets/img/styleAdd_bg.png");
  43. background-repeat: no-repeat;
  44. // background-size: 100% 100%;
  45. background-position-x: 854px;
  46. background-position-y: 300px;
  47. overflow: hidden;
  48. .title1 {
  49. margin-left: 192px;
  50. margin-top: 371px;
  51. font-size: 48px;
  52. font-family: Source Han Sans CN;
  53. font-weight: 400;
  54. color: #ffffff;
  55. line-height: 62px;
  56. }
  57. .title2 {
  58. margin-left: 192px;
  59. font-size: 48px;
  60. font-family: Source Han Sans CN;
  61. font-weight: 400;
  62. color: #ffffff;
  63. line-height: 62px;
  64. }
  65. .title3 {
  66. margin-left: 192px;
  67. font-size: 16px;
  68. font-family: Source Han Sans CN;
  69. font-weight: 400;
  70. color: #fefefe;
  71. line-height: 62px;
  72. }
  73. .btn {
  74. margin-top: 60px;
  75. margin-left: 192px;
  76. width: 220px;
  77. height: 60px;
  78. border: 2px solid #ffffff;
  79. border-radius: 30px;
  80. font-size: 18px;
  81. font-family: Source Han Sans CN;
  82. font-weight: 400;
  83. color: #ffffff;
  84. line-height: 62px;
  85. text-align: center;
  86. cursor: pointer;
  87. }
  88. }
  89. .vdBox {
  90. height: 1080px;
  91. background-image: url("../../assets/img/vd.png");
  92. background-repeat: no-repeat;
  93. background-size: 100% 100%;
  94. }
  95. .caseBox {
  96. height: 1080px;
  97. background: #fff;
  98. overflow: hidden;
  99. .title {
  100. text-align: center;
  101. font-size: 24px;
  102. font-family: Microsoft YaHei;
  103. font-weight: 400;
  104. color: #232324;
  105. line-height: 62px;
  106. margin: 120px 0;
  107. }
  108. .caseLsit {
  109. width: 1280px;
  110. display: flex;
  111. justify-content: space-between;
  112. flex-wrap: wrap;
  113. margin: 0 auto;
  114. .itemBox {
  115. width: 240px;
  116. height: 240px;
  117. position: relative;
  118. margin-bottom: 20px;
  119. img {
  120. width: 100%;
  121. height: 100%;
  122. }
  123. .itemCont {
  124. width: 100%;
  125. font-size: 14px;
  126. font-family: Microsoft YaHei;
  127. font-weight: 400;
  128. color: #ffffff;
  129. line-height: 24px;
  130. text-align: center;
  131. position: absolute;
  132. left: 0;
  133. bottom: 26px;
  134. }
  135. }
  136. }
  137. }
  138. }
  139. </style>