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,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}
@@ -0,0 +1,104 @@
+.detail-card {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    background: #fff;
+    border-radius: 32rpx;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    transition: transform 0.15s ease;
+}
+
+.detail-card--active {
+    transform: scale(0.98);
+}
+
+.detail-card__preview {
+    width: 240rpx;
+    min-height: 200rpx;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.detail-card__preview-text {
+    font-size: 56rpx;
+    line-height: 1.2;
+    text-align: center;
+    padding: 16rpx;
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.detail-card__body {
+    flex: 1;
+    min-width: 0;
+    padding: 24rpx 24rpx 24rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 12rpx;
+}
+
+.detail-card__title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 1.4;
+}
+
+.detail-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8rpx;
+}
+
+.detail-card__badge {
+    font-size: 20rpx;
+    line-height: 1.4;
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+}
+
+.detail-card__badge--age {
+    background: #e3f2fd;
+    color: #1976d2;
+}
+
+.detail-card__badge--diff {
+    background: #fff8e1;
+    color: #f57f17;
+}
+
+.detail-card__stats {
+    font-size: 22rpx;
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.detail-card__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16rpx;
+    margin-top: 8rpx;
+}
+
+.detail-card__btn {
+    font-size: 24rpx;
+    line-height: 1.4;
+    padding: 12rpx 28rpx;
+    border-radius: 40rpx;
+    text-align: center;
+}
+
+.detail-card__btn--primary {
+    background: #f7ee47;
+    color: rgba(0, 0, 0, 0.88);
+    font-weight: 600;
+}
+
+.detail-card__btn--ghost {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.65);
+}
@@ -0,0 +1,39 @@
+Component({
+    properties: {
+        title: {
+            type: String,
+            value: '',
+        },
+        previewBg: {
+            type: String,
+            value: '#f5f5f5',
+        },
+        previewText: {
+            type: String,
+            value: '',
+        },
+        ageRange: {
+            type: String,
+            value: '',
+        },
+        difficulty: {
+            type: String,
+            value: '',
+        },
+        downloads: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onTap() {
+            this.triggerEvent('tap');
+        },
+        onGenerate() {
+            this.triggerEvent('generate');
+        },
+        onFav() {
+            this.triggerEvent('fav');
+        },
+    },
+});
@@ -0,0 +1,22 @@
+<view
+    class="detail-card"
+    hover-class="detail-card--active"
+    hover-stay-time="100"
+    bindtap="onTap"
+>
+    <view class="detail-card__preview" style="background-color: {{previewBg}}">
+        <text class="detail-card__preview-text">{{previewText}}</text>
+    </view>
+    <view class="detail-card__body">
+        <view class="detail-card__title">{{title}}</view>
+        <view class="detail-card__meta">
+            <view wx:if="{{ageRange}}" class="detail-card__badge detail-card__badge--age">{{ageRange}}</view>
+            <view wx:if="{{difficulty}}" class="detail-card__badge detail-card__badge--diff">{{difficulty}}</view>
+        </view>
+        <view wx:if="{{downloads}}" class="detail-card__stats">{{downloads}}</view>
+        <view class="detail-card__actions">
+            <view class="detail-card__btn detail-card__btn--primary" catchtap="onGenerate">生成</view>
+            <view class="detail-card__btn detail-card__btn--ghost" catchtap="onFav">收藏</view>
+        </view>
+    </view>
+</view>