Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
fccf0955 by 杨威
Options

首页样式修改，交互效果完善

1 parent 34915f6f
Inline Side-by-side
Showing 1 changed file with 132 additions and 33 deletions
......@@ -12,7 +12,9 @@
:key="index"
@click="handleSelect"
>
<img :src="item.img" alt="" />
<el-badge :value="item.count" :max="99" class="item">
<img :src="item.img" alt="" />
</el-badge>
<span>{{ item.name }}</span>
</div>
</div>
......@@ -20,6 +22,8 @@
<el-card class="panel_right">
<div slot="header" class="clearfix">
<span>快捷入口</span>
<span class="edit" @click="isEdit = true" v-show="!isEdit">编辑</span>
<span class="edit" @click="isEdit = false" v-show="isEdit">完成</span>
</div>
<div class="enter_box">
<div
......@@ -28,44 +32,50 @@
:key="index"
@click="handleSelect"
>
<img :src="item.img" alt="" />
<div class="psr">
<img :src="item.img" alt="" />
<i class="fa fa-times-circle fa-2x" v-show="isEdit && index!=list.length-1" @click="edit(index)" aria-hidden="true"></i>
</div>
<span>{{ item.name }}</span>
</div>
</div>
</el-card>
</div>
<div class="notice" ref="notice">
<el-card>
<el-card class="news">
<div slot="header" class="clearfix">
<span>通知公告</span>
<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
</div>
<el-table
:data="tableData"
:height="tableHeight"
:row-class-name="tableRowClassName"
>
<el-table-column
type="index"
width="300"
align="center"
label="顺序号"
>
</el-table-column>
<el-table-column prop="title" align="left" label="标题">
<el-table-column prop="title" width="500" align="center" label="标题">
</el-table-column>
<el-table-column
prop="date"
width="500"
align="center"
label="发布时间"
>
</el-table-column>
</el-table>
</el-card>
</div>
<div class="pagination">
<el-pagination background layout="prev, pager, next,total" :total="total">
</el-pagination>
<el-card class="download">
<div slot="header" class="clearfix">
<span>相关下载</span>
<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
</div>
<el-table
:data="tableData"
:height="tableHeight"
:row-class-name="tableRowClassName"
>
<el-table-column prop="title" align="center" label="内容名称">
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</template>
......@@ -75,8 +85,8 @@ export default {
data() {
return {
workList: [
{ name: "待办箱", img: require("../../assets/images/dbx.png") },
{ name: "退件箱", img: require("../../assets/images/tjx.png") },
{ name: "待办箱", img: require("../../assets/images/dbx.png"),count:10 },
{ name: "退件箱", img: require("../../assets/images/tjx.png"),count:3 },
],
list: [
{ name: "宗地分割", img: require("../../assets/images/zdfg.png") },
......@@ -86,21 +96,26 @@ export default {
},
{ name: "新办房屋", img: require("../../assets/images/xbfw.png") },
{ name: "重新落宗", img: require("../../assets/images/cxlz.png") },
{ name: "添加", img: require("../../assets/images/cxlz.png") },
],
tableData: [
],
tableHeight: "",
total:0
tableData: [],
tableHeight: 0,
total: 0,
isEdit:false
};
},
mounted() {
this.$nextTick(()=>{
this.$nextTick(() => {
this.tableHeight = this.$refs.notice.offsetHeight - 53;
})
});
},
methods: {
handleSelect() {},
handleSelect() {
//非编辑状态才可以点击
if (!isEdit) {
}
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
......@@ -108,31 +123,76 @@ export default {
return "";
}
},
//快捷入口管理
edit(index){
this.$confirm('此操作删除该快捷入口, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.list.splice(index,1);
//调用删除接口 TO DO
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
});
}
},
};
</script>
<style rel="stylesheet/less" lang="less">
<style rel="stylesheet/less" scoped lang="less">
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
.clearfix {
span {
color: #6d7278;
float: left;
}
.edit {
color: #9b9b9b;
float: right;
cursor: pointer;
.fa-angle-right{
font-size: 26px;
line-height: 7px;
position: relative;
top: 2px;
}
}
}
.panel {
@flex();
width: 100%;
.panel_left {
width: 45%;
margin-right: @30px;
width: 35%;
margin-right: 20px;
flex: 1;
}
.panel_right {
flex: 1;
width: 65%;
}
.enter_box {
@flex();
div {
cursor: pointer;
flex: 1;
.el-badge{
width: 68px;
height: 68px;
display: block;
margin: 0 auto;
/deep/.el-badge__content{
top: 10px;
right: 14px;
background-color: #fa6400;
}
}
img {
width: 68px;
height: 68px;
......@@ -140,10 +200,32 @@ export default {
margin: 0 auto;
}
span {
color: #6d7278;
display: block;
text-align: center;
margin-top: 10px;
}
.fa-times-circle {
color: #fa6400;
font-size: 24px;
position: absolute;
top: -4px;
right: -10px;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 1px;
}
}
.psr {
width: 68px;
height: 68px;
display: block;
margin: 0 auto;
img {
width: 68px;
height: 68px;
}
}
}
.el-card__body {
......@@ -151,16 +233,33 @@ export default {
}
}
.notice {
flex: auto;
padding: 0;
box-sizing: border-box;
height: calc(100% - 225px);
@flex();
.news {
float: left;
float: left;
margin-right: 20px;
flex: 1;
/deep/ .el-card__body{
padding: 0;
}
}
.download {
width: 50%;
/deep/ .el-card__body{
padding: 0;
}
}
.el-card__body {
padding: 0;
}
th.is-left {
text-align: center;
}
tr{
background-color: #FBFBFB;
}
}
.pagination {
padding: 18px;
......