创作界面修改

pages/make/index.scss

@@ -0,0 +1,209 @@
+.container {
+	min-height: 100vh;
+	background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
+	padding: 30rpx 30rpx 0 0;
+}
+
+.header {
+	padding-left: 30rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 40rpx;
+
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.currency-area {
+		display: flex;
+		gap: 20rpx;
+
+		.coin-box,
+		.gold-box {
+			display: flex;
+			align-items: center;
+			padding: 10rpx 20rpx;
+			background: #fff;
+			border-radius: 30rpx;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 10rpx;
+			}
+		}
+
+		.coin-box {
+			background: #90d369;
+			.coin-count {
+				color: #478C2A;
+			}
+		}
+
+		.gold-box {
+			background: #FFD700;
+			.gold-count {
+				color: #B8860B;
+			}
+		}
+	}
+}
+
+// 添加点击动画的混入
+@mixin click-animation {
+	transition: transform 0.2s ease;
+	
+	&:active {
+		transform: scale(0.95);
+	}
+}
+
+.card-grid {
+	padding-left: 30rpx;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-areas: 
+		"character music"
+		"character cube";
+	gap: 20rpx;
+	margin-bottom: 40rpx;
+
+	.card {
+		@include click-animation; // 添加点击动画
+		border-radius: 20rpx;
+		position: relative;
+		overflow: hidden;
+
+		&.blue {
+			grid-area: character;
+			background: linear-gradient(to right, #59C2FF, #1B84FF);
+			height: 320rpx;
+		}
+
+		&.pink {
+			grid-area: music;
+			background: linear-gradient(to right, #FF88D1, #FF3B9A);
+			height: 150rpx;
+		}
+
+		&.purple {
+			grid-area: cube;
+			background: linear-gradient(to right, #9D8BFF, #6E54EC);
+			height: 150rpx;
+		}
+
+		&.gray {
+			background: #4B5563;
+			height: 160rpx;
+			padding: 30rpx;
+		}
+
+		&.card-large {
+			padding: 40rpx;
+		}
+
+		&.card-medium {
+			padding: 30rpx;
+		}
+
+		.card-content {
+			height: 100%;
+			position: relative;
+
+			.text-area {
+				z-index: 1;
+				position: relative;
+			}
+
+			.card-title {
+				font-size: 40rpx;
+				color: #fff;
+				font-weight: bold;
+				margin-bottom: 16rpx;
+			}
+
+			.card-desc {
+				font-size: 26rpx;
+				color: rgba(255, 255, 255, 0.9);
+			}
+		}
+
+		// AI创角卡片的特殊样式
+		&.blue .card-content {
+			.card-image {
+				position: absolute;
+				right: -20rpx;
+				bottom: -40rpx;
+				width: 280rpx;
+				height: 280rpx;
+				z-index: 0;
+			}
+
+			.star-icon {
+				position: absolute;
+				width: 40rpx;
+				height: 40rpx;
+				&.star-1 {
+					top: 20rpx;
+					right: 100rpx;
+				}
+				&.star-2 {
+					top: 80rpx;
+					right: 180rpx;
+				}
+			}
+		}
+
+		// AI灵感写歌卡片的特殊样式
+		&.pink .card-content {
+			.card-image {
+				position: absolute;
+				right: -10rpx;
+				bottom: -20rpx;
+				width: 160rpx;
+				height: 160rpx;
+				z-index: 0;
+			}
+		}
+
+		// 萌萌智绘魔方卡片的特殊样式
+		&.purple .card-content {
+			.card-image {
+				position: absolute;
+				right: -10rpx;
+				bottom: -20rpx;
+				width: 160rpx;
+				height: 160rpx;
+				z-index: 0;
+			}
+		}
+	}
+}
+
+.tutorial {
+	margin-left: 30rpx;
+	margin-bottom: 20rpx;
+
+	.tutorial-block {
+		@include click-animation; // 添加点击动画
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+
+		.tutorial-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+			margin-bottom: 20rpx;
+		}
+
+		.tutorial-content {
+			min-height: 200rpx;
+		}
+	}
+} 

pages/make/index.vue

@@ -18,40 +18,42 @@
 		<!-- 功能卡片区域 -->
 		<view class="card-grid">
 			<!-- AI创角卡片 -->
-			<view class="card card-large blue">
+			<view class="card card-large blue" @click="handleCardClick('character')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">AI创角</text>
 						<text class="card-desc">生成独一无二的星球成员</text>
 					</view>
-					<image src="/static/icon/ai-character.png" class="card-image" mode="aspectFit"></image>
+					<image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
+					<image src="/static/icon/star.png" class="star-icon star-2" mode="aspectFit"></image>
+					<image src="/static/make/character.png" class="card-image" mode="aspectFit"></image>
 				</view>
 			</view>
 
 			<!-- AI灵感写歌卡片 -->
-			<view class="card card-medium pink">
+			<view class="card card-medium pink" @click="handleCardClick('music')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">AI灵感写歌</text>
 						<text class="card-desc">快速生成专属原创曲目</text>
 					</view>
-					<image src="/static/icon/planet.png" class="card-image" mode="aspectFit"></image>
+					<image src="/static/make/planet.png" class="card-image" mode="aspectFit"></image>
 				</view>
 			</view>
 
 			<!-- 萌萌智绘魔方卡片 -->
-			<view class="card card-medium purple">
+			<view class="card card-medium purple" @click="handleCardClick('cube')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">萌萌智绘魔方</text>
 						<text class="card-desc">AI随机生成萌玩原型</text>
 					</view>
-					<image src="/static/icon/book.png" class="card-image" mode="aspectFit"></image>
+					<image src="/static/make/book.png" class="card-image" mode="aspectFit"></image>
 				</view>
 			</view>
 
 			<!-- AI造物卡片 -->
-			<view class="card card-small gray">
+			<view class="card card-small gray" @click="handleCardClick('build')">
 				<view class="card-content">
 					<text class="card-title">AI造物</text>
 					<text class="card-desc">一键生成想要的建筑</text>
@@ -59,7 +61,7 @@
 			</view>
 
 			<!-- 潮能充能站卡片 -->
-			<view class="card card-small gray">
+			<view class="card card-small gray" @click="handleCardClick('build')">
 				<view class="card-content">
 					<text class="card-title">潮能充能站</text>
 					<text class="card-desc">一键生成想要的建筑</text>
@@ -67,7 +69,7 @@
 			</view>
 
 			<!-- 星轨预测卡片 -->
-			<view class="card card-small gray">
+			<view class="card card-small gray" @click="handleCardClick('build')">
 				<view class="card-content">
 					<text class="card-title">星轨预测</text>
 					<text class="card-desc">AI大数据综合星座为你测算</text>
@@ -77,9 +79,11 @@
 
 		<!-- 引导教程区域 -->
 		<view class="tutorial">
-			<text class="tutorial-title">引导教程</text>
-			<view class="tutorial-content">
-				<!-- 教程内容将在这里添加 -->
+			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5" :key="index">
+				<text class="tutorial-title">引导教程{{ index + 1 }}</text>
+				<view class="tutorial-content">
+					<!-- 教程内容将在这里添加 -->
+				</view>
 			</view>
 		</view>
 		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
@@ -242,146 +246,17 @@
 						});
 					}, 200)
 				})
+			},
+			handleCardClick(type) {
+				console.log('Card clicked:', type);
+			},
+			handleTutorialClick(index) {
+				console.log('Tutorial clicked:', index + 1);
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.container {
-		min-height: 100vh;
-		background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
-		padding: 30rpx 30rpx 0 0;
-	}
-
-	.header {
-		padding-left: 30rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 40rpx;
-
-		.title {
-			font-size: 36rpx;
-			font-weight: bold;
-			color: #333;
-		}
-
-		.currency-area {
-			display: flex;
-			gap: 20rpx;
-
-			.coin-box, .gold-box {
-				display: flex;
-				align-items: center;
-				padding: 10rpx 20rpx;
-				background: #fff;
-				border-radius: 30rpx;
-				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
-
-				image {
-					width: 40rpx;
-					height: 40rpx;
-					margin-right: 10rpx;
-				}
-			}
-
-			.coin-box {
-				background: #90d369;
-				.coin-count {
-					color: #478C2A;
-				}
-			}
-
-			.gold-box {
-				background: #FFD700;
-				.gold-count {
-					color: #B8860B;
-				}
-			}
-		}
-	}
-
-	.card-grid {
-		padding-left: 30rpx;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 20rpx;
-		margin-bottom: 40rpx;
-
-		.card {
-			border-radius: 20rpx;
-			padding: 30rpx;
-			position: relative;
-			overflow: hidden;
-
-			&.blue { background: #3B82F6; }
-			&.pink { background: #EC4899; }
-			&.purple { background: #8B5CF6; }
-			&.gray { background: #4B5563; }
-
-			&.card-large {
-				grid-column: span 2;
-				height: 240rpx;
-			}
-
-			&.card-medium {
-				height: 200rpx;
-			}
-
-			&.card-small {
-				height: 160rpx;
-			}
-
-			.card-content {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-
-				.text-area {
-					z-index: 1;
-				}
-
-				.card-title {
-					font-size: 32rpx;
-					color: #fff;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-
-				.card-desc {
-					font-size: 24rpx;
-					color: rgba(255,255,255,0.8);
-				}
-
-				.card-image {
-					position: absolute;
-					right: 20rpx;
-					bottom: 20rpx;
-					width: 120rpx;
-					height: 120rpx;
-					z-index: 0;
-				}
-			}
-		}
-	}
-
-	.tutorial {
-		margin-left: 30rpx;
-		background: #fff;
-		border-radius: 20rpx;
-		padding: 30rpx;
-
-		.tutorial-title {
-			font-size: 32rpx;
-			font-weight: bold;
-			color: #333;
-			margin-bottom: 20rpx;
-		}
-
-		.tutorial-content {
-			min-height: 200rpx;
-		}
-	}
+	@import './index.scss';
 </style>