线路详情

src/pages.json

@@ -77,6 +77,12 @@
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle":""
 			}
+		},
+		{
+			"path": "pages/RouteDetails/RouteDetails",
+			"style": {
+				"navigationBarTitleText": "线路详情",
+			}
 		}
 	],
 	"globalStyle": {

src/pages/RouteDetails/RouteDetails.vue

+<template>
+  <view>
+    <view class="container">
+      <view class="bac-img">
+        <img class="bac" src="/static/rural/route.png" style="width: 750rpx; height: 440rpx" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #eaf9f1;
+}
+.container {
+  position: relative;
+  left: 0rpx;
+  top: 0rpx;
+  width: 750rpx;
+  height: 440rpx;
+}
+.bac {
+  display: flex;
+  margin-top: -80rpx;
+}
+</style>

src/pages/RuralTravel/RuralTravel.vue

@@ -93,7 +93,12 @@
           </view>
         </view>
         <view class="list-card">
-          <view class="card-detail" v-for="(item, index) in cardList" :key="index">
+          <view
+            class="card-detail"
+            v-for="(item, index) in cardList"
+            :key="index"
+            @tap="toRouteDetails"
+          >
             <img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
             <view class="detail-text">
               <text class="detail-title">{{ item.title }}</text>
@@ -200,6 +205,12 @@ const locationFiltering = (index) => {
       break;
   }
 };
+function toRouteDetails() {
+  // TODO: 跳转到线路详情
+  xma.navigateTo({
+    url: '/pages/RouteDetails/RouteDetails',
+  });
+}
 </script>
 
 <style lang="scss" scoped>