feat: 完成分龄页开发
This commit is contained in:
R524809
@@ -1,3 +1,6 @@
|
||||
@import '../../style/theme.less';
|
||||
@import '../../style/tags.less';
|
||||
|
||||
.worksheet-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
@@ -63,3 +66,80 @@
|
||||
background: #fff8e1;
|
||||
color: #f57f17;
|
||||
}
|
||||
|
||||
/* ── variant: track（对齐首页 home-track-card） ── */
|
||||
.worksheet-card--track {
|
||||
box-shadow: 0 6rpx 20rpx rgba(50, 46, 37, 0.06);
|
||||
}
|
||||
|
||||
.worksheet-card--track.worksheet-card--active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.worksheet-card__top {
|
||||
height: 270rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
border-bottom: 1rpx solid rgba(50, 46, 37, 0.08);
|
||||
background: #f5edd8;
|
||||
}
|
||||
|
||||
.worksheet-card__cover {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.worksheet-card__icon {
|
||||
font-size: 72rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.worksheet-card__tags-track {
|
||||
position: absolute;
|
||||
right: 12rpx;
|
||||
bottom: 12rpx;
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.worksheet-card__body {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 20rpx @page-padding-inner-x 22rpx;
|
||||
background: #ffffff;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.worksheet-card__title-track {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: @text-title;
|
||||
line-height: 1.35;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.worksheet-card__sub {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
color: @text-gray;
|
||||
line-height: 1.45;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -3,10 +3,18 @@ Component({
|
||||
styleIsolation: 'apply-shared',
|
||||
},
|
||||
properties: {
|
||||
variant: {
|
||||
type: String,
|
||||
value: 'classic',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
previewBg: {
|
||||
type: String,
|
||||
value: '#f5f5f5',
|
||||
@@ -19,6 +27,10 @@ Component({
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
ageBand: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
difficulty: {
|
||||
type: String,
|
||||
value: '',
|
||||
@@ -27,10 +39,25 @@ Component({
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
previewImg: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onTap() {
|
||||
this.triggerEvent('tap');
|
||||
this.triggerEvent('tap', {
|
||||
title: this.data.title,
|
||||
path: this.data.path,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,21 +1,62 @@
|
||||
<view
|
||||
class="worksheet-card"
|
||||
class="worksheet-card worksheet-card--{{variant}}"
|
||||
hover-class="worksheet-card--active"
|
||||
hover-stay-time="100"
|
||||
bindtap="onTap"
|
||||
>
|
||||
<view class="worksheet-card__preview" style="background-color: {{previewBg}}">
|
||||
<image
|
||||
wx:if="{{img}}"
|
||||
class="worksheet-card__img"
|
||||
src="{{img}}"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text wx:else class="worksheet-card__preview-text">{{previewText}}</text>
|
||||
</view>
|
||||
<view class="worksheet-card__title">{{title}}</view>
|
||||
<view class="worksheet-card__tags">
|
||||
<view wx:if="{{ageRange}}" class="worksheet-card__tag worksheet-card__tag--age">{{ageRange}}</view>
|
||||
<view wx:if="{{difficulty}}" class="worksheet-card__tag worksheet-card__tag--diff">{{difficulty}}</view>
|
||||
</view>
|
||||
bindtap="onTap">
|
||||
<block wx:if="{{variant === 'track'}}">
|
||||
<view class="worksheet-card__top">
|
||||
<image
|
||||
wx:if="{{previewImg || img}}"
|
||||
class="worksheet-card__cover"
|
||||
src="{{previewImg || img}}"
|
||||
mode="widthFix" />
|
||||
<text wx:else class="worksheet-card__icon">{{icon}}</text>
|
||||
|
||||
<view
|
||||
wx:if="{{ageBand || ageRange || difficulty}}"
|
||||
class="worksheet-card__tags-track">
|
||||
<text wx:if="{{ageBand || ageRange}}" class="tag tag--age"
|
||||
>{{ageBand || ageRange}}</text
|
||||
>
|
||||
<text wx:if="{{difficulty}}" class="tag tag--diff"
|
||||
>{{difficulty}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="worksheet-card__body">
|
||||
<text class="worksheet-card__title-track">{{title}}</text>
|
||||
<text wx:if="{{subtitle}}" class="worksheet-card__sub"
|
||||
>{{subtitle}}</text
|
||||
>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view
|
||||
class="worksheet-card__preview"
|
||||
style="background-color: {{previewBg}}">
|
||||
<image
|
||||
wx:if="{{img}}"
|
||||
class="worksheet-card__img"
|
||||
src="{{img}}"
|
||||
mode="aspectFill" />
|
||||
<text wx:else class="worksheet-card__preview-text"
|
||||
>{{previewText}}</text
|
||||
>
|
||||
</view>
|
||||
<view class="worksheet-card__title">{{title}}</view>
|
||||
<view class="worksheet-card__tags">
|
||||
<view
|
||||
wx:if="{{ageRange}}"
|
||||
class="worksheet-card__tag worksheet-card__tag--age"
|
||||
>{{ageRange}}</view
|
||||
>
|
||||
<view
|
||||
wx:if="{{difficulty}}"
|
||||
class="worksheet-card__tag worksheet-card__tag--diff"
|
||||
>{{difficulty}}</view
|
||||
>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user