nav.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <view class="nav-box">
  3. <view class="nav-muen">
  4. <view class="nav-item"@click.stop="openContract(0)">
  5. <image class="nav-icon" src="@/static/images/nav_01.png" mode="aspectFit"></image>
  6. <text class="nav-name">永续合约</text>
  7. </view>
  8. <view class="nav-item"@click.stop="openContract(1)">
  9. <image class="nav-icon" src="@/static/images/nav_02.png" mode="aspectFit"></image>
  10. <text class="nav-name">快捷合约</text>
  11. </view>
  12. <view class="nav-item"@click.stop="openContract(2)">
  13. <image class="nav-icon" src="@/static/images/nav_03.png" mode="aspectFit"></image>
  14. <text class="nav-name">赠金交易</text>
  15. </view>
  16. <view class="nav-item"@click.stop="openNav(item)">
  17. <image class="nav-icon" src="@/static/images/nav_04.png" mode="aspectFit"></image>
  18. <text class="nav-name">模拟合约</text>
  19. </view>
  20. <view class="nav-item"@click.stop="openNav(item)">
  21. <image class="nav-icon" src="@/static/images/nav_05.png" mode="aspectFit"></image>
  22. <text class="nav-name">积分商城</text>
  23. </view>
  24. <view class="nav-item"@click.stop="openNav(item)">
  25. <image class="nav-icon" src="@/static/images/nav_06.png" mode="aspectFit"></image>
  26. <text class="nav-name">NFT</text>
  27. </view>
  28. <view class="nav-item"@click.stop="getService()">
  29. <image class="nav-icon" src="@/static/images/nav_07.png" mode="aspectFit"></image>
  30. <text class="nav-name">在线客服</text>
  31. </view>
  32. <view class="nav-item"@click.stop="getHandbook()">
  33. <image class="nav-icon" src="@/static/images/nav_08.png" mode="aspectFit"></image>
  34. <text class="nav-name">新人指南</text>
  35. </view>
  36. </view>
  37. <view class="nav-function">
  38. <view :class="['function-item' , `function-item_${index}`]" v-for="(item , index) in navFunction"
  39. :key="`nav_function_${index}`" @click.stop="openMore(item)">
  40. <view class="function-content">
  41. <view class="function-title">{{ item.name }}</view>
  42. <view class="function-btn">{{ item.btn }}</view>
  43. </view>
  44. <image class="function-icon" :src="item.icon" mode="aspectFit"></image>
  45. </view>
  46. </view>
  47. <!-- 暂未开放 -->
  48. <unopen ref="unopenRef"/>
  49. </view>
  50. </template>
  51. <script>
  52. import { ifLogin_ } from "@/utils/common.js"
  53. export default {
  54. name: "navModules",
  55. data() {
  56. return {
  57. navFunction: [{
  58. icon: require("./../../../static/images/nav_09.png"),
  59. name: '充币',
  60. btn: '立即赚',
  61. path:'/pages/content/select-currency?type=recharge',
  62. },
  63. {
  64. icon: require("./../../../static/images/nav_10.png"),
  65. name: '牛熊对战',
  66. btn: '立即参与',
  67. },
  68. {
  69. icon: require("./../../../static/images/nav_11.png"),
  70. name: '跟单社区',
  71. btn: '跟单玩合约',
  72. }
  73. ]
  74. };
  75. },
  76. methods:{
  77. openNav(){
  78. this.$nextTick(() => {
  79. this.$refs.unopenRef.open()
  80. })
  81. },
  82. openMore(item){
  83. ifLogin_().then(res => {
  84. uni.navigateTo({
  85. url: item.path
  86. })
  87. })
  88. },
  89. // 打开合约
  90. openContract(index){
  91. this.$setStorageSync('contractIndex' , index)
  92. uni.reLaunch({
  93. url: '/pages/contract/index'
  94. });
  95. },
  96. // 在线客服
  97. getService() {
  98. uni.navigateTo({
  99. // url: '/pages/content/customer-service'
  100. url: this.$path.service
  101. })
  102. },
  103. getHandbook(){
  104. uni.navigateTo({
  105. // url: '/pages/content/customer-service'
  106. url: '/pages/content/new-people'
  107. })
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .nav-box {
  114. width: 100%;
  115. background-color: $modules-box-bg;
  116. padding: 30rpx $pages-padding 20rpx;
  117. .nav-muen {
  118. width: 100%;
  119. display: flex;
  120. flex-wrap: wrap;
  121. .nav-item {
  122. flex-shrink: 0;
  123. width: 25%;
  124. display: flex;
  125. flex-direction: column;
  126. align-items: center;
  127. margin-bottom: 30rpx;
  128. .nav-icon {
  129. width: 65rpx;
  130. height: 58rpx;
  131. }
  132. .nav-name {
  133. padding-top: 10rpx;
  134. font-size: 24rpx;
  135. font-family: PingFang SC, PingFang SC-Regular;
  136. font-weight: 400;
  137. text-align: center;
  138. color: #333333;
  139. line-height: 33rpx;
  140. letter-spacing: 0.48rpx;
  141. }
  142. }
  143. }
  144. .nav-function {
  145. width: 100%;
  146. display: flex;
  147. justify-content: space-between;
  148. align-items: center;
  149. .function-item {
  150. width: calc((100% - 28rpx) / 3);
  151. height: 122rpx;
  152. border-radius: 9rpx;
  153. position: relative;
  154. .function-icon {
  155. position: absolute;
  156. right: 15rpx;
  157. top: 50%;
  158. width: 74rpx;
  159. height: 74rpx;
  160. transform: translateY(-50%);
  161. z-index: 1;
  162. }
  163. .function-content {
  164. position: absolute;
  165. left: 0;
  166. top: 50%;
  167. transform: translateY(-50%);
  168. // width: 100%;
  169. // height: 100%;
  170. z-index: 2;
  171. padding: 0 15rpx;
  172. // display: flex;
  173. // flex-direction: column;
  174. // // align-items: center;
  175. // justify-content: center;
  176. .function-title {
  177. font-size: 26rpx;
  178. font-family: PingFang SC, PingFang SC-Bold;
  179. font-weight: 700;
  180. color: #1a1a1a;
  181. line-height: 37rpx;
  182. }
  183. .function-btn {
  184. margin-top: 6rpx;
  185. border-radius: 6rpx;
  186. padding: 4rpx 13rpx;
  187. font-size: 22rpx;
  188. font-family: PingFang SC, PingFang SC-Regular;
  189. font-weight: 400;
  190. color: #ffffff;
  191. line-height: 30rpx;
  192. letter-spacing: 0.44rpx;
  193. }
  194. }
  195. }
  196. .function-item_0 {
  197. background: linear-gradient(180deg, #fef1d0, #fcf2d3);
  198. .function-btn {
  199. background-color: #ffcf6d;
  200. }
  201. }
  202. .function-item_1 {
  203. background: linear-gradient(180deg, #c9ebfc, #c8ecfc);
  204. .function-btn {
  205. background-color: #61C1FE;
  206. }
  207. }
  208. .function-item_2 {
  209. background: linear-gradient(180deg, #cff0eb, #cdf2ea);
  210. .function-btn {
  211. background-color: #63EBC3;
  212. }
  213. }
  214. }
  215. }
  216. </style>