积分订单列表完成

layouts/default.vue

@@ -16,7 +16,7 @@ html {
     'Helvetica Neue',
     Arial,
     sans-serif;
-    font-size: 13.698630136986301vw;
+    font-size: 13.6986301369863vw;
 }
 body {
   font-size: 12px;	

nuxt.config.js

@@ -28,7 +28,7 @@ export default {
       },
       {
         name: 'viewport',
-        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover'
+        content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'
       }
     ],
     link: [{

pages/point/detail.vue

@@ -27,7 +27,7 @@ import ProductList from "../../components/ProductList";
 export default {
   head() {
     return {
-      title: "商品详情页",
+      title: "积分商品详情页",
     };
   },
   data() {

pages/point/index.vue

@@ -39,7 +39,7 @@ import ProductList from "../../components/ProductList"
 export default {
   head() {
     return {
-      title: "订单页",
+      title: "积分主页",
     };
   },
   data() {

pages/point/list.vue

@@ -1,44 +1,72 @@
 <template>
   <div class="outer">
-    <div class="background">
+    <div class="order">
       <div class="top">
-        <h4 class="text">我的积分</h4>
-        <h2 class="point">999</h2>
-        <div class="earn">
-          <div>赚积分</div>
-        </div>
+        <div class="code">订单号 836847623234289</div>
+        <div class="status">待付款</div>
       </div>
-    </div>
-    <div class="container">
-      <div class="menu">
-        <div class="item item1">
-          <img src="../../static/point/shangcheng.png" alt="" />
-          <span>积分商城</span>
+      <div class="middle">
+        <div class="imgcon">
+          <img :src="listsrc" alt="" srcset="" />
         </div>
-        <div class="item item2">
-          <img src="../../static/point/mingxi.png" alt="" />
-          <span>积分明细</span>
+        <div class="content">
+          <div class="title">DMS CORTHE 水光气垫</div>
+          <div class="desc">15g SPF 50+ PA +++ 自然白</div>
+          <div class="amount">
+            <div>
+              <span class="text">共1件商品 合计 </span><span class="icon"></span
+              ><span>300</span>
+            </div>
+          </div>
         </div>
-        <div class="item item3">
-          <img src="../../static/point/dingdan.png" alt="" />
-          <span>积分订单</span>
+      </div>
+
+      <div class="footer">
+        <span class="paytime">付款倒计时：23:59:59</span>
+        <div class="paybutton">
+          <button class="cancel">取消订单</button>
+          <button class="pay">立刻付款</button>
         </div>
       </div>
-      <div class="news">
-        <img src="../../static/test/new.png" alt="" />
+    </div>
+    <div class="order">
+      <div class="top">
+        <div class="code">订单号 836847623234289</div>
+        <div class="status">待付款</div>
       </div>
-      <div class="show">
+      <div class="middle">
+        <div class="imgcon">
+          <img :src="listsrc" alt="" srcset="" />
+        </div>
+        <div class="content">
+          <div class="title">DMS CORTHE 水光气垫</div>
+          <div class="desc">15g SPF 50+ PA +++ 自然白</div>
+          <div class="amount">
+            <div>
+              <span class="text">共1件商品 合计 </span><span class="icon"></span
+              ><span>300</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <span class="paytime">付款倒计时：23:59:59</span>
+        <div class="paybutton">
+          <button class="cancel">取消订单</button>
+          <button class="pay">立刻付款</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductList from "../../components/ProductList"
+import ProductList from "../../components/ProductList";
 export default {
   head() {
     return {
-      title: "订单页",
+      title: "积分订单",
     };
   },
   data() {
@@ -48,10 +76,11 @@ export default {
       loading: false, //加载状态
       finished: false, //是否完成加载
       refreshing: false, //是否正在上拉刷新
+      listsrc: "/test/pro.png",
     };
   },
-  components:{
-    ProductList
+  components: {
+    ProductList,
   },
   beforeCreate() {},
   created() {},
@@ -96,121 +125,176 @@ export default {
 
 <style>
 .outer {
-  position: relative;
+  width: 100%;
+  background: #f8f8f8;
+  width: 7rem;
+  margin: 0 auto;
 }
-.background {
-  background-color: #f3b335;
+.outer .order {
   width: 100%;
-  height: 49.46vw;
+  background: #ffffff;
+  margin-top: 0.2rem;
+}
+.outer .order .top {
+  width: 100%rem;
+  height: 1rem;
   position: relative;
-  background: url("../../static/point/bj.png") no-repeat 0px 0px;
-  background-size: cover;
-  z-index: -1;
+  border-bottom: 0.01rem solid #e0e0e0;
 }
-.background .text {
-  position: absolute;
-  left: 4vw;
-  top: 8vw;
-  margin: 0;
-  padding: 0;
-  width: 14.9vw;
-  height: 5.33vw;
-  font-size: 3.7vw;
+.outer .order .top .code {
+  width: 3.44rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #ffffff;
-  line-height: 5.33vw;
-}
-.background .point {
+  color: #666666;
+  line-height: 0.4rem;
   position: absolute;
-  margin: 0;
-  padding: 0;
-  left: 4vw;
-  top: 15.33vw;
-  width: 36vw;
-  height: 16.8vw;
-  font-size: 12vw;
+  top: 0.3rem;
+  left: 0.3rem;
+}
+.outer .order .top .status {
+  width: 0.84rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #ffffff;
-  line-height: 14vw;
-}
-.background .earn {
+  color: #666666;
+  line-height: 0.4rem;
   position: absolute;
-  right: 0;
-  top: 20.66vw;
-  width: 21.33vw;
-  height: 7.33vw;
-  font-size: 3.46vw;
+  top: 0.3rem;
+  right: 0.3rem;
+}
+
+.outer .order .middle {
+  width: 100%;
+  height: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.outer .order .middle .imgcon {
+  width: 2.4rem;
+  height: 2.4rem;
+  background: #ffffff;
+  border-radius: 0.1rem;
+  border: 0.02rem solid #eeeeee;
+  box-sizing: border-box;
+  padding: 0.3rem;
+  margin-bottom: 1rem;
+}
+.outer .order .middle .imgcon img {
+  width: 100%;
+  height: 100%;
+}
+.outer .order .middle .content {
+  width: 4.48rem;
+  height: 3.4rem;
+  padding: 0.3rem 0.1rem;
+}
+.outer .order .middle .content .title {
+  width: 3.56rem;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #111111;
+  line-height: 0.45rem;
+}
+.outer .order .middle .content .desc {
+  width: 4.2rem;
+  height: 1.95rem;
+  font-size: 0.28rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  background: url("../../static/point/jifen.png") no-repeat;
-  background-size: cover;
-  box-sizing: border-box;
+  color: #666666;
+  line-height: 0.4rem;
+}
+.outer .order .middle .content .amount {
+  width: 4.2rem;
+  height: 1rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #fe9700;
+  line-height: 0.45rem;
+  position: relative;
 }
-.background .earn div {
+.outer .order .middle .content .amount div {
+  display: inline-block;
   position: absolute;
-  top: 1.5vw;
-  right: 2vw;
-  width: 10.4vw;
-  height: 4.93vw;
-  font-size: 3.46vw;
+  right: 0;
+  top: 0.2rem;
+}
+.outer .order .middle .content .amount .text {
+  width: 1.7rem;
+  height: 0.33rem;
+  font-size: 0.24rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #f3b235;
-  line-height: 4.93vw;
+  color: #666666;
+  line-height: 0.33rem;
 }
-.container {
-  margin-top: -13.33vw;
-  width: 100%;
-  padding: 0 4vw;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  z-index: 99;
+.outer .order .middle .content .amount .icon {
+  display: inline-block;
+  width: 0.25rem;
+  height: 0.25rem;
+  background: url("../../static/common/a01_jifen@2x.png") no-repeat 0 0;
+  background-size: cover;
 }
-.container .menu {
+.outer .order .footer {
   width: 100%;
-  height: 26.66vw;
-  background: #ffffff;
-  box-shadow: 0px 2px 10px 5px rgba(227, 227, 227, 0.5);
-  border-radius: 20px;
+  height: 1rem;
+  position: relative;
   display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
+  justify-content: space-between;
+  align-items: baseline;
 }
-.container .menu .item {
-  margin-top: 4vw;
-  width: 14.93vw;
-  height: 14.93vw;
+
+.outer .order .footer .paytime {
+  display: inline-block;
+  width: 2.84rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 0.4rem;
 }
-.container .menu .item img {
-  display: block;
-  width: 12vw;
-  height: 12vw;
-  margin: 0 auto;
+.outer .order .footer .paybutton {
+  display: flex;
+  justify-content: space-between;
+  width: 3.4rem;
 }
-.container .menu .item span {
+
+.outer .order .footer .paybutton .cancel {
+  border: none;
+  background-color: transparent;
+  outline: none;
   display: block;
-  width: 100%;
-  height: 3.73vw;
-  font-size: 3.73vw;
+  width: 1.6rem;
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  border: 0.02rem solid #aaaaaa;
+  font-size: 0.28rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #666666;
-  line-height: 3.73vw;
-  text-align: center;
-  margin-top: 3vw;
+  color: #aaaaaa;
+  line-height: 0.4rem;
 }
-
-.container .news {
-  margin-top: 4vw;
-  width: 100%;
-  height: 21.33vw;
-}
-.container .news img {
-  width: 100%;
-  height: 100%;
+.outer .order .footer .paybutton .pay {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  display: block;
+  width: 1.6rem;
+  height: 0.6rem;
+  background: #fe9700;
+  border-radius: 0.3rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.4rem;
 }
 </style>

pages/shop/index.vue

@@ -10,9 +10,9 @@
       <van-swipe-item>3</van-swipe-item>
       <van-swipe-item>4</van-swipe-item>
     </van-swipe>
-          <div class="show">
-        <product-list/>
-      </div>
+    <div class="show">
+      <product-list />
+    </div>
   </div>
 </template>
 
@@ -20,7 +20,7 @@
 <script type="text/javascript">
 import Vue from "vue";
 import axios from "axios";
-import ProductList from "../../components/ProductList"
+import ProductList from "../../components/ProductList";
 import {
   NavBar,
   Search,
@@ -58,8 +58,8 @@ export default {
       refreshing: false, //是否正在上拉刷新
     };
   },
-  components:{
-    ProductList
+  components: {
+    ProductList,
   },
   beforeCreate() {},
   created() {},
@@ -154,14 +154,13 @@ export default {
   width: 60.5vw;
   height: 12vm;
   flex-shrink: 0;
-  word-break:break-all;
-  height:20vw
+  word-break: break-all;
+  height: 20vw;
 }
 
-.shop-index .list .list-item .list-item-right .item-right-top{
+.shop-index .list .list-item .list-item-right .item-right-top {
   width: 60.5vw;
   height: 12vm;
   flex-shrink: 0;
 }
-
 </style>