<template>
  <div class="occupation-content">
    <div class="mian-title">{{ $t('home.service.career') }}</div>
    <div class="mian">
      <tab :data="tabList" @tabChangeIndex="tabChangeIndex" />
      <div class="occupation-content-mian">
        <template v-if="showModule === 0">
          <div class="module-0 module-content-box">
            <img
              :src="
                isEn
                  ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_01.png'
                  : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_01.png'
              "
              class="banner"
            />
            <div class="content-mian" style="padding-bottom:0;">
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_02.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_02.png'
                "
              />
              <div class="module-title" style="margin-bottom:15px;">{{isEn ? '招生对象' : '招生对象'}}</div>
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_03.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_03.png'
                "
                style="margin-bottom:35px;"
              />
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_04.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_04.png'
                "
                style="margin-bottom:15px;"
              />
              <div class="module-title" style="margin-bottom:15px;">{{isEn ? '注册报名' : '注册报名'}}</div>
              <presence />
              <div class="module-title" style="margin-bottom:15px;">{{isEn ? '项目收获' : '项目收获'}}</div>
              <div class="project-harvest">
                <div class="title">战胜三“难”：<span>找工作、评绩效、求升职</span></div>
                <div class="content">
                  <div class="m1">
                    <ul>
                      <li class="item1">
                        <p>老板与HR们的考量基石<br>——<span>能力素质模型</span></p>
                        <div>哈佛大学教授<br>David McClelland提出</div>
                      </li>
                      <li :class="{item:true, active: count%3 === 1}">
                        <div class="top">
                          <p>专业能力</p>
                          <span>Profession Competencies</span>
                        </div>
                        <div class="bottom">
                          <p>特定角色和工作所需要的特<br>殊的技能，针对岗位设定<br>（如程序员的编程能力）</p>
                        </div>
                      </li>
                      <li :class="{item:true, active: count%3 === 2}">
                        <div class="top">
                          <p>核心能力</p>
                          <span>Core Attributes</span>
                        </div>
                        <div class="bottom">
                          <p>每一位员工都必须具备的能力</p>
                          <div class="list">
                            <span>务实</span>
                            <span>创新</span>
                            <span>自律</span>
                          </div>
                        </div>
                      </li>
                      <li :class="{item:true, active: count%3 === 0}">
                        <div class="top">
                          <p>通用能力</p>
                          <span>Shared Capabilities</span>
                        </div>
                        <div class="bottom">
                          <p>适用于多个角色的基本素质</p>
                          <div class="list">
                            <span>沟通交流</span>
                            <span>分析思维</span>
                            <span>人际关系</span>
                            <span>领导能力</span>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <p class="tips">——要<span>专业</span>，更要<span> “通用能力” </span>与<span> “核心能力” </span> </p>
                  </div>
                  <img
                    :src="
                      isEn
                        ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_05.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_05.png'
                    "
                    style="margin-bottom:35px;"
                  />
                  <img
                    :src="
                      isEn
                        ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_06.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_06.png'
                    "
                    style="margin-bottom:35px;"
                  />
                  <img
                    :src="
                      isEn
                        ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_07.png'
                        : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_07.png'
                    "
                    style="margin-bottom:35px;"
                  />
                </div>
              </div>
            </div>
            <img
              :src="
                isEn
                  ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_08.png'
                  : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_08.png'
              "
              style="width:100%;"
            />
            <div class="content-mian">
              <div class="module-title">{{isEn ? 'Course Settings' : '课程设置'}}</div>
              <div class="course-set">
                <div>
                  <h5>{{isEn ? '商业基础补充' : '商业基础补充'}}</h5>
                  <p>{{isEn ? '《经济学原理》' : '《经济学原理》'}}</p>
                  <p>{{isEn ? '《金融市场学》' : '《金融市场学》'}}</p>
                </div>
                <div>
                  <h5>{{isEn ? '管理思维训练' : '管理思维训练'}}</h5>
                  <p>{{isEn ? '《财务分析》' : '《财务分析》'}}</p>
                  <p>{{isEn ? '《运营管理》' : '《运营管理》'}}</p>
                  <p>{{isEn ? '《营销管理与数字化营销》' : '《营销管理与数字化营销》'}}</p>
                </div>
                <div>
                  <h5>{{isEn ? '领导能力提升' : '领导能力提升'}}</h5>
                  <p>{{isEn ? '《管理沟通》' : '《管理沟通》'}}</p>
                  <p>{{isEn ? '《组织行为与领导力》' : '《组织行为与领导力》'}}</p>
                  <p>{{isEn ? '《战略管理》' : '《战略管理》'}}</p>
                </div>
              </div>
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_10.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_10.png'
                "
                style="margin-bottom:35px;"
              />
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
                "
                style="margin-bottom:35px;"
              />
            </div>
          </div>
        </template>
        <template v-if="showModule === 1">
          <div class="module-1 module-content-box">
            <img
              :src="
                isEn
                  ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_01.png'
                  : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_01.png'
              "
              class="banner"
            />
            <div class="content-mian">
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_02.png?v=111'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_02.png?v=111'
                "
                class="img1"
              />
              <img
                v-if="isEn"
                src="https://webapp-pub.ezijing.com/www/pc/occupation/occupation3.png"
              />
              <div class="module-title">{{isEn ? '新职业标准研发' : '新职业标准研发'}}</div>
              <div class="module-sub-title">
                <span>{{isEn ? '关注领域' : '关注领域'}}</span>
              </div>
              <div class="swiper-content">
                <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png">
                      <p>
                        <span>{{isEn ? '金融财经类' : '金融财经类'}}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png">
                      <p>
                        <span>{{isEn ? '数字化营销类' : '数字化营销类'}}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png">
                      <p>
                        <span>{{isEn ? '新媒体运营类' : '新媒体运营类'}}</span>
                      </p>
                    </div>
                    <div class="swiper-slide">
                      <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png">
                      <p>
                        <span>{{isEn ? '品牌运营类' : '品牌运营类'}}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="swiper-btn swiper-button-prev">
                  <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
                </div>
                <div class="swiper-btn swiper-button-next">
                  <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
                </div>
              </div>
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_03.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_03.png'
                "
                class="img3"
              />
              <div class="module-sub-title">
                <span>{{isEn ? '合作领域' : '合作领域'}}</span>
              </div>
              <div class="card-list">
                <div class="item item1">
                  <p>新职业标准研究</p>
                </div>
                <div class="item item2">
                  <p>新职业培训课程体系研究</p>
                </div>
                <div class="item item3">
                  <p>新职业培训教材编写</p>
                </div>
                <div class="item item4">
                  <p>职业鉴定质量管理体系研究</p>
                </div>
                <div class="item item5">
                  <p>职业考评系统研究</p>
                </div>
                <div class="item item6">
                  <p>新职业培训课程体系研究</p>
                </div>
              </div>
              <div class="module-title">{{isEn ? '社会考核评价组织' : '社会考核评价组织'}}</div>
              <div class="module-sub-title">
                <span>{{isEn ? '职业技能鉴定' : '职业技能鉴定'}}</span>
              </div>
              <ul class="img-text">
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_01.png" alt="" />
                  <div class="pop">
                    <div class="name">
                      {{
                        isEn ? 'Digital Marketing of Financial Products' : '金融产品数字化营销'
                      }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_02.png" alt="" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Internet-based Marketing Operator' : '互联网营销师' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_03.png" alt="" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Digital Marketing Specialist' : '数字化营销师' }}
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_imgtext_04.png" alt="" />
                  <div class="pop">
                    <div class="name">
                      {{ isEn ? 'Omni-media Operation Staff' : '全媒体运营师' }}
                    </div>
                  </div>
                </li>
              </ul>
              <!-- <img src="https://webapp-pub.ezijing.com/www/pc/occ-i5.png" alt="" class="img5" /> -->
              <img
                :src="
                  isEn
                    ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_04.png'
                    : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_04.png'
                "
                class="img3"
              />
              <div style="position:relative;">
                <img
                  :src="
                    isEn
                      ? 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_05.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/services/job/occupation_05.png'
                  "
                  class="img3"
                />
                <p style="position:absolute;left:50px;bottom:60px;color:#fff;">“金融行业推荐信” 与 “实习推荐”</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import tab from '../../components/services/tab'
import presence from '../../components/services/presence'
export default {
  components: { tab, presence },
  data() {
    const _this = this
    return {
      module2: {
        list: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb1.jpg', text: '数字化营销' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb2.jpg', text: '数字化运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb3.jpg', text: '智能投顾' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb4.jpg', text: '风险管理' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb5.jpg', text: '金融数据分析' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb6.jpg', text: '财务会计' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb7.jpg', text: '金融建模' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m2-mb8.jpg', text: '投资分析' }
        ]
      },
      module3: {
        list: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb1.jpg', text: '数字化运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2.jpg', text: '广告策划' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb3.jpg', text: '媒体公共' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb4.jpg', text: '营销策划' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb5.jpg', text: '渠道管理' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb6.jpg', text: '品牌管理运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb7.jpg', text: '产品设计' }
        ],
        list2: [
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-1.jpg', text: '互联网运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-2.jpg', text: '新媒体运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-3.jpg', text: '网站运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-4.jpg', text: '电商运营' },
          { image: 'https://webapp-pub.ezijing.com/www/pc/college-m3-mb2-5.jpg', text: '活动策划运营' }
        ]
      },
      tabList: [
        {
          // 未来管理者项目
          name: this.isEn ? 'FUTURE MANAGES PROJECT' : '未来管理者项目'
        },
        {
          // 未来管理者项目
          name: this.isEn ? '新职业' : '新职业'
        }
      ],
      showModule: 0,
      isEn: false,
      listData: [],
      swiperOption: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          init() {
            _this.swiper.slideNext()
          }
        }
      },
      count: 1
    }
  },
  created() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
    const timer = setInterval(() => {
      this.count++
      console.log(this.count)
    }, 3000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  methods: {
    tabChangeIndex(n) {
      this.showModule = n
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    m1SetStyle() {
      return url => {
        return `background: url(${url});background-size: 100% 100%`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.occupation-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;
  }
  .occupation-content-mian {
    width: 1000px;
    .module-content-box {
      background: #fff;
      .banner {
        width: 100%;
        height: 320px;
        display: block;
      }
      .module-title{
        font-size:22px;
        font-weight: 500;
        line-height:34px;
        color:#424242;
      }
      .module-sub-title{
        span{
          display:inline-block;
          font-size:20px;
          line-height:36px;
          color:#424242;
          border-bottom:1px solid #aa1941;
          margin-top:20px;
        }
      }
      .content-mian{
        padding: 60px 50px 65px;
        .swiper-content{
          padding: 0 25px;
          margin-top:37px;
          position:relative;
          // overflow: auto;
          // width: 100%;
          .swiper-slide{
            position: relative;
            width: 176px;
            height: 224px;
            // margin-top: 10px;
            p{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              text-align:center;
              background: rgba(51, 51, 51, 0.65);
              box-sizing: border-box;
              padding-top:92px;
              font-size: 20px;
              color: #FEFEFE;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              span{
                display:block;
                line-height: 40px;
                font-size:16px;
              }
            }
            img{
              width: 100%;
            }
          }
          .swiper-slide-active {
            width: 176px;
            height: 224px;
            margin-top: 0;
            img{
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .swiper-btn{
            width:20px;
            height:35px;
            position:absolute;
            left:-5px;
            top:50%;
            transform:translateY(-50%);
            z-index:2;
            img{
              width:100%;
              height:100%;
              display:block;
            }
          }
          .swiper-button-next{
            left:unset;
            right: -5px;
          }
        }
        .card-list{
          display:flex;
          flex-wrap:wrap;
          justify-content:space-around;
          margin-top:20px;
          .item{
            width: 280px;
            height: 130px;
            background: #F4F4F4;
            opacity: 1;
            border-radius: 5px;
            text-align:center;
            padding:70px 0 0;
            border-bottom:#F4F4F4 5px solid;
            margin-bottom:20px;
            cursor:pointer;
            p{
              line-height:60px;
            }
          }
          .item:hover{
            border-color:#aa1941;
          }
          .item1{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_01.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item1:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_01_on.png');
          }
          .item2{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_02.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item2:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_02_on.png');
          }
          .item3{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_03.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item3:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_03_on.png');
          }
          .item4{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_04.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item4:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_04_on.png');
          }
          .item5{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_05.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item5:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_05_on.png');
          }
          .item6{
            background:#F4F4F4 url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_06.png') center 30px no-repeat;
            background-size:40px 43px;
          }
          .item6:hover{
            background-image: url('https://webapp-pub.ezijing.com/www/pc/services/job/occupation_icon_06_on.png');
          }
        }
        img {
          width: 100%;
          display: block;
        }
        .module-title{
          font-size:22px;
          font-weight: 500;
          line-height:34px;
          color:#424242;
        }
        .course-set{
          display:flex;
          justify-content: space-between;
          margin:36px 0 40px;
          div{
            width:31%;
            border-top:8px solid #F9F8F8;
            background:#F9F8F8;
            text-align:center;
            height:220px;
            box-sizing:border-box;
            cursor:pointer;
            h5{
              line-height:60px;
              font-size:18px;
              color:#aa1941;
            }
            p{
              line-height:34px;
              color:#424242;
            }
          }
          div:hover{
            border-color:#aa1941;
            background:#fff;
            box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
          }
        }
      }
    }
    .module-0{
      .content-mian{
        .project-harvest{
          .title{
            font-size:20px;
            span{
              color: #aa1941;
            }
          }
          .content{
            background: #F7F7F7;
            padding:20px 0 20px;
            margin-top:20px;
            .m1{
              margin:0 35px 20px 20px;
              ul{
                display:flex;
                justify-content: space-between;
                padding-bottom:30px;
                li{
                  width:210px;
                  height:268px;
                }
                li.item{
                  background:#fff;
                  border-radius:10px;
                  transition:0.5s;
                  .top{
                    border-bottom:1px solid #E5E5E5;
                    padding:16px 10px;
                    p{
                      font-size:14px;
                    }
                    span{
                      color:#777;
                    }
                  }
                  .bottom{
                    padding:40px 10px 0;
                    color:#666;
                    .list{
                      display:flex;
                      flex-wrap: wrap;
                      margin-top:20px;
                      span{
                        width:70px;
                        padding-left:10px;
                        position:relative;
                        margin-right:10px;
                      }
                      span:after{
                        position:absolute;
                        left:2px;
                        top:8px;
                        content: '';
                        width:4px;
                        height:4px;
                        border-radius:50%;
                        background:#aa1941;
                      }
                    }
                  }
                }
                li.item.active{
                  background: #A81840;
                  color:#fff;
                  .top{
                    border-color:#fff;
                    span{
                      color:#fff;
                    }
                  }
                  .bottom{
                    color:#fff;
                    .list{
                      span:after{
                        background:#fff;
                      }
                    }
                  }
                }
                .item1{
                  width:180px;
                  p{
                    margin:50px 10px;
                    line-height:32px;
                    span{
                      color: #aa1941;
                      margin-left:6px;
                    }
                  }
                  div{
                    text-align:right;
                    color:#777;
                    font-size: 12px;
                    line-height:20px;
                  }
                }
              }
              .tips{
                text-align:right;
                line-height:20px;
                span{
                  color:#aa1941;
                }
              }
            }
            img{
              margin:0 35px;
              width:830px;
            }
          }
        }
      }
    }
    .module-1 {
      .content-mian {
        padding: 60px 50px 65px;
        .img1 {
          width: 100%;
          display: block;
          margin-bottom: 49px;
        }
        .img2 {
          width: 154px;
          display: block;
        }

        .img3 {
          width: 100%;
          display: block;
          margin-top: 27px;
        }
        .img4 {
          width: 176px;
          display: block;
          margin-top: 27px;
        }
        .img5 {
          width: 342px;
          display: block;
          margin-top: 32px;
        }
        .img-text {
          display: flex;
          justify-content: space-around;
          margin:0 15px;
          padding-top: 14px;
          li {
            width: 200px;
            height: 258px;
            position: relative;
            overflow: hidden;
            &:hover {
              img {
                transform: scale(1.1);
              }
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
              transition: all 0.3s;
            }
            .pop {
              width: 100%;
              height: 100%;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              .name {
                width:100%;
                position: absolute;
                top: 50%;
                left: 0;
                font-size: 20px;
                transform:translateY(-50%);
                text-align:center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
