Selaa lähdekoodia

图片上传框显示

duy 2 viikkoa sitten
vanhempi
commit
c14074f751
1 muutettua tiedostoa jossa 15 lisäystä ja 2 poistoa
  1. 15 2
      src/components/plugins/table-form/hc-form-upload.vue

+ 15 - 2
src/components/plugins/table-form/hc-form-upload.vue

@@ -10,7 +10,7 @@
         element-loading-text="上传中..." @exceed="formUploadExceed" @success="formUploadSuccess"
     >
         <img v-if="isSrc" :src="isSrc" alt="" class="hc-table-form-img">
-        <div v-else class="hc-table-form-icon mt-50%">
+        <div v-else class="hc-table-form-icon">
             点此选择文件并上传
         </div>
         <div v-if="isSrc" class="hc-table-form-del">
@@ -108,8 +108,13 @@ const handleBlur = () => {
 
 <style lang="scss" scoped>
 .hc-upload-table-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* 纵向居中 */
+    // align-items: center;    /* 横向居中,如果需要的话 */
+    height: 100%;           /* 确保容器有高度 */
     border-radius: 3px;
-    transition: box-shadow 0.3s, background-color 0.3s;
+
     &.is-focus, &:hover {
         background-color: #eddac4;
         box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
@@ -122,6 +127,13 @@ const handleBlur = () => {
     }
 
 }
+.hc-table-form-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;           /* 如果需要的话,确保宽度填满容器 */
+    height: 100%;          /* 如果需要的话,确保高度填满容器 */
+}
 </style>
 
 <style lang="scss">
@@ -139,6 +151,7 @@ const handleBlur = () => {
 
         padding: 10px;
         text-align: left;
+        border:none;