Compare commits
3 Commits
959edd8642
...
3272734986
| Author | SHA1 | Date |
|---|---|---|
 xyiege
|
3272734986 | 4 months ago |
|
xyiege
|
6c2d4c890f | 4 months ago |
|
xyiege
|
567397947b | 4 months ago |
5 changed files with 497 additions and 211 deletions
@ -0,0 +1,213 @@ |
|||
|
|||
.sfcbox { |
|||
float: left; |
|||
width: 100%; |
|||
/* overflow-y: auto; */ |
|||
margin: 20px auto; |
|||
margin-top: 12px; |
|||
background-color: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 12px 12px 0 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.sfcon { |
|||
padding: 20px; |
|||
float: left; |
|||
width: 100%; |
|||
min-height: 560px; |
|||
margin-bottom: 40px; |
|||
} |
|||
|
|||
.sfcon:first-child { |
|||
margin-bottom: 22px; |
|||
box-shadow: 1px 7px 10px 3px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.sfcon:nth-child(2) { |
|||
margin-top: 22px; |
|||
} |
|||
|
|||
.sfcon:nth-child(2) .sflist { |
|||
background-color: #dddcdc5e; |
|||
} |
|||
.sfbcon .sflist{ |
|||
position: relative; |
|||
} |
|||
/* 操作按钮 */ |
|||
/* .sfcon .sflist .fbdiv{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
height: 46px; |
|||
background-color: #00bd7e; |
|||
width: 100%; |
|||
} */ |
|||
|
|||
/* .sfcon .sflist .fbdiv .fbtn{ |
|||
margin: 12px; |
|||
} */ |
|||
|
|||
.sfind { |
|||
width: 100%; |
|||
/* height: 40px; */ |
|||
line-height: 40px; |
|||
padding: 12px; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.sfind .selbox { |
|||
height: 40px; |
|||
border-top: none; |
|||
border-left: none; |
|||
border-right: none; |
|||
|
|||
outline: none; |
|||
padding: 0 12px; |
|||
} |
|||
|
|||
.sfind .inputbox { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
padding: 12px; |
|||
border-top: none; |
|||
border-left: none; |
|||
border-right: none; |
|||
margin-left: 12px; |
|||
outline: none; |
|||
width: 460px; |
|||
} |
|||
|
|||
.sfind button { |
|||
width: 70px; |
|||
height: 40px; |
|||
margin-left: 12px; |
|||
background-color: #f5f5f5; |
|||
border: none; |
|||
} |
|||
|
|||
.sfcon .sflist { |
|||
min-height: 460px; |
|||
overflow-y: auto; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
.sfcon .sflist ul { |
|||
margin-top: 20px; |
|||
display: block; |
|||
width: 100%; |
|||
min-height: 500px; |
|||
} |
|||
|
|||
.sfcon .sflist ul li { |
|||
list-style: none; |
|||
width: 100%; |
|||
float: left; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
border-bottom: 1px dashed #ccc; |
|||
} |
|||
|
|||
.sfcon .sflist ul li:hover { |
|||
background-color: #dad8d8; |
|||
} |
|||
|
|||
.sfcon .sflist ul li .sflfunc { |
|||
/* display: none; */ |
|||
float: right; |
|||
width: 360px; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.sfcon .sflist ul li .sfchkbox { |
|||
margin-right: 12px; |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
|
|||
.sfcon .sflist ul li span{ |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.sfcon .sflist .haschild { |
|||
cursor: pointer; |
|||
} |
|||
.sfcon .sflist .haschild i{ |
|||
display: inline-block; |
|||
width: 25px; |
|||
height: 25px; |
|||
background-image: url("@/assets/css_sprites.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 25px; |
|||
background-position: 0px -400px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.sfcon .sflist .tips { |
|||
width: 100%; |
|||
float: left; |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
/* 传输功能区 */ |
|||
.sftrans { |
|||
position: fixed; |
|||
width: 200px; |
|||
height: 120px; |
|||
z-index: 99; |
|||
background-color: #f5f5f5; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.sftrans .sfbcon { |
|||
color: #333; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
background-color: #fff; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.sftrans .sfbcon li { |
|||
list-style: none; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.sftrans .sfbcon li:hover { |
|||
background-color: #00bd7e; |
|||
color: #fff; |
|||
cursor: default; |
|||
} |
|||
|
|||
.sftrans .sfbcon li span { |
|||
padding-left: 12px; |
|||
} |
|||
.sftrans .sfbcon li.divider{ |
|||
height: 1px; |
|||
background-color: #00bd7e; |
|||
margin: 10px 0; |
|||
} |
|||
/** 发送文件 */ |
|||
.fsend{ |
|||
float: left; |
|||
height: 60px; |
|||
background-color: #f3efef; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
margin-top: 20px; |
|||
width: 100%; |
|||
position:fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
.fsend .fsendcon{ |
|||
margin-left: auto; |
|||
padding: 12px; |
|||
background-color: #fff; |
|||
min-height: 60px; |
|||
width: 1200px; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
.diff{ |
|||
background-color: #fcc; |
|||
} |
|||
@ -0,0 +1,76 @@ |
|||
@import url('../index.less'); |
|||
|
|||
/* Make clicks pass-through */ |
|||
#nprogress { |
|||
pointer-events: none; |
|||
} |
|||
|
|||
#nprogress .bar { |
|||
background: @primary-color; |
|||
|
|||
position: fixed; |
|||
z-index: 1031; |
|||
top: 0; |
|||
left: 0; |
|||
|
|||
width: 100%; |
|||
height: 2px; |
|||
} |
|||
|
|||
/* Fancy blur effect */ |
|||
#nprogress .peg { |
|||
display: block; |
|||
position: absolute; |
|||
right: 0px; |
|||
width: 100px; |
|||
height: 100%; |
|||
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; |
|||
opacity: 1.0; |
|||
|
|||
-webkit-transform: rotate(3deg) translate(0px, -4px); |
|||
-ms-transform: rotate(3deg) translate(0px, -4px); |
|||
transform: rotate(3deg) translate(0px, -4px); |
|||
} |
|||
|
|||
/* Remove these to get rid of the spinner */ |
|||
#nprogress .spinner { |
|||
display: block; |
|||
position: fixed; |
|||
z-index: 1031; |
|||
top: 15px; |
|||
right: 15px; |
|||
} |
|||
|
|||
#nprogress .spinner-icon { |
|||
width: 18px; |
|||
height: 18px; |
|||
box-sizing: border-box; |
|||
|
|||
border: solid 2px transparent; |
|||
border-top-color: @primary-color; |
|||
border-left-color: @primary-color; |
|||
border-radius: 50%; |
|||
|
|||
-webkit-animation: nprogress-spinner 400ms linear infinite; |
|||
animation: nprogress-spinner 400ms linear infinite; |
|||
} |
|||
|
|||
.nprogress-custom-parent { |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.nprogress-custom-parent #nprogress .spinner, |
|||
.nprogress-custom-parent #nprogress .bar { |
|||
position: absolute; |
|||
} |
|||
|
|||
@-webkit-keyframes nprogress-spinner { |
|||
0% { -webkit-transform: rotate(0deg); } |
|||
100% { -webkit-transform: rotate(360deg); } |
|||
} |
|||
@keyframes nprogress-spinner { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
@ -0,0 +1,145 @@ |
|||
<template> |
|||
<div class="login-container"> |
|||
<div class="login-form"> |
|||
<h2>系统登录</h2> |
|||
<div class="form-group"> |
|||
<label for="username">用户名</label> |
|||
<input type="text" id="username" v-model="username" placeholder="请输入用户名" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="password">密码</label> |
|||
<input type="password" id="password" v-model="password" placeholder="请输入密码" /> |
|||
</div> |
|||
<button class="login-button" @click="handleLogin" :disabled="loading"> |
|||
{{ loading ? '登录中...' : '登录' }} |
|||
</button> |
|||
<div v-if="error" class="error-message">{{ error }}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { login } from '@/api/scinfo' |
|||
import storage from 'store' |
|||
import router from '@/router' |
|||
|
|||
export default { |
|||
name: 'Login', |
|||
data() { |
|||
return { |
|||
username: '', |
|||
password: '', |
|||
loading: false, |
|||
error: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
async handleLogin() { |
|||
if (!this.username || !this.password) { |
|||
this.error = '请输入用户名和密码' |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
this.error = '' |
|||
|
|||
try { |
|||
// 调用登录API |
|||
const res = await login({ |
|||
username: this.username, |
|||
password: this.password |
|||
}) |
|||
|
|||
if (res && res.data && res.data.token) { |
|||
// 保存token到localStorage |
|||
storage.set('token', res.data.token) |
|||
// 跳转到首页 |
|||
router.push('/') |
|||
} else { |
|||
this.error = '登录失败，请检查用户名和密码' |
|||
} |
|||
} catch (err) { |
|||
console.error('Login error:', err) |
|||
this.error = '登录失败，请稍后重试' |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.login-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100vh; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
.login-form { |
|||
background: white; |
|||
padding: 40px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
|||
width: 350px; |
|||
} |
|||
|
|||
.login-form h2 { |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
color: #333; |
|||
} |
|||
|
|||
.form-group { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-group label { |
|||
display: block; |
|||
margin-bottom: 8px; |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.form-group input { |
|||
width: 100%; |
|||
padding: 10px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.form-group input:focus { |
|||
outline: none; |
|||
border-color: #42b983; |
|||
} |
|||
|
|||
.login-button { |
|||
width: 100%; |
|||
padding: 12px; |
|||
background-color: #42b983; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.login-button:hover:not(:disabled) { |
|||
background-color: #359c6d; |
|||
} |
|||
|
|||
.login-button:disabled { |
|||
background-color: #ccc; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.error-message { |
|||
color: #ff4d4f; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue