账号管理及登录页和首页
22
src/api/account.js
Normal file
@ -0,0 +1,22 @@
|
||||
import request from '@/utils/request';
|
||||
// 账号管理-列表
|
||||
export function getUserList(params) {
|
||||
return request({
|
||||
url: '/companyUser/getUserList',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 账号管理-查看
|
||||
export function getCompanyUserInfoByUserId(params) {
|
||||
return request({
|
||||
url: '/companyUser/getCompanyUserInfoByUserId',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 账号管理-禁用 status = 0/升级 status = 2
|
||||
export function handleUser(params) {
|
||||
return request({
|
||||
url: '/companyUser/handleUser',
|
||||
params
|
||||
});
|
||||
}
|
15
src/api/feedback/opinion.js
Normal file
@ -0,0 +1,15 @@
|
||||
import request from '@/utils/request';
|
||||
// 获取意见反馈列表
|
||||
export function getOpinionList(params) {
|
||||
return request({
|
||||
url: '/companyUser/getOpinionList',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 删除意见反馈
|
||||
export function delOpinion(params) {
|
||||
return request({
|
||||
url: '/companyUser/delOpinion',
|
||||
params
|
||||
});
|
||||
}
|
16
src/api/home/index.js
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
import request from '@/utils/request';
|
||||
// 平台数据统计
|
||||
export function getPlatformData(params) {
|
||||
return request({
|
||||
url: '/data/getPlatformData',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 政策增加趋势
|
||||
export function getMonthPolicyCount(params) {
|
||||
return request({
|
||||
url: '/data/getMonthPolicyCount',
|
||||
params
|
||||
});
|
||||
}
|
BIN
src/assets/image/01.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/image/02.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/image/03.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/image/04.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/image/05.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/image/login-bg.png
Normal file
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/login.png
Normal file
After Width: | Height: | Size: 61 KiB |
@ -10,6 +10,7 @@ import transferPage from './modules/transferPage';
|
||||
import customerManagement from './modules/customerManagement';
|
||||
import accountManagement from './modules/accountManagement';
|
||||
import customerService from './modules/customerService';
|
||||
import feedback from './modules/feedback';
|
||||
|
||||
export const DynamicRoutes = [
|
||||
// 政策管理
|
||||
@ -23,7 +24,9 @@ export const DynamicRoutes = [
|
||||
// 账号管理
|
||||
accountManagement,
|
||||
// 客服中心
|
||||
customerService
|
||||
customerService,
|
||||
// 意见反馈
|
||||
feedback
|
||||
];
|
||||
|
||||
export default DynamicRoutes;
|
||||
|
17
src/router/modules/feedback.js
Normal file
@ -0,0 +1,17 @@
|
||||
import Layout from '@/layout';
|
||||
// 意见反馈
|
||||
const nestedRouter = {
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'index',
|
||||
children: [
|
||||
{
|
||||
path: 'feedback',
|
||||
component: resolve => require(['@/views/feedback/index'], resolve),
|
||||
name: 'feedback',
|
||||
meta: { title: '意见反馈' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default nestedRouter;
|
@ -1,6 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-table style="width: 100%" :data="unscrambleList">
|
||||
<el-card shadow="never">
|
||||
<div>
|
||||
<i class="el-icon-search"></i>
|
||||
<span>筛选搜索</span>
|
||||
<div style="float:right">
|
||||
<el-button type="primary" @click="handleSearchList" size="small">
|
||||
查询
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<el-form
|
||||
size="small"
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="queryParams.phone" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-table style="width: 100%" class="table-container" :data="unscrambleList">
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
@ -11,27 +35,37 @@
|
||||
align="center"
|
||||
prop="username"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="最近登录"
|
||||
align="center"
|
||||
prop="loginTime"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handlePage(scope.row.id)" type="text" size="small"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleStatus(scope.row.id, false)"
|
||||
@click="handleStatus(scope.row.id, 0)"
|
||||
type="text"
|
||||
size="small"
|
||||
v-if="scope.row.deleteStatus != 1"
|
||||
v-if="scope.row.status != 0"
|
||||
>禁用</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleStatus(scope.row.id, true)"
|
||||
@click="handleStatus(scope.row.id, 3)"
|
||||
type="text"
|
||||
size="small"
|
||||
v-else
|
||||
>启用</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleDelete(scope.row.id)"
|
||||
@click="handleStatus(scope.row.id, 2)"
|
||||
type="text"
|
||||
size="small"
|
||||
>升级</el-button
|
||||
@ -39,19 +73,32 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getCategoryList,
|
||||
handleCompanyUser,
|
||||
getUserList,
|
||||
handleUser,
|
||||
deleteCompanyUser,
|
||||
resetPw
|
||||
} from '@/api/customer';
|
||||
} from '@/api/account';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
unscrambleList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
phone:''
|
||||
},
|
||||
total:0,
|
||||
optionList1: [
|
||||
{
|
||||
value: '1',
|
||||
@ -65,13 +112,18 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSearchList() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
getCategoryList(this.queryParams).then(({ data }) => {
|
||||
getUserList(this.queryParams).then(({ data }) => {
|
||||
this.unscrambleList = data.list;
|
||||
this.total = data.total
|
||||
});
|
||||
},
|
||||
handleStatus(companyId, isOpen) {
|
||||
handleCompanyUser({ companyId, isOpen }).then(({ message }) => {
|
||||
handleStatus(userId, status) {
|
||||
handleUser({ userId, status }).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
this.getList();
|
||||
});
|
||||
|
@ -97,7 +97,9 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="企业画像" prop="labelIdList">
|
||||
<el-button size="small" @click="open" v-if="!check">设置</el-button>
|
||||
<el-tag v-else>1</el-tag>
|
||||
<div v-else>
|
||||
<el-tag style="margin-right:10px" v-for="(item,index) in arr" :key="index">{{item}}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" prop="icon">
|
||||
<multi-upload
|
||||
@ -146,6 +148,7 @@ import {
|
||||
getCompanyUserInfo,
|
||||
getLabelSetting as getOptions
|
||||
} from '@/api/customer';
|
||||
import { getCompanyUserInfoByUserId } from '@/api/account';
|
||||
import { getLabelSetting } from '@/api/policy/library';
|
||||
import MultiUpload from '@/components/Upload/multiUpload';
|
||||
export default {
|
||||
@ -345,7 +348,8 @@ export default {
|
||||
|
||||
if (id) {
|
||||
this.editPage = true;
|
||||
getOptions({ companyId: id }).then(({ data }) => {
|
||||
if(!this.check){
|
||||
getOptions({ companyId: id }).then(({ data }) => {
|
||||
this.labelList = data;
|
||||
this.arr = data.map(item =>
|
||||
item.labelList
|
||||
@ -366,6 +370,30 @@ export default {
|
||||
}
|
||||
});
|
||||
});
|
||||
}else{
|
||||
|
||||
// 账户管理
|
||||
getCompanyUserInfoByUserId({ userId: id }).then(({ data }) => {
|
||||
data.addressType = data.addressType - 0;
|
||||
getOptions({ companyId: data.companyId }).then(({ data }) => {
|
||||
this.labelList = data;
|
||||
this.arr = data.map(item =>
|
||||
item.labelList
|
||||
? item.labelList.filter(v => v.isHas)[0]
|
||||
? item.labelList.filter(v => v.isHas)[0].name
|
||||
: ''
|
||||
: undefined
|
||||
);
|
||||
});
|
||||
if (data.addressType == 1) {
|
||||
this.getType(true, data);
|
||||
} else {
|
||||
this.getCity(true, data);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
} else {
|
||||
getLabelSetting({
|
||||
policyId: 1,
|
||||
|
@ -61,13 +61,17 @@ export default {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
setOptions({ expectedData, actualData,keys } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: keys,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: { //坐标轴刻度标签的相关设置
|
||||
interval: 0,
|
||||
rotate:'70',//旋转度数
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
@ -90,14 +94,14 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
data: []
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
color: '#ff944b',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
color: '#ff944b',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
|
124
src/views/feedback/index.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-table style="width: 100%" :data="unscrambleList">
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="意见反馈"
|
||||
align="center"
|
||||
prop="text"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="联系方式"
|
||||
align="center"
|
||||
prop="phone"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleDelete(scope.row.id)"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getOpinionList,
|
||||
delOpinion,
|
||||
} from '@/api/feedback/opinion';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
unscrambleList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total:0,
|
||||
optionList1: [
|
||||
{
|
||||
value: '1',
|
||||
label: '地级市'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '合肥区县'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
getOpinionList(this.queryParams).then(({ data }) => {
|
||||
this.unscrambleList = data.list;
|
||||
this.total = data.total
|
||||
});
|
||||
},
|
||||
handleStatus(companyId, isOpen) {
|
||||
handleCompanyUser({ companyId, isOpen }).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 跳转页面
|
||||
handlePage(id) {
|
||||
this.$router.push({ path: '/addCustomer', query: { id, check: true } });
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(id) {
|
||||
this.$confirm('确认删除该数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(function() {
|
||||
return delOpinion({ id });
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess('删除成功');
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
resetPwd(userId) {
|
||||
// resetPw
|
||||
this.$prompt('请输入新密码', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
// inputErrorMessage: '邮箱格式不正确'
|
||||
})
|
||||
.then(({ value }) => {
|
||||
resetPw({ userId, password: value }).then(({ data }) => {
|
||||
this.msgSuccess(data);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
}
|
||||
};
|
||||
</script>
|
@ -20,6 +20,11 @@
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handlePage(scope.row.id)" type="text" size="small"
|
||||
|
@ -1,14 +1,127 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
home
|
||||
<div class="index_page app-container">
|
||||
<!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
|
||||
<h4>平台数据统计</h4>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>客户总数</span>
|
||||
<span>{{platData.userCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>政策总数</span>
|
||||
<span>{{platData.policyCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>需求总数</span>
|
||||
<span>{{platData.needCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>成果总数</span>
|
||||
<span>{{platData.resultCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>解读总数</span>
|
||||
<span>{{platData.readCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 style="margin:100px 0 0">政策增加趋势</h4>
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import {
|
||||
getPlatformData,
|
||||
getMonthPolicyCount,
|
||||
} from '@/api/home/index';
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
platData:{},
|
||||
lineChartData: {
|
||||
keys:[],
|
||||
expectedData:[]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
handleSetLineChartData(type) {
|
||||
// this.lineChartData = lineChartData[type]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getPlatformData().then(({data})=>{
|
||||
this.platData = data
|
||||
})
|
||||
getMonthPolicyCount().then(({data})=>{
|
||||
this.lineChartData.keys = Object.keys(data)
|
||||
this.lineChartData.expectedData = Object.values(data)
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.index_page{
|
||||
h4{
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #ff944b;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.item{
|
||||
border-radius: 6px;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
margin-right: 15px;
|
||||
background-color: red;
|
||||
background: url(~@/assets/image/01.png) no-repeat center center;
|
||||
background-size: 100%;
|
||||
div{
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
span:nth-child(2){
|
||||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-child(2){
|
||||
background-image: url(~@/assets/image/02.png);
|
||||
}
|
||||
.item:nth-child(3){
|
||||
background-image: url(~@/assets/image/03.png);
|
||||
}
|
||||
.item:nth-child(4){
|
||||
background-image: url(~@/assets/image/04.png);
|
||||
}
|
||||
.item:nth-child(5){
|
||||
background-image: url(~@/assets/image/05.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,66 +1,80 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-title">
|
||||
<!-- <img src="../assets/image/logo.png" alt="" /> -->
|
||||
<!-- <span>嘉策科技创新服务平台</span> -->
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="col">嘉策科技创新服务平台</h3>
|
||||
<h1 class="title">登录</h1>
|
||||
<div class="login-info">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</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%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- <div class="login-title">
|
||||
<img src="../assets/image/logo.png" alt="" />
|
||||
<span>嘉策科技创新服务平台</span>
|
||||
</div> -->
|
||||
<div class="my-box">
|
||||
<div class="my-left">
|
||||
<div class="bg-img">
|
||||
<img src="@/assets/login.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="my-right">
|
||||
<div style="min-width:360px;max-width:360px;padding-bottom: 55px;">
|
||||
<!-- <div class="m-title">欢迎登录</div> -->
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="col">嘉策科技创新服务平台</h3>
|
||||
<h1 class="title">登录</h1>
|
||||
<div class="login-info">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</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%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="login-form-bg"></div> -->
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">
|
||||
@ -78,8 +92,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'ailanyin',
|
||||
password: 'ailanyin',
|
||||
// ailanyin
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false
|
||||
},
|
||||
loginRules: {
|
||||
@ -156,7 +171,7 @@ $loginForm: 383px;
|
||||
// align-items: center;
|
||||
height: 100%;
|
||||
min-height: $loginHeight;
|
||||
background-image: url('../assets/image/jiace.png');
|
||||
background-image: url('../assets/image/login-bg.png');
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
@ -186,35 +201,35 @@ $loginForm: 383px;
|
||||
.col {
|
||||
color: #209cff;
|
||||
}
|
||||
.login-form {
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
width: 520px;
|
||||
min-height: $loginForm;
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9;
|
||||
// bottom: 0;
|
||||
// margin: auto;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.login-info {
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
// .login-form {
|
||||
// border-radius: 10px;
|
||||
// background: #ffffff;
|
||||
// width: 520px;
|
||||
// min-height: $loginForm;
|
||||
// padding: 20px;
|
||||
// padding-top: 10px;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// z-index: 9;
|
||||
// // bottom: 0;
|
||||
// // margin: auto;
|
||||
// .el-input {
|
||||
// height: 38px;
|
||||
// input {
|
||||
// height: 38px;
|
||||
// }
|
||||
// }
|
||||
// .input-icon {
|
||||
// height: 39px;
|
||||
// width: 14px;
|
||||
// margin-left: 2px;
|
||||
// }
|
||||
// .login-info {
|
||||
// padding: 0 100px;
|
||||
// }
|
||||
// }
|
||||
.login-form-bg {
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
@ -255,6 +270,59 @@ $loginForm: 383px;
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
.my-box {
|
||||
min-height: 454px;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.my-left {
|
||||
min-width: 500px;
|
||||
.bg-img {
|
||||
height: 100%;
|
||||
background-color: #3494ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 405px;
|
||||
height: 325px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-right {
|
||||
min-width: 550px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.m-title {
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 55px auto 45px;
|
||||
}
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.check-box {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-input__prefix {
|
||||
|