Commit db46ea1ccd248287b3685fa74a4ebc7f85eee0c5

Authored by ww
1 parent fb3bb464

perf: data board list page style adjust

  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 + <title>组件图标</title>
  4 + <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  5 + <g id="看板管理" transform="translate(-322.000000, -326.000000)" fill="#377DFF">
  6 + <g id="1" transform="translate(302.000000, 234.000000)">
  7 + <g id="组件图标" transform="translate(20.000000, 92.000000)">
  8 + <rect id="矩形" opacity="0.1" x="0" y="0" width="54" height="54" rx="22"></rect>
  9 + <g id="组件" transform="translate(13.500000, 15.000000)" fill-rule="nonzero">
  10 + <path d="M25.2323972,16.1837421 C25.0692247,16.1837421 24.9060522,16.2163766 24.7577136,16.2816456 L24.7517801,16.2846123 L24.7458465,16.2846123 L13.2377373,21.1886867 L1.72666139,16.2875791 L1.72072785,16.2875791 L1.7147943,16.2846123 C1.5664557,16.2223101 1.40921677,16.1867089 1.24011076,16.1867089 C0.554786392,16.1867089 0,16.7592959 0,17.4653877 C0,17.9994066 0.31744462,18.4533228 0.765427215,18.646163 L12.7482199,23.7519778 L12.760087,23.7549446 C13.0626978,23.8854826 13.4068434,23.8854826 13.7094541,23.7549446 L13.7153877,23.7519778 C13.7183544,23.7519778 13.7183544,23.7490111 13.7213212,23.7490111 L25.7041139,18.6431962 C26.1520965,18.450356 26.469553,17.9964399 26.469553,17.4624209 C26.4725079,16.7563291 25.9177215,16.1837421 25.2323972,16.1837421 Z M25.2323972,10.650712 C24.9980222,10.6447785 24.7577136,10.7456487 24.7577136,10.7456487 L13.2377373,15.6526899 L1.7147943,10.7456487 C1.7147943,10.7456487 1.40921677,10.650712 1.24011076,10.650712 C0.554786392,10.650712 0,11.2203323 0,11.9264241 C0,12.4574763 0.31744462,12.9143592 0.765427215,13.1042326 L12.7482199,18.2070807 C12.7511867,18.2070807 12.7511867,18.2100475 12.7541535,18.2100475 L12.7571203,18.2130142 C12.9054589,18.2753165 13.0626978,18.3109177 13.2318038,18.3109177 C13.4009098,18.3109177 13.5611155,18.2753165 13.7064873,18.2130142 L13.7124209,18.2100475 C13.7153877,18.2100475 13.7153877,18.2100475 13.7183544,18.2070807 L25.7011472,13.1042326 C26.1491297,12.9143592 26.4665744,12.4574763 26.469553,11.9264241 C26.4725079,11.2203323 25.9177215,10.650712 25.2323972,10.650712 L25.2323972,10.650712 Z M0.765427215,7.57120253 L12.7482199,12.6770174 C12.7511867,12.6770174 12.7511867,12.6770174 12.7541535,12.6799842 L12.7571203,12.6829509 C12.9054589,12.7452532 13.0626978,12.7778877 13.2318038,12.7778877 C13.3949763,12.7778877 13.555182,12.7452532 13.7064873,12.6829509 L13.7124209,12.6799842 L13.7183544,12.6770174 L25.7011472,7.5741693 C26.1491297,7.38132911 26.4665744,6.92741297 26.4695411,6.39636076 C26.4695411,5.86234177 26.1520965,5.40842563 25.7041139,5.21558544 L13.7213212,0.106803797 C13.7183544,0.106803797 13.7183544,0.106803797 13.7153877,0.103837025 L13.7094541,0.100870253 C13.4068434,-0.0296677215 13.0626978,-0.0296677215 12.760087,0.100870253 L12.7571203,0.103837025 L0.765427215,5.21261867 C0.31744462,5.40249209 0,5.859375 0,6.39339399 C0,6.9244462 0.31744462,7.37836234 0.765427215,7.57120253 Z" id="形状"></path>
  11 + </g>
  12 + </g>
  13 + </g>
  14 + </g>
  15 + </g>
  16 +</svg>
\ No newline at end of file
... ...
... ... @@ -160,8 +160,8 @@
160 160
161 161 <template>
162 162 <PageWrapper>
163   - <div class="flex mb-6 items-center">
164   - <div class="text-lg mr-6 font-bold">自定义看板</div>
  163 + <div class="flex mb-6 items-center bg-light-100 h-78px">
  164 + <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
165 165 <Authority value="api:yt:data_board:add:post">
166 166 <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
167 167 </Authority>
... ... @@ -171,11 +171,14 @@
171 171 ref="listEL"
172 172 :pagination="paginationProp"
173 173 :data-source="dataBoardList"
174   - :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
  174 + :grid="{ gutter: 20, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
175 175 >
176 176 <template #renderItem="{ item }">
177 177 <ListItem>
178 178 <Card class="data-card cursor-pointer">
  179 + <template #title>
  180 + <div>{{ item.name }}</div>
  181 + </template>
179 182 <template #extra>
180 183 <Dropdown
181 184 v-if="dropMenuList.length"
... ... @@ -188,17 +191,17 @@
188 191 </template>
189 192 <!-- <template #cover>title</template> -->
190 193 <section @click="handleViewBoard(item)">
191   - <div class="flex justify-between items-center">
192   - <div>{{ item.name }}</div>
193   - <div class="flex content-center">
194   - <Statistic :value="item.componentNum">
  194 + <div class="flex data-card__info">
  195 + <div>
  196 + <div>组件数量</div>
  197 + <Statistic style="font-size: 22px" :value="item.componentNum">
195 198 <template #suffix>
196   - <span class="text-sm">个组件</span>
  199 + <span class="text-sm">个</span>
197 200 </template>
198 201 </Statistic>
199 202 </div>
200 203 </div>
201   - <div class="flex justify-between mt-4">
  204 + <div class="flex justify-between mt-4 text-sm" style="color: #999999">
202 205 <div>
203 206 <span>
204 207 {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
... ... @@ -221,13 +224,30 @@
221 224 </PageWrapper>
222 225 </template>
223 226
224   -<style scoped>
  227 +<style scoped lang="less">
225 228 .data-card:deep(.ant-card-head) {
  229 + padding: 20px;
  230 + }
  231 +
  232 + .data-card:deep(.ant-card-head-title) {
226 233 padding: 0;
227   - height: 40px;
228   - min-height: 40px;
229 234 }
230 235 .data-card:deep(.ant-card-extra) {
231   - padding: 8px;
  236 + padding: 0;
  237 + }
  238 + .data-card:deep(.ant-card-body) {
  239 + padding: 20px;
  240 + }
  241 +
  242 + .data-card__info {
  243 + color: #666666;
  244 +
  245 + &::before {
  246 + content: '';
  247 + width: 54px;
  248 + height: 54px;
  249 + margin-right: 16px;
  250 + background-image: url('/@/assets/svg/component.svg');
  251 + }
232 252 }
233 253 </style>
... ...