shish 11 месяцев назад
Родитель
Сommit
6505ac1d40
2 измененных файлов с 42 добавлено и 117 удалено
  1. 16 60
      mallApp/src/pages/home/category.vue
  2. 26 57
      mallApp/src/pages/item/item.vue

+ 16 - 60
mallApp/src/pages/home/category.vue

@@ -24,13 +24,12 @@
 			<view class="buy-flower-container">
 				<button class="buy-flower-btn" @click="buyAlbum()">
 					<view class="btn-content">
-						<view class="flower-icon-css"></view>
-						<text class="btn-text">花束相册</text>
+						<text class="btn-text">📷 花束相册</text>
 					</view>
 				</button>
 				<button class="buy-material-btn" @click="buyProduct()">
 					<view class="btn-content">
-						<text class="btn-text">花材绿植</text>
+						<text class="btn-text">🌸 花材绿植</text>
 					</view>
 				</button>
 			</view>
@@ -582,18 +581,17 @@ page {
 
 .buy-flower-btn {
 	position: relative;
-	background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffa8a8);
+	background: #e91e63;
 	border: none;
 	border-radius: 50upx;
 	padding: 0;
 	height: 80upx;
 	min-width: 200upx;
-	box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
+	box-shadow: 0 8upx 20upx rgba(233, 30, 99, 0.3);
 	overflow: hidden;
-	animation: pulse 2s infinite;
 
 	&:active {
-		box-shadow: 0 4upx 10upx rgba(255, 107, 107, 0.4);
+		box-shadow: 0 4upx 10upx rgba(233, 30, 99, 0.4);
 	}
 
 	.btn-content {
@@ -606,69 +604,32 @@ page {
 		text-align: center;
 	}
 
-	.flower-icon-css {
-		width: 24upx;
-		height: 24upx;
-		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;
-		}
-	}
-
 	.btn-text {
 		color: white;
 		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;
 		align-items: center;
+		justify-content: center;
 	}
 }
 
 .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);
+	width: 208upx;
+	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 {
@@ -686,20 +647,15 @@ page {
 		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;
+		justify-content: center;
 	}
 }
 
-@keyframes pulse {
-	0% {
-		box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
-	}
-	50% {
-		box-shadow: 0 12upx 30upx rgba(255, 107, 107, 0.4);
-	}
-	100% {
-		box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
-	}
-}
+
 
 @keyframes fadeInFrames {
 	0% {

+ 26 - 57
mallApp/src/pages/item/item.vue

@@ -15,16 +15,14 @@
 				<app-search-module v-model="py" placeholder="这里搜索" @input="searchFn" />
 			</view>
 			<view class="buy-flower-container">
-				<button class="buy-flower-btn" @click="buyAlbum()">
+				<button class="buy-album-btn" @click="buyAlbum()">
 					<view class="btn-content">
-						<view class="flower-icon-css"></view>
-						<text class="btn-text">花束相册</text>
+						<text class="btn-text">📷 花束相册</text>
 					</view>
 				</button>
-				<button class="buy-flower-btn" @click="buyHs()">
+				<button class="buy-mall-btn" @click="buyHs()">
 					<view class="btn-content">
-						<view class="flower-icon-css"></view>
-						<text class="btn-text">花束商城</text>
+						<text class="btn-text">💐 花束商城</text>
 					</view>
 				</button>
 			</view>
@@ -569,20 +567,35 @@ export default {
 		gap: 10upx;
 	}
 
-	.buy-flower-btn {
+	.buy-album-btn {
 		position: relative;
-		background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffa8a8);
+		background: #e91e63;
 		border: none;
 		border-radius: 50upx;
 		padding: 0;
 		height: 80upx;
 		min-width: 200upx;
-		box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
+		box-shadow: 0 8upx 20upx rgba(233, 30, 99, 0.3);
 		overflow: hidden;
-		animation: pulse 2s infinite;
 
 		&:active {
-			box-shadow: 0 4upx 10upx rgba(255, 107, 107, 0.4);
+			box-shadow: 0 4upx 10upx rgba(233, 30, 99, 0.4);
+		}
+	}
+
+	.buy-mall-btn {
+		position: relative;
+		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(165, 94, 234, 0.3);
+		overflow: hidden;
+
+		&:active {
+			box-shadow: 0 4upx 10upx rgba(165, 94, 234, 0.4);
 		}
 	}
 
@@ -596,52 +609,18 @@ export default {
 		text-align: center;
 	}
 
-	.flower-icon-css {
-		width: 24upx;
-		height: 24upx;
-		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;
-		}
-	}
 
 	.btn-text {
 		color: white;
 		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;
 		align-items: center;
+		justify-content: center;
 	}
 
 	.sparkle-css {
@@ -673,17 +652,7 @@ export default {
 		}
 	}
 
-	@keyframes pulse {
-		0% {
-			box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
-		}
-		50% {
-			box-shadow: 0 12upx 30upx rgba(255, 107, 107, 0.4);
-		}
-		100% {
-			box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
-		}
-	}
+