@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request' | |||||
NProgress.configure({ showSpinner: false }) | NProgress.configure({ showSpinner: false }) | ||||
const whiteList = ['/login', '/login_new', '/register'] | |||||
const whiteList = ['/login', '/register'] | |||||
router.beforeEach((to, from, next) => { | router.beforeEach((to, from, next) => { | ||||
NProgress.start() | NProgress.start() | ||||
@@ -46,11 +46,6 @@ export const constantRoutes = [ | |||||
component: () => import('@/views/login'), | component: () => import('@/views/login'), | ||||
hidden: true | hidden: true | ||||
}, | }, | ||||
{ | |||||
path: '/login_new', | |||||
component: () => import('@/views/login_new'), | |||||
hidden: true | |||||
}, | |||||
{ | { | ||||
path: '/register', | path: '/register', | ||||
component: () => import('@/views/register'), | component: () => import('@/views/register'), | ||||
@@ -3,35 +3,47 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>记账</p> | |||||
</div> | |||||
<div style="display: none;" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | <p>张家镇</p> | ||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>记账</p> | |||||
</div> | </div> | ||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">合同异常:<span>19</span>个</p> | <p class="todo_num">合同异常:<span>19</span>个</p> | ||||
<p class="todo_num2">记录异常:<span>1</span>个</p> | <p class="todo_num2">记录异常:<span>1</span>个</p> | ||||
@@ -72,13 +84,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -94,14 +114,22 @@ export default { | |||||
name: "todo", | name: "todo", | ||||
data() { | data() { | ||||
return { | return { | ||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -117,6 +145,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -283,6 +334,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -299,6 +352,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,34 +3,33 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div style="display: none" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | <p>张家镇</p> | ||||
<p>2023.03.05</p> | |||||
</div> | </div> | ||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">镇处理进度:<span>15/50</span></p> | <p class="todo_num">镇处理进度:<span>15/50</span></p> | ||||
<p class="todo_num3">镇审核进度:<span>5/50</span></p> | <p class="todo_num3">镇审核进度:<span>5/50</span></p> | ||||
@@ -107,13 +106,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -169,14 +176,23 @@ export default { | |||||
value7: '2023.03.05', | value7: '2023.03.05', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -191,6 +207,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -451,6 +490,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -467,6 +508,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,15 +3,33 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<div class="header_btn1"> | <div class="header_btn1"> | ||||
<p>全部审核</p> | <p>全部审核</p> | ||||
@@ -25,25 +43,6 @@ | |||||
<i class="el-icon-warning"></i>已选中:年村(a合作社,b合作社,c合作社,d合作社)、张村(百事合作社)... | <i class="el-icon-warning"></i>已选中:年村(a合作社,b合作社,c合作社,d合作社)、张村(百事合作社)... | ||||
</p> | </p> | ||||
<div style="display: none" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
</div> | |||||
<p class="todo_num">已处理村庄:<span>19</span>个</p> | <p class="todo_num">已处理村庄:<span>19</span>个</p> | ||||
<p class="todo_num2">超时完成村庄:<span>1</span>个</p> | <p class="todo_num2">超时完成村庄:<span>1</span>个</p> | ||||
@@ -110,13 +109,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -172,14 +179,23 @@ export default { | |||||
value7: '2023.03.05', | value7: '2023.03.05', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -194,6 +210,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.header_tt{ | .header_tt{ | ||||
font-size: 14px; | font-size: 14px; | ||||
color: #7e7e7e; | color: #7e7e7e; | ||||
@@ -419,6 +458,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -435,6 +476,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -1,7 +1,11 @@ | |||||
<template> | <template> | ||||
<div class="login"> | <div class="login"> | ||||
<div class="header_logo"> | |||||
<img src="../assets/logo/logo.png" alt=""> | |||||
<p>会计记账中心登录界面</p> | |||||
</div> | |||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> | <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> | ||||
<h3 class="title">农燊高科代理记账服务中心</h3> | |||||
<!-- <h3 class="title">农燊高科代理记账服务中心</h3>--> | |||||
<el-form-item prop="username"> | <el-form-item prop="username"> | ||||
<el-input | <el-input | ||||
v-model="loginForm.username" | v-model="loginForm.username" | ||||
@@ -9,7 +13,6 @@ | |||||
auto-complete="off" | auto-complete="off" | ||||
placeholder="账号" | placeholder="账号" | ||||
> | > | ||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> | |||||
</el-input> | </el-input> | ||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="password"> | <el-form-item prop="password"> | ||||
@@ -20,9 +23,18 @@ | |||||
placeholder="密码" | placeholder="密码" | ||||
@keyup.enter.native="handleLogin" | @keyup.enter.native="handleLogin" | ||||
> | > | ||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> | |||||
</el-input> | </el-input> | ||||
</el-form-item> | </el-form-item> | ||||
<el-form-item prop="username"> | |||||
<el-select v-model="value" placeholder="请选择" style="width: 100%"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item prop="code" v-if="captchaEnabled"> | <el-form-item prop="code" v-if="captchaEnabled"> | ||||
<el-input | <el-input | ||||
v-model="loginForm.code" | v-model="loginForm.code" | ||||
@@ -31,7 +43,6 @@ | |||||
style="width: 63%" | style="width: 63%" | ||||
@keyup.enter.native="handleLogin" | @keyup.enter.native="handleLogin" | ||||
> | > | ||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> | |||||
</el-input> | </el-input> | ||||
<div class="login-code"> | <div class="login-code"> | ||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/> | <img :src="codeUrl" @click="getCode" class="login-code-img"/> | ||||
@@ -43,7 +54,7 @@ | |||||
:loading="loading" | :loading="loading" | ||||
size="medium" | size="medium" | ||||
type="primary" | type="primary" | ||||
style="width:100%;" | |||||
style="width:100%;padding: 17px 20px;border-radius: 15px;" | |||||
@click.native.prevent="handleLogin" | @click.native.prevent="handleLogin" | ||||
> | > | ||||
<span v-if="!loading">登 录</span> | <span v-if="!loading">登 录</span> | ||||
@@ -92,7 +103,24 @@ export default { | |||||
captchaEnabled: true, | captchaEnabled: true, | ||||
// 注册开关 | // 注册开关 | ||||
register: false, | register: false, | ||||
redirect: undefined | |||||
redirect: undefined, | |||||
options: [{ | |||||
value: '选项1', | |||||
label: '黄金糕' | |||||
}, { | |||||
value: '选项2', | |||||
label: '双皮奶' | |||||
}, { | |||||
value: '选项3', | |||||
label: '蚵仔煎' | |||||
}, { | |||||
value: '选项4', | |||||
label: '龙须面' | |||||
}, { | |||||
value: '选项5', | |||||
label: '北京烤鸭' | |||||
}], | |||||
value: '' | |||||
}; | }; | ||||
}, | }, | ||||
watch: { | watch: { | ||||
@@ -156,13 +184,27 @@ export default { | |||||
</script> | </script> | ||||
<style rel="stylesheet/scss" lang="scss"> | <style rel="stylesheet/scss" lang="scss"> | ||||
.header_logo{ | |||||
display: flex; | |||||
align-items: center; | |||||
position: absolute; | |||||
top: 5vh; | |||||
left: 5vw; | |||||
color: #4163e5; | |||||
font-size: 4vh; | |||||
font-weight: bold; | |||||
p{ | |||||
margin: 0 0 0 1vw; | |||||
} | |||||
} | |||||
.login { | .login { | ||||
display: flex; | display: flex; | ||||
justify-content: center; | |||||
justify-content: end; | |||||
align-items: center; | align-items: center; | ||||
height: 100%; | height: 100%; | ||||
background-image: url("../assets/images/login-background.jpg"); | |||||
background-image: url("../assets/images/login_bg.jpg"); | |||||
background-size: cover; | background-size: cover; | ||||
padding: 0 15vw; | |||||
} | } | ||||
.title { | .title { | ||||
margin: 0px auto 30px auto; | margin: 0px auto 30px auto; | ||||
@@ -171,14 +213,15 @@ export default { | |||||
} | } | ||||
.login-form { | .login-form { | ||||
border-radius: 6px; | |||||
border-radius: 25px; | |||||
background: #ffffff; | background: #ffffff; | ||||
width: 400px; | |||||
padding: 25px 25px 5px 25px; | |||||
width: 440px; | |||||
padding: 35px 25px 30px 25px; | |||||
.el-input { | .el-input { | ||||
height: 38px; | |||||
height: 50px; | |||||
input { | input { | ||||
height: 38px; | |||||
height: 50px; | |||||
border-radius: 15px; | |||||
} | } | ||||
} | } | ||||
.input-icon { | .input-icon { | ||||
@@ -193,12 +236,15 @@ export default { | |||||
color: #bfbfbf; | color: #bfbfbf; | ||||
} | } | ||||
.login-code { | .login-code { | ||||
width: 33%; | |||||
height: 38px; | |||||
width: 34%; | |||||
height: 50px; | |||||
float: right; | float: right; | ||||
border-radius: 15px; | |||||
overflow: hidden; | |||||
img { | img { | ||||
cursor: pointer; | cursor: pointer; | ||||
vertical-align: middle; | vertical-align: middle; | ||||
transform: scale(1.08); | |||||
} | } | ||||
} | } | ||||
.el-login-footer { | .el-login-footer { | ||||
@@ -208,12 +254,13 @@ export default { | |||||
bottom: 0; | bottom: 0; | ||||
width: 100%; | width: 100%; | ||||
text-align: center; | text-align: center; | ||||
color: #fff; | |||||
color: #7c7c7c; | |||||
font-family: Arial; | font-family: Arial; | ||||
font-size: 12px; | |||||
font-size: 16px; | |||||
letter-spacing: 1px; | letter-spacing: 1px; | ||||
left: 0; | |||||
} | } | ||||
.login-code-img { | .login-code-img { | ||||
height: 38px; | |||||
height: 50px; | |||||
} | } | ||||
</style> | </style> |
@@ -1,266 +0,0 @@ | |||||
<template> | |||||
<div class="login"> | |||||
<div class="header_logo"> | |||||
<img src="../assets/logo/logo.png" alt=""> | |||||
<p>会计记账中心登录界面</p> | |||||
</div> | |||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> | |||||
<!-- <h3 class="title">农燊高科代理记账服务中心</h3>--> | |||||
<el-form-item prop="username"> | |||||
<el-input | |||||
v-model="loginForm.username" | |||||
type="text" | |||||
auto-complete="off" | |||||
placeholder="账号" | |||||
> | |||||
</el-input> | |||||
</el-form-item> | |||||
<el-form-item prop="password"> | |||||
<el-input | |||||
v-model="loginForm.password" | |||||
type="password" | |||||
auto-complete="off" | |||||
placeholder="密码" | |||||
@keyup.enter.native="handleLogin" | |||||
> | |||||
</el-input> | |||||
</el-form-item> | |||||
<el-form-item prop="username"> | |||||
<el-select v-model="value" placeholder="请选择" style="width: 100%"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item prop="code" v-if="captchaEnabled"> | |||||
<el-input | |||||
v-model="loginForm.code" | |||||
auto-complete="off" | |||||
placeholder="验证码" | |||||
style="width: 63%" | |||||
@keyup.enter.native="handleLogin" | |||||
> | |||||
</el-input> | |||||
<div class="login-code"> | |||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/> | |||||
</div> | |||||
</el-form-item> | |||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> | |||||
<el-form-item style="width:100%;"> | |||||
<el-button | |||||
:loading="loading" | |||||
size="medium" | |||||
type="primary" | |||||
style="width:100%;padding: 17px 20px;border-radius: 15px;" | |||||
@click.native.prevent="handleLogin" | |||||
> | |||||
<span v-if="!loading">登 录</span> | |||||
<span v-else>登 录 中...</span> | |||||
</el-button> | |||||
<div style="float: right;" v-if="register"> | |||||
<router-link class="link-type" :to="'/register'">立即注册</router-link> | |||||
</div> | |||||
</el-form-item> | |||||
</el-form> | |||||
<!-- 底部 --> | |||||
<div class="el-login-footer"> | |||||
<span>技术支持单位:北京农燊高科信息技术有限公司</span> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { getCodeImg } from "@/api/login"; | |||||
import Cookies from "js-cookie"; | |||||
import { encrypt, decrypt } from '@/utils/jsencrypt' | |||||
export default { | |||||
name: "Login", | |||||
data() { | |||||
return { | |||||
codeUrl: "", | |||||
loginForm: { | |||||
username: "", | |||||
password: "", | |||||
rememberMe: false, | |||||
code: "", | |||||
uuid: "" | |||||
}, | |||||
loginRules: { | |||||
username: [ | |||||
{ required: true, trigger: "blur", message: "请输入您的账号" } | |||||
], | |||||
password: [ | |||||
{ required: true, trigger: "blur", message: "请输入您的密码" } | |||||
], | |||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }] | |||||
}, | |||||
loading: false, | |||||
// 验证码开关 | |||||
captchaEnabled: true, | |||||
// 注册开关 | |||||
register: false, | |||||
redirect: undefined, | |||||
options: [{ | |||||
value: '选项1', | |||||
label: '黄金糕' | |||||
}, { | |||||
value: '选项2', | |||||
label: '双皮奶' | |||||
}, { | |||||
value: '选项3', | |||||
label: '蚵仔煎' | |||||
}, { | |||||
value: '选项4', | |||||
label: '龙须面' | |||||
}, { | |||||
value: '选项5', | |||||
label: '北京烤鸭' | |||||
}], | |||||
value: '' | |||||
}; | |||||
}, | |||||
watch: { | |||||
$route: { | |||||
handler: function(route) { | |||||
this.redirect = route.query && route.query.redirect; | |||||
}, | |||||
immediate: true | |||||
} | |||||
}, | |||||
created() { | |||||
this.getCode(); | |||||
this.getCookie(); | |||||
}, | |||||
methods: { | |||||
getCode() { | |||||
getCodeImg().then(res => { | |||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; | |||||
if (this.captchaEnabled) { | |||||
this.codeUrl = "data:image/gif;base64," + res.img; | |||||
this.loginForm.uuid = res.uuid; | |||||
} | |||||
}); | |||||
}, | |||||
getCookie() { | |||||
const username = Cookies.get("username"); | |||||
const password = Cookies.get("password"); | |||||
const rememberMe = Cookies.get('rememberMe') | |||||
this.loginForm = { | |||||
username: username === undefined ? this.loginForm.username : username, | |||||
password: password === undefined ? this.loginForm.password : decrypt(password), | |||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) | |||||
}; | |||||
}, | |||||
handleLogin() { | |||||
this.$refs.loginForm.validate(valid => { | |||||
if (valid) { | |||||
this.loading = true; | |||||
if (this.loginForm.rememberMe) { | |||||
Cookies.set("username", this.loginForm.username, { expires: 30 }); | |||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); | |||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); | |||||
} else { | |||||
Cookies.remove("username"); | |||||
Cookies.remove("password"); | |||||
Cookies.remove('rememberMe'); | |||||
} | |||||
this.$store.dispatch("Login", this.loginForm).then(() => { | |||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); | |||||
}).catch(() => { | |||||
this.loading = false; | |||||
if (this.captchaEnabled) { | |||||
this.getCode(); | |||||
} | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style rel="stylesheet/scss" lang="scss"> | |||||
.header_logo{ | |||||
display: flex; | |||||
align-items: center; | |||||
position: absolute; | |||||
top: 5vh; | |||||
left: 5vw; | |||||
color: #4163e5; | |||||
font-size: 4vh; | |||||
font-weight: bold; | |||||
p{ | |||||
margin: 0 0 0 1vw; | |||||
} | |||||
} | |||||
.login { | |||||
display: flex; | |||||
justify-content: end; | |||||
align-items: center; | |||||
height: 100%; | |||||
background-image: url("../assets/images/login_bg.jpg"); | |||||
background-size: cover; | |||||
padding: 0 15vw; | |||||
} | |||||
.title { | |||||
margin: 0px auto 30px auto; | |||||
text-align: center; | |||||
color: #707070; | |||||
} | |||||
.login-form { | |||||
border-radius: 25px; | |||||
background: #ffffff; | |||||
width: 440px; | |||||
padding: 35px 25px 30px 25px; | |||||
.el-input { | |||||
height: 50px; | |||||
input { | |||||
height: 50px; | |||||
border-radius: 15px; | |||||
} | |||||
} | |||||
.input-icon { | |||||
height: 39px; | |||||
width: 14px; | |||||
margin-left: 2px; | |||||
} | |||||
} | |||||
.login-tip { | |||||
font-size: 13px; | |||||
text-align: center; | |||||
color: #bfbfbf; | |||||
} | |||||
.login-code { | |||||
width: 34%; | |||||
height: 50px; | |||||
float: right; | |||||
border-radius: 15px; | |||||
overflow: hidden; | |||||
img { | |||||
cursor: pointer; | |||||
vertical-align: middle; | |||||
transform: scale(1.08); | |||||
} | |||||
} | |||||
.el-login-footer { | |||||
height: 40px; | |||||
line-height: 40px; | |||||
position: fixed; | |||||
bottom: 0; | |||||
width: 100%; | |||||
text-align: center; | |||||
color: #7c7c7c; | |||||
font-family: Arial; | |||||
font-size: 16px; | |||||
letter-spacing: 1px; | |||||
left: 0; | |||||
} | |||||
.login-code-img { | |||||
height: 50px; | |||||
} | |||||
</style> |
@@ -3,35 +3,47 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>记账</p> | |||||
</div> | |||||
<div style="display: none;" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | <p>张家镇</p> | ||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>记账</p> | |||||
</div> | </div> | ||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">合同异常:<span>19</span>个</p> | <p class="todo_num">合同异常:<span>19</span>个</p> | ||||
<p class="todo_num2">记录异常:<span>1</span>个</p> | <p class="todo_num2">记录异常:<span>1</span>个</p> | ||||
@@ -73,13 +85,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -95,14 +115,22 @@ export default { | |||||
name: "todo", | name: "todo", | ||||
data() { | data() { | ||||
return { | return { | ||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -118,6 +146,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -295,6 +346,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -311,6 +364,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,34 +3,33 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div style="display: none" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">已处理村庄:<span>19</span>个</p> | <p class="todo_num">已处理村庄:<span>19</span>个</p> | ||||
<p class="todo_num2">超时完成村庄:<span>1</span>个</p> | <p class="todo_num2">超时完成村庄:<span>1</span>个</p> | ||||
@@ -88,13 +87,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -150,14 +157,23 @@ export default { | |||||
value7: '2023.03.05', | value7: '2023.03.05', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -172,6 +188,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -227,26 +266,6 @@ export default { | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
position: relative; | position: relative; | ||||
.selected{ | |||||
width: 16vw; | |||||
background-color: #ffffff; | |||||
position: absolute; | |||||
top: 4vh; | |||||
left: 10vw; | |||||
z-index: 9; | |||||
border-radius: 8px; | |||||
box-shadow: 0 10px 10px #dedfe1; | |||||
padding: 1vh 0; | |||||
div{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
} | |||||
.select_address{ | .select_address{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -352,6 +371,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -368,6 +389,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,34 +3,33 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div style="display: none" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | <p>张家镇</p> | ||||
<p>2023.03.05</p> | |||||
</div> | </div> | ||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">剩余镇:<span>19</span>个</p> | <p class="todo_num">剩余镇:<span>19</span>个</p> | ||||
<p class="todo_num1">剩余村庄:<span>19</span>个</p> | <p class="todo_num1">剩余村庄:<span>19</span>个</p> | ||||
@@ -97,13 +96,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -159,14 +166,23 @@ export default { | |||||
value7: '2023.03.05', | value7: '2023.03.05', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -181,6 +197,29 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -412,6 +451,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -428,6 +469,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,38 +3,39 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<p class="select_time">2023.03.05</p> | |||||
</div> | |||||
<div class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="el-dropdown-link select_main"> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<p class="select_time">2023.03.05</p> | |||||
</div> | |||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 16vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">待处理合作社:<span>19</span>个</p> | <p class="todo_num">待处理合作社:<span>19</span>个</p> | ||||
@@ -71,13 +72,21 @@ | |||||
</div> | </div> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -133,14 +142,23 @@ export default { | |||||
value7: '2023.03.05', | value7: '2023.03.05', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -155,6 +173,18 @@ export default { | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.title{ | .title{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -195,29 +225,31 @@ export default { | |||||
::v-deep .el-table tr{ | ::v-deep .el-table tr{ | ||||
background-color: transparent; | background-color: transparent; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.header_main{ | .header_main{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
position: relative; | position: relative; | ||||
.selected{ | |||||
width: 16vw; | |||||
background-color: #ffffff; | |||||
position: absolute; | |||||
top: 4vh; | |||||
left: 10vw; | |||||
z-index: 9; | |||||
border-radius: 8px; | |||||
box-shadow: 0 10px 10px #dedfe1; | |||||
padding: 1vh 0; | |||||
div{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
.select_main{ | |||||
display: flex; | |||||
align-items: center; | |||||
& .select_address:nth-child(1){ | |||||
margin-right: 0vw; | |||||
border-top-right-radius: initial; | |||||
border-bottom-right-radius: initial; | |||||
} | |||||
& .select_address:nth-child(2){ | |||||
margin-right: 0vw; | |||||
border-top-left-radius: initial; | |||||
border-bottom-left-radius: initial; | |||||
} | } | ||||
} | } | ||||
.select_address{ | .select_address{ | ||||
@@ -232,16 +264,6 @@ export default { | |||||
width: 8vw; | width: 8vw; | ||||
height: 4vh; | height: 4vh; | ||||
overflow: hidden; | overflow: hidden; | ||||
&:nth-child(2){ | |||||
margin-right: 0vw; | |||||
border-top-right-radius: initial; | |||||
border-bottom-right-radius: initial; | |||||
} | |||||
&:nth-child(3){ | |||||
margin-right: 0vw; | |||||
border-top-left-radius: initial; | |||||
border-bottom-left-radius: initial; | |||||
} | |||||
.sanjiao-right { | .sanjiao-right { | ||||
display: inline-block; | display: inline-block; | ||||
border-left: 8px solid #000; | border-left: 8px solid #000; | ||||
@@ -299,6 +321,7 @@ export default { | |||||
border-bottom-color: initial; | border-bottom-color: initial; | ||||
border-left: 5px solid transparent; | border-left: 5px solid transparent; | ||||
border-right: 5px solid transparent; | border-right: 5px solid transparent; | ||||
cursor: pointer; | |||||
} | } | ||||
.sanjiao-bottom { | .sanjiao-bottom { | ||||
@@ -307,6 +330,7 @@ export default { | |||||
border-top-color: initial; | border-top-color: initial; | ||||
border-left: 5px solid transparent; | border-left: 5px solid transparent; | ||||
border-right: 5px solid transparent; | border-right: 5px solid transparent; | ||||
cursor: pointer; | |||||
} | } | ||||
.time_main{ | .time_main{ | ||||
@@ -320,6 +344,8 @@ export default { | |||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -336,6 +362,10 @@ export default { | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||
@@ -3,34 +3,33 @@ | |||||
<div class="header_main"> | <div class="header_main"> | ||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | |||||
<div class="select_address"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | |||||
</div> | |||||
<div style="display: none" class="selected"> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>大足区</p> | |||||
</div> | </div> | ||||
<div> | |||||
<p>张家镇</p> | |||||
<p>2023.03.05</p> | |||||
</div> | |||||
<div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<el-dropdown trigger="click" placement="bottom-start"> | |||||
<div class="select_address el-dropdown-link"> | |||||
<span class="sanjiao-right"></span> | |||||
<p>张家镇</p> | <p>张家镇</p> | ||||
<p>2023.03.05</p> | |||||
</div> | </div> | ||||
</div> | |||||
<el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;"> | |||||
<el-dropdown-item v-for="(item,index) in 5"> | |||||
<div class="selected"> | |||||
<p>张家镇</p> | |||||
</div> | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
<p class="todo_num">已处理村庄:<span>19</span>个</p> | <p class="todo_num">已处理村庄:<span>19</span>个</p> | ||||
<p class="todo_num2">超时完成村庄:<span>1</span>个</p> | <p class="todo_num2">超时完成村庄:<span>1</span>个</p> | ||||
@@ -105,13 +104,21 @@ | |||||
<div class="right_top_block"> | <div class="right_top_block"> | ||||
<div class="time_main"> | <div class="time_main"> | ||||
<span class="sanjiao-top"></span> | |||||
<p>2023</p> | |||||
<span class="sanjiao-bottom"></span> | |||||
<span class="sanjiao-top" @click="addDate"></span> | |||||
<p @click = "selectionRange">{{year}}</p> | |||||
<el-date-picker | |||||
v-model="year" | |||||
type="year" | |||||
class="pickerTime" | |||||
ref = "datePicker" | |||||
value-format="yyyy" | |||||
placeholder="选择年"> | |||||
</el-date-picker> | |||||
<span class="sanjiao-bottom" @click="reduceDate"></span> | |||||
</div> | </div> | ||||
<div class="month_main"> | <div class="month_main"> | ||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p> | |||||
<p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -136,9 +143,9 @@ | |||||
<el-col span="8" align="center"> | <el-col span="8" align="center"> | ||||
<span class="no_yes">未选中</span> | <span class="no_yes">未选中</span> | ||||
<div class="num_input"> | <div class="num_input"> | ||||
<span>-</span> | |||||
<p>1</p> | |||||
<span>+</span> | |||||
<span @click="reduceNum">-</span> | |||||
<p>{{num}}</p> | |||||
<span @click="addNum">+</span> | |||||
</div> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -200,14 +207,31 @@ | |||||
value7: '63', | value7: '63', | ||||
value8: '2023.03.06', | value8: '2023.03.06', | ||||
value9: '111' | value9: '111' | ||||
}] | |||||
}], | |||||
year:'2023', | |||||
num:0 | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
}, | }, | ||||
methods:{ | methods:{ | ||||
addDate(){ | |||||
this.year = Number(this.year) + 1 ; | |||||
}, | |||||
reduceDate(){ | |||||
this.year = Number(this.year) - 1 ; | |||||
}, | |||||
addNum(){ | |||||
this.num = Number(this.num) + 1 ; | |||||
}, | |||||
reduceNum(){ | |||||
if(this.num==0){return;} | |||||
this.num = Number(this.num) - 1 ; | |||||
}, | |||||
selectionRange(){ | |||||
this.$refs.datePicker.focus(); | |||||
}, | |||||
}, | }, | ||||
mounted(){ | mounted(){ | ||||
@@ -222,6 +246,29 @@ | |||||
width: 100vw; | width: 100vw; | ||||
height: 100vh; | height: 100vh; | ||||
} | } | ||||
.selected{ | |||||
display: flex; | |||||
height: 4vh; | |||||
p{ | |||||
width: 8vw; | |||||
line-height: 4vh; | |||||
text-align: center; | |||||
} | |||||
} | |||||
.pickerTime{ | |||||
opacity: 0; | |||||
position: absolute; | |||||
left: 0px; | |||||
top: 30px; | |||||
width: 5px; | |||||
height: 5px; | |||||
z-index: -1; | |||||
} | |||||
.el-dropdown-link { | |||||
cursor: pointer; | |||||
} | |||||
.setting{ | .setting{ | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -297,6 +344,7 @@ | |||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
cursor: pointer; | |||||
} | } | ||||
p{ | p{ | ||||
width: 3vw; | width: 3vw; | ||||
@@ -481,6 +529,8 @@ | |||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
height: 82px; | height: 82px; | ||||
position: relative; | |||||
cursor: pointer; | |||||
p{ | p{ | ||||
margin: 10px 0; | margin: 10px 0; | ||||
} | } | ||||
@@ -505,6 +555,10 @@ | |||||
&.active{ | &.active{ | ||||
color: #3976ff; | color: #3976ff; | ||||
} | } | ||||
&:hover{ | |||||
color: #3976ff; | |||||
cursor: pointer; | |||||
} | |||||
i{ | i{ | ||||
display: block; | display: block; | ||||
width: 5px; | width: 5px; | ||||