完成首页初始化搭建

pages/chat/chat.vue

@@ -1,6 +1,40 @@
 <template>
 	<view class="container">
-		<u-search placeholder="请输入搜索内容" v-model="searchForm.keyword"></u-search>
+		<view class="search-box">
+			<u-search
+				v-model="searchForm.keyword"
+				:clearabled="true"
+				bg-color="#E5E5E5"
+				:input-style="searchInputStyle"
+				placeholder="请输入搜索内容"
+			></u-search>
+		</view>
+		<view class="list-box">
+			<view class="list-item-box">
+				<view class="main-box">
+					<view class="icon-box">
+						图
+					</view>
+					<view class="content-box">
+						<view class="title">
+							XXXX通知
+						</view>
+						<view class="text">
+							尊敬的用户，您在2025年01月10日09:00收到了一条通知
+						</view>
+					</view>
+					<view class="other-box">
+						<view class="date">
+							8/16
+						</view>
+						<view class="tag">
+							1
+						</view>
+					</view>
+				</view>
+				<view class="line-box"></view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,6 +42,9 @@
 	import { ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
 	
+	const searchInputStyle = {
+		backgroundColor: '#E5E5E5'
+	}
 	const searchForm = ref({
 		keyword: ''
 	})
@@ -24,7 +61,91 @@
 	.container {
 		height: 100vh;
 		width: 100vw;
-		background-color: #f7f7f7;
-		padding: 0 20px;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+		
+		.search-box {
+			margin-bottom: 20rpx;
+			::v-deep(.u-search) {
+				background-color: #e5e5e5;
+				border-radius: 50rpx;
+				
+				.u-action {
+					width: 18%;
+					background-color: $uni-color-primary;
+					border-radius: 50rpx;
+					color: $uni-text-color-inverse;
+					margin-right: 8rpx;
+					font-size: 28rpx;
+					line-height: 50rpx;
+					letter-spacing: 3rpx;
+					text-align: center;
+				}
+			}
+		}
+	
+		.list-box {
+			padding: 0 20rpx;
+			.list-item-box {
+				.main-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 20rpx 0;
+					.icon-box {
+						width: 15%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+					.content-box {
+						width: 67%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						gap: 10rpx;
+						.title {
+							height: calc(70% - 5rpx);
+							font-size: $uni-title-font-size-2;
+							font-weight: bold;
+						}
+						.text {
+							height: calc(30% - 5rpx);
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+							@include text-overflow();
+						}
+					}
+					.other-box {
+						width: 18%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						align-items: center;
+						gap: 10rpx;
+						.date {
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+						}
+						.tag {
+							font-size: $uni-font-size-3;
+							width: 42rpx;
+							background-color: $uni-color-error;
+							color: $uni-text-color-inverse;
+							border-radius: 20rpx;
+							text-align: center;
+						}
+					}
+				}
+				.line-box {
+					height: 1rpx;
+					width: 80%;
+					background-color: #E5E5E5;
+					margin: 0 auto;
+				}
+			}
+		}
 	}
+		
+	
 </style>

pages/index/index.vue

@@ -38,7 +38,7 @@
 	.container {
 		height: 100vh;
 		width: 100vw;
-		background-color: #f7f7f7;
-		padding: 0 20px;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
 	}
 </style>

pages/personalCenter/personalCenter.vue

@@ -16,7 +16,7 @@
 	.container {
 		height: 100vh;
 		width: 100vw;
-		background-color: #f7f7f7;
-		padding: 0 20px;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
 	}
 </style>

uni.scss

@@ -18,20 +18,20 @@
 /* 颜色变量 */
 
 /* 行为相关颜色 */
-$uni-color-primary: #007aff;
+$uni-color-primary: #006af4;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
+$uni-color-error: #FA5151;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color: #000;//基本色
+$uni-text-color-inverse: #fff;//反色
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color:#ffffff;
+$uni-bg-color:#f7f7f7;
 $uni-bg-color-grey:#f8f8f8;
 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
@@ -39,41 +39,68 @@ $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;
 
-/* 尺寸变量 */
+/* 标题尺寸 */
+$uni-title-font-size-2: 26rpx;
+$uni-title-font-size-3: 24rpx;
 
 /* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16px;
+$uni-font-size-1: 24rpx;
+$uni-font-size-2: 20rpx;
+$uni-font-size-3: 18rpx;
 
-/* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
 
-/* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
-$uni-border-radius-circle: 50%;
+@mixin backgroundImg($url) {
+  background-image: url($url);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 
-/* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
+@mixin scrollbar() {
+  // 滚动条整体部分
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+  // 滚动条的轨道（里面装有Thumb）
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  // 滚动条的轨道（里面装有Thumb）
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+  }
+  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
+  &::-webkit-scrollbar-thumb {
+    background: rgba(144, 147, 153, 0.3);
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  // 边角，即两个滚动条的交汇处
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
+  &::-webkit-resizer {
+    display: none;
+  }
+}
 
-/* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
+// 单行文字溢出
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+// 多行文字溢出
+@mixin text-line-overflow($line) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $line;
+  overflow: hidden;
+}
 
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;