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>
|
||||