初始化仓库
This commit is contained in:
tao
301
src/views/index.vue
Normal file
301
src/views/index.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="ipc-dashboard">
|
||||
<Header title="过站工控机">
|
||||
<template #right>
|
||||
<a-button @click="handleLogout">退出登录</a-button>
|
||||
</template>
|
||||
</Header>
|
||||
|
||||
<div class="menu-grid">
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/pwoManage')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-building />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="desc">管理生产工单和进度</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/stationControl')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-monitor />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">游站控制</div>
|
||||
<div class="desc">设备状态监控和控制</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dispatch')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-package />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">出站管理</div>
|
||||
<div class="desc">产品出站和质量检测</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/hold')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-server />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">Hold管理</div>
|
||||
<div class="desc">异常处理和Hold状态管理</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dataAnalysis')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-bar-chart-3 />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">数据分析</div>
|
||||
<div class="desc">生产数据统计分析</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/maintenance')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-wrench />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">设备维护</div>
|
||||
<div class="desc">设备保养和维修记录</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/personnel')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-users />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">人员管理</div>
|
||||
<div class="desc">操作人员及权限管理</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/settings')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-settings />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">系统设置</div>
|
||||
<div class="desc">系统参数配置</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { useAuthStore, useUserStore } from '@/store';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const { username } = storeToRefs(userStore);
|
||||
const { token } = storeToRefs(authStore);
|
||||
const loggedIn = ref(Boolean(token.value));
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = () => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: `是否确认退出登录：${username.value}`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
message.success('已退出');
|
||||
},
|
||||
onCancel: () => {
|
||||
message.error('操作失败');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleJumpTo = (path) => {
|
||||
if (!loggedIn.value) {
|
||||
message.warning("尚未登录，请先登录");
|
||||
return;
|
||||
}
|
||||
router.push({ path });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ipc-dashboard {
|
||||
background: #f5f7fa;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 8vh 6vh;
|
||||
gap: 4%;
|
||||
row-gap: 6vh;
|
||||
|
||||
.menu-card {
|
||||
width: 22%;
|
||||
cursor: pointer;
|
||||
border-radius: 1vw;
|
||||
overflow: visible;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 16px;
|
||||
gap: 1vh;
|
||||
|
||||
.icon-wrap {
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #8b96a7;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.login-dialog) {
|
||||
.ant-modal {
|
||||
width: 48vw;
|
||||
left: 26vw;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
border-bottom: none;
|
||||
padding: 24px 20px !important;
|
||||
|
||||
.ant-modal-title {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 32px 28px !important;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 22px;
|
||||
|
||||
.ant-form-item-label > label {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
font-size: 16px;
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: #0c6bd1;
|
||||
box-shadow: 0 0 0 3px rgba(12, 107, 209, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-password-icon {
|
||||
color: #bfbfbf;
|
||||
|
||||
&:hover {
|
||||
color: #0c6bd1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
padding: 20px 28px !important;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
border-radius: 0 0 16px 16px;
|
||||
|
||||
.ant-btn {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
padding: 10px 32px !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:not(.btn-primary) {
|
||||
border-color: #d9d9d9;
|
||||
color: #595959;
|
||||
|
||||
&:hover {
|
||||
border-color: #0c6bd1;
|
||||
color: #0c6bd1;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(12, 107, 209, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
520
src/views/login.vue
Normal file
520
src/views/login.vue
Normal file
@@ -0,0 +1,520 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCaptcha } from '@/api/system'
|
||||
import type { LoginInfo } from '@/api/system/model'
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { useAuthStore } from '@/store';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { loginLoading } = storeToRefs(authStore);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<LoginInfo>({
|
||||
username: '',
|
||||
password: '',
|
||||
uuid: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
// 验证码图片
|
||||
const captchaImg = ref('')
|
||||
const captchaLoading = ref(false)
|
||||
const loadCaptchaFail = ref(false)
|
||||
|
||||
// 表单验证规则
|
||||
const rules: Record<string, Rule[]> = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'change' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'change' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
const refreshCaptcha = async () => {
|
||||
try {
|
||||
captchaImg.value = ''
|
||||
captchaLoading.value = true
|
||||
await getCaptcha().then((res: any) => {
|
||||
loadCaptchaFail.value = false;
|
||||
if (res.captchaOnOff) {
|
||||
captchaImg.value = "data:image/gif;base64," + res.img
|
||||
rules.code[0].required = true;
|
||||
} else {
|
||||
rules.code[0].required = false;
|
||||
}
|
||||
formData.uuid = res.uuid
|
||||
formData.code = '' // 清空验证码输入
|
||||
})
|
||||
} catch (error) {
|
||||
loadCaptchaFail.value = true;
|
||||
message.error('获取验证码失败')
|
||||
console.error('获取验证码失败:', error)
|
||||
} finally {
|
||||
captchaLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 登录处理
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
await authStore.authLogin(formData);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '登录失败');
|
||||
await refreshCaptcha();
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取验证码
|
||||
refreshCaptcha()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 背景图 -->
|
||||
<div class="login-background"></div>
|
||||
|
||||
<!-- 登录框 -->
|
||||
<div class="login-box">
|
||||
<div class="login-header">
|
||||
<h2 class="login-title">
|
||||
<i-lucide-cpu class="title-icon" />
|
||||
工业控制系统 HMI
|
||||
</h2>
|
||||
<p class="login-subtitle">请登录您的账户</p>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
@finish="handleLogin"
|
||||
class="login-form"
|
||||
layout="vertical"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<a-form-item name="username" class="form-item">
|
||||
<a-input
|
||||
v-model:value="formData.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-user class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 密码 -->
|
||||
<a-form-item name="password" class="form-item">
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-lock class="input-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<a-form-item name="code" class="form-item" v-if="rules.code[0].required">
|
||||
<div class="captcha-container">
|
||||
<a-input
|
||||
v-model:value="formData.code"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
class="login-input captcha-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-shield-check class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="captcha-image-container" @click="refreshCaptcha">
|
||||
<img
|
||||
v-if="captchaImg"
|
||||
:src="captchaImg"
|
||||
alt="验证码"
|
||||
class="captcha-image"
|
||||
/>
|
||||
<div v-else-if="captchaLoading" class="captcha-loading">
|
||||
<i-lucide-loader class="loading-icon" />
|
||||
</div>
|
||||
<div v-else-if="!captchaLoading && loadCaptchaFail" class="captcha-loading">
|
||||
获取失败
|
||||
</div>
|
||||
<div class="captcha-refresh-hint">
|
||||
<i-lucide-refresh-cw class="refresh-icon" />
|
||||
点击刷新
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<a-form-item class="form-item">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loginLoading"
|
||||
class="login-button"
|
||||
block
|
||||
>
|
||||
{{ loginLoading ? '登录中...' : '登录' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 变量定义
|
||||
$primary-color: #4a90e2;
|
||||
$primary-light: #5ba0f2;
|
||||
$primary-dark: #3a7bd5;
|
||||
$success-color: #52c41a;
|
||||
$warning-color: #faad14;
|
||||
$error-color: #ff4d4f;
|
||||
$white: #ffffff;
|
||||
$text-light: #b8d4f0;
|
||||
$text-dark: #333333;
|
||||
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
$bg-glass: rgba(255, 255, 255, 0.15);
|
||||
$border-light: rgba(255, 255, 255, 0.3);
|
||||
$shadow-light: rgba(0, 0, 0, 0.1);
|
||||
$shadow-medium: rgba(0, 0, 0, 0.2);
|
||||
$border-radius: 8px;
|
||||
$border-radius-lg: 12px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$spacing-lg: 24px;
|
||||
$spacing-xl: 32px;
|
||||
$transition: all 0.3s ease;
|
||||
|
||||
.login-container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(2px);
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(74, 144, 226, 0.3) 0%,
|
||||
rgba(58, 123, 213, 0.4) 50%,
|
||||
rgba(91, 160, 242, 0.3) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 420px;
|
||||
padding: $spacing-xl;
|
||||
background: $bg-glass;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 4px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
margin: 0 0 $spacing-sm 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.title-icon {
|
||||
font-size: 28px;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: $text-light;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.form-item {
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-input {
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $primary-light;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-password-icon) {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
align-items: stretch;
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.captcha-image-container {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-light;
|
||||
|
||||
.captcha-refresh-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.captcha-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.loading-icon {
|
||||
color: $white;
|
||||
font-size: 20px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-refresh-hint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: $transition;
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 16px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: $transition;
|
||||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
margin-right: $spacing-sm;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-loading-icon) {
|
||||
margin-right: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证错误样式
|
||||
:deep(.ant-form-item-has-error) {
|
||||
.login-input {
|
||||
border-color: $error-color;
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-image-container {
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-explain-error) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.login-box {
|
||||
width: 90%;
|
||||
max-width: 380px;
|
||||
padding: $spacing-lg;
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
flex-direction: column;
|
||||
|
||||
.captcha-image-container {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-box {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
.login-header .login-title {
|
||||
font-size: 20px;
|
||||
|
||||
.title-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/views/pwoManage/index.vue
Normal file
0
src/views/pwoManage/index.vue
Normal file
Reference in New Issue
Block a user