shish hai 11 meses
pai
achega
f222c3e40d
Modificáronse 2 ficheiros con 36 adicións e 51 borrados
  1. 35 50
      mallApp/src/pages/home/mall.vue
  2. 1 1
      mallApp/src/pages/home/recent.vue

+ 35 - 50
mallApp/src/pages/home/mall.vue

@@ -24,12 +24,13 @@
 			<view class="buy-flower-container">
 				<button class="buy-flower-btn" @click="buyHs()">
 					<view class="btn-content">
-						<view class="flower-icon-css"></view>
+						<text class="flower-icon">💐</text>
 						<text class="btn-text">花束商城</text>
 					</view>
 				</button>
 				<button class="buy-material-btn" @click="buyProduct()">
 					<view class="btn-content">
+						<text class="material-icon">🌸</text>
 						<text class="btn-text">花材绿植</text>
 					</view>
 				</button>
@@ -564,22 +565,24 @@ page {
 	flex-shrink: 0;
 	display: flex;
 	gap: 10upx;
+	flex-wrap: nowrap;
 }
 
 .buy-flower-btn {
 	position: relative;
-	background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffa8a8);
+	background: linear-gradient(135deg, #a55eea 0%, #8e44ad 100%);
 	border: none;
 	border-radius: 50upx;
 	padding: 0;
 	height: 80upx;
-	min-width: 200upx;
-	box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
+	min-width: 205upx;
+	flex: 0 0 auto;
+	box-shadow: 0 8upx 20upx rgba(165, 94, 234, 0.3);
 	overflow: hidden;
-	animation: pulse 2s infinite;
+	animation: pulse-flower 2s infinite;
 
 	&:active {
-		box-shadow: 0 4upx 10upx rgba(255, 107, 107, 0.4);
+		box-shadow: 0 4upx 10upx rgba(165, 94, 234, 0.4);
 	}
 
 	.btn-content {
@@ -592,40 +595,12 @@ page {
 		text-align: center;
 	}
 
-	.flower-icon-css {
-		width: 24upx;
-		height: 24upx;
+	.flower-icon {
+		font-size: 28upx;
 		margin-right: 8upx;
-		position: relative;
-
-		&::before {
-			content: '';
-			position: absolute;
-			width: 16upx;
-			height: 16upx;
-			background: #fff;
-			border-radius: 50%;
-			top: 4upx;
-			left: 4upx;
-			box-shadow: 
-				0 -8upx 0 -2upx #fff,
-				8upx -6upx 0 -2upx #fff,
-				8upx 6upx 0 -2upx #fff,
-				0 8upx 0 -2upx #fff,
-				-8upx 6upx 0 -2upx #fff,
-				-8upx -6upx 0 -2upx #fff;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			width: 8upx;
-			height: 8upx;
-			background: #ffeb3b;
-			border-radius: 50%;
-			top: 8upx;
-			left: 8upx;
-		}
+		line-height: 1;
+		display: flex;
+		align-items: center;
 	}
 
 	.btn-text {
@@ -633,7 +608,6 @@ page {
 		font-size: 28upx;
 		font-weight: bold;
 		text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
-		margin-right: 8upx;
 		text-align: center;
 		line-height: 1;
 		display: flex;
@@ -643,18 +617,18 @@ page {
 
 .buy-material-btn {
 	position: relative;
-	background: linear-gradient(135deg, #4caf50, #66bb6a, #81c784);
+	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
 	border: none;
 	border-radius: 50upx;
 	padding: 0;
 	height: 80upx;
-	min-width: 160upx;
-	box-shadow: 0 8upx 20upx rgba(76, 175, 80, 0.3);
+	min-width: 206upx;
+	flex: 0 0 auto;
+	box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
 	overflow: hidden;
 
-
 	&:active {
-		box-shadow: 0 4upx 10upx rgba(76, 175, 80, 0.4);
+		box-shadow: 0 4upx 10upx rgba(255, 107, 107, 0.4);
 	}
 
 	.btn-content {
@@ -666,24 +640,35 @@ page {
 		z-index: 1;
 	}
 
+	.material-icon {
+		font-size: 28upx;
+		margin-right: 8upx;
+		line-height: 1;
+		display: flex;
+		align-items: center;
+	}
+
 	.btn-text {
 		color: white;
 		font-size: 28upx;
 		font-weight: bold;
 		text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
-		margin: 0 8upx;
+		text-align: center;
+		line-height: 1;
+		display: flex;
+		align-items: center;
 	}
 }
 
-@keyframes pulse {
+@keyframes pulse-flower {
 	0% {
-		box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
+		box-shadow: 0 8upx 20upx rgba(165, 94, 234, 0.3);
 	}
 	50% {
-		box-shadow: 0 12upx 30upx rgba(255, 107, 107, 0.4);
+		box-shadow: 0 12upx 30upx rgba(165, 94, 234, 0.4);
 	}
 	100% {
-		box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
+		box-shadow: 0 8upx 20upx rgba(165, 94, 234, 0.3);
 	}
 }
 

+ 1 - 1
mallApp/src/pages/home/recent.vue

@@ -877,7 +877,7 @@ page {
       
       text {
         color: #333;
-        font-size: 32upx;
+        font-size: 36upx;
         font-weight: 500;
       }
     }