Showing
5 changed files
with
30 additions
and
25 deletions
@@ -158,7 +158,7 @@ | @@ -158,7 +158,7 @@ | ||
158 | </section> | 158 | </section> |
159 | </template> | 159 | </template> |
160 | <template #renderItem="{ item }"> | 160 | <template #renderItem="{ item }"> |
161 | - <List.Item> | 161 | + <List.Item :style="{ '--totalHeight': containerHeight }"> |
162 | <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot> | 162 | <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot> |
163 | </List.Item> | 163 | </List.Item> |
164 | </template> | 164 | </template> |
@@ -173,13 +173,6 @@ | @@ -173,13 +173,6 @@ | ||
173 | .ant-spin-container { | 173 | .ant-spin-container { |
174 | overflow-x: hidden; | 174 | overflow-x: hidden; |
175 | overflow-y: auto; | 175 | overflow-y: auto; |
176 | - | ||
177 | - // .ant-row { | ||
178 | - // .ant-col { | ||
179 | - // } | ||
180 | - // .ant-list-item { | ||
181 | - // } | ||
182 | - // } | ||
183 | } | 176 | } |
184 | 177 | ||
185 | .ant-list-header { | 178 | .ant-list-header { |
@@ -27,10 +27,9 @@ export interface BasicCardListPropsType<T = Recordable> { | @@ -27,10 +27,9 @@ export interface BasicCardListPropsType<T = Recordable> { | ||
27 | handleSearchInfoFn?: Fn; | 27 | handleSearchInfoFn?: Fn; |
28 | } | 28 | } |
29 | 29 | ||
30 | -export type ListGridType = Record< | ||
31 | - 'column' | 'gutter' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', | ||
32 | - number | ||
33 | ->; | 30 | +export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & { |
31 | + gutter: number | [number, number]; | ||
32 | +}; | ||
34 | 33 | ||
35 | export type UseLoading = ReturnType<typeof useLoading>; | 34 | export type UseLoading = ReturnType<typeof useLoading>; |
36 | 35 |
@@ -3,10 +3,18 @@ import { ListGridType } from '../types'; | @@ -3,10 +3,18 @@ import { ListGridType } from '../types'; | ||
3 | export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => { | 3 | export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => { |
4 | return { | 4 | return { |
5 | xxl: col, | 5 | xxl: col, |
6 | - xl: Math.max(1, col - 1), | ||
7 | - lg: Math.max(1, col - 2), | ||
8 | - md: Math.max(1, col - 3), | ||
9 | - sm: Math.max(1, col - 4), | ||
10 | - xs: Math.max(1, col - 5), | 6 | + xl: col, |
7 | + lg: col, | ||
8 | + md: col, | ||
9 | + sm: col, | ||
10 | + xs: col, | ||
11 | }; | 11 | }; |
12 | + // return { | ||
13 | + // xxl: col, | ||
14 | + // xl: Math.max(1, col - 1), | ||
15 | + // lg: Math.max(1, col - 2), | ||
16 | + // md: Math.max(1, col - 3), | ||
17 | + // sm: Math.max(1, col - 4), | ||
18 | + // xs: Math.max(1, col - 5), | ||
19 | + // }; | ||
12 | }; | 20 | }; |
@@ -134,23 +134,23 @@ | @@ -134,23 +134,23 @@ | ||
134 | <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>"> | 134 | <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>"> |
135 | <Card | 135 | <Card |
136 | :style="{ | 136 | :style="{ |
137 | - '--viewType': '#1890ff', | 137 | + '--viewType': item.publicId ? '#faad14' : '#1890ff', |
138 | }" | 138 | }" |
139 | hoverable | 139 | hoverable |
140 | class="card-container" | 140 | class="card-container" |
141 | > | 141 | > |
142 | <template #cover> | 142 | <template #cover> |
143 | <div | 143 | <div |
144 | - class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative" | 144 | + class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl" |
145 | > | 145 | > |
146 | <img | 146 | <img |
147 | - class="w-full h-36" | 147 | + class="w-full max-h-32 object-contain !rounded-tl-10xl" |
148 | alt="example" | 148 | alt="example" |
149 | :src="item.thumbnail || configurationSrc" | 149 | :src="item.thumbnail || configurationSrc" |
150 | @click="handlePreview(item)" | 150 | @click="handlePreview(item)" |
151 | /> | 151 | /> |
152 | <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"> | 152 | <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"> |
153 | - 母版 | 153 | + {{ item.publicId ? '公开' : '私有' }} |
154 | </span> | 154 | </span> |
155 | </div> | 155 | </div> |
156 | </template> | 156 | </template> |
@@ -238,3 +238,11 @@ | @@ -238,3 +238,11 @@ | ||
238 | <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" /> | 238 | <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" /> |
239 | </section> | 239 | </section> |
240 | </template> | 240 | </template> |
241 | + | ||
242 | +<style lang="less" scoped> | ||
243 | + .card-container { | ||
244 | + :deep(.ant-card-cover) { | ||
245 | + background-color: var(--viewType); | ||
246 | + } | ||
247 | + } | ||
248 | +</style> |
@@ -116,14 +116,11 @@ | @@ -116,14 +116,11 @@ | ||
116 | class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative" | 116 | class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative" |
117 | > | 117 | > |
118 | <img | 118 | <img |
119 | - class="w-full h-36" | 119 | + class="w-full max-h-32" |
120 | alt="example" | 120 | alt="example" |
121 | :src="item.thumbnail || configurationSrc" | 121 | :src="item.thumbnail || configurationSrc" |
122 | @click="handlePreview(item)" | 122 | @click="handlePreview(item)" |
123 | /> | 123 | /> |
124 | - <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"> | ||
125 | - 母版 | ||
126 | - </span> | ||
127 | </div> | 124 | </div> |
128 | </template> | 125 | </template> |
129 | <template class="ant-card-actions" #actions> | 126 | <template class="ant-card-actions" #actions> |