index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <div class="point-index">
  3. <div class="background">
  4. <div class="top">
  5. <h4 class="text">我的积分</h4>
  6. <h2 class="point">999</h2>
  7. <div class="earn">
  8. <div>赚积分</div>
  9. </div>
  10. </div>
  11. </div>
  12. <div class="container">
  13. <div class="menu">
  14. <div class="item item1">
  15. <img src="../../static/point/shangcheng.png" alt="" />
  16. <span>积分商城</span>
  17. </div>
  18. <div class="item item2">
  19. <img src="../../static/point/mingxi.png" alt="" />
  20. <span>积分明细</span>
  21. </div>
  22. <div class="item item3">
  23. <img src="../../static/point/dingdan.png" alt="" />
  24. <span>积分订单</span>
  25. </div>
  26. </div>
  27. <div class="news">
  28. <img src="../../static/test/new.png" alt="" />
  29. </div>
  30. <div class="show">
  31. <product-list/>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import ProductList from "../../components/ProductList"
  38. export default {
  39. head() {
  40. return {
  41. title: "积分主页",
  42. };
  43. },
  44. data() {
  45. return {
  46. images: [],
  47. list: [],
  48. loading: false, //加载状态
  49. finished: false, //是否完成加载
  50. refreshing: false, //是否正在上拉刷新
  51. };
  52. },
  53. components:{
  54. ProductList
  55. },
  56. beforeCreate() {},
  57. created() {},
  58. beforeMount() {},
  59. mounted() {
  60. console.log(this);
  61. },
  62. beforeUpdate() {},
  63. updated() {},
  64. beforeDestroy() {},
  65. destroyed() {},
  66. methods: {
  67. // onLoad() {
  68. // var that = this;
  69. // that.$axios
  70. // .get("/getIntegralWaresInfoList", {
  71. // params: {
  72. // stationId: "1",
  73. // },
  74. // })
  75. // .then((res) => {
  76. // if (res.data.retCode == 0) {
  77. // that.list = res.data.data; //追加数据
  78. // // 加载状态结束
  79. // that.loading = false;
  80. // that.finished = true;
  81. // console.log(that.list);
  82. // }
  83. // });
  84. // },
  85. // onRefresh() {
  86. // // 清空列表数据
  87. // that.finished = true;
  88. // // 重新加载数据
  89. // // 将 loading 设置为 true,表示处于加载状态
  90. // that.loading = true;
  91. // that.onLoad();
  92. // },
  93. },
  94. };
  95. </script>
  96. <style>
  97. .point-index {
  98. position: relative;
  99. }
  100. .point-index .background {
  101. background-color: #f3b335;
  102. width: 7.5rem;
  103. height: 49.46vw;
  104. position: relative;
  105. background: url("../../static/point/bj.png") no-repeat 0px 0px;
  106. background-size: 100% 100%;
  107. z-index: -1;
  108. }
  109. .point-index .background .text {
  110. position: absolute;
  111. left: 4vw;
  112. top: 8vw;
  113. margin: 0;
  114. padding: 0;
  115. width: 14.9vw;
  116. height: 5.33vw;
  117. font-size: 3.7vw;
  118. font-family: PingFangSC-Regular, PingFang SC;
  119. font-weight: 400;
  120. color: #ffffff;
  121. line-height: 5.33vw;
  122. }
  123. .point-index .background .point {
  124. position: absolute;
  125. margin: 0;
  126. padding: 0;
  127. left: 4vw;
  128. top: 15.33vw;
  129. width: 36vw;
  130. height: 16.8vw;
  131. font-size: 12vw;
  132. font-family: PingFangSC-Regular, PingFang SC;
  133. font-weight: 400;
  134. color: #ffffff;
  135. line-height: 14vw;
  136. }
  137. .point-index .background .earn {
  138. position: absolute;
  139. right: 0;
  140. top: 20.66vw;
  141. width: 21.33vw;
  142. height: 7.33vw;
  143. font-size: 3.46vw;
  144. font-family: PingFangSC-Regular, PingFang SC;
  145. font-weight: 400;
  146. background: url("../../static/point/jifen.png") no-repeat;
  147. background-size: cover;
  148. box-sizing: border-box;
  149. }
  150. .point-index .background .earn div {
  151. position: absolute;
  152. top: 1.5vw;
  153. right: 2vw;
  154. width: 10.4vw;
  155. height: 4.93vw;
  156. font-size: 3.46vw;
  157. font-family: PingFangSC-Regular, PingFang SC;
  158. font-weight: 400;
  159. color: #f3b235;
  160. line-height: 4.93vw;
  161. }
  162. .point-index .container {
  163. margin-top: -13.33vw;
  164. width: 100%;
  165. padding: 0 4vw;
  166. box-sizing: border-box;
  167. display: flex;
  168. flex-direction: column;
  169. z-index: 99;
  170. }
  171. .point-index .container .menu {
  172. width: 100%;
  173. height: 26.66vw;
  174. background: #ffffff;
  175. box-shadow: 0px 2px 10px 5px rgba(227, 227, 227, 0.5);
  176. border-radius: 20px;
  177. display: flex;
  178. flex-direction: row;
  179. justify-content: space-around;
  180. align-items: center;
  181. }
  182. .point-index .container .menu .item {
  183. width: 14.93vw;
  184. height: 14.93vw;
  185. }
  186. .point-index .container .menu .item img {
  187. display: block;
  188. width: 12vw;
  189. height: 12vw;
  190. margin: 0 auto;
  191. }
  192. .point-index .container .menu .item span {
  193. display: block;
  194. width: 100%;
  195. height: 3.73vw;
  196. font-size: 3.73vw;
  197. font-family: PingFangSC-Regular, PingFang SC;
  198. font-weight: 400;
  199. color: #666666;
  200. line-height: 3.73vw;
  201. text-align: center;
  202. margin-top: 3vw;
  203. }
  204. .point-index .container .news {
  205. margin-top: 4vw;
  206. width: 100%;
  207. height: 21.33vw;
  208. }
  209. .point-index .container .news img {
  210. width: 100%;
  211. height: 100%;
  212. }
  213. </style>