update creater style

miniprogram/pages/main/journal-creater/index.json

@@ -1,6 +1,7 @@
 {
 	"component": true,
 	"usingComponents": {
+		"t-icon": "tdesign-miniprogram/icon/icon",
 		"t-button": "tdesign-miniprogram/button/button",
 		"t-navbar": "tdesign-miniprogram/navbar/navbar"
     }

miniprogram/pages/main/journal-creater/index.less

@@ -1,6 +1,5 @@
 /* pages/main/journal-creater/index.wxss */
 .container {
-	height: 100vh;
 	
 	.content {
 		width: calc(100% - 64px);
@@ -40,7 +39,6 @@
 				.gallery {
 					gap: 10rpx;
 					display: grid;
-					margin-top: 1rem;
 					grid-template-columns: repeat(3, 1fr);
 
 					.item {
@@ -50,6 +48,12 @@
 						background: var(--theme-bg-card);
 						box-shadow: 1px 1px 6px var(--theme-shadow-light);
 						border-radius: 2rpx;
+
+						&.add {
+							color: var(--theme-wx);
+							margin: 0;
+							font-size: 80rpx;
+						}
 						
 						.thumbnail {
 							height: 200rpx;
@@ -63,26 +67,32 @@
 							.play-icon {
 								top: 50%;
 								left: 50%;
-								width: 60rpx;
-								height: 60rpx;
+								color: rgba(255, 255, 255, .8);
 								z-index: 2;
 								position: absolute;
+								font-size: 128rpx;
 								transform: translate(-50%, -50%);
+								text-shadow: 4rpx 4rpx 0 rgba(0, 0, 0, .5);
 								pointer-events: none;
 							}
 						}
 							
+						.delete {
+							top: 10rpx;
+							right: 10rpx;
+							color: rgba(0, 0, 0, .7);
+							z-index: 3;
+							position: absolute;
+							font-size: 45rpx;
+						}
 
 						.delete {
 							top: 10rpx;
 							right: 10rpx;
-							width: 40rpx;
-							height: 40rpx;
+							color: rgba(0, 0, 0, .7);
 							z-index: 3;
-							padding: 5rpx;
 							position: absolute;
-							background: rgba(0, 0, 0, 0.5);
-							border-radius: 50%;
+							font-size: 45rpx;
 						}
 					}
 				}
@@ -91,11 +101,23 @@
 
 		.progress {
 			width: 100%;
+			margin-top: 1rem;
 		}
 
-		.submit {
-			width: 10rem;
+		.ctrl {
+			width: 100%;
+			display: flex;
 			margin-top: 1rem;
+			align-items: center;
+
+			.clear {
+				width: 200rpx;
+			}
+
+			.submit {
+				flex: 1;
+				margin-left: 12rpx;
+			}
 		}
 	}
 }

miniprogram/pages/main/journal-creater/index.wxml

@@ -36,23 +36,6 @@
 			<text wx:else bind:tap="chooseLocation">选择位置..</text>
 		</view>
 		<view class="section media">
-			<view class="ctrl">
-				<t-button
-					class="select"
-					theme="primary"
-					plain="true"
-					disabled="{{isSubmitting}}"
-					bind:tap="addMedia"
-				>选择照片/视频</t-button>
-				<t-button
-					class="clear"
-					theme="danger"
-					variant="outline"
-					disabled="{{isSubmitting}}"
-					bind:tap="clearMedia"
-					disabled="{{mediaList.length === 0}}"
-				>清空已选</t-button>
-			</view>
 			<view class="gallery">
 				<block wx:for="{{mediaList}}" wx:key="index">
 					<view class="item">
@@ -74,17 +57,27 @@
 								bindtap="preview"
 								data-index="{{index}}"
 							></image>
-							<image class="play-icon" src="/assets/icon/play.png"></image>
+							<t-icon class="play-icon" name="play" />
 						</view>
 						<!-- 删除 -->
-						<image
-							src="/assets/icon/delete.png"
+						<t-icon
 							class="delete"
+							name="close-circle-filled"
 							bindtap="deleteMedia"
 							data-index="{{index}}"
-						></image>
+							data-new-media="{{true}}"
+						/>
 					</view>
 				</block>
+				<t-button
+					class="item add"
+					theme="primary"
+					plain="true"
+					disabled="{{isSubmitting}}"
+					bind:tap="addMedia"
+				>
+					<t-icon name="add" />
+				</t-button>
 			</view>
 		</view>
 		<progress
@@ -94,11 +87,21 @@
 			show-info
 			stroke-width="4"
 		/>
-		<t-button
-			class="submit"
-			theme="primary"
-			bind:tap="submit"
-			disabled="{{(!idea && mediaList.length === 0) || isSubmitting}}"
-		>{{submitText}}</t-button>
+		<view class="ctrl">
+			<t-button
+				class="clear"
+				theme="danger"
+				variant="outline"
+				disabled="{{isSubmitting}}"
+				bind:tap="clearMedia"
+				disabled="{{mediaList.length === 0}}"
+			>清空已选</t-button>
+			<t-button
+				class="submit"
+				theme="primary"
+				bind:tap="submit"
+				disabled="{{(!idea && mediaList.length === 0) || isSubmitting}}"
+			>{{submitText}}</t-button>
+		</view>
 	</view>
 </scroll-view>