<template>
  <view class="CampusFundingGuardian">
    <view class="accountWrapper">
      <view class="line1">
        <view>账户状态</view>
        <view class="status normal">已冻结</view>
      </view>
      <view class="line2">
        <view class="left">
          <view>待付订单</view>
          <view class="unit">（元）</view>
        </view>
        <view class="right red">
          <view>10.00</view>
          <view class="arrow"></view>
        </view>
      </view>
      <view class="line2 bd0">
        <view class="left">
          <view>垫资订单</view>
        </view>
        <view class="right">
          <view class="grey">去查询</view>
          <view class="arrow"></view>
        </view>
      </view>
    </view>
    <view class="remind">
      <view class="title">垫资守护提醒<view class="bb"></view></view>
      <view class="text">
        【安小智】11月7日(星期四) 在校消费时，因可用余额不足导致扣款失败，<span
          class="red"
          >为确保孩子优先吃饭，平台已为您先行垫付。</span
        >请家长及时处理垫资/待支付订单，避免影响孩子在校吃饭。
      </view>
      <view class="about">
        <view class="amount">
          <view class="pro">金额：</view>
          <view class="value">12元</view>
        </view>
        <view class="item">
          <view class="pro">地点：</view>
          <view class="value">高中食堂米粉</view>
        </view>
        <view class="item">
          <view class="pro">时间：</view>
          <view class="value">2024-11-07 12:20:43</view>
        </view>
        <view class="item">
          <view class="pro">备注：</view>
          <view class="value">可用余额不足，平台已先行垫付</view>
        </view>
        <!-- <view class="tip">
          <view class="warn"></view>
          <view>您尚未开通垫资守护，本次限免垫资已用完~</view>
        </view> -->
		<view class="tip normal">
          <view class="safe"></view>
          <view>垫资守护服务，限时免费体验中~</view>
        </view>
      </view>
    </view>
    <view class="img"></view>
    <view class="open">
      <view class="finger"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      faceType: "",
      fromPage: "",
    };
  },
  onLoad: function (options) {},
  onShow() {},
};
</script>

<style scoped lang="scss">
.CampusFundingGuardian {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #f0f1f1;
  display: flex;
  flex-direction: column;
  .accountWrapper {
    margin: 24rpx auto 0;
    width: 686rpx;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16rpx;
    .line1,
    .line2 {
      width: calc(100% - 48rpx);
      height: 100rpx;
      line-height: 100rpx;
      display: inline-flex;
      justify-content: space-between;
      font-size: 30rpx;
      color: #333333;
      margin: 0 24rpx;
      border-bottom: 1rpx solid #eeeeee;
      .status {
        align-self: center;
        width: 120rpx;
        height: 48rpx;
        line-height: 48rpx;
        background: #ff411c;
        border-radius: 10rpx;
        text-align: center;
        font-size: 28rpx;
        color: #ffffff;
      }
      .normal {
        background: #04b871;
      }
    }
    .left {
      display: inline-flex;
      .unit {
        font-size: 26rpx;
        color: #999999;
      }
    }
    .right {
      display: inline-flex;
      font-size: 38rpx;
      color: rgba(0, 0, 0, 0.85);

      .grey {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.5);
      }
      .arrow {
        align-self: center;
        margin-left: 16rpx;
        width: 15rpx;
        height: 24rpx;
        background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/rightArrow.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    }
    .red {
      color: #ff411c;
    }
    .bd0 {
      border-bottom: 0;
    }
  }
  .remind {
    margin: 24rpx auto 0;
    width: 686rpx;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16rpx;
    .title {
      padding: 0 27rpx;
      margin-top: 26rpx;
      width: calc(100% - 54rpx);
      text-align: center;
      font-size: 34rpx;
      color: rgba(0, 0, 0, 0.85);
      height: 48rpx;
      line-height: 48rpx;
      position: relative;
      .bb {
        position: absolute;
        width: 212rpx;
        height: 20rpx;
        background: rgba(4, 184, 113, 0.1);
        border-radius: 11rpx;
        bottom: 0;
        left: 50%;
        margin-left: -106rpx;
      }
    }
    .text {
      padding: 0 27rpx;
      margin-top: 26rpx;
      width: calc(100% - 54rpx);
      text-align: left;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.85);
      line-height: 40rpx;
      text-indent: 56rpx;
      .red {
        color: #e02020;
        font-weight: bold;
      }
    }
    .about {
      margin: 0 auto;
      margin-top: 10rpx;
      width: 574rpx;
      padding: 0 24rpx 20rpx 24rpx;
      margin-bottom: 24rpx;
      background: #fcf5f5;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      .amount,
      .item {
        margin-top: 16rpx;
        height: 40rpx;
        width: 100%;
        line-height: 40rpx;
        display: inline-flex;
        .pro {
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.5);
        }
        .value {
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      .item {
        margin-top: 0;
      }
      .tip {
        width: 526rpx;
        height: 48rpx;
        margin: 0 auto;
        padding: 0 24rpx;
        margin-top: 10rpx;
        background: rgba(254, 111, 70, 0.2);
        border-radius: 24rpx;
        display: inline-flex;
        font-weight: 400;
        font-size: 24rpx;
        color: #e02020;
        line-height: 48rpx;
        .warn {
          align-self: center;
          width: 22rpx;
          height: 22rpx;
          margin-right: 15rpx;
          background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/warn.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
        .safe {
		  align-self: center;
          width: 33rpx;
          height: 33rpx;
          margin-right: 4rpx;
          background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/safe.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }
      .normal {
        background: rgba(254, 221, 160, 0.5);
        border-radius: 24rpx;
		color: #935100;
      }
    }
  }
  .img {
    width: 686rpx;
    height: 270rpx;
    margin: 0 auto;
    margin-top: 24rpx;
    background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/dzshImg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .open {
    width: 742rpx;
    height: 154rpx;
    margin-top: 36rpx;
    background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/opendzsh.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    .finger {
      position: absolute;
      top: 51rpx;
      right: 28rpx;
      width: 70rpx;
      height: 110rpx;
      background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/finger.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
  }
}
</style>