From b7de2b10dd0c1db19e67edec8eabb0e3a89d9421 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 14 Aug 2025 11:58:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=A4=E5=88=B9=E6=96=87=E7=AB=A0=E8=AF=A6?=
 =?UTF-8?q?=E7=BB=86=E9=A1=B5=E9=9D=A20.8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/ancient/ancientTourById.vue | 306 +++++++++++++-----------------
 1 file changed, 136 insertions(+), 170 deletions(-)

diff --git a/pages/ancient/ancientTourById.vue b/pages/ancient/ancientTourById.vue
index ea70627..f8f33e8 100644
--- a/pages/ancient/ancientTourById.vue
+++ b/pages/ancient/ancientTourById.vue
@@ -49,13 +49,11 @@
           >
             <view class="item-content">
               <text class="item-title">{{ item.title }}</text>
+              <text v-if="item.subtitle" class="item-subtitle"
+                >{{ item.subtitle }}
+              </text>
               <view class="item-meta">
-                <text v-if="item.subtitle" class="item-subtitle"
-                  >{{ item.subtitle }}
-                </text>
                 <text class="item-time">{{ formatTime(item.createTime) }}</text>
-                <!-- 开发时显示文章ID -->
-                <text v-if="!tourId" class="item-id">ID: {{ item.id }}</text>
               </view>
             </view>
             <view class="item-arrow">
@@ -101,10 +99,10 @@ export default {
 
       // 添加基本样式
       content = `<div style="
-        font-size: 28rpx; 
-        line-height: 1.8; 
-        color: #333; 
-        word-wrap: break-word; 
+        font-size: 28rpx;
+        line-height: 1.8;
+        color: #333;
+        word-wrap: break-word;
         word-break: break-all;
         padding: 20rpx 0;
       ">${content}</div>`;
@@ -222,225 +220,193 @@ export default {
       console.log("封面图片加载失败");
       // 可以设置默认图片或隐藏图片容器
     },
-
-    // 测试方法（开发时使用）
-    testWithId(id) {
-      this.tourId = id;
-      this.fetchTourDetail();
-      this.fetchRelevantArticles();
-    },
   },
 };
 </script>
 
 <style lang="scss">
+// 页面基础样式
 .page {
   background: #f6f1e7;
   width: 100%;
   min-height: 100vh;
   flex-direction: column;
-
   align-items: center;
 }
 
+// 内容容器
 .content-container {
   width: 100%;
-  padding: 20rpx;
-
+  padding: 0 52rpx;
   box-sizing: border-box;
-}
-
-/* 文章头部样式 */
-.article-header {
+  border: red solid 1px;
   background: #fff;
-  padding: 40rpx 30rpx;
+}
+
+// 文章头部区域
+.article-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 32rpx 30rpx;
   border-radius: 16rpx;
-  margin-bottom: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  border: red solid 1px;
+
+  .article-title {
+    font-weight: 500;
+    font-size: 44rpx;
+    color: #3d3d3d;
+    line-height: 60rpx;
+    border: red solid 1px;
+  }
+
+  .article-time {
+    display: block;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #808080;
+    line-height: 32rpx;
+  }
 }
 
-.article-title {
-  display: block;
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 20rpx;
-}
-
-.article-time {
-  display: block;
-  font-size: 24rpx;
-  color: #999;
-  line-height: 1.2;
-}
-
-/* 封面图片样式 */
+// 封面图片区域
 .cover-image-container {
   background: #fff;
-  border-radius: 16rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 32rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  border: red solid 1px;
+
+  .cover-image {
+    width: 100%;
+    height: 400rpx;
+    display: block;
+  }
 }
 
-.cover-image {
-  width: 100%;
-  height: 400rpx;
-  display: block;
-}
-
-/* 文章内容样式 */
+// 文章内容区域
 .article-content {
   background: #fff;
-  padding: 30rpx;
+
   border-radius: 16rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 32rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   min-height: 200rpx;
+  border: red solid 1px;
 }
 
-/* 加载状态样式 */
+// 加载状态区域
 .loading-container {
   background: #fff;
   padding: 60rpx 30rpx;
   border-radius: 16rpx;
   text-align: center;
   margin-bottom: 20rpx;
+
+  .loading-text {
+    font-size: 28rpx;
+    color: #999;
+  }
 }
 
-.loading-text {
-  font-size: 28rpx;
-  color: #999;
-}
-
-/* 相关阅读区域样式 */
+// 相关阅读区域
 .relevant-section {
   background: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
+  border: red solid 1px;
 
-.section-title {
-  padding: 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  background: #f8f8f8;
-}
+  .section-title {
+    .title-text {
+      font-weight: 400;
+      font-size: 36rpx;
+      color: #695347;
+      line-height: 50rpx;
+      border-bottom: 2rpx solid #a24242;
+    }
+  }
 
-.title-text {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-}
+  .relevant-list {
+    padding: 0;
+  }
 
-.relevant-list {
-  padding: 0;
-}
+  .relevant-item {
+    display: flex;
+    align-items: center;
+    padding: 30rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+    transition: background-color 0.3s ease;
+    border: red solid 1px;
 
-.relevant-item {
-  display: flex;
-  align-items: center;
-  padding: 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  transition: background-color 0.3s ease;
-}
+    &:last-child {
+      border-bottom: none;
+    }
 
-.relevant-item:last-child {
-  border-bottom: none;
-}
+    &:active {
+      background-color: #f5f5f5;
+    }
 
-.relevant-item:active {
-  background-color: #f5f5f5;
-}
+    .item-content {
+      flex: 1;
+      margin-right: 20rpx;
 
-.item-content {
-  flex: 1;
-  margin-right: 20rpx;
-}
+      .item-title {
+        display: block;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.4;
+        margin-bottom: 10rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border: red solid 1px;
+      }
 
-.item-title {
-  display: block;
-  font-size: 28rpx;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 10rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+      .item-subtitle {
+        font-size: 24rpx;
+        color: #666;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: 20rpx;
+        border: red solid 1px;
+      }
 
-.item-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+      .item-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: red solid 1px;
 
-.item-subtitle {
-  font-size: 24rpx;
-  color: #666;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 20rpx;
-}
+        .item-time {
+          font-size: 22rpx;
+          color: #999;
+          flex-shrink: 0;
+          border: red solid 1px;
+        }
+      }
+    }
 
-.item-time {
-  font-size: 22rpx;
-  color: #999;
-  flex-shrink: 0;
-}
+    .item-arrow {
+      width: 40rpx;
+      height: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: red solid 1px;
 
-.item-id {
-  font-size: 20rpx;
-  color: #666;
-  background: #f0f0f0;
-  padding: 4rpx 8rpx;
-  border-radius: 4rpx;
-  margin-left: 10rpx;
-  flex-shrink: 0;
-}
-
-.item-arrow {
-  width: 40rpx;
-  height: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.arrow {
-  font-size: 24rpx;
-  color: #ccc;
-  font-weight: bold;
-}
-
-/* 测试按钮样式 */
-.test-buttons {
-  position: fixed;
-  top: 100rpx; /* 根据导航栏高度调整 */
-  left: 20rpx;
-  z-index: 10;
-  background-color: #fff;
-  padding: 20rpx;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
-
-.test-btn {
-  margin-bottom: 10rpx;
-  background-color: #4caf50;
-  color: #fff;
-  font-size: 28rpx;
-  padding: 15rpx 30rpx;
-  border-radius: 8rpx;
-  border: none;
-  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
-}
-
-.test-btn:last-child {
-  margin-bottom: 0;
+      .arrow {
+        font-size: 24rpx;
+        color: #ccc;
+        font-weight: bold;
+        border: red solid 1px;
+      }
+    }
+  }
 }
 </style>