完成首页布局

2026-06-01 19:57:43 +08:00
parent 2b58b672d5
commit f0d97e58d1
32 changed files with 4009 additions and 48 deletions
@@ -0,0 +1,115 @@
+<template>
+  <!-- 快捷入口容器 -->
+  <view class="quick-entry">
+    <!-- 快捷入口项 -->
+    <view
+      v-for="(item, index) in entries"
+      :key="index"
+      class="entry-item"
+    >
+      <!-- 入口图标容器 -->
+      <view :class="['entry-icon', { accent: item.accent }]">
+        <!-- 入口图标图片 -->
+        <image :src="item.icon" mode="aspectFit" class="icon-img" />
+      </view>
+      <!-- 入口标题 -->
+      <text class="entry-title">{{ item.title }}</text>
+      <!-- 入口描述 -->
+      <text class="entry-desc">{{ item.desc }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+// 快捷入口数据列表
+const entries = [
+		{ 
+		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
+		   title: '找课程',
+		   desc: '精品课程',
+		   accent: false ,
+	   },
+	  { 
+		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
+		  title: '训练计划',
+		  desc: '个性定制',
+		  accent: true ,
+	  },
+	  {
+		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
+		  title: '健身数据',
+		  desc: '记录分析',
+		  accent: false ,
+	  },
+	  {
+		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
+		  title: '消息',
+		  desc: '通知消息',
+		  accent: true,
+	  },
+	  {
+		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
+		  title: '签到',
+		  desc: '打卡签到',
+		  accent: false,
+	  }
+]
+</script>
+
+<style lang="scss" scoped>
+/* 快捷入口容器样式 */
+.quick-entry {
+  display: flex;
+  justify-content: space-between;
+  padding: 32rpx 24rpx;
+  background: #ffffff;
+  margin: 24rpx;
+  border-radius: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+/* 快捷入口项样式 */
+.entry-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+/* 入口图标容器样式 */
+.entry-icon {
+  width: 104rpx;
+  height: 104rpx;
+  border-radius: 20rpx;
+  background: #072A4E;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16rpx;
+}
+
+/* 入口图标图片样式 */
+.icon-img {
+  width: 52rpx;
+  height: 52rpx;
+}
+
+/* 入口图标强调色样式（橙色背景） */
+.entry-icon.accent {
+  background: #FC5A15;
+}
+
+/* 入口标题样式 */
+.entry-title {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #1a202c;
+  margin-bottom: 4rpx;
+}
+
+/* 入口描述文字样式 */
+.entry-desc {
+  font-size: 22rpx;
+  color: #94a3b8;
+}
+</style>