530 lines
14 KiB
Vue
530 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<full-page mainStyle="background:#f0f0f0" @reachBottom="loadMore" :class="{ 'elder-mode': elderMode }">
|
|||
|
|
<template #header>
|
|||
|
|
<view v-if="logined" class="status-bar">
|
|||
|
|
<text v-for="(tab, index) in tabs" :key="index"
|
|||
|
|
:class="['tab', { active: activeTab === index, 'tab--elder': elderMode }]" @click="switchTab(index, tab)">
|
|||
|
|
{{ tab }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view v-if="logined" style="padding: 20rpx 0">
|
|||
|
|
<empty-data v-if="switchList.length === 0" />
|
|||
|
|
<view v-for="item in switchList" class="card" :class="{ 'card--elder': elderMode }" @click="toRecord(item)">
|
|||
|
|
<view class="card_head info-row" :class="{ 'card_head--elder': elderMode }">
|
|||
|
|
<view class="doctor-info" :class="{ 'doctor-info--elder': elderMode }">
|
|||
|
|
<text>{{ item.doctorName }}</text>
|
|||
|
|
<text class="dept" :class="{ 'dept--elder': elderMode }">{{ item.deptName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view :style="'color:' + item.color" class="flex-shrink-0" :class="{ 'status-text--elder': elderMode }">{{
|
|||
|
|
item.text }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_body" :class="{ 'card_body--elder': elderMode }">
|
|||
|
|
<view>
|
|||
|
|
<text class="label" :class="{ 'label--elder': elderMode }">线下确诊疾病：</text>
|
|||
|
|
<text :class="{ 'body-text--elder': elderMode }">{{ item.diseases.join("、") }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="desc" :class="{ 'desc--elder': elderMode }">
|
|||
|
|
<text class="label" :class="{ 'label--elder': elderMode }">病情描述：</text>
|
|||
|
|
<text :class="{ 'body-text--elder': elderMode }">{{ item.description }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
|||
|
|
<view>
|
|||
|
|
<text class="label" :class="{ 'label--elder': elderMode }">问诊人：</text>
|
|||
|
|
<text :class="{ 'body-text--elder': elderMode }">{{ item.name }} {{ item.sex }}
|
|||
|
|
{{ item.age ? item.age + "岁" : "" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'body-text--elder': elderMode }">
|
|||
|
|
{{
|
|||
|
|
item.createTime
|
|||
|
|
? dayjs(item.createTime).format("YYYY-MM-DD HH:mm")
|
|||
|
|
: ""
|
|||
|
|
}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_footer info-row-end" :class="{ 'card_footer--elder': elderMode }">
|
|||
|
|
<view :class="{ 'footer-type--elder': elderMode }">
|
|||
|
|
{{ item.consultType == 'onlineMedicinePurchase' ? "在线配药" : "在线复诊" }}
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.showFooter" class="footer-item">
|
|||
|
|
<view v-if="item.showRefund" class="import-btn" :class="{ 'import-btn--elder': elderMode }"
|
|||
|
|
@click.stop="toRefundPage(item)">
|
|||
|
|
{{ item.refundText }}
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.canCancel" class="import-btn" :class="{ 'import-btn--elder': elderMode }"
|
|||
|
|
@click.stop="cancelOrder(item)">
|
|||
|
|
取消订单
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.canPay" class="import-btn" :class="{ 'import-btn--elder': elderMode }"
|
|||
|
|
@click.stop="pay(item)">
|
|||
|
|
去支付</view>
|
|||
|
|
<view v-if="item.enterRoom" class="import-btn" :class="{ 'import-btn--elder': elderMode }"
|
|||
|
|
@click.stop="enterRoom(item)">{{ item.enterRoomText }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<re-login v-else height="80vh" />
|
|||
|
|
<view v-if="!more" style="height: 200rpx"></view>
|
|||
|
|
</full-page>
|
|||
|
|
<refresh-icon v-if="!loading" @refresh="refresh()" />
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, watch, computed, onMounted } from "vue";
|
|||
|
|
import { onShow } from "@dcloudio/uni-app";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import useUser from "@/hooks/useUser";
|
|||
|
|
import useYbPay from "@/hooks/useYbPay";
|
|||
|
|
import { getConsultOrder, cancelConsultOrder, checkRxUploadStatus } from "@/utils/api.js";
|
|||
|
|
import { getOrderStatus } from "@/utils";
|
|||
|
|
|
|||
|
|
import fullPage from "@/components/full-page.vue";
|
|||
|
|
import reLogin from "@/components/re-login.vue";
|
|||
|
|
import emptyData from "@/components/empty.vue";
|
|||
|
|
import refreshIcon from '@/components/refresh-icon.vue';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
toast,
|
|||
|
|
loading as uniLoading,
|
|||
|
|
hideLoading as unHideLoading,
|
|||
|
|
} from "@/utils/widget";
|
|||
|
|
import { useIMStore } from "@/store/tim";
|
|||
|
|
|
|||
|
|
const OrderSource = process.env.ORDER_SOURCE;
|
|||
|
|
const { userInfo, logined, myProfile } = useUser();
|
|||
|
|
const page = ref(1);
|
|||
|
|
const list = ref([]);
|
|||
|
|
const more = ref(false);
|
|||
|
|
const loading = ref(false);
|
|||
|
|
// 定义状态栏的选项
|
|||
|
|
const tabs = ["全部", "待支付", "处理中", "已结束", "已取消"];
|
|||
|
|
const activeTab = ref(0); // 当前选中的选项卡
|
|||
|
|
const pay = useYbPay(null, reload);
|
|||
|
|
|
|||
|
|
// 适老化模式状态
|
|||
|
|
const elderMode = ref(false);
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 从本地存储读取适老化模式状态
|
|||
|
|
const savedElderMode = uni.getStorageSync('elderMode')
|
|||
|
|
if (savedElderMode !== null && savedElderMode !== undefined) {
|
|||
|
|
elderMode.value = savedElderMode
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function loadMore() {
|
|||
|
|
if (more.value && !loading.value) {
|
|||
|
|
page.value++;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function reload() {
|
|||
|
|
page.value = 1;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getList() {
|
|||
|
|
if (loading.value) return;
|
|||
|
|
loading.value = true;
|
|||
|
|
const { data, succes, pages } = await getConsultOrder({
|
|||
|
|
page: page.value,
|
|||
|
|
pageSize: 20,
|
|||
|
|
// patientId: myProfile.value.patientid,
|
|||
|
|
accountId: userInfo.value.userId,
|
|||
|
|
showPassdiagnostic: true,
|
|||
|
|
orderSource: OrderSource
|
|||
|
|
});
|
|||
|
|
const listData = Array.isArray(data)
|
|||
|
|
? data.map((item) => {
|
|||
|
|
const res = getOrderStatus(item, true);
|
|||
|
|
return { ...item, ...res };
|
|||
|
|
})
|
|||
|
|
: [];
|
|||
|
|
list.value = page.value === 1 ? listData : [...list.value, ...listData];
|
|||
|
|
more.value = pages > page.value;
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function cancelOrder(item) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: "取消订单",
|
|||
|
|
content: "确定取消订单吗？",
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uniLoading("取消中...");
|
|||
|
|
const { success, message } = await cancelConsultOrder({
|
|||
|
|
orderId: item.orderId,
|
|||
|
|
});
|
|||
|
|
unHideLoading();
|
|||
|
|
if (success) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "取消成功",
|
|||
|
|
icon: "success",
|
|||
|
|
});
|
|||
|
|
page.value = 1;
|
|||
|
|
getList();
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: message,
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// async function enterRoom(item) {
|
|||
|
|
// const { doctorCode, orderId } = item;
|
|||
|
|
// const imStore = useIMStore();
|
|||
|
|
// const res = await imStore.login(orderId);
|
|||
|
|
// const conversationID = `C2C${doctorCode}`;
|
|||
|
|
// if (res) {
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: `/pages/chat/index?conversationID=${conversationID}&orderId=${orderId}`,
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
async function enterRoom(item) {
|
|||
|
|
const { doctorCode, orderId } = item;
|
|||
|
|
if (!doctorCode) {
|
|||
|
|
toast("进入视频间错误,医生视频账号不存在 ");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!orderId) {
|
|||
|
|
toast("进入视频间错误,用户视频账号不存在 ");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uniLoading("正在进入视频间, 请稍后等待");
|
|||
|
|
const imStore = useIMStore();
|
|||
|
|
try {
|
|||
|
|
// 登录 IM
|
|||
|
|
const res = await imStore.login(orderId);
|
|||
|
|
if (!res) {
|
|||
|
|
unHideLoading();
|
|||
|
|
toast("IM 登录失败");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 等待 SDK 准备好
|
|||
|
|
await new Promise((resolve) => {
|
|||
|
|
if (imStore.isSDKReady) {
|
|||
|
|
resolve();
|
|||
|
|
} else {
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
if (imStore.isSDKReady) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
resolve();
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 准备进入会话
|
|||
|
|
const conversationID = `C2C${doctorCode}`;
|
|||
|
|
unHideLoading();
|
|||
|
|
// 导航到聊天页面
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/chat/index?conversationID=${conversationID}&orderId=${orderId}`,
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
unHideLoading();
|
|||
|
|
console.error("进入会话失败:", error);
|
|||
|
|
toast(`进入会话失败: ${error.message || "未知错误"}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toRecord(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/record/order-detail?orderId=" + item.orderId,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function toRefundPage(item) {
|
|||
|
|
if (!item.refundInfo) {
|
|||
|
|
const { success, message } = await checkRxUploadStatus({
|
|||
|
|
orderId: item.orderId,
|
|||
|
|
registerId: item.registerId,
|
|||
|
|
patientId: item.patientId
|
|||
|
|
});
|
|||
|
|
if (!success) {
|
|||
|
|
toast(message || "获取处方状态失败");
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
uni.setStorageSync('refund-order', item)
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/record/order-refund'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function refresh() {
|
|||
|
|
if (loading.value) return;
|
|||
|
|
page.value = 1;
|
|||
|
|
list.value = [];
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(logined, (n) => {
|
|||
|
|
if (n) {
|
|||
|
|
page.value = 1;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const tab = ref("全部");
|
|||
|
|
const switchList = computed(() => {
|
|||
|
|
return list.value.filter((item) => {
|
|||
|
|
if (tab.value === "全部") {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return item.text === tab.value;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 切换选项卡
|
|||
|
|
const switchTab = (index, item) => {
|
|||
|
|
activeTab.value = index;
|
|||
|
|
tab.value = item;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onShow(() => {
|
|||
|
|
if (logined.value) {
|
|||
|
|
page.value = 1;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.footer-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end; // 按钮右对齐
|
|||
|
|
align-items: center; // 垂直居中对齐
|
|||
|
|
gap: 20rpx; // 按钮间距
|
|||
|
|
flex-wrap: wrap; // 允许换行
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab {
|
|||
|
|
padding: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
@at-root &--elder {
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab.active {
|
|||
|
|
color: $theme-brown-primary;
|
|||
|
|
/* 选中时的颜色 */
|
|||
|
|
border-bottom: 2px solid $theme-brown-primary;
|
|||
|
|
/* 选中时的下划线 */
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: white;
|
|||
|
|
|
|||
|
|
@at-root &+& {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式：卡片整体变大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
margin: 30rpx 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
// 适老化模式：元素各占一行
|
|||
|
|
@at-root &--elder {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row-end {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
// 适老化模式：元素各占一行
|
|||
|
|
@at-root &--elder {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_head {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
border-bottom: 1px solid #e5e5e5;
|
|||
|
|
|
|||
|
|
// 适老化模式：头部内边距增加，字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_footer {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $theme-brown-primary;
|
|||
|
|
border-top: 1px solid #e5e5e5;
|
|||
|
|
|
|||
|
|
// 适老化模式：底部内边距增加，字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.import-btn {
|
|||
|
|
padding: 6rpx 30rpx;
|
|||
|
|
border: 1px solid;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 60rpx; // 统一按钮高度
|
|||
|
|
line-height: 1; // 重置行高
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
// 适老化模式：按钮变大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 12rpx 40rpx;
|
|||
|
|
font-size: 35rpx; // 25 * 1.4 (按钮字体稍小)
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
width: auto; // 按钮宽度自适应内容
|
|||
|
|
white-space: nowrap; // 防止文字换行
|
|||
|
|
height: 80rpx; // 适老化模式按钮高度
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.doctor-info {
|
|||
|
|
font-weight: bold;
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
|
|||
|
|
// 适老化模式：医生信息字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
max-width: 100%;
|
|||
|
|
white-space: normal; // 允许换行
|
|||
|
|
text-overflow: unset;
|
|||
|
|
overflow: visible;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
font-size: 42rpx; // 30 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dept {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
color: #666;
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
// 适老化模式：科室字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
margin-left: 20; // 科室左边距
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_body {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
// 适老化模式：内容区域内边距增加，字体和行高放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
padding: 36rpx 40rpx;
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
line-height: 67rpx; // 48 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
// 适老化模式：标签字体放大
|
|||
|
|
@at-root &--elder {
|
|||
|
|
font-size: 39rpx; // 28 * 1.4
|
|||
|
|
// font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
line-clamp: 2;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
// 适老化模式：描述区域行数增加，便于阅读
|
|||
|
|
@at-root &--elder {
|
|||
|
|
-webkit-line-clamp: 4;
|
|||
|
|
line-clamp: 4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式：每个信息块单独占一行
|
|||
|
|
@at-root &--elder>view {
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 适老化模式额外样式类
|
|||
|
|
.status-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-text--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-type--elder {
|
|||
|
|
font-size: 39rpx !important; // 28 * 1.4
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-shrink-0 {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|