景点详情-评论详情

src/pages.json

@@ -62,6 +62,14 @@
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle":""
 			}
+		},
+		{
+			"path": "pages/reviewDetails/scenicSpotDetails",
+			"style": {
+				"navigationBarTitleText": "景点详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle":""
+			}
 		}
 	],
 	"globalStyle": {

src/pages/reviewDetails/reviewDetails.vue

@@ -38,7 +38,22 @@
         跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
       </text>
     </view>
-    <view class="scenic-spot"></view>
+    <view class="scenic-spot">
+      <image src="@/static/reviewDetails/fj.png" mode="aspectFill"></image>
+      <view class="scenic-area-details">
+        <text class="scenic-name">红枫湖+青岩古镇+云漫湖</text>
+        <text class="scenic-type">自然风景</text>
+        <view class="tag-list">
+          <text class="tag">无购物</text>
+          <text class="tag">无购物</text>
+        </view>
+      </view>
+      <wd-icon class="icon" color="#ABAAAA" name="arrow-right" size="22px"></wd-icon>
+    </view>
+    <view class="dz-btn">
+      <wd-icon color="#767676" name="thumb-up" size="22px"></wd-icon>
+      <text>12</text>
+    </view>
   </view>
 </template>
 
@@ -138,6 +153,60 @@ page {
     width: 355 * 2rpx;
     box-sizing: border-box;
     padding: 20rpx 36rpx 20rpx 10rpx;
+    background: #f3f3f3;
+    border-radius: 8 * 2rpx;
+    display: flex;
+    align-items: center;
+    image {
+      width: 102 * 2rpx;
+      height: 72 * 2rpx;
+      border-radius: 4 * 2rpx;
+    }
+    .scenic-area-details {
+      display: flex;
+      flex-direction: column;
+      margin-left: 20rpx;
+      .cenic-name {
+        font-size: 14 * 2rpx;
+        color: #3d3d3d;
+      }
+      .scenic-type {
+        font-size: 12 * 2rpx;
+        /* 菜头标题文本 */
+        color: #3d3d3d;
+      }
+      .tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        .tag {
+          box-sizing: border-box;
+          padding: 10rpx 16rpx;
+          border-radius: 30rpx;
+          border: 2rpx solid #d8d8d8;
+          color: #3d3d3d;
+          font-size: 16rpx;
+          margin-top: 10rpx;
+          margin-left: 20rpx;
+        }
+      }
+    }
+    .icon {
+      margin-left: auto;
+    }
+  }
+  .dz-btn {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 28rpx 100rpx;
+    border: 2rpx solid #abaaaa;
+    margin-top: 46rpx;
+    border-radius: 68rpx;
+    text {
+      color: #767676;
+      font-size: 28rpx;
+      margin-left: 10rpx;
+    }
   }
 }
 </style>

src/pages/reviewDetails/scenicSpotDetails.vue

+<template>
+  <!-- 点评详情页面 -->
+  <view class="review-details-pages">
+    <view class="list">
+      <view class="item" v-for="i in 10" :key="i">
+        <image mode="aspectFill" src="@/static/reviewDetails/fj.png"></image>
+        <view class="info-box">
+          <text>红枫湖景区</text>
+          <text>自然风景</text>
+          <text class="t-2">4.5分</text>
+          <text class="t-2">门票费用已包含</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f3f3f3;
+}
+.review-details-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 750rpx;
+  .list {
+    width: 355 * 2rpx;
+    .item {
+      margin-top: 10rpx;
+      box-sizing: border-box;
+      padding: 20rpx;
+      display: flex;
+      background: #fff;
+      border-radius: 16rpx;
+      align-items: center;
+      image {
+        width: 102 * 2rpx;
+        height: 72 * 2rpx;
+        border-radius: 8rpx;
+      }
+      .info-box {
+        display: flex;
+        flex-direction: column;
+        margin-left: 40rpx;
+        text {
+          font-size: 12 * 2rpx;
+          margin-top: 8rpx;
+          /* 菜头标题文本 */
+          color: #3d3d3d;
+        }
+        .t-2 {
+          font-size: 12 * 2rpx;
+          color: rgba(9, 116, 245, 1);
+        }
+      }
+    }
+  }
+}
+</style>