|
|
- <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>
|