项目初始化

miniprogram/pages/chat/chat.wxss

@@ -0,0 +1,149 @@
+/* 消息列表容器 */
+.message-container {
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+/* 搜索栏样式 */
+.search-bar {
+  padding: 16rpx 24rpx;
+  background-color: #f5f5f7;
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+  background-color: #eaeaea;
+  border-radius: 30rpx;
+  padding: 14rpx 24rpx;
+}
+
+.search-input input {
+  margin-left: 12rpx;
+  font-size: 28rpx;
+  flex: 1;
+  color: #333;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.placeholder-style {
+  color: #999;
+}
+
+/* 消息列表滚动区域 */
+.message-list {
+  height: calc(100vh - 96rpx); /* 减去搜索栏高度 */
+  width: 100%;
+}
+
+/* 消息项样式 - 已调整高度 */
+.message-item {
+  display: flex;
+  padding: 16rpx 24rpx; /* 减少内边距 */
+  background-color: #fff;
+  border-bottom: 1rpx solid #f1f1f1;
+  align-items: center;
+  transition: background-color 0.2s;
+  height: 120rpx; /* 固定消息项高度 */
+}
+
+.message-item:active {
+  background-color: #f5f5f5;
+}
+
+/* 头像容器 */
+.avatar-container {
+  position: relative;
+  margin-right: 20rpx;
+}
+
+/* 头像样式 - 缩小尺寸 */
+.avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 16rpx;
+}
+
+/* 未读提示 */
+.unread-dot {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #ff4d4f;
+  border-radius: 50%;
+  border: 4rpx solid #fff;
+}
+
+/* 未读数量 */
+.unread-count {
+  position: absolute;
+  right: 0;
+  top: 0;
+  min-width: 28rpx;
+  height: 28rpx;
+  line-height: 28rpx;
+  background-color: #ff4d4f;
+  border-radius: 14rpx;
+  border: 4rpx solid #fff;
+  color: #fff;
+  font-size: 20rpx;
+  text-align: center;
+  padding: 0 8rpx;
+}
+
+/* 消息内容区域 */
+.message-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* 内容顶部（用户名和时间） */
+.content-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6rpx; /* 减少间距 */
+}
+
+.username {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: 500;
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 内容底部（最后一条消息） */
+.content-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.last-message {
+  font-size: 26rpx; /* 缩小字体 */
+  color: #666;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  flex: 1;
+}
+
+/* 群聊消息中的发送者 */
+.sender {
+  color: #677fff;
+  margin-right: 4rpx;
+}