index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <template>
  2. <view class="content">
  3. <view class="bg">
  4. <image src="../../static/index/bg01.png" mode=""></image>
  5. </view>
  6. <view class="bg1">
  7. <image src="../../static/index/bg03.png" mode=""></image>
  8. </view>
  9. <view class="box-top">
  10. <view class="bg3 " @click="addShow()">
  11. <image src="../../static/index/img14.png" mode=""></image>
  12. </view>
  13. <view class="bg3 two">
  14. <image src="../../static/index/img08.png" mode=""></image>
  15. </view>
  16. </view>
  17. <view class="bg5">
  18. <image src="../../static/index/img09.png" mode=""></image>
  19. </view>
  20. <view class="bg4">
  21. <image src="../../static/index/img04.png" mode=""></image>
  22. </view>
  23. <view class="bg6">
  24. <image src="../../static/index/img10.png" mode=""></image>
  25. </view>
  26. <view class="bg7">
  27. <image src="../../static/index/img13.png" mode=""></image>
  28. </view>
  29. <view class="bg8">
  30. <image src="../../static/index/img06.png" mode=""></image>
  31. </view>
  32. <view class="bg9">
  33. <image src="../../static/index/bg05.png" mode=""></image>
  34. <view class="bg10">
  35. <image src="../../static/index/img01.png" mode=""></image>
  36. </view>
  37. </view>
  38. <view class="bg9">
  39. <image src="../../static/index/bg05.png" mode=""></image>
  40. <view class="bg10">
  41. <image src="../../static/index/img03.png" mode=""></image>
  42. </view>
  43. </view>
  44. <view class="bg9">
  45. <image src="../../static/index/bg05.png" mode=""></image>
  46. <view class="bg10">
  47. <image src="../../static/index/img02.png" mode=""></image>
  48. </view>
  49. </view>
  50. <view class="bg11">
  51. <image src="../../static/img/bottom.png" mode=""></image>
  52. </view>
  53. <!-- <u-popup :show="show" @close="close" @open="open" mode="left" ref="dd" zIndex="999999">
  54. <view class="" style="background-color: #fff;width: 500rpx;height: 400rpx;">
  55. <text>我是黄伟强的爹</text>
  56. </view>
  57. </u-popup> -->
  58. <uni-popup ref="popup" type="left">
  59. <view class="popup">
  60. <view class="title">
  61. <view class="title-img">
  62. <image src="../../static/img/logo.png" mode=""></image>
  63. </view>
  64. <view class="text">
  65. 恒星币
  66. </view>
  67. </view>
  68. <view class="hx">
  69. </view>
  70. <view class="box-left" v-for=" (item,index) in cdList" @click="navTo(item.url)">
  71. <view class="box-box">
  72. <view class="box-img">
  73. <image :src="item.image" mode=""></image>
  74. </view>
  75. <view class="box-title">
  76. {{item.title}}
  77. </view>
  78. <view class="box-right">
  79. <image :src="item.right" mode=""></image>
  80. </view>
  81. </view>
  82. <view class="hx1">
  83. </view>
  84. </view>
  85. </view>
  86. </uni-popup>
  87. <!-- <u-alert title="将就将就军军" type = "warning" :description = "description"></u-alert> -->
  88. </view>
  89. </template>
  90. <script>
  91. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  92. import top from '@/components/top/top.vue'
  93. export default {
  94. data() {
  95. return {
  96. show: false,
  97. cdList: [{
  98. image: '../../static/img/cd1.png',
  99. title: '首页 ',
  100. right: '../../static/img/right.png',
  101. url: './Expect'
  102. },
  103. {
  104. image: '../../static/img/cd2.png',
  105. title: '恒星私募',
  106. right: '../../static/img/right.png',
  107. url: './Expect'
  108. },
  109. {
  110. image: '../../static/img/cd5.png',
  111. title: 'DIFI挖矿',
  112. right: '../../static/img/right.png'
  113. },
  114. {
  115. image: '../../static/img/cd4.png',
  116. title: '我的推荐',
  117. right: '../../static/img/right.png'
  118. },
  119. {
  120. image: '../../static/img/cd3.png',
  121. title: '超级节点',
  122. right: '../../static/img/right.png'
  123. },
  124. {
  125. image: '../../static/img/cd6.png',
  126. title: '游戏版块',
  127. right: '../../static/img/right.png'
  128. },
  129. {
  130. image: '../../static/img/cd7.png',
  131. title: '好友加速明细',
  132. right: '../../static/img/right.png'
  133. },
  134. {
  135. image: '../../static/img/cd8.png',
  136. title: '算力奖励明细',
  137. right: '../../static/img/right.png'
  138. },
  139. {
  140. image: '../../static/img/cd9.png',
  141. title: '社群奖励明细',
  142. right: '../../static/img/right.png'
  143. },
  144. {
  145. image: '../../static/img/cd10.png',
  146. title: '公会奖励明细',
  147. right: '../../static/img/right.png'
  148. }
  149. ]
  150. };
  151. },
  152. methods: {
  153. addShow() {
  154. this.show = true
  155. this.$refs.popup.open()
  156. console.log(this.$refs.dd)
  157. console.log("陈宫", this.show);
  158. if (this.show == false) {
  159. this.$refs.popup.close()
  160. console.log("陈宫", this.show);
  161. }
  162. },
  163. navTo(url) {
  164. uni.navigateTo({
  165. url
  166. })
  167. }
  168. // open() {
  169. // console.log('open');
  170. // },
  171. // close() {
  172. // this.show = false
  173. // // console.log('close');
  174. // }
  175. }
  176. }
  177. </script>
  178. <style lang="scss">
  179. page,
  180. .content {
  181. height: 100%;
  182. margin: 0;
  183. padding: 0;
  184. }
  185. image {
  186. height: 100%;
  187. width: 100%;
  188. }
  189. .bg {
  190. position: absolute;
  191. width: 750rpx;
  192. height: 3117rpx;
  193. }
  194. .box-top {
  195. display: flex;
  196. padding: 36rpx 41rpx 72rpx 41rpx;
  197. }
  198. .bg1 {
  199. position: absolute;
  200. width: 750rpx;
  201. height: 629rpx;
  202. }
  203. .bg3 {
  204. width: 56rpx;
  205. height: 62rpx;
  206. }
  207. .two {
  208. margin-left: 36rpx;
  209. }
  210. .bg4 {
  211. display: flex;
  212. margin: 0 auto;
  213. width: 680rpx;
  214. height: 581rpx;
  215. }
  216. .bg5 {
  217. position: absolute;
  218. right: 0;
  219. top: 105rpx;
  220. width: 68rpx;
  221. height: 108rpx;
  222. }
  223. .bg6 {
  224. width: 78rpx;
  225. height: 98rpx;
  226. margin: 33rpx 22rpx;
  227. }
  228. .bg7 {
  229. position: absolute;
  230. right: 0;
  231. top: 660rpx;
  232. width: 219rpx;
  233. height: 308rpx;
  234. }
  235. .bg8 {
  236. width: 546rpx;
  237. height: 168rpx;
  238. margin: -66rpx auto;
  239. }
  240. .bg9 {
  241. position: relative;
  242. display: flex;
  243. align-items: center;
  244. justify-content: center;
  245. width: 680rpx;
  246. height: 524rpx;
  247. margin: 40rpx auto;
  248. }
  249. .bg10 {
  250. position: absolute;
  251. width: 590rpx;
  252. height: 400rpx;
  253. }
  254. .bg11 {
  255. background: black;
  256. float: left;
  257. bottom: 0;
  258. width: 750rpx;
  259. height: 650rpx;
  260. }
  261. .popup {
  262. display: flex;
  263. flex-direction: column;
  264. background: linear-gradient(180deg, #00143B 0%, #000309 100%);
  265. width: 565rpx;
  266. height: 1448rpx;
  267. .box-left {
  268. width: 530rpx;
  269. display: flex;
  270. flex-direction: column;
  271. .box-box {
  272. position: relative;
  273. display: flex;
  274. align-items: center;
  275. justify-content: flex-start;
  276. margin-left: 30rpx;
  277. }
  278. .box-img {
  279. z-index: 999;
  280. width: 35rpx;
  281. height: 35rpx;
  282. }
  283. .box-title {
  284. margin-left: 20rpx;
  285. font-size: 30rpx;
  286. font-family: PingFang SC;
  287. // font-weight: bold;
  288. color: #FFFFFF;
  289. line-height: 78rpx;
  290. }
  291. .box-right {
  292. position: absolute;
  293. right: 0;
  294. z-index: 999;
  295. width: 17rpx;
  296. height: 32rpx;
  297. }
  298. }
  299. .title {
  300. margin: 40rpx 190rpx;
  301. display: flex;
  302. flex-direction: column;
  303. align-items: center;
  304. .title-img {
  305. width: 186rpx;
  306. height: 193rpx;
  307. }
  308. .text {
  309. display: flex;
  310. font-size: 41rpx;
  311. font-family: zihun100hao-fangfangxianfengti;
  312. font-weight: 400;
  313. color: #FFFFFF;
  314. line-height: 38rpx;
  315. }
  316. }
  317. .hx {
  318. width: 565rpx;
  319. height: 12rpx;
  320. background: #FFFFFF;
  321. opacity: 0.23;
  322. }
  323. .hx1 {
  324. width: 565rpx;
  325. height: 2rpx;
  326. background: #FFFFFF;
  327. opacity: 0.1;
  328. }
  329. }
  330. </style>