优化 上传图组件样式

src/components/CloudDisk/index.vue

@@ -2,7 +2,7 @@
     <div class="CloudDisk-form row">
         <div class="CloudDisk-L">
             <div class="row CloudDisk-L-inquire">
-                <el-input v-model="GName" 
+                <el-input class="grow" v-model="GName" 
                 placeholder="搜索分组名称" @keyup.enter="querySearchGroup"
                 @input="SearchGroup">
                 </el-input>
@@ -42,9 +42,15 @@
         </div>
         <div class="CloudDisk-R grow">
             <div class="row CloudDisk-R-inquire">
-                <el-input v-model="queryObj.FileName" 
-                placeholder="请输入图片名称搜索" @keyup.enter="Search"
+                <!-- <el-input v-model="queryObj.FileName" 
+                placeholder="请输入图片名称搜索" clearable @keyup.enter="Search"
+                @input="SearchImg" @change="SearchImg">
+                </el-input> -->
+                <el-input v-model="queryObj.FileName" placeholder="请输入图片名称搜索" clearable @keyup.enter="Search"
                 @input="SearchImg">
+                    <template #append>
+                        <el-button type="primary" style="color: white;" @click="Search">搜索</el-button>
+                    </template>
                 </el-input>
             </div>
             <div ref="imgDiskRef" style="height:  420px;padding-top: 20px;">
@@ -423,6 +429,11 @@ onMounted(()=>{
 })
 </script>
 <style lang="scss" scoped>
+.CloudDisk-R-inquire::v-deep(.el-button){
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    /* height: 36px; */
+}
 .CloudDisk-L{
     border-right: 1px solid #E9E9E9;
     padding: 0 20px 22px 0;
@@ -432,10 +443,10 @@ onMounted(()=>{
 }
 .CloudDisk-L-inquire .el-input{
     width: 112px;
-    height: 36px;
+    /* height: 36px; */
 }
 .CloudDisk-L-inquire .el-button{
-    height: 36px;
+    /* height: 36px; */
     margin-left: 20px;
 }
 .CloudDisk-L-Title:first-child{
@@ -483,7 +494,7 @@ onMounted(()=>{
 }
 .CloudDisk-R-inquire .el-input{
     width: 100%;
-    height: 36px;
+    /* height: 36px; */
 }
 .CloudDisk-R-Center{
     flex-wrap: wrap;

src/views/Editor/CanvasTool/UploadPicture.vue

@@ -19,14 +19,19 @@
                                 />
                                 </el-select>
                             </el-col>
-                            <el-col :span="18">
-                                <el-input v-model="datas.queryMsg.Name" placeholder="输入关键字快速查找" clearable class="input-with-select q-pl-lg" @change="SearchHandler()"></el-input>
+                            <el-col :span="18" class="spiderRes">
+                                <el-input class="input-with-select q-pl-lg" v-model="datas.queryMsg.Name" placeholder="输入关键字快速查找" clearable @keyup.enter="SearchHandler">
+                                    <template #append>
+                                        <el-button type="primary" style="color: white;" @click="SearchHandler">搜索</el-button>
+                                    </template>
+                                </el-input>
+                                <!-- <el-input v-model="datas.queryMsg.Name" placeholder="输入关键字快速查找" clearable class="input-with-select q-pl-lg" @change="SearchHandler()"></el-input> -->
                             </el-col>
                         </el-row>
                         <div class="row UploadPicture-box" v-loading="datas.loading">
                             <div v-for="(item,index) in datas.imgList" class="UploadPicture-list" :key="item.ID">
                                 <div class="UploadPicture-listBox">
-                                    <img :src="item.Path" class="rounded" @click="getImgs(item,index)"/>
+                                    <img :src="item.Path" class="" @click="getImgs(item,index)"/>
                                     <div class="UploadPicture-Hover" v-if="item.show">
                                         <div>
                                             <el-icon :size="20"><CircleCheckFilled/></el-icon>
@@ -37,7 +42,7 @@
                         </div>
                         <div class="q-mt-md" style="display: flex;justify-content: center;">
                             <el-pagination
-                            v-model:current-page="currentPage"
+                            v-model:current-page="datas.queryMsg.pageIndex"
                             :page-size="datas.queryMsg.pageSize"
                             small="small"
                             layout="prev, pager, next"
@@ -117,7 +122,6 @@ const imgOnline = ref('')
 const imgPath = ref('')
 const imgUrl = ref('')
 const spiderImgUrl = ref('')
-const currentPage = ref(1)
 const upload = ref<UploadInstance>()
 
 const { userInfo } =storeToRefs(useUserStore())
@@ -139,7 +143,6 @@ const datas = reactive({
   queryMsg:{
     pageSize: 16,
     pageIndex: 1,
-    currentPage: 1,
     total: 0,
     Type: 0, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
     Name: "", //资源图片名称
@@ -340,6 +343,10 @@ const getImgList = async () =>{
 getImgList()
 </script>
 <style lang="scss" scoped>
+.spiderRes::v-deep(.el-button){
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
 .UploadPicture-from{
     position: fixed;
     left: 0;
@@ -384,6 +391,7 @@ getImgList()
 .UploadPicture-list img{
     width: 100%;
     height: 100%;
+    border-radius: 5px;
     position: absolute;
     object-fit: cover;
     cursor: pointer;