feat: 完成首页UI展示初版开发

2026-03-31 10:59:25 +08:00
parent 1b45ba7d11
commit b18dbcb0d1
17 changed files with 258 additions and 10 deletions
@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+}
@@ -0,0 +1,65 @@
+.worksheet-card {
+    background: #fff;
+    border-radius: 24rpx;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    transition: transform 0.15s ease;
+}
+
+.worksheet-card--active {
+    transform: scale(0.96);
+}
+
+.worksheet-card__preview {
+    position: relative;
+    height: 160rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.worksheet-card__img {
+    width: 100%;
+    height: 100%;
+}
+
+.worksheet-card__preview-text {
+    font-size: 48rpx;
+    line-height: 1.2;
+    text-align: center;
+    padding: 0 24rpx;
+    color: rgba(0, 0, 0, 0.65);
+}
+
+.worksheet-card__title {
+    padding: 20rpx 24rpx 12rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 1.4;
+}
+
+.worksheet-card__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    padding: 0 24rpx 24rpx;
+}
+
+.worksheet-card__tag {
+    font-size: 20rpx;
+    line-height: 1.4;
+    padding: 6rpx 16rpx;
+    border-radius: 8rpx;
+}
+
+.worksheet-card__tag--age {
+    background: #e3f2fd;
+    color: #1976d2;
+}
+
+.worksheet-card__tag--diff {
+    background: #fff8e1;
+    color: #f57f17;
+}
@@ -0,0 +1,36 @@
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        title: {
+            type: String,
+            value: '',
+        },
+        previewBg: {
+            type: String,
+            value: '#f5f5f5',
+        },
+        previewText: {
+            type: String,
+            value: '',
+        },
+        ageRange: {
+            type: String,
+            value: '',
+        },
+        difficulty: {
+            type: String,
+            value: '',
+        },
+        img: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onTap() {
+            this.triggerEvent('tap');
+        },
+    },
+});
@@ -0,0 +1,21 @@
+<view
+    class="worksheet-card"
+    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>
+</view>