upload project

subpackages/social/friend-selector/friend-selector.wxss

@@ -0,0 +1,227 @@
+/* 页面根容器 */
+page {
+  background: linear-gradient(180deg, #0a0910 0%, #06151d 50%, #022027 100%);
+  color: #ffffff;
+  height: 100vh;
+}
+
+/* 主容器 */
+.friend-selector-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: linear-gradient(180deg, #0a0910 0%, #06151d 50%, #022027 100%);
+}
+
+/* 搜索框容器 */
+.search-container {
+  padding: 30rpx;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background-color: #202529;
+  border-radius: 50rpx;
+  padding: 20rpx 30rpx;
+  border: 2rpx solid #d9d9d9;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.search-input::placeholder {
+  color: #999999;
+}
+
+.search-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 20rpx;
+}
+
+/* 已选择好友显示容器 */
+.selected-friends-container {
+  padding: 20rpx 30rpx;
+  background-color: transparent;
+}
+
+/* 已选择头像滚动区域 */
+.selected-avatars-scroll {
+  width: 100%;
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.selected-content-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding: 0 10rpx;
+  justify-content: flex-end;
+}
+
+.selected-friends-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 20rpx;
+  white-space: nowrap;
+}
+
+.selected-friends-text {
+  font-size: 28rpx;
+  color: #ffffff;
+}
+
+.selected-friends-count {
+  font-size: 32rpx;
+  background: linear-gradient(90deg, #e90abb, #fbcb09);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: bold;
+  margin: 0 5rpx;
+}
+
+.selected-avatars-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
+.selected-avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 2rpx solid #435cff;
+  margin-right: 15rpx;
+}
+
+.selected-avatar:last-child {
+  margin-right: 0;
+}
+
+/* 内容滚动区域 */
+.content-scroll {
+  flex: 1;
+  overflow-y: scroll;
+  padding-bottom: 180rpx;
+}
+
+/* 好友列表 */
+.friends-list {
+  padding: 20rpx 0;
+}
+
+/* 好友项 */
+.friend-item {
+  display: flex;
+  flex-direction: column;
+  padding: 30rpx;
+  background-color: #20252910;
+  margin-bottom: 1px;
+}
+
+.friend-item.selected {
+  background-color: #20252910;
+}
+
+/* 好友行（checkbox 和 friend-main 在一行） */
+.friend-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+/* 好友复选框 */
+.friend-checkbox {
+  margin-right: 30rpx;
+  margin-left: 20rpx;
+  flex-shrink: 0;
+}
+
+.checkbox {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+}
+
+.checkbox.checked {
+  background-color: transparent;
+}
+
+/* 选中图标样式 */
+.check-image {
+  width: 40rpx;
+  height: 40rpx;
+  display: inline-block;
+}
+
+.uncheck-image {
+  width: 40rpx;
+  height: 40rpx;
+  display: inline-block;
+}
+
+/* 好友主要内容 */
+.friend-main {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.friend-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  margin-right: 20rpx;
+  background-color: #333333;
+}
+
+.friend-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+/* 底部操作按钮 */
+.bottom-action {
+  position: fixed;
+  bottom: 40rpx;
+  left: 30rpx;
+  right: 30rpx;
+  padding: 10rpx;
+  background-color: transparent;
+}
+
+.confirm-btn {
+  width: 200rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-image: linear-gradient(90deg, #ff6460, #ec42c8, #435cff, #00d3ff);
+  color: #ffffff;
+  border-radius: 50rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  border: none;
+  letter-spacing: 4rpx;
+}
+