Commit 9c18465f by 李宁

1

1 parent fcb39f25
...@@ -3,13 +3,15 @@ ...@@ -3,13 +3,15 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>怀化移动</title> <title>添加工单</title>
<link rel="stylesheet" href="css/vant.css"/> <link rel="stylesheet" href="css/vant.css"/>
<link rel="stylesheet" href="css/addOrder.css?123123"> <link rel="stylesheet" href="css/addOrder.css?123">
</head> </head>
<body> <body>
<div id="pageDiv" class="pageDiv"> <div id="pageDiv" class="pageDiv">
<div class="topDiv">添加工单<img src="img/back.png" @click="goBack" alt=""></div>
<div class="infoTop"> <div class="infoTop">
<div class="status">{{info.address}}</div> <div class="status">{{info.address}}</div>
<div class="detail"> <div class="detail">
...@@ -87,6 +89,6 @@ ...@@ -87,6 +89,6 @@
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script> <script src="js/vant.min.js"></script>
<script src="js/util.js?12312313"></script> <script src="js/util.js?12312313"></script>
<script src="js/addOrder.js?1111"></script> <script src="js/addOrder.js?11311"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
...@@ -17,13 +17,35 @@ div{ ...@@ -17,13 +17,35 @@ div{
.pageDiv{ .pageDiv{
width: 100%; width: 100%;
min-height: calc(100vh); min-height: calc(100vh);
padding-top: .52rem;
background: #F7F8FA; background: #F7F8FA;
padding: .24rem; padding: .24rem;
padding-bottom: 1.2rem; padding-bottom: 1.2rem;
padding-top: 1.04rem;
display: none; display: none;
} }
.topDiv{
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
color: #333;
font-size: .36rem;
font-weight: bold;
z-index: 999999;
height: .8rem;
line-height: .8rem;
}
.topDiv img{
width: .48rem;
height: .48rem;
position: absolute;
left: .12rem;
top: .16rem;
}
.infoTop{ .infoTop{
background: #fff; background: #fff;
border-radius: .08rem; border-radius: .08rem;
......
...@@ -10,6 +10,28 @@ html,body{ ...@@ -10,6 +10,28 @@ html,body{
padding: 0; padding: 0;
} }
.topDiv{
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
color: #333;
font-size: .36rem;
font-weight: bold;
z-index: 999999;
height: .8rem;
line-height: .8rem;
}
.topDiv img{
width: .48rem;
height: .48rem;
position: absolute;
left: .12rem;
top: .16rem;
}
.cameraDiv{ .cameraDiv{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -19,14 +41,16 @@ html,body{ ...@@ -19,14 +41,16 @@ html,body{
} }
.conDiv{ .conDiv{
width: 100%; width: 100%;
height: 100%; height: calc(100vh - .8rem);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: .8rem;
} }
.conDiv .tsDiv{ .conDiv .tsDiv{
display: flex; display: flex;
align-items: center; align-items: center;
......
...@@ -17,7 +17,6 @@ div{ ...@@ -17,7 +17,6 @@ div{
.pageDiv{ .pageDiv{
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
padding-top: .9rem;
background: #F7F8FA; background: #F7F8FA;
padding-bottom: 1.33rem; padding-bottom: 1.33rem;
display: none; display: none;
...@@ -28,6 +27,28 @@ div{ ...@@ -28,6 +27,28 @@ div{
padding-top: .48rem; padding-top: .48rem;
} }
.topDiv{
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
color: #333;
font-size: .36rem;
font-weight: bold;
z-index: 999999;
height: .8rem;
line-height: .8rem;
}
.topDiv img{
width: .48rem;
height: .48rem;
position: absolute;
left: .12rem;
top: .16rem;
}
.bgImg{ .bgImg{
display: block; display: block;
width: 100%; width: 100%;
...@@ -40,7 +61,7 @@ div{ ...@@ -40,7 +61,7 @@ div{
.tsDiv{ .tsDiv{
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: .8rem;
left: 0; left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -56,6 +77,8 @@ div{ ...@@ -56,6 +77,8 @@ div{
margin-right: .12rem; margin-right: .12rem;
} }
.topText{ .topText{
display: flex; display: flex;
height: 2.79rem; height: 2.79rem;
...@@ -65,6 +88,7 @@ div{ ...@@ -65,6 +88,7 @@ div{
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
position: relative; position: relative;
margin-top: 1.7rem;
} }
.topText .tleft{ .topText .tleft{
display: flex; display: flex;
...@@ -126,12 +150,13 @@ div{ ...@@ -126,12 +150,13 @@ div{
.infoDiv .infoTop .detliU{ .infoDiv .infoTop .detliU{
color: #333; color: #333;
font-size: .4rem; font-size: .4rem;
font-weight: 600; font-weight: bold;
margin-bottom: .2rem; margin-bottom: .2rem;
} }
.infoDiv .infoTop .detli{ .infoDiv .infoTop .detli{
color: #333; color: #333;
font-size: .32rem; font-size: .32rem;
line-height: .36rem;
} }
.orderList .orderli{ .orderList .orderli{
......
...@@ -27,7 +27,7 @@ div{ ...@@ -27,7 +27,7 @@ div{
.tabs { .tabs {
display: flex; display: flex;
background: #F3F6FF; background: #fff;
padding: 0 .24rem; padding: 0 .24rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -44,7 +44,7 @@ div{ ...@@ -44,7 +44,7 @@ div{
height: .6rem; height: .6rem;
line-height: .6rem; line-height: .6rem;
border-radius: .48rem; border-radius: .48rem;
background: #E1EBFE; background: #F1F2F4;
text-align: center; text-align: center;
} }
...@@ -56,12 +56,16 @@ div{ ...@@ -56,12 +56,16 @@ div{
position: relative; position: relative;
margin-right: .48rem; margin-right: .48rem;
transition: all 0.3s; transition: all 0.3s;
font-weight: 500; outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
} }
.tab-item.active { .tab-item.active {
color: #333; color: #333;
font-weight: 700; font-weight: bold;
} }
.tab-item.active::after { .tab-item.active::after {
...@@ -77,14 +81,14 @@ div{ ...@@ -77,14 +81,14 @@ div{
.search-section { .search-section {
padding: .2rem; padding: .2rem;
background: #F3F6FF; background: #fff;
} }
.search-box { .search-box {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
background: white; background: #F7F8FA;
border-radius: .08rem; border-radius: .08rem;
padding: .2rem .24rem; padding: .2rem .24rem;
transition: border-color 0.3s; transition: border-color 0.3s;
...@@ -108,7 +112,6 @@ div{ ...@@ -108,7 +112,6 @@ div{
border: none; border: none;
background: transparent; background: transparent;
font-size: .28rem; font-size: .28rem;
outline: none;
} }
.search-input::placeholder { .search-input::placeholder {
...@@ -203,13 +206,14 @@ div{ ...@@ -203,13 +206,14 @@ div{
.item-row-up { .item-row-up {
color: #333; color: #333;
font-weight: 600; font-weight: bold;
font-size: .36rem; font-size: .36rem;
margin-bottom: .28rem; margin-bottom: .28rem;
} }
.item-row-down { .item-row-down {
color: #666; color: #666;
font-size: .28rem; font-size: .28rem;
line-height: .36rem;
} }
.empty-state { .empty-state {
......
...@@ -44,9 +44,8 @@ div{ ...@@ -44,9 +44,8 @@ div{
.header-content { .header-content {
position: absolute; position: absolute;
top: 50%; top: 1.76rem;
left: .42rem; left: .42rem;
transform: translateY(-50%);
color: #333; color: #333;
font-size: .32rem; font-size: .32rem;
} }
......
...@@ -17,13 +17,35 @@ div{ ...@@ -17,13 +17,35 @@ div{
.pageDiv{ .pageDiv{
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: .52rem;
background: #F7F8FA; background: #F7F8FA;
padding: .24rem; padding: .24rem;
padding-bottom: 1.2rem; padding-bottom: 1.2rem;
padding-top: 1.04rem;
display: none; display: none;
} }
.topDiv{
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
color: #333;
font-size: .36rem;
font-weight: bold;
z-index: 999999;
height: .8rem;
line-height: .8rem;
}
.topDiv img{
width: .48rem;
height: .48rem;
position: absolute;
left: .12rem;
top: .16rem;
}
.infoTop{ .infoTop{
background: #fff; background: #fff;
border-radius: .08rem; border-radius: .08rem;
......
...@@ -4897,7 +4897,7 @@ button,input,textarea { ...@@ -4897,7 +4897,7 @@ button,input,textarea {
.van-tree-select__item { .van-tree-select__item {
position: relative; position: relative;
padding: 0 32px 0 16px; padding: 0 32px 0 16px;
font-weight: 700; font-weight: bold;
line-height: 44px line-height: 44px
} }
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>怀化移动</title> <title>质检</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/> <link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?0909019011131"> <link rel="stylesheet" href="css/demo.css?09131">
</head> </head>
<body> <body>
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
<div class="cameraDiv" id="local-player"></div> <div class="cameraDiv" id="local-player"></div>
<canvas id="canvas" style="display: none;"></canvas> <canvas id="canvas" style="display: none;"></canvas>
<div class="topDiv">质检<img src="img/back.png" id="goBack" alt=""></div>
<div class="conDiv"> <div class="conDiv">
<div class="tsDiv" id="exampleTsDiv"> <div class="tsDiv" id="exampleTsDiv">
<div class="tsleft"> <div class="tsleft">
...@@ -342,7 +344,7 @@ ...@@ -342,7 +344,7 @@
<script src="js/util.js?1212"></script> <script src="js/util.js?1212"></script>
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script> <script src="js/vant.min.js"></script>
<script src="js/demo.js?87555"></script> <script src="js/demo.js?875155"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file

16.3 KB | W: | H:

16.3 KB | W: | H:

huaiHua/app/img/logo.png
huaiHua/app/img/logo.png
huaiHua/app/img/logo.png
huaiHua/app/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>怀化移动</title> <title>详情</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/> <link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/index.css?12333"> <link rel="stylesheet" href="css/index.css?001900">
</head> </head>
<body> <body>
<!-- <script> <!-- <script>
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
</script> --> </script> -->
<div id="pageDiv" class="pageDiv" :class="{pageDone:detail.finish=='1'}"> <div id="pageDiv" class="pageDiv" :class="{pageDone:detail.finish=='1'}">
<div class="topDiv">质检详情<img src="img/back.png" @click="goBack" alt=""></div>
<img class="bgImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bg.png" alt=""> <img class="bgImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bg.png" alt="">
<div class="tsDiv" v-if="detail.finish!='1'"> <div class="tsDiv" v-if="detail.finish!='1'">
...@@ -167,6 +169,6 @@ ...@@ -167,6 +169,6 @@
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script> <script src="js/vant.min.js"></script>
<script src="js/util.js?11111"></script> <script src="js/util.js?11111"></script>
<script src="js/index.js?123"></script> <script src="js/index.js?1233"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
...@@ -37,6 +37,9 @@ ...@@ -37,6 +37,9 @@
this.getDevice() this.getDevice()
}, },
methods: { methods: {
goBack(){
history.go(-1)
},
onConfirm(value, index) { onConfirm(value, index) {
let p = this.pickData let p = this.pickData
if(p.ntype == 'device'){ if(p.ntype == 'device'){
......
...@@ -1346,3 +1346,8 @@ async function queryImgUrl() { ...@@ -1346,3 +1346,8 @@ async function queryImgUrl() {
return '' return ''
} }
} }
$('#goBack').click(()=>{
history.go(-1)
})
\ No newline at end of file \ No newline at end of file
...@@ -77,6 +77,9 @@ new Vue({ ...@@ -77,6 +77,9 @@ new Vue({
} }
}, },
methods: { methods: {
goBack(){
history.go(-1)
},
getReason(){ getReason(){
util.httpRequest({ util.httpRequest({
url: '/listEnum', url: '/listEnum',
......
...@@ -15,15 +15,15 @@ new Vue({ ...@@ -15,15 +15,15 @@ new Vue({
}, },
methods: { methods: {
getVerifyCode() { getVerifyCode() {
if(this.clickFlag){
return
}
this.clickFlag = true
let pa = this.loginForm let pa = this.loginForm
if (!pa.employeeId) {
util.toast('请输入工号');
return;
}
if (!pa.phoneNumber) { if (!pa.phoneNumber) {
util.toast('请输入手机号'); util.toast('请输入手机号');
return; return;
} }
...@@ -32,6 +32,11 @@ new Vue({ ...@@ -32,6 +32,11 @@ new Vue({
return; return;
} }
if(this.clickFlag){
return
}
this.clickFlag = true
util.httpRequest({ util.httpRequest({
url: '/mobile/sendSms', url: '/mobile/sendSms',
middleUrl: '/zhijian-trial/api', middleUrl: '/zhijian-trial/api',
...@@ -57,6 +62,8 @@ new Vue({ ...@@ -57,6 +62,8 @@ new Vue({
this.clickFlag = false this.clickFlag = false
util.toast(res.msg || '获取失败') util.toast(res.msg || '获取失败')
} }
}).catch(()=>{
this.clickFlag = false
}) })
}, },
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表页面</title> <title>列表</title>
<link rel="stylesheet" href="css/list.css?12322222223"> <link rel="stylesheet" href="css/list.css?00810">
</head> </head>
<body> <body>
<div id="app" v-cloak> <div id="app" v-cloak>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
class="list-item" class="list-item"
:ref="'item-' + item.accNbr" :ref="'item-' + item.accNbr"
@click="handleItemClick(item)"> @click="handleItemClick(item)">
<div class="item-row-up">业务账号:{{ item.accNbr }}</div> <div class="item-row-up">{{ item.accNbr }}</div>
<div class="item-row-down">地址:{{ item.fullAddress || '--' }}</div> <div class="item-row-down">地址:{{ item.fullAddress || '--' }}</div>
</div> </div>
...@@ -58,6 +58,6 @@ ...@@ -58,6 +58,6 @@
<script src="js/axios.min.js"></script> <script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/util.js"></script> <script src="js/util.js"></script>
<script src="js/list.js?0933"></script> <script src="js/list.js?09133"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title> <title>登录</title>
<link rel="stylesheet" href="css/login.css?3231002202"> <link rel="stylesheet" href="css/login.css?39902">
</head> </head>
<body> <body>
<div id="app" v-cloak> <div id="app" v-cloak>
...@@ -64,6 +64,6 @@ ...@@ -64,6 +64,6 @@
<script src="js/axios.min.js"></script> <script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/util.js"></script> <script src="js/util.js"></script>
<script src="js/login.js?1239123"></script> <script src="js/login.js?444"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
...@@ -3,12 +3,14 @@ ...@@ -3,12 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>怀化移动</title> <title>结果</title>
<link rel="stylesheet" href="css/result.css?123123213455"> <link rel="stylesheet" href="css/result.css?12455">
</head> </head>
<body> <body>
<div id="pageDiv" class="pageDiv"> <div id="pageDiv" class="pageDiv">
<div class="topDiv">结果<img src="img/back.png" @click="goBack" alt=""></div>
<div class="infoTop"> <div class="infoTop">
<img class="icon" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/success.png" alt=""> <img class="icon" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/success.png" alt="">
<div class="status">恭喜您完成质检流程</div> <div class="status">恭喜您完成质检流程</div>
......
const e=""+new URL("employee_tem-BMbgZldQ.xlsx",import.meta.url).href;export{e as default}; const e=""+new URL("employee_tem-DC4gj59I.xlsx",import.meta.url).href;export{e as default};
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>视频质检系统</title> <title>视频质检系统</title>
<script type="module" crossorigin src="./assets/index-Daub8TpA.js"></script> <script type="module" crossorigin src="./assets/index-D1E41z8w.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DQb40jF1.css"> <link rel="stylesheet" crossorigin href="./assets/index--TXUEGg1.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
<template> <template>
<div id="app"> <div id="app">
<el-container style="height: 100vh;"> <div v-if="$route.name === 'login'">
<router-view />
</div>
<el-container v-else style="height: 100vh;">
<!-- 固定头部栏 -->
<Header />
<el-container style="padding-top: 60px;">
<!-- 侧边栏 --> <!-- 侧边栏 -->
<el-aside width="200px" v-if="$route.name !== 'login'"> <el-aside width="200px">
<el-menu <el-menu
:default-active="$route.path" :default-active="$route.path"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
...@@ -24,13 +31,6 @@ ...@@ -24,13 +31,6 @@
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container>
<!-- 顶部导航栏 -->
<el-header v-if="$route.name !== 'login'" style="background-color: #fff; border-bottom: 1px solid #dcdfe6; display: flex; justify-content: space-between; align-items: center;">
<div></div>
<el-button type="danger" @click="logout">退出</el-button>
</el-header>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<el-main> <el-main>
<router-view /> <router-view />
...@@ -45,9 +45,7 @@ import { useRouter } from 'vue-router' ...@@ -45,9 +45,7 @@ import { useRouter } from 'vue-router'
import { Upload, List, User } from '@element-plus/icons-vue' import { Upload, List, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { import Header from './components/Header.vue'
quitLogin
} from './utils/api'
const router = useRouter() const router = useRouter()
...@@ -64,17 +62,6 @@ const handleSelect = (key) => { ...@@ -64,17 +62,6 @@ const handleSelect = (key) => {
console.log(key) console.log(key)
} }
const logout = async () => {
const res = await quitLogin()
if (res.code == 200) {
// 登出逻辑
localStorage.removeItem('token')
router.push('/login')
}else{
ElMessage.error(res.msg || '退出登录失败')
}
}
</script> </script>
<style> <style>
...@@ -86,9 +73,6 @@ const logout = async () => { ...@@ -86,9 +73,6 @@ const logout = async () => {
min-width: 1400px; min-width: 1400px;
} }
.el-header {
line-height: 60px;
}
.el-aside { .el-aside {
background-color: #fff; background-color: #fff;
......

6.6 KB | W: | H:

23.1 KB | W: | H:

huaiHua/pc/src/assets/logo.png
huaiHua/pc/src/assets/logo.png
huaiHua/pc/src/assets/logo.png
huaiHua/pc/src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
<template>
<div class="header">
<div class="header-left">
<img src="../assets/logo.png" alt="Logo" class="header-logo" />
<span class="header-title">和家智检管理系统</span>
</div>
<div class="header-right">
<el-dropdown @command="handleCommand">
<div class="user-info">
<span class="username">Hi,{{ username }}</span>
<el-icon class="arrow-icon">
<ArrowDown />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="logout">
<el-icon><SwitchButton /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown @command="handleCommand">
<div class="user-info">
<span class="username">Hi,{{ username }}</span>
<el-icon class="arrow-icon">
<ArrowDown />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="logout">
<el-icon><SwitchButton /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, SwitchButton } from '@element-plus/icons-vue'
const router = useRouter()
const username = ref('')
onMounted(() => {
// 从localStorage获取用户名,如果没有则使用默认值
username.value = localStorage.getItem('adminNum') || '用户'
})
const handleCommand = async (command) => {
if (command === 'logout') {
try {
await ElMessageBox.confirm(
'确定要退出登录吗?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
// 清除本地存储
localStorage.removeItem('token')
localStorage.removeItem('adminNum')
ElMessage.success('退出登录成功')
router.push('/login')
} catch (error) {
// 用户取消操作
}
}
}
</script>
<style scoped>
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
}
.header-left {
display: flex;
align-items: center;
}
.header-logo {
width: 40px;
height: 40px;
object-fit: contain;
margin-right: 8px;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #333333;
}
.header-right {
display: flex;
align-items: center;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 12px;
border-radius: 6px;
transition: background-color 0.3s ease;
border: none !important;
outline: none !important;
}
.user-info:hover {
background-color: #f5f5f5;
border: none !important;
outline: none !important;
}
.username {
font-size: 14px;
color: #666666;
}
.arrow-icon {
font-size: 12px;
color: #666666;
transition: transform 0.3s ease;
}
.user-info:hover .arrow-icon {
transform: rotate(180deg);
}
</style>
\ No newline at end of file \ No newline at end of file
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<!-- 顶部装饰图标 - 左上角 --> <!-- 顶部装饰图标 - 左上角 -->
<div class="top-icons"> <div class="top-icons">
<img src="../assets/yd.png" alt="移动" class="top-icon" /> <img src="../assets/yd.png" alt="移动" class="top-icon" />
<div class="line"></div>
<img src="../assets/cy.png" alt="创益" class="top-icon" /> <img src="../assets/cy.png" alt="创益" class="top-icon" />
</div> </div>
...@@ -22,10 +23,13 @@ ...@@ -22,10 +23,13 @@
<el-input <el-input
v-model="loginForm.adminNum" v-model="loginForm.adminNum"
placeholder="请输入账号" placeholder="请输入账号"
prefix-icon="User"
size="large" size="large"
class="custom-input" class="custom-input"
></el-input> >
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
...@@ -33,11 +37,14 @@ ...@@ -33,11 +37,14 @@
v-model="loginForm.password" v-model="loginForm.password"
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
prefix-icon="Lock"
show-password show-password
size="large" size="large"
class="custom-input" class="custom-input"
></el-input> >
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item prop="captchaCode"> <el-form-item prop="captchaCode">
...@@ -45,10 +52,13 @@ ...@@ -45,10 +52,13 @@
<el-input <el-input
v-model="loginForm.captchaCode" v-model="loginForm.captchaCode"
placeholder="请输入验证码" placeholder="请输入验证码"
prefix-icon="Key"
size="large" size="large"
class="custom-input captcha-input" class="custom-input captcha-input"
></el-input> >
<template #prefix>
<el-icon><Key /></el-icon>
</template>
</el-input>
<img :src="loginForm.code" @click="getCode" style="height: 45px;widht: 116px;"> <img :src="loginForm.code" @click="getCode" style="height: 45px;widht: 116px;">
</div> </div>
</el-form-item> </el-form-item>
...@@ -57,7 +67,7 @@ ...@@ -57,7 +67,7 @@
<el-button <el-button
type="primary" type="primary"
size="large" size="large"
style="width: 100%; height: 50px; font-size: 16px; border-radius: 25px;" style="width: 100%; height: 50px; font-size: 16px; border-radius: 4px;"
@click="handleLogin" @click="handleLogin"
:loading="loading" :loading="loading"
class="login-btn" class="login-btn"
...@@ -66,7 +76,7 @@ ...@@ -66,7 +76,7 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item style="text-align: right;"> <el-form-item class="forgot-password-wrapper" style="justify-content: center;">
<el-button <el-button
type="text" type="text"
@click="handleForgetPassword" @click="handleForgetPassword"
...@@ -77,6 +87,14 @@ ...@@ -77,6 +87,14 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 底部版权信息 -->
<div class="footer">
<div class="company-info">
<div class="company-name">北京创益互联科技有限公司旗下产品</div>
<div class="copyright">copyright 2016-2021.京icp备16058130号-2.all right reserved.</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -84,6 +102,7 @@ ...@@ -84,6 +102,7 @@
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Lock, Key } from '@element-plus/icons-vue'
import { login , queryCode} from '../utils/api' import { login , queryCode} from '../utils/api'
import suoImg from '../assets/suo.png' import suoImg from '../assets/suo.png'
...@@ -155,6 +174,7 @@ const handleLogin = async () => { ...@@ -155,6 +174,7 @@ const handleLogin = async () => {
ElMessage.success('登录成功') ElMessage.success('登录成功')
// 保存token到localStorage // 保存token到localStorage
localStorage.setItem('token', response.data.token) localStorage.setItem('token', response.data.token)
localStorage.setItem('adminNum', loginForm.adminNum)
router.push('/upload') router.push('/upload')
} else { } else {
ElMessage.error(response.msg || '登录失败') ElMessage.error(response.msg || '登录失败')
...@@ -171,7 +191,7 @@ const handleForgetPassword = () => { ...@@ -171,7 +191,7 @@ const handleForgetPassword = () => {
ElMessageBox.alert(` ElMessageBox.alert(`
<div style="text-align: center; padding: 20px;"> <div style="text-align: center; padding: 20px;">
<div style="margin-bottom: 15px;"> <div style="margin-bottom: 15px;">
<img src="${suoImg}" alt="锁" style="width: 64px; height: 64px;"> <img src="${suoImg}" alt="锁" style="width: 124px; height: 124px;">
</div> </div>
<div style="color: #333; font-size: 16px; font-weight: 500; margin-bottom: 10px;"> <div style="color: #333; font-size: 16px; font-weight: 500; margin-bottom: 10px;">
忘记密码 忘记密码
...@@ -219,9 +239,15 @@ html, body { ...@@ -219,9 +239,15 @@ html, body {
top: 30px; top: 30px;
left: 30px; left: 30px;
display: flex; display: flex;
gap: 20px;
z-index: 10; z-index: 10;
} }
.top-icons .line {
width: 1px;
height: 24px;
background-color: #9AB0D1;
align-self: center;
margin: 0 12px;
}
.top-icon { .top-icon {
width: 126px; width: 126px;
...@@ -232,9 +258,9 @@ html, body { ...@@ -232,9 +258,9 @@ html, body {
position: relative; position: relative;
width: 380px; width: 380px;
margin-left: 80px; margin-left: 80px;
padding: 30px; padding: 48px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
animation: slideUp 0.6s ease-out; animation: slideUp 0.6s ease-out;
...@@ -242,18 +268,17 @@ html, body { ...@@ -242,18 +268,17 @@ html, body {
.logo-section { .logo-section {
text-align: center; text-align: center;
margin-bottom: 20px;
} }
.logo { .logo {
width: 80px; width: 104px;
height: 80px; height: 104px;
object-fit: contain; object-fit: contain;
} }
.form-header { .form-header {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 40px;
} }
.form-header h2 { .form-header h2 {
...@@ -272,9 +297,8 @@ html, body { ...@@ -272,9 +297,8 @@ html, body {
} }
.custom-input { .custom-input {
background: #f5f5f5 !important; border: 1px solid #DDDDDD !important;
border: 1px solid #e0e0e0 !important; border-radius: 4px !important;
border-radius: 6px !important;
transition: all 0.3s ease !important; transition: all 0.3s ease !important;
} }
...@@ -447,4 +471,44 @@ html, body { ...@@ -447,4 +471,44 @@ html, body {
background: #409eff !important; background: #409eff !important;
border-color: #409eff !important; border-color: #409eff !important;
} }
.forgot-password-wrapper .el-form-item__content{
flex: none !important;
}
.footer {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
text-align: center;
}
.company-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.company-name {
font-size: 16px;
color: #666;
font-weight: 400;
}
.copyright {
font-size: 14px;
color: #666666;
font-weight: 400;
}
.login-container .el-icon{
width: 20px;
height: 20px;
}
.login-container .el-icon svg{
width: 20px;
height: 20px;
}
</style> </style>
\ No newline at end of file \ No newline at end of file
...@@ -385,7 +385,7 @@ const confirmAdd = async () => { ...@@ -385,7 +385,7 @@ const confirmAdd = async () => {
// 重新加载数据以刷新表格 // 重新加载数据以刷新表格
handleFilter(); handleFilter();
} else { } else {
ElMessage.error(response.message || '新增失败'); ElMessage.error(response.msg || '新增失败');
} }
} catch (error) { } catch (error) {
ElMessage.error('新增失败: ' + error.message); ElMessage.error('新增失败: ' + error.message);
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!