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