w-front-end / select_good · Commits

Commit 7cb3f5d2299d7f5f944f71829b6133e8b0291c94

Authored by zhiyangdu
1 parent 74a17e5f

积分商城页面

Inline Side-by-side
Showing 4 changed files with 262 additions and 5 deletions
src/pages/pointsMall/pointsMall.less 0 → 100644
  View file @7cb3f5d
  1 +@charset "UTF-8";
  2 +.main_box{
  3 + background: #fff;
  4 +}
  5 + // 头部
  6 + .top_main{
  7 + margin:40px 30px;
  8 + padding: 30px;
  9 + height: 394px;
  10 + background: #FFFFFF;
  11 + box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
  12 + border-radius: 24px;
  13 + .top{
  14 + display: flex;
  15 + justify-content: space-between;
  16 + .left{
  17 + height: 40px;
  18 + font-size: 28px;
  19 + font-weight: 400;
  20 + color: #45270D;
  21 + line-height: 40px;
  22 + span{
  23 + margin-left: 8px;
  24 + height: 40px;
  25 + font-size: 28px;
  26 + font-weight: 500;
  27 + color: #F5A623;
  28 + line-height: 40px;
  29 + }
  30 + }
  31 + .right{
  32 + height: 33px;
  33 + font-size: 24px;
  34 + font-weight: 400;
  35 + color: #999999;
  36 + line-height: 33px;
  37 + display: flex;
  38 + justify-content: center;
  39 + align-items: center;
  40 + .back_right_iocn{
  41 + display: block;
  42 + width: 20px;
  43 + height:20px;
  44 + margin-left: 10px;
  45 + }
  46 + }
  47 + }
  48 + // 商品类型
  49 + .item_box{
  50 + display: flex;
  51 + justify-content: space-between;
  52 + margin: 40px 110px 30px 110px;
  53 + .item{
  54 + img{
  55 + display: block;
  56 + width: 90px;
  57 + height:90px;
  58 + }
  59 + .text{
  60 + width: 96px;
  61 + height: 33px;
  62 + font-size: 24px;
  63 + font-weight: 400;
  64 + color: #666666;
  65 + line-height: 33px;
  66 + margin-top: 12px;
  67 + }
  68 + }
  69 + }
  70 + //赚取积分
  71 + .earn_points_box{
  72 + height: 90px;
  73 + background: #FFF8E8;
  74 + border-radius: 12px;
  75 + display:flex;
  76 + justify-content: space-between;
  77 + align-items: center;
  78 + padding: 30px 20px;
  79 + .earn_icon{
  80 + display: block;
  81 + width: 36px;
  82 + height:36px;
  83 + }
  84 + .desc{
  85 + height: 90px;
  86 + font-size: 26px;
  87 + font-weight: 400;
  88 + color: #746037;
  89 + line-height: 90px;
  90 + }
  91 + .btn{
  92 + padding: 9px 20px;
  93 + height: 50px;
  94 + background: #DAB277;
  95 + border-radius: 26px;
  96 + color: #fff;
  97 + text-align: center;
  98 + display: flex;
  99 + align-items: center;
  100 + .earn_right_back{
  101 + display: block;
  102 + width: 9px;
  103 + height: 18px;
  104 + margin-left: 8px;
  105 + }
  106 + }
  107 + }
  108 + }
  109 + // 内容区域
  110 + .tab_item_box{
  111 + display: flex;
  112 + align-items: center;
  113 + justify-content: space-between;
  114 + margin:50px 340px 33px 30px;
  115 + .item{
  116 + height: 33px;
  117 + font-size: 24px;
  118 + font-weight: 400;
  119 + color: #999999;
  120 + line-height: 33px;
  121 + }
  122 + .active{
  123 + height: 48px;
  124 + font-size: 34px;
  125 + font-weight: 600;
  126 + color: #373737;
  127 + line-height: 48px;
  128 + }
  129 + .line{
  130 + width: 1px;
  131 + height: 20px;
  132 + background: #999999;
  133 + margin: 0 16px;
  134 + }
  135 + }
0 \ No newline at end of file 136 \ No newline at end of file
src/pages/pointsMall/pointsMall.vue 0 → 100644
  View file @7cb3f5d
  1 +<template>
  2 +<div>
  3 + <div class="main_box">
  4 + <div class="top_main">
  5 + <!-- 头部 -->
  6 + <div class="top">
  7 + <div class="left">
  8 + 我的积分: <span>2800</span>
  9 + </div>
  10 + <div class="right">
  11 + 兑换记录
  12 + <!-- 返回图标 -->
  13 + <img class="back_right_iocn" src="static/img/back_right.png" alt=""/>
  14 + </div>
  15 + </div>
  16 + <!-- 商品类型 -->
  17 + <div class="item_box">
  18 + <div class="item">
  19 + <img src="static/img/1.png" alt=""/>
  20 + <div class="text">实物商品</div>
  21 + </div>
  22 + <div class="item">
  23 + <img src="static/img/1.png" alt=""/>
  24 + <div class="text">虚拟商品</div>
  25 + </div>
  26 + <div class="item">
  27 + <img src="static/img/1.png" alt=""/>
  28 + <div class="text">满减红包</div>
  29 + </div>
  30 + </div>
  31 + <!--积分赚取 -->
  32 + <div class="earn_points_box">
  33 + <img class="earn_icon" src="static/img/1.png" alt="">
  34 + <div class="desc">赚取更多积分，兑换精美礼品～</div>
  35 + <div class="btn">赚取积分 <img class="earn_right_back" src="static/img/back_right.png" alt=""/></div>
  36 + </div>
  37 + </div>
  38 + <!-- 为你推荐 -->
  39 + <div class="tab_item_box">
  40 + <div class="item active">为你推荐</div>
  41 + <!-- 分割线 -->
  42 + <div class="line"> </div>
  43 + <div class="item">热门商品</div>
  44 + <div class="item">精品推荐</div>
  45 + </div>
  46 + <!-- 实物商品 -->
  47 + <div class="tab_item_box">
  48 + <div class="item active">实物商品</div>
  49 + <!-- 分割线 -->
  50 + <div class="line"> </div>
  51 + <div class="item">实物商品</div>
  52 + <div class="item">精品推荐</div>
  53 + </div>
  54 + <!-- 虚拟商品 -->
  55 + <div class="tab_item_box">
  56 + <div class="item active">虚拟商品</div>
  57 + <!-- 分割线 -->
  58 + <div class="line"> </div>
  59 + <div class="item">热门商品</div>
  60 + <div class="item">精品推荐</div>
  61 + </div>
  62 + <!-- 满减红包 -->
  63 + <div class="tab_item_box">
  64 + <div class="item active">满减红包</div>
  65 + <!-- 分割线 -->
  66 + <div class="line"> </div>
  67 + <div class="item">热门商品</div>
  68 + <div class="item">精品推荐</div>
  69 + </div>
  70 + </div>
  71 +</div>
  72 +</template>
  73 +
  74 +<script>
  75 +export default {
  76 + data () {
  77 + return {
  78 +
  79 + }
  80 + },
  81 + //部件
  82 + components: {
  83 + },
  84 + //静态
  85 + props: [
  86 + ],
  87 + //对象内部的属性监听，也叫深度监听
  88 + watch: {
  89 + },
  90 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  91 + computed: {
  92 + },
  93 + //方法表示一个具体的操作，主要书写业务逻辑；
  94 + methods: {
  95 + },
  96 + //请求数据
  97 + created () {
  98 + },
  99 + mounted () {
  100 + }
  101 +}
  102 +</script>
  103 +
  104 +<style rel="stylesheet/less" lang='less' scoped>
  105 +@import 'pointsMall';
  106 +</style>
  107 +
src/router/index.js
  View file @7cb3f5d
@@ -32,7 +32,9 @@ const router = new Router({ @@ -32,7 +32,9 @@ const router = new Router({
32 path: "/fansShopMessageList", 32 path: "/fansShopMessageList",
33 name: "fansShopMessageList", 33 name: "fansShopMessageList",
34 component: resolve => { 34 component: resolve => {
35 - require(["@/pages/fansShopMessageList/fansShopMessageList"], resolve); 35 + require([
  36 + "@/pages/fansShopMessageList/fansShopMessageList"
  37 + ], resolve);
36 }, 38 },
37 meta: { 39 meta: {
38 requireAuth: false 40 requireAuth: false
@@ -131,7 +133,9 @@ const router = new Router({ @@ -131,7 +133,9 @@ const router = new Router({
131 path: "/recommendMore", 133 path: "/recommendMore",
132 name: "recommendMore", 134 name: "recommendMore",
133 component: resolve => { 135 component: resolve => {
134 - require(["@/pages/recommendMore/recommendMore"], resolve); 136 + require([
  137 + "@/pages/recommendMore/recommendMore"
  138 + ], resolve);
135 }, 139 },
136 meta: { 140 meta: {
137 requireAuth: false 141 requireAuth: false
@@ -178,7 +182,9 @@ const router = new Router({ @@ -178,7 +182,9 @@ const router = new Router({
178 path: "/optimization2", 182 path: "/optimization2",
179 name: "optimization2", 183 name: "optimization2",
180 component: resolve => { 184 component: resolve => {
181 - require(["@/pages/optimization2/optimization2"], resolve); 185 + require([
  186 + "@/pages/optimization2/optimization2"
  187 + ], resolve);
182 }, 188 },
183 meta: { 189 meta: {
184 requireAuth: false 190 requireAuth: false
@@ -206,9 +212,18 @@ const router = new Router({ @@ -206,9 +212,18 @@ const router = new Router({
206 requireAuth: false 212 requireAuth: false
207 } 213 }
208 }, 214 },
209 - 215 + {
  216 + // 新版积分商城
  217 + path: "/pointsMall",
  218 + name: "pointsMall",
  219 + component: resolve => {
  220 + require(["@/pages/pointsMall/pointsMall"], resolve);
  221 + },
  222 + meta: {
  223 + requireAuth: false
  224 + }
  225 + }
210 /* 优选和商城页面改版升级页面 结束 */ 226 /* 优选和商城页面改版升级页面 结束 */
211 -  
212 ] 227 ]
213 }, 228 },
214 { 229 {
static/img/back_right.png 0 → 100755
View file @7cb3f5d

477 Bytes