新增

马宇豪

2023-11-28 7defcb73ac495fdabc3d67a3125c1c798df05a8b

新增

 .env.development

@@ -8,8 +8,8 @@
#黄镇
#VITE_APP_BASE_API = 'http://192.168.0.47:8085'

#张凤
#VITE_APP_BASE_API = 'http://192.168.0.70:8085'
#孔哥
VITE_APP_BASE_API = 'http://192.168.0.77:8088/api'

#线上
VITE_APP_BASE_API = 'http://121.239.169.30:8086/api'
#VITE_APP_BASE_API = 'http://121.239.169.30:8086/api'

 src/api/home/homePage.js

对比新文件
@@ -0,0 +1,28 @@
import request from '@/utils/request'

// 获取分页
export function getNotice(params) {
    return request({
        url: '/system/notice/noticeList',
        method: 'get',
        params: params
    })
}

// 获取分页
export function getLaws(params) {
    return request({
        url: '/system/law/lawList',
        method: 'get',
        params: params
    })
}

// 获取分页
export function getPublish(params) {
    return request({
        url: '/system/agency/agencyList',
        method: 'get',
        params: params
    })
}

 src/api/login.js

@@ -9,7 +9,7 @@
    uuid
  }
  return request({
    url: '/login',
    url: '/account/login',
    headers: {
      isToken: false,
      repeatSubmit: false
@@ -42,7 +42,7 @@
// 退出方法
export function logout() {
  return request({
    url: '/logout',
    url: '/account/logout',
    method: 'post'
  })
}
@@ -50,7 +50,7 @@
// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    url: '/system/captcha/captchaImage',
    headers: {
      isToken: false
    },

 src/assets/images/article.png

 src/assets/images/city-bg.png

 src/assets/images/file.png

 src/assets/images/laws.png

 src/assets/images/loginImg.png

 src/assets/images/notice.png

 src/assets/images/section.png

 src/assets/styles/index.scss

@@ -188,4 +188,12 @@
  --el-color-warning: #EAB308 !important;
  --el-color-success: #10B981 !important;
  --el-color-info: #1f2937 !important;
}

.blueFont{
  color: #5175C0;
}

.blueBg{
  background: #5175C0;
}

 src/permission.js

@@ -18,34 +18,34 @@
  if (getToken()) {
    to.meta.title && useSettingsStore().setTitle(to.meta.title)
    /* has token*/
    if (to.path === '/homePage') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (useUserStore().roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        useUserStore().getInfo().then(() => {
          isRelogin.show = false
          usePermissionStore().generateRoutes().then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            accessRoutes.forEach(route => {
              if (!isHttp(route.path)) {
                router.addRoute(route) // 动态添加可访问路由表
              }
            })
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          useUserStore().logOut().then(() => {
            ElMessage.error(err)
            next({ path: '/' })
          })
        })
      } else {
    // if (to.path === '/homePage') {
    //   next({ path: '/' })
    //   NProgress.done()
    // } else {
    //   if (useUserStore().roles.length === 0) {
    //     isRelogin.show = true
    //     // 判断当前用户是否已拉取完user_info信息
    //     useUserStore().getInfo().then(() => {
    //       isRelogin.show = false
    //       usePermissionStore().generateRoutes().then(accessRoutes => {
    //         // 根据roles权限生成可访问的路由表
    //         accessRoutes.forEach(route => {
    //           if (!isHttp(route.path)) {
    //             router.addRoute(route) // 动态添加可访问路由表
    //           }
    //         })
    //         next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
    //       })
    //     }).catch(err => {
    //       useUserStore().logOut().then(() => {
    //         ElMessage.error(err)
    //         next({ path: '/' })
    //       })
    //     })
    //   } else {
        next()
      }
    }
    //   }
    // }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {

 src/store/modules/user.js

@@ -22,8 +22,8 @@
        const uuid = userInfo.uuid
        return new Promise((resolve, reject) => {
          login(username, password, code, uuid).then(res => {
            setToken(res.token)
            this.token = res.token
            setToken(res.data.token)
            this.token = res.data.token
            resolve()
          }).catch(error => {
            reject(error)

 src/utils/request.js

@@ -82,7 +82,7 @@
      return res.data
    }
    if (code === 401) {
      if (!isRelogin.show) {
      // if (!isRelogin.show) {
        isRelogin.show = true;
        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
@@ -90,10 +90,10 @@
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;
        isRelogin.show = false
      });
    }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    // }
      // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))

 src/views/components/home.vue

对比新文件
@@ -0,0 +1,251 @@
<template>
  <div class="container">
    <div class="main-content">
      <div class="list-container">
        <div class="tit">
          <div>
            <Platform style="width: 1em; height: 1em;margin-right: 4px" />
            通知公告
          </div>
          <el-button plain @click="toMore(2)">查看更多</el-button>
        </div>
        <div class="list">
          <div v-for="item in state.noticeList">
            <div><img src="src/assets/images/notice.png"></div>
            <div>
              <div>{{item.title}}</div>
              <span>{{item.updateTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-container">
        <div class="tit">
          <div>
            <Platform style="width: 1em; height: 1em;margin-right: 4px" />
            法律法规
          </div>
          <el-button plain @click="toMore(3)">查看更多</el-button>
        </div>
        <div class="list">
          <div v-for="item in state.lawsList">
            <div><img src="src/assets/images/laws.png"></div>
            <div>
              <div>{{item.title}}</div>
              <span>{{item.updateTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-container">
        <div class="tit">
          <div>
            <Platform style="width: 1em; height: 1em;margin-right: 4px" />
            机构公示
          </div>
          <el-button plain @click="toMore(4)">查看更多</el-button>
        </div>
        <div class="list">
          <div v-for="item in state.pubList">
            <div><img src="src/assets/images/section.png"></div>
            <div>
              <div>{{item.title}}</div>
              <span>{{item.updateTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="login-container">
<!--        <div class="tit">-->
<!--          <div>-->
<!--            <Platform style="width: 1em; height: 1em;margin-right: 4px" />-->
<!--            资料下载-->
<!--          </div>-->
<!--          <el-button plain>查看更多</el-button>-->
<!--        </div>-->
<!--        <div class="list">-->
<!--          <div v-for="item in state.newList">-->
<!--            <div><img src="src/assets/images/file.png"></div>-->
<!--            <div>-->
<!--              <div>{{item.title}}</div>-->
<!--              <span>{{item.date}}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <login-form ref="loginRef"/>
      </div>
    </div>
<!--    <login-form ref="loginRef"/>-->
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, watch, onUnmounted, defineEmits, defineExpose} from "vue"
import { getNotice, getLaws, getPublish } from '@/api/home/homePage'
import useUserStore from '@/store/modules/user'
import LoginForm from './loginForm'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()

const state = reactive({
  noticeList: [],
  lawsList: [],
  pubList: []
})
const emit = defineEmits(["toMore"])
const redirect = ref(undefined);

onMounted(()=>{
  getNoticeList()
  getLawsList()
  getPubList()
})

onUnmounted(()=>{

})

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

const toMore=(num)=>{
  emit('toMore',num)
}

const getNoticeList = async ()=>{
  const res = await getNotice({title: '', content: '', pageNum: 1, pageSize: 5})
  if(res.code == 200){
    state.noticeList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}

const getLawsList = async ()=>{
  const res = await getLaws({title: '', content: '', pageNum: 1, pageSize: 5})
  if(res.code == 200){
    state.lawsList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}

const getPubList = async ()=>{
  const res = await getPublish({title: '', content: '', pageNum: 1, pageSize: 5})
  if(res.code == 200){
    state.pubList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}

defineExpose({
  getNoticeList,
  getLawsList,
  getPubList
})

</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 170px;

  .main-content{
    width: 1200px;
    margin: 20px 0 80px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 350px);
    grid-auto-flow: row;
    justify-content: center;
    color: #333;

    .login-container{
      border-radius: 4px;
      box-shadow: 1px 1px 3px rgba(0,0,0,.04);
      padding: 0 15px;
      overflow: hidden;
      background: url("../../assets/images/login-bg.jpg");
    }

    .list-container{
      border-radius: 4px;
      box-shadow: 1px 1px 3px rgba(0,0,0,.04);
      padding: 0 15px;
      overflow: hidden;
      background: #fff url("../../assets/images/city-bg.png") no-repeat right bottom;
      background-size: 40% auto;

      .tit{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #ebeef5;
        &>div{
          display: flex;
          align-items: center;
          font-size: 18px;
          color: #425f9f;
          font-weight: bolder;
        }
      }
      .list{
        width: 100%;
        margin-top: 10px;

        &>div{
          width: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;

          &>div:first-of-type{
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background: #eaf1ff;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 28px;
              height: 28px;
            }
          }
          &>div:last-of-type{
            width: calc(100% - 50px);
            font-size: 16px;
            div{
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: "PingFang SC";
              margin-bottom: 4px;
            }
            span{
              color: #999;
            }
          }
          &:hover{
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>

 src/views/components/laws.vue

对比新文件
@@ -0,0 +1,203 @@
<template>
  <div class="container">
    <div class="main-content">
      <div class="filters">
        <el-form :model="state.querys">
          <el-form-item label="法律法规名称" style="width: 500px;margin-bottom: 0;margin-right: 20px">
            <el-input v-model="state.querys.title" />
          </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Search" class="searchBtn">搜索</el-button>
        <el-button type="primary" :icon="Refresh" class="resetBtn">重置</el-button>
      </div>
      <div class="list">
        <div v-for="item in state.dataList">
          <div>
            <div><img src="src/assets/images/article.png"></div>
            <div>{{item.title}}</div>
          </div>
          <span>
            {{item.updateTime}}
          </span>
        </div>
      </div>
      <div class="pag-container">
        <el-pagination
            v-model:current-page="state.querys.pageNum"
            v-model:page-size="state.querys.pageSize"
            :page-sizes="[10,15,20,25]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue"
import { getLaws } from '@/api/home/homePage'
import useUserStore from '@/store/modules/user'
import { Search, Refresh } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()

const state = reactive({
  dataList: [],
  querys:{
    title: '',
    content: '',
    pageNum: 1,
    pageSize: 10
  },
  total: null
})

const redirect = ref(undefined);

onMounted(()=>{
  getData()
})

onUnmounted(()=>{

})

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

const getData = async ()=>{
  const res = await getLaws(state.querys)
  if(res.code == 200){
    state.dataList = res.data.list
    state.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
}

const handleSizeChange = (val) => {
  state.querys.pageSize = val
  getData()
}
const handleCurrentChange = (val) => {
  state.querys.pageNum = val
  getData()
}

defineExpose({
  getData
})

</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 170px;

  .main-content{
    width: 1200px;
    margin: 20px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.04);
    padding: 0 10px;
    color: #333;

    .filters{
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 10px;

      .searchBtn{
        border: none;
        border-radius: 4px !important;
        background-image: linear-gradient(90deg,#4064df,#548dfb);

        &:active{
          border-radius: 99px !important;
          background-image: linear-gradient(-90deg,#4064df,#548dfb);
        }
      }
      .resetBtn{
        border: none;
        border-radius: 4px !important;
        background-image: linear-gradient(90deg,#fc8e2e,#ffaa59);

        &:active{
          border-radius: 99px !important;
          background-image: linear-gradient(-90deg,#fc8e2e,#ffaa59);
        }
      }
    }

    .list{
      padding: 15px 0;

      &>div{
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #ebeef5;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;

        &>div{
          display: flex;
          align-items: center;

          div:first-of-type{
            width: 40px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img{
              width: 28px;
              height: 28px;
            }
          }
          div:last-of-type{
            width: 1000px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: "PingFang SC";
          }
        }
        span{
          color: #999;
        }
        &:hover{
          background: #f5f5f5;
        }
        &:active{
          background: #425f9f;
          color: #fff;
        }
      }
    }

    .pag-container{
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}
</style>

 src/views/components/loginForm.vue

对比新文件
@@ -0,0 +1,239 @@
<template>
  <div class="login-panel">
    <div class="login-img">
      <img src="src/assets/images/loginImg.png">
    </div>
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">登录系统</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          size="large"
          auto-complete="off"
          placeholder="账号"
        >
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          size="large"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter="handleLogin"
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          size="large"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter="handleLogin"
        >
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
<!--        <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>-->
        <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:50%;"
            @click.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div v-if="isRegister">
          <el-button link type="primary" @click="openRegist">立即注册</el-button>
        </div>
      </div>
    </el-form>
  </div>
  <register ref="regRef"/>
</template>

<script setup>
import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue"
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { Register } from "@/layout/components";

const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: "admin",
  password: "admin@123",
  code: "",
  uuid: ""
});

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
const regRef = ref(null)
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const isRegister = ref(true);
const redirect = ref(undefined);

onMounted(()=>{

})

const openRegist = ()=>{
  regRef.value.dialogVisible = true
}

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

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      // if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
      //   Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      // } else {
        // 否则移除
      //   Cookies.remove("username");
      //   Cookies.remove("password");
      //   Cookies.remove("rememberMe");
      // }
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        const query = route.query;
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
        router.push({ path: redirect.value || "/", query: otherQueryParams });
      }).catch(() => {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          getCode();
        }
      });
    }
  });
}

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

// function getCookie() {
//   const username = Cookies.get("username")
//   const password = Cookies.get("password")
//   loginForm.value = {
//     username: username === undefined ? loginForm.value.username : username,
//     password: password === undefined ? loginForm.value.password : decrypt(password),
//   };
// }

getCode();
// getCookie();
</script>

<style lang='scss' scoped>
.login-panel{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-img{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 100%;
  }
}
.login-form {
  flex: 2;
  padding: 10px;

  .title{
    margin: 20px 0;
  }

  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-form-item--default{
  margin-bottom: 15px;
}

::v-deep(.el-form-item__content){
  display: flex;
  justify-content: space-between;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>

 src/views/components/notice.vue

对比新文件
@@ -0,0 +1,167 @@
<template>
  <div class="container">
    <div class="main-content">
      <div class="list">
        <div v-for="item in state.dataList">
          <div>
            <div><img src="src/assets/images/article.png"></div>
            <div>{{item.title}}</div>
          </div>
          <span>
            {{item.updateTime}}
          </span>
        </div>
      </div>
      <div class="pag-container">
        <el-pagination
            v-model:current-page="state.querys.pageNum"
            v-model:page-size="state.querys.pageSize"
            :page-sizes="[10,15,20,25]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue"
import { getNotice } from '@/api/home/homePage'
import useUserStore from '@/store/modules/user'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()

const state = reactive({
  dataList: [],
  querys:{
    title: '',
    content: '',
    pageNum: 1,
    pageSize: 10
  },
  total: null
})

const redirect = ref(undefined);

onMounted(()=>{
  getData()
})

onUnmounted(()=>{

})

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

const handleSizeChange = (val) => {
  state.querys.pageSize = val
  getData()
}
const handleCurrentChange = (val) => {
  state.querys.pageNum = val
  getData()
}

const getData = async ()=>{
  const res = await getNotice(state.querys)
  if(res.code == 200){
    state.dataList = res.data.list
    state.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
}

defineExpose({
  getData
})

</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 170px;

  .main-content{
    width: 1200px;
    margin: 20px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.04);
    padding: 0 10px;
    color: #333;

    .list{
      padding: 15px 0;
      max-height: calc(100vh - 350px);
      overflow-y: auto;

      &>div{
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #ebeef5;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;

        &>div{
          display: flex;
          align-items: center;

          div:first-of-type{
            width: 40px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img{
              width: 28px;
              height: 28px;
            }
          }
          div:last-of-type{
            width: 1000px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: "PingFang SC";
          }
        }
        span{
          color: #999;
        }
        &:hover{
          background: #f5f5f5;
        }
        &:active{
          background: #425f9f;
          color: #fff;
        }
      }
    }

    .pag-container{
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}
</style>

 src/views/components/publish.vue

对比新文件
@@ -0,0 +1,215 @@
<template>
  <div class="container">
    <div class="main-content">
      <div class="filters">
        <el-form :model="state.querys" style="display:flex;">
          <el-form-item label="机构名称" style="width: 300px;margin-bottom: 0;margin-right: 20px">
            <el-input v-model="state.querys.name" />
          </el-form-item>
          <el-form-item label="所在地市" style="margin-bottom: 0;margin-right: 20px">
            <el-select v-model="state.querys.area">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="业务范围" style="margin-bottom: 0;margin-right: 20px">
            <el-select v-model="state.querys.business">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Search" class="searchBtn">搜索</el-button>
        <el-button type="primary" :icon="Refresh" class="resetBtn">重置</el-button>
      </div>
      <div class="list">
        <div v-for="item in state.dataList">
          <div>
            <div><img src="src/assets/images/article.png"></div>
            <div>{{item.title}}</div>
          </div>
          <span>
            {{item.updateTime}}
          </span>
        </div>
      </div>
      <div class="pag-container">
        <el-pagination
            v-model:current-page="state.querys.pageNum"
            v-model:page-size="state.querys.pageSize"
            :page-sizes="[10,15,20,25]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue"
import { getPublish } from '@/api/home/homePage'
import { Search, Refresh } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()

const state = reactive({
  dataList: [],
  querys:{
    name: '',
    area: '',
    bussiness: '',
    pageNum: 1,
    pageSize: 10
  },
  total: null
})

const redirect = ref(undefined);

onMounted(()=>{
  getData()
})

onUnmounted(()=>{

})

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

const getData = async ()=>{
  const res = await getPublish(state.querys)
  if(res.code == 200){
    state.dataList = res.data.list
    state.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
}

const handleSizeChange = (val) => {
  state.querys.pageSize = val
  getData()
}
const handleCurrentChange = (val) => {
  state.querys.pageNum = val
  getData()
}

defineExpose({
  getData
})

</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 170px;

  .main-content{
    width: 1200px;
    margin: 20px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.04);
    padding: 0 10px;
    color: #333;

    .filters{
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 10px;

      .searchBtn{
        border: none;
        border-radius: 4px !important;
        background-image: linear-gradient(90deg,#4064df,#548dfb);

        &:active{
          border-radius: 99px !important;
          background-image: linear-gradient(-90deg,#4064df,#548dfb);
        }
      }
      .resetBtn{
        border: none;
        border-radius: 4px !important;
        background-image: linear-gradient(90deg,#fc8e2e,#ffaa59);

        &:active{
          border-radius: 99px !important;
          background-image: linear-gradient(-90deg,#fc8e2e,#ffaa59);
        }
      }
    }

    .list{
      padding: 15px 0;

      &>div{
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #ebeef5;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;

        &>div{
          display: flex;
          align-items: center;

          div:first-of-type{
            width: 40px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img{
              width: 28px;
              height: 28px;
            }
          }
          div:last-of-type{
            width: 1000px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: "PingFang SC";
          }
        }
        span{
          color: #999;
        }
        &:hover{
          background: #f5f5f5;
        }
        &:active{
          background: #425f9f;
          color: #fff;
        }
      }
    }

    .pag-container{
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}
</style>

 src/views/homePage.vue

@@ -1,196 +1,242 @@
<template>
  <div class="login">
    <img class="pics1" src="src/assets/images/login-data.png">
    <img class="pics2" src="src/assets/images/login-search.png">
    <div class="login-panel">
      <div class="login-img">
        <img src="src/assets/images/loginImg.png">
      </div>
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">智慧安评</h3>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
          >
            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleLogin"
          >
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input
            v-model="loginForm.code"
            size="large"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleLogin"
          >
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          <div v-if="isRegister">
            <el-button link type="primary" @click="openRegist">立即注册</el-button>
<!--    <img class="pics1" src="src/assets/images/login-data.png">-->
<!--    <img class="pics2" src="src/assets/images/login-search.png">-->
    <div class="main-content">
      <div class="top">
        <div class="top-cont">
          <div class="logo blueFont">智慧安评</div>
          <div class="time">
            <div>
              <span>{{state.date}}</span>
              <span>{{state.weekDay}}</span>
            </div>
            <div>
              {{state.dayTime}}好！
            </div>
          </div>
        </div>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            @click.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      </div>

      <div class="nav blueBg">
        <div class="nav-cont">
          <div :class="state.activeMenu == 1?'active': ''" @click="changeTab(1)">
            <HomeFilled style="width: 1em; height: 1em; margin-right: 8px" />
            <div>首页</div>
          </div>
          <div :class="state.activeMenu == 2?'active': ''" @click="changeTab(2)">
            <Comment style="width: 1em; height: 1em; margin-right: 8px" />
            <div>通知公告</div>
          </div>
          <div :class="state.activeMenu == 3?'active': ''" @click="changeTab(3)">
            <BellFilled style="width: 1em; height: 1em; margin-right: 8px" />
            <div>法律法规</div>
          </div>
          <div :class="state.activeMenu == 4?'active': ''" @click="changeTab(4)">
            <List style="width: 1em; height: 1em; margin-right: 8px" />
            <div>信息公示</div>
          </div>
        </div>
      </div>
      <div class="content">
        <Home v-if="state.activeMenu==1" ref="homeRef" @toMore="changeTab"/>
        <Notice v-if="state.activeMenu==2" ref="noticeRef"/>
        <Laws v-if="state.activeMenu==3" ref="lawsRef"/>
        <Publish v-if="state.activeMenu==4" ref="publishRef"/>
      </div>
    </div>
    <!--  底部  -->
<!--    <div class="el-login-footer">-->
<!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
<!--    </div>-->
    <div class="el-login-footer">
      <span>Copyright © All Rights Reserved.</span>
    </div>
  </div>
  <register ref="regRef"/>
</template>

<script setup>
import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue"
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue"
import useUserStore from '@/store/modules/user'
import { Register } from "@/layout/components";
import Home from './components/home'
import Notice from './components/notice'
import Laws from './components/laws'
import Publish from './components/publish'

const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const route = useRoute()
const router = useRouter()
// 时间格式化
const timeForm = {
  hour12: false,
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
}

const loginForm = ref({
  username: "admin",
  password: "Admin@123.com",
  rememberMe: false,
  code: "",
  uuid: ""
});
const homeRef = ref(null)
const noticeRef = ref(null)
const lawsRef = ref(null)
const publishRef = ref(null)

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
const state = reactive({
  activeMenu: 1,
  date: '',
  weekDay: '',
  dayTime: ''
})

// 当前时间
const getDateTime = () => {
  const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
  console.log(curTime,'time')
  state.date = curTime.slice(0, 10);
  let week = ['日', '一', '二', '三', '四', '五', '六'];
  let day = new Date().getDay();
  state.weekDay = '星期' + week[day];
  let curHour = Number(curTime.slice(10, 13));
  if (curHour >= 5 && curHour <= 10) {
    state.dayTime = '上午';
  }
  if (curHour > 10 && curHour <= 12) {
    state.dayTime = '中午';
  }
  if (curHour > 12 && curHour <= 18) {
    state.dayTime = '下午';
  }
  if (curHour > 18 && curHour <= 22) {
    state.dayTime = '晚上';
  }
  if (curHour > 22) {
    state.dayTime = '午夜';
  }
};

const codeUrl = ref("");
const loading = ref(false);
const regRef = ref(null)
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const isRegister = ref(true);

const redirect = ref(undefined);

onMounted(()=>{

  getDateTime();
})

const openRegist = ()=>{
  regRef.value.dialogVisible = true
}
onUnmounted(()=>{

})

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

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        const query = route.query;
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
        router.push({ path: redirect.value || "/", query: otherQueryParams });
      }).catch(() => {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          getCode();
        }
      });
    }
  });
const changeTab=(num)=>{
  state.activeMenu = num
  console.log(state.activeMenu)
  // if(num == 1){
  //   homeRef.value.getNoticeList()
  //   homeRef.value.getLawsList()
  //   homeRef.value.getPubList()
  // }
  // if(num == 2){
  //   noticeRef.value.getData()
  // }
  // if(num == 3){
  //   lawsRef.value.getData()
  // }
  // if(num == 4){
  //   publishRef.value.getData()
  // }
}

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

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

getCode();
getCookie();
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-bg.jpg");

  .main-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #333;

    .top{
      width: 100%;
      background: rgba(249,250,251,1);
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .top-cont{
        width: 1200px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;

        .logo{
          font-size: 2rem;
          font-weight: 800;
          height: 90px;
          line-height: 90px;
          font-family: "PingFang SC";
        }

        .time{
          font-size: 16px;
          height: 90px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          span{
            &:first-of-type{
              margin-right: 10px;
            }
          }
        }
      }
    }


    .nav{
      width: 100%;
      height: 80px;
      position: fixed;
      top: 90px;
      left: 0;
      .nav-cont{
        width: 1200px;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: left;

        &>div{
          height: 100%;
          padding: 0 50px;
          color: #ffffff;
          background-color: #5175C0;
          font-size: 20px;
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &:hover{
            background: #425f9f;
          }
        }
        .active{
          background: #425f9f;
        }
      }
    }
  }
}
.pics1{
  position: absolute;
@@ -206,83 +252,18 @@
  left: 20px;
  opacity: 0.5;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #333;
  font-size: 1.4rem;
}
.login-panel{
  border-radius: 1.2rem;
  background: #ffffff;
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20%);
  box-shadow: 15px 15px 30px rgba(0,0,0,.1);
}
.login-img{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 80%;
  }
}
.login-form {
  flex: 1;
  padding: 25px;
  .el-input {
    height: 44px;
    input {
      height: 44px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-form-item--default{
  margin-bottom: 24px;
}

::v-deep(.el-form-item__content){
  display: flex;
  justify-content: space-between;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  height: 60px;
  line-height: 60px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  background: #5175C0;
  font-family: "PingFang SC";
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>

 src/views/originLogin.vue

对比新文件
@@ -0,0 +1,288 @@
<template>
  <div class="login">
    <img class="pics1" src="src/assets/images/login-data.png">
    <img class="pics2" src="src/assets/images/login-search.png">
    <div class="login-panel">
      <div class="login-img">
        <img src="src/assets/images/loginImg.png">
      </div>
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">智慧安评</h3>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
          >
            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleLogin"
          >
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input
            v-model="loginForm.code"
            size="large"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleLogin"
          >
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          <div v-if="isRegister">
            <el-button link type="primary" @click="openRegist">立即注册</el-button>
          </div>
        </div>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            @click.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
<!--    <div class="el-login-footer">-->
<!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
<!--    </div>-->
  </div>
  <register ref="regRef"/>
</template>

<script setup>
import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue"
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { Register } from "@/layout/components";

const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: "admin",
  password: "Admin@123.com",
  rememberMe: false,
  code: "",
  uuid: ""
});

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
const regRef = ref(null)
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const isRegister = ref(true);
const redirect = ref(undefined);

onMounted(()=>{

})

const openRegist = ()=>{
  regRef.value.dialogVisible = true
}

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

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        const query = route.query;
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
        router.push({ path: redirect.value || "/", query: otherQueryParams });
      }).catch(() => {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          getCode();
        }
      });
    }
  });
}

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

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

getCode();
getCookie();
</script>

<style lang='scss' scoped>
.login {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-bg.jpg");
}
.pics1{
  position: absolute;
  width: 500px;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}
.pics2{
  position: absolute;
  width: 500px;
  top: 20px;
  left: 20px;
  opacity: 0.5;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #333;
  font-size: 1.4rem;
}
.login-panel{
  border-radius: 1.2rem;
  background: #ffffff;
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20%);
  box-shadow: 15px 15px 30px rgba(0,0,0,.1);
}
.login-img{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 80%;
  }
}
.login-form {
  flex: 1;
  padding: 25px;
  .el-input {
    height: 44px;
    input {
      height: 44px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-form-item--default{
  margin-bottom: 24px;
}

::v-deep(.el-form-item__content){
  display: flex;
  justify-content: space-between;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>