存档-vue

main.css

#main{
    /*固定位置*/
    position: fixed;
    background-color: #f7f7f8;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 60%;
    width: 70%;
    margin-top: -15px;
    border-style: none;
}

第一部分组件

first-box.vue

<template>
  <div id="first_box">
    <hr>
    <div id="input_part">
      <input id="input" type="text">
    </div>
    <div id="search_button">
      <button id="button">查找</button>
    </div>
    <div id="add_button">
      <button id="add">＋新建角色</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "first-box"
}
</script>

<style scoped>
@import "../assets/first-box.css";
</style>

first-box.css

hr{
    border-collapse: collapse;
    /*设置边框 宽度 存在 颜色*/
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
#first_box {
    /*居左*/
    float: left;
    /*离左边20px   padding和margin分不清直接试一试*/
    padding-left: 20px;
    /*元素不换行*/
    display: inline-block;
    width: 100%;
    height: 15%;
    /*无边框*/
    border-style: none;
}

#input_part {
    float: left;
    margin-left: 20px;
    display: inline-block;
    height: 100%;
}
#input{
    float: left;
    width: 100px;
    border: 1px solid lightgray;
    /*border-right-color: #409eff;*/
    /*设置边框圆角*/
    border-radius: 3px 0 0 3px;
    height: 40%;

}

#search_button {
    float: left;
    display: inline-block;
    height: 100%;

}
#button{
    height: 20px;
    border: 1px;
    border-radius: 0  3px  3px 0;
    background-color: #409eff;
    color: white;
    /*设置字体大小 有最小字号限制*/
    font-size: 12px;
    height: 46%;

}
#add_button{
    float: right;
    margin-right: 50px;
    display: inline-block;
    height: 100%;

}
#add{
    height: 20px;
    border: 1px;
    border-radius: 3px  3px  3px 3px;
    background-color: #409eff;
    color: white;
    font-size: 12px;
    height: 46%;

}

第二部分组件

second-box.vue

<template>
  <div id="second_box">
    <table id="user_table">
      <tr id="title_tr">
        <td>序号</td>
        <td>角色名称</td>
        <td>角色权限等级</td>
        <td>角色描述</td>
        <td>操作</td>
      </tr>
      <tr v-for="n in 4" :key="n">
        <td>{{ number[n - 1] }}</td>
        <td>{{ name[n - 1] }}</td>
        <div v-if="n===1">
          <td class="buttons">
              <button id="level_1">{{ level[n - 1] }}</button>
          </td>
        </div>
        <div v-if="n===2">
          <td class="buttons">
              <button id="level_2">{{ level[n - 1] }}</button>
          </td>
        </div>
        <div v-if="n===3">
          <td class="buttons">
              <button id="level_3">{{ level[n - 1] }}</button>
          </td>
        </div>
        <div v-if="n===4">
          <td class="buttons">
              <button id="level_4">{{ level[n - 1] }}</button>
          </td>
        </div>
        <td>{{ describe[n - 1] }}</td>
        <td>
          <button id="bj">编辑</button>
          <button id="sc">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "second-box",
  data() {
    return {
      number: ['1', '2', '3', '4'],
      name: ['管理人员', '部门主管', '普通员工', '实习员工'],
      level: ['四级', '三级', '二级', '一级'],
      describe: ['系统管理人员，拥有系统最高权限，可对系统所有功能(绿色，蓝色，黄色，红色按钮)进行操作', '拥有系统大部分功能(绿色，蓝色，黄色按钮)的操作权限，管理本部门所负责的业务', '拥有系统部分功能(绿色，蓝色按钮)的操作权限，负责处理本部门业务', '仅拥有查询预览数据(绿色按钮)的权限'],
    }
  }
}
</script>

<style scoped>
@import "../assets/second-box.css";
</style>

second-box.css

tr, td {
    /*合并边框*/
    border-collapse: collapse;
    border: 1px solid lightgray;
}

tr {
    height: 35px;
}

#user_table {
    padding-top: 200px;
    border: 1px solid lightgray;
    border-collapse: collapse;
    width: 100%;
}

#second_box {
    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    display: inline-block;
    border-style: none;
}

#title_tr {
    background-color: #f9fafb;
    border: 1px solid lightgray;
}

#bj {
    background-color: #fbbd08;
    color: white;
    border: none;
    border-radius: 3px 3px 3px 3px;
    margin-left: 10px;
    margin-right: 10px;
    height: 28px;
}

#sc {
    background-color: #db2828;
    color: white;
    border: none;
    border-radius: 3px 3px 3px 3px;
    margin-left: 10px;
    margin-right: 10px;
    height: 28px;
}

.buttons {
    border: white;
    /*内容居中*/
    text-align: center;
    width: 100%;
    margin:auto;
    display:block;
}

#level_1 {
    background-color: #f9a493;
    color: #db2828;
    margin-top: 5px;
    width: 50px;
    height: 25px;
    border: none;
    border-radius: 3px;
    text-align: center;

}

#level_2 {
    background-color: #fdf6ec;
    color: #e4a13d;
    margin-top: 5px;
    width: 50px;
    height: 25px;
    border: none;
    border-radius: 3px;
}

#level_3 {
    background-color: #ecf5ff;
    color: #b4d9ff;
    margin-top: 5px;
    width: 50px;
    height: 25px;
    border: none;
    border-radius: 3px;
}

#level_4 {
    background-color: #f0f9eb;
    color: #a1da98;
    margin-top: 5px;
    width: 50px;
    height: 25px;
    border: none;
    border-radius: 3px;
}

第三部分组件

third-box.vue

<template>
  <div id="third_box">
    <div id="sum_part">共4条</div>
    <select id="select_part">
      <option value="">
        10条/页
      </option>
    </select>
    <div id="page_part">
      <div id="turn_page"><label class="icons"> ＜ </label> &nbsp;1&nbsp;<label class="icons"> ＞ </label></div>
      <div id="goto">前往<input id="page_input" value="1">页</div>
    </div>
  </div>

</template>

<script>
export default {
  name: "third-box"
}
</script>

<style scoped>
@import "../assets/third-box.css";
</style>

third-box.css

#third_box {
    float: left;
    display: inline-block;
}

#sum_part {
    margin-top: 5px;
    padding-left: 20px;
    display: inline-block;
}

#select_part {
    margin-left: 30px;
    display: inline-block;
}

#page_part {
    margin-left: 50px;
    display: inline-block;
}

#turn_page {
    display: inline-block;
    color: #409eff;
}

.icons {
    color: #7b7878;
    font-size: 12px
}

#goto {
    margin-left: 50px;
    display: inline-block;
}

#page_input {
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}