<template>
  <div class="main-container w">
    <!-- <router-link to="/merchantManagement/homePage">首页</router-link> -->
    <div class="g_flex_column_between flex_nr g_h_pull">
      <div class="title g_mt_33 flex_center g_flex_row_between w">
        <img src="../assets/image/bocaiLogo.svg" alt />
        <a-button class="download-btn g_fs_16">应用下载</a-button>
      </div>
      <div class="center-box w">
        <div class="g_fs_85 g_c_f" style="letter-spacing:6px">人力资源供应链平台</div>
        <router-link :to="isLogin ?'/merchantManagement/homePage':'/login'">
          <a-button class="login-btn g_br_25 g_h_50 g_w_140 g_fs_18" type="primary">{{ isLogin ? "进入后台":"注册/登录"}}</a-button>
        </router-link>
      </div>
      <div class="w">
        <div class="bottom-box g_flex_row_around flex_center">
          <div class="g_text_c g_flex_1" v-for="item in bottomList">
            <img :src="item.img" />
            <div class="g_c_f g_mt_12">{{item.title}}</div>
          </div>
        </div>
        <Mfooter color="#fff" class />
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance, watch, onBeforeUnmount, defineProps } from 'vue'
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() // 应用路由
const route = useRoute()
import { useStore } from '@/stores/counter'
const storeJS = useStore()
onMounted(() => {

})
import Mfooter from '../layout/m-footer.vue'
const props = defineProps({
  isLogin: {
    type: Boolean,
    default: false,
  },
})
const bottomList = ref([
  {
    title: '报名助手',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/dailibaoming.svg',
  },
  {
    title: '交付助手',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/jiaofuzhushou.svg',
  },
  {
    title: '管理后台',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/guanlihoutai.svg',
  },
  {
    title: '招工小程序',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/zhaogongxiaochengxu.svg',
  },
  {
    title: '发单机器人',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/jiqiren.svg',
  },
  {
    title: '电子合同',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/dianzihetong.svg',
  },
  {
    title: '简历集采',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/jianlijicai.svg',
  },
  {
    title: '职位库',
    img: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/zhiweiku.svg',
  },
])
</script>

<style lang='less' scoped>
.w {
  left: 50%;
  max-width: 1320px;
  min-width: 1320px;
  position: relative;
  transform: translateX(-50%);
}
.main-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/bocaiBg.svg) no-repeat;
  background-size: cover;
  background-origin: center;
  // overflow: hidden;
  .download-btn {
    width: 95px;
    height: 40px;
    border: 1px solid #999;
    background-color: transparent;
    color: #999;
    border-radius: 8px;
    cursor: not-allowed;
  }
  .center-box {
    // position: absolute;
    // top: 40%;
    // left: 50%;
    text-align: center;
    // transform: translate(-50%, -50%);
    .login-btn {
      margin-top: 5vh;
    }
  }
  .bottom-box {
    height: 200px;
    padding: 0 40px;
    border-radius: 20px;
    background-color: rgba(52, 37, 37, 0.6);
  }
}
</style>