|
@@ -831,15 +831,22 @@
|
|
:value="item.key"
|
|
:value="item.key"
|
|
:label="item.label"
|
|
:label="item.label"
|
|
:destroy-on-hide="false"
|
|
:destroy-on-hide="false"
|
|
- style="height: 420px"
|
|
|
|
|
|
+ style="max-height: 420px"
|
|
>
|
|
>
|
|
- <div class="flex between box-list" style="flex-wrap:wrap">
|
|
|
|
- <div class="box" :class="{active:replaceDialog.select?.id===_item.id}" @click="selectScene(_item)" v-for="_item in replaceDialog.list">
|
|
|
|
- <div class="box-img">
|
|
|
|
- <img :src="_item.image"></img>
|
|
|
|
|
|
+ <div class="flex box-list" style="flex-wrap:wrap;justify-content: flex-start;">
|
|
|
|
+ <template v-if="replaceDialog.list?.length">
|
|
|
|
+ <div class="box" :class="{active:replaceDialog.select?.id===_item.id}" @click="selectScene(_item)" v-for="_item in replaceDialog.list">
|
|
|
|
+ <div class="box-img">
|
|
|
|
+ <img :src="_item.image"></img>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-title" :title="_item.name">{{_item.name}}</div>
|
|
</div>
|
|
</div>
|
|
- <div class="title" :title="_item.name">{{_item.name}}</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else >
|
|
|
|
+ <div class="item-title" style="height:50px;">
|
|
|
|
+ 暂无数据
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
</div>
|
|
</div>
|
|
<t-pagination :pageSizeOptions="[15,30,60]" :total="replaceDialog.total" v-model="replaceDialog.current" :pageSize="replaceDialog.pageSize" @change="pageChange" />
|
|
<t-pagination :pageSizeOptions="[15,30,60]" :total="replaceDialog.total" v-model="replaceDialog.current" :pageSize="replaceDialog.pageSize" @change="pageChange" />
|
|
</t-tab-panel>
|
|
</t-tab-panel>
|
|
@@ -2549,26 +2556,35 @@ const onReplace = ()=>{
|
|
overflow:scroll;
|
|
overflow:scroll;
|
|
max-height:375px;
|
|
max-height:375px;
|
|
.box{
|
|
.box{
|
|
- width:120px;
|
|
|
|
|
|
+ width:125px;
|
|
height:110px;
|
|
height:110px;
|
|
padding:8px;
|
|
padding:8px;
|
|
.box-img{
|
|
.box-img{
|
|
width:100%;
|
|
width:100%;
|
|
height:70px;
|
|
height:70px;
|
|
}
|
|
}
|
|
- .title{
|
|
|
|
|
|
+ /* .title{
|
|
text-align:center;
|
|
text-align:center;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
text-overflow:ellipsis;
|
|
font-size:12px;
|
|
font-size:12px;
|
|
color: var(--td-text-color-secondary);
|
|
color: var(--td-text-color-secondary);
|
|
- }
|
|
|
|
|
|
+ } */
|
|
&:hover{
|
|
&:hover{
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
border:1px solid var(--color-primary);
|
|
border:1px solid var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .item-title{
|
|
|
|
+ text-align:center;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ font-size:12px;
|
|
|
|
+ color: var(--td-text-color-secondary);
|
|
|
|
+ }
|
|
.active{
|
|
.active{
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
border:1px solid var(--color-primary);
|
|
border:1px solid var(--color-primary);
|