个人房源对接

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;