Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
9dac694e by 杨威
Options

首页布局修改

1 parent 0e9a5c1d
Inline Side-by-side
Showing 6 changed files with 206 additions and 136 deletions
.content_box {
padding: 18px 18px 26px 18px;
padding: 18px;
box-sizing: border-box;
}
.el-table .success-row {
......
......@@ -106,4 +106,7 @@ export default {
display: none;
}
}
.el-tabs__nav .is-active{
background-color: #F1F4FC;
}
</style>
......
......@@ -13,72 +13,9 @@
<div class="treeModule">
<LineTree :pd="pd"></LineTree>
</div>
<el-menu
:default-active="defaultActive"
:unique-opened="true"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isActive"
background-color="#121958"
text-color="#fff"
active-text-color="#21FAFD"
:collapse-transition="false"
:router="true"
>
<template v-for="item in menuList">
<el-submenu
:index="item.code"
:key="item.code"
v-if="item.children && item.children.length > 0"
>
<template slot="title">
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{ item.name }}</span>
</template>
<template v-for="seconditem in item.children">
<el-menu-item
:index="seconditem.code"
:key="seconditem.code"
v-if="!seconditem.children"
:route="{ path: seconditem.path }"
>
{{ seconditem.name }}
</el-menu-item>
</template>
<template v-for="seconditem in item.children">
<el-submenu
:index="seconditem.code"
:key="seconditem.code"
v-if="seconditem.children"
>
<span slot="title" style="padding-left:15px;">{{
seconditem.name
}}</span>
<el-menu-item
v-for="threeitem in seconditem.children"
:index="threeitem.code"
:key="threeitem.code"
:route="{ path: threeitem.path }"
>{{ threeitem.name }}</el-menu-item
>
</el-submenu>
</template>
</el-submenu>
<el-menu-item
:index="item.code"
:key="item.code"
v-else
:route="{ path: item.path }"
>
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-header height="120px">
<el-header height="100px">
<div class="header-top">
<div class="top-items" @click="toggleClick">
<i class="fa fa-outdent hamburger" v-show="!isActive"></i>
......@@ -157,61 +94,62 @@ export default {
},
pd: [
{
label: "第一层(1)",
label: "行政区(1)",
children: [],
},
{
label: "第一层(2)",
label: "行政区(2)",
children: [
{
label: "第二层(1)",
label: "地籍区1",
children: [],
},
{
label: "第二层(2)",
label: "地籍区2",
children: [
{
label: "第三层(1)",
label: "国有",
children: [
{
label: "第四层",
label: "宗地代码1933",
children: [
{
label: "自然幢号1256",
},
],
},
{
label: "宗地代码2100",
children: [
{
label: "第五层",
children: [{ label: "第六层", }],
label: "自然幢号1543",
},
],
},
],
},
{
label: "第三层(2)",
},
{
label: "第三层(3)",
},
}
],
},
{
label: "第二层(3)",
label: "地籍区3",
children: [],
},
{
label: "第二层(4)",
label: "地籍区4",
children: [],
},
],
},
{
label: "第一层(3)",
label: "行政区(3)",
children: [],
},
{
label: "第一层(4)",
label: "行政区(4)",
children: [],
},
{
label: "第一层(5)",
label: "行政区(5)",
children: [],
},
],
......@@ -402,7 +340,7 @@ export default {
}
.treeModule {
box-sizing: border-box;
padding: 20px 10px;
padding: 20px 20px;
}
.logo-box-show {
width: 64px;
......@@ -420,7 +358,7 @@ export default {
}
.el-main {
background-color: #ffffff;
background-color: #F1F4FC;
color: #333;
// text-align: center;
// line-height: 160px;
......
<template>
<div class="panel content_box">
<el-card class="panel_left">
<div slot="header" class="clearfix">
<span>工作箱</span>
</div>
<div>
工作箱内容
</div>
</el-card>
<el-card class="panel_right">
<div slot="header" class="clearfix">
<span>快捷入口</span>
</div>
<div class="enter_box">
<div class="box" v-for="(item, index) in list" :key="index" @click="handleSelect">{{ item }}</div>
</div>
</el-card>
</div>
<div class="main">
<div class="panel content_box">
<el-card class="panel_left">
<div slot="header" class="clearfix">
<span>工作箱</span>
</div>
<div class="enter_box">
<div
class="box"
v-for="(item, index) in workList"
:key="index"
@click="handleSelect"
>
<img :src="item.img" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
</el-card>
<el-card class="panel_right">
<div slot="header" class="clearfix">
<span>快捷入口</span>
</div>
<div class="enter_box">
<div
class="box"
v-for="(item, index) in list"
:key="index"
@click="handleSelect"
>
<img :src="item.img" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
</el-card>
</div>
<div class="notice">
<el-card>
<div slot="header" class="clearfix">
<span>通知公告</span>
</div>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column
type="index"
width="200"
align="center"
label="顺序号"
>
</el-table-column>
<el-table-column prop="title" align="left" label="标题">
</el-table-column>
<el-table-column
prop="date"
width="500"
align="center"
label="发布时间"
>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ["创建文章", "创建公告", "预约统计"],
};
},
methods: {
handleSelect() {},
}
data() {
return {
workList: [
{ name: "待办箱", img: require("../../assets/images/temp1.png") },
{ name: "退件箱", img: require("../../assets/images/temp2.png") },
],
list: [
{ name: "宗地分割", img: require("../../assets/images/temp1.png") },
{
name: "导入楼盘表模板",
img: require("../../assets/images/temp2.png"),
},
{ name: "新办房屋", img: require("../../assets/images/temp1.png") },
{ name: "重新落宗", img: require("../../assets/images/temp2.png") },
],
tableData: [
{
date: "2016-05-02 08:23",
title: "国家能源局关于2019年风电、光伏发电项目建设有关事项的通知",
},
{
date: "2016-05-04 08:23",
title: "珠江委部署珠江水利改革发展“十四五”规划思路报告编制工作",
},
{
date: "2016-05-01 08:23",
title:
"全国海洋生态环境保护工作会议召开生态环境部公布国家地表水考核断面水质排名",
},
{
date: "2016-05-03 08:23",
title: "自然资源部四单位党组织开展联学联建活动",
},
{
date: "2016-05-03 08:23",
title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动",
},
{
date: "2016-05-03 08:23",
title: "生态环境部召开各流域海域生态环境监督管理局座谈会",
},
{
date: "2016-05-03 08:23",
title:
"生态环境部审议并原则通过《地级及以上城市国家地表水考核断面水环境质量排名方案》",
},
],
};
},
methods: {
handleSelect() {},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
},
};
</script>
<style rel="stylesheet/less" lang="less">
.panel {
@flex();
width:100%;
.panel_left {
width: 30%;
margin-right: @30px;
}
.panel_right {
width: 50%;
.enter_box{
@flex();
div{
width: 100px;
height: 100px;
@flex-center();
background-color: @tablebg;
margin-left:@30px;
cursor: pointer;
}
}
}
.main {
display: flex;
flex-direction: column;
height: 100%;
.panel {
@flex();
width: 100%;
.panel_left {
width: 45%;
margin-right: @30px;
flex: 1;
}
.panel_right {
flex: 1;
}
.enter_box {
@flex();
div {
flex: 1;
img {
width: 68px;
height: 68px;
display: block;
margin: 0 auto;
}
span {
display: block;
text-align: center;
margin-top: 10px;
}
}
}
.el-card__body {
padding: 40px;
}
}
.notice {
flex: 1;
padding: 0 18px 26px 18px;
box-sizing: border-box;
.el-table .even-row {
background: #f7f9fb;
}
.el-table th {
background-color: #f3f5fa;
}
.el-card__body {
padding: 0;
}
th.is-left {
text-align: center;
}
}
}
</style>
\ No newline at end of file
</style>
......