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

<template>
  <view class="container safe-area-inset-bottom u-skeleton">
    <view class="top-panel">
      <view class="left">
        <image class="top-panel__img u-skeleton-circle" :src="(detail.icon && detail.icon.url) ? detail.icon.url : vuex_default_icon" mode="aspectFill"></image>
      </view>
      <view class="right">
        <view class="top-panel__name u-skeleton-fillet">
          {{ detail.name }}
        </view>
        <view class="top-panel__tags">
          <view class="top-panel__tags--area">{{ detail.area ? detail.area.name : '' }}</view>
          <view class="top-panel__tags--type" v-for="(tag, index1) in detail.type" :key="index1">{{ tag }}</view>
        </view>
        <view class="top-panel__info u-skeleton-fillet">
          办学性质：{{ detail.nature === 1 ? '公办' : (detail.nature === 2 ? '民办' : '-') }}
        </view>
      </view>
    </view>

    <view class="card u-skeleton-rect">
      <view class="card__title">
        概况
      </view>
      <view class="card__content">
        <u-parse :html="detail.introduce"></u-parse>
      </view>
    </view>

    <view class="card u-skeleton-rect">
      <view class="card__title">
        历年统招分数线
      </view>
      <view class="card__content">
        <view class="card__content--row" v-for="item in detail.school_scores" :key="item.id">
          <text>{{ item.year }}年</text><text>{{ item.total_score }}分</text>
        </view>
      </view>
    </view>

    <view class="card u-skeleton-rect">
      <view class="card__title">
        师资力量
      </view>
      <view class="card__content">
        <u-parse :html="detail.teacher"></u-parse>
      </view>
    </view>

    <view class="card">
      <view class="card__title">
        班型
      </view>
      <view class="card__content paragraph">
        <u-parse :html="detail.class"></u-parse>
      </view>
    </view>

    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>

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

<style lang="scss">
  .container {
    min-height: 100vh;
    background: #eaf8fe;
  }
  .top-panel {
    display: flex;
    align-items: center;
    padding: 40rpx 58rpx 32rpx;
    border-radius: 0 0 20rpx 20rpx;
    background-image: linear-gradient(to right, #2e63ef, #3d7ff1 68%, #4186f2);

    .left {

    }
    .right {
      margin-left: 28rpx;
    }
    &__img {
      width: 150rpx;
      height: 150rpx;
      border-radius: 100%;
    }
    &__name {
      text-transform: uppercase;
      color: #ffffff;
      font-weight: 500;
    }
    &__tags {
      padding-top: 18rpx;
      display: flex;
      align-items: center;

      &--area {
        color: #146ff9;
        font-size: 24rpx;
        border-radius: 20rpx;
        background-color: #fff;
        padding: 8rpx 18rpx;
      }
      &--type {
        color: #fff;
        font-size: 24rpx;
        border-radius: 20rpx;
        background-color: #dd9447;
        padding: 6rpx 18rpx;
      }
      & > view + view {
        margin-left: 10rpx;
      }
    }
    &__info {
      padding-top: 20rpx;
      font-size: 24rpx;
      text-transform: uppercase;
      color: #ffffff;
    }
  }
  .card {
    margin: 20rpx 24rpx 0;
    border-radius: 20rpx;
    filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
    background-color: #ffffff;
    padding: 32rpx 36rpx 40rpx 40rpx;

    &__title {
      display: inline-block;
      font-size: 30rpx;
      text-transform: uppercase;
      color: #333333;
      font-weight: 500;
      padding: 0 10rpx;
      z-index: 3;
      position: relative;

      &::after {
        content: '';
        background: linear-gradient(to right, #2e63ef, #4187f2);
        height: 6rpx;
        border-radius: 4rpx;
        z-index: 0;
        position: absolute;
        bottom: 4rpx;
        left: 0;
        right: 0;
      }
    }

    .paragraph {
      text-indent: 48rpx;
    }
    &__content {
      margin-top: 32rpx;
      font-size: 24rpx;
      line-height: 2;
      text-transform: uppercase;
      color: #333333;
    }
  }
</style>