From e3b49d33e9c2e8ba75ce3d6fdef0da27d529c72c Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期四, 14 十二月 2023 10:43:00 +0800
Subject: [PATCH] 样式调整
---
src/views/homePage.vue | 429 +++++++++++++++++++++++++----------------------------
1 files changed, 203 insertions(+), 226 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 115fc56..0418459 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,196 +1,238 @@
<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" @openDetails="openDetails"/>
+ <Notice v-if="state.activeMenu==2" ref="noticeRef" @openDetails="openDetails"/>
+ <Laws v-if="state.activeMenu==3" ref="lawsRef" @openDetails="openDetails"/>
+ <Publish v-if="state.activeMenu==4" ref="publishRef" @openDetails="openDetails"/>
+ <Details v-if="state.activeMenu==0" ref="detailsRef" @backJump="changeTab"></Details>
+ </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'
+import Details from './components/details.vue'
+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 userStore = useUserStore()
-const route = useRoute();
-const router = useRouter();
-const { proxy } = getCurrentInstance();
+const homeRef = ref(null)
+const noticeRef = ref(null)
+const lawsRef = ref(null)
+const publishRef = ref(null)
+const detailsRef = ref(null)
+const state = reactive({
+ activeMenu: 1,
+ date: '',
+ weekDay: '',
+ dayTime: '',
+ checkDetails: false
+})
-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 getDateTime = () => {
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ 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
}
-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;
- }
- });
+const openDetails=(type,id)=>{
+ state.activeMenu = 0
+ nextTick(() => {
+ proxy.$refs.detailsRef.openDetail(type,id)
+ })
+ // detailsRef.value.openDetail(type,id)
+
}
-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: #385ca7;
+ font-size: 20px;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &:hover{
+ background: #294582;
+ }
+ }
+ .active{
+ background: #385ca7;
+ }
+ }
+ }
+ }
}
.pics1{
position: absolute;
@@ -206,83 +248,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: #385ca7;
+ font-family: "PingFang SC";
font-size: 12px;
letter-spacing: 1px;
-}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
}
</style>
--
Gitblit v1.9.2