古刹文章详细页面0.8

pages/ancient/ancientTourById.vue

@@ -49,13 +49,11 @@
           >
             <view class="item-content">
               <text class="item-title">{{ item.title }}</text>
-              <view class="item-meta">
               <text v-if="item.subtitle" class="item-subtitle"
                 >{{ item.subtitle }}
               </text>
+              <view class="item-meta">
                 <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">
@@ -222,144 +220,140 @@ 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;
-}
+  border: red solid 1px;
-
-/* 文章头部样式 */
-.article-header {
   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 {
+  .article-title {
-  display: block;
+    font-weight: 500;
-  font-size: 36rpx;
+    font-size: 44rpx;
-  font-weight: bold;
+    color: #3d3d3d;
-  color: #333;
+    line-height: 60rpx;
-  line-height: 1.4;
+    border: red solid 1px;
-  margin-bottom: 20rpx;
+  }
-}
 
-.article-time {
+  .article-time {
     display: block;
+    font-weight: 400;
     font-size: 24rpx;
-  color: #999;
+    color: #808080;
-  line-height: 1.2;
+    line-height: 32rpx;
+  }
 }
 
-/* 封面图片样式 */
+// 封面图片区域
 .cover-image-container {
   background: #fff;
-  border-radius: 16rpx;
+  margin-bottom: 32rpx;
-  margin-bottom: 20rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
+  border: red solid 1px;
 
-.cover-image {
+  .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 {
+  .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 {
+  .section-title {
-  padding: 30rpx;
+    .title-text {
-  border-bottom: 1rpx solid #f0f0f0;
+      font-weight: 400;
-  background: #f8f8f8;
+      font-size: 36rpx;
-}
+      color: #695347;
+      line-height: 50rpx;
+      border-bottom: 2rpx solid #a24242;
+    }
+  }
 
-.title-text {
+  .relevant-list {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-}
-
-.relevant-list {
     padding: 0;
-}
+  }
 
-.relevant-item {
+  .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:last-child {
+    &:last-child {
       border-bottom: none;
-}
+    }
 
-.relevant-item:active {
+    &:active {
       background-color: #f5f5f5;
-}
+    }
 
-.item-content {
+    .item-content {
       flex: 1;
       margin-right: 20rpx;
-}
 
-.item-title {
+      .item-title {
         display: block;
         font-size: 28rpx;
         font-weight: 500;
@@ -369,15 +363,10 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-}
+        border: red solid 1px;
+      }
 
-.item-meta {
+      .item-subtitle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.item-subtitle {
         font-size: 24rpx;
         color: #666;
         flex: 1;
@@ -385,62 +374,39 @@ export default {
         text-overflow: ellipsis;
         white-space: nowrap;
         margin-right: 20rpx;
-}
+        border: red solid 1px;
+      }
 
-.item-time {
+      .item-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: red solid 1px;
+
+        .item-time {
           font-size: 22rpx;
           color: #999;
           flex-shrink: 0;
-}
+          border: red solid 1px;
+        }
+      }
+    }
 
-.item-id {
+    .item-arrow {
-  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;
-}
+      border: red solid 1px;
 
-.arrow {
+      .arrow {
         font-size: 24rpx;
         color: #ccc;
         font-weight: bold;
-}
+        border: red solid 1px;
-
+      }
-/* 测试按钮样式 */
+    }
-.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;
 }
 </style>