health-front/pages_order/report/reportSummary/index.vue

<template>
  <view class="summary__view flex flex-column">
    <progressCircle ref="progressCircle" :progress="score"></progressCircle>
    
    <view v-if="change" class="score-change flex">
      <uv-icon v-if="change > 0" name="arrow-upward" color="#0DB556" size="24rpx"></uv-icon>
      <uv-icon v-else name="arrow-downward" color="#dd524d" size="24rpx"></uv-icon>
      <text class="score-change-value">{{ change }}</text>
      <text class="score-change-unit">分</text>
    </view>

    <button class="btn btn-test" @click="jumpToTest">重新测评</button>

    <view class="user flex">
      <view class="avatar">
        <image class="avatar-img" :src="avatarUrl" mode="scaleToFill"></image>
      </view>
      <view class="info">
        <view class="info-title"><text class="highlight">战斗世界</text><text>的专属配方</text></view>
        <view class="info-desc">世界这么美，身体要健康～</view>
      </view>
      <button class="btn btn-formula" @click="showFormula">查看配方</button>
    </view>
  </view>
</template>

<script>
	import progressCircle from './progressCircle.vue'

  export default {
		components: {
      progressCircle,
    },
    data() {
      return {
        score: 0,
        change: 0,
        avatarUrl: '',
      }
    },
    mounted() {
      this.score = 77
      this.change = 12
      this.avatarUrl = '/pages_order/static/report/avatar.png'
    },
    methods: {
      jumpToTest() {
        this.$utils.navigateTo('/pages_order/report/test/intro')
      },
      showFormula() {
        // todo: check
      }
    },
  }
</script>

<style scoped lang="scss">
.summary__view {
  position: relative;
  padding-top: 48rpx;
}

.score {
  &-change {
    position: absolute;
    right: 0;
    top: 346rpx;

    padding: 12rpx 24rpx;
    background: #F6F6F9CC;
    border-radius: 34rpx;
    box-shadow: 0 0 13rpx 1rpx #D3D2E599;

    &-value {
      margin: 0 4rpx;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 1.4;
      color: #252545;
    }

    &-unit {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      line-height: 1.4;
      color: #989898;
    }
  }
}

.btn {
  &-test {
    margin-top: 48rpx;
    padding: 12rpx 40rpx;
    border-radius: 32rpx;
    background: #E5E4EB;
    color: #252545;
    font-size: 28rpx;
    line-height: 1.5;
    font-weight: 400;
    font-family: PingFang SC;
  }

  &-formula {
    padding: 8rpx 24rpx;
    font-size: 28rpx;
    line-height: 1.5;
    font-weight: 600;
    font-family: PingFang SC;
    color: #FFFFFF;
    border-radius: 32rpx;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
  }
}

.user {
  margin-top: 48rpx;
  width: 100%;

  .avatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 52rpx;
    overflow: hidden;
    border: 4rpx solid #FFFFFF;

    &-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .info {
    margin: 0 24rpx;
    flex: 1;

    &-title {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      line-height: 1.2;
      color: #252545CC;

      .highlight {
        font-weight: 600;
        color: #252545;
        margin-right: 8rpx;
      }
    }

    &-desc {
      margin-top: 8rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.5;
      color: #989898;
    }

  }
}
</style>