front-end/hdApp/src/pagesPurchase/bookExplain.vue

<template>
  <view class="app-content">
    <view class="rank-top-wrap">
      <view class="rank-top-text">
        <view class="rank-top-tit">预订说明</view>
      </view>
    </view>
    <view class="rank-bottom-wrap">
      <view class="rank-text">
        <view>预订时，先付部分花款</view>
        <view>到货后，按到货当天价格计算，多退少补</view>
        <view>预订下单后不可退款，请确认后再下单哦</view>
      </view>
      <view style="text-align:center;">
        <button style="margin:10upx auto;padding-left:50upx;padding-right:50upx;" class="admin-button-com blue middle" @click="goBack()">返回</button>
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import { getGhsDataApi} from "@/api/ghs/index";
export default {
  name: "bookExplain",
  components: {
  },
  data() {
    return {
      constant: this.$constant,
      list: [],
      kiloFee:0,
      miniKilo:0
    };
  },
  onLoad() {
    getGhsDataApi({id: this.option.id}).then(res => {
      if(res.code == 1){
        this.kiloFee = res.data.kiloFee
        this.miniKilo = res.data.miniKilo
      }
    });
  },
  computed: {
		...mapGetters({ loginInfo: "getLoginInfo" })
	},
  methods: {
      goBack(){
        uni.navigateBack()
      }
  }
};
</script>
<style lang="scss" scoped>
.rank-top-wrap {
  width: 100%;
  height: 230upx;
  position: relative;
  background-color: #191919;
  .rank-top-text {
    color: #d2d2d2;
    padding-top: 60upx;
    padding-left: 70upx;
    .rank-top-tit {
      color: #ffd515;
      font-size: 44upx;
    }
  }
  .rank-top-img {
    position: absolute;
    top: 20upx;
    right: 44upx;
    width: 232upx;
  }
}
.rank-bottom-wrap {
  padding: 30upx;
  background-color: #fff;
  color:#333333;
  .rank-text {
    font-size:33upx;
    margin-bottom: 26upx;
    & > view {
      margin-bottom:30upx;
    }
  }
  .btn-wrap {
    width: calc(100% - 60upx);
    margin-top: 50upx;
    .button-com {
      width: 100%;
    }
  }
  .level-list-wrap {
    border: 1px solid #eeeeee;
    font-size: 26upx;
    .level-list-tit,
    .level-list {
      @include disFlex(center, space-between);
      & > view {
        margin: 0 auto;
        flex: 1;
        @include disFlex(center, center);
        height: 70upx;
      }
      .level-img {
        ::v-deep.vip-text {
          left: 42upx;
          transform: scale(0.8);
        }
      }
    }
    .level-list-tit {
      color: #fff;
      background-color: #d9c096;
      & > view {
        border-left: 1px solid #fff;
      }
      & > view:first-child {
        border-left: none;
      }
    }
    .level-list {
      &:nth-child(2n) {
        background-color: #f7f7ed;
      }
      & > view {
        border-left: 1px solid #eeeeee;
      }
      & > view:first-child {
        border-left: none;
      }
    }
  }
}
</style>