<template>
    <div class="main-body" ref="wrapper" :style="{ height: (wrapperHeight-50) + 'px' }">
           
        
            <section :class="isIntStyle">
                <!--展开收起学习评价-->
                <YqyTopEvaluat  :isShowEvluat="isShowEvluat" v-if="isShowEvluat" :parmData="evaluctObj" v-on:evluatFun="getEluatFun"/>

                <section class="home-header">
                    <div class="home-topMenu">
                        <YqyHomeHeader :msgCount="msgCount" :searchFix="searchFix"  v-on:setAppMsg="goAppMsg"/>
                    </div>
                    <div class="banner-container swiper-container">
                        <div class="swiper-wrapper">
                            <div class="banner-slide swiper-slide" v-for="(item,index) in listSwiper" :key="index">
                               <img :src="item.imageUrl" @click="goLinkByswiper(item)"/>
                            </div>
                 
                        </div> 
                 　　<!--需要焦点按钮时加这段div-->
                        <div class="banner-pagination pagination">
                            <span></span>
                        </div>
                    </div>
                    <!-- <div class="swiper">
                        <mt-swipe :auto="0" :speed="speedSwiper">
                            <mt-swipe-item v-for="(item,index) in listSwiper" :key="index" >
                                <img :src="item.imageUrl" @click="goLinkByswiper(item)"/>
                            </mt-swipe-item>
        
                        </mt-swipe>
                    </div> -->
                </section>
                <section class="home-body">
                    <YqyHomeBanner :parmData="iconList"  :userToken="userToken"/>

                    <div class="pathologic-list">
                        <div class="pathologic-item" v-for="(item,index) in listMiddle" :style="index%2==1?'margin-right: 0':''" @click="goToPatholo(item)">
                            <span class="pathologic-icon">
                                <img :src="item.imageUrl"/>
                            </span>
                            <!-- <span class="pathologic-txt fs14">{{item.name}}</span> -->
                        </div>
                       
                        <div class="clear"></div>
                    </div>
                    
                    <!--继续学习-->
                    <YqyHomeKeepon  :parmData="keeponData" v-if="isShowKeep" v-on:hideKeepon="hideKeepon"/>

                    <!--专题分类-->
                    <YqyCategoryThree1  :parmData="listCategory"/>

                    <!--健康守门人-->
                   <!--  <YqyHomePorter/> -->
                    
                    <!--云雀名师-->
                    <YqyHomeAdv :parmData="yqDoctorList" :userToken="userToken"/>

                     <!--最新课程-->
                    <YqyTeacherList :parmData="newsDatalist"  :userToken="userToken" v-on:setRefrshParm="getRefrshParm"/>
                    
                    <!--分钟医学院-->
                    <YqyFiveMinutes :parmData="fiveList" v-if="fiveList.length>0"/>
                    
                    <!--为你推荐-->
                    <YqyHomeAdjust :isFixed="isFixed" :statusBarHeight="statusBarHeight" :parmData="adjustList" v-if="adjustList.length>0"  :userToken="userToken" v-on:setRefrshParm="getRefrshParm"/>

                    <!--返回顶部-->
                    <BackTop v-if="isShowBackTop"/>

                    <a class="news-update" @click="goAnchors" v-show="showNewCorse">
                        <span class="news-info">
                            {{updateStr}}个新内容
                            <i></i>
                        </span>
                    </a>
                </section>
            </section>
       
       
    </div>
  	
</template>

<script>
import { Swipe, SwipeItem ,Header} from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index'
import BackTop from '../../components/common/backTop';
import YqyTeacherList from '../../components/business-new/yqy-teacher-list';
import YqyTopEvaluat from '../../components/business-new/yqy-home-learn-evaluation';
import YqyHomeHeader from '../../components/business-new/yqy-home-header';
import YqyHomeAdv from '../../components/business-new/yqy-home-adv';
import YqyFiveMinutes from '../../components/business-new/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business-new/yqy-category-three-1';
import YqyHomeBanner from '../../components/business-new/yqy-home-banner';
import YqyHomeKeepon from '../../components/business-new/yqy-home-keepon';
import YqyHomePorter from '../../components/business-new/yqy-home-porter';
import YqyHomeAdjust from '../../components/business-new/yqy-adjust';
export default {
    data(){
        return {
            wrapperHeight:0,
            topDistance:20,
            allLoaded:false,
            isAutoFill:false,
            showNewCorse:false, // 是否显示新内容 默认不显示
            isFixed:false,
            isShowBackTop:false,
            isShowEvluat:false, //是否显示下拉
            evaluctObj:{}, //下拉数据
            iconList:[], //icon数据
            keeponData:{}, //继续学习
            isShowKeep:false,
            listCategory:[], //专题分类数据
            yqDoctorList:[],//云雀名师数据
            newsDatalist:[],//最新课程
            fiveList:[],//五分钟医学院
            adjustList:[],//为您推荐
            isBodyPull:false,
            speedSwiper:20,
            stopPropagation:true,
            isIntStyle:'',
            listSwiper:[],//轮播图数据
            listMiddle:[],//中间栏数据
            scrollTimer:null,
            scrollTop:0,
            hideNewCourse:true,
            updateTotal:0,
            msgCount:'',
            userToken:'',
            searchFix:false,
            statusBarHeight:20,
            userMobile:'',
            userToken:'',
            isHeightFromApp:false,
            isFirstPull:true,
            updateStr:'',
            isRefreshFromBack:false,
            isRefrshMsg:false,
        }
    },
    components:{
        Header,
        Swipe,
        SwipeItem,
        BackTop,
        YqyTopEvaluat,
        YqyTeacherList,
        YqyHomeHeader,
        YqyHomeAdv,
        YqyFiveMinutes,
        YqyCategoryThree1,
        YqyHomeBanner,
        YqyHomeKeepon,
        YqyHomePorter,
        YqyHomeAdjust
    },
    created () {
        let _this = this;
        _this.getUserInfo();

        window.__nativeCallMsg = function(params){
            _this.msgCount = params.msgNum || '';
            //alert(_this.msgCount);
        }


        window.__getToken = function(params){
            //alert(params.userToken);
           // _this.userToken = params.userToken
            // _this.getUserInfo();
           // _this.initByToken(params.userToken);
        }

        window.__refresh = function(params){
             //__getToken()
            alert('__refresh');

            //返回
            if(_this.isRefreshFromBack){
                //alert("返回了，token:"+_this.userToken);
                // _this.adjustList = [];
                // _this.newsDatalist = [];
                _this.getAdjustData(_this.userToken);
                _this.getNewsData(_this.userToken);
            } else if(_this.isShowEvluat && !_this.isRefreshFromBack){
                _this.isIntStyle =  'font-style pull-down';
                _this.fiveTimePull();
            } else {
                _this.getUserInfo();
            }
          
        }

        window.__getStatusBarHeight = function(parm){
            alert("__getStatusBarHeight");
            _this.statusBarHeight = parm.statusBarHeight;
            _this.isHeightFromApp = true;
            // alert(parm.statusBarHeight);
           
        }


       // alert("token之前");
        window.__getUserInfo = function(parm){
            alert("__getUserInfo");
            _this.systemType = parm.systemType;
            _this.appVersion = parm.appVersion;
            _this.token = parm.userToken;
           // _this.userToken = parm.userToken;
            _this.userMobile = parm.userMobile;

            if(parm.userMobile != ''){
                _this.getKeepData(parm.userToken);
            }
            
            _this.initByToken(parm.userToken);
            
        }
        _this.getStatusHight();
        _this.initAll()


        //   _this.token = 'BE1D60CAE8F24649B4F72D47E964A58B';
        //  _this.msgCount = '2'
        // _this.isShowKeep = true;
        // _this.isHeightFromApp = true;
        // _this.getKeepData(_this.userToken);
        //  _this.initByToken(_this.token);
        // _this.getIconData(_this.token);
        // _this.isIntStyle =  'font-style pull-down';
        // _this.fiveTimePull();


        //_this.getUserInfo();
        
    },

	mounted(){

        this.wrapperHeight =document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    },

    beforeDestroyed(){
        window.removeEventListener('scroll', this.scrollFun)
    },
    watch:{
        //监听是否收起
        isShowEvluat:function(n){
            ///alert(n);
            if(!n && this.isIntStyle == 'font-style pull-up'){
                ///alert("000");
                rocNative.setTabMiniIcon({
                    tabIndex:3,
                    iconTitle:'学习评价',
                    iconColor:'',
                    isSet:true

                })
            }
        }
    },

    methods:{

        goAppMsg(){
            
            this.isRefrshMsg = true;
           // alert(this.isRefrshMsg);
        },
        hideKeepon(){
            this.isShowKeep = false;
        },

        getRefrshParm(obj){
            this.isRefreshFromBack = obj.isclick;
        },

        //轮播图开始滚动
        swiperFun(){
            
            var swiper = new Swiper('.swiper-container', {
                speed: 600,
                loop: true,
                observer:true,
                observeParents:true,
                autoplayDisableOnInteraction : false,
                autoplay:3000,
                pagination: '.pagination'
            });
  
          
        },

        loadTop(){
            //location.reload();
           
            this.$refs.loadmore.onTopLoaded();
        },

        initByToken(userToken){
            
            this.getAdjustData(userToken);
            this.getNewsData(userToken);
            this.getEvaluctData(userToken);
            window.addEventListener('scroll', this.scrollFun);
        },

        initAll(){
            this.getSwiper()
            this.getUpdateData();
            this.getMiddel();
            this.getIconData();
            this.getCategoryData();
            this.getYqDoctorData();
            this.getFiveData(); 
           
        },

        //获取状态栏高度
        getStatusHight(){
            rocNative.getStatusBarHeight({
                __funcName: '__getStatusBarHeight'
            })
            
        },
        getToken(){
             rocNative.getToken({
                __funcName: '__getToken'
            })
        },

        //获取版本号
        getUserInfo(){
            rocNative.getUserInfo({
                __funcName: '__getUserInfo'
            })
        },

        //轮播图跳转
        goLinkByswiper(itemData){
            ///alert("0000");
           // console.log(item);
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_banner',
                actionCode:'c_banner',
                labelId:itemData.id,
                labelValue:itemData.name
                
            })
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
            
        },

        //获取评价
        getEvaluctData(userToken){
             //alert(userToken);
            let _this = this, para = {
                sysCode: 27, 
                token: userToken,
                setEntry: 'headers',
                data:{
                     token:userToken,
                }
            }

            this.GET('contents/gp/v1/homepage', para).then(res => {
                if(res.code == '000000'){
                    // res.data = {
                    //     avatarImageUrl: "https://test-file.yunqueyi.com/File/doctor_default.png",
                    //     certificateAcquireNumOfHospital: 10,
                    //     certificateAcquireNumOfSelf: 9,
                    //     courseOverNumOfHospital:    10,
                    //     courseOverNumOfSelf: 5,
                    //     examOverNumOfHospital: 10,
                    //     examOverNumOfSelf: 5,
                    //     gradePKToHospital: 0.67,
                    //     showFlag: true
                    // }
                    _this.evaluctObj =   res.data || {};
                    if(res.data.certificateAcquireNumOfSelf == 0 &&  res.data.courseOverNumOfSelf == 0 && res.data.examOverNumOfSelf == 0){
                        _this.isShowEvluat = false;
                    
                    }else{
                        
                        _this.isShowEvluat = _this.evaluctObj.showFlag;
                        
                     
                    }


                }else{
                   // alert(res.message);
                    // rocNative.showNativeToast({
                    //     message: res.message
                    // })
                }

                if(!_this.isShowEvluat){
                    rocNative.setTabMiniIcon({
                        tabIndex:3,
                        iconTitle:'学习评价',
                        iconColor:'',
                        isSet:true

                    })
                }
            })
        },

        //获取小icon数据
        getIconData(){
            let _this = this, 
            para = {
                category: 1, 
                position:1,
                setEntry: 'headers',
                
            }
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                    //alert("000");
                    _this.iconList = res.data && res.data.iconColumnInformationModels || []
                    //alert(_this.userToken);
                    //_this.userToken = userToken
                }
            })
        },

        //获取专题分类s数据
        getCategoryData(){
            let _this = this, 
            para = {
                category: 1, 
                position:3,
                
                setEntry: 'headers'
            }
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                    //console.log(res);
                    _this.listCategory = res.data && res.data.iconColumnInformationModels || [];
                   /// console.log(_this.list);
                    
                }
            })
        },

        //继续学习数据
        getKeepData(userToken){
            let _this = this,
            parm = {
                
                
                token:userToken,
                setEntry: 'headers',
                data:{
                     token:userToken,
                }
            }
            _this.GET('contents/courses/continueLearningCourse',parm).then(function(res){

                if(res.code === '000000'){
                    _this.keeponData =  res.data && res.data.continueLearningCourseModel || {};

                    if(_this.keeponData.remanentCourseNum == 0){
                        _this.isShowKeep = false;
                    }else{
                      _this.isShowKeep  = _this.keeponData.showFlag ? true : false;
                    }

                   
                }
            })
        },

        //云雀名师
        getYqDoctorData(){
            let _this = this,
            para = {
                pageNo:1,
                pageSize:10,
                setEntry: 'headers'
            }
            this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
                if(res.code == '000000'){
                    _this.yqDoctorList = res.data && res.data.pCourseDoctorModels || []
                }
            })
        },

        //最新课程
        getNewsData(userToken){
            this.newsDatalist = [];
            let _this = this,
            parm = {
                pageNo:1,
                pageSize:6,
                token:userToken,
                setEntry: 'headers',
                data:{
                     token:userToken,
                }
            }
            _this.GET('/contents/HomeNewCourse/NewCourseInformation',parm).then(function(res){

                if(res.code === '000000'){

                  _this.newsDatalist =  res.data.contentAppModels || [];
                  //alert( _this.newsDatalist[0].joinNum)
                  if(_this.newsDatalist.length>0){
                    _this.userToken = userToken;
                  }
                }
            })
        },

        //五分钟医学院
        getFiveData(){
            let _this = this,
            parm = {
                pageNo: 1, 
                pageSize: 3,
                data:{
                     setEntry: 'headers'
                }
               
            }
            this.API_GET('contents/fiveMinutes/contents',parm).then(res => {
                if(res.respCode == '200'){

                    _this.fiveList = _this.handelFive(res.fiveMinutesMedicalContentList) || []
                }
            })
        },

        //处理五分钟数据 初始化播放状态
        handelFive(d){
            for(let i=0;i<d.length;i++){
               d[i].play = '0';
            }
            return d;
        },

        //为您推荐
        getAdjustData(userToken){
           //alert(userToken);
           this.adjustList = []
            let _this = this,
            parm = {
                pageNo:1,
                pageSize:10,
                token:userToken,
                setEntry: 'headers',
                data:{
                     token:userToken,
                }
                
            }
              

            _this.GET('contents/courses/recommendCourseList',parm).then(function(res){

                if(res.code === '000000'){
                    _this.adjustList = res.data || [];
                    if(_this.adjustList.length>0){
                        
                        _this.userToken = userToken
                    }
                    
                }

              })
        },


        //有更新数据
        getUpdateData(){
            let _this = this, 
            para = {
  
                setEntry: 'headers'
            }
            //alert("000");
            this.GET('contents/courses/queryCourseCount', para).then(res => {
                if(res.code == '000000'){
                    if(res.data != null){
                        _this.updateTotal = res.data.courseCount + res.data.fiveHospCount || 0
                        if(_this.updateTotal > 0){
                            _this.showNewCorse =  true;
                        
                            _this.updateStr = _this.updateTotal>9 ? '9+' : _this.updateTotal
                        }else{
                            _this.showNewCorse =  false
                        } 
                    }
                    
                }
            })
        },

        goAnchors(){
            if(document.querySelector('#new-course')){
                document.documentElement.scrollTop = document.querySelector('#new-course').offsetTop;
                document.body.scrollTop = document.querySelector('#new-course').offsetTop;
            }
            
            ///alert("000");
            this.hideNewCourse = false;
            this.showNewCorse = false;
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_new_course',
                actionCode:'c_newcourse_list',
                // labelId:itemData.id,
                // labelValue:itemData.name
                
            })



        },

        scrollEndFun(){
            let scrollTop =  document.body.scrollTop  || document.documentElement.scrollTop;
            // let newCourseTop = document.querySelector('#famus-teacher').offsetTop;
            // let fivesTop = document.querySelector('#fiveBoxMenu').offsetTop;
            
      
            if(this.scrollTop != scrollTop){
               
                this.showNewCorse = false;
            }else{
                this.showNewCorse = this.updateTotal>0 ? true : false;
                
            }
           
        },

        scrollFun(){
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            this.showNewCorse = false;
            
            if(this.hideNewCourse){
                this.scrollTop = scrollTop;
                clearTimeout(this.scrollTimer);
                this.scrollTimer = setTimeout(this.scrollEndFun, 200);
            }
           

            if( this.isIntStyle == 'font-style pull-down'){
                this.isIntStyle = 'font-style pull-up';
                this.isShowEvluat = false;
            }
             var adjustTop = 0;

            //滚动条滚动到最新课程
            var newCourseTop = document.querySelector('#famus-teacher').offsetTop;
            var clientHeight = document.querySelector('#famus-teacher').clientHeight;
            if(document.querySelector('#adjust-u')){
                adjustTop = document.querySelector('#adjust-u').offsetTop;
            }
           
            var searchBox = document.querySelector('#search-top').offsetParent.offsetTop;
            //console.log(newCourseTop);
            if(scrollTop +clientHeight/2 >= newCourseTop){
                //alert('scrollTop:'+scrollTop+'newCourseTop:'+newCourseTop);
                //this.showNewCorse = false;
                this.isShowBackTop = true;
            }else{
                this.isShowBackTop = false;
            }
            if(scrollTop  > searchBox){
             ///console.log(scrollTop,searchBox);
                this.searchFix = true;
            }else{
                this.searchFix = false;
            }
            if(scrollTop+30 >= adjustTop){
                this.isFixed = true;
                this.searchFix = false;
            }else{
                this.isFixed = false;
            }

        },

        //五秒之后收起
        fiveTimePull(){
            let _this = this;
           let setTimer = setInterval(function(){
                _this.isIntStyle = 'font-style pull-up';
                _this.isShowEvluat = false;
                clearInterval(setTimer)
            },5000);
           
           
        },

        getEluatFun(obj){
            ///console.log(obj);
            if(obj.isPull == '1'){
               this.isIntStyle =  'font-style pull-down';
               this.fiveTimePull()
            }else if(obj.isPull == '2'){
                this.isIntStyle = ''
            }else if(obj.isPull == '0'){
                this.isIntStyle = 'font-style pull-up'
            }
        },

        //获取轮播图数据
        getSwiper(){
           
           let _this = this, 
           para = {
            category:1,
            position:4,
            setEntry: 'headers',
            data:{
                setEntry: 'headers'
            }   
           }
          
            this.GET('/contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                    _this.listSwiper = res.data.iconColumnInformationModels || []
                    _this.swiperFun();
                }
            })
        },

        //中间栏数据
        getMiddel(){
            let _this = this, 
            para = {
                category: 1, 
                position:2,
                setEntry: 'headers',
                token:_this.token
            }
           
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                   // console.log(res);
                    _this.listMiddle = res.data && res.data.iconColumnInformationModels || []
                }
            })
        },

        //中间栏跳转
        goToPatholo(itemData){
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_middle',
                actionCode:'c_field',
                labelId:itemData.id,
                labelValue :itemData.name,
            })
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },
     
    },
}

</script>
<style>
    .swiper .mint-swipe-indicators{
        right: 6px;
        top:50%;
        bottom: inherit;
        left:inherit;
        width:10px;
        text-align: center;
        transform: translateX(0%);
        transform: translateY(-50%);
    }
    .swiper .mint-swipe-item img{
        width: 100%;
        height: 100%;
    }
   .swiper .mint-swipe-indicator{
        width:2px;
        height: 8px;
        background: #fff;
        opacity: 0.4;
        float: left;
        margin-top:3px;
    }
    .swiper .is-active{
        opacity: 1;
    }
    .mint-loadmore-top .mint-loadmore-text{font-size: 12px;}
    .banner-container.swiper-container-horizontal>.swiper-pagination-bullets{
        width: 2px;
        left: inherit;
        transform: translateY(-50%);
        position: absolute;
        right: 6px;
        top:50%;
    }
    .banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
        width: 2px;
        height: 8px;
        background: #fff;
        margin:6px 0 0 0;
        float: left;
        opacity: 0.4;
        
    }
    .banner-container .swiper-pagination-bullet-active{
        opacity: 1
    }

    .banner-pagination{
        width: 2px;
        background: #fff;
        right: 10px;
        top:10px;
        position: absolute;
    }
    .swiper-pagination-bullet{

    }
    .swiper-slide img{
        width: 100%;
        height: 100%;
    }
</style>
<style lang="scss" scoped>
    @import '../../style/mixin';
    @import '../../style/swiper.min.css';
    .banner-container{
        height: px2rem(210px)
    }
    .main-body{
        position: relative;
    }
    .box-BG{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        z-index: 10000
    }
    .mint-header {
        background-color: rgba($color: #000000, $alpha: 0)
    }
    .font-style {
        @include sc(0.6rem, #666);
    }
    .top-evaluat{
       
    }
    @keyframes myPullDown{
        from {padding-top: 0;}
        to {padding-top:px2rem(225px)}
    }
    @keyframes myPullUp{
        from {padding-top: px2rem(225px);}
        to {padding-top:0}
    }
    .pull-down{
        -webkit-animation: myPullDown 1.2s;
        animation: myPullDown 1.2s;
        padding-top:px2rem(225px)
    }
    .pull-up{
        -webkit-animation: myPullUp 1.2s;
        animation: myPullUp 1.2s;
        padding-top:0
    }
    .news-update{
        display: block;
        position: fixed;
        background: #F9F6EF;
        right: 0;
        bottom: px2rem(140px);
        height: px2rem(27px);
        padding:0 px2rem(12px);;
        line-height: px2rem(27px);
        border:1px solid RGBA(162, 129, 60, 0.2);
        font-size:  px2rem(13px);
        box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
        border-radius: px2rem(14px) 0 0 px2rem(14px);
        z-index: 101;
        .news-info{
            color: #A2813C;
            position: relative;
            display: inline-block;
            i{
                position: absolute;
                right: -(px2rem(6px));
                top:px2rem(4px);
                display: inline-block;
                width: px2rem(4px);
                height: px2rem(4px);
                border-radius: 100%;
                background: #F47A48
            }
        }
        
    }
    .home-topMenu{
        width: 100%;
        text-align:center;
        top:0;
        position: absolute;
        z-index: 10;
    }

    .home-header {
        height: px2rem(202px);
        .swiper{
            height: 100%;
           /* @include bis('../../images/552064153@2x.png');*/
        }
        

        .logo_img{
            height: px2rem(85px);
            width: px2rem(345px);
            text-align: center;
        }
    }
    .home-body{
        background: #fff
    }
    .pathologic-list{
        width: 100%;
        
        padding: 0 px2rem(15px);
        margin-top:  px2rem(15px);
        .pathologic-item{
            float: left;
            width:48%;
            box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
            border-radius: px2rem(3px);
            background: #fff;
           /* padding: px2rem(12px) 0 px2rem(12px) 0;*/
            margin-right: 4%;
            text-align: center;
            .pathologic-icon{
                
               /* height:  px2rem(20px);*/
                img{
                    width:  100%;
                    height:  100%;
                    vertical-align: middle;
                    display: inline-block;
                }
            }
            .pathologic-txt{
                font-size: px2rem(14px);
                line-height:  px2rem(20px);
                font-weight: 700;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .clear{
            clear: both;
        }
    }

</style>
