<template>
    <div>
     <div class="scroll">
         <div class="swiper-container swiper-no-swiping swiperone">
             <div class="swiper-wrapper">
                 <div class="swiper-slide">      
                   <div v-for="item in this.patientModels" :key="item.id" v-show="modelshow" class="bugone">                    
                      <!-- 轮播图 -->
                       <div class="modeone" v-if="item.mode_type == 1">
                          <mt-swipe :auto="2000" class="swipertwo">
                          <mt-swipe-item v-for="it in item.PatientEditpiclink" :key="it.id">
                            <a :href="it.linkaddress.length > 0 ? it.linkaddress: 'javascript:;' " style="width:100%;height:230px">
                             <img :src="it.images" style="width:100%;height:230px">
                             </a>
                           </mt-swipe-item>
                         </mt-swipe>  
                         <div class="box"></div>                                                           
                       </div> 
                       <!-- 医院介绍 -->
                       <div class="modetwo" v-if="item.mode_type == 2">
                          <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;">
                          <div class="kefont"><span >{{item.title}}</span></div>   
                         <!-- <div class="more" @click="hispitalmore(item.id,item.user_org_id)">查看更多</div> -->
                          <!-- <div class="logo"><img src="static\images\u216.png"></div>   -->
                         <div class="hoscontent" @click="hispitalmore(item.id,item.user_org_id)">
                           <span v-html="item.Hospitals.introduction" id="content" ></span>
                          </div>   
                           <div class="box"></div>                                                       
                       </div>                   
                    <!-- 科室介绍 -->
                    <div v-if="item.mode_type == 3" class="modethree">   
                       <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;">
                       <div class="kefont"><span >{{item.title}}</span></div>   
                       <!-- <div class="more" @click="officemore(item.id,item.user_org_id)">查看更多</div> -->
                       <!-- <div class="logo"><img src="static\images\u216.png"></div>   -->
                       <div class="xcontent" @click="officemore(item.id,item.user_org_id)">
                          <span  v-html="item.Offices.introduction" id="ycontent"></span>
                       </div>
                       <div class="box"></div>
                   </div> 
                    
                      <!-- 名医介绍 -->
                     <div v-if="item.mode_type == 4" class="modefour">
                       <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;">
                         <div class="kefont"  @click="docmore(item.id,item.user_org_id)"><span >{{item.title}}</span></div> 
                           <!-- <div class="more" @click="docmore(item.id,item.user_org_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"  @click="docClick(doc.id,doc.user_org_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 class="box"></div>
                        </div>

                        <!-- 科室环境 -->
                       <div v-if="item.mode_type == 5" class="modefive">
                            <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;"> 
                            <div class="kefont" @click="kemore(item.id,item.user_org_id)"><span >{{item.title}}</span></div> 
                            <!-- <div class="more" @click="kemore(item.id,item.user_org_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="wrappert">
                                    <div class="swiper-slide"  v-for="itms in item.Enviroimages" :key="itms.id">
                                      <viewer>
                                      <img :src="itms.enviroimages" style="width:150px;height:140px;border-radius:5px"/>
                                      </viewer>
                                     </div>
                                </div>
                              </div>
                            </div>   
                            <div class="box"></div>                       
                       </div>

                     <!--文章列表 -->
                        <div v-if="item.mode_type == 6" class="modesix">
                              <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;">
                              <div class="kefont" @click="articlemore(item.id,item.user_org_id)"><span>{{item.title}}</span></div>
                              <!-- <div class="more" @click="articlemore(item.id,item.user_org_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"  @click="clickTitle(it.id,it.user_org_id)">
                                  <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 class="box"></div> 
                       </div>

                          <!-- 活动列表 -->
                           <div v-if="item.mode_type == 7" class="modeseven">
                             <img src="static\images\u.png" style="width:5px;height:25px;margin-left:10px;">
                             <div class="kefont" @click="Activitiesmore(item.id,item.user_org_id)"><span>{{item.title}}</span></div>
                             <!-- <div class="more" @click="Activitiesmore(item.id,item.user_org_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"  @click="clickActiles(it.id,it.user_org_id)">
                                  <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 class="box"></div> 
                           </div>

                             <!-- 魔方导航 -->
                               <div v-if="item.mode_type== 8" class="modeeight">  
                                 <div class="block" v-for="it in item.Editmargin" :key="it.id" @click="NavigationClick(it.margtitle,it.marginaddress,it.user_org_id)">
                                    <div class="macimg">
                                      <img :src="it.margimage" >
                                    </div>
                                    <div id="macimgtwo">
                                       <!-- <span>{{it.margtitle}}</span> -->
                                       <p>{{it.margtitle}}</p>
                                    </div>
                                  </div>  
                                  <div class="boxtwo"></div>                                                                                             
                              </div>     
                   </div>                                                                                    
                </div> 
             </div>
         </div>
     </div>
       <div class="scroll" v-show="defalutshow">暂无数据</div>
     
  

         <!--科室环境详情  -->
            <div class="scroll" v-show="OfficeEnviromentShow" id="targetfour">
              <div class="swiperimages">                            
              <div class="swiper-container swiperfour" >
                 <div class="swiper-wrapper" id="wrappertwo" >
                     <div class="swiper-slide "  v-for="it in keEnvironmentImages" :key="it.id">
                        <viewer>
                        <img :src="it.enviroimages" style="width:150px;height:140px;border-radius:5px;"/>
                        </viewer>
                     </div>
                 </div>
             </div>                          
           </div>
          </div>

            

      

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

      <!-- 回到顶部 -->
      <div class="reindex" @click="returntop()" v-show="showtop">
         <div class="reindexone">
           <img src="static/images/u378.png">
         </div>
           <div class="reindextwo">
            <span>顶部</span>
          </div>
      </div>

      <div class="button">
          <div class="buttonone" v-for="item in this.navigationdata" :key="item.id">
             <img :src="item.navimages" style="width:30px; height:30px" @click="callPhone(item.navtitle,item.navaddress)">
             <span>{{item.navtitle}}</span>
          </div>
      </div>
    </div> 
</template>

<script>
     import Swiper from "swiper";
     import Vue from 'vue';
     import { Swipe, SwipeItem } from 'mint-ui';
     import 'mint-ui/lib/style.css'
     import {uParseTime} from "@/utils/tools";
     Vue.component(Swipe.name, Swipe);
     Vue.component(SwipeItem.name, SwipeItem);
     import { getHospitaldata,getArticlelist,getActivities,getDefalutNavigationData,GetRotationLinkAddress} from '@/api/micro/micro'
import { link } from 'fs';
    export default {
        name: "micro",
        data(){
            return{
              patientModels:[],
              hospitalform:[], 
              officeform:[],
              editdocfrom:[],
              keEnvironmentImages:[],
              show:true,
              hosshow:false, 
              showindex:false,
              scrollTop: 0,
              timer: null,
              showtop:false,
              keshow:false,
              docshow:false,
              OfficeEnviromentShow:false,
              ArticlelistShow:false,
              ActivitieslistShow:false,
              navigationdata:[],
              contactShow:false,
              modelshow:true,
              defalutshow:false,
              singleDoctorshow:false,
              singleArticleshow:false,
              singleActiveshow:false,
              activitys:{},
              articles:{},
              doctors:{},
            }
        },
        methods:{
           staffCreateTime(time) {
             console.log("time是多少",time)
             return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");       
            },
          getHospitaldata(orgid){
           getHospitaldata(orgid).then(response=>{
                if(response.data.state == 1){            
                 this.patientModels = response.data.data.patientModels;
                 console.log("数据是什么",this.patientModels)
                }
           })
         },
        getlimitArticlelist(orgid){
           getlimitArticlelist(orgid).then(response=>{

           })
        },

        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)
        }
       })
      },
       
       hispitalmore(id,orgid){
          this.$router.push({
              path:'/hospital',
              query:{
                id:id,
                orgid,orgid,
              }
          })
       },

       officemore(id,orgid){
         this.$router.push({
           path:'/office',
           query:{
             id:id,
             orgid,orgid,
           }
         })
       },

       docmore(id,orgid){
         this.$router.push({
           path:'/doctor',
           query:
           {
             id:id,
             orgid,orgid, 
           }
         })
       },
    
    // 查看科室环境详情
    kemore(id,orgid){
      kemore(id,orgid).then(response=>{
        if(response.data.state == 1 ){
          var offenvironment =  response.data.data.offenvironment;
          this.keEnvironmentImages =  offenvironment;
          console.log("科室环境详情页",offenvironment)
          this.modelshow = false;
          this.OfficeEnviromentShow = true;
          this.showindex = true;
          this.showtop = true;  
        }
      })
    },
      articlemore(id,orgid){
          this.$router.push({
           path:'/articlelist',
           query:
           {
             id:id,
             orgid,orgid, 
           }
         })
      },
        
      Activitiesmore(id,orgid){
         this.$router.push({
           path:'/activitylist',
           query:{
             id:id,
             orgid,orgid,
           }
         })
      },  
      callPhone(title,address){
        if(title == "首页"){
          this.modelshow = true
          this.contactShow = false;
          this.keshow = false;
          this.hosshow = false;
          this.docshow = false;
          this.ActivitieslistShow = false;
          this.ArticlelistShow = false;
          this.OfficeEnviromentShow = false;
          this.singleDoctorshow = false;
          this.singleArticleshow = false;
          this.singleActiveshow = false;
          this.showindex = false;    
          this.showtop = false;  
        }

        if(title == "联系我们"){  
            this.singleDoctorshow = false;
            this.singleArticleshow = false;
            this.singleActiveshow = false;
            this.ActivitieslistShow = false;
            this.ArticlelistShow = false;
            this.keshow = false;
            this.hosshow = false;
            this.docshow = false;
            this.modelshow = false;
           this.contactShow = true;
           this.getOrderModel(this.$route.query.orgid);
         
        }
        if(title == "在线客服"){
           window.location.href = 'tel://'+address+'';
        }
        
        if(title == "微商城"){
            window.location.href = address;
        }
        
      },

      clickTitle(id,orgid){
          this.modelshow = false;
          this.singleArticleshow = true;
          this.showindex = true;    
          this.showtop = true;  
         singleArticleInfo(id,orgid).then(response=>{
             if(response.data.state == 1){
                   var articles =  response.data.data.articles;
                   this.articles = articles;
               }
         })
         
      },

      clickActiles(id,orgid){
         this.modelshow = false;
         this.singleActiveshow = true;
         this.showindex = true;    
         this.showtop = true;  
        singleActivitInfo(id,orgid).then(response=>{
           if(response.data.state ==1){
                 var activitys = response.data.data.activity;
                this.activitys = activitys;
                console.log("activitys",activitys)
            }
        })
      },

        returnIndex(){
             this.defalutshow = false;
             this.modelshow = true;
             this.hosshow = false;
             this.showindex = false;
             this.showtop = false;
             this.keshow = false;
             this.docshow = false;
             this.OfficeEnviromentShow = false;
             this.ArticlelistShow = false;
             this.ActivitieslistShow = false;
             this.singleDoctorshow = false;
             this.singleArticleshow = false;
             this.singleActiveshow = false;
         },  
        returntop(){
          document.documentElement.scrollTop = 0
        },
  
         getDefalutNavigationData(orgid){
           getDefalutNavigationData(orgid).then(response=>{
             if(response.data.state == 1){
               var navigation =  response.data.data.navigation;
               console.log("navigation是什么",navigation)
               this.navigationdata = navigation;
               
             }
           })
         },
          getOrderModel(orgid){
              this.$router.push({
                path:"/contactus",
                query:{
                  orgid:orgid,
                }
              }) 
          },
          // getOrderModel(orgid){
          //    getOrderModel(orgid).then(response=>{
          //        if(response.data.state == 1){
          //         var ordmodel = response.data.data.ordmodel;
          //         this.ordmodel = response.data.data.ordmodel;
                  
          //        }
          //    })
          //  },
       

          NavigationClick(title,address,orgid){
             if(title == "医院介绍" && address == ""){
              this.modelshow = false;
              this.defalutshow = true;
              this.showindex = true;
              this.showtop = true;
           }
           if(title == "医院介绍" && address != ""){
              this.modelshow = false;
              this.hosshow = true
              this.showtop = true;
              this.showindex = true;
              var id =  parseInt(address)
              this.hispitalmore(id,orgid)
         }
         if(title == "医院介绍" && address.length >=10){
            window.location.href = address;
           }
          
          if(title == "医护团队" && address == ""){
               this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;           
         }

         if(title == "医护团队" && address !=""){
            this.modelshow = false;
            this.docshow = true;
            this.showtop = true;
            this.showindex = true;
            var id =  parseInt(address)
            this.docmore(id,orgid)
         }

         if(title =="医护团队" && address.length >=10){
            window.location.href = address;
         }
           if(title == "科室介绍" && address == ""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;     
           }
            
           if(title =="科室介绍" && address != ""){
               this.modelshow = false;
               this.keshow = true;
               this.showtop = true;
               this.showindex = true;
              var id =  parseInt(address)
              this.officemore(id,orgid)
            } 

            if(title =="科室介绍" && address.length>=10){
               window.location.href = address;
            }

            if(title == "医院活动" && address ==""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;   
            }

            if(title == "医院环境" && address == ""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;   
            }

            if(title=="医院环境" && address !=""){
               this.modelshow = false;
               this.OfficeEnviromentShow = true;
                this.showtop = true;
               this.showindex = true;
               var id =  parseInt(address)
               this.kemore(id,orgid)
            }

            if(title == "咨询服务" && address ==""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;   
            }
            if(title == "加入会员" && address ==""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;   
            }

            if(title == "联系我们" && address ==""){
                this.modelshow = false;
               this.defalutshow = true;
               this.showtop = true;
              this.showindex = true;   
            }
           },

           docClick(id,orgid){
              this.modelshow = false;
              this.singleDoctorshow = true;
              this.showtop = true;
              this.showindex = true;   
              singleDoctorInfo(id,orgid).then(response=>{
                 if(response.data.state ==1){
                 var editdoctor = response.data.data.editdoctor;
                 console.log("editdoctor",editdoctor)
                 this.doctors = editdoctor;
                }
              })
           },

           singleDoctorInfo(id,orgid){
              this.docshow = false;
              this.singleDoctorshow = true;
             singleDoctorInfo(id,orgid).then(response=>{
               if(response.data.state ==1){
                 var editdoctor =  response.data.data.editdoctor;
                 this.doctors = editdoctor;
                 console.log("editdoctor",editdoctor)
               }
             })
           },

           singleArticleInfo(id,orgid){
              this.ArticlelistShow = false;
              this.singleArticleshow = true;
             singleArticleInfo(id,orgid).then(response=>{
                 if(response.data.state == 1){
                   var articles =  response.data.data.articles;
                   this.articles = articles;
                 }
             })
           },

           singleActivitInfo(id,orgid){
              this.ActivitieslistShow = false;
              this.singleActiveshow = true;
             singleActivitInfo(id,orgid).then(response=>{
                if(response.data.state ==1){
                  var activitys = response.data.data.activity;
                  this.activitys = activitys;
                  console.log("activitys",activitys)
                }
             })
           },

           rotationlink(linkid,orgid){
              GetRotationLinkAddress(linkid,orgid).then(response=>{
                  if(response.data.state == 1){
                     var linkaddress =  response.data.data.linkaddress;
                     console.log("linkaddres是什么",linkaddress)
                     window.location.href = linkaddress.defineaddress;
                  }
              })
           },
        },
       created(){
           const orgid = this.$route.query.orgid;
           console.log("机构id是",orgid)
           this.getHospitaldata(orgid); 
           this.getArticlelist(orgid);
           this.getActivities(orgid);
           this.getDefalutNavigationData(orgid);
        
        },
      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';
        }
     },

       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 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,
            },
        });
       },
    }
</script>

<style scoped>

    .swiper-slide{
      margin-bottom: 60px;
     }
    .scroll{
        width: 100%;
        height: 100%;
        /* border: solid 1px red; */
        position: absolute;
    }
    .modeone{
        width: 100%;
        height: 220px;
        margin-bottom: 10px;
        /* border:solid 1px red; */
    }
    .button{
       position: fixed;
       width: 100%;
       height: 60px; 
       padding: 5px 4%;
       /* border: solid 1px red; */
       background-color:white;
       z-index: 999999;
       bottom: 0px;  
       display: flex;
       border-top:solid 1px #efefef;
    }
    .buttonone{
        /* position: absolute; */
        flex: 1;
        height: 30px;
        text-align: center;
        /* border: solid 1px red; */
    }

    .buttonone span {
      display: block;
      color: #909090;
    }

    .buttontwo{
        position: absolute;
        width: 30px;
        height: 30px;
        /* border: solid 1px red; */
        margin-top: 5px;
        margin-left: 120px;
    }

    .buttonthree{
        position: absolute;
        width: 30px;
        height: 30px;
        /* border: solid 1px red; */
        margin-top: 5px;
        margin-left: 190px;  
    }

    .buttonfour{
        position: absolute;
        width: 30px;
        height: 30px;
        /* border: solid 1px red; */
        margin-top: 5px;
        margin-left: 270px;  
    }

    .box{
      width: 100%;
      height: 8px;
      background-color: rgba(204, 204, 204, 1);  
    }
    .boxtwo{
      width: 100%;
      height: 8px;
      background-color: rgba(204, 204, 204, 1); 
    }
     .modetwo{
       position: relative;
       width: 100%;
       height: 100%;
       /* border:solid 1px red; */
    }
   .kefont{
     font-size: 14px;
     color: #4d4a4a;
     margin-left: 18px;
     margin-top: -25px;
     font-weight: bold;
     line-height: 25px;
  }
.more{
  position: absolute;
  font-size: 14px;
  color:black;
  margin-left: 290px;
  margin-top: -14px;
}
.logo{
   position: absolute;
   margin-left: 350px;
   margin-top: -16px;
}
 .hoscontent{
    height:auto!important; 
    min-height:200px;
    font-size: 14px;
    text-overflow: ellipsis;
     display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical; 
    padding: 10px 3% 10px 3%;
    /* border: solid 1px red; */
    overflow: hidden;
  }
  
    .xcontent{
      height:auto!important; 
      min-height:200px;
      padding: 10px 3% 10px 3%;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical; 
    }

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

  .modethree{
     width: 100%;
     overflow: hidden;
     position: relative;
     /* border: solid 1px red; */
    }
    .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;
   }
    .modefive{
        position: relative;
        width:100%;
        height: 100%;
        /* border: solid 1px red; */
   }
   .swiperimages{
     width: 100%;
     height: 150px;
     /* border: solid 1px red; */
     margin-left: 10px;
     margin-top: 10px;
   }

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

 
    .actcomments{
      width: 190px;
      height: 20px;
      /* border:solid 1px red; */
      margin-left: 5px;
      margin-top: 2px;
      font-size: 14px;
    }
   
   .modeseven{
      position: relative;
      width:100%;
      min-height: 200px;
      margin-bottom: 5px;
      overflow: hidden;
    }

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

    .modeeight{
      position: relative;
      width: 100%;
      height:100%;
      margin-top:20px;
      /* border:solid 1px red;  */
    }

      .block{
      width: 25%;
      display: inline-block;
      /* border:solid 1px blue; */
      height: 80px;
      vertical-align: top;
    }
    .macimg{
      width: 100%;
      height: 50px;
      /* border:solid 1px red; */
      margin-bottom: 5px;
      text-align: center;
    }
    .macimg img{
      width: 50px;
      height: 50px;
    }

    #macimgtwo{
      width:100%;
      height:18px;
      font-size:14px;
       /* overflow:hidden; */
       /* border: solid 1px red; */
      text-align: center;
    }

    .showindex{
        width: 50px;
        height: 50px;
        border: solid 0px white; 
        position: fixed;
        margin-left: 325px;
        margin-top: 300px;
        z-index: 99999;
    }

   .rebackone{
     position: absolute;
     width:20px;
     height: 20px;
     /* border: solid 1px red; */
     left: 13px;
     top:5px;
    }

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

   .reindex{
     position: fixed;
     width: 50px;
     height: 50px;
     /* border: solid 1px red; */
     margin-left: 325px;
     margin-top: 350px;
    z-index: 99999;
  }

   .reindexone{
     position: absolute;
     width:20px;
     height: 20px;
     /* border: solid 1px red; */
    left:13px;
    top:5px;
  }

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

  }

   .docone{
       width:310px;
       height:100px;
       /* border: solid red 1px; */
       margin-left: 5px;
      overflow: hidden;
     }

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

     .docthree{
       width: 50px;
       height: 20px;
      /* border:solid red 1px; */
       margin-left: 100px;
       margin-top: -75px;

     }
     .docfour{
       font-size: 14px;
     }

     .docfive{
       width:200px;
       height: 50px;
       /* border:solid 1px red; */
       margin-left: 100px;
       margin-top: 5px;
     }
     .docsix{
       font-size: 14px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical
     }

    .xxcontent{
      overflow: hidden;
      text-overflow: ellipsis;
       display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }
   .contractmodeone{
     width: 100%;
     height: 200px;
     /* border: solid 1px red */
   }
     #wrappertwo{
     width: 40%;
   }
   #wrappert{
       width: 43%;
   }

  .oldmodetwo{
    width: 300px;
    height: 100%;
    /* border: solid 1px red; */
    font-size: 14px;
    margin-bottom: 8px;
  }

    .oldmodeone{
        width: 318px;
        min-height: 22px;
        /* border: solid 1px red; */
        margin-bottom: 8px;       
    }

    .oldmodesix{
       position: absolute;
       width: 50px;
       min-height: 20px;
       /* border: solid 1px blue; */
       margin-left: 200px;
       margin-top: -20px;
    }

    .oldmodefive{
      width: 250px;
      min-height: 20px;
      /* border: solid 1px red; */
    }

  .oldmodefour{
    width: 300px;
    height: 30px;
    color: black;
    /* border:solid 1px red; */
    font-size: 14px;
    margin-bottom: 8px;
  }

   .oldmodethree{
    width: 300px;
    height: 100%;
    color: black;
    /* border:solid 1px red; */
    font-size: 14px;
    margin-bottom: 8px;
  }

  .activityImages{
    width: 100%;
    height: 200px;
    /* border:solid 1px red; */
  }

  .activitycontent{
    width: 100%;
    min-height: 20px;
    /* border: solid 1px red; */
    font-size: 14px;
  }

  .artictitle{
    /* position: absolute; */
    min-width: 300px;
    min-height: 20px;
    /* border:solid 1px red; */
    text-align: center;
  }
  
   .articcontent{
     /* position: relative; */
     width: 100%;
     min-height: 200px;
     /* border:solid 1px red; */
   }

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

    .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: 15px;
      /* border:solid 1px red; */
      margin-left: 5px;
      margin-top: 10px;
      font-size: 14px;
      overflow: hidden;
       text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
   
   .bugone{
     border:solid 1px blue;
   }
</style>
