gcb_zc/components/toPay.vue

<template>
  <div class="to_pay clear-both">
    <ul class="pay_box">
      <li class="pay_title">招投标信息  3月</li>
      <li class="pay_price">
        <span>支付金额</span>
        <p>￥837.00</p>
      </li>
      <li class="pay_way">
        <span>支付方式</span>
        <p>微信支付</p>
      </li>
      <li class="pay_confirm">
        <button>确认支付</button> 
        <p>
        会员更划算哦！点击
        <span>成为会员</span></p>
      </li>
      <!-- <li class="pay_title"></li> -->
    </ul>
  </div>
</template>
<script>

import '~/assets/new.scss' // 引入
import '~/assets/a.scss' // 引入
import '~/static/css/style.css' // 引入
export default{
  data(){
    return {
      msg:''
    }
  }
}
</script>
  
<style scoped>
body div{
  height: 100%;
}
.to_pay{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.pay_box{
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 360px;
      background-color: #fff;
  /* padding-bottom: 20px; */
}
.pay_box li{
  padding: 20px 1.5rem;
  position: relative;
}
.pay_box li::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #f0f0f0;
}
.pay_box li:last-child::after{
  height: 0;
}
.pay_box .pay_title{
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: #202020;
}
.pay_box li p{
  float: right;
  /* color: #ff5c5c; */
  
}
.pay_box li span{
  color: #afafaf;
}
.pay_box .pay_confirm{
  
}
.pay_box .pay_confirm button{
  width: 90%;
    height: 50px;
    background: #ff5c5c;
    border-radius: 8px;
    border: none;
    margin: auto;
    display: block;
    color: #fff;
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
}
.pay_box .pay_confirm p{
  font-size: 14.5px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #afafaf;
    text-align: center;
    margin-top: 10px;
    float: none;
}
.pay_box .pay_confirm p span{
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

</style>