From afe4f422c83738d358ea7b55385e37ad0147ec53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=85=E5=85=89=E5=AD=9F?= <fgmfjf@163.com>
Date: Thu, 29 Jan 2026 16:58:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=B2=BE=E9=80=89=E9=A1=B5=E9=9D=A2=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=B5=B7=E5=A4=96=E5=85=88=E6=9C=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                |   3 +
 src/pages/foreign/index.vue   |  38 ++-
 src/pages/recommend/index.vue | 560 ++++++++++++++++++++++++++++++++++
 3 files changed, 587 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/recommend/index.vue

diff --git a/src/pages.json b/src/pages.json
index ae7e47d..36e5360 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -78,6 +78,9 @@
     },
     {
       "path": "pages/foreign/index"
+    },
+    {
+      "path": "pages/quality/index"
     }
   ],
   "globalStyle": {
diff --git a/src/pages/foreign/index.vue b/src/pages/foreign/index.vue
index f1db640..918d5c3 100644
--- a/src/pages/foreign/index.vue
+++ b/src/pages/foreign/index.vue
@@ -26,8 +26,8 @@
               <view class="news-top">
                 <view class="time">09:30:00</view>
                 <view class="source">
-                  <text class="l-1">来自</text>
-                  <text class="t-1">中国证券报</text>
+                  <view class="t-1">来自</view>
+                  <view class="t-2">中国证券报</view>
                 </view>
               </view>
               <view class="news-title">
@@ -70,8 +70,8 @@
               <view class="news-top">
                 <view class="time">09:30:00</view>
                 <view class="source">
-                  <text class="l-1">来自</text>
-                  <text class="t-1">中国证券报</text>
+                  <view class="t-1">来自</view>
+                  <view class="t-2">中国证券报</view>
                 </view>
               </view>
               <view class="news-title">
@@ -106,8 +106,8 @@
               <view class="news-top">
                 <view class="time">09:30:00</view>
                 <view class="source">
-                  <text class="l-1">来自</text>
-                  <text class="t-1">中国证券报</text>
+                  <view class="t-1">来自</view>
+                  <view class="t-2">中国证券报</view>
                 </view>
               </view>
               <view class="news-title">
@@ -222,7 +222,7 @@ import { ref } from "vue";
 
 .page-timeline {
   width: 100%;
-  padding: 60rpx 28rpx 0;
+  padding: 60rpx 30rpx 0;
   background: #f3f5f8;
   border-radius: 24rpx 24rpx 0px 0px;
   overflow: hidden;
@@ -276,7 +276,7 @@ import { ref } from "vue";
     }
 
     .news {
-      padding: 25rpx 30rpx 10rpx;
+      padding: 25rpx 30rpx;
       box-sizing: border-box;
 
       .news-top {
@@ -294,16 +294,26 @@ import { ref } from "vue";
         }
 
         .source {
-          font-family: "PingFangSC, PingFang SC";
-          font-weight: 400;
-          font-size: 24rpx;
-          color: #222222;
-          line-height: 33rpx;
+          display: flex;
+          align-items: center;
 
-          .l-1 {
+          .t-1 {
+            font-family: "PingFangSC, PingFang SC";
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #222222;
+            line-height: 33rpx;
             margin-right: 4rpx;
             color: #666666;
           }
+
+          .t-2 {
+            font-family: "PingFangSC, PingFang SC";
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #222222;
+            line-height: 33rpx;
+          }
         }
       }
 
diff --git a/src/pages/recommend/index.vue b/src/pages/recommend/index.vue
new file mode 100644
index 0000000..962ef0a
--- /dev/null
+++ b/src/pages/recommend/index.vue
@@ -0,0 +1,560 @@
+<template>
+  <view class="page-container">
+    <!-- 导航栏 start -->
+    <view class="custom-bav-bar">
+      <view class="left">
+        <u-icon name="arrow-left" color="#fff" size="36rpx" @click="back" />
+      </view>
+      <view class="center"> 编辑精选 </view>
+    </view>
+    <!-- 导航栏 end -->
+
+    <!-- 标题 start -->
+    <view class="page-title">
+      <view class="hide">穿透信息迷雾 重构投资逻辑</view>
+      <view class="desc">资深编辑人工审核·深度逻辑串联</view>
+    </view>
+    <!-- 标题 end -->
+
+    <view class="page-main">
+      <!-- 搜索 start -->
+      <view class="page-search">
+        <u-input
+          v-model="input"
+          type="text"
+          placeholder="搜索资讯"
+          prefixIcon="search"
+          fontSize="28rpx"
+          prefixIconStyle="font-size: 40rpx;color: #BDC1C7;"
+          :customStyle="{
+            borderRadius: '36rpx',
+            background: '#F3F5F8',
+          }"
+        />
+      </view>
+
+      <!-- 时间轴 start -->
+      <view class="page-timeline">
+        <view class="timeline">
+          <view class="line"></view>
+          <view class="content">
+            <view class="date">2025/11/26</view>
+            <view class="news-list">
+              <view class="news">
+                <view class="news-top">
+                  <view class="time">09:30:00</view>
+                  <view class="source">
+                    <view class="star" :style="{width: `${ 4* 20}rpx`}"></view>
+                    <view class="t-1">来自</view>
+                    <view class="t-2">中国证券报</view>
+                  </view>
+                </view>
+                <view class="news-title">
+                  <view class="name">
+                    <text class="text"
+                      >行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报</text
+                    >
+                  </view>
+                </view>
+                <view class="news-content">
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                </view>
+                <view class="tags">
+                  <text class="tag">#苹果产业链</text>
+                  <text class="tag">#苹果产业链</text>
+                </view>
+                <view class="events-collapse">
+                  <view class="events-collapse-top active">
+                    <view class="t-1">事件梳理</view>
+                    <view class="t-2">收起</view>
+                  </view>
+                  <view v-show="a" class="events-list">
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="timeline">
+          <view class="line"></view>
+          <view class="content">
+            <view class="date">2025/11/26</view>
+            <view class="news-list">
+              <view class="news">
+                <view class="news-top">
+                  <view class="time">09:30:00</view>
+                  <view class="source">
+                    <view class="star" :style="{width: `${ 4* 20}rpx`}"></view>
+                    <view class="t-1">来自</view>
+                    <view class="t-2">中国证券报</view>
+                  </view>
+                </view>
+                <view class="news-title">
+                  <view class="name">
+                    <text class="text"
+                      >行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报</text
+                    >
+                  </view>
+                </view>
+                <view class="news-content">
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                  英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+                </view>
+                <view class="tags">
+                  <text class="tag">#苹果产业链</text>
+                  <text class="tag">#苹果产业链</text>
+                </view>
+                <view class="events-collapse">
+                  <view class="events-collapse-top">
+                    <view class="t-1">事件梳理</view>
+                    <view class="t-2">展开</view>
+                  </view>
+                  <view v-show="!a" class="events-list">
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                    <view class="events-item">
+                      <view class="events-item-line"></view>
+                      <view class="events-item-content">
+                        <view class="events-content-date">11/24</view>
+                        <view class="events-content-text">
+                          特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳特斯拉Optimus行走视频流出，步态稳
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 时间轴 end -->
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const input = ref("");
+const a = ref(true);
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  width: 100%;
+  background-image: url("@/assets/images/page/page_2@2x.png");
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.custom-bav-bar {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .back_icon {
+    width: 36rpx;
+    height: 36rpx;
+  }
+
+  .logo_icon {
+    width: 168rpx;
+    height: 36rpx;
+    margin-right: 6rpx;
+  }
+
+  .left {
+    position: absolute;
+    top: 24rpx;
+    left: 32rpx;
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-family: "PingFangSC, PingFang SC";
+    font-weight: 500;
+    font-size: 34rpx;
+    color: #ffffff;
+    line-height: 36rpx;
+    text-align: center;
+  }
+}
+
+.page-title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 202rpx;
+  margin-bottom: 54rpx;
+
+  .desc {
+    padding-left: 40rpx;
+    background: url("@/assets/images/page/icon_select@2x.png") no-repeat 0 center;
+    background-size: 28rpx 28rpx;
+    font-family: "PingFangSC, PingFang SC";
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #ffffff;
+    line-height: 34rpx;
+  }
+
+  .hide {
+    display: none;
+    opacity: 0;
+  }
+}
+
+.page-main {
+  position: relative;
+  width: 100%;
+  padding: 30rpx 30rpx 0;
+  background: #f3f5f8;
+  border-radius: 24rpx 24rpx 0px 0px;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 140rpx;
+    background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
+    z-index: 1;
+  }
+
+  .page-search {
+    position: relative;
+    margin-bottom: 39rpx;
+    z-index: 2;
+  }
+}
+
+.page-timeline {
+  position: relative;
+  z-index: 3;
+
+  .timeline {
+    z-index: 2;
+    display: flex;
+    .line {
+      position: relative;
+      top: 12rpx;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 2rpx;
+        height: 100%;
+        background: #d9d7d7;
+        transform: translateX(-1rpx);
+        z-index: 1;
+      }
+      &::before {
+        position: relative;
+        content: "";
+        display: block;
+        width: 20rpx;
+        height: 20rpx;
+        background: url("@/assets/images/page/icon_cicle@2x.png") no-repeat;
+        background-size: 20rpx 20rpx;
+        z-index: 2;
+      }
+    }
+
+    .content {
+      padding: 0 0 30rpx 15rpx;
+    }
+
+    .date {
+      font-family: "PingFangSC, PingFang SC";
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #222222;
+      line-height: 40rpx;
+    }
+
+    .news-list {
+      margin-top: 30rpx;
+      background: #ffffff;
+      border-radius: 24rpx;
+    }
+
+    .news {
+      padding: 25rpx 30rpx;
+      box-sizing: border-box;
+
+      .news-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20rpx;
+
+        .time {
+          font-family: "PingFangSC, PingFang SC";
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #666666;
+          line-height: 44rpx;
+        }
+
+        .source {
+          display: flex;
+          align-items: center;
+
+          .t-1 {
+            font-family: "PingFangSC, PingFang SC";
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #222222;
+            line-height: 33rpx;
+            margin-right: 4rpx;
+            color: #666666;
+          }
+
+          .t-2 {
+            font-family: "PingFangSC, PingFang SC";
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #222222;
+            line-height: 33rpx;
+          }
+
+          .star {
+            height: 20rpx;
+            margin-right: 6rpx;
+            background: url("@/assets/images/page/star_icon@2x.png");
+            background-size: 20rpx 20rpx;
+          }
+        }
+      }
+
+      .news-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12rpx;
+        .icon-hot {
+          //   flex: 1;
+          width: 63rpx;
+          height: 32rpx;
+          margin-right: 10rpx;
+          background: url("@/assets/images/page/only_icon@2x.png") no-repeat;
+          background-size: 63rpx 32rpx;
+        }
+
+        .name {
+          position: relative;
+          height: 32rpx;
+          .text {
+            position: relative;
+            max-width: 580rpx;
+            display: block;
+            font-family: "PingFangSC, PingFang SC";
+            font-weight: 500;
+            font-size: 28rpx;
+            line-height: 32rpx;
+            color: #222222;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+            z-index: 1;
+          }
+        }
+      }
+
+      .news-content {
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #666666;
+        line-height: 44rpx;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+      }
+    }
+
+    .tags {
+      margin-bottom: 20rpx;
+      .tag {
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #5978b2;
+        line-height: 44rpx;
+        margin-right: 12rpx;
+      }
+    }
+  }
+
+  .events-collapse {
+    position: relative;
+    padding: 25rpx;
+    background: #f5f5f5;
+    border-radius: 24rpx;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: -12rpx;
+      left: 50rpx;
+      border-left: 10rpx solid transparent;
+      border-right: 10rpx solid transparent;
+      border-bottom: 14rpx solid #f5f5f5;
+      transform: translateX(-50%);
+    }
+    .events-collapse-top {
+      display: flex;
+      justify-content: space-between;
+
+      .t-1 {
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #666666;
+      }
+      .t-2 {
+        padding-right: 26rpx;
+        background-image: url("@/assets/images/page/down_icon@2x.png");
+        background-repeat: no-repeat;
+        background-position: right center;
+        background-size: 19rpx 12rpx;
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #5978b2;
+      }
+
+      &.active {
+        .t-2 {
+          background-image: url("@/assets/images/page/up_icon@2x.png");
+        }
+      }
+    }
+
+    .events-list {
+      margin-top: 30rpx;
+    }
+
+    .events-item {
+      display: flex;
+      .events-item-line {
+        position: relative;
+        top: 10rpx;
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 50%;
+          width: 0rpx;
+          height: 100%;
+          border-left: 2rpx dashed #d8d8d8;
+          transform: translateX(-1rpx);
+          z-index: 1;
+        }
+        &::before {
+          position: relative;
+          content: "";
+          display: block;
+          width: 12rpx;
+          height: 12rpx;
+          background: #f5f5f5;
+          border: 2rpx solid #333333;
+          border-radius: 50%;
+          z-index: 2;
+        }
+      }
+
+      &:last-child {
+        .events-item-line::after {
+          display: none;
+        }
+      }
+    }
+
+    .events-item-content {
+      margin-left: 16rpx;
+      margin-bottom: 25rpx;
+
+      .events-content-date {
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 500;
+        font-size: 24rpx;
+        color: #333333;
+        line-height: 33rpx;
+        margin-bottom: 2rpx;
+      }
+
+      .events-content-text {
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #666666;
+        line-height: 33rpx;
+      }
+    }
+  }
+}
+</style>