个人房源对接

src/components/detail/breadcrumb.vue

@@ -11,7 +11,7 @@
         </div>
         <div class="dis-f al-item jus-bet title-box">
             <div class="detail-title">
-                房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住
+                {{ data['data']['info']&&data['data']['info'].subject }}
             </div>
             <div class="tool-btn-box dis-f al-item">
                 <div class="btn-s dis-f al-item jus-x">
@@ -37,21 +37,27 @@
   
 <script setup>
 import { ArrowRight } from '@element-plus/icons-vue'
-import { reactive, onMounted, ref, defineProps } from 'vue'
+import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 import store from '@/store'
 
-defineProps({
+const props=defineProps({
     data: {
-        type: Array,
+        type: Object,
         default: function () {
-            return []
+            return {}
         }
     }
 })
+let data=reactive({})
 
 //导航数据
 let storeData = store.state.routeList
-console.log(storeData)
+console.log('storeData',storeData)
+
+watchEffect(()=>{
+    data['data']=props.data
+    console.log(data['data'])
+})
 
 </script>
 <style scoped>
@@ -90,7 +96,6 @@ img {
 
 .title-top-box {
     width: 1200px;
-    height: 186px;
     background: inherit;
     background-color: rgba(255, 255, 255, 1);
     box-sizing: border-box;

src/components/detail/imageWatch.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="watch-box">
+    <div class="watch-box" v-show="show">
         <div class="pos-r dis-f al-item mg-t-60">
             <div class="s-w-100">
                 <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
                     <el-carousel-item v-for="(item, i) in list" :key="i">
-                        <div class="dis-f jus-x al-item">
+                        <div class="dis-f jus-x al-item" v-if="item">
                             <div class="img-box">
                                 {{ item }}
-                                <img src="" class="img" alt="">
+                                <img :src="item&&item.url" class="img" alt="">
                             </div>
                         </div>
                     </el-carousel-item>
@@ -31,12 +31,12 @@
                 </div>
             </div>
         </div>
-        <img src="../../assets/img/detail/imageClose.svg" class="close-img" alt="">
+        <img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="">
     </div>
 </template>
   
 <script setup>
-import { reactive, onMounted, ref, defineProps } from 'vue'
+import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 
 const props = defineProps({
     list: {
@@ -44,9 +44,19 @@ const props = defineProps({
         default: function () {
             return [1, 2, 3, 4, 5]
         }
+    },
+    close:{
+        type:Function
+    },
+    show:{
+        type:Boolean,
+        default:false
     }
 })
+
+let show=props.show
 let list = props.list
+let close=props.close
 
 let carousel = ref(null)
 let imageTab = ref(0)
@@ -65,6 +75,12 @@ let next = () => {
     carousel.value.next()
     console.log(imageTab.value)
 }
+
+watchEffect(()=>{
+    show=props.show
+    list = props.list
+    console.log('url',list)
+})
 </script>
 <style scoped>
 img {
@@ -188,7 +204,7 @@ img {
     }
 
     .img-box {
-        width: 800px;
+        width:1200px;
         height: 600px;
         background: #fff;
         border-radius: 10px;