储值主页、会员页、充值页、充值成功页、余额页 静态页面绘制完成

pages/point/amount.vue → pages/personal/amount.vue

@@ -116,7 +116,7 @@ export default {
   width: 6.9rem;
   height: 2.8rem;
   background: url("../../static/point/4_b01_bj@2x.png") no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
   position: relative;
 }
 .outer .container .overview .title {

pages/personal/charge.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="point-index">
+    <div class="background">
+      <div class="headline"></div>
+    </div>
+    <div class="content">
+      <div class="title">我的卡片 (2)</div>
+      <div class="gasoline">
+        <div class="title">汽油卡</div>
+        <div class="text">余额 <span>850.00</span>元</div>
+        <button>充值</button>
+      </div>
+      <div class="diesel">
+        <div class="title">柴油卡</div>
+        <div class="text">余额 <span>850.00</span>元</div>
+        <button>充值</button>
+      </div>
+    </div>
+
+    <div class="mask">
+      <div class="layer"></div>
+      <div class="charge">
+        <div class="title">充值</div>
+        <div class="tip">提示：充值汽油1000元，赠送100元，实际到账1100元</div>
+        <div class="amount">
+          <span>汽油充值</span>
+          <input type="text" placeholder="输入充值金额" />
+          <span>￥</span>
+        </div>
+      </div>
+      <button>确认充值</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+import { mapState, mapActions } from "vuex";
+export default {
+  head() {
+    return {
+      title: "会员充值",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, //加载状态
+      finished: false, //是否完成加载
+      refreshing: false, //是否正在上拉刷新
+    };
+  },
+  components: {
+    ProductList,
+  },
+  computed: {
+    ...mapState({
+      pointInfo: (state) => state.point.pointInfo,
+    }),
+  },
+  mounted() {
+    // this.getPointInfo();
+  },
+  methods: {
+    ...mapActions({
+      getPointInfo: "point/getPointInfo",
+    }),
+  },
+};
+</script>
+
+<style>
+.point-index {
+  position: relative;
+  height: 100vh;
+}
+.point-index .background {
+  background-color: #f3b335;
+  width: 7.5rem;
+  height: 7.5rem;
+  position: relative;
+  background: url("~static/personal/23@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.point-index .background .headline {
+  width: 6.9rem;
+  height: 4.33rem;
+  background: url("~static/personal/bj2@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  margin: 0.3rem auto;
+}
+
+.point-index .content {
+  position: absolute;
+  top: 3.78rem;
+  bottom: 0rem;
+  left: 0rem;
+  right: 0rem;
+  background-color: #ffffff;
+  border-radius: 0.3rem 0.3rem 0 0;
+  padding: 0.3rem;
+  display: flex;
+  flex-direction: column;
+}
+.point-index .content > div:not(.title) {
+  width: 6.9rem;
+  height: 1.6rem;
+  margin-top: 0.3rem;
+  position: relative;
+}
+.point-index .content .title {
+  font-size: 0.35rem;
+  color: #333333;
+  font-weight: 600;
+}
+.point-index .content .gasoline {
+  background: url("~static/personal/bj3@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .content .diesel {
+  background: url("~static/personal/bj4@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .content div .title {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 0.45rem;
+  position: absolute;
+  top: 0.27rem;
+  left: 1.67rem;
+}
+.point-index .content .gasoline .text {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #3db58f;
+  line-height: 0.45rem;
+  position: absolute;
+  top: 0.9rem;
+  left: 1.67rem;
+}
+.point-index .content .diesel .text {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ea8c7d;
+  line-height: 0.45rem;
+  position: absolute;
+  top: 0.9rem;
+  left: 1.67rem;
+}
+
+.point-index .content div .text span {
+  color: #fff;
+}
+.point-index .content div button {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  display: block;
+  width: 1.4rem;
+  height: 0.6rem;
+  background: #ffffff;
+  border-radius: 0.3rem;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.3rem;
+}
+.point-index .content .gasoline button {
+  color: #24ac81;
+}
+
+.point-index .content .diesel button {
+  color: #e87d6d;
+}
+
+.point-index .mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.point-index .mask .layer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #111111;
+  opacity: 0.59;
+}
+.point-index .mask .charge {
+  position: absolute;
+  top: 8.24rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #f2f2f2;
+  border-radius: 0.42rem 0.42rem 0rem 0rem;
+  box-sizing: border-box;
+  padding: 0.3rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.point-index .mask .charge div {
+  margin-top: 0.2rem;
+}
+.point-index .mask .charge .title {
+  width: 0.64rem;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.45rem;
+}
+.point-index .mask .charge .tip {
+  height: 0.33rem;
+  font-size: 0.24rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 0.33rem;
+}
+.point-index .mask .charge .amount {
+  width: 6.9rem;
+  height: 1.2rem;
+  background: url("~static/personal/biankuang@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  position: relative;
+}
+.point-index .mask .charge .amount span:nth-child(1) {
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-weight: 600;
+  color: #884e16;
+  line-height: 0.4rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 0.51rem;
+}
+.point-index .mask .charge .amount input {
+  background: none;
+  outline: none;
+  border: none;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.4rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 2.54rem;
+}
+.point-index .mask .charge .amount span:nth-last-child(1) {
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 0.4rem;
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+}
+
+.point-index .mask button {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  bottom: 0.83rem;
+  position: absolute;
+  width: 6.9rem;
+  height: 0.8rem;
+  left:.3rem;
+  background: #CCCCCC;
+  border-radius: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.45rem;
+  
+}
+</style>

pages/personal/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="point-index">
+    <div class="background">
+      <div class="avatar">
+        <img src="/test/null.jpg" alt="" />
+      </div>
+      <div class="name">李哈哈</div>
+    </div>
+    <div class="container">
+      <div class="banner"></div>
+      <div class="menu">
+        <div class="item">
+          <div>
+            <div class="icon"></div>
+            <div class="text">会员充值</div>
+          </div>
+          <div class="go">></div>
+        </div>
+        <div class="item">
+          <div>
+            <div class="icon"></div>
+            <div class="text">电子会员</div>
+          </div>
+          <div class="go">></div>
+        </div>
+        <div class="item">
+          <div>
+            <div class="icon"></div>
+            <div class="text">优惠券</div>
+          </div>
+          <div class="go">></div>
+        </div>
+        <div class="item">
+          <div>
+            <div class="icon"></div>
+            <div class="text">积分商城</div>
+          </div>
+          <div class="go">></div>
+        </div>
+        <div class="item">
+          <div>
+            <div class="icon"></div>
+            <div class="text">今日油价</div>
+          </div>
+          <div class="go">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+import { mapState, mapActions } from "vuex";
+export default {
+  head() {
+    return {
+      title: "个人中心",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, // 加载状态
+      finished: false, // 是否完成加载
+      refreshing: false, // 是否正在上拉刷新
+    };
+  },
+  components: {
+    ProductList,
+  },
+  computed: {
+    ...mapState({
+      pointInfo: (state) => state.point.pointInfo,
+    }),
+  },
+  mounted() {
+    // this.getPointInfo();
+  },
+  methods: {
+    ...mapActions({
+      getPointInfo: "point/getPointInfo",
+    }),
+  },
+};
+</script>
+
+<style>
+.point-index {
+  position: relative;
+}
+.point-index .background {
+  background-color: #f3b335;
+  width: 7.5rem;
+  height: 49.46vw;
+  position: relative;
+  background: url("../../static/personal/bj@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  z-index: -1;
+}
+
+.point-index .background .avatar {
+  width: 1.1rem;
+  height: 1.1rem;
+  position: absolute;
+  top: 0.44rem;
+  left: 0.3rem;
+}
+
+.point-index .background .avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.55rem;
+}
+
+.point-index .background .name {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 0.45rem;
+  position: absolute;
+  top: 0.75rem;
+  left: 1.6rem;
+}
+
+.point-index .container {
+  margin-top: -1.5rem;
+  width: 100%;
+  padding: 0 4vw;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  z-index: 99;
+}
+
+.point-index .container .banner {
+  width: 100%;
+  height: 26.66vw;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px 5px rgba(227, 227, 227, 0.5);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background: url("../../static/personal/banner@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+
+.point-index .container .menu {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.4rem;
+  width: 6.9rem;
+  background: #ffffff;
+  box-shadow: 0rem 0.02rem 0.07rem 0.05rem rgba(243, 243, 243, 0.5);
+  border-radius: 0.14rem;
+}
+
+.point-index .container .menu .item {
+  box-sizing: border-box;
+  padding: 0.36rem 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #eeeeee;
+}
+.point-index .container .menu .item div {
+  display: flex;
+}
+.point-index .container .menu .item div .icon {
+  width: 0.45rem;
+  height: 0.38rem;
+  background: url("~static/personal/vip@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .container .menu .item:nth-child(2) div .icon {
+  background: url("~static/personal/bianpinghuatubiaosheji-@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .container .menu .item:nth-child(3) div .icon {
+  background: url("~static/personal/bianpinghuatubiaosheji-@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .container .menu .item:nth-child(4) div .icon {
+  background: url("~static/personal/jifen@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .container .menu .item:nth-child(5) div .icon {
+  background: url("~static/personal/youjia@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .container .menu .item div .text {
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.4rem;
+  margin-left: 0.19rem;
+}
+.point-index .container .menu .item .go {
+  color: #666666;
+}
+</style>

pages/personal/member.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="point-index">
+    <div class="background"></div>
+    <div class="card">
+      <div class="avatar">
+        <img src="/test/null.jpg" alt="" />
+        <div class="info">
+          <div class="name">李哈哈</div>
+          <div class="text">智慧易加·油站专家</div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="item">
+          <div>1280.01</div>
+          <div>总余额</div>
+        </div>
+        <div class="item">
+          <div>200</div>
+          <div>积分</div>
+        </div>
+        <div class="item">
+          <div>0张</div>
+          <div>优惠券</div>
+        </div>
+      </div>
+      <div class="charge">
+        <div class="tip">充值会员享更多优惠</div>
+        <button>去充值</button>
+      </div>
+    </div>
+    <div class="title">
+      <div>
+        <div class="icon"></div>
+        <div>黄金会员</div>
+      </div>
+      <div>查看详情 ></div>
+    </div>
+    <div class="privilege">
+      <div class="title">会员特权</div>
+      <div>
+        <span class="icon"></span>
+        <span class="text">会员8.5折 </span><span>｜ 黄金会员加油享会员折扣</span>
+      </div>
+      <div>
+        <span class="icon"></span>
+        <span class="text">积分抵现 </span><span>｜ 10积分抵1元</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+import { mapState, mapActions } from "vuex";
+export default {
+  head() {
+    return {
+      title: "个人中心",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, // 加载状态
+      finished: false, // 是否完成加载
+      refreshing: false, // 是否正在上拉刷新
+    };
+  },
+  components: {
+    ProductList,
+  },
+  computed: {
+    ...mapState({
+      pointInfo: (state) => state.point.pointInfo,
+    }),
+  },
+  mounted() {
+    // this.getPointInfo();
+  },
+  methods: {
+    ...mapActions({
+      getPointInfo: "point/getPointInfo",
+    }),
+  },
+};
+</script>
+
+<style>
+.point-index {
+  width: 100vw;
+  height: 100vh;
+}
+.point-index .background {
+  width: 7.5rem;
+  height: 4.24rem;
+  background: linear-gradient(
+    180deg,
+    #fde1ac 0%,
+    rgba(255, 242, 219, 0.56) 90%,
+    rgba(255, 244, 224, 0) 100%
+  );
+}
+.point-index .card {
+  width: 6.9rem;
+  height: 3.94rem;
+  margin: 0 auto;
+  margin-top: -3.84rem;
+  background: url("~static/personal/bj5@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  position: relative;
+}
+.point-index .card .avatar {
+  width: 3.2rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.point-index .card .avatar img {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 0.4rem;
+}
+.point-index .card .avatar .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.point-index .card .avatar .info .name {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #884e16;
+  line-height: 0.45rem;
+}
+.point-index .card .avatar .info .text {
+  height: 0.28rem;
+  font-size: 0.2rem;
+  font-family: PingFangSC-Light, PingFang SC;
+  font-weight: 300;
+  color: #884e16;
+  line-height: 0.28rem;
+}
+.point-index .card .content {
+  position: absolute;
+  height: 1.2rem;
+  width: 5.8rem;
+  left: 0.7rem;
+  top: 1.6rem;
+  display: flex;
+  justify-content: space-around;
+  text-align: center;
+}
+.point-index .card .content .item div:nth-child(1) {
+  width: 1.26rem;
+  height: 0.5rem;
+  font-size: 0.36rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #884e16;
+  line-height: 0.5rem;
+}
+.point-index .card .content .item div:nth-child(2) {
+  height: 0.33rem;
+  font-size: 0.24rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #884e16;
+  line-height: 0.33rem;
+}
+.point-index .card .charge {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  width: 100%;
+  left: 0.7rem;
+  width: 6.1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  bottom: 0.3rem;
+  margin-right: 0.3rem;
+}
+.point-index .card .charge button {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  width: 1.64rem;
+  height: 0.6rem;
+  background: #ff885d;
+  border-radius: 0.33rem;
+  margin-right: 0.3rem;
+  font-size: 0.28rem;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.4rem;
+}
+.point-index .title {
+  box-sizing: border-box;
+  padding: 0.4rem 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.point-index .title > div {
+  display: flex;
+}
+.point-index .title div .icon {
+  width: 0.1rem;
+  height: 0.4rem;
+  background: #d2a781;
+  border-radius: 0.05rem;
+}
+.point-index .title div div:nth-last-child(1) {
+  width: 1.12rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 600;
+  color: #111111;
+  line-height: 0.4rem;
+  margin-left: 0.3rem;
+}
+
+.point-index .title div:nth-last-child(1) {
+  height: 0.33rem;
+  font-size: 0.24rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 0.33rem;
+}
+.point-index .privilege {
+  padding: 0.3rem;
+  padding-top: 0;
+  text-align: center;
+}
+.point-index .privilege div:not(:nth-child(1)) {
+  width: 6.5rem;
+  height: 1rem;
+  border-radius: 0.1rem;
+  border: 0.01rem solid #d2a781;
+  margin: 0.2rem;
+  box-sizing: border-box;
+}
+.point-index .privilege .title {
+  width: 100%;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 0.4rem;
+  text-align: center;
+  display: inline;
+}
+.point-index .privilege > div:not(.title) {
+  position: relative;
+}
+.point-index .privilege div .icon {
+  position: absolute;
+  top: 0.27rem;
+  left: 0.3rem;
+}
+.point-index .privilege div:nth-child(2) .icon {
+  display: block;
+  width: 0.29rem;
+  height: 0.45rem;
+  background: url("~static/personal/zhekou@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .privilege div:nth-child(3) .icon {
+  display: block;
+  width: 0.29rem;
+  height: 0.45rem;
+  background: url("~static/personal/jifen-2@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+}
+.point-index .privilege div .text {
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.4rem;
+  position: absolute;
+  top: 0.27rem;
+  left: 0.79rem;
+}
+.point-index .privilege div span:nth-child(3) {
+position: absolute;
+  color: #c5c5c5;
+  top:.32rem;
+  left:2.1rem
+}
+</style>

pages/personal/success.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="container">
+    <div class="icon"></div>
+    <div class="text">充值成功</div>
+    <div class="menu">
+      <nuxt-link class="text1" to="/point" tag="span">回到首页</nuxt-link>
+      <nuxt-link class="text2" to="/point/list" tag="span">查看订单</nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+import { mapState, mapActions } from "vuex";
+export default {
+  head() {
+    return {
+      title: "个人中心",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, // 加载状态
+      finished: false, // 是否完成加载
+      refreshing: false, // 是否正在上拉刷新
+    };
+  },
+  components: {
+    ProductList,
+  },
+  computed: {
+    ...mapState({
+      pointInfo: (state) => state.point.pointInfo,
+    }),
+  },
+  mounted() {
+    // this.getPointInfo();
+  },
+  methods: {
+    ...mapActions({
+      getPointInfo: "point/getPointInfo",
+    }),
+  },
+};
+</script>
+
+<style>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+.container .icon {
+  background: url("~static/personal/cg@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 1.81rem;
+  height: 1.81rem;
+  position: absolute;
+  left: 2.85rem;
+  top: 1.6rem;
+}
+
+.container .text {
+  width: 1.6rem;
+  height: 0.56rem;
+  font-size: 0.4rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.56rem;
+  text-align: center;
+  position: absolute;
+  top: 3.71rem;
+  left: 2.95rem;
+}
+
+.container .menu {
+  width: 80vw;
+  height: 1.1rem;
+  background: #ffffff;
+  box-shadow: 0rem 0.02rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  top: 50vh;
+  left: 10vw;
+}
+.container .menu span {
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.45rem;
+}
+
+
+</style>