Kaynağa Gözat

fix: 更新课程卡片的按钮为文字按钮
修改UI规则文档

mjh 3 yıl önce
ebeveyn
işleme
581e3cc82b
2 değiştirilmiş dosya ile 13 ekleme ve 7 silme
  1. 6 1
      UI规则.md
  2. 7 6
      src/components/CourseCard.vue

+ 6 - 1
UI规则.md

@@ -28,8 +28,13 @@
 
 <font color="#3a85bb">海蓝色:#fcfdfe</font>
 
+### 2.2 组件库颜色
+
+[Element Plus Color](https://element-plus.gitee.io/zh-CN/component/color.html)
+
 ## 3 按钮
 
 ### 3.1 样式
 
-1. ElementPlus组件库最基本样式,不做其他改动。
+1. ElementPlus组件库最基本样式,不做其他改动。
+2. 在表格或者是重复出现的卡片组件当中,使用文字按钮,中间使用|进行分割。

+ 7 - 6
src/components/CourseCard.vue

@@ -29,8 +29,9 @@
     </el-row>
     <el-row v-if="isManagePage">
       <div class="button">
-        <el-button type="primary" size="small" @click.stop="$emit('update')">修改</el-button>
-        <el-button type="danger" size="small" @click.stop="$emit('delete')">删除</el-button>
+        <el-button type="text" @click.stop="$emit('update')">修改</el-button>
+        <el-divider direction="vertical"/>
+        <el-button type="text" @click.stop="$emit('delete')">删除</el-button>
       </div>
     </el-row>
   </el-card>
@@ -173,9 +174,9 @@ export default {
 }
 
 .button {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
+  margin: 10px auto auto;
+  /*display: flex;*/
+  /*justify-content: space-around;*/
+  /*width: 100%;*/
 }
 </style>