古刹巡礼列表页设计优化

pages/ancient/ancient.vue

@@ -9,7 +9,7 @@
       :refresher-triggered="refreshing"
       @refresherrefresh="onRefresh"
     >
-      <view class="header" :style="{ backgroundColor: '#ffffff' }">
+      <view class="header" >
         <!-- 状态展示 -->
         <status-display
             v-if="loading && templeList.length === 0"
@@ -142,7 +142,7 @@ export default {
 
 <style lang="scss" scoped>
 .page {
-  background: #F5F0E7;
+  background: #FAF8F3;
 }
 
 .scroll-container {
@@ -155,24 +155,26 @@ export default {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   flex-direction: column;
-  padding: 0 15rpx;
   padding-bottom: 40rpx;
   box-sizing: border-box;
 }
 
 .temple-list {
-  width: 100%;
+  margin-top: 20rpx;
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  justify-content: center;
-  padding: 20rpx 0;
+  align-items: center;
+  gap: 30rpx;
+
 }
 
 .temple-card {
   width: 100%;
-  margin-bottom: 20rpx;
+  //margin-bottom: 20rpx;
+  align-items: center;
 }
 
 .no-data {
@@ -214,16 +216,4 @@ export default {
     object-fit: cover; // 保持图片比例
   }
 }
-
-// 响应式设计
-@media (max-width: 768px) {
-  .temple-list {
-    gap: 15rpx;
-    padding: 15rpx 0;
-  }
-  
-  .temple-card {
-    margin-bottom: 15rpx;
-  }
-}
 </style>

pages/ancient/commponts/ancientItem.vue

@@ -54,110 +54,111 @@ export default {
 </template>
 
 <style scoped lang="scss">
+/* ==================== 卡片容器 ==================== */
 .ancient-card {
   position: relative;
-  width: 100%;
+  width: 670rpx;
-  max-width: 400px;
+  height: 286rpx;
-  height: 280px;
+  border-radius: 16rpx;
-  border-radius: 16px;
+
   overflow: hidden;
-}
 
-.card-background {
+  /* ========== 背景层 ========== */
-  position: absolute;
+  .card-background {
-  top: 0;
+    position: absolute;
-  left: 0;
+    top: 0;
-  width: 100%;
+    left: 0;
-  height: 100%;
-  
-  .background-image {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    background: #3D3D3D;
-    filter: blur(8px);
+
+    /* 真实背景图 */
+    .background-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover; // 保持比例填充
+      opacity: 0.4;
+    }
+
+    /* 缺省背景（渐变+模糊） */
+    .placeholder-background {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      filter: blur(8px);
+    }
   }
-  
-  .placeholder-background {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    filter: blur(8px);
-  }
-}
 
-.card-content {
+  /* ========== 内容层 ========== */
-  position: relative;
-  z-index: 2;
-  height: 100%;
-  padding: 32px 24px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.1) 0%,
-    rgba(255, 255, 255, 0.05) 100%
-  );
-  backdrop-filter: blur(10px);
-}
-
-.card-title {
-  color: white;
-  font-size: 28px;
-  font-weight: 600;
-  margin: 0 0 12px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  line-height: 1.2;
-}
-
-.card-description {
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 16px;
-  margin: 0 0 24px 0;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  line-height: 1.4;
-}
-
-.card-button {
-  display: flex;
-  align-items: center;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 25px;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  backdrop-filter: blur(10px);
-}
-
-.arrow-icon {
-  margin-left: 8px;
-}
-
-.arrow-text {
-  font-size: 16px;
-  color: white;
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .ancient-card {
-    max-width: 100%;
-    height: 240px;
-  }
-  
   .card-content {
-    padding: 24px 20px;
+    position: relative;
-  }
+    z-index: 2; // 确保内容在背景上层
-  
+    height: 100%;
-  .card-title {
+    padding: 40rpx 28rpx;
-    font-size: 24px;
+    display: flex;
-  }
+    flex-direction: column;
-  
+    justify-content: flex-start;
-  .card-description {
+    align-items: flex-start;
-    font-size: 14px;
+
+    /* 标题样式 */
+    .card-title {
+      width: 160rpx;
+      height: 54rpx;
+      font-weight: 500;
+      font-size: 40rpx;
+      color: #FFFFFF;
+      line-height: 54rpx;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    /* 描述文本 */
+    .card-description {
+      margin: 20rpx 0 28rpx 0;
+      width: 258rpx;
+      height: 38rpx;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #FFFFFF;
+      line-height: 38rpx;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    /* 按钮样式 */
+    .card-button {
+      display: flex;
+      align-items: center;
+      padding: 0 15rpx;
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      //background: rgba(255, 255, 255, 0.2);
+      //backdrop-filter: blur(10px); // 毛玻璃效果
+      width: 176rpx;
+      height: 54rpx;
+      border-radius: 33rpx 33rpx 33rpx 33rpx;
+      border: 1rpx solid #FFFFFF;
+
+      /* 箭头图标 */
+      .arrow-icon {
+        margin-left: 8px;
+
+        .arrow-text {
+          width: 96rpx;
+          height: 32rpx;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #FFFFFF;
+          line-height: 32rpx;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
   }
 }
 </style>