Browse Source

修改:1.修改我的收藏页面样式

littleblue55 2 days ago
parent
commit
68e96fb21d
2 changed files with 27 additions and 11 deletions
  1. 1 0
      pages.json
  2. 26 11
      pages/collect/collect.vue

+ 1 - 0
pages.json

@@ -249,6 +249,7 @@
 			"style": {
 				"navigationBarTitleText": "我的收藏",
 				"enablePullDownRefresh": true,
+				"navigationBarBackgroundColor": "#8dccff",
 				"app-plus": {
 					"titleNView": false
 				}

+ 26 - 11
pages/collect/collect.vue

@@ -5,7 +5,7 @@
 				<u-search
 					v-model="searchForm.keyword"
 					:clearabled="true"
-					bg-color="#E5E5E5"
+					bg-color="#FFFFFF"
 					:input-style="searchInputStyle"
 					placeholder="搜索您想要的内容"
 					@search="onSearchConfirm"
@@ -66,7 +66,7 @@
 	import { query } from '@/api/collect.js'
 	
 	const searchInputStyle = {
-		backgroundColor: '#E5E5E5'
+		backgroundColor: '#FFFFFF'
 	}
 	const searchType = [
 		{
@@ -207,21 +207,29 @@
 </script>
 
 <style lang="scss" scoped>
+	$certificate-width: 220rpx;
+	$certificate-height: 300rpx;
 	.container {
 		height: 100vh;
 		width: 100vw;
-		background-color: $uni-text-color-inverse;
+		background: rgb(141, 204, 255);
+		background: -moz-linear-gradient(   90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -o-linear-gradient(     90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -ms-linear-gradient(    90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: linear-gradient(       180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
 		padding: 0 20rpx;
 		
 		.header-box {
-			background-color: $uni-text-color-inverse;
+			// background-color: $uni-text-color-inverse;
+			padding-top: 40rpx;
 			@include topMagnet();
 		}
 		
 		.search-box {
 			margin-bottom: 20rpx;
 			::v-deep(.u-search) {
-				background-color: #e5e5e5;
+				background-color: #FFFFFF;
 				border-radius: 50rpx;
 				
 				.u-action {
@@ -240,9 +248,14 @@
 		
 		.list-box {
 			.list-item-box {
-				padding: 20rpx 10rpx;
-				border-bottom: 5rpx solid #E6E6E6;
+				// padding: 20rpx 10rpx;
+				// border-bottom: 5rpx solid #E6E6E6;
 				display: flex;
+				    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+				    background-color: #fff;
+				    border-radius: 20rpx;
+				    padding: 40rpx 20rpx;
+				    margin: 35rpx 0;
 				&:active {
 					background-color: $uni-bg-color-hover;
 				}
@@ -259,19 +272,20 @@
 				.info-box {
 					width: 82%;
 					.title {
-						font-size: $uni-title-font-size-2;
+						font-size: 28rpx;
 						font-weight: bold;
 						margin-bottom: 5rpx;
 						@include text-overflow()
 					}
 					.text {
 						line-height: 40rpx;
-						font-size: $uni-font-size-2;
+						font-size: 24rpx;
 						font-weight: bold;
 					}
 				}
 				.suffix-box {
-					width: 15%;
+					// width: 15%;
+					flex: 0 0 auto;
 					display: flex;
 					align-items: center;
 					justify-content: center;
@@ -281,7 +295,8 @@
 						padding: 5rpx 18rpx;
 						border-radius: $uni-card-border-radius;
 						background-color: $uni-color-primary;
-						font-size: $uni-font-size-3;
+						font-size: 24rpx;
+						margin: 0 10rpx;
 						letter-spacing: 3rpx;
 					}
 				}