文档服务地址:http://47.92.0.57:3000/ 周报索引地址:http://47.92.0.57:3000/s/NruNXRYmV

Commit 7021ccd3 by 李景熙

统一版式

parent e188cd82
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <div class="taskhall-left">
<el-main style="background-color: #FFFFFF"> <div class="tasklist-container">
<el-table <div class="tasklist">
:data="tableData" <div class="task-item" v-for="(item, index) in tasks" :key='index'>
:header-cell-style="{backgroundColor:'#FFFFFF',color:'#409EFF'}" <div>{{item.title}}</div>
max-height=600px <div>发布时间:{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;任务状态:{{'待审核'}}&emsp;&emsp;
border <span v-if="item.type == 'text'">文本大小:{{item.size}}k</span>
style="width: 100%" <span v-else>图片张数:{{item.size}}</span>
:default-sort = "{prop: 'date', order: 'descending'}"> </div>
<el-table-column <el-button class="task-enter-btn1" type="primary" plain>审核任务</el-button>
prop="taskId" </div>
label="任务ID" </div>
width="180"> <div class="page-navigator">
</el-table-column> <el-pagination
<el-table-column :page-size="20"
prop="splitNum" :pager-count="11"
label="分片数量" layout="prev, pager, next"
width="180"> :total="1000">
</el-table-column> </el-pagination>
<el-table-column </div>
prop="date" </div>
label="发布时间" </div>
sortable
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="checkdetail" type="text" size="large">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
const mock = true
if (mock) require('@/mock/api.js')
export default { export default {
data() { name: 'checktask',
data () {
return { return {
tableData: [{ activeName: '待审核任务' ,
taskId:'1', tasks: []
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2017-05-03',
name: '人脸质量判断',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2018-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-06-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-04',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-08',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-06-11',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}, {
taskId:'1',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '待审核'
}]
} }
}, },
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: { methods: {
checkdetail () { handleClick (tab, event) {
this.$router.push('/').catch(data => { console.log(tab, event)
}) },
} deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
} }
} }
</script> </script>
<style> <!-- Add 'scoped' attribute to limit CSS to this component only -->
.taskhall{ <style scoped lang='scss'>
width: 90vw; @import '@/assets/scss/config.scss';
min-width: 800px; .taskhall-container{
/* border: solid; */ padding: 40px 10% 100px 10%;
margin-left: auto; min-width: $min-width;
margin-right: auto; min-height: 600px;
margin-top: 0px; overflow:hidden;
} background-color: $bg-color;
.el-header, .el-footer { .taskhall-left{
background-color: #B3C0D1; background-color: white;
color: #333; padding: 30px 20px 30px 20px;
text-align: center; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
line-height: 60px; .filter-container{
} .filter-item{
display: flex;
.el-aside { align-items: center;
background-color: #D3DCE6; margin-bottom: 15px;
color: #333; .filter-input{
text-align: center; margin-left: 20px;
line-height: 200px; width: 300px;
} }
}
.el-main { }
background-color: #E9EEF3; .tasklist-container{
color: #333; .tasklist{
text-align: center; .task-item{
line-height: 36px; border-bottom: 1px solid $divider-color;
} text-align: left;
padding: 10px 0px 22px;
body > .el-container { position: relative;
margin-bottom: 40px; div:first-of-type{
} font-size: 18px;
margin-bottom: 7px;
.el-container:nth-child(5) .el-aside, font-weight: bold;
.el-container:nth-child(6) .el-aside { }
line-height: 260px; div:last-of-type{
} font-size: 14px;
color: #959595;
.el-container:nth-child(7) .el-aside { }
line-height: 320px; .task-enter-btn1{
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
} }
</style> </style>
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <div class="taskhall-left">
<el-main style="background-color: #FFFFFF"> <div class="tasklist-container">
<el-table <div class="tasklist">
:data="tableData" <div class="task-item" v-for="(item, index) in tasks" :key='index'>
:header-cell-style="{color:'#409EFF'}" <div>{{item.title}}</div>
height="570" <div>发布时间:{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;
border <span v-if="item.type == 'text'">文本大小:{{item.size}}k</span>
style="width: 100%"> <span v-else>图片张数:{{item.size}}</span>
<el-table-column </div>
prop="taskId" <el-button class="task-enter-btn1" type="primary" plain>查看任务详情</el-button>
label="任务ID" </div>
width="180"> </div>
</el-table-column> <div class="page-navigator">
<el-table-column <el-pagination
prop="author" :page-size="20"
label="发布者ID" :pager-count="11"
width="180"> layout="prev, pager, next"
</el-table-column> :total="1000">
<el-table-column </el-pagination>
prop="splitNum" </div>
label="分片数量" </div>
width="180"> </div>
</el-table-column> </div>
<el-table-column
prop="date"
label="发布时间"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">导出</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
const mock = true
if (mock) require('@/mock/api.js')
export default { export default {
data() { name: 'ongoingtask',
data () {
return { return {
tableData: [{ activeName: '我的任务',
taskId:'1', tasks: []
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已完成'
}]
} }
},
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行
rows.splice(index, 1);
},
} }
} }
</script> </script>
<style> <!-- Add 'scoped' attribute to limit CSS to this component only -->
.taskhall{ <style scoped lang='scss'>
width: 90vw; @import '@/assets/scss/config.scss';
min-width: 800px; .taskhall-container{
/* border: solid; */ padding: 40px 10% 100px 10%;
margin-left: auto; min-width: $min-width;
margin-right: auto; min-height: 600px;
margin-top: 0px; overflow:hidden;
} background-color: $bg-color;
.el-header, .el-footer { .taskhall-left{
background-color: #B3C0D1; background-color: white;
color: #333; padding: 30px 20px 30px 20px;
text-align: center; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
line-height: 60px; .filter-container{
} .filter-item{
display: flex;
.el-aside { align-items: center;
background-color: #D3DCE6; margin-bottom: 15px;
color: #333; .filter-input{
text-align: center; margin-left: 20px;
line-height: 200px; width: 300px;
} }
}
.el-main { }
background-color: #E9EEF3; .tasklist-container{
color: #333; .tasklist{
text-align: center; .task-item{
line-height: 36px; border-bottom: 1px solid $divider-color;
} text-align: left;
padding: 10px 0px 22px;
body > .el-container { position: relative;
margin-bottom: 40px; div:first-of-type{
} font-size: 18px;
margin-bottom: 7px;
.el-container:nth-child(5) .el-aside, font-weight: bold;
.el-container:nth-child(6) .el-aside { }
line-height: 260px; div:last-of-type{
} font-size: 14px;
color: #959595;
.el-container:nth-child(7) .el-aside { }
line-height: 320px; .task-enter-btn1{
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
} }
</style> </style>
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <div class="taskhall-left">
<el-main style="background-color: #FFFFFF"> <div class="tasklist-container">
<el-table <div class="tasklist">
:data="tableData" <div class="task-item" v-for="(item, index) in tasks" :key='index'>
:header-cell-style="{color:'#409EFF'}" <div>{{item.title}}</div>
height="570" <div>发布时间:{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;任务状态:{{'已发布'}}&emsp;&emsp;
border <span v-if="item.type == 'text'">文本大小:{{item.size}}k</span>
style="width: 100%"> <span v-else>图片张数:{{item.size}}</span>
<el-table-column </div>
prop="taskId" <el-button class="task-enter-btn1" type="primary" plain>修改</el-button>
label="任务ID" <el-button class="task-enter-btn2" @click.native.prevent="deleteRow(scope.$item, tasks)"type="primary" plain>删除</el-button>
width="180"> </div>
</el-table-column> </div>
<el-table-column <div class="page-navigator">
prop="splitNum" <el-pagination
label="分片数量" :page-size="20"
width="180"> :pager-count="11"
</el-table-column> layout="prev, pager, next"
<el-table-column :total="1000">
prop="date" </el-pagination>
label="发布时间" </div>
width="180"> </div>
<template slot-scope="scope"> </div>
<i class="el-icon-time"></i> </div>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
const mock = true
if (mock) require('@/mock/api.js')
export default { export default {
data() { name: 'publishtask',
data () {
return { return {
tableData: [{ activeName: '我的发布',
taskId:'1', tasks: []
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}]
} }
}, },
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: { methods: {
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行 deleteRow(index, rows) {//删除改行
rows.splice(index, 1); rows.splice(index, 1);
}, },
} }
} }
</script> </script>
<style> <!-- Add 'scoped' attribute to limit CSS to this component only -->
.el-header, .el-footer { <style scoped lang='scss'>
background-color: #B3C0D1; @import '@/assets/scss/config.scss';
color: #333; .taskhall-container{
text-align: center; padding: 40px 10% 100px 10%;
line-height: 60px; min-width: $min-width;
} min-height: 600px;
overflow:hidden;
.el-aside { background-color: $bg-color;
background-color: #D3DCE6; .taskhall-left{
color: #333; background-color: white;
text-align: center; padding: 30px 20px 30px 20px;
line-height: 200px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} .filter-container{
.filter-item{
.el-main { display: flex;
background-color: #E9EEF3; align-items: center;
color: #333; margin-bottom: 15px;
text-align: center; .filter-input{
line-height: 36px; margin-left: 20px;
} width: 300px;
}
body > .el-container { }
margin-bottom: 40px; }
} .tasklist-container{
.tasklist{
.el-container:nth-child(5) .el-aside, .task-item{
.el-container:nth-child(6) .el-aside { border-bottom: 1px solid $divider-color;
line-height: 260px; text-align: left;
} padding: 10px 0px 22px;
position: relative;
.el-container:nth-child(7) .el-aside { div:first-of-type{
line-height: 320px; font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 80px;
bottom: 10px;
}
.task-enter-btn2{
position: absolute;
right: 0px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
} }
</style> </style>
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <el-container>
<el-aside width="300px"> <el-aside width="300px">
...@@ -57,11 +57,21 @@ ...@@ -57,11 +57,21 @@
</div> </div>
</template> </template>
<style scope lang="scss">
@import '../assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
}
</style>
<style> <style>
/* .taskhall{ /* .taskhall{
width: 90vw; width: 90vw;
min-width: 800px; min-width: 800px;
border: solid; border: solid;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 0px; margin-top: 0px;
...@@ -84,11 +94,11 @@ ...@@ -84,11 +94,11 @@
line-height: 40px; line-height: 40px;
width: 80%; width: 80%;
} }
body > .el-container { body > .el-container {
margin-bottom: 40px; margin-bottom: 40px;
} }
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -111,6 +121,7 @@ ...@@ -111,6 +121,7 @@
.grid-content { .grid-content {
border-radius: 4px; border-radius: 4px;
height: 40px; height: 40px;
color: #000000
} }
.grid-line { .grid-line {
border-radius: 4px; border-radius: 4px;
...@@ -121,4 +132,4 @@ ...@@ -121,4 +132,4 @@
background-color: #FFFFFF; background-color: #FFFFFF;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <div class="taskhall-left">
<el-main style="background-color: #FFFFFF"> <div class="tasklist-container">
<el-table <div class="tasklist">
:data="tableData" <div class="task-item" v-for="(item, index) in tasks" :key='index'>
:header-cell-style="{color:'#409EFF'}" <div>{{item.title}}</div>
height="570" <div>发布时间:{{item.date}}&emsp;&emsp;分片数量:{{item.number}}&emsp;&emsp;
border <span v-if="item.type == 'text'">文本大小:{{item.size}}k</span>
style="width: 100%"> <span v-else>图片张数:{{item.size}}</span>
<el-table-column </div>
prop="taskId" <el-button class="task-enter-btn1" type="primary" plain>查看任务详情</el-button>
label="任务ID" </div>
width="180"> </div>
</el-table-column> <div class="page-navigator">
<el-table-column <el-pagination
prop="splitNum" :page-size="20"
label="分片数量" :pager-count="11"
width="180"> layout="prev, pager, next"
</el-table-column> :total="1000">
<el-table-column </el-pagination>
prop="date" </div>
label="发布时间" </div>
width="180"> </div>
<template slot-scope="scope"> </div>
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="任务名称"
>
</el-table-column>
<el-table-column
prop="status"
label="任务状态"
width="180"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
const mock = true
if (mock) require('@/mock/api.js')
export default { export default {
data() { name: 'ongoingtask',
data () {
return { return {
tableData: [{ activeName: '我的任务',
taskId:'1', tasks: []
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '单物体语义分割',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '人脸质量判断',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status: '已发布'
}, {
taskId:'1',
author:'小明',
splitNum:'3',
date: '2016-05-03',
name: '图片属性标注',
status:'已发布'
}]
} }
}, },
mounted () {
this.axios.get('/getTasks').then(res => {
this.tasks = res.data.data
})
},
methods: { methods: {
handleClick (tab, event) {
console.log(tab, event)
},
deleteRow(index, rows) {//删除改行 deleteRow(index, rows) {//删除改行
rows.splice(index, 1); rows.splice(index, 1);
}, },
} }
} }
</script> </script>
<style> <!-- Add 'scoped' attribute to limit CSS to this component only -->
.el-header, .el-footer { <style scoped lang='scss'>
background-color: #B3C0D1; @import '@/assets/scss/config.scss';
color: #333; .taskhall-container{
text-align: center; padding: 40px 10% 100px 10%;
line-height: 60px; min-width: $min-width;
} min-height: 600px;
overflow:hidden;
.el-aside { background-color: $bg-color;
background-color: #D3DCE6; .taskhall-left{
color: #333; background-color: white;
text-align: center; padding: 30px 20px 30px 20px;
line-height: 200px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} .filter-container{
.filter-item{
.el-main { display: flex;
background-color: #E9EEF3; align-items: center;
color: #333; margin-bottom: 15px;
text-align: center; .filter-input{
line-height: 36px; margin-left: 20px;
} width: 300px;
}
body > .el-container { }
margin-bottom: 40px; }
} .tasklist-container{
.tasklist{
.el-container:nth-child(5) .el-aside, .task-item{
.el-container:nth-child(6) .el-aside { border-bottom: 1px solid $divider-color;
line-height: 260px; text-align: left;
} padding: 10px 0px 22px;
position: relative;
.el-container:nth-child(7) .el-aside { div:first-of-type{
line-height: 320px; font-size: 18px;
margin-bottom: 7px;
font-weight: bold;
}
div:last-of-type{
font-size: 14px;
color: #959595;
}
.task-enter-btn1{
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
}
.page-navigator{
margin-top: 30px;
}
}
.taskhall-right{
float: right;
width: 25%;
.notice{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
.notice-title{
background-color: $theme-color;
color: white;
padding: 10px 0;
}
.notice-body{
background-color: white;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
} }
</style> </style>
...@@ -7,6 +7,7 @@ Mock.mock('/api/getTasks', { ...@@ -7,6 +7,7 @@ Mock.mock('/api/getTasks', {
'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'], 'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
'date': Mock.Random.date('yyyy/MM/dd'), 'date': Mock.Random.date('yyyy/MM/dd'),
'size|20-1000': 1, 'size|20-1000': 1,
'number|1-10':1,
'type|1': ['text', 'image'], 'type|1': ['text', 'image'],
'pieces|5-30': 1 'pieces|5-30': 1
}] }]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment