zhangjiming
5 months ago
9 changed files with 271 additions and 400 deletions
-
2src/router/index.ts
-
6src/stores/user.ts
-
186src/views/components/Header.vue
-
47src/views/components/Time.vue
-
2src/views/components/UpdatePwd.vue
-
2src/views/components/menu.ts
-
4src/views/expeRecord/components/ExpeDetail.vue
-
5src/views/login/index.vue
-
193src/views/login/index1.vue
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 显示格式化后的时间 --> |
|||
{{ formattedTime }} |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, onUnmounted, watch } from 'vue' |
|||
import dayjs from 'dayjs' |
|||
|
|||
// 定义props来接收外部传入的格式化参数 |
|||
const props = defineProps<{ |
|||
format?: string |
|||
}>() |
|||
|
|||
// 设置默认的时间格式为 'YYYY-MM-DD HH:mm'，如果用户没有传入格式，则使用这个默认值 |
|||
const format = ref(props.format || 'YYYY-MM-DD HH:mm') |
|||
|
|||
// 定义响应式变量来保存格式化后的时间 |
|||
const formattedTime = ref('') |
|||
|
|||
// 定义更新时钟的函数 |
|||
const updateClock = () => { |
|||
formattedTime.value = dayjs().format(format.value) |
|||
} |
|||
|
|||
// 在组件挂载时设置定时器，每秒更新一次时间 |
|||
onMounted(() => { |
|||
updateClock() // 初始更新 |
|||
const intervalId = setInterval(updateClock, 1000) // 每分钟更新 |
|||
onUnmounted(() => clearInterval(intervalId)) // 在组件销毁时清除定时器 |
|||
}) |
|||
|
|||
// 监听传入的格式，如果外部改变了格式，时钟会相应调整 |
|||
watch( |
|||
() => props.format, |
|||
(newFormat) => { |
|||
format.value = newFormat || 'HH:mm' // 如果传入空值，则回到默认值 |
|||
updateClock() // 更新时钟以匹配新格式 |
|||
}, |
|||
) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -1,193 +0,0 @@ |
|||
<template> |
|||
<div class="login-container"> |
|||
<!-- 背景图 --> |
|||
<div class="background-image"></div> |
|||
<!-- 登录表单 --> |
|||
<div class="login-form"> |
|||
<div class="login_logo"> |
|||
<img :src="logoSvg" class="logo_size"/> |
|||
<div class="company_name">长春黄金研究院有限公司</div> |
|||
</div> |
|||
<el-form> |
|||
<el-form-item label="账号"> |
|||
<el-input v-model="username" placehold="请输入用户名"> |
|||
<template #prefix> |
|||
<img :src="userIconSvg" class="icon" alt=""/> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="密码"> |
|||
<el-input v-model="password" placehold="请输入密码"> |
|||
<template #prefix> |
|||
<img :src="pwdIconSvg" class="icon" alt=""/> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 用户名输入框 --> |
|||
<!-- <div class="login-user-input">--> |
|||
<!-- <div class="user_name">用户名</div>--> |
|||
<!-- <img class="user_name_icon" :src="userIconSvg"/>--> |
|||
<!-- <input type="text" v-model="username" placeholder="用户名" class="input-field" />--> |
|||
<!-- </div>--> |
|||
<!-- <!– 密码输入框 –>--> |
|||
<!-- <div class="login-pwd-input">--> |
|||
<!-- <div class="user_name">密码</div>--> |
|||
<!-- <img class="pwd_icon" :src="pwdIconSvg"/>--> |
|||
<!-- <input type="password" v-model="password" placeholder="密码" class="input-field" />--> |
|||
<!-- </div>--> |
|||
<!-- 登录按钮 --> |
|||
<button @click="handleLogin" class="login-button">登录</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from "vue"; |
|||
import { useRouter } from "vue-router"; |
|||
import { showToast } from "vant"; |
|||
import logoSvg from '@/assets/logo.svg' |
|||
import userIconSvg from '@/assets/user_icon.svg' |
|||
import pwdIconSvg from '@/assets/pwdw_icon.svg' |
|||
import { getCurrentUser, login, type User } from "@/services/user/userManager"; |
|||
import { useUserStore } from "@/stores/user"; |
|||
|
|||
const router = useRouter(); |
|||
// 定义用户名和密码的响应式变量 |
|||
const username = ref(""); |
|||
const password = ref(""); |
|||
|
|||
const userStore = useUserStore(); |
|||
// 处理登录的函数 |
|||
const handleLogin = async () => { |
|||
if(!username.value || !password.value){ |
|||
showToast('请输入用户名或密码！'); |
|||
return; |
|||
} |
|||
const res = await login({ username: username.value, password: password.value }); |
|||
if (res.success) { |
|||
sessionStorage.setItem("token", res.data); |
|||
const response = await getCurrentUser(); |
|||
if (response.success) { |
|||
const { username, nickname, role } = response.data; |
|||
userStore.setUser({ username, nickname, role } as User); |
|||
} |
|||
router.push("/home"); |
|||
} else { |
|||
showToast(res.msg); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@use "@/assets/style/mixin.scss" as *; |
|||
.icon { |
|||
width: 20px; |
|||
} |
|||
.login-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%); |
|||
.login_logo{ |
|||
.logo_size{ |
|||
width: 2.875rem; |
|||
height: 2.875rem; |
|||
margin-top:2.875rem; |
|||
margin-left: 12rem; |
|||
} |
|||
.company_name{ |
|||
color: #8799AB; |
|||
font-size: 1.25rem; |
|||
margin-top:1.5rem; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.background-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url('https://via.placeholder.com/1920x1080'); /* 替换为你自己的背景图 URL */ |
|||
background-size: cover; |
|||
background-position: center; |
|||
filter: blur(5px); |
|||
z-index: -1; |
|||
} |
|||
|
|||
.login-form { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width:27.125rem; |
|||
transform: translate(-50%, -50%); |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
padding: 20px; |
|||
border-radius: 10px; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
|||
text-align: center; |
|||
} |
|||
|
|||
.input-field { |
|||
width:19.75rem; |
|||
height: 2.75rem; |
|||
border: 1px solid #ccc; |
|||
border-radius: 5px; |
|||
margin-left: 3.625rem; |
|||
padding-left: 1.625rem; |
|||
} |
|||
|
|||
.login-button { |
|||
width: 19.75rem; |
|||
height: 3rem; |
|||
background-color: #007bff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
margin-top: 2rem; |
|||
margin-left: 2rem; |
|||
} |
|||
|
|||
|
|||
|
|||
.login-button:hover { |
|||
background-color: #0056b3; |
|||
} |
|||
|
|||
.login-user-input{ |
|||
width: 10.2rem; |
|||
margin-top: 3rem; |
|||
.user_name{ |
|||
color: #2C3E59; |
|||
font-size: 1rem; |
|||
|
|||
} |
|||
.user_name_icon{ |
|||
position: absolute; |
|||
margin-left: 4rem; |
|||
margin-top: 0.85rem; |
|||
width: 1.25rem; |
|||
height: 1.25rem; |
|||
} |
|||
} |
|||
|
|||
.login-pwd-input{ |
|||
width: 9.6rem; |
|||
margin-top: 2rem; |
|||
.pwd_icon{ |
|||
position: absolute; |
|||
margin-left: 4rem; |
|||
margin-top: 0.75rem; |
|||
width: 1.25rem; |
|||
height: 1.25rem; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue