测试

src/scrm_pages/microHome/microHome.vue

 <template>
   <div class="page_home">
-
     <div class="swiper-slide">
-      <div   v-for="item in this.patientModels" :key="item.id">
-    <!-- 轮播图 -->
-      <div class="banner" v-if="item.mode_type == 1">
-        <div class="swiper-container bannerSwiper" >
-          <div class="swiper-wrapper">
-            <div class="swiper-slide" v-for="it in item.PatientEditpiclink" :key="it.id">
-              <img class="imgtwo" :src="it.images" />
+      <div v-for="item in this.patientModels" :key="item.id">
+        <!-- 轮播图 -->
+        <div class="banner" v-if="item.mode_type == 1">
+          <div class="swiper-container bannerSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide" v-for="it in item.PatientEditpiclink" :key="it.id">
+                <img class="imgtwo" :src="it.images" />
+              </div>
             </div>
+            <!-- 如果需要分页器 -->
+            <div class="swiper-pagination"></div>
           </div>
-          <!-- 如果需要分页器 -->
-          <div class="swiper-pagination"></div>
         </div>
-      </div>
 
-       <!-- 魔方导航 -->
-      <div class="btnList" v-if="item.mode_type== 8" >
-        <div class="btnOne" v-for="it in item.Editmargin" :key="it.id">
-          <div>
-            <img :src="it.margimage" alt />
-          </div>
-          <div>
-            <p class="title">{{it.margtitle}}</p>
+        <!-- 魔方导航 -->
+        <div class="btnList" v-if="item.mode_type== 8">
+          <div class="btnOne" v-for="it in item.Editmargin" :key="it.id">
+            <div>
+              <img :src="it.margimage" alt />
+            </div>
+            <div>
+              <p class="title">{{it.margtitle}}</p>
+            </div>
           </div>
         </div>
-      </div>
-
 
-      <!-- 文章列表 -->
-      <div class="dynamic" v-if="item.mode_type == 6">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <div class="more" @click="articlemore(item.id,item.user_org_id)">
-            <p>查看更多 <i class="iconfont">&#xe632;</i></p>
-          </div>
-        </div>
-        <div class="content">
-          <div class="contentOne" v-for="it in Articlelist" :key="it.id">
-            <div class="img">
-              <img :src="it.imgs" style="width:100%;height:100%" alt/>
+        <!-- 文章列表 -->
+        <div class="dynamic" v-if="item.mode_type == 6">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <div class="more" @click="articlemore(item.id,item.user_org_id)">
+              <p>
+                查看更多
+                <i class="iconfont">&#xe632;</i>
+              </p>
             </div>
-            <div class="detail">
-              <p class="detailTitle">{{it.title}}</p>
-              <!-- <p class="detailMessage"></p> -->
+          </div>
+          <div class="content">
+            <div class="contentOne" v-for="it in Articlelist" :key="it.id">
+              <div class="img">
+                <img :src="it.imgs" style="width:100%;height:100%" alt />
+              </div>
+              <div class="detail">
+                <p class="detailTitle">{{it.title}}</p>
+                <!-- <p class="detailMessage"></p> -->
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-
-      <!-- 医院介绍 -->
-      <div class="common" v-if="item.mode_type == 2">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <div class="more" @click="hispitalmore(item.id,item.user_org_id)">
-            <p> 查看更多 <i class="iconfont">&#xe632;</i></p>
+        <!-- 医院介绍 -->
+        <div class="common" v-if="item.mode_type == 2">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <div class="more" @click="hispitalmore(item.id,item.user_org_id)">
+              <p>
+                查看更多
+                <i class="iconfont">&#xe632;</i>
+              </p>
+            </div>
           </div>
-        </div>
-        <div class="commonBox" v-html="item.Hospitals.introduction">
-          <!-- <div class="commonImg">
+          <div class="commonBox">
+            <!-- <div class="commonImg">
             <img src="static\images\img2.png" alt />
-          </div> -->
-          <!-- <div class="commonMessage" ></div> -->
+          </div>
+          <div class="commonMessage">
+            深圳市南山区人民医院（深圳市第六人民医院），坐落于深圳经济特区西部南头半岛中心区，是深圳市第四家三级甲等医院暨南山区区域医疗中心。深圳市第四家三级甲等医院
+            深圳市南山区人民医院（深圳市第六人民医院），坐落于深圳经济特区西部南头半岛中心区，是深圳市第四家三级甲等医院暨南山区区域医疗中心。深圳市第四家三级甲等医院...
+          </div>
+            </div>-->
+            <div class="commonMessage" v-html="item.Hospitals.introduction"></div>
+          </div>
         </div>
-      </div>
-
 
-      <!-- 科室介绍 -->
-      <div class="common" v-if="item.mode_type == 3">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <div class="more" @click="officemore(item.id,item.user_org_id)">
-            <p>查看更多<i class="iconfont">&#xe632;</i>   </p>
+        <!-- 科室介绍 -->
+        <div class="common" v-if="item.mode_type == 3">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <div class="more" @click="officemore(item.id,item.user_org_id)">
+              <p>
+                查看更多
+                <i class="iconfont">&#xe632;</i>
+              </p>
+            </div>
           </div>
-        </div>
-        <div class="commonBox" v-html="item.Offices.introduction">
-          <!-- <div class="commonImg">
+          <div class="commonBox">
+            <!-- <div class="commonImg">
             <img src="static\images\img2.png" alt />
-          </div> -->
-          <!-- <div class="commonMessage"  ></div> -->
-        </div>
-      </div>
-
-      <!-- 医护团队 -->
-      <div class="dynamic" v-if="item.mode_type == 4">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <div class="more" @click="docmore(item.id,item.user_org_id)">
-            <p>
-              查看更多
-              <i class="iconfont">&#xe632;</i>
-            </p>
+            </div>-->
+            <div class="commonMessage" v-html="item.Offices.introduction"></div>
           </div>
         </div>
-        <div class="content" @click="docmore(item.id,item.user_org_id)" >
-          <div class="contentOne"  v-for="doc in item.Editdoctor" :key="doc.id">
-            <div class="img">
-              <img :src="doc.dochead" style="width:100%;height:100%" alt />
-            </div>
-            <div class="detail">
-              <p class="detailTitle">{{doc.doc_name}}</p>
-              <p class="detailMessage"  v-html="doc.docintroduction"></p>
+
+        <!-- 医护团队 -->
+        <div class="dynamic" v-if="item.mode_type == 4">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <div class="more" @click="docmore(item.id,item.user_org_id)">
+              <p>
+                查看更多
+                <i class="iconfont">&#xe632;</i>
+              </p>
             </div>
           </div>
-          <!-- <div class="contentOne">
+          <div class="content">
+            <div class="contentOne" v-for="doc in item.Editdoctor" :key="doc.id">
+              <div class="img">
+                <img :src="doc.dochead" style="width:100%;height:100%" alt />
+              </div>
+              <div class="detail">
+                <p class="detailTitle">{{doc.doc_name}}</p>
+                <p class="detailMessage" v-html="doc.docintroduction"></p>
+              </div>
+            </div>
+            <!-- <div class="contentOne">
             <div class="img">
               <img src="static\images\img1.jpg" alt />
             </div>
               <p class="detailTitle">欧巧漫</p>
               <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
             </div>
-          </div> -->
+            </div>-->
+          </div>
         </div>
-      </div>
-
 
-      <!-- 科室环境 -->
-      <div class="dynamic" v-if="item.mode_type == 5">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <!-- <div class="more">
+        <!-- 科室环境 -->
+        <div class="dynamic" v-if="item.mode_type == 5">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <!-- <div class="more">
             <p>
               查看更多
               <i class="iconfont">&#xe632;</i>
             </p>
-          </div> -->
-        </div>
-        <div class="imgs">
-          <div class="swiper-container imgSwiper">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide carousel" v-for="itms in item.Enviroimages" :key="itms.id">
-                <img class="img" :src="itms.enviroimages" preview="1" />
+            </div>-->
+          </div>
+          <div class="imgs">
+            <div class="swiper-container imgSwiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide carousel" v-for="itms in item.Enviroimages" :key="itms.id">
+                  <img class="img" :src="itms.enviroimages" :preview="itms.modeid" />
+                </div>
               </div>
-            
             </div>
           </div>
         </div>
-      </div>
-
 
-      <!-- 医院活动 -->
-      <div class="dynamic bottom" v-if="item.mode_type == 7">
-        <div class="common_title">
-          <div class="one"></div>
-          <div class="dynamicTxt">{{item.title}}</div>
-          <div class="more" @click="Activitiesmore(item.id,item.user_org_id)">
-            <p>
-              查看更多
-              <i class="iconfont">&#xe632;</i>
-            </p>
-          </div>
-        </div>
-        <div class="content" @click="Activitiesmore(item.id,item.user_org_id)">
-          <div class="contentOne" v-for="it in Activitieslist" :key="it.id">
-            <div class="img">
-              <img :src="it.poster_photo" style="widht:100%;height:100%" alt />
+        <!-- 医院活动 -->
+        <div class="dynamic bottom" v-if="item.mode_type == 7">
+          <div class="common_title">
+            <div class="one"></div>
+            <div class="dynamicTxt">{{item.title}}</div>
+            <div class="more" @click="Activitiesmore(item.id,item.user_org_id)">
+              <p>
+                查看更多
+                <i class="iconfont">&#xe632;</i>
+              </p>
             </div>
-            <div class="detail">
-              <p class="detailTitle">{{it.title}}</p>
-              <!-- <div class="detailBox">
+          </div>
+          <div class="content">
+            <div class="contentOne" v-for="it in Activitieslist" :key="it.id">
+              <div class="img">
+                <img :src="it.poster_photo" style="widht:100%;height:100%" alt />
+              </div>
+              <div class="detail">
+                <p class="detailTitle">{{it.title}}</p>
+                <!-- <div class="detailBox">
                 <div class="activityTime">
                   <p>
                     7月28日 08:30开始
                 <div class="people">
                   <p>100人已报名</p>
                 </div>
-              </div> -->
+                </div>-->
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-       </div>
     </div>
     <!-- tab切换 -->
     <div class="tabs">
 
 <script>
 import Swiper from "swiper";
-import { getHospitaldata,getArticlelist,getActivities,getDefalutNavigationData } from '@/api/micro/micro'
+import {
+  getHospitaldata,
+  getArticlelist,
+  getActivities,
+  getDefalutNavigationData
+} from "@/api/micro/micro";
 export default {
   data() {
     return {
       bannerList: [],
-      patientModels:[],
-      Articlelist:[],
-      navigationdata:[],
+      patientModels: [],
+      Articlelist: [],
+      navigationdata: []
     };
   },
   methods: {
         slidesPerView: 2
       });
     },
-    getHospitaldata(orgid){
-      getHospitaldata(orgid).then(response=>{
-         if(response.data.state == 1){            
-             this.patientModels = response.data.data.patientModels;
-             console.log("数据是什么",this.patientModels)
-         }
-      })
+    getHospitaldata(orgid) {
+      getHospitaldata(orgid).then(response => {
+        if (response.data.state == 1) {
+          this.patientModels = response.data.data.patientModels;
+          console.log("数据是什么", this.patientModels);
+        }
+      });
+    },
+    getArticlelist(orgid) {
+      getArticlelist(orgid, this.Articlelist).then(response => {
+        if (response.data.state == 1) {
+          var articlelist = response.data.data.articlelists;
+          this.Articlelist = response.data.data.articlelists;
+          console.log("文章列表", this.Articlelist);
+        }
+      });
     },
-      getArticlelist(orgid){
-          getArticlelist(orgid,this.Articlelist).then(response=>{
-           if(response.data.state ==1){
-            var articlelist =  response.data.data.articlelists;
-             this.Articlelist =  response.data.data.articlelists;
-             console.log("文章列表",this.Articlelist);
-           } 
-        })
-       }, 
-      getActivities(orgid){
-        getActivities(orgid,this.Activitieslist).then(response=>{
-        if(response.data.state ==1){
-         var activity =   response.data.data.activity;
-         this.Activitieslist = response.data.data.activity;
-         console.log("活动列表",activity);
-         console.log(this.Activitieslist)
+    getActivities(orgid) {
+      getActivities(orgid, this.Activitieslist).then(response => {
+        if (response.data.state == 1) {
+          var activity = response.data.data.activity;
+          this.Activitieslist = response.data.data.activity;
+          console.log("活动列表", activity);
+          console.log(this.Activitieslist);
         }
-       })
-      },
-      hispitalmore(id,orgid){
-         this.$router.push({
-              path:'/hospitalIntroduction',
-              query:{
-                id:id,
-                orgid,orgid,
-              }
-         })
-      },
+      });
+    },
+    hispitalmore(id, orgid) {
+      this.$router.push({
+        path: "/hospitalIntroduction",
+        query: {
+          id: id,
+          orgid,
+          orgid
+        }
+      });
+    },
 
-      officemore(id,orgid){
-        this.$router.push({
-              path:'/officeIntroduction',
-              query:{
-                id:id,
-                orgid,orgid,
-              }
-         })
-      },
-      docmore(id,orgid){
-         this.$router.push({
-              path:'/medicalTeam',
-              query:{
-                id:id,
-                orgid,orgid,
-              }
-         })
-      },
-      articlemore(id,orgid){
-         this.$router.push({
-              path:'/news',
-              query:{
-                id:id,
-                orgid,orgid,
-              }
-         })
-      },
-      Activitiesmore(id,orgid){
-          this.$router.push({
-           path:'/activity',
-           query:{
-             id:id,
-             orgid,orgid,
-           }
-         }) 
-      },
-      getDefalutNavigationData(orgid){
-          getDefalutNavigationData(orgid).then(response=>{
-             if(response.data.state == 1){
-               var navigation =  response.data.data.navigation;
-              //  console.log("navigation是什么",navigation)
-               this.navigationdata = navigation; 
-             }
-           })
-      }
+    officemore(id, orgid) {
+      this.$router.push({
+        path: "/officeIntroduction",
+        query: {
+          id: id,
+          orgid,
+          orgid
+        }
+      });
+    },
+    docmore(id, orgid) {
+      this.$router.push({
+        path: "/medicalTeam",
+        query: {
+          id: id,
+          orgid,
+          orgid
+        }
+      });
+    },
+    articlemore(id, orgid) {
+      this.$router.push({
+        path: "/news",
+        query: {
+          id: id,
+          orgid,
+          orgid
+        }
+      });
+    },
+    Activitiesmore(id, orgid) {
+      this.$router.push({
+        path: "/activity",
+        query: {
+          id: id,
+          orgid,
+          orgid
+        }
+      });
+    },
+    getDefalutNavigationData(orgid) {
+      getDefalutNavigationData(orgid).then(response => {
+        if (response.data.state == 1) {
+          var navigation = response.data.data.navigation;
+          console.log("navigation是什么", navigation);
+          this.navigationdata = navigation;
+        }
+      });
+    }
   },
-  created(){
-     const orgid = this.$route.query.orgid;
-     console.log("机构id是",orgid);
-     this.getHospitaldata(orgid); 
-     this.getArticlelist(orgid);
-     this.getActivities(orgid);
-      this.getDefalutNavigationData(orgid);
+  created() {
+    const orgid = this.$route.query.orgid;
+    console.log("机构id是", orgid);
+    this.getHospitaldata(orgid);
+    this.getArticlelist(orgid);
+    this.getActivities(orgid);
+    this.getDefalutNavigationData(orgid);
   },
   mounted() {
     this.initSwiper();
   },
 
-
   updated() {
     this.initSwiper();
+    this.$previewRefresh();
   }
-
 };
 </script>
 
   width: 100px;
   height: 100px;
 }
-.imgtwo{
+.imgtwo {
   width: 100%;
-  height: 100%
+  height: 100%;
 }
 .btnList {
   display: flex;
       font-size: 15px;
       margin-top: 0.5rem;
       width: 12.6875rem;
-      height: 1.0rem;
+      height: 1rem;
+      line-height: 1rem;
       font-size: 0.9375rem;
       font-weight: 600;
       color: rgba(7, 18, 40, 1);
       overflow: hidden;
       text-overflow: ellipsis;
-       display: -webkit-box;
+      display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
     }
     .detailMessage {
       margin-top: 0.25rem;
       width: 13.25rem;
-      height: 3.4rem;
+      height: 3.625rem;
       font-size: 0.75rem;
       font-weight: 400;
       color: rgba(155, 155, 155, 1);
       line-height: 1.125rem;
-       overflow: hidden;
-       text-overflow: ellipsis;
-       display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
-      //  border: solid 1px red;
+      // border: solid 1px red;
     }
-     // border: solid 1px red;
   }
- 
+  // border: solid 1px red;
 }
 .common {
   margin-top: 1.875rem;
     margin: auto;
     margin-top: 1.25rem;
     width: 20.875rem;
-    height: 16rem;
+    height: 20.3125rem;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
     border-radius: 16px;
     padding: 1.125rem 1.3125rem 1.3125rem 1.3125rem;
-     overflow: hidden;
+    overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 8;
-    -webkit-box-orient: vertical;
-    // border: solid 1px red;
-
   }
   .commonImg {
     width: 18.4375rem;
     color: rgba(60, 60, 60, 1);
     line-height: 1.375rem;
     // border: solid 1px red;
-    overflow: hidden;
-    text-overflow: ellipsis;
+
     display: -webkit-box;
     -webkit-line-clamp: 8;
     -webkit-box-orient: vertical;