mz-cloud/ruoyi-web/src/views/home/index.vue

<template>
  <div class="main1">
    <!--图片新闻-->
    <div class="main1_left">
      <div class="left_box">
        <div class="title_box">
          <div class="layer13">
            <div class="group15 flex-col"></div>
            <div class="group16 flex-col"></div>
          </div>
          <span class="title"> 图片新闻 </span>
        </div>
        <div class="carousel">
          <el-carousel height="395px" ref="carousel">
            <el-carousel-item v-for="(item, index) in srcData" :key="index" @click="router.push({ name: 'tpxwDetails', params: { id: item.id } })">
              <!-- <img :src="item.url" class="topImg" /> -->
              <el-image class="topImg" :src="item.url" fit="scale-down">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="carousel_footer" :title="item.bt">
                <div class="carousel_title title_overflow">{{ item.bt }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!--头条发布-->
    <div class="main1_right">
      <div class="right_box">
        <div class="title_box">
          <div class="layer13">
            <div class="group15 flex-col"></div>
            <div class="group16 flex-col"></div>
          </div>
          <span class="title">头条发布</span>
          <span class="title_position red" @click="router.push('/ttfb')">更多>></span>
        </div>
        <div class="carousel flex_column" style="height: 395px" v-if="xwData.length > 0">
          <div class="flex xw_box" v-for="(item, index) in xwData" :key="index" @click="router.push({ name: 'ttfbDetails', params: { id: item.id } })">
            <div class="xw_title title_overflow margin_left10 fs16" :title="item.bt">
              {{ item.bt }}
            </div>
            <div class="xw_date" :title="changDate(item.issSj, 'two')">
              {{ changDate(item.issSj, 'one') }}
            </div>
          </div>
        </div>
        <div style="height: 395px" class="empty" v-else>
          <el-empty :image-size="80" />
        </div>
      </div>
    </div>
  </div>
  <!--热点专题--><!--养老政策-->
  <div class="main2">
    <div class="flex rd_box">
      <div class="center_box flex_column mg_right24">
        <div class="rd_top">
          <div class="rd_title">热点专题</div>
          <div class="ckgd" @click="router.push('/rdzt')">【查看更多】</div>
        </div>
        <div class="rd_center">
          <div class="flex_column" style="height: 100%" v-if="rdData.length > 0">
            <div class="flex" v-for="(item, index) in rdData" :key="index" @click="router.push({ name: 'rdztDetails', params: { id: item.id } })">
              <div class="dian"></div>
              <div class="xw_title title_overflow fs14" :title="item.bt">
                {{ item.bt }}
              </div>
              <div class="xw_date" :title="changDate(item.issSj, 'two')">
                {{ changDate(item.issSj, 'one') }}
              </div>
            </div>
          </div>
          <div class="empty" v-else>
            <el-empty :image-size="80" />
          </div>
        </div>
      </div>
      <div class="center_box flex_column">
        <div class="rd_top">
          <div class="rd_title">养老政策</div>
          <div class="ckgd" @click="goGd('/ylzc')">【查看更多】</div>
        </div>
        <div class="rd_center">
          <el-tabs v-model="activeName">
            <el-tab-pane label="全部" name="first">
              <div class="flex_column" style="height: 100%">
                <div class="flex" v-for="(item, index) in zcData.slice(0, 5)" :key="index">
                  <div class="dian"></div>
                  <div class="xw_title title_overflow fs14" @click="goYlzc(item.id)" :title="item.bt">
                    {{ item.bt }}
                  </div>
                  <div class="xw_date" :title="changDate(item.issSj, 'two')">
                    {{ changDate(item.issSj, 'one') }}
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane v-for="item in XZ086" :label="item.label" :name="item.value">
              <div class="flex_column" style="height: 100%" v-if="changZcData(zcData, activeName).length > 0">
                <div class="flex" v-for="(item, index) in changZcData(zcData, activeName).slice(0, 5)" :key="index">
                  <div class="dian"></div>
                  <div class="xw_title title_overflow fs14" @click="goYlzc(item.id)" :title="item.bt">
                    {{ item.bt }}
                  </div>
                  <div class="xw_date" :title="changDate(item.issSj, 'two')">
                    {{ changDate(item.issSj, 'one') }}
                  </div>
                </div>
              </div>
              <div v-else>
                <el-empty :image-size="60" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
  <!--机构查询--><!--办事指南-->
  <div class="main2">
    <div class="flex rd_box">
      <div class="center_box flex_column mg_right24">
        <div class="rd_top">
          <div class="rd_title">机构查询</div>
          <div class="ckgd" @click="goGd('/jgcx')">【查看更多】</div>
        </div>
        <div class="rd_center" style="display: flex; flex-wrap: wrap">
          <div class="jg_box" v-for="(item, index) in XZ093.slice(0, 8)" @click="goJg(item.value)" :key="item.label">
            <img :src="jgData[index].src" style="width: 33px; height: 31px" />
            <span> {{ item.label }}</span>
          </div>
        </div>
      </div>
      <div class="center_box flex_column">
        <div class="rd_top">
          <div class="rd_title">办事指南</div>
          <div class="ckgd" @click="router.push('/bszn')">【查看更多】</div>
        </div>
        <div class="rd_center">
          <el-tabs v-model="activeName2">
            <el-tab-pane v-for="(item, indexd) in XZ094" :label="item.label" :name="item.value">
              <div class="flex_column" style="height: 100%" v-if="changZcData(bsData, activeName2).length > 0">
                <div @click="router.push({ name: 'bsznDetails', params: { id: item.id } })" class="flex bor_bt" v-for="(item, index) in changZcData(bsData, activeName2).slice(0, 5)" :key="index">
                  <div class="flex" style="width: 100%" v-if="indexd === 0">
                    <div class="title_type gr" v-if="item.sfl === '1'">个人</div>
                    <div class="title_type jg" v-else-if="item.sfl === '2'">机构</div>
                    <div class="bs_box title_overflow fs14" :title="item.bt">
                      {{ item.bt }}
                    </div>
                    <div class="bs_title">详情</div>
                  </div>

                  <div class="bs_box1 title_overflow fs14" :title="item.bt" v-else>
                    {{ item.bt }}
                  </div>
                </div>
              </div>
              <div class="empty" v-else>
                <el-empty :image-size="80" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
  <div class="nav">
    <img src="../../assets/images/logoN.png" style="width: 403px; height: 88px" />
  </div>
  <!--资料查询--><!--养老地图--><!--资料查询-->
  <div class="main2">
    <div class="flex rd_box">
      <div class="zl_box flex_column mg_right24">
        <div class="rd_top">
          <div class="rd_title">资料查询</div>
          <div class="ckgd" @click="goGd('/ylzc')">【查看更多】</div>
        </div>
        <div class="rd_center">
          <div class="flex_column" style="height: 100%">
            <div class="flex bor_bt" v-for="(item, index) in changeDict(XZ085)" :key="index">
              <div class="flex" style="width: 50%">
                <div class="dian"></div>
                <div class="zl_lh title_overflow fs14" @click="goZlcx(item[0].value)">
                  {{ item[0].label }}
                </div>
              </div>
              <div class="flex" style="width: 50%" v-if="item[1]">
                <div class="dian"></div>
                <div class="zl_lh title_overflow fs14" @click="goZlcx(item[1].value)">
                  {{ item[1].label }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zl_box flex_column mg_right24">
        <div class="rd_top">
          <div class="rd_title">养老地图</div>
          <div class="ckgd" @click="goGd('/yldt')">【查看更多】</div>
        </div>
        <div class="rd_center dt_bg"></div>
      </div>
      <div class="zl_box flex_column">
        <div class="rd_top">
          <div class="rd_title">用户中心</div>
        </div>
        <div class="rd_center flex_row">
          <!-- <div class="user_big">
            <img src="../../assets/images/addUser.png" style="width: 31px; height: 29px" />
            <el-link :href="hrefLogin" :underline="false" class="zl_title" target="_blank">新用户注册</el-link>
          </div>
          <div class="user_login">
            <img src="../../assets/images/userLogin.png" style="width: 29px; height: 29px" />
            <el-link :href="hrefLogin" :underline="false" class="zl_title" target="_blank">普通用户登录</el-link>
          </div>
          <div class="user_login">
            <img src="../../assets/images/adminLogin.png" style="width: 31px; height: 31px" />
            <el-link :href="hrefLogin" :underline="false" class="zl_title" target="_blank">管理员登录</el-link>
          </div> -->
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="账号" type="text">
                <template v-slot:prefix>
                  <div style="font-size: 20px">
                    <!-- 由于SVG图标默认不携带任何属性 -->
                    <!-- 你需要直接提供它们 -->
                    <User style="width: 0.8em; height: 0.8em; margin-right: 5px" />
                  </div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" placeholder="密码" type="password">
                <template v-slot:prefix>
                  <div style="font-size: 20px">
                    <!-- 由于SVG图标默认不携带任何属性 -->
                    <!-- 你需要直接提供它们 -->
                    <Lock style="width: 0.8em; height: 0.8em; margin-right: 5px" />
                  </div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="loginForm.code" placeholder="验证码" style="width: 50%">
                <template v-slot:prefix>
                  <div style="font-size: 20px">
                    <Setting style="width: 0.8em; height: 0.8em; margin-right: 5px" />
                  </div>
                </template>
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click.prevent="handleLogin(loginFormRef)">登录</el-button>
              <!-- <el-link :href="hrefLogin" :underline="false" class="zl_title" target="_blank" @click.prevent="handleLogin(loginFormRef)">普通用户登录</el-link> -->
              <el-link :href="hrefLogin" :underline="false" class="zl_title" target="_blank">管理员登录</el-link>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, onMounted, reactive, getCurrentInstance, watch } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { useStore } from "vuex"
import Cookies from 'js-cookie'
let router = useRouter()
let route = useRoute()
let store = useStore()
import { lbList, rdList, ttList, zcList, wlList, bsList, getCodeImg } from '@/api/home'
const { proxy } = getCurrentInstance()
const { XZ085, XZ086, XZ093, XZ094 } = proxy.useDict('XZ085', 'XZ086', 'XZ093', 'XZ094')
const hrefLogin = ref('http://mz.tshe.cn:801/login')

const activeName = ref('first')
const activeName2 = ref('0')
const xgData = ref([])
const jgData = ref([
  { src: new URL('../../assets/images/jg1.png', import.meta.url).href, label: '养老机构' },
  { src: new URL('../../assets/images/jg7.png', import.meta.url).href, label: '社区养老机构' },
  { src: new URL('../../assets/images/jg2.png', import.meta.url).href, label: '长者照护之家' },
  { src: new URL('../../assets/images/jg3.png', import.meta.url).href, label: '日间服务中心' },
  { src: new URL('../../assets/images/jg4.png', import.meta.url).href, label: '社区养老组织' },
  { src: new URL('../../assets/images/jg5.png', import.meta.url).href, label: '助餐服务点' },
  { src: new URL('../../assets/images/jg6.png', import.meta.url).href, label: '护理院/站' }
])
let loading = ref(false)
const xwData = ref([])
const bsData = ref([])
const srcData = ref([])
const zcData = ref([])
const rdData = ref([])
const carousel = ref(null)
let redirect = ref(undefined)
let loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
  rememberMe: false,
  href:''
})
const formSize = ref('default')
const loginFormRef = ref(null)
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

let codeUrl = ref('')
let captchaOnOff = ref(true)

function getCookie() {
  const username = Cookies.get('username')
  const password = Cookies.get('password')
  const rememberMe = Cookies.get('rememberMe')
  loginForm = {
    username: username === undefined ? loginForm.username : username,
    password: password === undefined ? loginForm.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

watch( route, (newVal) => {
	redirect.value = route.query && route.query.redirect;
},{ immediate: true, deep: true } )

const handleLogin = async () => {
  if (!loginFormRef) return
  await loginFormRef.value.validate( (valid) => {
    if (valid) {
      loading.value = true
      if (loginForm.rememberMe) {
        Cookies.set('username', loginForm.username, { expires: 30 })
        Cookies.set('password', encrypt(loginForm.password), { expires: 30 })
        Cookies.set('rememberMe', loginForm.rememberMe, { expires: 30 })
      } else {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      let href = import.meta.env.VITE_APP_HREF
      loginForm.href = href
      store
        .dispatch('Login', loginForm)
        .then((res) => {
          // window.sessionStorage.setItem('username',loginForm.username)
          // sessionStorage.setItem('password',loginForm.password)
          // let token = res.data.access_token
          // console.log(token);
          // console.log(res,'res');
          // let str = Cookies.get('Admin-Token');
          // console.log(str,'str');
          // location.href = `http://localhost:81?${str}`
        })
        .catch(() => {
          loading.value = false
          if (captchaOnOff.value) {
            getCode()
          }
        })
    }
  })
}

function getCode() {
  getCodeImg().then((res) => {
    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff
    if (captchaOnOff.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img
      loginForm.uuid = res.uuid
    }
  })
}

// 图片新闻
function getLbList() {
  lbList().then((res) => {
    srcData.value = res.rows
    //处理刚开始显示空白页
    setTimeout(() => {
      carousel.value.setActiveItem(0)
    }, 500)
  })
}

// 头条发布
function getTtList() {
  ttList().then((res) => {
    xwData.value = res.rows.splice(0, 10)
  })
}

// 热点专题
function getRdList() {
  rdList().then((res) => {
    rdData.value = res.rows.splice(0, 6)
  })
}

//政策查询
function getZcList() {
  zcList().then((res) => {
    zcData.value = res.rows
  })
}

//办事指南
function getBsList() {
  bsList().then((res) => {
    bsData.value = res.rows
  })
}
//修改日期格式
function changDate(data, type) {
  let time = ''
  switch (type) {
    case 'one':
      time = data.slice(-4, -2) + '-' + data.slice(-2)
      break
    case 'two':
      time = data.slice(0, data.length - 4) + '-' + data.slice(-4, -2) + '-' + data.slice(-2)
      break
  }
  return time
}
//过滤
function changZcData(data, value) {
  return data.filter((item) => item.ffl === value)
}
//一维数组变成二维数组
function changeDict(data) {
  let list = data.slice(0, 8)
  let result = []
  for (let i = 0; i < list.length; i += 2) {
    result.push(list.slice(i, i + 2))
  }
  return result
}

//相关链接
function getWlList() {
  wlList().then((res) => {
    xgData.value = res.rows.slice(0, 8)
  })
}

function goJg(value) {
  router.push({
    path: '/jgcx',
    query: {
      state: value
    }
  })
}
function goZlcx(value) {
  router.push({
    path: '/ylzc',
    query: {
      ffl: value
    }
  })
}
function goYlzc(id) {
  router.push({
    path: '/ylzc/' + id
  })
}
function goGd(path) {
  router.push({ path: path })
}

onMounted(() => {
  getLbList()
  getTtList()
  getRdList()
  getZcList()
  getWlList()
  getBsList()
  getCode()
})
</script>
<style></style>
<style scoped>
.main1 {
  display: flex;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 5px;
  width: 100%;
  height: 480px;
  /*margin-top: 21px;*/
}

.main2 {
  width: 100%;
  height: 304px;
  margin-top: 21px;
}

.main1_left {
  width: 65%;
  display: flex;
  justify-items: center;
  border-right: 1px solid #dedede;
}

.main1_right {
  width: 35%;
  display: flex;
  justify-items: center;
}

.left_box {
  margin: auto;
  width: 94%;
  height: 96%;
  display: flex;
  flex-direction: column;
}

.right_box {
  margin: auto;
  width: 92%;
  height: 96%;
  display: flex;
  flex-direction: column;
}

.title_box {
  height: 10%;
  display: flex;
  align-items: center;
  position: relative;
}

.carousel {
  height: 90%;
  cursor: pointer;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
}

.layer13 {
  display: flex;
  flex-direction: column;
  width: 8px;
  height: 20px;
  margin-right: 9px;
}

.group15 {
  background-color: rgba(217, 213, 214, 1);
  width: 8px;
  height: 10px;
}

.group16 {
  background-color: rgba(216, 1, 0, 1);
  width: 8px;
  height: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #444b55;
}

.carousel_footer {
  width: 100%;
  height: 40px;
  background: #000000;
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  line-height: 40px;
}

.carousel_title {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  width: 600px;
  margin-left: 18px;
}

.fs16 {
  font-size: 16px;
}

.fs14 {
  font-size: 14px;
}

.xw_title {
  width: 85%;
  line-height: 38px;
  font-weight: 800;
  color: #444b55;
  cursor: pointer;
}

.zl_lh {
  line-height: 60px;
  cursor: pointer;
}

.bs_box {
  width: 83%;
  line-height: 38px;
  font-weight: 800;
  color: #444b55;
}
.bs_box1 {
  width: 100%;
  line-height: 38px;
  font-weight: 800;
  color: #444b55;
}

.margin_left10 {
  margin-left: 10px;
}

.xw_date {
  width: 15%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #444b55;
  opacity: 0.5;
  margin-right: 10px;
}

.xw_box {
  height: 10%;
  border-bottom: 1px dashed #dfe6ec;
}

.title_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 指示器*/
:deep(.el-carousel__indicators) {
  left: unset;
  transform: unset;
  right: 2%;
}

/*指示器按钮*/
:deep(.el-carousel__button) {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background-color: #ffffff;
}

/*指示器激活按钮*/
:deep(.is-active .el-carousel__button) {
  background: #d80100;
  border: 1px solid #ffffff;
}

.topImg {
  width: 100%;
  height: 100%;
}

.title_position {
  position: absolute;
  right: 0;
  cursor: pointer;
}

.red {
  font-size: 14px;
  font-weight: bold;
  color: #d80100;
  line-height: 50px;
}

.rd_box {
  height: 100%;
}

.center_box {
  width: 49%;
  /*height: 100%;*/
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  /*border: red solid 1px;*/
}

.zl_box {
  width: 33%;
  /*height: 100%;*/
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.footer_conter {
  width: 100%;
  /*height: 100%;*/
  background: #ffffff;
  margin-top: 25px;
  /*margin-bottom: 25px;*/
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.rd_top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-top: #bf242a solid 2px;
}

.rd_title {
  width: 120px;
  height: 100%;
  background: #bf242a;
  border-radius: 0 0 10px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.ckgd {
  font-size: 14px;
  font-weight: bold;
  color: #666666;
  line-height: 40px;
  margin-right: 20px;
  cursor: pointer;
}

.rd_center {
  width: 96%;
  height: 250px;
  margin: auto;
}

.flex_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.dt_bg {
  background: url('../../assets/images/dt.png') no-repeat;
  background-size: 100% 100%;
}

.dian {
  width: 3px;
  height: 3px;
  background: #fd8e1c;
  margin: auto 8px;
}

/*background: #D80100;*/
:deep(.el-tabs__item.is-active) {
  font-size: 16px;
  font-weight: bold;
  color: #444b55;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: bold;
  color: #444b55;
}

:deep(.el-tabs__item:hover) {
  font-size: 16px;
  font-weight: bold;
  color: #444b55;
  cursor: pointer;
}

:deep(.el-tabs__active-bar) {
  background: #d80100;
}

.mg_right24 {
  margin-right: 2%;
}

.nav {
  width: 100%;
  height: 160px;
  background: url('../../assets/images/nav.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jg_box {
  width: 125px;
  height: 110px;
  border: 1px solid #dadada;
  border-radius: 5px;
  margin: 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
}

.bs_title {
  font-size: 14px;
  font-weight: bold;
  color: #d80100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 10px;
}

.bor_bt {
  border-bottom: 1px dashed rgb(223, 230, 236);
  cursor: pointer;
}

.title_type {
  width: 42px;
  height: 21px;
  background: #ffffff;
  border-radius: 10px 10px 10px 0px;
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  text-align: center;
  margin: auto 5px;
}

.gr {
  border: 1px solid #1aa645;
  color: #1aa645;
}

.jg {
  border: 1px solid #d80100;
  color: #d80100;
}

.footer_title {
  font-size: 14px;
  font-weight: bold;
  color: #323131;
  line-height: 50px;
  margin-right: 23px;
}

.footer {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user_big {
  width: 352px;
  height: 111px;
  background: #fff9f9;
  /*opacity: 0.3;*/
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.user_login {
  width: 167px;
  height: 111px;
  background: #fff9f9;
  /*opacity: 0.3;*/
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.zl_title {
  font-size: 14px;
  font-weight: bold;
  color: #d80100;
  cursor: pointer;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 50px;
}
.image-slot .el-icon {
  font-size: 50px;
}

:deep(.el-form) {
  width: 80%;
}
:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__content) {
  margin-left: 0px !important;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;
  margin-left: 15px;
}
.login-code img {
  cursor: pointer;
  vertical-align: middle;
}
.login-code-img {
  height: 38px;
}

:deep(.el-form-item__content){
  justify-content: space-between;
}
</style>