文档服务地址: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: '待审核'
}]
} }
}, },
methods: { mounted () {
checkdetail () { this.axios.get('/getTasks').then(res => {
this.$router.push('/').catch(data => { 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;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
} }
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} }
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
} }
.tasklist-container{
body > .el-container { .tasklist{
margin-bottom: 40px; .task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
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;
}
} }
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} }
.el-container:nth-child(7) .el-aside {
line-height: 320px;
} }
</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;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
} }
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} }
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
} }
.tasklist-container{
body > .el-container { .tasklist{
margin-bottom: 40px; .task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
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;
}
} }
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} }
.el-container:nth-child(7) .el-aside {
line-height: 320px;
} }
</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;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
} }
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} }
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
} }
.tasklist-container{
body > .el-container { .tasklist{
margin-bottom: 40px; .task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
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;
}
} }
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} }
.el-container:nth-child(7) .el-aside {
line-height: 320px;
} }
</style> </style>
<template> <template>
<div class="taskhall"> <div class="taskhall-container">
<el-container> <el-container>
<el-aside width="300px"> <el-aside width="300px">
...@@ -57,6 +57,16 @@ ...@@ -57,6 +57,16 @@
</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;
...@@ -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;
......
<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;
background-color: $bg-color;
.taskhall-left{
background-color: white;
padding: 30px 20px 30px 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.filter-container{
.filter-item{
display: flex;
align-items: center;
margin-bottom: 15px;
.filter-input{
margin-left: 20px;
width: 300px;
} }
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} }
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 36px;
} }
.tasklist-container{
body > .el-container { .tasklist{
margin-bottom: 40px; .task-item{
border-bottom: 1px solid $divider-color;
text-align: left;
padding: 10px 0px 22px;
position: relative;
div:first-of-type{
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;
}
} }
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} }
.el-container:nth-child(7) .el-aside {
line-height: 320px;
} }
</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