添加 消息 页面更新

src/other_pages/new_follow/index.scss

@@ -0,0 +1,199 @@
+@use '~@/scss/images.scss' as img;
+
+.new-follow-container {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+
+  // 顶部导航栏
+  .navbar {
+    height: 100px;
+    background: #FFFFFF;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .navbar-content {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 15px;
+      margin-top: 44px;
+      position: relative;
+
+      .back-button {
+        position: absolute;
+        left: 10px;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        .back-icon {
+          width: 8px;
+          height: 16px;
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 8px;
+            height: 8px;
+            border-left: 2.67px solid #000000;
+            border-bottom: 2.67px solid #000000;
+            transform: rotate(45deg);
+          }
+        }
+      }
+
+      .navbar-title {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 1.4;
+        letter-spacing: 0.019em;
+        color: #000000;
+      }
+    }
+  }
+
+  // 关注列表滚动区域
+  .follow-scroll {
+    flex: 1;
+    height: 100%;
+  }
+
+  // 关注列表
+  .follow-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0 0 20px;
+  }
+
+  // 关注项
+  .follow-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 20px;
+
+    .follow-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+      cursor: pointer;
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 999px;
+        flex-shrink: 0;
+      }
+
+      .user-info {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+        height: 40px;
+        justify-content: center;
+
+        .user-nickname {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 1.14;
+          color: rgba(0, 0, 0, 0.8);
+        }
+
+        .user-signature {
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 1.33;
+          color: rgba(60, 60, 67, 0.6);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .action-row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .action-text,
+          .time-text {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 1.33;
+            color: rgba(60, 60, 67, 0.6);
+          }
+        }
+      }
+    }
+
+    // 回关按钮
+    .follow-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 16px;
+      border: 0.5px solid #000000;
+      border-radius: 20px;
+      cursor: pointer;
+      flex-shrink: 0;
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &.mutual {
+        border-color: rgba(120, 120, 128, 0.12);
+        background: transparent;
+      }
+
+      .button-text {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 1.33;
+        color: #000000;
+      }
+
+      &.mutual .button-text {
+        color: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+
+  // 到底了提示
+  .bottom-tip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 0 12px;
+
+    .tip-text {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 1.71;
+      color: rgba(0, 0, 0, 0.35);
+    }
+  }
+}