<template>
  <div>
    <div class="scroll">
       <div class="swiper-container swiper-no-swiping swiperone">
          <div class="swiper-wrapper" id="wrapper1">
             <div v-for="item in this.patientModels" :key="item.id">
                 <div class="divone">
                   <!-- 轮播图 -->
                   <div class="modeone" v-if="item.mode_type == 1" v-show="show">
                     <mt-swipe :auto="2000" class="swipertwo">
                         <mt-swipe-item v-for="it in item.images" :key="it.id">
                            <img :src="it" style="width:100%;height:230px" >
                          </mt-swipe-item>
                     </mt-swipe>       
                   </div>
                   <!-- 医院介绍 -->
                   <div class="modetwo" v-if="item.mode_type == 2" v-show="show">
                      <img src="static\images\u.png" style="width:5px;height:20px;">
                        <div class="kefont"><span >{{item.title}}</span></div>   
                        <div class="more" @click="hispitalmore(item.id)">查看更多</div>
                        <div class="logo"><img src="static\images\u216.png"></div>  
                        <div class="hoscontent">
                         <span v-html="item.Hospitals.introduction" id="content"></span>
                       </div>
                    </div> 

                    <!-- 科室介绍 -->
                    <div v-if="item.mode_type == 3" class="modethree" v-show="show">
                       <img src="static\images\u.png" style="width:5px;height:20px;">
                       <div class="kefont"><span >{{item.title}}</span></div>   
                       <div class="more" @click="officemore(item.id)">查看更多</div>
                       <div class="logo"><img src="static\images\u216.png"></div>  
                       <div class="xcontent">
                          <span  v-html="item.Offices.introduction" id="ycontent"></span>
                       </div>
                   </div> 

                   <!-- 名医介绍 -->
                     <div v-if="item.mode_type == 4" class="modefour" v-show="show">
                       <img src="static\images\u.png" style="width:5px;height:20px;">
                         <div class="kefont"><span >{{item.title}}</span></div> 
                           <div class="more" @click="docmore(item.id)">查看更多</div>
                              <div class="logo"><img src="static\images\u216.png"></div>
                                <div class="docborde">
                                 <div class="docheart" v-for="doc in item.Editdoctor" :key="doc.id">
                                   <div class="docimage">
                                    <img :src="doc.dochead" style="height:80px;width:80px">
                                   </div>
                                 <div class="doctitle"><span class="docnamefont">{{doc.doc_name}}</span></div>
                                 <div class="doccontent"><span class="xxcontent" v-html="doc.docintroduction"></span></div>
                                </div>
                            </div>
                         </div>
                         
                    
                    <!-- 科室环境 -->
                       <div v-if="item.mode_type == 5" class="modefive" v-show="show">
                            <img src="static\images\u.png" style="width:5px;height:20px;"> 
                            <div class="kefont"><span >{{item.title}}</span></div> 
                            <div class="more" @click="kemore(item.id)">查看更多</div>
                            <div class="logo"><img src="static\images\u216.png"></div>
                            <div class="swiperimages">
                               <div class="swiper-container swiperthree" >
                                 <div class="swiper-wrapper" id="wrappertwo" >
                                    <div class="swiper-slide"  v-for="it in item.Enviroimages" :key="it.id">
                                      <img :src="it.enviroimages" style="width:150px;height:140px;border-radius:5px;"/>
                                     </div>
                                </div>
                              </div>
                            </div>                         
                           </div>

                       <!--文章列表 -->
                        <div v-if="item.mode_type == 6" class="modesix" v-show="show">
                              <img src="static\images\u.png" style="width:5px;height:20px">
                              <div class="kefont"><span>{{item.title}}</span></div>
                              <div class="more" @click="articlemore(item.id)">查看更多</div>
                              <div class="logo"><img src="static\images\u216.png"></div>
                              <div class="actilist" v-for="it in Articlelist" :key="it.id">
                               <div class="acthead">
                                   <img :src="it.imgs" style="width:80px;height:80px">
                               </div>
                               <div class="actcontent">
                                  <div class="actname"><span>{{it.title}}</span></div>  
                                  <div class="actcomments">阅读:{{it.real_read_num}}|评论:{{it.comment_num}}|点赞:{{it.star_num}}</div>
                               </div>
                             </div>
                       </div>

                        <!-- 活动列表 -->
                           <div v-if="item.mode_type == 7" class="modeseven" v-show="show">
                             <img src="static\images\u.png" style="width:5px;height:20px;">
                             <div class="kefont"><span>{{item.title}}</span></div>
                             <div class="more" @click="Activitiesmore(item.id)">查看更多</div>
                             <div class="logo"><img src="static\images\u216.png"></div>
                             <div class="actilist" v-for="it in Activitieslist" :key="it.id">
                               <div class="acthead">
                                   <img :src="it.poster_photo" style="width:80px;height:80px">
                               </div>
                               <div class="actcontent">
                                  <div class="actname"><span>{{it.title}}</span></div>  
                                  <div class="actcomments">阅读:{{it.read_num}}|评论:{{it.comment_num}}|点赞:{{it.star_num}}</div>
                                  <div class="progress">
                                     <el-progress :percentage="0"></el-progress>    
                                  </div>
                               </div>
                             </div>
                           </div>

                             <!-- 魔方导航 -->
                               <div v-if="item.mode_type== 8" class="modeeight" v-show="show">  
                                 <div class="block" v-for="it in item.Editmargin" :key="it.id">
                                    <div class="macimg">
                                      <img :src="it.margimage" style="width:100%;height:100%">
                                    </div>
                                    <div id="macimgtwo">
                                       <!-- <span>{{it.margtitle}}</span> -->
                                       <p>{{it.margtitle}}</p>
                                    </div>
                                  </div>                                                                                              
                              </div>     
                    </div>
                 <div class="mtwo" v-show="showtwo"></div>          
             </div>
              <!--医院介绍详情 -->
              <div class="hosdetail" v-show="showone" v-html="hospitalform.introduction" id="target"></div>
              <!--科室介绍详情 -->
              <div class="hosdetail" v-show="showthree" v-html="officeform.introduction"></div>
              <!-- 名医介绍详情 -->
              <div class="hosdetail" v-show="showfour">
                 <div class="docone" v-for="item in this.editdocfrom" :key="item">
                     <div class="doctwo">
                        <img :src="item.dochead" style="width:80px;height:80px">
                     </div>
                     <div class="docthree">
                       <span>{{item.doc_name}}</span>
                     </div>
                     <div class="docfour" v-html="item.docintroduction">
                       
                     </div>
                 </div>
              </div>
              <!-- 科室环境详情 -->
              <div class="hosdetail" v-show="showfive">
                  <div class="swiperimagestwo">
                      <div class="swiper-container swiperfour">
                          <div class="swiper-wrapper" id="wrapperthree">
                              <div class="swiper-slide"  v-for="it in keEnvironmentImages" :key="it.id">
                                  <img :src="it.enviroimages" style="width:150px;height:140px;border-radius:5px;"/>
                               </div>
                          </div>
                       </div> 
                  </div>
              </div>
              <!-- 文章列表详情 -->
              <div class="hosdetail" v-show="showsix">
                 <div class="actlistdetail" v-for="it in Articlelist" :key="it.id">
                    <div class="actimage">
                       <img :src="it.imgs" style="width:80px;height:80px">
                    </div>
                    <div class="actitle">
                       {{it.title}}
                    </div>
                    <div class="acontent">
                      阅读:{{it.real_read_num}}|评论:{{it.comment_num}}|点赞:{{it.star_num}}
                    </div>
                 </div>
              </div>
             
             <!-- 活动列表详情 -->
             <div class="hosdetail" v-show="showseven">
                 <div class="activdetail" v-for="it in Activitieslist" :key="it.id">
                    <div class="actone">
                       <img :src="it.poster_photo" style="width:80px;height:80px">
                    </div>
                    <div class="actwo">
                       {{it.title}}
                    </div>
                    <div class="acthree">
                     <span> 阅读:{{it.read_num}}|评论:{{it.comment_num}}|点赞:{{it.star_num}}</span>
                    </div>
                    <div class="acfour">
                       <el-progress :percentage="0"></el-progress>
                    </div>
                 </div>
             </div>

          </div>
       </div>
    </div>
      <!-- 首页 -->
       <div class="showindex" v-show="showindex" @click="returnIndex()">
          <div class="showimg">
             <img src="/static/images/u373.png">
          </div>
          <div class="showfont">
             <span>首页</span>
          </div>
       </div>

       <div class="returntop" v-show="showtop"  @click="returntop()">
        <div class="showtop">
            <img src="/static/images/u378.png">
        </div>
        <div class="returnfont">
            <span>顶部</span>
        </div>
       </div>
   </div> 
  
</template>

<script>
 import {getHospitaldata,getArticlelist,getActivities,hispitalmore,officemore,docmore,kemore,articlemore,Activitiesmore} from '@/api/micro/micro' 
//import { getHospitaldata, } from '@/api/micro/micro'
import Swiper from "swiper";
import Vue from 'vue';
import { Swipe, SwipeItem } from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
  name: 'qrcode',
  data(){
    return{
      scrollTop: 0,
      timer: null,
      patientModels:[
        {
          images:[],
          macimages:[],
          mactitle:[],
        }
       ],  
      rotatationImages:[],
      keEnvironmentImages:[],
      Articlelist:[],
      marcimages:[],
      show:true,
      showtwo:true,
      showindex:false,
      showone:false,
      showtop:false,
      showthree:false,
      showfour:false,
      showfive:false,
      showsix:false,
      showseven:false,
      hospitalform:[],
      officeform:[],
      editdocfrom:[],
      articlelist:[],
      Activitieslist:[],
    }
  },
  methods: {
       getHospitaldata(){
           getHospitaldata().then(response=>{
                if(response.data.state == 1){
                  var str = [];
                  var images = [];
                  var macimages = [];
                  var mactitle = [];
                 
                 this.patientModels = response.data.data.patientModels;
                 console.log("数据是什么",this.patientModels)
                 for (let index = 0; index < this.patientModels.length; index++) {   
                   if(this.patientModels[index].Rotation.rotation_images!=""){   
                     var strimages =  this.patientModels[index].Rotation.rotation_images;
                     var strimagess =  strimages.split(',')
                     str = strimagess;
                     console.log("strimages",strimages)
                     this.patientModels[index]["images"] = str;
                   }                                                          
                }   
                }
           })
         },

        getArticlelist(){
          getArticlelist(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(){
        getActivities(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){
        hispitalmore(id).then(response=>{
           if(response.data.state ==1){
              var hospital =  response.data.data.hospital;
              this.hospitalform =  response.data.data.hospital;
              this.show = false;
              this.showtwo = false;
              this.showindex = true;
              this.showone = true;
              this.showtop = true;
              this.showthree = false;
              this.showfour = false;
              this.showfive =false;
              this.showsix = false;
              this.showseven = false;
           }
        })
      },

      officemore(id){
        officemore(id).then(response=>{
           if(response.data.state == 1){
             var offices = response.data.data.offices;
            this.officeform = response.data.data.offices; 
            this.show = false;
            this.showtwo = false;
            this.showindex = true;
            this.showthree = true;
            this.showtop = true;
            this.showone = false;
            this.showfour = false;
            this.showfive = false;
            this.showsix = false;
            this.showseven =false;
           }
        })
      },

      docmore(id){
        docmore(id).then(response=>{
          if(response.data.state == 1){
            var editdoctor =  response.data.data.editdoctor;
            this.editdocfrom = editdoctor;
             this.show = false;
             this.showtwo = false;
             this.showindex =true;
             this.showfour = true;
             this.showtop = true;
             this.showone = false;
             this.showthree = false;
             this.showfive = false;
             this.showsix =false;
             this.showseven = false;
          }
        })
      },

      kemore(id){
        kemore(id).then(response=>{
          if(response.data.state == 1){
             var offenvironment =  response.data.data.offenvironment;
            this.keEnvironmentImages =  offenvironment;
            console.log("科室环境详情页",offenvironment) 
            this.show = false;
            this.showtwo = false;
            this.showindex = true;
            this.showfive = true;
            this.showtop = true;
            this.showone= false;
            this.showthree = false;
            this.showfour =false;
            this.showsix =false;
            this.showseven = false;
          }
        })
      },

      articlemore(id){
        articlemore(id).then(response=>{
            if(response.data.state == 1){
                 var articlelist =  response.data.data.articlelists;
                 this.articlelist =  response.data.data.articlelists;
                   this.show = false;
                   this.showtwo = false;
                   this.showindex = true;
                   this.showsix = true;
                   this.showtop = true;
                   this.showone = false;
                   this.showthree = false;
                   this.showfour = false;
                   this.showfive = false;
                   this.showseven = false;
            }
        })
      },
    
      Activitiesmore(id){
        Activitiesmore(id).then(response=>{
          if(response.data.state == 1){
              var activity =  response.data.data.activity;
              this.Activitieslist =  response.data.data.activity;
              console.log("activity",activity)
              this.show = false;
              this.showtwo = false;
              this.showindex = true;
              this.showseven = true;
              this.showtop = true;
              this.showone = false;
              this.showthree = false;
              this.showfour = false;
              this.showfive = false;
              this.showsix = false;
          }
        })
      },

      returnIndex(){
        this.showone = false;
        this.show = true;
        this.showtwo = true;
        this.showindex= false;
        this.showtop = false;
        this.showthree = false;
        this.showfour = false;
        this.showfive = false;
        this.showsix = false;
        this.showseven =false;
      },

      returntop(){
       console.log("target是什么",target)
        this.scrollToTopTimer();
      },

       scrollToTop() {
        this.scrollTop = document.getElementById('target').scrollTop;
      },
      backTop() {
        this.timer = setInterval(()=>{
          this.scrollToTopTimer();
        },20)
      },
      scrollToTopTimer() {
        let scrollTop = this.scrollTop;
        if(scrollTop > 0) {
          scrollTop -= 100
          if(scrollTop <= 0) {
            scrollTop = 0
            clearInterval(this.timer)
          }
        }
        document.getElementById('target').scrollTop = scrollTop
      },
     },
      destroyed () {
         clearInterval(this.timer)
         document.getElementById('target').removeEventListener('scroll', this.scrollToTop)
    },
     created(){
       this.getHospitaldata();
       this.getArticlelist();
       this.getActivities();
     },
       mounted(){
      var swiper = new Swiper('.swiperone', {
          direction: 'vertical',
         slidesPerView: "auto",
         spaceBetween:5,
         loopAdditionalSlides:10,
        centeredSlides: false, // active slide 居中
        observer:true,//动态加载图片
        observeParents:true,
        paginationClickable: true,
        pagination: {
            el: '.swiper-pagination',
           clickable: true,
            },
          });      
          
           var mySwiper = new Swiper('#swipertwos', {
                direction:"horizontal",
                loop: true, // 循环播放,
                spaceBetween:10,
                autoplay:true,
                loopAdditionalSlides:10,
                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
                centeredSlides: true, // active slide 居中
                observer:true,//动态加载图片
                observeParents:false,
                pagination: {
                    el: '.swiper-pagination',
                },
            });
        
         var mySwiper = new Swiper('#swipertwo', {
                autoplay: {
                    disableOnInteraction: false, // 用户操作后，不停止自动切换
                }, // 自动播放
                loop: false, // 循环播放,
                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
                centeredSlides: true, // active slide 居中
                pagination: {
                    el: '.swiper-pagination',
                },
            });

        var MySwiperthree = new Swiper('.swiperthree', {
          direction: 'horizontal',
          slidesPerView: "auto",
          autoplay: true,
          loop:true,
          spaceBetween:5,
          loopAdditionalSlides:10,
          centeredSlides: false, // active slide 居中
          observer:true,//动态加载图片
          observeParents:true,
          paginationClickable: true,
          pagination: {
             el: '.swiper-pagination',
             clickable: true,
            },
        });

         var MySwipertwo = new Swiper('.swiperfour', {
          direction: 'horizontal',
          slidesPerView: "auto",
          autoplay: true,
          loop:true,
          spaceBetween:5,
          loopAdditionalSlides:10,
          centeredSlides: false, // active slide 居中
          observer:true,//动态加载图片
          observeParents:true,
          paginationClickable: true,
          pagination: {
             el: '.swiper-pagination',
             clickable: true,
            },
        });
      document.getElementById('target').addEventListener('scroll', this.scrollToTop);
    },
     updated(){
       let obj = document.getElementById('content');
          
       let imgs =  obj.getElementsByTagName('img');
  
        for(let i=0;i<imgs.length;i++){
          imgs[i].style.width = '332px';
          imgs[i].style.height = '100px';            
        }

        let ycontent = document.getElementById('ycontent');
         
        let ximgs = ycontent.getElementsByTagName('img');
         
        for(let j=0;j<ximgs.length;j++){
          ximgs[j].style.width = '332px';
          ximgs[j].style.height = '100px';
        }
     },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .scroll{
   width: 100%;
   height: 860px;
   overflow-y: auto;
   border: 1px solid white;
  //  margin-left: 30px;
  //  margin-top: 40px;
 }
    .yycontent{
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 6;
     -webkit-box-orient: vertical   
   }

    .zzcontent{
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical   
   }

  ::-webkit-scrollbar{width:0px;}
  ::-webkit-scrollbar-track{background-color:white;}
  ::-webkit-scrollbar-thumb{background-color:white;}
  ::-webkit-scrollbar-thumb:hover {background-color:white}
  ::-webkit-scrollbar-thumb:active {background-color:white}

 .mone{
   width:314px;
   height: 210px;
  //  border: solid 1px blue;
 }
 .mtwo{
   width: 100%;
   height: 8px;
  //  border: solid 1px red;
   background-color: rgba(204, 204, 204, 1);
 }

.modeone{      
   width: 100%;
   height: 210px;
  //  border: solid 1px red
 }
.swipertwos{
  width:100%;
  height: 220px;
//  border:solid 1px red;
}
.modetwo{
  width: 314px;
}
.kefont{
  font-size: 14px;
  color: red;
  margin-left: 8px;
  margin-top: -20px;
}
.more{
  position: absolute;
  font-size: 14px;
  color:black;
  margin-left: 275px;
  margin-top: -14px;
}
.logo{
   position: absolute;
   margin-left: 335px;
   margin-top: -16px;
}
 .hoscontent{
      height:auto!important; 
      min-height:200px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical; 
      margin-top: 5px;
      margin-left: 5px;
  }
  
    .xcontent{
      height:auto!important; 
      min-height:200px;
      margin-top: 5px;
      margin-left: 5px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical; 
    }


 .box{
  width: 314px;
  height: 8px;
  background-color: rgba(204, 204, 204, 1);  
}
  
.rotation{
  width:314px;
  height: 200px;
  // border: solid 1px blue;
}
 .modethree{
  width: 320px;
  overflow: hidden;
  // height: 220px;
  /* border: solid 1px blue;   */
 /* background-color: blue; */
 }
 .modefour{
   width: 320px;
   height: 220px;
 }
  

  .docborde{
     width: 100%;
     height: 200px;
    //  border: solid 1px red; 
     overflow: hidden;
   }

    .docheart{
     width: 310px;
     height: 92px;
    //  border: solid 1px blue; 
    //  background-color: rgba(242, 242, 242, 1);
     margin-top: 5px;
     margin-left: 3px;
   }
   .docimage{
     width: 80px;
     height: 80px;
     margin-left: 10px;
     padding-top: 5px;
   }
   .doctitle{
     width: 50px;
     height: 20px;
     /* border: solid 1px blue; */
     float: right;
     margin-right: 152px;
     margin-top: -75px;
   }

   .doccontent{
     width: 150px;
     height: 50px;
     /* border: solid 1px red; */
     margin-top: -50px;
     margin-left: 108px;
     font-size: 14px;
   }

    .docnamefont{
     font-size: 14px;
   }

   
   .swiperimagestwo{
     width: 100%;
     height: 150px;
    //  border: solid 1px red; 
     margin-top: 0px;
   }

   .divone{
     width:100%;
     height: 210px;
    //  border: solid 1px red;
   }

   .modesix{
      width:320px;
      height: 100%;
      // border: solid 1px red;
      margin-bottom: 5px;
      overflow: hidden;
    }

    .actilist{
      width:300px;
      height: 90px;
      // border:solid 1px red;
      margin-left: 5px;
    }

    .acthead{
      width: 80px;
      height: 80px;
      // border: solid 1px red;
      margin-left: 5px;
      margin-top: 5px;
    }

    .actcontent{
      width: 200px;
      height: 80px;
      // border: solid 1px red;
      margin-left: 90px;
      margin-top: -82px;
    }

     .actname{
      width:190px;
      height: 20px;
      // border:solid 1px red;
      margin-left: 5px;
      margin-top: 10px;
      font-size: 14px;
    }
    .actcomments{
      width: 190px;
      height: 20px;
      // border:solid 1px red;
      margin-left: 5px;
      margin-top: 2px;
      font-size: 14px;
    }

   .modeseven{
      width:320px;
      height: 100%;
      margin-bottom: 5px;
      overflow: hidden;
    }

   .progress{
     width:190px;
     height: 20px;
    //  border:solid 1px red;
     margin-left: 5px;
     margin-top: 2px;
     font-size: 14px;
    }

    .modeeight{
      width: 314px;
      height:100%;
      // border:solid 1px red; 
    }

      .block{
      width: 60px;
      display: inline-block;
      // border:solid 1px blue;
      height: 80px;
      margin-left:10px;
      margin-right: 2px;
      vertical-align: top;
      margin-top: 5px;
    }
    .macimg{
      width: 46px;
      height: 50px;
      // border:solid 1px red;
      margin-top: 2px;
      margin-bottom: 5px;
      margin-left: 4px;
    }
    #macimgtwo{
      width:58px;
      height:18px;
      font-size:14px;
      position:absolute;
      // overflow:hidden;
      // border: solid 1px red;
      text-align: center;
      margin-left: -1px;
    }

     .mac{
       position: absolute;
       width: 300px;
       height: 70px;
      //  border:solid 1px red;
       margin-left: 5px;
    }   
    .mactwo{
      position: absolute;
      width: 60px;
      height: 70px;
      // border: solid 1px red;
      left: 80px;
    }

    .macthree{
      position: absolute;
      width: 60px;
      height: 70px;
      // border: solid 1px red;
      left: 155px;
    }

    .macfour{
      position: absolute;
      width: 60px;
      height: 70px;
      // border: solid 1px red;
      left: 230px;
    }

    .macone{
      position: absolute;
      width: 60px;
      height: 70px;
      // border: solid 1px red;  
      left: 5px;
    }

    .definemac{
      position: absolute;
      width: 300px;
      height: 70px;
      // border: solid 1px red;
      margin-top: 75px;
      margin-left: 5px;
    }
    .definemacone{
      position: absolute;
      width: 60px;
      height: 70px;
      // border:solid 1px red;
      left: 5px;
    }

    .deone{
      width:45px;
      height: 45px;
      // border:solid 1px red;
      margin-left: 8px;
      margin-top: 5px;
    }

    .detwo{
       width:60px;
       height: 20px;
      // border: solid 1px red;
      margin-top: 2px;
      font-size: 14px;
      text-align: center;
      font-size: 14px;
      color: black;
    }

    .picone{
      width: 45px;
      height: 45px;
      // border: solid 1px red;
      margin-left: 8px;
      margin-top: 5px;
    }

    .pictwo{
      width:60px;
      height: 20px;
      // border: solid 1px red;
      margin-top: 2px;
      font-size: 14px;
      text-align: center;
    }

    .showindex{
      position: relative;
      width:50px;
      height: 50px;
      border:solid 1px rgba(255, 255, 255, 1);
      background-color: rgba(255, 255, 255, 1);
      margin-left: 335px;
      margin-top: -450px;
      z-index: 999;     
    }

    
    .returntop{
      position: relative;
      width:50px;
      height: 50px;
      border:solid 1px rgba(255, 255, 255, 1);
      margin-left: 335px;
      margin-top: 10px;
      z-index: 999;
      background-color: rgba(255, 255, 255, 1);
    }

    .showimg{
      position: absolute;
      width: 20px;
      height: 20px;
      // border: 1px solid red;
      margin-left: 15px;
      margin-top: 5px;
    }
    .showtop{
      position: absolute;
      width: 20px;
      height: 20px;
      // border:1px solid red;
      margin-left: 15px;
      margin-top: 5px;
    }

    .returnfont{
      position: absolute;
      width: 40px;
      height: 20px;
      // border:1px solid red;
      margin-left: 10px;
      margin-top: 28px;
      font-size: 14px;
      color: #FF6600;
    }

    .showfont{
      position: absolute;
      width: 30px;
      height: 20px;
      // border: 1px solid red;
      font-size: 14px;
      margin-left: 10px;
      margin-top: 28px;
     color: #FF6600;
    }

    .hosdetail{
      position: absolute;
      width: 100%;
      height: 100%;
      border:solid 1px white;
    }

   .swiperimages{
     width: 100%;
     height: 150px;
    //  border: solid 1px red;
     margin-left: 10px;
     margin-top: 10px;
   }

    .modefive{
         width:320px;
         height: 200px;
         // border: solid 1px red;
       }

   #wrappertwo{
     width: 50%;
     }
    #wrapperthree{
       width: 40%;
       margin-top: 5px;
       z-index: 999;
   }    

   .docone{
    //  position: absolute;
     width:100%;
     height: 100px;
    //  border: solid 1px red;
   }

   .doctwo{
     position: absolute;
     width:80px;
     height: 80px;
    //  border:solid 1px red;
     margin-top: 10px;
     margin-left: 10px;
     font-size: 14px;
   }

   .docthree{
     position: absolute;
     width:50px;
     height: 20px;
    //  border:solid 1px red;
     margin-left: 100px;
     margin-top: 10px;
     font-size: 14px;
   }

   .docfour{
     position: absolute;
     width:200px;
     height: 50px;
    //  border:solid 1px red;
     margin-left: 100px;
     margin-top: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 14px;
   }
   
   .actlistdetail{
     width: 100%;
     height: 100px;
    //  border:solid 1px red;
   }

   .actimage{
     position: absolute;
     width:80px;
     height:80px;
    //  border:solid 1px red;
     margin-left: 10px;
     margin-top: 10px;
   }

   .actitle{
     position: absolute;
     width: 100%;
     height: 20px;
    //  border: 1px red solid;
     margin-left: 100px;
     margin-top: 20px;
   }

   .acontent{
      position: absolute;
      width: 100%;
      height:20px;
      // border: solid 1px red;
      margin-left: 100px;
      margin-top: 50px;
   }

   .activdetail{
     width: 100%;
     height: 100px;
     border:solid 1px white;
   }

   .actone{
     position: absolute;
     width:80px;
     height: 80px;
    //  border: solid 1px red;
     margin-left: 10px;
     margin-top: 10px;
   }
   .actwo{
     position: absolute;
     width:100%;
     height:20px;
    //  border:solid 1px red;
     margin-left: 100px;
     margin-top: 10px;
   }
   .acthree{
     position: absolute;
     width:100%;
     height:20px;
    //  border:solid 1px red;
     margin-left: 100px;
     margin-top: 40px;
   }

   .acfour{
     width:250px;
     height: 20px;
    //  border:solid 1px red;
     margin-left: 100px;
     margin-top: 70px;
   }
   
</style>
