no message

 import request from '@/utils/request'
 export function getHotelList(params) {
     return request({
-        // url: `/logex/activityHotel/list`,
-        url: `/league/competition/webList`,
+        url: `/ota/activityHotel/list`,
         method: 'get',
         params: params
     })
 }
+export function getHotelById(id) {
+    return request({
+        url: `/ota/hotel/${id}`,
+        method: 'get'
+    })
+}

@@ -356,6 +356,12 @@ export const constantRoutes = [
             meta: { title: 'Hotel Reservation' }
           },
           {
+            path: 'hotel/:cptId/:hotelId',
+            component: () => import('@/viewsPc/booking/hotelDetail'),
+            name: 'hotelDetail',
+            meta: { title: 'Hotel Reservation' }
+          },
+          {
             path: 'car/:cptId',
             component: () => import('@/viewsPc/booking/car'),
             name: 'car',

@@ -12,27 +12,28 @@
   </div>
 
   <div class="box">
-    <el-card v-for="(h,index) in list" class="mb20">
+    <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">
 <!--        酒店列表-->
-        <el-row class="hotel" align="middle">
-          <el-col :span="8">
-            <img/>
+        <el-row class="hotel" align="middle" :gutter="20">
+          <el-col :span="6">
+            <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
           </el-col>
-          <el-col :span="8">
-            <h3>{{h.name}}</h3>
-            <div>
-              <img src="@/assets/booking/star.png">
+          <el-col :span="10">
+            <h3 class="esp">{{h.name}}</h3>
+            <div class="starBox">
+              <img  v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
             </div>
-            <div>
-              <span v-for="t in h.tags">{{t}}</span>
+            <div class="tagbox">
+              <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
+              <a v-show="h.label?.split('，').length>4">更多 ></a>
             </div>
-            <p>
-              <el-icon><LocationFilled /></el-icon>
+            <p class="esp addr">
+              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
               {{h.address}}
             </p>
           </el-col>
           <el-col :span="8" class="text-right">
-            <div class="price">¥<span>450</span><i>起</i></div>
+            <div class="price">¥<span>{{ h.price }}</span><i>起</i></div>
             <el-button class="btn-lineG w200px" round type="primary" size="large">立即预约 ⇀</el-button>
           </el-col>
         </el-row>
@@ -45,6 +46,8 @@
 <script setup>
   import {onMounted} from "@vue/runtime-core"
   import * as booking from "@/apiPc/booking"
+  import {useRouter} from "vue-router";
+  const router = useRouter()
   const query = ref({
     name:''
   })
@@ -58,10 +61,27 @@
       list.value = res.rows
     })
   }
+  function goDetail(item) {
+    router.push({
+      name:'hotelDetail',
+      params:{
+        hotelId:item.id
+      }
+    })
+  }
 </script>
 
 <style scoped lang="scss">
-  .hotel{}
+  .hotel{
+    h3{margin: 0 0 20px;}
+    img.w100{object-fit: cover;aspect-ratio: 16/9}
+    .addr{font-size: 16px;color: #929AA0;font-weight: 400;}
+    .price{margin: 0 0 25px;
+      color: #FF8124;font-size: 18px;
+      span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
+      i{font-style: normal;color: #929AA0;}
+    }
+  }
   .banner{height: 140px;background-size: cover;text-align: center;
     background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
     justify-content: center;
@@ -73,4 +93,15 @@
   .no-border{border: none;background: #F5F7F9;
     :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
   }
+  .starBox{
+    img{display: inline-block;margin-right: 4px}
+  }
+  .tagbox{margin: 15px 0;
+    a{color: #AFB5B9;font-size: 12px;}
+    span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
+    span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
+    span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
+    span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
+    span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
+  }
 </style>

 <template>
-  <div class="box">
-    <div>
+  <div>
+    <div class="box">
       <el-card class="mt30">
-
+        <h3>{{form.name}}</h3>
       </el-card>
     </div>
   </div>
 </template>
 
 <script setup>
-
+import {useRouter} from "vue-router";
+import {ref, reactive, onMounted} from "vue";
+import {useRoute} from "vue-router";
+import { getHotelById } from "@/apiPc/booking"
+const router = useRouter()
+const route = useRoute()
+const form = ref({})
+getData()
+function getData() {
+  getHotelById(route.params.hotelId).then(res=>{
+    form.value = res.data
+  }).catch(err=>{
+    console.log(err)
+  })
+}
 </script>
 
 <style scoped>