<template>
  <div>
    <div class="newslogin">
      <div class="newsloginTitle">潍坊市房地产开发项目监管平台</div>
      <div class="newslogincon">
        <div class="newsloginconlef"><img :src="src" alt="" /></div>
        <div class="newsloginconrig">
          <div class="newsloginconrigtitle">用户登录</div>
          <div class="x"></div>
          <Account />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed } from "vue";
import src from "/@/assets/login/lef.png";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import { NextLoading } from "/@/utils/loading";
import logoMini from "/@/assets/logo-mini.svg";
import loginMain from "/@/assets/loginleft.png";
import loginBg from "/@/assets/login-bg.svg";
import { hasRoles } from "/@/router/frontEnd";
import { Session } from "/@/utils/storage";

// // 引入组件
const Account = defineAsyncComponent(
  () => import("/@/views/login/component/account.vue")
);

// // 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
  tabsActiveName: "account",
  isScan: false,
});

// 获取布局配置信息
const getThemeConfig = computed(() => {
  return themeConfig.value;
});

// 页面加载时
onMounted(() => {
  NextLoading.done();
});
</script>

<style lang="scss">
div{
  box-sizing: border-box;
}
.newslogin {
  background: url("/@/assets/login/bg.png") no-repeat center center;
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .newsloginconrig {
    background-color: #fff;
    padding: 30px 30px;
    width: 25vw;
    height: 50vh;
    border-radius: 10px;
    .x {
      width: 50px;
      height: 4px;
      background-color: #457ae3;
      margin: 20px 0;
    }
    .newsloginconrigtitle {
      font-size: 15px;
      font-weight: bold;
    }
  }
  .newsloginTitle {
    position: absolute;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #457ae3;
    top: 20px;
  }
  .newslogincon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 80%;
  }
  .newsloginconlef {
    img {
      height: 70vh;
    }
  }
}
</style>
