<script lang="ts" setup>
import {ref, getCurrentInstance, ComponentInternalInstance, reactive} from 'vue'
import {ElMessage} from 'element-plus'
//图片
import image1 from '@/assets/images/gk/2023/sxznps.jpg';
import image2 from '@/assets/images/gk/2023/ddps.jpg';
import image3 from '@/assets/images/gk/2023/gzdz1200.jpg';

//=============
import {Swiper, SwiperSlide} from "swiper/vue";
import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper';
import "swiper/css";
import {SchoolEntity} from "@/types";
import ApiConstant from "@/utils/ApiConstant";

//轮播图组件参数
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
const onSwiper = (swiper: any) => {
  console.log(swiper);
};
const navigation = ref({
  nextEl: '.button-next',
  prevEl: '.button-prev',
})
const prevEl = () => {
  // console.log('上一张' + index + item)
}
const nextEl = () => {
  // console.log('下一张')
}

//主数据对象
const state = reactive({
  hotSchoolList: [] as Array<SchoolEntity>,
  hotTabActive: 1
})
const hotSchoolList = reactive({
  nowProvinceBenSchoolList: [],//本省，本科
  nowProvinceZhuanSchoolList: [],//本省，专科
  otherProvinceBenSchoolList: [],//外省，本科
  otherProvinceZhuanSchoolList: []//外省，专科
})

getHotSchoolList()

//获取热门院校
function getHotSchoolList() {
  proxy?.$axios({
    url: ApiConstant.School.hotSchoolList,
    method: 'get',
    params: {},
    showLoading: false,//是否显示加载图标
  }).then((response) => {
    return response.data
  }).then((data) => {
    console.log(data)
    //有数据情况下
    hotSchoolList.nowProvinceBenSchoolList = data.result.nowProvinceBenSchoolList
    hotSchoolList.nowProvinceZhuanSchoolList = data.result.nowProvinceZhuanSchoolList
    hotSchoolList.otherProvinceBenSchoolList = data.result.otherProvinceBenSchoolList
    hotSchoolList.otherProvinceZhuanSchoolList = data.result.otherProvinceZhuanSchoolList
    if (state.hotTabActive == 1) {
      state.hotSchoolList = hotSchoolList.nowProvinceBenSchoolList
    }
  }).catch((error: any) => {
    console.log(error);
  }).finally(() => {
  });
}

function copyText(textToCopy) {
  const textField = document.createElement('textarea');
  textField.innerText = textToCopy;
  document.body.appendChild(textField);
  textField.select();
  document.execCommand('copy');
  textField.remove();
  ElMessage({
    message: '已复制.',
    type: 'success',
  })
}

//切换 热门学院
function switchHotTab(index: number) {
  state.hotTabActive = index
  //切换数据
  if (index == 1) {
    state.hotSchoolList = hotSchoolList.nowProvinceBenSchoolList
  } else if (index == 2) {
    state.hotSchoolList = hotSchoolList.nowProvinceZhuanSchoolList
  } else if (index == 3) {
    state.hotSchoolList = hotSchoolList.otherProvinceBenSchoolList
  } else if (index == 4) {
    state.hotSchoolList = hotSchoolList.otherProvinceZhuanSchoolList
  }
}

</script>

<template>
  <div class="margin-5"></div>
  <div class="main-container wrap main-fullScreen">
    <el-row :gutter="20">
      <!-- 轮播图-->
      <el-col :span="18">
        <div class="header_swiper">
          <Swiper
              :modules="modules"
              :pagination="true"
              :mousewheel="true"
              :keyboard="true"
              @swiper="onSwiper"
              :navigation="navigation"
              :autoplay="{ delay: 3000, disableOnInteraction: false }"
              :loop="true"
          >
            <swiper-slide style="width: 1200px">
              <img :src="image1" alt="Image"/>
            </swiper-slide>
            <swiper-slide style="width: 1200px">
              <img :src="image2" alt="Image"/>
            </swiper-slide>
            <swiper-slide style="width: 1200px">
              <img :src="image3" alt="Image"/>
            </swiper-slide>
          </Swiper>
        </div>
        <div class="swiper-scrollbar"></div>
        <div class='button-prev' @click.stop='prevEl'><img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAwCAYAAAAPfWqeAAADpUlEQVRYR73YX2gcRRwH8N9v7vyDIiJSqtJaFEVRLBSs+CAotNogRZTs7s2sUEgFhQr1QR/aBxVsH3xRWvtQqf9Q4TZOdtOeOUOjbc4HoYpBQfClD75JIzHV9BrTO2/zlc3NJmtzyf3bu31clt9nfjO/mZ0Zph49ANjzRg4x0xDAR7kXDgAxPDxyAqAXovjM9HvqUIR4nv8JEfbESTDzgVQhrXUmDPlzACqBHFbKfj01qFQqZaen/8wDsGNECHpTSuetpe5LY4ympqauOX/+N01EzyaQg1I6by9n1i00Pj5+3dzcvA9g90osfs117XeSsbvKqFQqXT89PXMSoIGVMRGvKGW9d3UCHUNjY2M3lMsLBSLaWS9hBjNeltI53qiXOoImJiZuvHjxUhHAEyboohD8kpT2h2sNRdtQoVC4aX6+Mk5Ej8UIkdjrutan6413W5DW+uYwpNMAPWpmfEhEe5Ry8s2KqmWoWCzeUi7/MwHQdjMmNYCfd10rKuumT0vQ6OjorZVK+A2AbSbiv8yUU8o52VQwHzSFtNYbwpDPANhqMqkIwXYuZ421ijRdGfL5wkaiyiQRPWCCXiGi51zXOd0Osi7keYU7gCXkPjPwC0JknsnlBs+0i6wJBUGwqVoNSwDdY4LOM/NupexvO0EaQkEQbDHIXfWgXM5m8bTjON91iqyCgiC4u1JZnCTCFhP0UjZLA47jnOsG+R/k+/691SoiZJPJ5G8hxFNSDv7YLbIM+b5/v0FuN8isQX5KA1mC8nn/QebFswBtNNU1A4idrmv9khZiIP0DET1ikD8AscN1rV/TRPoN9anrorQaFQMzP6mU9XNaXbi8qK4ub/pLiMyuVMs7bnU0Yc2qcKcpjjnmzICUg993m9mq30RflqC41Z53ajNRdbKni+oK1offRIxprW+r1ehsT398CWyDwR6qFwhXmMmS0i62UyBN9wxRsL5sTuJW17dbC18DeNhkVmMmV0p7pJXMWsoo0Y2930DGWKMtsRA8JKX92XqZtZVRHCja5M/Ozn1FRI+bd4vM9KJSzkdrYR1BUbDo2HL58pUvAewwYwYi3qeU9X4jrGMoChYdxC5cmDlFRLtWgvN+17WPXY11BUXBGh0thaBXpXTeTWJdQ1EwrfW1tRp90dPDctzq+vF/xgPIit8x8xtK2YeWxrCVydbqN3250EhM6kytxh8nr2iEoIOpZhRj9Usn/wMAe+ul34NLpwTGw8P+YYCGiOjIf5yH1rQHeb5wAAAAAElFTkSuQmCC"
            alt="">
        </div>
        <div class='button-next' @click.stop='nextEl'><img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAwCAYAAAAPfWqeAAADa0lEQVRYR9XYX4hUVRwH8O9v7zTjto5buy6N9OaDL0FQrJBQ0IzW2jbb6M7sae+CiSRhD/2hIHrQQHvopR4KCgp0Qejeu/fOmoTFmgoFPYQFgYIUiWIuqUREhKI1c74x3jPuqOvuzu6Zge7rDL8P5/x+55zfOeJ50RsifIXEuOuO7BIRogWf+H44TeL+WmwR7B0dHXlBRLRtS4IgfFNrvDMTWPa7bmmbbUxqgO9Hb5PcWcdExHccblFKVW2N7DpU+4IgfEtr7G7Aokxm5Vg2m63YwG5ABrtlGnFwzZrVqr+//9+lYjdBtWCeF70O8N2GkR3q7u4qDQ4OXlsKdhsU56z8Mqnfn8Ewlcn0bc5ms1cXi80KmWl8kZQPSdb/czSd7iwMDQ1dWQx2RyjGou1a82MAHfE6k697elbkBwYGLjeLzQnFOStvBfS+Ogbg266u1GChUPi7GWxeKM5ZOAZgPwnH7CDfOQ42KqX+Wii2IMiMTInwU5IJg32fTt89kM/n/1wItmDIjGwziQkAd5mc/ZhKOU8MDw//MR/WFFQLNjFRHtKaEcmUwU44DjcopX6fC2saMtX4lNY8AGCZCX4KSOXGxgqX7oQtCopHNrlB6+rnJDpN8J9FUjnXLfw2G7ZoKM5Z9DjJQwC6TIGcTiadbLFYnL4VWxJksMdIfAEwbbCzBjvXiC0ZqgULw3BdpYIpACvi4HIulerIFYvFM3XMChQXyORarfVXAO8x2HQyKblSqfTLdXq++m/m9yCYfJisHiHRY7ALBvvJKmR2kAdF9FESfSZnl8iO9dYhgz0goo+RuM/MyPH/L+R55dZPne+XHyJ5BGBvy4ohLu/qYQD3tqy8g2DyEbI6RaLbVNqvZnewt2DDMHy0UpEvW7oFzbapAsmc6246b21Tbcsx4XnhRgCfNR58iQTWK6UuWjv4giDKkyjXj3IAJw1i7yj3/bD1zUkQRCMkvJl2S35IpzuftNputaWBDILoOa053tKW2PfD50l80oB809vb/bTVJt/3yzsAflS/tojIseXLlz1j9driedFLAD9oWBOHV63q22T1IhYE4Wta470b3YuI/avl7W8OOJhI4Fml1D/NNClzdqq+H+0iuWdmJChnMn2u1et/Wx402vZE07ZHp9ozGoBXRTA+Olra2apntP8AQCOqBFQ0cxQAAAAASUVORK5CYII="
            alt="">
        </div>
      </el-col>
      <!-- 表单-->
      <el-col :span="6" style="z-index: 5">
        <div class="" style="background-color: #ffffff;height:420px ">待补充</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="hot_school" v-if="state.hotSchoolList && state.hotSchoolList.length>0">
          <div class="l_title clearfix">
            <div class="left_title">热门院校</div>
            <div class="right_tab clearfix">
              <div class="hot_school_tab am_l set_hoverl" :class="{'active':1==state.hotTabActive}"
                   @click="switchHotTab(1)">河南本科院校
              </div>
              <div class="hot_school_tab am_l set_hoverl" :class="{'active':2==state.hotTabActive}"
                   @click="switchHotTab(2)">河南专科院校
              </div>
              <div class="hot_school_tab am_l set_hoverl" :class="{'active':3==state.hotTabActive}"
                   @click="switchHotTab(3)">省外本科院校
              </div>
              <div class="hot_school_tab am_l set_hoverl" :class="{'active':4==state.hotTabActive}"
                   @click="switchHotTab(4)">省外专科院校
              </div>
              <!--              <div class="change_group">换一换<i></i></div>-->
            </div>
          </div>
          <div class="hot_school_box clearfix">
            <div class="left" style="background: rgb(255, 141, 66);">
              <a :href="'/school/'+state.hotSchoolList[0].schoolCode" target="_blank">
                <h3>{{ state.hotSchoolList[0].schoolName }}</h3>
                <p class="tag">
                  <span v-for="item in state.hotSchoolList[0].tagsList">{{ item }}</span>
                </p>
                <div class="tuijian" v-if="state.hotSchoolList[0].schoolIcon">
                  <div class="school_tuijian">
                    <div class="school_img"><img :src="state.hotSchoolList[0].schoolIcon" alt=""></div>
                  </div>
                </div>
              </a></div>
            <div class="right">
              <div v-for="(item,index) in state.hotSchoolList">
                <div class="school_item" data-growing-container="" v-if="index>0">
                  <a :href="'/school/'+item.schoolCode" target="_blank">
                    <img :src="item.schoolIcon" alt="">
                    <div class="school_msg"><h3>{{ item.schoolName }}</h3>
                      <div class="clearfix check_btn">
                        <span class="school_class">{{ item.institutionType + '类' }}</span>
                        <span>查看院校<i></i></span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="margin-top-5">
      <el-col :span="14">
        <div class="school-footer_footerBox">
          <div class="school-footer_leftIntroduce">
            <div class="school-footer_useIntro"><h3>系统使用说明</h3>
            </div>
            <p>1、本查询系统的信息仅供参考，具体数据请以学校官网或考试院公布为准。</p>
            <p>2、本站数据未经授权严禁转载，违者将依法追究责任。</p>
            <p>3、如有任何疑问，可发送邮件至：<a @click="copyText('yitisheng@163.com')" class="a-button hover_style"
                                              style="color:var(--el-color-primary);">yitisheng@163.com</a></p>
            <p>4、志愿填报服务客服专线：xxx-xxxx-xxx，高校合作或其他商务客服电话：xxx-xxxx-xxx。</p>
            <p class="school-footer_friendChain"><span>友情链接：</span><a href="https://www.eol.cn/"
                                                                          target="_blank">中国教育在线</a><a
                href="https://gaokao.eol.cn/" target="_blank">高考频道</a><a href="https://www.kaoyan.cn/"
                                                                             target="_blank">掌上考研</a><a
                href="https://kaoyan.eol.cn/" target="_blank">考研频道</a><a href="https://www.zhijiao.cn/"
                                                                             target="_blank">职教网</a><a
                href="https://www.gaokao.cn/px/" target="_blank">掌上培训</a><a href="https://www.jiuyeqiao.cn/"
                                                                                target="_blank">就业桥</a><a
                href="https://yun.eol.cn/" target="_blank">数智云服</a></p></div>
          <!--          <div class="school-footer_rightCode__3VuW7 clearfix">
                      <div class="school-footer_codeItem__1Spmk"><img src="/static/media/gzh.ab190311.jpg">
                        <p>掌上高考公众号</p></div>
                      <div class="school-footer_codeItem__1Spmk"><img src="/static/media/app.289cbf0b.png">
                        <p>掌上高考APP</p></div>
                    </div>-->
        </div>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">
        <div class="qrcode">
          <div class="qrcode-item">
            <img src="@/assets/images/qrcode/wx_gh_cbefbadc1f1f_344.jpg" alt="" width="135">
            <div class="qrcode-text" style="">微信小程序</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-backtop :bottom="100" :visibility-height="100">
    <el-icon color="#409efc" class="no-inherit">
      <Share/>
    </el-icon>
  </el-backtop>
  <div class="margin-5"></div>
</template>

<style scoped lang="scss">
root {
  width: 100%;
}

/*轮播图 start*/
.header_swiper {
  z-index: -1;
  width: 1200px !important;
  height: 420px !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
  height: 420px !important;
}

.swiper-slide img {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

swiper-slide img {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.button-prev {
  position: absolute;
  top: 185px;
  left: 10px;
  z-index: 99;
  cursor: pointer;
}

.button-next {
  position: absolute;
  top: 185px;
  right: 300px;
  z-index: 99;
  cursor: pointer;
}

/*轮播图 end*/


//热门院校
.hot_school {
  margin-bottom: 40px;
  /*padding: 0 20px;*/
  .l_title {
    height: 44px;
    line-height: 44px;
    border-bottom: 2px solid var(--el-color-primary);
    width: 100%;

    .left_title {
      font-size: 20px;
      color: #000;
      position: relative;
      padding-left: 12px;
      width: 330px;
      float: left;
      font-weight: 700;

      .right_tab {
        margin-left: 10px;
        float: left;
        width: 820px;
      }
    }

    .right_tab .hot_school_tab.active {
      color: var(--el-color-primary);
    }


    .right_tab .hot_school_tab {
      float: left;
      font-size: 18px;
      color: #000;
      margin-right: 32px;
      cursor: pointer;
      font-weight: 700;
    }

    .right_tab .hot_school_tab:hover {
      color: var(--el-color-primary);
    }

    .am_l {
      transition: all .4s;
    }

    .change_group {
      float: right;
      color: #f60;
      font-size: 14px;
      text-align: right;
      cursor: pointer;
      width: 68px;
      height: 44px;
      position: relative;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }

  .hot_school_box {
    .left {
      float: left;
      width: 330px;
      height: 332px;
      background: #ffeaea;
      text-align: center;
      padding-top: 28px;
      cursor: pointer;

      h3 {
        font-size: 24px;
        color: #fff;
        margin-bottom: 20px;
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        white-space: nowrap;
        transition: all .4s;
        padding: 0 10px;
        font-weight: 700;
      }

      .tag {
        margin-bottom: 54px;

        span {
          display: inline-block;
          padding: 4px 5px;
          margin-right: 10px;
          border-radius: 4px;
          border: 1px solid hsla(0, 0%, 100%, .4);
          color: #fff;
        }

        span:last-child {
          margin: 0;
        }
      }

      .tuijian {
        width: 195px;
        height: 159px;
        position: relative;
        margin: 0 auto;

        .school_tuijian {
          width: 170px;
          height: 187px;
          background: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }
      }

      .school_img {
        height: 100%;
        position: relative;

        img {
          width: 128px;
          height: 128px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }
      }
    }

    .right {
      float: right;
      width: 820px;
      height: 350px;
      margin: 10px 0 0 10px;

      .school_item:hover {
        top: -2px;
        box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
      }

      .school_item:hover .school_msg h3 {
        color: var(--el-color-primary);
      }

      .school_item {
        cursor: pointer;
        float: left;
        height: 110px;
        width: 263px;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        transition: all .2s linear;
        top: 0;
        box-shadow: 0 0 15px #e6e6e6;
        background-color: white;

        img {
          width: 65px;
          height: 65px;
          position: absolute;
          left: 15px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          border: 0;
          vertical-align: top;
        }

        .school_msg {
          margin-left: 100px;
          margin-top: 21px;
          padding-right: 16px;

          h3 {
            color: #000;
            font-size: 16px;
            margin-bottom: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all .4s;
            font-weight: 700;
          }

          .check_btn {
            .school_class {
              display: inline-block;
              padding: 0 6px;
              border: 1px solid #eee;
            }

            span {
              float: left;
              font-size: 12px;
              color: #999;
            }

            span + span {
              margin-right: 12px;
              float: right;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            span + span i {
              display: inline-block;
              width: 5px;
              height: 9px;
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAAoklEQVQoU43SsQ0CMQwFUPsaZqOlp4wLdDRQMAUVXBEzABWiSwkbMEX2+OgiOOlIHOL6+cuyPlPj8OhU9UpEDxG5WHsJeu9vRLTquq53zg0lnGAIYRFjvANYWjjBFjzBf3gGaziDFi7CAl6b8PPfAcCGiA4mVNUTgJ6ZzyKyLcJfNKZnsIQyaKEZrKEJquoRwO57uFkK7/2LmZ8isq/WrKW7b6OXhYE4bznBAAAAAElFTkSuQmCC);
              background-size: cover;
              margin: 0 0 0 5px;
            }
          }
        }
      }
    }


  }
}

.l_title .change_group i {
  display: inline-block;
  width: 16px;
  height: 13px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAaCAYAAADWm14/AAADS0lEQVRIS73WXYjUZRTH8c8ZV8ylV8J8IagwCqOiqKTwppIogjIMC40oQmdmV0zWCgyKll4IwcwybeeP0U0k1UUpRV70Kt3ZC3RRhGhZmVEWdtFW6848Mf9mZXVndnYd6H875/k93/Ob85xzwiS+1ONqNcsk84VzcJrksPCz5DMFO9W8G5nBicpGu8DUr+CgxVgjueaY+FCTFI7TOCRscIrnY70/2+mPC5BWOdWQbZKbc6HwHQaE3abYa4Yf/KLbsLOFa7FYckMj9hthaQz4YjyIlgCp1/mG7cA87FfQ53o74g7V8QRT2eWSTZIFwj+4LSp2tjrTFCCtMsOQLyWzhA8kd0bmUDs7R35Pr5vifU9IHsbfwo1RsavZ+eYAJTsktwhvWmhJu6xbgaWix9AvHDDdxbHR4eNjxwCksnvVvJzb3u2yZocm6kQ9Lo0kw9bIrGgP0K/LQbfi+6j4dDKXNYtNq830l32YquC8GHBgdFzbZ9gpQO5C0XO4X3gyKh79/wF6XKGau7k7MvNbAuTV+5ELYouvO8089TgDl+Y6Sb1lvYNpprgJR1RVI/PJ0b8gv/w9r+F2YW1UrOsEIpXdp+allhphWDg3B2i021ckS48eCA9FxfqOIEqekawZo1G/PFkWmTci1e0p5c/unjGBBWtiwLMdQmyUrB6lURXuikrutkhFW9AzjlXLozKOlROgSyUvSFbmlZDcHZlXR47VAdYJsxrFsgBzRd4264On/u3qGOA/lx/Ensi81foVlJXUDODFyPROILmOQ45pRKnsLDU/YtBUc2Oz3zq+oY3A2FlQslnKs69EptwpQD6eT/Jtq5kyFqBoNr7C6eiLzMYThUi9rlL1sSTpcmWzBtdqHC+S8mKpl8+KEynC1Guear5L1Av8qcg80iyR1htR0QNY33g6j5vj6eg3NBE3UklRyvtHt/C22RZFv9qkAPIOWbRc5G94mrAHGyTbIvPH8WKpz3SDlqB8dHmtL6fJ2sgcaQXedhynkouwddRGXN8JP8de4XfJzHpPx4WSkxsX/ST0RsX2do61BRgRSEXXYSUWNgp0jAnCh8IWs2yPfsPtLs9b8USCRsc0RvYlquYIZ0p+1WWfgv2xKd+CJ/X9Czm9FazO5CrrAAAAAElFTkSuQmCC);
  position: absolute;
  right: 0;
  top: 36%;
  margin-top: -6 px;
  transition: all .4s;
  -webkit-transform-origin: center;
  transform-origin: center;
  background-size: cover;
}


//系统使用说明
.school-footer_footerBox {
  width: 1200px;
  /*margin: 0 auto;*/
  background: hsla(0, 0%, 98%, .96);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .school-footer_leftIntroduce {
    padding: 18px;

    h3 {
      font-size: 20px;
      color: #000;
      margin: 0 20px 0 0;
    }

    a {
      color: #666;
      text-decoration: none !important;
    }

    .school-footer_useIntro {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }

    .school-footer_friendChain a {
      margin-right: 15px;
      transition: all .3s;
    }

    .school-footer_friendChain a:hover {
      color: var(--el-color-primary);
    }

    p {
      font-size: 14px;
      color: #000;
      margin-bottom: 15px;
      word-break: break-all;

      a {
        font-size: 14px;
        color: #000;
      }
    }

    p:last-child {
      margin: 0;
    }
  }
}

//二维码 start
.qrcode {
  margin: 50px 0;
}

.qrcode .qrcode-item {
  width: 135px;
  text-align: center;
}

.qrcode .qrcode-item .qrcode-text {
  font-weight: bold;
  color: #000000;
}

//二维码 end
</style>
