JDD-WXCP/pages/personal/charge.vue

<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>