You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
108 lines
2.2 KiB
<template>
|
|
<view class="info">
|
|
<view class="title" v-if="data.title">{{ data.title }}</view>
|
|
<view class="flex process" v-if="difficulty">
|
|
<view>难度</view>
|
|
<view class="flex star">
|
|
<uv-icon v-for="(item, index) in new Array(difficulty).fill(1)" :key="index" name="star-fill" color="#FFFFFF" size="14rpx"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="content" v-if="data.shortTitle">
|
|
{{ data.shortTitle || '' }}
|
|
</view>
|
|
<view class="flex tag" v-if="tags.length">
|
|
<view class="tag-item" v-for="(item, index) in tags" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<image class="btn-img" src="@/static/image/icon-detail.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
difficulty() {
|
|
const num = parseInt(this.data?.process)
|
|
|
|
return isNaN(num) ? 0 : num
|
|
},
|
|
tags() {
|
|
return this.data?.tag?.split?.('、') || []
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.info {
|
|
padding: 30rpx 24rpx 24rpx 24rpx;
|
|
font-size: 0;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #6851A7;
|
|
}
|
|
|
|
.process {
|
|
margin-top: 7rpx;
|
|
column-gap: 8rpx;
|
|
display: inline-flex;
|
|
padding: 3rpx 16rpx;
|
|
font-size: 16rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
background: #6851A7;
|
|
border-radius: 13rpx;
|
|
|
|
.star {
|
|
column-gap: 6rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: 24rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #3E3A39;
|
|
}
|
|
|
|
.tag {
|
|
margin-top: 16rpx;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
column-gap: 12rpx;
|
|
row-gap: 8rpx;
|
|
|
|
&-item {
|
|
padding: 4rpx 10rpx;
|
|
font-size: 16rpx;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
background: rgba($color: #6851A7, $alpha: 0.59);
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 16rpx;
|
|
width: 190rpx;
|
|
height: auto;
|
|
&-img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|