Merge branch 'dev_fjb' of https://gitee.com/qinzhenpen/digital-marketing into bugfix
qinzhenpen
2 years ago
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 782 B |
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 378 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 415 B |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 565 B |
|
After Width: | Height: | Size: 772 B |
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-main">
|
||||||
|
<div class="main-left">
|
||||||
|
<div class="left-top">
|
||||||
|
<img style="width: 26px;height: 26px;" src="../../../assets/images/图标1.png" alt="">
|
||||||
|
<span>内置表</span>
|
||||||
|
</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<div v-for="(item,index) in nzData" :key="index" class="item" :class="{ 'is-active': nzIndex === index}" @click="goNZ(index)">
|
||||||
|
<span>{{item}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-top" style="margin-top:35px">
|
||||||
|
<img style="width: 26px;height: 26px;" src="../../../assets/images/图标.png" alt="">
|
||||||
|
<span>自建表</span>
|
||||||
|
</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<div v-for="(item,index) in zjData" :key="index" class="item" :class="{ 'is-active': zjIndex === index}" @click="goZJ(index)">
|
||||||
|
<span>{{item}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-right">
|
||||||
|
<el-table :data="tableData" style="width: 94%" :header-cell-style="headerCellStyle">
|
||||||
|
<el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from "vue"
|
||||||
|
|
||||||
|
const nzIndex=ref(0)
|
||||||
|
const nzData=['用户属性表','用户登录活跃表','用户消费能力表','用户行为表','用户评论表']
|
||||||
|
const zjIndex=ref(-1)
|
||||||
|
const zjData=['用户属性表','用户登录活跃表','用户消费能力表','用户行为表','用户评论表']
|
||||||
|
const tableLabel=reactive([
|
||||||
|
{prop:'date',label:'用户ID'},
|
||||||
|
{prop:'name',label:'登录名'},
|
||||||
|
{prop:'name',label:'用户姓名'},
|
||||||
|
{prop:'name',label:'学号'},
|
||||||
|
{prop:'name',label:'班级'},
|
||||||
|
{prop:'name',label:'专业'},
|
||||||
|
{prop:'name',label:'学校'},
|
||||||
|
{prop:'name',label:'角色名称'},
|
||||||
|
{prop:'name',label:'角色性别'},
|
||||||
|
{prop:'name',label:'角色年龄'},
|
||||||
|
{prop:'name',label:'注册时间'},
|
||||||
|
{prop:'name',label:'所在地'}
|
||||||
|
])
|
||||||
|
const goNZ=(index)=>{
|
||||||
|
nzIndex.value=index
|
||||||
|
zjIndex.value=-1
|
||||||
|
}
|
||||||
|
const goZJ=(index)=>{
|
||||||
|
zjIndex.value=index
|
||||||
|
nzIndex.value=-1
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const headerCellStyle=()=>{
|
||||||
|
return {
|
||||||
|
// backgroundColor: "#0087F9 !important", // 设置表头背景颜色
|
||||||
|
// background:"linear-gradient(0deg, #002651 0%, #0087F9 100%) !important;",
|
||||||
|
color: "#ffffff !important",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-main {
|
||||||
|
// background-color: #f5f5f5;
|
||||||
|
margin: 20px 20px 0;
|
||||||
|
height: calc(100vh - 150px);
|
||||||
|
display: flex;
|
||||||
|
overflow: auto;
|
||||||
|
.main-left{
|
||||||
|
width: 205px;
|
||||||
|
height: 100%;
|
||||||
|
background: #041C49;
|
||||||
|
.left-top{
|
||||||
|
gap: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
span{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #3596EB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-item{
|
||||||
|
.item{
|
||||||
|
width: 195px;
|
||||||
|
height: 31px;
|
||||||
|
// background: #1983DD;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
span{
|
||||||
|
color: #9BD1FF;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-active{
|
||||||
|
background: #1983DD;
|
||||||
|
span{
|
||||||
|
color:#FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-right{
|
||||||
|
width: 1639px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
// background: #001D40;
|
||||||
|
border: 1px solid #0452C6;
|
||||||
|
// opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-table__header){
|
||||||
|
.el-table__cell{
|
||||||
|
background:linear-gradient(0deg, #002651 0%, #0087F9 100%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-table) {
|
||||||
|
--el-table-row-hover-bg-color:#002651 !important;
|
||||||
|
--el-table-border-color: #002651;
|
||||||
|
.el-table__row{
|
||||||
|
background-color: #002652 !important;
|
||||||
|
color: #E6E6E6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||