Merge pull request #46 from wangzmgit/web

处理用户管理封面图溢出问题
wangzmgit · Jul 25, 2024 · 47825dc · 47825dc
2 parents 4105499 + 9c47658
commit 47825dc
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/web/admin-client/src/views/system/user/components/table-action-modal.vue b/web/admin-client/src/views/system/user/components/table-action-modal.vue
@@ -8,7 +8,7 @@
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="24" label="背景图" path="spaceCover">
           <div class="space-cover">
-            <img v-if="formModel.spaceCover" :src="getResourceUrl(formModel.spaceCover)" alt="背景图" />
+            <n-image class="image" v-if="formModel.spaceCover" :src="getResourceUrl(formModel.spaceCover)" />
           </div>
           <n-button class="remove-btn" @click="removeSpaceCover">移除背景图</n-button>
         </n-form-item-grid-item>
@@ -33,11 +33,11 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import type { FormInst, FormRules } from 'naive-ui';
+import { editUserInfoAPI } from '@/api/user';
 import { statusCode } from '@/utils/status-code';
 import { getResourceUrl } from "@/utils/resource";
 import CommonAvatar from "@/components/common-avatar/index.vue";
-import { NGrid, NButton, NSpace, NModal, NForm, NFormItemGridItem, NInput, useMessage } from 'naive-ui';
-import { editUserInfoAPI } from '@/api/user';
+import { NGrid, NButton, NSpace, NModal, NForm, NFormItemGridItem, NInput, NImage, useMessage } from 'naive-ui';
 
 const emit = defineEmits(['update:visible', 'refresh']);
 const props = withDefaults(defineProps<{
@@ -122,6 +122,11 @@ watch(() => props.visible, (newVal) => {
   width: 160px;
   height: 32px;
   background-color: #cccccc;
+
+  .image {
+    width: 160px;
+    height: 32px;
+  }
 }
 
 .remove-btn {