创作界面上传

pages/make/index.vue

@@ -1,90 +1,87 @@
 <template>
-	<view :style="{ height: windowHeight + 'px',background:'#1a1a1a'}">
-		<image src="/static/image/black-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
-		<z-paging-swiper :style="{ height: windowHeight - 50 + 'px',width:'750rpx;'}">
-			<template #top>
-				<page-navbar>
-					<template #navLeft>
-						<view style="background: #90d369;
-							width: 126rpx;height: 48rpx;
-							border-radius: 10rpx;
-							display: flex;flex-direction: row;
-							align-items: center;
-							justify-content: space-around;
-							">
-							<image src="/static/icon/caidou.png" mode="" style="width:36rpx;height: 38rpx;">
-							</image>
-							<view style="height: 30rpx;border-right: 4rpx #478C2A solid;"></view>
-							<text style="font-size: 29rpx;color: #478C2A;">437</text>
-						</view>
-					</template>
-					<template #navCenter>
-						<view style="width: 520rpx;height: 50rpx;margin-left:126rpx;">
-							<uv-input placeholder="“潮玩大作战” 派对季重磅开启!" border="none"
-								:custom-style="{background:'#8BDB67',paddingLeft:'20rpx'}" shape="circle">
-								<template #prefix>
-									<image src="@/static/icon/fiery.png" style="width: 14px;height: 18px;"></image>
-								</template>
-								<template #suffix>
-									<view style="width: 77rpx;height: 42rpx;
-										background-color: #57A335;border-radius: 20rpx;
-										margin-right: 5rpx;display: flex;align-items: center;justify-content: center;">
-										<image src="@/static/icon/search.png" style="width: 32rpx;height: 32rpx;">
-										</image>
-									</view>
-								</template>
-							</uv-input>
-						</view>
-					</template>
-				</page-navbar>
-				<uv-subsection :list="tabList" :current="tabCurrent" @change="tabChange"
-					custom-style="width:710rpx; margin-left:20rpx;" bgColor="#000000" inactive-color="#ffffff"
-					active-color="#000000"
-					custom-item-style="background: #90d369;border-radius: 11rpx;"></uv-subsection>
-			</template>
-			<swiper class="swiper" :current="tabCurrent" @change="swiperChange">
-				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
-					<swiper-item-list :tabIndex="index" :currentIndex="tabCurrent" @query="queryData">
-						<z-paging-cell>
-							<view class="classModel">
-								<view class="classModel-item" @click="goMake">
-									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
-									<image class="classModel-img" src="/static/zhHans-text-icon/text-7.png" mode="">
-									</image>
-								</view>
-								<view class="classModel-item" @click="goMake2">
-									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
-									<image class="classModel-img" src="/static/zhHans-text-icon/text-5.png" mode="">
-									</image>
-								</view>
-								<view class="classModel-item">
-									<image class="classModel-bgimg" src="/static/make/bg-4.png" mode=""></image>
-									<image class="classModel-img" src="/static/zhHans-text-icon/text-6.png" mode="">
-									</image>
-								</view>
-							</view>
-						</z-paging-cell>
-						<z-paging-cell>
-							<view class="history">
-								<image class="history-img" src="/static/zhHans-text-icon/text-8.png" mode=""></image>
-							</view>
-						</z-paging-cell>
-						<z-paging-cell>
-							<image src="/static/zhHans-text-icon/text-9.png"
-								style="width: 452rpx;height: 34rpx;margin:0 0 31rpx 25rpx;"></image>
-						</z-paging-cell>
-						<z-paging-cell>
-							<w-waterfall :data="list">
-								<template v-slot:content="{item,width}">
-									<card :item="item" :width="width" :custom-style="{background:'#fff'}"
-										textColor="#000000"></card>
-								</template>
-							</w-waterfall>
-						</z-paging-cell>
-					</swiper-item-list>
-				</swiper-item>
-			</swiper>
-		</z-paging-swiper>
+	<view class="container">
+		<!-- 顶部标题和积分区 -->
+		<view class="header">
+			<text class="title">星球造物</text>
+			<view class="currency-area">
+				<view class="coin-box">
+					<image src="/static/icon/coin.png" class="coin-icon"></image>
+					<text class="coin-count">999</text>
+				</view>
+				<view class="gold-box">
+					<image src="/static/icon/gold.png" class="gold-icon"></image>
+					<text class="gold-count">2</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 功能卡片区域 -->
+		<view class="card-grid">
+			<!-- AI创角卡片 -->
+			<view class="card card-large blue">
+				<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>
+				</view>
+			</view>
+
+			<!-- AI灵感写歌卡片 -->
+			<view class="card card-medium pink">
+				<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>
+				</view>
+			</view>
+
+			<!-- 萌萌智绘魔方卡片 -->
+			<view class="card card-medium purple">
+				<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>
+				</view>
+			</view>
+
+			<!-- AI造物卡片 -->
+			<view class="card card-small gray">
+				<view class="card-content">
+					<text class="card-title">AI造物</text>
+					<text class="card-desc">一键生成想要的建筑</text>
+				</view>
+			</view>
+
+			<!-- 潮能充能站卡片 -->
+			<view class="card card-small gray">
+				<view class="card-content">
+					<text class="card-title">潮能充能站</text>
+					<text class="card-desc">一键生成想要的建筑</text>
+				</view>
+			</view>
+
+			<!-- 星轨预测卡片 -->
+			<view class="card card-small gray">
+				<view class="card-content">
+					<text class="card-title">星轨预测</text>
+					<text class="card-desc">AI大数据综合星座为你测算</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 引导教程区域 -->
+		<view class="tutorial">
+			<text class="tutorial-title">引导教程</text>
+			<view class="tutorial-content">
+				<!-- 教程内容将在这里添加 -->
+			</view>
+		</view>
 		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
 	</view>
 </template>
@@ -251,61 +248,140 @@
 </script>
 
 <style lang="scss">
-	.swiper {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		/* #endif */
+	.container {
+		min-height: 100vh;
+		background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
+		padding: 30rpx 30rpx 0 0;
 	}
 
-	.swiper-list-item-n {
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		/* #endif */
+	.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;
+				}
+			}
+		}
 	}
 
-	.classModel {
-		width: 750rpx;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-around;
-		margin-top: 28rpx;
-		margin-bottom: 22rpx;
+	.card-grid {
+		padding-left: 30rpx;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 20rpx;
+		margin-bottom: 40rpx;
 
-		.classModel-item {
+		.card {
+			border-radius: 20rpx;
+			padding: 30rpx;
 			position: relative;
+			overflow: hidden;
+
+			&.blue { background: #3B82F6; }
+			&.pink { background: #EC4899; }
+			&.purple { background: #8B5CF6; }
+			&.gray { background: #4B5563; }
 
-			.classModel-bgimg {
-				width: 216rpx;
-				height: 190rpx;
+			&.card-large {
+				grid-column: span 2;
+				height: 240rpx;
 			}
 
-			.classModel-img {
-				position: absolute;
-				top: 15rpx;
-				left: 15rpx;
-				width: 106rpx;
-				height: 157rpx;
+			&.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;
+				}
+			}
+		}
 	}
 
-	.history {
-		width: 657rpx;
-		height: 163rpx;
-		background-color: #3f4140;
-		border-radius: 16rpx;
-		margin-left: 46.5rpx;
-		margin-bottom: 62rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+	.tutorial {
+		margin-left: 30rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+
+		.tutorial-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+			margin-bottom: 20rpx;
+		}
 
-		.history-img {
-			width: 100rpx;
-			height: 96rpx;
+		.tutorial-content {
+			min-height: 200rpx;
 		}
 	}
 </style>