0110
parent
bd90d119b8
commit
642f11b1bb
63
src/App.vue
63
src/App.vue
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,14 +7,55 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
margin: 0px;
|
||||
}
|
||||
p{
|
||||
margin: 0px;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
*{outline: none;}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #FFFFFF;
|
||||
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
color: #8E8E8E;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
ul,ol,li {
|
||||
list-style: none;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
/* 清楚浮动 */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1
|
||||
}
|
||||
|
||||
/* 右侧公共标题 */
|
||||
.pull-title{
|
||||
height: 43px;
|
||||
border-bottom: 1px solid #E4EAEE;
|
||||
}
|
||||
.title-item{
|
||||
display: flex;
|
||||
}
|
||||
.title-item li{
|
||||
padding: 0 22px;
|
||||
font-size: 16px;
|
||||
color: #454D67;
|
||||
line-height: 42px;
|
||||
border-bottom: 1px solid #E4EAEE;
|
||||
}
|
||||
.title-item li.cur{
|
||||
border-bottom: 1px solid #0544A4;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 529 B |
|
|
@ -1,108 +1,114 @@
|
|||
<template>
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<img src="../assets/logo.png" alt="" />
|
||||
<div>
|
||||
<p>巴音孟克</p>
|
||||
<p>火眼识才系统</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<img src="" alt="" />
|
||||
<p><span>用户名：</span><span>Loretta</span></p>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<img src="../assets/logo.png" alt="" />
|
||||
<div>
|
||||
<p>巴音孟克</p>
|
||||
<p>火眼识才系统</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<img src="" alt="" />
|
||||
<p><span>用户名：</span><span>Loretta</span></p>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<router-link class="navigationList" to="/consumer"><img src="../assets/user.png" alt="" />
|
||||
<p>用户管理</p>
|
||||
</router-link>
|
||||
<router-link class="navigationList" to="/projectManagement"><img src="../assets/xiangmu.png" alt="" />
|
||||
<p>项目管理</p>
|
||||
</router-link>
|
||||
|
||||
<div class="navigation">
|
||||
<router-link class="navigationList" to="/foo"
|
||||
><img src="../assets/user.png" alt="" />
|
||||
<p>用户管理</p>
|
||||
</router-link>
|
||||
<router-link class="navigationList" to="/projectManagement"
|
||||
><img src="../assets/xiangmu.png" alt="" />
|
||||
<p>项目管理</p>
|
||||
</router-link>
|
||||
|
||||
<div>
|
||||
<div class="navigationList">
|
||||
<img src="../assets/zhanghu.png" alt="" />
|
||||
<p>账户管理</p>
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="navigationList">
|
||||
<img src="../assets/zhanghu.png" alt="" />
|
||||
<p>账户管理</p>
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.nav {
|
||||
width: 260px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
|
||||
border-radius: 0px 30px 30px 0px;
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo div {
|
||||
margin-left: 17px;
|
||||
}
|
||||
.logo div p {
|
||||
font-size: 22px;
|
||||
font-family: PangMenZhengDao;
|
||||
color: #ffffff;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.user {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
margin-top: 40px;
|
||||
.nav {
|
||||
width: 260px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
|
||||
border-radius: 0px 30px 30px 0px;
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 40px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.user img {
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 31px;
|
||||
height: 36px;
|
||||
}
|
||||
.user p {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navigation {
|
||||
margin-top: 58px;
|
||||
}
|
||||
.navigationList{
|
||||
display: flex;
|
||||
margin-bottom: 42px;
|
||||
justify-content: center;
|
||||
}
|
||||
.navigationList p{
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
line-height: 25px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.logo div {
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
.logo div p {
|
||||
font-size: 22px;
|
||||
font-family: PangMenZhengDao;
|
||||
color: #ffffff;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 40px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.user img {
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 31px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.user p {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
margin-top: 58px;
|
||||
}
|
||||
|
||||
.navigationList {
|
||||
display: flex;
|
||||
margin-bottom: 42px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navigationList p {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
|
||||
line-height: 25px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
} from 'vue-router'
|
||||
import login from '../view/login.vue'
|
||||
import index from '../view/index.vue'
|
||||
import consumer from '../view/consumer.vue'
|
||||
import projectManagement from '../view/projectManagement.vue'
|
||||
//配置路由
|
||||
const router = createRouter({
|
||||
|
|
@ -21,6 +22,11 @@ const router = createRouter({
|
|||
name: 'index',
|
||||
component: index
|
||||
},
|
||||
{
|
||||
path: '/consumer', //
|
||||
name: 'consumer',
|
||||
component: consumer
|
||||
},
|
||||
{
|
||||
path: '/projectManagement', //
|
||||
name: 'projectManagement',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div class="disFlex">
|
||||
<NavLeft />
|
||||
<div class="consumer">
|
||||
<div class="pull-title">
|
||||
<ul class="title-item">
|
||||
<li class="cur">用户管理</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="consumer-seach">
|
||||
<ul class="consumer-seach-item">
|
||||
<li>
|
||||
<el-input v-model="input" placeholder="请输入手机号" class="input-with-select" style="width: 340px;">
|
||||
<template #prepend>
|
||||
<el-select v-model="select" placeholder="手机号" style="width: 88px;">
|
||||
<el-option label="手机号" value="1"></el-option>
|
||||
<el-option label="微信号" value="2"></el-option>
|
||||
<el-option label="钉钉号" value="3"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</li>
|
||||
<li>
|
||||
<el-date-picker v-model="value" type="date" placeholder="请选择注册时间" style="width: 340px;">
|
||||
</el-date-picker>
|
||||
</li>
|
||||
<el-button class="seach-btn" @click="queryConsumer()"><img src="../assets/search-btn.png" alt="">查询
|
||||
</el-button>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="consumer-list">
|
||||
<el-table :data="tableData" style="width: 100%;">
|
||||
<el-table-column align="center" prop="name" label="用户姓名" />
|
||||
<el-table-column align="center" prop="phone" label="手机号" />
|
||||
<el-table-column align="center" prop="wxMiniShowname" label="微信" />
|
||||
<el-table-column align="center" prop="dingdingShowname" label="钉钉" />
|
||||
<el-table-column align="center" prop="createTime" label="注册时间" />
|
||||
<el-table-column align="center" label="操作">
|
||||
<el-button type="text" size="small" @click="handleClick">用户详情</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="consumer-pagination">
|
||||
<el-pagination background v-model:currentPage="currentPage3" :page-size="100"
|
||||
layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavLeft from "../components/nav.vue";
|
||||
export default {
|
||||
components: {
|
||||
NavLeft,
|
||||
},
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
select: '',
|
||||
value: '',
|
||||
tableData: [],
|
||||
consumerData: {
|
||||
current: 1,
|
||||
keyword: "",
|
||||
type: "",
|
||||
size: 10
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 初始化获取数据
|
||||
this.getConsumer();
|
||||
},
|
||||
methods: {
|
||||
// 时间格式转换
|
||||
newDate(data) {
|
||||
let yy = new Date(data).getFullYear();
|
||||
let mm = new Date(data).getMonth() + 1;
|
||||
let dd = new Date(data).getDate();
|
||||
return yy + "-" + mm + "-" + "-" + dd;
|
||||
},
|
||||
// 查询
|
||||
queryConsumer() {
|
||||
this.consumerData.startTime = this.keyword;
|
||||
this.getConsumer();
|
||||
},
|
||||
// 获取列表数据
|
||||
getConsumer() {
|
||||
let param = new URLSearchParams();
|
||||
param.append("current", this.consumerData.current);
|
||||
param.append("keyword", this.consumerData.keyword);
|
||||
param.append("size", this.consumerData.size);
|
||||
param.append("type", this.consumerData.type);
|
||||
let that = this;
|
||||
this.axios
|
||||
.get("/hysc/member/getMemberPage", {
|
||||
params: param
|
||||
})
|
||||
.then(function(response) {
|
||||
console.log(response.data);
|
||||
that.tableData = response.data.data.records;
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.disFlex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.consumer {
|
||||
width: calc(100% - 260px);
|
||||
padding: 50px 60px;
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
.consumer-seach {
|
||||
margin: 60px 0 50px;
|
||||
}
|
||||
|
||||
.consumer-seach-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.consumer-seach-item li {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.consumer-seach-item>>>.el-input__inner {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.consumer-seach-item .seach-btn,
|
||||
.consumer-seach-item .seach-btn:hover {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
background-color: #0544A4;
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
}
|
||||
.consumer-seach-item .seach-btn img {
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
/* 列表 */
|
||||
.consumer-list>>>.el-table .cell{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.consumer-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.consumer-pagination>>>.el-pager li {
|
||||
color: #666666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.consumer-pagination>>>.el-input__inner {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.consumer-pagination>>>.el-pagination__jump {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue