149 lines
3.8 KiB
Vue
149 lines
3.8 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div class="performance">
|
|
<SmallNav />
|
|
<div class="performance-content boderAndRadius">
|
|
<div class="performance-content-top">
|
|
<div class="performance-content-top-left">
|
|
<el-select size="small" v-model="form.value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="performance-content-top-right">
|
|
<el-button size="small" plain>沟通管理</el-button>
|
|
<el-button size="small" plain>管理</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="performance-content-center">
|
|
<div class="performance-content-center-item" v-for="i in 10"></div>
|
|
</div>
|
|
<div class="performance-content-bottom">
|
|
<el-table
|
|
:data="tableData"
|
|
:header-cell-style="{background:'#F5F7FA'}"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="date"
|
|
label="日期"
|
|
align="center"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="姓名"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
align="center"
|
|
label="地址">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="performance-content-jilu">
|
|
ss
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SmallNav from '@/components/kpi-layout/SmallNav'
|
|
export default {
|
|
data () {
|
|
return {
|
|
form: {},
|
|
options: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
tableData: [{
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}]
|
|
}
|
|
},
|
|
components: {
|
|
SmallNav
|
|
},
|
|
computed: {},
|
|
beforeMount () {},
|
|
mounted () {},
|
|
methods: {},
|
|
watch: {}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.performance{
|
|
overflow: auto;
|
|
&-content{
|
|
padding: 28px;
|
|
margin: 10px 0;
|
|
// height: 700px;
|
|
// overflow: auto;
|
|
&-top{
|
|
border-bottom: 1px solid @borderColor;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
&-center{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 20px 0;
|
|
&-item{
|
|
width: 20%;
|
|
height: 20px;
|
|
background: #09f;
|
|
position: relative;
|
|
}
|
|
}
|
|
&-jilu{
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|