<template>
  <div class="home-box">
    <haedBanner></haedBanner>
    <div class="pt-80 content-max-width">
      <h1>证书简介</h1>
      <p class="describe">
        金融产品数字化营销职业技能等级证书，是紫荆教育联合中国人民大学营销系博导、清华大学五道口金融学院金融系硕导、高职院校相关学科带头人、金融行业协会、业界专家、头部金融机构为贯彻《国家职业教育改革实施方案》精神，落实《关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案》共同制定标准、
        研发配套教材及实训平台而推出的面向数字经济人才培养的职业技能等级证书。
      </p>
      <img class="describe-img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/cert_94.png" />
    </div>
    <div class="pt-80 content-max-width">
      <h1>1+X金融产品数字化营销实训平台</h1>
      <p class="describe">
        金融产品数字化营销实训平台是一款诞生于商业级应用，经过教育适配化改造之后，专业支撑金融数字营销实训教学的平台产品。实训平台涵盖银行理财、保险、证券等不同金融领域数字营销案例，定位于学生实践平台、教师科研平台、企业营销业务平台等功能为一体的综合性平台，是院校金融营销实训室建设的必备平台。
      </p>
      <img class="describe-img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/paltform-img.png" />
    </div>
    <div class="pt-80 train-box content-max-width">
      <h1>师资培训</h1>
      <p class="describe">
        紫荆教育服务超过1000家政府机关、大型央企、金融机构和行业龙头企业，提供从员工到高管的人才培养服务和在线教育解决方案，拥有完善的培训体系，丰富的行业、岗位培训课程资源、一流的师资团队、强大的设施条件，可以为院校教师提供多样化的师资培训、人员互聘、企业实践机会。
      </p>
      <img class="describe-img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-img.png" />
      <div class="img-group">
        <div class="img-group_item">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i1.png" />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i2.png" />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i3.png" />
        </div>
        <div class="img-group_item" style="margin-top: 30px;">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i4.png" />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i5.png" />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/train-group-i6.png" />
        </div>
      </div>
    </div>
    <div class="pt-80 content-max-width">
      <h1>教科研服务介绍</h1>
      <p class="describe">
        紫荆教育和学校共同成立“科研创新”专家组，由教科研专家、行业/企业资深人士、学校骨干教师等组成，专门承接教育科研项目的选题、申报，研究与实施等。
      </p>
      <img class="describe-img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/service-img.png" />
    </div>
    <div class="pt-80 content-max-width">
      <h1>试点院校</h1>
      <p class="describe" style="text-align: center;">
        全国数百所试点院校及考核站点
      </p>
      <div class="yx-box">
        <img class="describe-img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/yx-img.png" />
      </div>
    </div>
    <div class="notice-box content-max-width">
      <div class="tab-btn">
        <div class="title">通知公告</div>
        <div class="flex-btn">
          <div :class="newsTabIndex == 0 ? 'btn active' : 'btn'" @click="newsTab(0)">通知公告</div>
          <div :class="newsTabIndex == 1 ? 'btn active' : 'btn'" @click="newsTab(1)">工作动态</div>
        </div>
      </div>
      <div class="notice-mian">
        <ul class="assist-list">
          <template v-for="(item, index) in list">
            <template v-if="index >= 0 && index <= 3">
              <router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
                <li>
                  <div class="text">
                    <div class="p">{{ item.title }}</div>
                    <div class="time">{{ item.published_time.substring(item.published_time.indexOf(' '), 0) }}</div>
                  </div>
                </li>
              </router-link>
            </template>
          </template>
          <li class="border-none">
            <div class="text cen" @click="goNewsPage">更多通知</div>
          </li>
        </ul>
      </div>
    </div>
    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
  </div>
</template>

<script>
import action from '@action'
import haedBanner from '@/components/headBanner'
import poster from '@/components/poster'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide,
    haedBanner,
    poster
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {
      articleClassify: this.$store.state.classify,
      tabsIndex: 0,
      newsTabIndex: 0,
      serviceList: [
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/6b24bc351bcc28b48e2d86bc92f81eab.jpg',
          title: '教材中心',
          desc:
            '本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求，随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。......',
          path: '/service?id=0',
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f65b37439085217a8ff5f67038821a1.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/90cf23d58250bc4959d3e5be66b7c5d1.jpg',
          title: '教学资源（老师）',
          desc: '',
          path: 'https://login.ezijing.com/xlearn/login/index',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/88a2da98b62ff7426cd0b6a383091f15.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/2855f686addf67862a67fc8e4171a5d3.jpg',
          title: '课程学习（学生）',
          desc: '',
          path: 'https://login.ezijing.com/xlearn/register',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/c1c08807bb48275835778286b6482d04.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/c178ccc3e41728ef24037b69e64a892a.jpg',
          title: '实训学习',
          desc: '',
          path: 'http://xtraining.ezijing.com/',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6d6772401687fe44c41bc5832b34ec9e.png'
        }
      ],
      examineeNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/8617726397bcc6fa81020934c57d92bd.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ef0878be9e9fa6deab5b9dcfac9af12b.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '可注册登录'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c7db419e6af3214fa53b1d4920cf7b5.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/76256d877bd6787af42d2f6010108a8b.png',
          text: '考生报名',
          path: '/hall?role=0&point=5',
          textActive: '可选择学校统一报名或在对应的考点报名'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/b5a6b0bf40f24545fd10cbf315e5839c.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/556e2554d2545d3d3a726dbcbaf20494.png',
          text: '学习课程',
          path: '/hall?role=0&point=1',
          textActive: '进入学习系统学习'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/9c4d618281f12680a367d212545cf041.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/53dd24cbf9c4c1a6ed078ab3b6049e95.png',
          text: '参加考试',
          path: '/hall?role=0&point=2',
          textActive: '考点和考场安排，准考证打印领取时间'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6bf9fedcbff1d13de413667b33787db3.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3639914b6dbe79d4b2e745159fd49230.png',
          text: '成绩查询',
          path: '/hall?role=0&point=3',
          textActive: '进入成绩查询系统'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
          text: '证书查询',
          path: '/hall?role=0&point=4',
          textActive: '进入证书查询系统'
        }
      ],
      teacherNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/2da6e70cac93900bdb1867458c9b7449.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/c92aa5f2800a9a5bbedce54bfa0d499b.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '可注册登录'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/284f07548eb240cc384a102f1b7efdda.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0c9823481d85f209b4a498945f31ea83.png',
          text: '师资培训报名',
          path: '/hall?role=1&point=t0',
          textActive: '提交报名资料，等待审核通知和培训通知'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/b278993ee5c29349ff83d1d9b4b596c9.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8d24a5c20a8ab87d26db73ccfacd2fba.png',
          text: '师资学习平台',
          path: '/hall?role=1&point=t1',
          textActive: '提供师资培训资料，辅助老师学习'
        },
        // {
        //   icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f9583c270a3302a352ae9bbba64099d.png',
        //   iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8a16c6cd1dc986075a002fe314f21d0d.png',
        //   text: '参加考试',
        //   path: '/hall?role=1&point=t1',
        //   textActive: '培训后参加统一考试'
        // },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/06f7b0220ab6d8d9d34f6d68258f2669.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/130affba0b6cefd278c31ddfab74acfc.png',
          text: '授权师资名单',
          path: '/hall?role=1&point=t2',
          textActive: '授予培训资格证书老师名单'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/70c3defef24fd1438ada43b3e1ccff87.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/fe6b2d4c31d7f6369468c675d5876671.png',
          text: '开班授课',
          path: '/hall?role=1&point=t3',
          textActive: '进入学习平台'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
          text: '证书查询',
          pathType: 4,
          path: this.isLogin ? this.queryCard() : '/hall?role=1&point=t4',
          textActive: '进入证书查询系统'
        }
      ],
      schoolNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/00e366f3cc15ab30c1fd285d10989bed.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/66dd597f670a07584897d03a4c6bd9ab.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '可注册登录'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1dc324792168ee1e6a07b5975e6e3d8b.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/02e1e75b3aed4a92f3038589091be1f2.png',
          text: '试点申报',
          path: '/hall?role=2&point=s5',
          textActive: '提交报名资料，等待审核通知'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/17e3d75022ee88d4661bff4ca61f0966.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/073a7d9317d0ff8d8876c4ce53d15bc2.png',
          text: '考点申报',
          path: '/hall?role=2&point=s1',
          textActive: '提交资料，等待审核通知'
        },
        // {
        //   icon: 'https://zws-imgs-pub.ezijing.com/static/public/ea6a2917391444208d9084c3205227b2.png',
        //   iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/55065b21e5ba9bc735a3d3527f07af79.png',
        //   text: '集中报名师训',
        //   path: '/hall?role=2&point=s2',
        //   textActive: '给老师分配帐号进入学习系统学习和线下统一培训'
        // },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/cc4885f2f4b6f566954cdb15381916f8.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/901044f1465a5497fef8135f9e2ce4ff.png',
          text: '统一实施教学',
          path: '/hall?role=2&point=s3',
          textActive: '发通知组织统一上课'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1505fd4535d858b4939e46f2534bfcaf.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3c3d204e15a400a7f74b4a9dad44cd55.png',
          text: '批量报名考试',
          path: '/hall?role=2&point=s4',
          textActive: '统计学员后统一报名'
        }
      ],
      offsetBtn: ['我是考生', '我是老师', '我是学校'],
      swiperList: [
        {
          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
          content: '关于1+X金融数字化营销证书考核站点申报'
        }
      ],
      swiperOptions: {
        on: {
          slideChangeTransitionStart: function() {
            _this.swiperIndex = this.activeIndex
          }
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // loop:true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      },
      swiperIndex: 0,
      videoShow: false,
      list: [],
      offsetTabIndex: 0,
      isLogin: false,
      options: {
        baseUrl: webConf.url,
        register: {
          data: {
            username: `ezijing-${new Date().getTime()}`
          },
          fields: ['account', 'code', 'password']
        },
        login: {
          account: {
            onSuccess: this.loginSuccess
          },
          phone: {
            onSuccess: this.loginSuccess
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    passport() {
      return this.$refs.passport
    }
  },
  created() {
    action.articleAction.getUserInfo().then(res => {
      if (res && res.code === 0) {
        console.log('111111111')
        // window.sessionStorage.userInfo = JSON.stringify(res.data)
        this.isLogin = true
      }
    })
  },
  mounted() {
    if (this.$route.query.type) {
      this.offsetTabIndex = this.$route.query.type
    }
    this.newsList()
  },
  methods: {
    loginSuccess(data) {
      this.passport.checkLoginStatus((isLogin, user = {}) => {
        window.sessionStorage.userInfo = JSON.stringify(user)
        this.isLogin = isLogin
        this.user = user
        this.$router.push('/my')
        window.location.reload()
      })
    },
    onReady(isLogin, user = {}) {
      this.user = user
      window.G.UserInfo = user
      window.sessionStorage.userInfo = JSON.stringify(user)
    },
    queryCard() {
      if (this.isLogin) {
        this.$router.push('/queryCard')
      } else {
        this.passport.login()
      }
    },

    register() {
      this.$router.push({
        path: '/index',
        query: {
          register: this.$route.query.register ? this.$route.query.register++ : 1
        }
      })
    },
    goNewsPage() {
      // this.passport.register()
      this.$router.push({
        path: '/news',
        query: {
          type: this.newsTabIndex
        }
      })
    },
    newsTab(n) {
      this.newsTabIndex = n
      this.newsList()
    },
    offsetTab(n) {
      this.$router.push({
        path: '/index',
        query: {
          type: n
        }
      })
      this.offsetTabIndex = n
    },
    tabs(n) {
      this.tabsIndex = n
    },
    goPage(path, n) {
      console.log(path, n, '0000')
      if (n) {
        window.open(path)
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    newsList() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'//
      // })
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        const findId = this.articleClassify[0].children.find(item => {
          return item.display_name === (this.newsTabIndex ? '工作动态' : '新闻动态')
        })
        action.articleAction.getArticle({ category_id: findId ? findId.id : 23 }).then(res => {
          this.list = res.data.list
          this.swiperList = []
          res.data.list.map((item, index) => {
            if (index <= 4) {
              this.swiperList.push({
                url: item.cover_pc_url,
                content: item.title,
                id: item.id
              })
            }
          })
          // loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width {
  width: 1200px;
  margin: 0 auto;
}
.home-box {
  background: #f8f8f8;
  padding-bottom: 80px;
  .home-head {
    img {
      width: 100%;
      display: block;
      // height: 240px;
    }
  }
  .home-office-hall {
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #444444;
      line-height: 33px;
      padding: 36px 0 16px;
    }
    .office-mian {
      display: flex;
    }
    .tab-btn-box {
      padding-top: 24px;
      li {
        width: 96px;
        height: 40px;
        background: none;
        border-radius: 23px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #444444;
        cursor: pointer;
        &.active {
          color: #fff;
          background: #a81a42;
          border-radius: 23px;
        }
      }
    }
    .item-box {
      display: flex;
      margin-left: 7px;
      li {
        width: 168px;
        height: 168px;
        background: #ffffff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
        border-radius: 4px;
        margin-left: 16px;
        transition: all 0.5s;
        &:hover {
          background: #a81a42;
          transform: translateY(-10px);
          .img {
            display: none;
            margin: 43px auto 15px auto;
          }
          .img-active {
            display: block;
          }
          .text {
            color: #fff;
            .span1 {
              display: none;
            }
            .span2 {
              display: block;
            }
          }
        }
        img {
          height: 50px;
          display: block;
          margin: 43px auto 20px auto;
        }
        .img-active {
          display: none;
        }
        .text {
          text-align: center;
          font-size: 16px;
          color: #444444;
          line-height: 18px;
          .span2 {
            display: none;
          }
          .span1 {
            display: block;
          }
        }
      }
    }
  }
  .notice-box {
    padding-top: 80px;
    .tab-btn {
      // display: flex;
      .title {
        font-size: 24px;
        font-weight: bold;
        color: #444444;
        line-height: 33px;
        margin-right: 23px;
        text-align: center;
      }
      .flex-btn {
        display: flex;
        width: 300px;
        margin: 50px auto;
        background-color: #fff;
        border-radius: 25px 25px 25px 25px;
      }
      .btn {
        flex: 1;
        cursor: pointer;
        line-height: 40px;
        color: #424242;
        border-radius: 25px 25px 25px 25px;
        text-align: center;
        font-size: 20px;
        &.active {
          color: #fff;
          background: #a81a42;
        }
      }
    }
    .notice-mian {
      display: flex;
      margin-top: 16px;
      .assist-list {
        width: 100%;
        background: #ffffff;
        border-radius: 4px;
        a {
          // &:nth-child(1){
          //   li{
          //     background: #A81A42;
          //     border-radius: 4px;
          //     .text{
          //       color: #fff;
          //     }
          //   }
          // }
        }
        li {
          padding: 0 20px;
          &:hover {
            background: #a81a42;
            border-radius: 4px;
            .text {
              color: #fff;
            }
          }
          cursor: pointer;
          &.border-none {
            border: none;
          }
          .text {
            display: flex;
            .p {
              width: 800px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .time {
              margin-left: auto;
            }
            // width: 423px;
            // margin: 0 auto;
            height: 55px;
            border-bottom: 1px solid #eee;
            line-height: 55px;
            font-size: 18px;
            color: #444444;
            &.cen {
              text-align: center;
            }
          }
        }
      }
      .slide-box {
        cursor: pointer;
        position: relative;
        width: 713px;
        height: 280px;
        margin-left: auto;
        .item-swiper {
          width: 100%;
          height: 100%;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .assist {
          display: flex;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 44px;
          background: rgba(0, 0, 0, 0.3);
          z-index: 99;
          .text {
            font-size: 14px;
            color: #ffffff;
            line-height: 44px;
            margin-left: 24px;
          }
        }
        .pagination {
          display: flex;
          margin-left: auto;
          align-items: center;
          padding-right: 40px;
          span {
            width: 8px;
            height: 8px;
            background: #000000;
            opacity: 0.2;
            border-radius: 50%;
            margin-left: 8px;
            &.active {
              opacity: 1;
              background: #fff;
            }
          }
        }
      }
    }
  }
  .advert-box {
    width: 1200px;
    margin: 36px auto;
    img {
      width: 1200px;
      display: block;
    }
  }
  .service-box {
    margin-bottom: 36px;
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #444444;
      line-height: 33px;
    }
    ul {
      margin-top: 16px;
      display: flex;
      li {
        width: 300px;
        height: 400px;
        position: relative;
        .icon {
          position: absolute;
          top: 66px;
          left: 50%;
          -webkit-transform: translateX(-50%);
        }
        .bg {
          width: 100%;
          height: 100%;
          display: block;
        }
        // transition: all .5s;
        &:hover {
          .mask {
            background: rgba(168, 26, 66, 0.5);
            .content-box {
              bottom: 20px;
              .tit {
                color: #fff;
                border-bottom: 1px solid #fff;
              }
              .desc {
                display: block;
              }
              .more {
                display: block;
                cursor: pointer;
              }
            }
          }
        }
        .mask {
          transition: all 0.5s;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // background: rgba(0,0,0,0.5);
          .content-box {
            position: absolute;
            left: 16px;
            bottom: 55px;
            .tit {
              width: auto;
              font-size: 18px;
              font-weight: bold;
              color: rgba(175, 28, 64, 1);
              line-height: 25px;
              border-bottom: 1px solid rgba(175, 28, 64, 1);
            }
            .desc {
              width: 212px;
              font-size: 14px;
              color: #ffffff;
              line-height: 20px;
              margin-top: 12px;
              display: none;
            }
            .more {
              font-size: 14px;
              color: #ffffff;
              line-height: 20px;
              margin-top: 20px;
              display: none;
            }
          }
        }
      }
    }
  }
}

.train-box {
  .img-group {
    padding-top: 60px;
    .img-group_item {
      display: flex;
      justify-content: space-between;
    }
  }
}
.pt-80 {
  padding-top: 80px;
}
h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 34px;
  text-align: center;
  margin-bottom: 50px;
}
.describe {
  font-size: 18px;
  color: #666666;
  line-height: 36px;
  margin-bottom: 50px;
}
.describe-img {
  width: 100%;
  display: block;
}
.yx-box {
  background-color: #fff;
  padding: 45px 50px;
}
</style>
