<template>
  <div class="college-content">
    <div class="mian-title">{{ $t('menu.servicesChild.college') }}</div>
    <div class="mian">
      <tab :data="tabList" @tabChangeIndex="tabChangeIndex" />
      <div class="college-content-mian">
        <template v-if="showModule === 0">
          <div class="module-1 module-content-box">
            <img src="https://webapp-pub.ezijing.com/www/pc/college-m1-banner.jpg" alt="" class="banner" />
            <div class="content-mian">
              <img
                :src="
                  $cookies.get('lang') == 'en-US'
                    ? 'https://webapp-pub.ezijing.com/www/pc/industry/image2.png'
                    : ' https://webapp-pub.ezijing.com/www/pc/industry/image2.png'
                "
              />
              <p style="font-size: 18px;font-weight: 400;color: #A81840;margin-bottom:33px">
                数字经济人才需求-能力模型
              </p>
              <img
                :src="
                  $cookies.get('lang') == 'en-US'
                    ? 'https://webapp-pub.ezijing.com/www/pc/industry/image3.png'
                    : ' https://webapp-pub.ezijing.com/www/pc/industry/image3.png'
                "
              />
              <div>
                <p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
                  紫荆数字经济产业学院有以下主要特点
                </p>
                <img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="tabActive === 0" />
                <img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 1" />
                <img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" />
                <img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 3" />
                <ul>
                  <li
                    v-for="(item, index) in navList"
                    :key="index"
                    class="li"
                    @click="navActive(item, index)"
                    :class="{ active: index === tabActive }"
                  >
                    <img :src="item.img" alt="" style="width:43px;height:43px" />
                    <div class="name">{{ item.name }}</div>
                  </li>
                </ul>
                <div v-if="tabActive === 0" class="part">
                  <ul>
                    <li>数字经济人才国家战略</li>
                    <li>企业人才需求强劲</li>
                  </ul>
                  <p class="desc">
                    “加快数字化发展，建设数字中国”
                    国家推进数字化转型的认识和决心不断强化，不断出台支持政策，数字化转型的发展化境不断优化。
                    <br />
                    <br />
                    预计2035年中国整体数字经济规模将近16万亿，总就业容量达到4.15亿人，从目前存量看，中国国高技能人才仅占整体劳动力市场的4%，数字经济类人才缺口巨大。
                  </p>
                </div>
                <div v-if="tabActive === 1" class="part">
                  <ul>
                    <li>专业能力提升</li>
                    <li>解决实习就业</li>
                    <li>提升院校专业影响力</li>
                  </ul>
                  <p class="desc">
                    依据数字经济岗位胜任力模型，有针对性的制定人才培养计划，全面提升人才的数字专项技能。引产入校，充分解决学生实习就业的问题，做好学员从学生到职业人的角色转化工作。产学研的融合，进一步提升院校的专业影响力。
                  </p>
                </div>
                <div v-if="tabActive === 2" class="part">
                  <ul>
                    <li>学生：学-用-就业</li>
                    <li>学校：招生-教学-师资-实习-就业</li>
                    <li>企业：人才培养-岗位培训-实习-招聘</li>
                  </ul>
                  <p class="desc">
                    学生，学以致用，从学习技能到实际使用技能为企业创造价值，得到社会企业的认可，达到就业的目的。<br /><br />
                    学校，以产业发展为方向，以科研为先导，以选拔招生为前提，以教学为根本，以实习为抓手，以学生就业为目的，使学校全栈得到综合提升。<br /><br />
                    企业，从企业发展的角度，对人才进行前置性储备，建立人才培养体系，引进实习实训，发现人才、培养人才、留住人才，形成企业的核心竞争力。
                  </p>
                </div>
                <div v-if="tabActive === 3" class="part">
                  <ul>
                    <li>贯穿整个教学周期</li>
                    <li>服务院校长期专业发展目标</li>
                    <li>多种产品提供给学校、学生</li>
                  </ul>
                  <p class="desc">
                    从人才培养方案咨询、课程体系建设、教师培训、线上线下授课、落地实习实训、指导学生就业，全方位贯彻整个教学周期。<br /><br />
                    以省市乃至国家一流产业学院为目标，服务院校长期专业发展。<br /><br />
                    从国内外，从线上线下，从产学研，从校师生，多个层面提供服务。<br /><br />
                  </p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="showModule === 1">
          <div class="module-2 module-content-box">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/img5.png" alt="" class="banner" />
            <img
              :src="
                $cookies.get('lang') == 'en-US'
                  ? 'https://webapp-pub.ezijing.com/www/pc/industry/image24.png'
                  : 'https://webapp-pub.ezijing.com/www/pc/industry/image24.png'
              "
              alt=""
              style="padding-left:50px;padding-top:51px"
            />

            <p style="color: #424242;font-size:16px;font-weight: 400;padding-left:50px;margin-top:30px;">
              数字经济产业学院服务项目
            </p>
            <p
              style="color: #424242;font-size:14px;margin-top:20px;font-weight: 300;padding-left:50px;margin-bottom:17px"
            >
              为学校、学生和企业提供长期的闭环服务
            </p>
            <ul>
              <li
                v-for="(item, index) in tabsList"
                :key="index"
                class="li"
                @click="tabsClick(item, index)"
                :class="{ active: index === tabsActive }"
              >
                <img :src="item.img" alt="" style="width:43px;height:43px" />
                <div class="name">{{ item.name }}</div>
                <div style="color: #666666;font-size:14px;font-weight: 300">{{ item.dec }}</div>
              </li>
            </ul>
            <div class="content-mian">
              <div class="con-img-box" v-if="tabsActive === 0">
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
                  "
                  alt=""
                />
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image7.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image7.png'
                    "
                    alt=""
                    style="width: 100%;;height:100%"
                  />
                  <p class="desc">
                    面向产业转型发展和区域经济社会需求，清控紫荆教育与地方院校进行专业共建。以深化产教深度融合，创新人才培养方案、课程体系、方式方法、保障机制等。促成课程内容与技术发展衔接、教学过程与生产过程对接、人才培养与产业需求融合。达到共同建设省市乃至国家级的一流学科。
                  </p>
                </div>
                <p style="font-size:16px;color:#424242;margin-bottom:21px">三大专业范畴，10余个特色专业方向。</p>
                <div class="parts">
                  <div class="part">
                    <img src="https://webapp-pub.ezijing.com/www/pc/industry/img16.png" alt="" />
                    <p class="title">新文科</p>
                    <p class="dec">数字金融.数字营销,商业数据分析、数字媒体技术、智能运营；…</p>
                  </div>
                  <div class="part">
                    <img src="https://webapp-pub.ezijing.com/www/pc/industry/img17.png" alt="" />
                    <p class="title">新工科</p>
                    <p class="dec">人工智能方向、数据技术方向、云计算方向、网络安全方向；</p>
                  </div>
                  <div class="part">
                    <img src="https://webapp-pub.ezijing.com/www/pc/industry/img18.png" alt="" />
                    <p class="title">智能制造</p>
                  </div>
                </div>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image9.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image9.png'
                  "
                  alt=""
                />
              </div>
              <div class="con-img-box" v-if="tabsActive === 1">
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image10.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image10.png'
                    "
                    alt=""
                    style="width: 100%;height:100%"
                  />
                  <p class="desc">
                    紫荆教育数字经济产业学院SAAS平台（以下简称“ZJSAAS平台”）是由紫荆教育经过6年时间的教育科技实践，专门为与高校合作建立
                    数字经济产业学院而研发，以提高教学质量为目的，以数据科技为基础，
                    以学生为核心，100+功能模块涵盖信息宣传、学生管理、教师管理、教学内容管理、教学过程实施、课程实训以及实习就业等工作。
                  </p>
                </div>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image11.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image11.png'
                  "
                  alt=""
                />
              </div>
              <div class="con-img-box" v-if="tabsActive === 2">
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image12.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image12.png'
                    "
                    alt=""
                    style="width: 100%;;height:100%"
                  />
                  <p class="descc">
                    清控紫荆教育针对数字经济岗位要求，以培养学生综合职业能力为导向，结合学校数字经济专业实训条件，
                    提出了“引产入校、以产促教”的工学结合一体化人才培养思路，实施“边教、边做、边生产、边学习”。引
                    进企业产品生产任务，将一体化课程项目教学与实际产品生产相结合，灵活调整专业教学内容，安排学生参
                    与产品生产加工、市场推广运营、经营管理等环节。通过各种不同项目的教学和真实产品的生产经营，使学
                    生掌握各种岗位的技能与能力，了解企业经营生产组织方式、工艺流程、产品加工技术要求、市场推广、运
                    营管理等，形成必备的职业核心技能和素养。<br />清控紫荆教育追求深度融合，协同创新，充分发挥企业和学校在
                    产学融合中的作用，整合资源、优化结构，充分实现产学协同发展，培养高素质、高技能人才，并且形成独有的特色。
                  </p>
                </div>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image13.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image13.png'
                  "
                  alt=""
                />
              </div>
              <div class="con-img-box" v-if="tabsActive === 3">
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image14.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image14.png'
                    "
                    alt=""
                    style="width: 100%;;height:100%"
                  />
                  <p class="desc">
                    清控紫荆教育实习就业服务以专业课程导入为前提，分为实训、就业指导与实习上岗三个层次。完成学生和用人企业的无缝对接，达成“学位即岗位”的目标。
                  </p>
                </div>
                <p style="font-size:18px;font-weight:400;color:#000000;margin-bottom:20px">
                  企业人力资源用人模式的改变
                </p>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image15.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image15.png'
                  "
                  alt=""
                />
                <p style="color: #777777;font-weight: 300;font-size: 14px;margin-bottom:40px">
                  清控紫荆教育的产业、企业、学校联动的方式，在降低企业人力资源成本的同时提升了学生在实战项目中的应用技能，最终达到产业人才培养的目的。
                </p>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image16.png'
                      : 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image16.png'
                  "
                  alt=""
                />
              </div>
              <div class="con-img-box" v-if="tabsActive === 4">
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image17.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image17.png'
                    "
                    alt=""
                    style="width: 100%;;height:100%"
                  />
                  <p class="desc">
                    以新兴技术为基础，聚焦数字经济领域，清控紫荆教育汇集顶尖数字理论和应用研究专家，整合先进技术资源，通过产学研紧密
                    合作，建设成具有引领作用的创新型数字经济实验室，以案例作为实验室的核心要素，旨在创新技术研发、企业培育、校企合作培养专
                    业人才等方面发挥重要作用，为数字经济人才提供学习提升的平台与机会，强化产学研协作培养顶尖数字人才，助推国家人才发展战略。
                  </p>
                </div>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image18.png'
                      : 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image18.png'
                  "
                  alt=""
                />
              </div>
              <div class="con-img-box" v-if="tabsActive === 5">
                <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
                  <img
                    :src="
                      $cookies.get('lang') == 'en-US'
                        ? 'https://webapp-pub.ezijing.com/www/pc/industry/image19.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/industry/image19.png'
                    "
                    alt=""
                    style="width: 100%;;height:100%"
                  />
                  <p class="desc">
                    以新兴技术为基础，聚焦数字经济领域，清控紫荆教育汇集顶尖数字理论和应用研究专家，整合先进技术资源，通过产学研紧密
                    合作，建设成具有引领作用的创新型数字经济实验室，以案例作为实验室的核心要素，旨在创新技术研发、企业培育、校企合作培养专
                    业人才等方面发挥重要作用，为数字经济人才提供学习提升的平台与机会，强化产学研协作培养顶尖数字人才，助推国家人才发展战略。
                  </p>
                </div>
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image20.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image20.png'
                  "
                  alt=""
                /><img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image21.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image21.png'
                  "
                  alt=""
                /><img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image22.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image22.png'
                  "
                  alt=""
                /><img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/industry/image23.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/industry/image23.png'
                  "
                  alt=""
                />
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import tab from '../../components/services/tab'
export default {
  components: {
    tab
  },
  data() {
    return {
      tabList: [
        {
          name: this.$t('menu.college.tit1')
          // 现代产业学院'
        },
        {
          name: this.$t('menu.college.tit2')
          // name: '数字金融'
        }
      ],
      navList: [
        {
          name: '需求强劲',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png'
        },
        {
          name: '瞄准痛点',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png'
        },
        {
          name: '闭环服务',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png'
        },
        {
          name: '长期共赢',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png'
        }
      ],
      tabsList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
          name: '专业共建',
          dec: '专业提升'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image82.png',
          name: 'SAAS软件平台',
          dec: '教学管理'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image83.png',
          name: '引产入校',
          dec: '实训基地'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image84.png',
          name: '实习就业',
          dec: '企业人力资源服务'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png',
          name: '数字经济实验室',
          dec: '前沿案例'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png',
          name: '培训证书',
          dec: '专业补充'
        }
      ],
      tabActive: 0,
      tabsActive: 0,
      showModule: 0
    }
  },
  created() {
    this.tabActive = 0
    this.tabsActive = 0
  },
  methods: {
    navActive(item, index) {
      this.tabActive = index
    },
    tabsClick(item, index) {
      this.tabsActive = index
    },
    tabChangeIndex(n) {
      this.showModule = n
    }
  },
  computed: {
    m1SetStyle() {
      return url => {
        return `background: url(${url});background-size: 100% 100%`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.college-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
  .mian {
    display: flex;
    justify-content: space-between;
  }
  .mian-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 100%;
    color: #aa1941;
    padding: 48px 0 31px;
  }
  .college-content-mian {
    width: 1000px;
    .module-content-box {
      background: #fff;
      .banner {
        width: 100%;
        height: 320px;
        display: block;
      }
    }
    .module-1 {
      .content-mian {
        padding: 60px 50px 65px;
        .desc {
          font-size: 14px;
          font-weight: 300;
          line-height: 28px;
          color: #777777;
          opacity: 1;
        }

        .m1-new-item {
          .title {
            font-size: 22px;
            font-weight: bold;
            line-height: 100%;
            color: #424242;
            padding-top: 53px;
            padding-bottom: 20px;
          }
          .tips {
            font-size: 16px;
            line-height: 32px;
            color: #424242;
            font-weight: 300;
            padding: 20px 0 50px;
          }
          .item-box {
            display: flex;
            .left-box {
              width: 562px;
              height: 385px;
              position: relative;
              .bg {
                width: 100%;
                height: 100%;
                display: block;
                transition: all 0.5s;
              }
              .txt {
                position: absolute;
                top: 50%;
                left: 19px;
                transform: translateY(-50%);
                width: 155px;
              }
              .img1 {
                width: 155px;
              }
              .img11 {
                width: 415px;
              }
              overflow: hidden;
              &:hover {
                .bg {
                  transform: scale(1.1);
                }
              }
            }
            .right-box {
              width: 329px;
              margin-left: 4px;
              .items {
                position: relative;
                width: 100%;
                height: 190px;
                margin-bottom: 4px;
                overflow: hidden;
                &:hover {
                  .bg {
                    transform: scale(1.1);
                  }
                }
              }
              .bg {
                width: 100%;
                height: 100%;
                display: block;
                transition: all 0.5s;
              }
              .txt {
                position: absolute;
                top: 50%;
                left: 19px;
                transform: translateY(-50%);
                &.t1 {
                  width: 109px;
                }
                &.t11 {
                  width: 253px;
                }
                &.t2 {
                  width: 181px;
                }
                &.t22 {
                  width: 303px;
                }
              }
            }
          }
        }
        img {
          width: 100%;
          display: block;
          &:nth-child(1) {
            margin-bottom: 18px;
          }
          &:nth-child(2) {
            margin-bottom: 22px;
          }
          &:nth-child(3) {
            width: 874px;
            margin-bottom: 54px;
          }
          &:nth-child(4) {
            margin-bottom: 12px;
          }
          &:nth-child(5) {
            width: 863px;
            margin-bottom: 50px;
          }
        }

        ul {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 62px;
          // li {
          //   // padding: 15px;
          //   margin-left: 25px;

          // }
          .li {
            list-style-type: disc;
            color: #333;
            font-size: 18px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: 146px;
            height: 146px;
            opacity: 1;
            background: #f4f4f4;
            cursor:pointer;
            .name{
              font-size: 16px;
              color: #424242;
              font-weight: 400;
            }
          }
          .active {
            background-color: #fff;
            border-bottom: 6px solid #a81840;
            .name{
              color:#a81840;
            }
          }
        }

        .part {
          li {
            list-style-type: disc;
            color: #333;
            font-size: 18px;
            margin-left: 25px;
            padding: 15px;
          }
        }
      }
    }
    .module-2 {
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        .li {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          width: 151px;
          height: 156px;
          background: #f4f4f4;
          cursor:pointer;
          .name{
            font-size: 16px;
            color: #424242;
            font-weight: 400;
          }
        }
        .active {
          background: #ffffff;
          border-top: 6px solid #a81840;
          .name{
            color:#a81840;
          }
        }
      }

      .content-mian {
        padding: 60px 50px 65px;

        .con-img-box {
          .desc {
            position: absolute;
            top: 50%;
            left: 98px;
            right: 56px;
            margin-top: -50px;
            color: #fff;
            line-height: 26px;
            font-size: 14px;
            font-weight: 300;
          }
          .descc {
            top: 35px;
            bottom: 30px;
            left: 55px;
            right: 56px;
            position: absolute;
            color: #fff;
            font-size: 14px;
            font-weight: 300;
            line-height: 26px;
          }

          img {
            display: block;
            &:nth-child(1) {
              width: 768px;
              margin-bottom: 67px;
            }
            &:nth-child(2) {
              width: 100%;
              margin-bottom: 38px;
            }
            &:nth-child(3) {
              width: 864px;
              // margin-bottom: 78px;
            }
          }
          .parts {
            // padding: 50px 36px;
            display: flex;
            justify-content: space-around;
            .part:hover {
              background-color: #fff;
            }
            .part {
              width: 286px;
              height: 380px;
              display: flex;
              flex-direction: column;
              background: #f9f8f8;
              img {
                width: 100%;
                height: 190px;
              }
              .title {
                font-size: 16px;
                font-weight: 400;
                line-height: 34px;
                color: #333333;
                opacity: 1;
                margin-left: 25px;
                margin-top: -40px;
              }
              .dec {
                font-size: 14px;
                font-weight: 300;
                line-height: 26px;
                color: #666666;
                opacity: 1;
                margin-left: 25px;
              }
            }
          }
        }
        .ul-tit {
          font-size: 22px;
          font-weight: 500;
          line-height: 100%;
          padding: 0 0 36px;
          color: #424242;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin-right: 5px;
            margin-bottom: 5px;
            width: 220px;
            height: 170px;
            position: relative;
            overflow: hidden;
            &:hover {
              img {
                transform: scale(1.1);
              }
            }
            img {
              transition: all 0.3s;
              width: 100%;
              height: 100%;
              display: block;
            }
            .pop-txt {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              .name {
                position: absolute;
                bottom: 20px;
                left: 20px;
                font-size: 16px;
                font-weight: 300;
                // line-height: 170px;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
