index.vue 1.44 KB
<template>
  <el-container>
    <el-aside class="left-block" width="140px">
      <div class="list-title">
        页面列表
      </div>
      <div class="page-list">
        <div class="box">
        </div>
        <div class="title">未命名页面</div>
      </div>
      <div class="page-list-add">
        <img :src="addUrl"/>
        <div class="title">添加新页面</div>
      </div>
    </el-aside>
    <el-main>
      <editor/>
    </el-main>
  </el-container>
</template>

<script>
  import addUrl from '../../assets/editor/Group 7.png'
  import editor from './editor'
  export default {
    components:{
      editor
    },
    data(){
      return{
        addUrl:addUrl
      }
    }
  }
</script>

<style scoped lang="less">
  .el-container{
    height: 100%;
    .el-main{
      padding: 10px;
      background: #f5f8ff;
    }
    .left-block{
      box-shadow: 1px 0 2px 0 #CCCCCC;
      font-size: 14px;
      color: #333333;
      text-align: center;
      .list-title{
        padding: 5px;
      }
      .page-list{
        padding: 10px 0;
        .box{
          height: 63px;
          margin: auto;
          width: 112px;
          border: 1px solid #666666;
          border-radius: 9px;
        }
        .title{
          font-size: 12px;
          text-align: center;
        }
        &-add{
          cursor: pointer;
          padding: 10px 0;
          font-size: 12px;
          color: #CCCCCC;
        }
      }
    }
  }
</style>