product_wx/pages/subPackages/enterPriseBill/detail.vue

<template>
   <div class="enterPriseBillDetail">
      <div class="detailBody">
         <ul class="detailUl">
           <li class="detailLi">
             <span class="liName">企业名称</span>
             <span class="liInfo">XXXXX企业</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单名称</span>
             <span class="liInfo">2024年01月26日~2024年01月31日房租费</span>
           </li>
           <li class="detailLi">
             <span class="liName">对应载体</span>
             <span class="liInfo">A/301-1</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单金额</span>
             <span class="liInfo">￥30000.00</span>
           </li>
           <li class="detailLi">
             <span class="liName">欠款金额</span>
             <span class="liInfo">￥30000.00</span>
           </li>
           <li class="detailLi">
             <span class="liName">发票号</span>
             <span class="liInfo" style="color: #0365F9">XXXXX.pdf</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单逾期</span>
             <span class="liInfo" style="color: #F21912">15天</span>
           </li>
         </ul>
        <button class="loginbtn" @click="backClick">
          返回
        </button>
      </div>
   </div>
</template>

<script>
export default {
  name: "detail",
  data(){
    return{

    }
  },
  methods:{
    backClick(){
      uni.navigateTo({
        url: "/pages/subPackages/enterPriseBill/index",
      });
    }
  }
}
</script>

<style lang="scss">
    .enterPriseBillDetail{
      .detailBody{
        background: white;
        margin-top: 26rpx;
        padding: 32rpx;
        height: 1424rpx;
        box-sizing: border-box;
        .detailUl{
          .detailLi{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 112rpx;
            .liName{
              font-size: 32rpx;
              color: rgba(51, 51, 51, 1);
              white-space: nowrap;
            }
            .liInfo{
              display: inline-block;
              text-align: right;
              max-width: 428rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
            }
          }
        }
        .loginbtn {
          margin-top: 176rpx;
          border-radius: 8rpx !important;
          padding: 24rpx;
          background: rgba(3, 101, 249, 1);
          color: white;
          font-size: 36rpx;
        }
      }
    }
</style>