index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <view class="content">
  3. <view class="bg"><image src="../../static/index/bg01.png" mode=""></image></view>
  4. <view class="bg1"><image src="../../static/index/bg03.png" mode=""></image></view>
  5. <top></top>
  6. <view class="bg5"><image src="../../static/index/img09.png" mode=""></image></view>
  7. <view class="bg4"><image src="../../static/index/img04.png" mode=""></image></view>
  8. <view class="bg6"><image src="../../static/index/img10.png" mode=""></image></view>
  9. <view class="bg7"><image src="../../static/index/img13.png" mode=""></image></view>
  10. <view class="bg8"><image src="../../static/index/img06.png" mode=""></image></view>
  11. <view class="bg9">
  12. <image src="../../static/index/bg05.png" mode=""></image>
  13. <view class="bg10"><image src="../../static/index/img01.png" mode=""></image></view>
  14. </view>
  15. <view class="bg9">
  16. <image src="../../static/index/bg05.png" mode=""></image>
  17. <view class="bg10"><image src="../../static/index/img03.png" mode=""></image></view>
  18. </view>
  19. <view class="bg9">
  20. <image src="../../static/index/bg05.png" mode=""></image>
  21. <view class="bg10"><image src="../../static/index/img02.png" mode=""></image></view>
  22. </view>
  23. <view class="bg11"><image src="../../static/img/bottom.png" mode=""></image></view>
  24. </view>
  25. </template>
  26. <script>
  27. import top from '@/components/top/top.vue';
  28. export default {
  29. comments: {
  30. top
  31. },
  32. data() {
  33. return {
  34. cdList: [
  35. {
  36. image: '../../static/img/cd1.png',
  37. title: '首页 ',
  38. right: '../../static/img/right.png',
  39. url: './Expect'
  40. },
  41. {
  42. image: '../../static/img/cd2.png',
  43. title: '恒星私募',
  44. right: '../../static/img/right.png',
  45. url: './Expect'
  46. },
  47. {
  48. image: '../../static/img/cd5.png',
  49. title: 'DIFI挖矿',
  50. right: '../../static/img/right.png'
  51. },
  52. {
  53. image: '../../static/img/cd4.png',
  54. title: '我的推荐',
  55. right: '../../static/img/right.png'
  56. },
  57. {
  58. image: '../../static/img/cd3.png',
  59. title: '超级节点',
  60. right: '../../static/img/right.png'
  61. },
  62. {
  63. image: '../../static/img/cd6.png',
  64. title: '游戏版块',
  65. right: '../../static/img/right.png'
  66. },
  67. {
  68. image: '../../static/img/cd7.png',
  69. title: '好友加速明细',
  70. right: '../../static/img/right.png'
  71. },
  72. {
  73. image: '../../static/img/cd8.png',
  74. title: '算力奖励明细',
  75. right: '../../static/img/right.png'
  76. },
  77. {
  78. image: '../../static/img/cd9.png',
  79. title: '社群奖励明细',
  80. right: '../../static/img/right.png'
  81. },
  82. {
  83. image: '../../static/img/cd10.png',
  84. title: '公会奖励明细',
  85. right: '../../static/img/right.png'
  86. }
  87. ]
  88. };
  89. },
  90. methods: {
  91. addShow() {
  92. this.$refs.popup.open();
  93. },
  94. navTo(url) {
  95. uni.navigateTo({
  96. url
  97. });
  98. }
  99. }
  100. };
  101. </script>
  102. <style lang="scss">
  103. page,
  104. .content {
  105. height: 100%;
  106. margin: 0;
  107. padding: 0;
  108. }
  109. image {
  110. height: 100%;
  111. width: 100%;
  112. }
  113. .bg {
  114. position: absolute;
  115. width: 750rpx;
  116. height: 3117rpx;
  117. }
  118. .box-top {
  119. display: flex;
  120. padding: 36rpx 41rpx 72rpx 41rpx;
  121. }
  122. .bg1 {
  123. position: absolute;
  124. width: 750rpx;
  125. height: 629rpx;
  126. }
  127. .bg3 {
  128. width: 56rpx;
  129. height: 62rpx;
  130. }
  131. .two {
  132. margin-left: 36rpx;
  133. }
  134. .bg4 {
  135. display: flex;
  136. margin: 0 auto;
  137. width: 680rpx;
  138. height: 581rpx;
  139. }
  140. .bg5 {
  141. position: absolute;
  142. right: 0;
  143. top: 105rpx;
  144. width: 68rpx;
  145. height: 108rpx;
  146. }
  147. .bg6 {
  148. width: 78rpx;
  149. height: 98rpx;
  150. margin: 33rpx 22rpx;
  151. }
  152. .bg7 {
  153. position: absolute;
  154. right: 0;
  155. top: 660rpx;
  156. width: 219rpx;
  157. height: 308rpx;
  158. }
  159. .bg8 {
  160. width: 546rpx;
  161. height: 168rpx;
  162. margin: -66rpx auto;
  163. }
  164. .bg9 {
  165. position: relative;
  166. display: flex;
  167. align-items: center;
  168. justify-content: center;
  169. width: 680rpx;
  170. height: 524rpx;
  171. margin: 40rpx auto;
  172. }
  173. .bg10 {
  174. position: absolute;
  175. width: 590rpx;
  176. height: 400rpx;
  177. }
  178. .bg11 {
  179. background: black;
  180. float: left;
  181. bottom: 0;
  182. width: 750rpx;
  183. height: 650rpx;
  184. }
  185. </style>