<script setup lang="ts">
import icon from "@/assets/login/one/icon.png";
import icon1 from "@/assets/login/one/icon备份.png";
import icon2 from "@/assets/login/one/icon备份 2.png";
import icon3 from "@/assets/login/one/icon备份 3.png";
import bg from "@/assets/login/one/bg.png";
import bg1 from "@/assets/login/one/bg(1).png";
import bianzhu from "@/assets/login/one/编组.png";
import bianzhu1 from "@/assets/login/one/编组备份.png";
import bianzhu2 from "@/assets/login/one/编组备份 2.png";
defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div class="box">
    <!-- <img class="bg absolute bottom-0 left-0" :src="bg" alt="" /> -->
    <img class="bg absolute bottom-0 right-0" :src="bg1" alt="" />
    <div class="zhuti">
      <h1 class="text-center">简单、便捷的绩效流程，高效完成绩效考核</h1>
      <div class="mt-5 flex justify-center items-center">
        <img :src="icon" alt="" />
        <img :src="bianzhu" alt="" />
        <img :src="icon1" alt="" />
        <img :src="bianzhu1" alt="" />
        <img :src="icon2" alt="" />
        <img :src="bianzhu2" alt="" />
        <img :src="icon3" alt="" />
      </div>
      <div class="flex justify-center items-center">
        <div class="flex justify-center items-center title">
          <div class="xuhao">1</div>
          考核模板
        </div>
        <div class="flex justify-center items-center title">
          <div class="xuhao">2</div>
          发起考核
        </div>
        <div class="flex justify-center items-center title">
          <div class="xuhao">3</div>
          考核数据填写
        </div>
        <div class="flex justify-center items-center title">
          <div class="xuhao">4</div>
          考核结果分析
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  position: relative;
  z-index: 999;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  user-select: none; /* 对大多数浏览器生效 */
  // background: #e5edfb;
  background: #d5e8fb;

  .bg {
    bottom: -45px;
    width: 500px;
    height: 500px;
  }

  .zhuti {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
  }
}

.xuhao {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  background: #004fd7;
  border-radius: 50%;
}

.title {
  width: 280px;
  height: 33px;
  font-size: 20px;
  // border: 1px solid red;
  font-weight: 400;
  color: #000;
  text-align: center;
}
</style>
