Selaa lähdekoodia

弹窗样式修改

haojianlong 4 vuotta sitten
vanhempi
commit
8991c658c6

+ 22 - 2
src/components/homeView/deleteDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="删除" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="删除" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="deleteDialog">
     <p>确认删除吗?</p>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -61,4 +61,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.deleteDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 23 - 3
src/components/homeView/move.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog title="移动到" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="移动到" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="moveDialog">
     <div>
-      <el-cascader v-model="value" :options="treeData" :props="defaultProps"></el-cascader>
+      <el-cascader v-model="value" :options="treeData" :props="defaultProps" size="small" style="width: 100%"></el-cascader>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -85,4 +85,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.moveDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 23 - 3
src/components/homeView/rename.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="renameDialog">
     <div>
-      <el-input v-model="input" placeholder="请输入名称"></el-input>
+      <el-input v-model="input" placeholder="请输入名称" size="small"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -68,4 +68,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.renameDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 46 - 7
src/components/homeView/tagDialog.vue

@@ -60,7 +60,7 @@ export default {
       this.inputValue = '';
     },
     // 确认修改
-    confirm() { 
+    confirm() {
       const pa = {
         content: [{
           id: this.data.id,
@@ -93,18 +93,57 @@ export default {
   /deep/ .el-dialog__header {
     border-bottom: 1px solid #f0f1f2ff;
   }
-  .el-tag {
-    margin: 0 10px 10px 0;
-  }
   /deep/ .el-dialog__body {
     max-height: 192px;
     overflow: auto;
+    padding: 20px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+  .el-tag {
+    background: #eff0f1;
+    border-radius: 2px;
+    color: #1f2429ff;
+    margin: 0 10px 10px 0;
+    padding: 5px 6px 5px 8px;
+    font-size: 14px;
+    height: 24px;
+    line-height: 1;
+    border: none;
+    &:hover {
+      border: none;
+    }
+    .el-icon-close {
+      color: #9ca2a9ff;
+      right: 0;
+      &:hover {
+        color: #fff;
+        background-color: #ccc;
+      }
+    }
   }
   .button-new-tag {
-    height: 32px;
+    height: 24px;
     line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-bottom: 8px;
+    padding: 0 8px;
+    line-height: 1;
+    border-radius: 2px;
+    border: 1px dotted #0091ff;
+    color: #0091ff;
+    &:hover {
+      background: #fff;
+      color: #0091ff;
+      border: 1px dotted #0091ff;
+    }
   }
   .input-new-tag {
     width: 90px;

+ 1 - 1
src/components/homeView/topoImageCard.vue

@@ -2,7 +2,7 @@
 <template>
   <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }">
     <div class="image" v-if="!data.pic" style="line-height: 120px;text-align: center;">
-      <img :src="require('@/assets/images/noImg.png')" style="height:96px;">
+      <img :src="require('@/assets/images/noImg.png')" style="height:60px;">
     </div>
     <img class="image" v-else :src="`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`">
     <div class="shadow image" v-if="!isRecycle" @click="toEdit">