积分商城页面

zhiyangdu
1 parent 74a17e5f
Showing 4 changed files with 262 additions and 5 deletions
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
src/router/index.js
static/img/back_right.png
+@charset "UTF-8";
+.main_box{
+  background: #fff;
+}
+  // 头部
+  .top_main{
+    margin:40px 30px;
+    padding: 30px;
+    height: 394px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 24px;
+    .top{
+      display: flex;
+      justify-content: space-between;
+      .left{
+        height: 40px;
+        font-size: 28px;
+        font-weight: 400;
+        color: #45270D;
+        line-height: 40px;
+        span{
+          margin-left: 8px;
+          height: 40px;
+          font-size: 28px;
+          font-weight: 500;
+          color: #F5A623;
+          line-height: 40px;
+        }
+      }
+      .right{
+        height: 33px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 33px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .back_right_iocn{
+          display: block;
+          width: 20px;
+          height:20px;
+          margin-left: 10px;
+        }
+      }
+    }
+  // 商品类型
+    .item_box{
+      display: flex;
+      justify-content: space-between;
+      margin: 40px 110px 30px 110px;
+      .item{
+        img{
+          display: block;
+          width: 90px;
+          height:90px;
+        }
+        .text{
+          width: 96px;
+          height: 33px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #666666;
+          line-height: 33px;
+          margin-top: 12px;
+        }
+      }
+    }
+    //赚取积分
+    .earn_points_box{
+      height: 90px;
+      background: #FFF8E8;
+      border-radius: 12px;
+      display:flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 30px 20px;
+      .earn_icon{
+        display: block;
+        width: 36px;
+        height:36px;
+      }
+      .desc{
+        height: 90px;
+        font-size: 26px;
+        font-weight: 400;
+        color: #746037;
+        line-height: 90px;
+      }
+      .btn{
+        padding: 9px 20px;
+        height: 50px;
+        background: #DAB277;
+        border-radius: 26px;
+        color: #fff;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        .earn_right_back{
+          display: block;
+          width: 9px;
+          height: 18px;
+          margin-left: 8px;
+        }
+      }
+    } 
+  }
+  // 内容区域
+  .tab_item_box{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin:50px 340px 33px 30px;
+    .item{
+      height: 33px;
+      font-size: 24px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 33px;
+    }
+    .active{
+      height: 48px;
+      font-size: 34px;
+      font-weight: 600;
+      color: #373737;
+      line-height: 48px;
+    }
+    .line{
+      width: 1px;
+      height: 20px;
+      background: #999999;
+      margin: 0 16px;
+    }
+  }
 \ No newline at end of file
+<template>
+<div>
+  <div class="main_box">
+      <div class="top_main">
+        <!-- 头部 -->
+        <div class="top">
+          <div class="left">
+            我的积分: <span>2800</span>
+          </div>
+          <div class="right">
+            兑换记录
+            <!-- 返回图标 -->
+            <img class="back_right_iocn" src="static/img/back_right.png" alt=""/> 
+          </div>
+        </div>
+        <!-- 商品类型 -->
+        <div class="item_box">
+          <div class="item">
+            <img src="static/img/1.png" alt=""/>
+            <div class="text">实物商品</div>
+          </div>
+          <div class="item">
+            <img src="static/img/1.png" alt=""/>
+            <div class="text">虚拟商品</div>
+          </div>
+          <div class="item">
+            <img src="static/img/1.png" alt=""/>
+            <div class="text">满减红包</div>
+          </div>
+        </div>
+        <!--积分赚取  -->
+        <div class="earn_points_box">
+          <img class="earn_icon" src="static/img/1.png" alt="">
+          <div class="desc">赚取更多积分，兑换精美礼品～</div>
+          <div class="btn">赚取积分  <img class="earn_right_back" src="static/img/back_right.png" alt=""/></div>
+        </div>
+      </div>
+      <!-- 为你推荐 -->
+      <div class="tab_item_box">
+        <div class="item active">为你推荐</div>
+        <!-- 分割线 -->
+        <div class="line"> </div>
+        <div class="item">热门商品</div>
+        <div class="item">精品推荐</div>
+      </div>
+      <!-- 实物商品 -->
+      <div class="tab_item_box">
+        <div class="item active">实物商品</div>
+        <!-- 分割线 -->
+        <div class="line"> </div>
+        <div class="item">实物商品</div>
+        <div class="item">精品推荐</div>
+      </div>
+      <!-- 虚拟商品 -->
+      <div class="tab_item_box">
+        <div class="item active">虚拟商品</div>
+        <!-- 分割线 -->
+        <div class="line"> </div>
+        <div class="item">热门商品</div>
+        <div class="item">精品推荐</div>
+      </div>
+      <!-- 满减红包 -->
+      <div class="tab_item_box">
+        <div class="item active">满减红包</div>
+        <!-- 分割线 -->
+        <div class="line"> </div>
+        <div class="item">热门商品</div>
+        <div class="item">精品推荐</div>
+      </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  //部件
+  components: {
+  },
+  //静态
+  props: [
+  ],
+  //对象内部的属性监听，也叫深度监听
+  watch: {
+  },
+  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
+  computed: {
+  },
+  //方法表示一个具体的操作，主要书写业务逻辑；
+  methods: {
+  },
+  //请求数据
+  created () {
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style rel="stylesheet/less" lang='less' scoped>
+@import 'pointsMall';
+</style>
+
@@ -32,7 +32,9 @@ const router = new Router({
                     path: "/fansShopMessageList",
                     name: "fansShopMessageList",
                     component: resolve => {
-                        require(["@/pages/fansShopMessageList/fansShopMessageList"], resolve);
+                        require([
+                            "@/pages/fansShopMessageList/fansShopMessageList"
+                        ], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -131,7 +133,9 @@ const router = new Router({
                     path: "/recommendMore",
                     name: "recommendMore",
                     component: resolve => {
-                        require(["@/pages/recommendMore/recommendMore"], resolve);
+                        require([
+                            "@/pages/recommendMore/recommendMore"
+                        ], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -178,7 +182,9 @@ const router = new Router({
                     path: "/optimization2",
                     name: "optimization2",
                     component: resolve => {
-                        require(["@/pages/optimization2/optimization2"], resolve);
+                        require([
+                            "@/pages/optimization2/optimization2"
+                        ], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -206,9 +212,18 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
-
+                {
+                    // 新版积分商城
+                    path: "/pointsMall",
+                    name: "pointsMall",
+                    component: resolve => {
+                        require(["@/pages/pointsMall/pointsMall"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                }
                 /* 优选和商城页面改版升级页面 结束 */
-
             ]
         },
         {