fix: constrain room turnover avatars
This commit is contained in:
parent
c5480cdf06
commit
584a51c791
@ -16,7 +16,6 @@ import { getAllowedSysOrigins } from '#/views/system/shared';
|
|||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Image,
|
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
Modal,
|
Modal,
|
||||||
@ -320,6 +319,11 @@ function formatNumber(value: number | string | undefined) {
|
|||||||
return Number.isFinite(numeric) ? numeric.toLocaleString() : '0';
|
return Number.isFinite(numeric) ? numeric.toLocaleString() : '0';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function coverBackgroundStyle(url?: string) {
|
||||||
|
const coverUrl = String(url || '').trim();
|
||||||
|
return coverUrl ? { backgroundImage: `url(${JSON.stringify(coverUrl)})` } : {};
|
||||||
|
}
|
||||||
|
|
||||||
function handleRecordPageChange(page: number, pageSize: number) {
|
function handleRecordPageChange(page: number, pageSize: number) {
|
||||||
recordQuery.cursor = page;
|
recordQuery.cursor = page;
|
||||||
recordQuery.limit = pageSize;
|
recordQuery.limit = pageSize;
|
||||||
@ -471,7 +475,12 @@ watch(
|
|||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.key === 'room'">
|
<template v-if="column.key === 'room'">
|
||||||
<div class="room-cell">
|
<div class="room-cell">
|
||||||
<Image :preview="false" :src="record.roomCover" class="room-cover" />
|
<div
|
||||||
|
v-if="record.roomCover"
|
||||||
|
class="room-cover"
|
||||||
|
:style="coverBackgroundStyle(record.roomCover)"
|
||||||
|
/>
|
||||||
|
<div v-else class="room-cover placeholder">R</div>
|
||||||
<div class="room-copy">
|
<div class="room-copy">
|
||||||
<Button type="link" @click="openRoomDetails(record.roomId)">
|
<Button type="link" @click="openRoomDetails(record.roomId)">
|
||||||
{{ record.roomName || '-' }}
|
{{ record.roomName || '-' }}
|
||||||
@ -526,7 +535,12 @@ watch(
|
|||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.key === 'room'">
|
<template v-if="column.key === 'room'">
|
||||||
<div class="room-cell">
|
<div class="room-cell">
|
||||||
<Image :preview="false" :src="record.roomCover" class="room-cover" />
|
<div
|
||||||
|
v-if="record.roomCover"
|
||||||
|
class="room-cover"
|
||||||
|
:style="coverBackgroundStyle(record.roomCover)"
|
||||||
|
/>
|
||||||
|
<div v-else class="room-cover placeholder">R</div>
|
||||||
<div class="room-copy">
|
<div class="room-copy">
|
||||||
<Button type="link" @click="openRoomDetails(record.roomId)">
|
<Button type="link" @click="openRoomDetails(record.roomId)">
|
||||||
{{ record.roomName || '-' }}
|
{{ record.roomName || '-' }}
|
||||||
@ -608,9 +622,23 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.room-cover {
|
.room-cover {
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 48px;
|
flex: 0 0 40px;
|
||||||
width: 48px;
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-cover.placeholder {
|
||||||
|
align-items: center;
|
||||||
|
background: rgb(226 232 240);
|
||||||
|
color: rgb(100 116 139);
|
||||||
|
display: flex;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-copy {
|
.room-copy {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user