xinfeiyue-wx/package_sub/pages/IndependentDetail/IndependentDetail.vue

<template>
  <view class="container safe-area-inset-bottom">
    <view class="wrap">
      <view class="picked-data">
        <view>{{ detail.year || '-' }}年</view>
        <view>{{ detail.area ? detail.area.group : "-" }}</view>
      </view>

      <view class="card">
        <view class="card__title">
          基本信息
        </view>

        <view class="card__body">
          <view class="info-row">
            <view class="info-row__title">学生姓名</view>
            <view class="info-row__value">{{ detail.name || ' ' }}</view>
          </view>
          <view class="info-row">
            <view class="info-row__title">性别</view>
            <view class="info-row__value">{{ detail.sex || ' ' }}</view>
          </view>
          <view class="info-row">
            <view class="info-row__title">准考号</view>
            <view class="info-row__value">{{ detail.number || ' ' }}</view>
          </view>
          <view class="info-row">
            <view class="info-row__title">考生类别</view>
            <view class="info-row__value">{{ detail.type || ' ' }}</view>
          </view>
          <!-- <view class="info-row">
            <view class="info-row__title">民族</view>
            <view class="info-row__value">{{ detail.nationality || ' ' }}</view>
          </view> -->
          <view class="info-row">
            <view class="info-row__title">户籍地址</view>
            <view class="info-row__value">{{ detail.address || ' ' }}</view>
          </view>
          <view class="info-row">
            <view class="info-row__title">移动电话</view>
            <view class="info-row__value">{{ detail.mobile || ' ' }}</view>
          </view>
          <view class="info-row">
            <view class="info-row__title">毕业学校</view>
            <view class="info-row__value">{{ detail.school || ' ' }}</view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card__title">
          自主招生(含课程基地实验项目)
        </view>

        <view class="card__body">
          <!-- <view class="info-row">
            <view class="info-row__title">其他专业是否服从</view>
            <view class="info-row__value">{{ detail.is_independent ? '是' : '否' }}</view>
          </view> -->

          <view class="sub-form2">
            <view class="sub-form2__row sub-form2-title">
              <view class="sub-form2__col1">
                编号
              </view>
              <view class="sub-form2__col2">
                代码
              </view>
              <view class="sub-form2__col3">
                学校名称
              </view>
            </view>

            <view class="sub-form2__row">
              <view class="sub-form2__col1">
                1
              </view>
              <view class="sub-form2__col2">
                {{ detail.school_code || '-' }}
              </view>
              <view class="sub-form2__col3">
                {{ detail.school_name || '-' }}
              </view>
            </view>
          </view>

          <view class="evaluation">
            <view class="evaluation__title">
              课程基地实验项目
            </view>
            <view class="evaluation__text">
              {{ detail.evaluation }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
    };
  },
  methods: {
    async getDetail(id) {
      try {
        const { detail } = await this.$u.api.independentRecruitmentsDetail({
          id,
        });
        console.log(detail);
        this.detail = detail;
      } catch (err) {
        console.error(err);
      }
    },
  },
  onLoad(options) {
    if (options.id) {
      this.getDetail(options.id);
    }
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #eaf8fe;

  .wrap {
    padding-top: 20rpx;

    .picked-data {
      display: flex;
      align-items: center;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));
      background-color: rgba(255, 255, 255, 0.5);
      margin: 0 24rpx;
      padding: 26rpx 160rpx;

      & > view {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: bold;
        white-space: nowrap;
      }
      & > view + view {
        margin-left: 10rpx;
      }
    }

    .card {
      margin: 28rpx 24rpx 0;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: #ffffff;

      &__title {
        background: #fbf1e8;
        border-radius: 20rpx 20rpx 0 0;
        text-align: center;
        font-size: 28rpx;
        text-transform: uppercase;
        color: #e77817;
        font-weight: 500;
        padding: 30rpx 36rpx;
      }
      &__body {
        padding: 34rpx 28rpx 52rpx 28rpx;
      }
    }
    .card + .card {
      margin-top: 22rpx;
    }
  }
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44rpx 0;
  line-height: 1;
  border-bottom: 1px solid rgba(152, 152, 152, 0.3);
}
.sub-form2 {
  text-align: center;
  margin-top: 34rpx;

  &-title {
    font-size: 24rpx;
    padding: 20rpx 0;
    text-transform: uppercase;
    color: #333333;
    font-weight: 500;
    background-color: #f6f8f7;
    text-align: center;
    border-bottom: none !important;
  }
  &__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e0e0e0;
    padding: 22rpx 0;
  }
  &__col1 {
    flex-basis: 20%;
    text-transform: uppercase;
    color: #333333;
  }
  &__col2 {
    flex-basis: 24.8%;
  }
  &__col3 {
    flex-basis: 47.9%;
  }
}
.evaluation {
  margin-top: 34rpx;

  &__title {
    font-size: 24rpx;
    text-transform: uppercase;
    color: #333333;
    font-weight: 500;
    line-height: 1;
    border-radius: 10rpx;
    background-color: #f6f8f7;
    padding: 20rpx 0 20rpx 34rpx;
  }
  &__text {
    font-size: 24rpx;
    text-transform: uppercase;
    color: #333333;
    padding: 26rpx 36rpx;
  }
}
</style>