task 44941 大屏问题

src/components/scroll-table-details/index.html

@@ -6,11 +6,8 @@
       </div>
       <div class="table_bodyer" :style="[bodyStyle]" @click="handleClick($event)">
         <scroll :data="data" class="seamless-warp" :class-option="swiperOption">
-          <div v-for="(line, index) in data" class="table_one clearfix item_height">
-            <div class="item test_center ellipsis_1" >{{line.voucherSummary}}</div>
-            <div class="item test_center ellipsis_1" >{{line.bookDate}}</div>
-            <div class="item test_center ellipsis_1" >{{line.jieAmount}}</div>
-            <div class="item test_center ellipsis_1" >{{line.daiAmount}}</div>
+          <div v-for="(line, index) in data" :key="index" class="table_one clearfix item_height">
+            <div class="item test_center ellipsis_1" v-for="(item, itemIndex) in dataName" :key="itemIndex" >{{line[item]}}</div>
             <div v-show="details" class="item test_center ellipsis_1" style="cursor: pointer;" :data-item="JSON.stringify(line)">查看详情</div>
           </div>
         </scroll>

src/components/scroll-table-details/index.js

@@ -44,6 +44,12 @@ export default {
           ['表头11', '表头22', '表头33']
         ]
       }
+    },
+    dataName: {
+      type: Array,
+      default: function () {
+        return ['voucherSummary', 'bookDate', 'jieAmount', 'daiAmount']
+      }
     }
   },
   computed: {
@@ -77,10 +83,6 @@ export default {
   created () {
   },
   methods: {
-    lineClick (line) {
-      console.log(11111111111)
-      this.$emit('lineClick', line)
-    },
     handleClick(e) {
       // 获取最近携带 data-item 属性的元素
       const target = e.target.closest('[data-item]');

src/components/scroll-table/index.html

@@ -4,11 +4,11 @@
         <div v-for="header in headers" :key="header" class="item test_center">{{header}}</div>
         <div v-if="details" class="item test_center">操作</div>
       </div>
-      <div class="table_bodyer" :style="[bodyStyle]">
+      <div class="table_bodyer" :style="[bodyStyle]" @click="handleClick($event)">
         <scroll :data="data" class="seamless-warp" :class-option="swiperOption">
           <div v-for="(line, index) in data" class="table_one clearfix item_height">
             <div v-for="(item, index) in line" class="item test_center ellipsis_1" >{{item }}</div>
-            <div v-if="details" class="item test_center ellipsis_1" @cilck="lineClick(line)">查看详情</div>
+            <div v-if="details" class="item test_center ellipsis_1" style="cursor: pointer;" :data-item="JSON.stringify(line)">查看</div>
           </div>
         </scroll>
       </div>

src/components/scroll-table/index.js

@@ -79,6 +79,16 @@ export default {
   methods: {
     lineClick (line) {
       this.$emit('lineClick', line)
+    },
+    handleClick(e) {
+      // 获取最近携带 data-item 属性的元素
+      const target = e.target.closest('[data-item]');
+      if (!target) return;
+
+      // 解析存储的数据
+      const item = JSON.parse(target.dataset.item);
+      console.log("点击项数据：", item);
+      this.$emit('lineClick', item)
     }
   }
 };

src/views/capital/comps/left/bottom/1/index.js

@@ -50,8 +50,8 @@ export default {
     // 获取数据
     getData () {
       if (this.year || this.deptId) {
-
         this.isLoad = false;
+        this.titleNum = 0;
         // 如果是趋势
         if (this.tabIndex == 1) {
           analysisOfCapitalExpenditureRend(this.deptId, this.year).then(res => {
@@ -67,9 +67,8 @@ export default {
         } else if (this.tabIndex == 2) {
           // 获取类型
           analysisOfCapitalExpenditureType(this.deptId, this.year).then(res => {
-
+            this.titleNum = res.data.total;
             let data = res.data.list.map(item => {
-              this.titleNum += item.value;
               return {
                 name: item.name,
                 value: item.value,

src/views/capital/comps/left/middle/1/index.js

@@ -64,13 +64,14 @@ export default {
         } else if (this.tabIndex == 2) {
           // 获取类型
           leftbottomcapitalgainstype(this.deptId, this.year).then(res => {
+            this.titleNum = res.data.total;
             let data = res.data.list.map(item => {
-              this.titleNum += item.value;
               return {
                 name: item.name,
                 value: item.value,
                 unit: this.unitMaker(item.name)
               }
+
             })
             this.data = data
             this.isLoad = true;

src/views/property/asset-details/index.html

@@ -0,0 +1,69 @@
+  <!--资产信息详情-弹窗-->
+  <div class="gl_pop_cash pop_statistical_desc">
+    <div class="head_main">
+      <div class="title"><i></i>{{data.name}}</div>
+      <div class="close" @click="close"></div>
+    </div>
+    <div class="echarts_main scrollbar">
+      <div>
+        <p>资产编码</p>
+        <p>{{data.code}}</p>
+      </div>
+      <div>
+        <p>资产名称</p>
+        <p>{{data.name}}</p>
+      </div>
+      <div>
+        <p>资产类型</p>
+        <p>{{data.assetType}}</p>
+      </div>
+      <div>
+        <p>经营属性</p>
+        <p>{{data.operationType}}</p>
+      </div>
+      <div>
+        <p>增加方式</p>
+        <p>{{data.addType}}</p>
+      </div>
+      <div>
+        <p>购建时间</p>
+        <p>{{data.buildTime}}</p>
+      </div>
+      <div>
+        <p>使用情况</p>
+        <p>{{data.useType}}</p>
+      </div>
+      <div>
+        <p>资产状态</p>
+        <p>{{data.assetStatus}}</p>
+      </div>
+      <div>
+        <p>数量/面积</p>
+        <p>{{data.quantity}}</p>
+      </div>
+      <div>
+        <p>计量单位</p>
+        <p>{{data.unit}}</p>
+      </div>
+      <div>
+        <p>原值(元)</p>
+        <p>{{data.originalValue}}</p>
+      </div>
+      <div>
+        <p>折旧方式</p>
+        <p>{{data.depreciationType}}</p>
+      </div>
+      <div>
+        <p>附件</p>
+        <p>
+          <template v-for="(item,index) in data.attachments">
+<!--            <a :href="item.urlApi" v-if="item.type != 'image'">-->
+<!--              <img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">-->
+<!--            </a> v-else-->
+            <img :src="'/api' + item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.fileUrl)">
+          </template>
+        </p>
+      </div>
+    </div>
+
+  </div>

src/views/property/asset-details/index.js

@@ -0,0 +1,30 @@
+
+import { attachmentList } from "@/api/common/uploadAttachment.js";
+export default {
+  props: {
+    data: {}
+  },
+  data () {
+    return {
+      isLoad: false,
+      permanentDetail: {}
+    };
+  },
+  computed: {
+  },
+  created () {
+    this.isLoad = false
+  },
+  mounted () {
+  },
+  methods: {
+    openImage (url) {
+      this.$emit('openImage',url)
+      // this.dialogImageUrl = url;
+      // this.dialogVisible = true;
+    },
+    close () {
+      this.$emit('close')
+    }
+  }
+};

src/views/property/asset-details/index.scss

@@ -0,0 +1,183 @@
+.gl_pop_cash {
+  background: rgba(10, 25, 47, 0.8);
+  position: absolute;
+   border: 2px solid #3181f6;
+  box-shadow: 0 0 5px #3181f6;
+  border-radius: 0 0 100px 0;
+  // border-left: 0.15vw solid #357dfa;
+  z-index: 11;
+
+  .head_main {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: linear-gradient(to right, rgba(49, 129, 246, .8), rgba(49, 129, 246, 0));
+    .title {
+      color: #ffad00;
+      font-size: 20px !important;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      text-shadow: 0 0 15px #3181f6;
+      i{
+        display: block;
+        width: 20px;
+        height: 20px;
+        background: url("tt_icon.png") no-repeat center;
+        background-size: 100% 100%;
+        margin-right: 10px;
+      }
+    }
+
+    .close {
+      background: url('./close.png') no-repeat;
+      background-size: 100% 100%;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .xs_main {
+      height: 30px;
+      position: absolute;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .block {
+        width: 20px;
+        display: flex;
+
+        .point {
+          width: .55vh;
+          height: .55vh;
+          margin-right: 0.36vw;
+
+          &.p1 {
+            background: rgba(53, 125, 250, 1)
+          }
+
+          &.p2 {
+            background: rgba(53, 125, 250, .7)
+          }
+
+          &.p3 {
+            background: rgba(53, 125, 250, .4)
+          }
+        }
+
+      }
+
+      .xs_x {
+        height: 1px;
+        flex: 1;
+        background: #214284;
+      }
+    }
+  }
+
+  .echarts_main {
+    height: 600px;
+    overflow-y: auto;
+
+    div {
+      font-size: 10px;
+      // height: 40px;
+      line-height: 20px;
+
+      p {
+        // white-space: nowrap;
+      }
+    }
+
+    .headers {
+      height: 30px;
+      font-size: 14px;
+      color: #0befca;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 0.53vw;
+      background: rgba(11, 239, 202, .2);
+      margin-bottom: 0.9vh
+    }
+
+    .desc_main {
+      overflow-y: scroll;
+      padding-right: 0.33vw;
+
+      .analysisTable_list {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .flex_item {
+          cursor: pointer;
+          list-style: none;
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: #fff;
+          font-size: 12px;
+          position: relative;
+          height: 30px;
+
+          &:nth-child(2n) {
+            background: rgba(53, 125, 250, .1);
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.pop_statistical_desc {
+  width: 600px;
+  margin: 0;
+  left: 480px;
+  top: 180px;
+  padding-bottom: 1.04vw !important;
+
+  .head_main {
+
+    .title {
+      color: #fff;
+    }
+  }
+
+  .echarts_main {
+    margin-top: 16px;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      &:nth-child(even) {
+        //background: rgba(32, 89, 188, 0.2);
+      }
+
+      p {
+        font-size: 16px;
+        &:nth-child(1) {
+          width: 8vw;
+          padding-right: 1vw;
+          text-align: right;
+          flex-shrink: 0;
+          color: #b0cfec;
+        }
+        margin: 0;
+        color: #ffffff;
+        line-height: 3.92vh;
+      }
+    }
+  }
+}

src/views/property/asset-details/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/property/comps/left/bottom/3/index.html

@@ -5,5 +5,5 @@
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/property/comps/left/bottom/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { longTermIdleResourceWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -27,20 +27,23 @@ export default {
   data () {
     return {
       isLoad: false,
-      headers: ['部门', '资产名称', '资产类别', '资产原值（元）'],
+      headers: ['部门', '资产名称', '资产类别', '资产原值'],
       data: [
-        ['部门', '资产名称', '资产类别', '资产原值（元）']
-      ]
+        ['部门', '资产名称', '资产类别', '资产原值']
+      ],
+      dataName: ['deptName', 'name', 'assetType', 'originalValue']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         longTermIdleResourceWarning(this.deptId, this.year).then(res => {
-          let data = res.rows.map(item => {
-            return [item.deptName, item.name, item.assetType, item.originalValue]
-          })
+          let data = res.rows;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/comps/left/middle/3/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad " :headers="headers" :data="data"></ScrollTable>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
 </Pannel>

src/views/property/comps/left/middle/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { warningForNonStandardRentalOfResources } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -27,20 +27,21 @@ export default {
   data () {
     return {
       isLoad: false,
-      headers: ['部门', '资产名称', '资产类别', '资产原值（元）'],
-      data: [
-        ['部门', '资产名称', '资产类别', '资产原值（元）']
-      ]
+      headers: ['部门', '资产名称', '资产类别', '资产原值'],
+      data: [],
+      dataName: ['deptName', 'name', 'assetType', 'originalValue']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         warningForNonStandardRentalOfResources(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.name, item.assetType, item.originalValue]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/comps/left/top/3/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
 </Pannel>

src/views/property/comps/left/top/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { resourceDisposalWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -30,17 +30,20 @@ export default {
       headers: ['部门', '资产名称', '资产类别', '申请日期', '处置类型'],
       data: [
         ['部门', '资产名称', '资产类别', '申请日期', '处置类型']
-      ]
+      ],
+      dataName: ['bookName', 'assetName', 'assetType', 'applyAt', 'assetStatus']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         resourceDisposalWarning(this.deptId, this.year).then(res => {
-          let data = res.rows.map(item => {
-            return [item.bookName, item.assetName, item.assetType, item.applyAt, item.assetStatus]
-          })
+          let data = res.rows;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/comps/right/bottom/3/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/property/comps/right/bottom/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { longTermContractNonExecutionWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -11,7 +11,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '合同截止日期'],
-      data: []
+      data: [],
+      dataName: ['deptName', 'code', 'name', 'endTime']
     };
   },
   computed: {
@@ -36,13 +37,15 @@ export default {
   mounted () {
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         longTermContractNonExecutionWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.endTime]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/comps/right/middle/3/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/property/comps/right/middle/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { contractExpirationWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -11,7 +11,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '合同截止日期'],
-      data: [['部门', '合同编码', '合同名称', '合同截止日期']]
+      data: [['部门', '合同编码', '合同名称', '合同截止日期']],
+      dataName: ['deptName', 'code', 'name', 'endTime']
     };
   },
   watch: {
@@ -36,13 +37,15 @@ export default {
   mounted () {
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         contractExpirationWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.endTime]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/comps/right/top/3/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/property/comps/right/top/3/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { contractPaymentDueWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -28,7 +28,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '预结款日期', '结款金额'],
-      data: [['部门', '合同编码', '合同名称', '预结款日期', '结款金额']]
+      data: [['部门', '合同编码', '合同名称', '预结款日期', '结款金额']],
+      dataName: ['deptName', 'code', 'name', 'settlementDate', 'settlementAmount']
     };
   },
   created () {
@@ -36,13 +37,15 @@ export default {
   mounted () {
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val)
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         contractPaymentDueWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.settlementDate, item.settlementAmount]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/property/index.html

@@ -8,12 +8,19 @@
   </Header>
   <!-- 项目初始化 -->
   <div class="left_side col space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.left" :key="index" @clickDetail="clickDetail"></component>
   </div>
   <div class="right_side col space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.right" :key="index" @clickDetail="clickDetail"></component>
   </div>
   <div class="buttom_side row space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" @clickDetail="clickDetail"></component>
+  </div>
+
+  <AssetDetails @close="showDetail = false" @openImage="openImage" v-if="showDetail" :data="permanentDetail"></AssetDetails>
+
+  <div class="imgBox" v-if="dialogVisible">
+    <div class="box_bg" @click="dialogVisible = false"></div>
+    <img :src="'/api' + dialogImageUrl" alt="">
   </div>
 </div>

src/views/property/index.js

@@ -32,13 +32,12 @@ import Right14 from './comps/right/top/4/index.vue';
 import Right24 from './comps/right/middle/4/index.vue';
 import Right34 from './comps/right/bottom/4/index.vue'
 
-
-
-
 import { comps } from './data.js'
 
 import GisMap from '@/components/gis-map/index.vue';
 import MainGis from './main-gis/index.vue';
+
+import AssetDetails from './asset-details/index.vue';
 export default {
   components: {
     Header,
@@ -70,7 +69,8 @@ export default {
     Right24,
     Right34,
     MainGis,
-    GisMap
+    GisMap,
+    AssetDetails
   },
   data () {
     return {
@@ -93,7 +93,11 @@ export default {
         }
       ],
       tab: '1',
-      comps
+      comps,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      showDetail: false,
+      permanentDetail: {}
     };
   },
   computed: {
@@ -104,6 +108,16 @@ export default {
   methods: {
     tabChange (info) {
       this.tab = info.id;
+    },
+    openImage (url) {
+      console.log(url)
+      this.dialogImageUrl = url;
+      this.dialogVisible = true;
+    },
+    clickDetail (val) {
+      console.log(val + 111111111)
+      this.permanentDetail = val;
+      this.showDetail = true;
     }
   }
 };

src/views/property/index.scss

@@ -4,4 +4,24 @@
   left: 0;
   right: 0;
   bottom: 0;
-}
+}
+.imgBox{
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999999;
+  width: 100vw;
+  height: 100%;
+  .box_bg{
+    background-color: rgba(0,0,0,0.5);
+    width: 100%;
+    height: 100%;
+  }
+  img{
+    height: 60vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+}