积分明细

pages/point/bill.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="point-bill">
+    <div class="top">
+      <span class="icon"></span>
+      <span class="num">136</span>
+      <span class="text">我的积分</span>
+    </div>
+
+    <div class="bottom">
+      <div class="item">
+        <div class="content">
+          <span class="text">加油</span>
+          <span class="amount add">+ 10</span>
+        </div>
+        <div class="time">2018/09/20 18:00:00</div>
+      </div>
+      <div class="item">
+        <div class="content">
+          <span class="text">兑换商品</span>
+          <span class="amount">- 10</span>
+        </div>
+        <div class="time">2018/09/20 18:00:00</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+export default {
+  head() {
+    return {
+      title: "积分明细",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, // 加载状态
+      finished: false, // 是否完成加载
+      refreshing: false, // 是否正在上拉刷新
+      img: "/test/pro.png",
+    };
+  },
+  components: {
+    ProductList,
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    console.log(this);
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {},
+};
+</script>
+
+<style>
+.point-bill {
+  width: 100%;
+}
+.point-bill .top {
+  width: 100%;
+  height: 3.98rem;
+  background: url("../../static/point/bj@2x.png") no-repeat 0 0;
+  background-size: 100% 100%;
+  position: relative;
+  z-index: -1;
+}
+.point-bill .top .icon {
+  background: url("../../static/point/chengzhnagzhi@2x.png") no-repeat 0 0;
+  background-size: 100% 100%;
+  width: 0.35rem;
+  height: 0.35rem;
+  position: absolute;
+  right: 0.3rem;
+  top: 0.3rem;
+}
+.point-bill .top .num {
+  width: 2.12rem;
+  height: 0.98rem;
+  font-size: 0.7rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.98rem;
+
+  text-align: center;
+  position: absolute;
+  left: calc(50% - 1.06rem);
+  top: 0.6rem;
+}
+.point-bill .top .text {
+  width: 1.12rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.4rem;
+  position: absolute;
+  left: calc(50% - 0.56rem);
+  top: 1.68rem;
+}
+.point-bill .bottom {
+  width: 100%;
+  min-height:2rem;
+  background: #ffffff;
+  box-shadow: 0rem 0.02rem 0.1rem 0.05rem rgba(227, 227, 227, 0.5);
+  border-radius: 0.25rem;
+  margin-top: -1.3rem;
+  padding: 0.4rem 0.3rem;
+  box-sizing: border-box;
+}
+
+.point-bill .bottom .item {
+  width: 100%;
+  height: 1.56rem;
+  padding: 0.3rem 0;
+  border-bottom: 0.01rem solid #e0e0e0;
+  box-sizing: border-box;
+}
+.point-bill .bottom .item:nth-last-child(1){
+  border-bottom:none;
+}
+.point-bill .bottom .item .content {
+  font-family: PingFangSC-Regular, PingFang SC;
+  display: flex;
+  justify-content: space-between;
+}
+.point-bill .bottom .item .content .text {
+  display: inline-block;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.45rem;
+}
+.point-bill .bottom .item .content .amount {
+  display: inline-block;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-weight: 500;
+  color: #111111;
+  line-height: 0.45rem;
+}
+
+.point-bill .bottom .item .content .add {
+  color: #f3b235;
+}
+
+.point-bill .bottom .item .time {
+  width: 2.77rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 0.4rem;
+}
+</style>