提交新的UI规范

UI规范.md

@@ -51,13 +51,96 @@ em 与组件库之间的关系
 }
 ```
 
+### 侧边栏 sidebar
+
+### 底边 footer
+
+### 默认的边距(margin/padding)
+
+默认的边距为$spacer，$spacer 为 1rem。mt、py-2 等等为定制的边距。mt-n2 可以为负的 margin。
+
+### 模块间距
+
 一般的 padding 是 1rem。
 column 的 padding 是 15px。但 rem/html_font-size 是 16px，这里做一下改变？
 
+### 行高 line-height
+
+### 段落间距 paragraph margin
+
+### 间距的渐进（亲密性）
+
+导航以颜色来区分。  
+模块以线条分割。
+标题与正文之间间隔 2rem。
+正文的 line-height 为 1.5rem。
+段落之间的分割为 1rem？
+
 ## 颜色
 
+- 标题颜色 #000000
+- 提示颜色 #666666
+- 文字点击状态 #FF8900
+- 文字悬浮颜色
+- 链接颜色
+- 链接悬浮变色
+- 品牌色
+- 正文色
+- 标题色
+- 副标题色
+- 作者、日期等色
+- 背景色
+- 边框色
+- 输入框填充色
+- 阴影色
+- 成功操作颜色
+- 失败操作颜色
+
 ## 字体
 
+### font-family
+
+优先采用系统默认字体。
+
+```s
+  // Safari for OS X and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  "Roboto",
+  // Basic web fallback
+  "Helvetica Neue", Arial, sans-serif,
+```
+
+### font-size
+
+### font-weight
+
+## 图片
+
+### svg
+
+### 应用本身的图片尺寸
+
+顶部导航图标 48
+个人中心指示性图标 32
+
+### 图片与描述的间距
+
+0.5rem？
+
+### 按钮中图片与文字的间距，line-height，font-size
+
+间距 0.5em ？
+图片与文字高度一致
+
+### 按钮中图片的变色
+
+### 透明度
+
+透明度可以用来对比重要和不重要，启用和禁用。
+
 ## 样例
 
 ## Bootstrap 链接
@@ -68,6 +151,16 @@ column 的 padding 是 15px。但 rem/html_font-size 是 16px，这里做一下
 
 ### 颜色
 
+### 表单对齐
+
+### 表格对齐
+
+### 水平居中
+
+### 垂直居中
+
+### 水平和垂直居中
+
 ### Utilities
 
 ### ElementUI

src/modules/basic/view/campus.vue

@@ -213,10 +213,10 @@
           border
           resizable
           stripe
-          style="width: 100%;text-align:center;"
+          style="width: 100%;"
           @selection-change="selectChange"
         >
-          <el-table-column type="selection" width="55" />
+          <el-table-column type="selection" width="35" />
           <el-table-column width="50" label="ID">
             <span slot-scope="scope">{{ scope.row.id }}</span>
           </el-table-column>
@@ -674,10 +674,6 @@ export default {
   margin-top: 10px;
 }
 
-.el-table th > .cell {
-  text-align: center;
-}
-
 .el-upload {
   width: 80px;
 }

src/modules/basic/view/course.vue

@@ -275,11 +275,7 @@
           </el-form>
 
           <!-- 专业列表 -->
-          <el-table
-            :data="specialtyTableData"
-            border
-            style="width: 100%;text-align:center;"
-          >
+          <el-table :data="specialtyTableData" border>
             <el-table-column prop="id" label="ID" width="150" />
             <el-table-column prop="name" label="专业名称" width="250" />
             <el-table-column prop="code" label="专业代码" />
@@ -355,10 +351,9 @@
           border
           resizable
           stripe
-          style="width: 100%;text-align:center;"
           @selection-change="selectChange"
         >
-          <el-table-column type="selection" width="50" />
+          <el-table-column type="selection" width="35" />
           <el-table-column prop="id" label="课程ID" width="80" />
           <el-table-column prop="name" label="课程名称" width="180" />
           <el-table-column prop="code" label="课程代码" />

src/modules/basic/view/exam_site.vue

@@ -137,10 +137,9 @@
           border
           resizable
           stripe
-          style="width: 100%;text-align:center;"
           @selection-change="selectChange"
         >
-          <el-table-column type="selection" width="50" />
+          <el-table-column type="selection" width="35" />
           <el-table-column prop="id" width="80" label="ID" />
           <el-table-column prop="orgName" label="学习中心" />
           <el-table-column prop="code" label="考点代码" />
@@ -445,10 +444,6 @@ export default {
   margin-top: 10px;
 }
 
-.el-table th > .cell {
-  text-align: center;
-}
-
 .el-upload {
   width: 80px;
 }

src/modules/basic/view/privilege_group_list.vue

@@ -2,13 +2,7 @@
   <section class="content">
     <div class="box box-info">
       <div class="box-body">
-        <el-table
-          :data="privilegeGroupList"
-          border
-          resizable
-          stripe
-          style="width: 100%;text-align:center;"
-        >
+        <el-table :data="privilegeGroupList" border resizable stripe>
           <el-table-column prop="id" label="ID" width="100" />
           <el-table-column prop="code" label="权限组编码" />
           <el-table-column prop="name" label="权限组名称" />

src/modules/basic/view/school.vue

@@ -219,10 +219,9 @@
           border
           resizable
           stripe
-          style="width: 100%;text-align:center;"
           @selection-change="selectChange"
         >
-          <el-table-column type="selection" width="50" />
+          <el-table-column type="selection" width="35" />
           <el-table-column prop="id" label="ID" width="60" />
           <el-table-column label="学校名称">
             <template slot-scope="scope">
@@ -262,19 +261,29 @@
           </el-table-column>
           <el-table-column prop="domainName" width="190" label="学校域名" />
           <el-table-column prop="updateTime" width="170" label="更新时间" />
-          <el-table-column width="100" label="状态">
+          <el-table-column width="70" label="状态">
             <span slot-scope="scope">
-              <el-tag :type="getTag(scope.row.enable)">
-                {{ getStatus(scope.row.enable) }}
-              </el-tag>
+              <!-- <el-tag :type="getTag(scope.row.enable)"> -->
+              {{ getStatus(scope.row.enable) }}
+              <!-- </el-tag> -->
             </span>
           </el-table-column>
           <el-table-column :context="_self" width="200" prop="" label="操作">
             <div slot-scope="scope">
-              <el-button size="mini" type="primary" @click="edit(scope.row)">
+              <el-button
+                size="mini"
+                type="primary"
+                plain
+                @click="edit(scope.row)"
+              >
                 <i class="el-icon-edit"></i> 编辑
               </el-button>
-              <el-button size="mini" type="primary" @click="setLogo(scope.row)">
+              <el-button
+                size="mini"
+                type="primary"
+                plain
+                @click="setLogo(scope.row)"
+              >
                 logo上传
               </el-button>
             </div>
@@ -693,10 +702,6 @@ export default {
   margin-top: 10px;
 }
 
-.el-table th > .cell {
-  text-align: center;
-}
-
 .el-upload {
   width: 80px;
 }

src/modules/basic/view/specially.vue

@@ -158,13 +158,7 @@
           </el-form>
 
           <!-- 课程列表 -->
-          <el-table
-            :data="courseTableData"
-            border
-            resizable
-            stripe
-            style="width: 100%;text-align:center;"
-          >
+          <el-table :data="courseTableData" border resizable stripe>
             <el-table-column prop="id" label="ID" width="150" />
             <el-table-column prop="name" label="课程名称" width="250" />
             <el-table-column prop="code" label="课程代码" />
@@ -236,10 +230,9 @@
         <el-table
           :data="tableData"
           border
-          style="width: 100%;text-align:center;"
           @selection-change="handleSelectionChange"
         >
-          <el-table-column type="selection" width="50"> </el-table-column>
+          <el-table-column type="selection" width="35"> </el-table-column>
           <el-table-column prop="id" label="ID" width="60"> </el-table-column>
           <el-table-column prop="code" label="专业代码"> </el-table-column>
           <el-table-column prop="name" label="专业名称"> </el-table-column>

src/modules/basic/view/user.vue

@@ -347,7 +347,7 @@
           style="width: 100%;"
           @selection-change="selectChange"
         >
-          <el-table-column type="selection" width="40" />
+          <el-table-column type="selection" width="35" />
           <el-table-column prop="id" width="80" label="ID" />
           <el-table-column prop="name" width="120" label="姓名" />
           <el-table-column prop="loginName" width="100" label="登录名" />

src/modules/portal/views/home/Home.vue

@@ -250,7 +250,7 @@ body > .el-container {
 }
 
 .main-body {
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 100px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -261,6 +261,7 @@ body > .el-container {
 .main-content {
   min-height: calc(100vh - 60px - 60px - 40px);
   margin-top: 20px;
+  margin-right: 20px;
 }
 
 .footer {

src/styles/elementuiCustomize.css

@@ -0,0 +1,3 @@
+.el-table td {
+  padding: 4px 0;
+}

src/styles/global.css

@@ -1,3 +1,5 @@
+@import "./elementuiCustomize.css";
+
 body {
   margin: 0;
 }