点评详情

src/pages.json

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

src/pages/reviewDetails/reviewDetails.vue

+<template>
+  <!-- 点评详情页面 -->
+  <view class="review-details-pages">
+    <view class="swiper-list">
+      <wd-swiper
+        :list="swiperList"
+        direction="horizontal"
+        indicatorPosition="right"
+        autoplay
+        height="456rpx"
+        v-model:current="current"
+        @click="handleClick"
+        @change="onChange"
+      >
+        <template #indicator="{ current, total }">
+          <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
+            {{ current + 1 }}/{{ total }}
+          </view>
+        </template>
+      </wd-swiper>
+    </view>
+    <view class="revuew-content">
+      <view class="user-info">
+        <view class="info-content">
+          <image src="@/static/reviewDetails/avatar.png" mode="aspectFill"></image>
+          <view class="text-box">
+            <text class="user-name">不爱吃鱼的小猫咪</text>
+            <text class="fb-time">2024-08-03</text>
+          </view>
+        </view>
+        <view>
+          <text class="score">4.9</text>
+          <text class="score-unit">/5分</text>
+        </view>
+      </view>
+      <text style="margin-top: 12rpx; font-size: 14 * 2rpx; color: #3d3d3d">
+        跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
+        跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答问题。
+      </text>
+    </view>
+    <view class="scenic-spot"></view>
+  </view>
+</template>
+
+<script setup>
+const current = ref(0);
+onMounted(() => {
+  xma.getSystemInfo({
+    success: function (res) {
+      console.log(res, '11111111');
+    },
+  });
+});
+const swiperList = ref([
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+]);
+function handleClick(e) {}
+function onChange(e) {
+  console.log(e);
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #ffffff;
+}
+.review-details-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 750rpx;
+  .swiper-list {
+    width: 375 * 2rpx;
+    height: 228 * 2rpx;
+    :deep(.wd-swiper__track) {
+      border-radius: 0;
+    }
+    .custom-indicator {
+      padding: 0 12rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      border-radius: 45%;
+      background: rgba(0, 0, 0, 0.6);
+      color: #ffffff;
+      font-size: 24rpx;
+    }
+  }
+  .revuew-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    padding: 40rpx 20rpx;
+    box-sizing: border-box;
+    .user-info {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .info-content {
+        display: flex;
+        align-items: center;
+        image {
+          width: 36 * 2rpx;
+          height: 36 * 2rpx;
+          border-radius: 50%;
+        }
+        .text-box {
+          display: flex;
+          flex-direction: column;
+          margin-left: 20rpx;
+          .user-name {
+            font-size: 14 * 2rpx;
+            color: #3d3d3d;
+          }
+          .fb-time {
+            font-size: 11 * 2rpx;
+            /* 小文本 */
+            color: #abaaaa;
+            margin-top: 10rpx;
+          }
+        }
+        .score {
+          font-size: 14 * 2rpx;
+          /* 4.9 */
+          color: #0974f5;
+        }
+        .score-unit {
+          font-size: 12 * 2rpx;
+          color: #abaaaa;
+        }
+      }
+    }
+  }
+  .scenic-spot {
+    width: 355 * 2rpx;
+    box-sizing: border-box;
+    padding: 20rpx 36rpx 20rpx 10rpx;
+  }
+}
+</style>