<template>
  <div class="home-container">
    <div style="position: relative; width: 100%">
      <img src="@/assets/img/Banner.png" height="480" style="width: 100%" />
      <div class="img-ct banner">
        <div>深圳市南山区公共就业服务平台</div>
        <div>
          深圳市南山区公共就业服务平台为当地的就业困难人员、高校毕业生以及外来务工人员等提供了全方位、多渠道的公共就业创业服务。平台通过各种方式，如招聘活动、职业培训、就业指导等，帮助对应人群找到适合自己的工作或者创业机会。
        </div>
      </div>
    </div>
    <div class="container">
      <div class="home-tp flx-direction-column">
        <div class="n-title">公共就业服务政策</div>
        <div class="flx-justify-between policy-bottom">
          <policy title="南山就业政策公告" :list="policyList" />
          <policy title="南山就业活动" :list="policyList" />
        </div>
      </div>
      <div class="home-tp">
        <div class="n-title">街道办招聘</div>
        <div class="recruit">
          <div v-for="(item, index) in imgList" :key="index" class="recruit-item">
            <img :src="item.url" width="318" height="130" />
            <div class="recruit-item-detail">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="flx-justify-between policy-bottom">
        <div class="employment-training">
          <div class="n-title">灵活就业</div>
          <div class="employment">
            <div v-for="(item, index) in employmentList" :key="index" class="employment-item">
              <div class="flx-align-center">
                <div style="color: #177cfa">{{ item.name }}</div>
                <img :src="item.url" style="margin-left: 4px" />
              </div>
              <img src="@/assets/img/icon-back.png" />
            </div>
          </div>
        </div>
        <div class="employment-training">
          <div class="n-title">技能培训</div>
          <div class="train">
            <div style="position: relative; height: 100px">
              <img src="@/assets/img/pic-an.png" width="645" height="100" />
              <div class="img-ct">基础安全培训</div>
            </div>
            <div style="display: flex; margin-top: 18px">
              <div class="train-item flx-center" style="width: 253px; margin-right: 15px">
                专业技能培训
              </div>
              <div class="train-item flx-center" style="width: 377px">专业知识培训</div>
            </div>
            <div style="display: flex; margin: 18px 0">
              <div style="position: relative; height: 100px">
                <img src="@/assets/img/pic-zhi.png" width="377" height="100" />
                <div class="img-ct">职业发展培训</div>
              </div>
              <div class="train-item flx-center" style="width: 253px; margin-left: 15px">
                团队管理培训
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="guarantee">
      <img src="@/assets/img/BG.png" height="560" />
      <div class="img-ct guarantee-content">
        <div class="n-title">劳动权益保障</div>
        <div class="guarantee-detail">
          <p>劳动权益保障是指劳动者在就业过程中所享有的各种权利和利益，包括但不限于以下几个方面:</p>
          <p>1、平等就业的职业选择权:劳动者有权选择适合自己的职业，并获得平等的就业机会。</p>
          <p>
            2、取得相等劳动报酬的权利:劳动者应该获得与自己付出相对应的劳动报酬，包括基本工资、加班费、津贴、奖金等。
          </p>
          <p>3、法定的节假休息的权利:劳动者享有法定的节假日休息和带薪年假等。</p>
          <p>
            4、劳动安全卫生得到保护:劳动者有权获得安全卫生的工作环境，并遵守国家和地方的安全卫生法规。
          </p>
          <p style="line-height: 24px">
            为了保障劳动者的权益，国家、企业和个人都需要共同努力。家需要加强劳动法律法规的制定和实施，建立健全社会保障体系，加强劳动力市场监管以及建立和完善劳动争议处理机制等。企业则需要遵守国家和地方的劳动法律法规，提供合法的劳动保护和劳动条件，按时支付劳动者的工资和福利待遇，保障劳动者的合法权益。个人则需要了解自己的权利和义务，自觉遵守国家和地方的劳动法律法规，积极维护自己的合法权益。
          </p>
        </div>
      </div>
    </div>

    <div class="container" style="margin: 64px 60px">
      <div class="n-title" style="text-align: center">重点就业情景</div>
      <div class="scene">
        <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
          <img :src="item.url" width="24" height="24" style="margin-left: 4px" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import policy from '../../components/policy.vue'
import Frame690 from '@/assets/img/Frame690.png'
import Frame691 from '@/assets/img/Frame690(1).png'
import Frame692 from '@/assets/img/Frame690(2).png'
import Frame693 from '@/assets/img/Frame690(3).png'
import Frame694 from '@/assets/img/Frame690(4).png'
import Frame695 from '@/assets/img/Frame690(5).png'
import Frame696 from '@/assets/img/Frame690(6).png'
import Frame697 from '@/assets/img/Frame690(7).png'
import gonggao from '@/assets/img/icon-gonggao.png'
import zhengnc from '@/assets/img/icon-zhengnc.png'
import xinwen from '@/assets/img/icon-xinwen.png'
import zhao from '@/assets/img/icon-zhao.png'
import chuang from '@/assets/img/icon-chuang.png'
import gao from '@/assets/img/icon-gao.png'
import gang from '@/assets/img/icon-gang.png'
import tui from '@/assets/img/icon-tui.png'
import jia from '@/assets/img/icon-jia.png'
import can from '@/assets/img/icon-can.png'

const policyList = [
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' }
]

const imgList = [
  { name: '粤海街道专题', url: Frame690 },
  { name: '南头街道专题', url: Frame691 },
  { name: '西丽街道专题', url: Frame692 },
  { name: '沙河街道专题', url: Frame693 },
  { name: '南山街道专题', url: Frame694 },
  { name: '蛇口街道专题', url: Frame695 },
  { name: '招商街道专题 ', url: Frame696 },
  { name: '桃源街道专题 ', url: Frame697 }
]

const employmentList = [
  { name: '公告', url: gonggao },
  { name: '政策', url: zhengnc },
  { name: '新闻', url: xinwen },
  { name: '招聘', url: zhao }
]
const sceneList = [
  { name: '创业人员', url: chuang },
  { name: '高校学生', url: gao },
  { name: '港澳青年', url: gang },
  { name: '退役军人', url: tui },
  { name: '家政', url: jia },
  { name: '残疾人', url: can }
]
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
