load-lazy

src/views/zhulao/views/circle/detail.vue

@@ -2,77 +2,78 @@
   <div class="page">
     <van-nav-bar title="中心详情" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
     <div class="loop_image">
-        <van-image :src="institutionsItem.coverImgUrl" lazy-load fit="fill" />
+      <van-image :src="institutionsItem.coverImgUrl"  fit="fill" />
+
     </div>
     <div class="info_top">
-        <div class="name_bg">
-            <div class="name">{{institutionsItem.name?institutionsItem.name:''}}</div>
-        </div>
-        <div class="phone_bg">
-            <div>{{institutionsItem.contact?institutionsItem.contact:''}} {{institutionsItem.phone?institutionsItem.phone:''}}</div>
-        </div>
-        <div class="address_bg">
-            <div>{{institutionsItem.detailedAddress}}</div>
-        </div>
+      <div class="name_bg">
+        <div class="name">{{institutionsItem.name?institutionsItem.name:''}}</div>
+      </div>
+      <div class="phone_bg">
+        <div>{{institutionsItem.contact?institutionsItem.contact:''}} {{institutionsItem.phone?institutionsItem.phone:''}}</div>
+      </div>
+      <div class="address_bg">
+        <div>{{institutionsItem.detailedAddress}}</div>
+      </div>
     </div>
 
     <div class="info_center">
-        <span class="title">基本信息</span>
-        <div class="content">
+      <span class="title">基本信息--</span>
+      <!-- <span>dizhi:{{institutionsItem.coverImgUrl}}</span> -->
+      <div class="content">
         <div>
-            <span>服务对象:</span>
-            <span class="label">{{institutionsItem.serviceObject?institutionsItem.serviceObject:''}}</span>
+          <span>服务对象:</span>
+          <span class="label">{{institutionsItem.serviceObject?institutionsItem.serviceObject:''}}</span>
         </div>
         <div v-if="institutionsItem.isCharge">
-            <span>收费标准:</span>
-            <span class="label">{{institutionsItem.chargingTandard?institutionsItem.chargingTandard:''}}</span>
+          <span>收费标准:</span>
+          <span class="label">{{institutionsItem.chargingTandard?institutionsItem.chargingTandard:''}}</span>
         </div>
         <div v-if="institutionsItem.isCharge">
-            <span>空闲床位数:</span>
-            <span class="label">{{institutionsItem.bedNo?institutionsItem.bedNo:''}}</span>
-        </div>
+          <span>空闲床位数:</span>
+          <span class="label">{{institutionsItem.bedNo?institutionsItem.bedNo:''}}</span>
         </div>
+      </div>
     </div>
 
     <div class="info_center">
-        <span class="title">服务项目</span>
-        <div class="content minHeight">
-            {{institutionsItem.serviceItems?institutionsItem.serviceItems:''}}
-        </div>
+      <span class="title">服务项目</span>
+      <div class="content minHeight">
+        {{institutionsItem.serviceItems?institutionsItem.serviceItems:''}}
+      </div>
     </div>
 
     <div class="info_center">
-        <span class="title">服务详情</span>
-        <div class="content">
-           {{institutionsItem.content}}
-        </div>
+      <span class="title">服务详情</span>
+      <div class="content">
+        {{institutionsItem.content}}
+      </div>
     </div>
 
   </div>
 </template>
 <script>
-import {institutions_detail} from '../../api/index.js'
+import { institutions_detail } from '../../api/index.js'
 export default {
-    data() {
-        return {
-            institutionsId:'',
-            institutionsItem:{}
-        }
-    },
-    filters: {},
-    mounted() {
-    },
-    created() {
-        this.institutionsId = this.$route.query.institutionsId
-        this.getInstitutions_detail()
-    },
-    methods: {
-        async getInstitutions_detail() {
-            var detailData = await institutions_detail( this.institutionsId,{})
-            this.institutionsItem = detailData.data
-            console.log(this.institutionsItem)
-        },
+  data() {
+    return {
+      institutionsId: '',
+      institutionsItem: {},
     }
+  },
+  filters: {},
+  mounted() {},
+  created() {
+    this.institutionsId = this.$route.query.institutionsId
+    this.getInstitutions_detail()
+  },
+  methods: {
+    async getInstitutions_detail() {
+      var detailData = await institutions_detail(this.institutionsId, {})
+      this.institutionsItem = detailData.data
+      console.log(this.institutionsItem)
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -82,33 +83,33 @@ export default {
   height: 100%;
 }
 .loop_image {
+  width: 100%;
+  height: 320px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .van-image {
     width: 100%;
-    height: 320px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .van-image {
-        width: 100%;
-        height: 100%;
-    }
+    height: 100%;
+  }
 }
 
 .info_top {
-    width: 100%;
-    height: auto;
-    padding: 10px;
-    box-sizing: border-box;
-    .name_bg {
-        display: flex; 
-        justify-content: space-between;
-        align-items: center;
-    }
-    .name {
-        flex: .7;
-        color: black;
-        font-weight: 600;
-        font-size: 36px;
-    }
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  box-sizing: border-box;
+  .name_bg {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .name {
+    flex: 0.7;
+    color: black;
+    font-weight: 600;
+    font-size: 36px;
+  }
 }
 .phone_bg {
   margin-top: 20px;
@@ -131,24 +132,21 @@ export default {
   color: black;
 }
 .info_center .content {
-    font-size: 32px;
-    width: 100%;
-    height: auto;
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 20px;
-    box-sizing: border-box;
+  font-size: 32px;
+  width: 100%;
+  height: auto;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing: border-box;
 }
 .label {
-     margin-left: 10px;
+  margin-left: 10px;
 }
 .minHeight {
-    min-height: 20px;
+  min-height: 20px;
 }
 
-
-
-
 .item_bg {
   padding: 10px 15px;
   box-sizing: border-box;
@@ -167,10 +165,10 @@ export default {
   align-items: center;
 }
 .name {
-  flex: .8;
+  flex: 0.8;
 }
 .distance_bg {
-  flex: .2;
+  flex: 0.2;
 }
 .distance_icon {
   width: 30px;
@@ -210,5 +208,4 @@ export default {
   height: 30px;
   margin-right: 6px;
 }
-
 </style>