ai-c/pages/square/square.wxss

/* 广场页面样式 - 微信朋友圈风格 */
.page-container {
  min-height: 100vh;
  background: #fff;
}

/* 自定义导航栏 */
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ededed;
  border-bottom: 1rpx solid #d9d9d9;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}

.nav-left, .nav-right {
  width: 80rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.create-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-icon {
  width: 48rpx;
  height: 48rpx;
}

/* 内容滚动区域 */
.content-scroll {
  height: 100vh;
  background: #fff;
}

/* 动态列表 */
.post-list {
  padding-bottom: 220rpx;
}

.post-item {
  display: flex;
  padding: 32rpx 32rpx 0;
  border-bottom: 1rpx solid #ededed;
}

/* 头像 */
.post-avatar {
  width: 84rpx;
  height: 84rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
  margin-right: 20rpx;
}

/* 右侧内容区 */
.post-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 24rpx;
}

/* 用户名 - 微信蓝色链接样式 */
.post-username {
  font-size: 32rpx;
  font-weight: 600;
  color: #576b95;
  line-height: 1.4;
  display: block;
  margin-bottom: 8rpx;
}

/* 内容文字 */
.post-content {
  margin-bottom: 16rpx;
}

.post-text {
  font-size: 30rpx;
  color: #111;
  line-height: 1.5;
  word-break: break-all;
}

/* 图片区域 - 九宫格布局 */
.post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
  max-width: 480rpx;
}

.post-image {
  border-radius: 6rpx;
  background: #f5f5f5;
}

/* 单张图片 */
.post-images.images-1 .post-image {
  width: 360rpx;
  height: 360rpx;
}

/* 两张图片 */
.post-images.images-2 .post-image {
  width: 236rpx;
  height: 236rpx;
}

/* 三张图片 */
.post-images.images-3 .post-image {
  width: 156rpx;
  height: 156rpx;
}

/* 四张图片 - 2x2 */
.post-images.images-4 .post-image {
  width: 236rpx;
  height: 236rpx;
}

/* 五张及以上 - 3列 */
.post-images.images-5 .post-image,
.post-images.images-6 .post-image,
.post-images.images-7 .post-image,
.post-images.images-8 .post-image,
.post-images.images-9 .post-image {
  width: 156rpx;
  height: 156rpx;
}

/* 底部信息栏 */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.post-time {
  font-size: 24rpx;
  color: #b2b2b2;
}

/* 操作按钮 - 两个小点 */
.post-actions-btn {
  padding: 12rpx 16rpx;
  background: #f7f7f7;
  border-radius: 6rpx;
}

.action-dots {
  display: flex;
  gap: 6rpx;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  background: #576b95;
  border-radius: 50%;
}

/* 操作面板 */
.action-panel {
  display: none;
  background: #4c4c4c;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
  overflow: hidden;
  flex-direction: row;
}

.action-panel.show {
  display: flex;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 24rpx;
}

.action-btn-icon {
  width: 32rpx;
  height: 32rpx;
  filter: brightness(0) invert(1);
}

.action-btn-text {
  font-size: 26rpx;
  color: #fff;
}

.action-divider {
  width: 1rpx;
  background: #666;
  margin: 8rpx 0;
}

/* 点赞和评论区域 */
.post-interact {
  background: #f7f7f7;
  border-radius: 6rpx;
  overflow: hidden;
}

/* 点赞区域 */
.likes-section {
  display: flex;
  align-items: flex-start;
  padding: 12rpx 16rpx;
  gap: 8rpx;
}

.likes-icon {
  width: 28rpx;
  height: 28rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.likes-text {
  font-size: 28rpx;
  color: #576b95;
  line-height: 1.4;
  word-break: break-all;
}

/* 评论区域 */
.comments-section {
  padding: 0 16rpx 12rpx;
  border-top: 1rpx solid #e5e5e5;
}

.likes-section + .comments-section {
  border-top: 1rpx solid #e5e5e5;
}

.post-interact > .comments-section:first-child {
  border-top: none;
  padding-top: 12rpx;
}

.comment-item {
  padding: 6rpx 0;
  font-size: 28rpx;
  line-height: 1.5;
}

.comment-user {
  color: #576b95;
}

.comment-reply {
  color: #111;
  margin: 0 4rpx;
}

.comment-colon {
  color: #111;
}

.comment-text {
  color: #111;
  word-break: break-all;
}

/* 底部占位 */
.bottom-placeholder {
  height: 48rpx;
}

/* 评论弹窗 */
.comment-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64rpx;
}

.comment-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.comment-modal-content {
  position: relative;
  width: 100%;
  max-width: 620rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.comment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.comment-modal-cancel {
  font-size: 32rpx;
  color: #666;
  padding: 8rpx 16rpx;
}

.comment-modal-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
}

.comment-modal-send {
  font-size: 32rpx;
  color: #b2b2b2;
  padding: 8rpx 16rpx;
}

.comment-modal-send.active {
  color: #576b95;
  font-weight: 600;
}

.comment-modal-body {
  padding: 24rpx 32rpx;
  min-height: 240rpx;
}

.comment-textarea {
  width: 100%;
  min-height: 200rpx;
  font-size: 32rpx;
  line-height: 1.6;
  color: #111;
}

.comment-textarea::placeholder {
  color: #b2b2b2;
}

.comment-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 32rpx 24rpx;
  border-top: 1rpx solid #f0f0f0;
}

.comment-toolbar {
  display: flex;
  gap: 24rpx;
}

.toolbar-btn {
  padding: 8rpx;
}

.toolbar-icon {
  width: 48rpx;
  height: 48rpx;
  opacity: 0.6;
}

.comment-count {
  font-size: 24rpx;
  color: #b2b2b2;
}

/* 发布动态弹窗 */
.create-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.create-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.create-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 80vh;
  overflow-y: auto;
}

.create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.create-cancel {
  font-size: 32rpx;
  color: #111;
}

.create-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
}

.create-submit {
  font-size: 32rpx;
  color: #b2b2b2;
}

.create-submit.active {
  color: #576b95;
  font-weight: 600;
}

.create-textarea {
  width: 100%;
  min-height: 240rpx;
  padding: 24rpx 32rpx;
  font-size: 32rpx;
  line-height: 1.5;
  box-sizing: border-box;
}

.create-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 0 32rpx 32rpx;
}

.create-image-item {
  position: relative;
  width: calc(33.33% - 12rpx);
  aspect-ratio: 1;
}

.create-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.create-image-delete {
  position: absolute;
  top: -12rpx;
  right: -12rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.create-image-add {
  width: calc(33.33% - 12rpx);
  aspect-ratio: 1;
  background: #f7f7f7;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx dashed #d9d9d9;
}

.create-image-add-empty {
  margin: 0 32rpx 32rpx;
  padding: 48rpx;
  background: #f7f7f7;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  border: 1rpx dashed #d9d9d9;
}

.add-icon {
  width: 56rpx;
  height: 56rpx;
  opacity: 0.4;
}

.add-text {
  font-size: 28rpx;
  color: #b2b2b2;
}


/* 自定义底部导航栏 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 210rpx;
  background: #fff;
  border-radius: 60rpx 60rpx 0 0;
  box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.04);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 24rpx;
  z-index: 999;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  width: 128rpx;
}

.tabbar-icon {
  width: 72rpx;
  height: 72rpx;
}

.tabbar-text {
  font-size: 34rpx;
  font-weight: 700;
  color: #a58aa5;
}

.tabbar-text.active {
  color: #b06ab3;
}

.tabbar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  margin-top: -80rpx;
}

.center-btn {
  width: 144rpx;
  height: 144rpx;
  background: linear-gradient(180deg, #c984cd 0%, #b06ab3 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12rpx #faf8fc, 0 16rpx 40rpx rgba(176,106,179,0.4);
}

.center-icon {
  width: 80rpx;
  height: 80rpx;
}