课程已选课程样式

src/components/lesson/dialog.vue

@@ -23,13 +23,15 @@
             <i class="el-icon-plus"></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="课程类型">
-          <el-select v-model="form.type" placeholder="请选择课程类型" @change="selectedLesson = [],selectedLessonList = []">
-            <el-option label="月课" :value="0"></el-option>
-            <el-option label="日课" :value="1"></el-option>
-          </el-select>
-        </el-form-item>
         <el-row>
+          <el-col :span="10">
+            <el-form-item label="课程类型">
+              <el-select v-model="form.type" placeholder="请选择课程类型" @change="selectedLesson = [],selectedLessonList = []">
+                <el-option label="月课" :value="0"></el-option>
+                <el-option label="日课" :value="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
           <el-col :span="10">
             <el-form-item label="选择课程">
               <el-cascader
@@ -42,19 +44,30 @@
                 :props="{label: 'name',value:'id',children:'children'}"
               ></el-cascader>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
             <el-form-item label="已选课程">
               <div class="selected-block" v-for="(data, index) in selectedLessonList" :key="index">
                 <el-card shadow="always">
-                  {{data.name}}
-                  <el-button type="danger" icon="el-icon-close" @click="delLesson(data)" circle size="mini" style="float: right;padding: 3px"></el-button>
+                  <div class="name">{{index+1}}.{{data.name}}</div>
                   <div class="move">
-                    <el-button type="text" class="button" v-if="index !== 0" @click="moveItem(index-1,index)">上移</el-button>
-                    <el-button type="text" class="button" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)">下移</el-button>
+                    <img class="directionIcon" :src="upSrc" v-if="index !== 0" @click="moveItem(index-1,index)"/>
+                    <img class="directionIcon" :src="downSrc" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)"/>
+                    <i class="el-icon-delete grey" @click="delLesson(data)"></i>
+                    <!--<el-button type="info" icon="el-icon-sort-up" v-if="index !== 0" @click="moveItem(index-1,index)" round size="mini"></el-button>-->
+                    <!--<el-button type="info" icon="el-icon-sort-down" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)" round size="mini"></el-button>-->
+                    <!--<el-button type="text" class="button" v-if="index !== 0" @click="moveItem(index-1,index)">上移</el-button>-->
+                    <!--<el-button type="text" class="button" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)">下移</el-button>-->
+                    <!--<el-button type="danger" icon="el-icon-close" @click="delLesson(data)" circle size="mini"></el-button>-->
                   </div>
                 </el-card>
               </div>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="10">
             <el-form-item label="选择盒子">
               <el-cascader
@@ -67,14 +80,19 @@
                 :props="{label: 'name',value:'id',children:'children'}"
               ></el-cascader>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
             <el-form-item label="已选盒子">
               <div class="selected-block" v-for="(data,index) in selectedBoxList" :key="data.id">
                 <el-card shadow="always">
-                  {{data.name}}
-                  <el-button type="danger" icon="el-icon-close" @click="delBox(data)" circle size="mini" style="float: right;padding: 3px"></el-button>
+                  <div class="name">{{data.name}}</div>
                   <div class="move">
-                    <el-button type="text" class="button" v-if="index !== 0" @click="moveBox(index-1, index)">上移</el-button>
-                    <el-button type="text" class="button" v-if="index !== selectedBoxList.length - 1" @click="moveBox(index, index+1)">下移</el-button>
+                    <img class="directionIcon" :src="upSrc" v-if="index !== 0" @click="moveBox(index-1, index)">
+                    <img class="directionIcon" :src="downSrc" v-if="index !== selectedBoxList.length - 1" @click="moveBox(index, index+1)">
+                    <i class="el-icon-delete grey" @click="delBox(data)"></i>
+                    <!--<el-button type="danger" icon="el-icon-close" @click="delBox(data)" circle size="mini" style="float: right;padding: 3px"></el-button>-->
                   </div>
                 </el-card>
               </div>
@@ -93,6 +111,8 @@
 
 <script>
   import {getCategoryApi,getBoxTypeListApi,addLessonApi,getLessonDetailApi,editLessonApi,uploadFileApi} from "../../service/api";
+  import downSrc from "../../assets/down.png"
+  import upSrc from "../../assets/up.png"
   export default {
     name: "dialogObj",
     props:[
@@ -111,6 +131,8 @@
         imageList:[],
         loading:false,
         uploadShow:true,
+        downSrc: downSrc,
+        upSrc: upSrc,
         form:{
           title:'',
           type:0,
@@ -384,21 +406,37 @@
     text-align: center;
   }
   .selected-block{
+    width: 46%;
+    white-space: nowrap;
     height: auto;
     padding: 5px;
     margin: 0;
     text-align: left;
+    float: left;
   }
   .move {
     display: flex;
     flex-flow: row;
     justify-content: flex-end;
     align-items: center;
+    margin: 3px;
+  }
+  .name {
+    line-height: 20px;
+  }
+  .directionIcon {
+    width: 16px !important;
+  }
+  .grey {
+    color: #666;
   }
 </style>
 <style>
   .disabled .el-upload--picture-card {
     display: none !important;
   }
+  .el-card__body {
+    padding: 3px 10px;
+  }
 </style>