分屏不缩放图片，提示建议分辨率

src/components/UploadFile/src/UploadImg.vue

@@ -265,7 +265,7 @@ const uploadError = () => {
 
   .el-upload__tip {
     line-height: 18px;
-    text-align: center;
+    text-align: left;
   }
 }
 </style>

src/views/Banner/BannerForm.vue

@@ -1,18 +1,24 @@
 <template>
   <Dialog v-model="dialogVisible" :title="title">
-    <el-form
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      label-width="80px"
-    >
       <el-form-item label="名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" clearable/>
+        <el-input v-model="formData.name" placeholder="请输入名称" clearable />
       </el-form-item>
       <template v-for="item in formShowItem" :key="item.prop">
-        <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules" v-if="!item.hide || item.show">
+        <el-form-item
+          :label="item.label"
+          :prop="item.prop"
+          :rules="item.rules"
+          v-if="!item.hide || item.show"
+        >
           <div v-if="item.prop === 'barrage'" class="barrage">
-            <el-input v-model="formData[item.prop]" placeholder="请输入" type="textarea"  clearable :rows="5"/>
+            <el-input
+              v-model="formData[item.prop]"
+              placeholder="请输入"
+              type="textarea"
+              clearable
+              :rows="5"
+            />
             <el-button v-loading="AILoading" type="text" @click="getAIContent">AI生成</el-button>
           </div>
           <el-select v-model="formData[item.prop]" v-else-if="item.type === 'select'">
@@ -28,8 +34,16 @@
             v-model="formData[item.prop]"
             :limit="item.limit || 1"
             :fileSize="item.size || 20"
+          >
+            <template #tip>
+              {{ item.tip }}
+            </template>
+          </UploadImgs>
+          <el-input
+            v-else
+            v-model="formData[item.prop]"
+            :placeholder="item.placeholder || '请输入'"
           />
-          <el-input v-else v-model="formData[item.prop]" :placeholder="item.placeholder || '请输入'" />
         </el-form-item>
       </template>
     </el-form>
@@ -42,7 +56,7 @@
 <script lang="ts" setup>
 import * as BannerApi from '@/api/banner'
 
-defineOptions({name: 'BannerForm'})
+defineOptions({ name: 'BannerForm' })
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
 const AILoading = ref(false) // AI生成弹幕
@@ -60,18 +74,18 @@ const formData = ref({
   twoScreen: undefined,
   threeScreen: undefined,
   fourScreen: undefined,
-  category: undefined,
+  category: undefined
 })
 const formRef = ref() // 表单 Ref
 const birthdayCategory = [
-  {label: '海报', value: 1},
+  { label: '海报', value: 1 },
-  {label: '模板', value: 2}
+  { label: '模板', value: 2 }
 ]
 const dataCategory = [
-  {label: '全屏', value: 1},
+  { label: '全屏', value: 1 },
-  {label: '二分屏', value: 2},
+  { label: '二分屏', value: 2 },
-  {label: '三分屏', value: 3},
+  { label: '三分屏', value: 3 },
-  {label: '四分屏', value: 4}
+  { label: '四分屏', value: 4 }
 ]
 const typeTextData = {
   1: '欢迎页',
@@ -79,60 +93,98 @@ const typeTextData = {
   3: '生日祝福',
   4: '数据展示'
 }
-const formItemList = computed(()=>{
+const formItemList = computed(() => {
   return {
     1: [
       {
         label: '欢迎标题',
         prop: 'title',
-        rules: {required: true, trigger: 'blur', message: '请填写欢迎标题'}
+        rules: { required: true, trigger: 'blur', message: '请填写欢迎标题' }
       },
       {
         label: '欢迎内容',
         prop: 'content',
-        rules: {required: true, trigger: 'blur', message: '请填写欢迎内容'}
+        rules: { required: true, trigger: 'blur', message: '请填写欢迎内容' }
       },
-      {label: '背景图片', prop: 'backgroundImages', type: 'image'}
+      { label: '背景图片', prop: 'backgroundImages', type: 'image' }
     ],
-    2: [{label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4}],
+    2: [{ label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4 }],
     3: [
       {
         label: '类型',
         prop: 'category',
-        rules: {required: true, trigger: 'change', message: '请选择类型'},
+        rules: { required: true, trigger: 'change', message: '请选择类型' },
         type: 'select',
-        selectData: birthdayCategory,
+        selectData: birthdayCategory
       },
       {
         label: '祝福标题',
         prop: 'title',
-        rules: {required: true, trigger: 'blur', message: '请填写祝福标题'},
+        rules: { required: true, trigger: 'blur', message: '请填写祝福标题' },
-        hide:formData.value.category === 1
+        hide: formData.value.category === 1
       },
       {
         label: '祝福语',
         prop: 'content',
-        rules: {required: true, trigger: 'blur', message: '请填写祝福语'},
+        rules: { required: true, trigger: 'blur', message: '请填写祝福语' },
-        hide:formData.value.category === 1
+        hide: formData.value.category === 1
       },
-      {label: '姓名', prop: 'fullName',placeholder:'格式：张三，李四，xx'},
+      { label: '姓名', prop: 'fullName', placeholder: '格式：张三，李四，xx' },
-      {label: '祝福弹幕', prop: 'barrage', type: 'textarea'},
+      { label: '祝福弹幕', prop: 'barrage', type: 'textarea' },
-      {label: '背景图片', prop: 'backgroundImages', type: 'image',limit: 4},
+      { label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4 },
-      {label: '个人图片', prop: 'images', type: 'image', limit: 6, hide:formData.value.category === 1},
+      {
+        label: '个人图片',
+        prop: 'images',
+        type: 'image',
+        limit: 6,
+        hide: formData.value.category === 1
+      }
     ],
     4: [
       {
         label: '类型',
         prop: 'category',
-        rules: {required: true, trigger: 'change', message: '请选择类型'},
+        rules: { required: true, trigger: 'change', message: '请选择类型' },
         type: 'select',
         selectData: dataCategory
       },
-      {label: '背景图片', prop: 'backgroundImages', type: 'image'},
+      { label: '背景图片', prop: 'backgroundImages', type: 'image' },
-      {label: '一屏', prop: 'oneScreen', type: 'image', limit: 6,hide:true,show:true},
+      {
-      {label: '二屏', prop: 'twoScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 2},
+        label: '一屏',
-      {label: '三屏', prop: 'threeScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 3},
+        prop: 'oneScreen',
-      {label: '四屏', prop: 'fourScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 4}
+        type: 'image',
+        limit: 6,
+        hide: true,
+        show: true,
+        tip: setRatioTip(1)
+      },
+      {
+        label: '二屏',
+        prop: 'twoScreen',
+        type: 'image',
+        limit: 6,
+        hide: true,
+        show: formData.value.category >= 2,
+        tip: setRatioTip(2)
+      },
+      {
+        label: '三屏',
+        prop: 'threeScreen',
+        type: 'image',
+        limit: 6,
+        hide: true,
+        show: formData.value.category >= 3,
+        tip: setRatioTip(3)
+      },
+      {
+        label: '四屏',
+        prop: 'fourScreen',
+        type: 'image',
+        limit: 6,
+        hide: true,
+        show: formData.value.category >= 4,
+        tip: setRatioTip(4)
+      }
     ]
   }
 })
@@ -145,17 +197,36 @@ const formShowItem = computed(() => {
   return formItemList.value[formData.value.type]
 })
 
+const setRatioTip = (type) => {
+  const tip = '图片分辨率建议'
+  let value = '1800*960'
+  if (type === 1) {
+    if (formData.value.category === 1) value = '1800*960'
+    else if (formData.value.category === 2) value = '1800*460'
+    else value = '960*460'
+  }else if(type === 2){
+    if (formData.value.category === 2) value = '1800*460'
+    else value = '960*460'
+  }else if(type === 3){
+    if (formData.value.category === 3) value = '1800*460'
+    else value = '960*460'
+  }else {
+    value = '960*460'
+  }
+  return tip + value
+}
 const getAIContent = async () => {
   if (AILoading.value) return
   try {
     AILoading.value = true
-    const res = await BannerApi.getContentBanner(`帮我生成生日祝福语带上姓名，姓名叫${formData.value.fullName}，返回数组格式，一个大数组，嵌套2个数组存放所有祝福语，一人两条祝福，两个数组各一条，前面加个类似🎉 🌼 🎂 🎈 🌟 💐 这种小图标，其余字符全部不要。`)
+    const res = await BannerApi.getContentBanner(
+      `帮我生成生日祝福语带上姓名，姓名叫${formData.value.fullName}，返回数组格式，一个大数组，嵌套2个数组存放所有祝福语，一人两条祝福，两个数组各一条，前面加个类似🎉 🌼 🎂 🎈 🌟 💐 这种小图标，其余字符全部不要。`
+    )
     formData.value.barrage = res
     AILoading.value = false
   } catch {
     AILoading.value = false
   }
-
 }
 /** 打开弹窗 */
 const open = async (type: number, id: any) => {
@@ -167,7 +238,7 @@ const open = async (type: number, id: any) => {
   }
   dialogVisible.value = true
 }
-defineExpose({open}) // 提供 open 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const submitForm = async () => {
@@ -208,7 +279,7 @@ const resetForm = () => {
     twoScreen: undefined,
     threeScreen: undefined,
     fourScreen: undefined,
-    category:undefined
+    category: undefined
   }
   formRef.value?.resetFields()
 }

src/views/Board/components/welcome.vue

@@ -48,7 +48,7 @@
       >
         <swiper-slide v-for="(slide, index) in boardData[item.prop] || []" :key="index">
           <div class="swiper-slide-box">
-            <img :src="slide" alt="图片" />
+            <img class="screen-swiper-img" :src="slide" alt="图片" />
           </div>
         </swiper-slide>
       </swiper>
@@ -157,6 +157,9 @@ watch(
     width: 100%;
     height: 100%;
   }
+  .screen-swiper-img{
+    object-fit:contain;
+  }
 }
 
 .text-box {