123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <template>
- <div id="drafts">
- <div class="tit">草稿箱</div>
- <div class="conent">
- <div class="left-nav">
- <Tree :data="treeData" @change="change"></Tree>
- </div>
- <div class="conent-right">
- <div class="conent-tit">
- <div class="tit-left">消防系统-4F</div>
- <div class="tit-right">
- <a-button>发布</a-button>
- <a-button type="primary">编辑</a-button>
- </div>
- </div>
- <div class="map"></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- const dataArr = [
- {
- id: "0",
- name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
- open: false,
- checked: "uncheck",
- children: [
- {
- id: "1",
- name: "一级1",
- open: false,
- checked: "uncheck",
- children: [
- { id: "12", name: "二级2", checked: "uncheck" },
- { id: "121", name: "二级3", checked: "uncheck" },
- { id: "122", name: "二级4", checked: "uncheck" },
- {
- id: "1321",
- name: "二级1",
- open: false,
- checked: "uncheck",
- children: [
- { id: "13", name: "三级2", checked: "uncheck" },
- { id: "131", name: "三级3", checked: "uncheck" },
- { id: "132", name: "三级4", checked: "uncheck" }
- ]
- }
- ]
- },
- {
- id: "2",
- name: "一级2",
- open: false,
- checked: "uncheck",
- children: [
- { id: "222", name: "二级2", checked: "uncheck" },
- { id: "2221", name: "二级1", checked: "uncheck" },
- { id: "2222", name: "二级3", checked: "uncheck" }
- ]
- },
- {
- id: "3",
- name: "一级3",
- open: false,
- checked: "uncheck",
- children: [
- { id: "322", name: "二级2", checked: "uncheck" },
- { id: "3220", name: "二级0", checked: "uncheck" },
- { id: "3221", name: "二级1", checked: "uncheck" }
- ]
- }
- ]
- }
- ];
- import Tree from "./../components/Tree/Tree.vue";
- export default {
- components: { Tree },
- data() {
- return {
- treeData:JSON.parse(JSON.stringify(dataArr))
- };
- },
- methods: {
- change() {}
- }
- };
- </script>
- <style lang="less" scoped>
- #drafts {
- widows: 100%;
- height: 100%;
- background: #f7f9fa;
- position: relative;
- .tit {
- width: 100%;
- height: 48px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-bottom: #e4e5e7 solid 1px;
- font-size: 16px;
- font-weight: bold;
- }
- .conent {
- width: 100%;
- height: calc(100% - 48px);
- display: flex;
- position: relative;
- .left-nav {
- width: 224px;
- height: 100%;
- }
- .conent-right {
- flex: 1;
- height: 100%;
- background: #fff;
- .conent-tit {
- width: 100%;
- display: flex;
- height: 59px;
- border: 1px solid #eff0f1;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px 0 16px;
- box-sizing: border-box;
- .tit-left {
- font-size: 16px;
- font-weight: bold;
- color: rgba(31, 35, 41, 1);
- }
- .tit-right {
- width: 146px;
- display: flex;
- justify-content: space-between;
- }
- }
- .map {
- width: 100%;
- height: calc(100% - 61px);
- background: red;
- }
- }
- }
- }
- </style>
|