<template>
  <div>
    <img class="banner" src="/images/banner2.png" />
    <section class="section">
      <h1 class="pt-80">技能培训公告</h1>
      <notice></notice>
      <div class="nav-list">
        <div class="nav-list_item" v-for="(item, index) in navList" :key="index" @click="register(item)">
          <div class="item-icon">
            <img class="n-active" :src="item.icon" />
            <img class="active" :src="item.aIcon" />
          </div>
          <div class="item-txt">{{ item.text }}</div>
        </div>
      </div>
      <h2 class="pt-80" id="md1" style="text-align: center">技能培训报名</h2>
      <h3 style="margin-top: 50px">一、培训目标</h3>
      <p class="des">
        培训目标：培养初级商务数据分析师。<br />
        学员通过本阶段课程学习，了解商务数据分析师相关岗位要求和岗位基础知识，学会数据采集、清洗、处理、可视化和基础分析技能，使学员能够胜任商务数据分析师基础岗位工作。在工作中为企业决策提供基础数据与依据。
      </p>
      <h3>二、培训对象</h3>
      <p class="des">企业职工、职业院校学生、退伍军人</p>
      <h3>三、培训方式</h3>
      <p class="des">
        根据“金融产品数字化营销职业技能等级证书”试点工作需求，分批次（分区域）开展师资培训。培训采取结构化、多元化的培训方式设计，包含在线视频、专题授课、案例研讨、实践演练、互动讨论、汇报展示、整体考核等。
      </p>
      <h3>四、培训内容</h3>
      <p class="des">
        1.1+X证书制度的意义与政策解读<br />
        2.金融产品数字化营销发展现状与前景展望<br />
        3.职业技能等级标准解读<br />
        4.核心知识串讲与互动交流<br />
        5.实训案例剖析与互动交流<br />
        6.课程考试
      </p>
      <h3>五、培训费用</h3>
      <p class="des">详见每期技能培训通知。</p>
      <div class="t-btn">
        <div class="name">通知关注：</div>
        <router-link to="/news">
          <div class="btn">通知</div>
        </router-link>
      </div>
      <div class="t-btn">
        <div class="name">报名入口：</div>
        <router-link to="/train/list">
          <div class="btn">报名</div>
        </router-link>
      </div>
      <div class="pt-box">
        <h1 id="md2">学习平台</h1>
        <div class="flex">
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-dn.png" />
          <div class="pt-right">
            <div class="txt">
              紫荆教育为师生精心打造综合一体化学习平台，可实现考核体系的标准化，数据资源的统一化，师资学习的多元化，以及学习管理的系统化，最终形成学、练、训、考、评、管一体的数字化营销学习平台。
            </div>
            <a target="_blank" href="https://x-learning.ezijing.com/course/learn">
              <div class="btn">进入系统</div>
            </a>
          </div>
        </div>
      </div>
    </section>
    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
  </div>
</template>
<script>
import notice from '@/components/notice.vue'
export default {
  components: {
    notice,
  },
  data() {
    return {
      navList: [
        {
          icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon1.png',
          aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a1.png',
          text: '注册账号',
          isRegister: true,
        },
        {
          icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon2.png',
          aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a2.png',
          text: '技能培训报名',
          id: 'md1',
        },
        {
          icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon3.png',
          aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a3.png',
          text: '学习平台',
          id: 'md2',
        },
        {
          icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon4.png',
          aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a4.png',
          text: '证书查询',
          path: '/queryCard',
        },
      ],
      isLogin: false,
      options: {
        baseUrl: import.meta.env.VITE_API_BASE_URL,
        register: {
          data: {
            username: `ezijing-${new Date().getTime()}`,
          },
          fields: ['account', 'code', 'password'],
        },
        login: {
          account: {
            onSuccess: this.loginSuccess,
          },
          phone: {
            onSuccess: this.loginSuccess,
          },
        },
      },
    }
  },
  mounted() {},
  methods: {
    register(n) {
      if (n.isRegister) {
        this.passport.register()
        return false
      }
      if (n.id) {
        const element = document.getElementById(n.id)
        if (element) {
          const offsetTop = element.getBoundingClientRect().top + window.scrollY
          window.scrollTo({
            top: offsetTop,
            behavior: 'smooth',
          })
        }
        return false
      }
      if (n.path) {
        this.$router.push(n)
      }
    },
    onReady(isLogin, user = {}) {
      this.user = user
      window.sessionStorage.userInfo = JSON.stringify(user)
    },
    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()
    },
  },
  computed: {
    passport() {
      return this.$refs.passport
    },
  },
}
</script>
<style lang="scss" scoped>
.section {
  width: 1200px;
  margin: 0 auto;
}
.banner {
  width: 100%;
  display: block;
}
h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 34px;
  text-align: center;
  margin-bottom: 50px;
}
.pt-80 {
  padding-top: 80px;
}
.pt-100 {
  padding-top: 100px;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  .nav-list_item {
    width: 264px;
    height: 264px;
    background: #ffffff;
    box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    &:hover {
      background-color: #aa1941;
      .item-icon {
        .n-active {
          display: none;
        }
        .active {
          display: block;
        }
      }
      .item-txt {
        color: #fff;
      }
    }
    .item-icon {
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .active {
        display: none;
      }
    }
    .item-txt {
      font-size: 22px;
      color: #333333;
      text-align: center;
    }
  }
}
h2 {
  font-size: 24px;
  color: #333333;
}
h3 {
  color: #333333;
  font-size: 20px;
  margin-bottom: 5px;
}
.des {
  font-size: 18px;
  margin-bottom: 40px;
  line-height: 30px;
  color: #333333;
}
.t-btn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .name {
    font-size: 18px;
    color: #333333;
  }
  .btn {
    width: 150px;
    background: #aa1941;
    border-radius: 6px 6px 6px 6px;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
}
.pt-box {
  padding-top: 40px;
  padding-bottom: 40px;
  .flex {
    display: flex;
    margin-top: 35px;
    img {
      min-width: 293px;
      display: block;
    }
    .pt-right {
      margin-left: 70px;
      .txt {
        font-size: 18px;
        color: #333333;
        line-height: 30px;
      }
      .btn {
        width: 150px;
        line-height: 40px;
        background: #aa1941;
        border-radius: 6px 6px 6px 6px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        margin-top: 60px;
      }
    }
  }
}
.new-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  .new-list_item {
    box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    width: 380px;
    height: 560px;
    box-sizing: border-box;
    padding: 60px 30px 30px;
    .new-item_title {
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      line-height: 100%;
      margin-bottom: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .new-item_con {
      font-size: 16px;
      color: #333333;
      line-height: 26px;
      height: 234px;
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 9;
    }
    .new-item_btn {
      font-size: 16px;
      color: #aa1941;
      line-height: 100%;
      margin: 20px 0;
    }
  }
}
</style>
