|
|
@@ -14,7 +14,6 @@ import { usePagination } from '/@/utils/usePagination';
|
|
|
import EditDrawer from './EditDrawer.vue';
|
|
|
import { useTableHeight } from '/@/utils/useTableHeight';
|
|
|
|
|
|
-
|
|
|
const cardContainer: Ref<HTMLElement | null> = useTemplateRef('cardContainer');
|
|
|
const { tableHeight } = useTableHeight(cardContainer);
|
|
|
|
|
|
@@ -25,42 +24,42 @@ const overviewLoading = ref(false);
|
|
|
const selectedTab = ref('1');
|
|
|
const { tableOptions, handlePageChange } = usePagination(handleTabChange);
|
|
|
const gridOptions: any = reactive({
|
|
|
- border: false,
|
|
|
- round: true,
|
|
|
- stripe: true,
|
|
|
- currentRowHighLight: true,
|
|
|
- height: '100%',
|
|
|
- toolbarConfig: {
|
|
|
- custom: true,
|
|
|
- slots: {
|
|
|
- buttons: 'toolbar_buttons',
|
|
|
- tools: 'toolbar_tools'
|
|
|
- }
|
|
|
- },
|
|
|
- rowConfig: {
|
|
|
- isHover: true
|
|
|
- },
|
|
|
- columnConfig: {
|
|
|
- resizable: true
|
|
|
- },
|
|
|
- pagerConfig: {
|
|
|
- total: tableOptions.value.total,
|
|
|
- page: tableOptions.value.page,
|
|
|
- limit: tableOptions.value.limit
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- loadingConfig: {
|
|
|
- icon: 'vxe-icon-indicator roll',
|
|
|
- text: '正在拼命加载中...'
|
|
|
- },
|
|
|
- columns: '',
|
|
|
- data: ''
|
|
|
+ border: false,
|
|
|
+ round: true,
|
|
|
+ stripe: true,
|
|
|
+ currentRowHighLight: true,
|
|
|
+ height: '100%',
|
|
|
+ toolbarConfig: {
|
|
|
+ custom: true,
|
|
|
+ slots: {
|
|
|
+ buttons: 'toolbar_buttons',
|
|
|
+ tools: 'toolbar_tools',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true,
|
|
|
+ },
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true,
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ total: tableOptions.value.total,
|
|
|
+ page: tableOptions.value.page,
|
|
|
+ limit: tableOptions.value.limit,
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ loadingConfig: {
|
|
|
+ icon: 'vxe-icon-indicator roll',
|
|
|
+ text: '正在拼命加载中...',
|
|
|
+ },
|
|
|
+ columns: '',
|
|
|
+ data: '',
|
|
|
});
|
|
|
|
|
|
const isOpen = ref(false);
|
|
|
-const formSelect = ref<{ country: string[], line: string[] }>({
|
|
|
- country: [],
|
|
|
- line: []
|
|
|
+const formSelect = ref<{ country: string[]; line: string[] }>({
|
|
|
+ country: [],
|
|
|
+ line: [],
|
|
|
});
|
|
|
|
|
|
const operatorOption = ref<{ id: number; name: string }[]>([]);
|
|
|
@@ -71,246 +70,241 @@ const operatorOption = ref<{ id: number; name: string }[]>([]);
|
|
|
// });
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
- fetchShopDetailOverview();
|
|
|
- handleTabChange(selectedTab.value);
|
|
|
- fetchSelect();
|
|
|
- fetchOperator();
|
|
|
+ fetchShopDetailOverview();
|
|
|
+ handleTabChange(selectedTab.value);
|
|
|
+ fetchSelect();
|
|
|
+ fetchOperator();
|
|
|
});
|
|
|
|
|
|
async function fetchSelect() {
|
|
|
- const res = await useResponse({}, api.getShopSelect);
|
|
|
- formSelect.value = res.data;
|
|
|
- // const ret = await useResponse({}, api.getCompanySelect);
|
|
|
- // companySelect.value = ret.data;
|
|
|
+ const res = await useResponse({}, api.getShopSelect);
|
|
|
+ formSelect.value = res.data;
|
|
|
+ // const ret = await useResponse({}, api.getCompanySelect);
|
|
|
+ // companySelect.value = ret.data;
|
|
|
}
|
|
|
|
|
|
async function fetchShopDetailOverview() {
|
|
|
- const res = await useResponse({ platformNumber }, api.getShopDetailOverview, overviewLoading);
|
|
|
- shopOverview.value = res.data;
|
|
|
+ const res = await useResponse({ platformNumber }, api.getShopDetailOverview, overviewLoading);
|
|
|
+ shopOverview.value = res.data;
|
|
|
}
|
|
|
|
|
|
async function handleTabChange(tabValue: any) {
|
|
|
- const isTabSwitch = tabValue === selectedTab.value;
|
|
|
+ const isTabSwitch = tabValue === selectedTab.value;
|
|
|
|
|
|
- // 如果是切换标签，重置分页
|
|
|
- if (isTabSwitch) {
|
|
|
- gridOptions.pagerConfig.page = 1;
|
|
|
- }
|
|
|
+ // 如果是切换标签，重置分页
|
|
|
+ if (isTabSwitch) {
|
|
|
+ gridOptions.pagerConfig.page = 1;
|
|
|
+ }
|
|
|
|
|
|
- const query = {
|
|
|
- platformNumber,
|
|
|
- page: gridOptions.pagerConfig.page,
|
|
|
- limit: gridOptions.pagerConfig.limit
|
|
|
- };
|
|
|
+ const query = {
|
|
|
+ platformNumber,
|
|
|
+ page: gridOptions.pagerConfig.page,
|
|
|
+ limit: gridOptions.pagerConfig.limit,
|
|
|
+ };
|
|
|
|
|
|
- const temp = tabValue ?? selectedTab.value;
|
|
|
+ const temp = tabValue ?? selectedTab.value;
|
|
|
|
|
|
- switch (temp) {
|
|
|
- case '1':
|
|
|
- gridOptions.columns = shopCurrentColumns;
|
|
|
- await useTableData(api.getCurrentInfo, query, gridOptions);
|
|
|
- break;
|
|
|
- case '2':
|
|
|
- gridOptions.columns = historyColumns;
|
|
|
- await useTableData(api.getHistoryInfo, query, gridOptions);
|
|
|
- break;
|
|
|
- case '3':
|
|
|
- gridOptions.columns = computerColumns;
|
|
|
- await useTableData(api.getComputerInfo, query, gridOptions);
|
|
|
- break;
|
|
|
- }
|
|
|
+ switch (temp) {
|
|
|
+ case '1':
|
|
|
+ gridOptions.columns = shopCurrentColumns;
|
|
|
+ await useTableData(api.getCurrentInfo, query, gridOptions);
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ gridOptions.columns = historyColumns;
|
|
|
+ await useTableData(api.getHistoryInfo, query, gridOptions);
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ gridOptions.columns = computerColumns;
|
|
|
+ await useTableData(api.getComputerInfo, query, gridOptions);
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function drawerOpen() {
|
|
|
- isOpen.value = true;
|
|
|
+ isOpen.value = true;
|
|
|
}
|
|
|
|
|
|
function handleRefresh() {
|
|
|
- handleTabChange(selectedTab.value);
|
|
|
+ handleTabChange(selectedTab.value);
|
|
|
}
|
|
|
|
|
|
async function fetchOperator() {
|
|
|
- const res = await useResponse({}, api.getOperator);
|
|
|
- operatorOption.value = res.data;
|
|
|
+ const res = await useResponse({}, api.getOperator);
|
|
|
+ operatorOption.value = res.data;
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="p-5 flex flex-col gap-2.5">
|
|
|
- <el-card v-loading="overviewLoading" shadow="hover" style="border: none">
|
|
|
- <div ref="cardContainer" class="flex items-center gap-10">
|
|
|
- <div v-if="platformNumber" class="artistic-text-container mr-7 ">
|
|
|
- <div class="artistic-text">
|
|
|
- {{ platformNumber }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-image v-else class="mr-7 rounded-2xl" src="" style="height: 120px; width: 120px; object-fit: contain">
|
|
|
- <template #error>
|
|
|
- <div class="mr-3.5 flex items-center justify-center text-5xl"
|
|
|
- style="height: 100%; width: 100%; background-color: #f5f5f5">
|
|
|
- <el-icon>
|
|
|
- <icon-picture />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
- <div class="text-lg">
|
|
|
- <div class="font-semibold">
|
|
|
- 店铺编号:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.platformNumber ? shopOverview[0]?.platformNumber : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 所属公司:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.company ? shopOverview[0]?.company : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 所属平台:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.platform ? shopOverview[0]?.platform : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 运营:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.operatorName ? shopOverview[0]?.operatorName : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 电脑:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.countComputer === 0 ? '0' : shopOverview[0]?.countComputer || '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="text-lg">
|
|
|
- <div class="font-semibold">
|
|
|
- 主账户手机号及归属人:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.shopPhoneAndNameStr ? shopOverview[0]?.shopPhoneAndNameStr : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 主账户Email:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.shopEmail ? shopOverview[0]?.shopEmail : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 子账户手机号及归属人:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.subShopPhoneAndNameStr ? shopOverview[0]?.subShopPhoneAndNameStr : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="font-semibold">
|
|
|
- 子账户Email:
|
|
|
- <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
- {{ shopOverview[0]?.subShopEmail ? shopOverview[0]?.subShopEmail : '--' }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-card>
|
|
|
- <el-card class="mt-2.5 flex-1" shadow="hover" style="border: none">
|
|
|
- <div :style="{ height: tableHeight + 'px' }">
|
|
|
- <vxe-grid v-bind="gridOptions">
|
|
|
- <template #toolbar_buttons>
|
|
|
- <el-radio-group v-model="selectedTab" @change="handleTabChange(selectedTab)">
|
|
|
- <el-radio-button label="当前信息" value="1">
|
|
|
- <template #default>
|
|
|
- <el-icon style="top: 2px;">
|
|
|
- <Timer />
|
|
|
- </el-icon>
|
|
|
- 当前信息
|
|
|
- </template>
|
|
|
- </el-radio-button>
|
|
|
- <el-radio-button label="历史记录" value="2">
|
|
|
- <template #default>
|
|
|
- <el-icon style="top: 2px;">
|
|
|
- <RefreshLeft />
|
|
|
- </el-icon>
|
|
|
- 历史记录
|
|
|
- </template>
|
|
|
- </el-radio-button>
|
|
|
- <el-radio-button label="电脑信息" value="3">
|
|
|
- <template #default>
|
|
|
- <el-icon style="top: 2px;">
|
|
|
- <Monitor />
|
|
|
- </el-icon>
|
|
|
- 电脑信息
|
|
|
- </template>
|
|
|
- </el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </template>
|
|
|
- <template #toolbar_tools>
|
|
|
- <div class="mr-2.5">
|
|
|
- <el-button :disabled="selectedTab != '1'" :icon="Edit" circle plain type="warning"
|
|
|
- @click="drawerOpen"></el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #pager>
|
|
|
- <vxe-pager
|
|
|
- v-model:currentPage="gridOptions.pagerConfig.page"
|
|
|
- v-model:pageSize="gridOptions.pagerConfig.limit"
|
|
|
- :total="gridOptions.pagerConfig.total"
|
|
|
- @page-change="handlePageChange"
|
|
|
- >
|
|
|
- </vxe-pager>
|
|
|
- </template>
|
|
|
- </vxe-grid>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-card>
|
|
|
- <EditDrawer
|
|
|
- v-if="isOpen"
|
|
|
- v-model="isOpen"
|
|
|
- :companySelect
|
|
|
- :formSelect
|
|
|
- :gridOptions="gridOptions"
|
|
|
- :operatorOption
|
|
|
- :platformNumber
|
|
|
- @refresh="handleRefresh"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class="p-5 flex flex-col gap-2.5">
|
|
|
+ <el-card v-loading="overviewLoading" shadow="hover" style="border: none">
|
|
|
+ <div ref="cardContainer" class="flex items-center gap-10">
|
|
|
+ <div v-if="platformNumber" class="artistic-text-container mr-7">
|
|
|
+ <div class="artistic-text">
|
|
|
+ {{ platformNumber }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-image v-else class="mr-7 rounded-2xl" src="" style="height: 120px; width: 120px; object-fit: contain">
|
|
|
+ <template #error>
|
|
|
+ <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100%; width: 100%; background-color: #f5f5f5">
|
|
|
+ <el-icon>
|
|
|
+ <icon-picture />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="text-lg">
|
|
|
+ <div class="font-semibold">
|
|
|
+ 平台编号:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.platformNumber ? shopOverview[0]?.platformNumber : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 所属公司:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.company ? shopOverview[0]?.company : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 所属平台:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.platform ? shopOverview[0]?.platform : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 运营:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.operatorName ? shopOverview[0]?.operatorName : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 电脑:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.countComputer === 0 ? '0' : shopOverview[0]?.countComputer || '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-lg">
|
|
|
+ <div class="font-semibold">
|
|
|
+ 主账户手机号及归属人:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.shopPhoneAndNameStr ? shopOverview[0]?.shopPhoneAndNameStr : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 主账户Email:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.shopEmail ? shopOverview[0]?.shopEmail : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 子账户手机号及归属人:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.subShopPhoneAndNameStr ? shopOverview[0]?.subShopPhoneAndNameStr : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="font-semibold">
|
|
|
+ 子账户Email:
|
|
|
+ <span class="font-medium italic ml-1.5" style="color: #64748b">
|
|
|
+ {{ shopOverview[0]?.subShopEmail ? shopOverview[0]?.subShopEmail : '--' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="mt-2.5 flex-1" shadow="hover" style="border: none">
|
|
|
+ <div :style="{ height: tableHeight + 'px' }">
|
|
|
+ <vxe-grid v-bind="gridOptions">
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <el-radio-group v-model="selectedTab" @change="handleTabChange(selectedTab)">
|
|
|
+ <el-radio-button label="当前信息" value="1">
|
|
|
+ <template #default>
|
|
|
+ <el-icon style="top: 2px">
|
|
|
+ <Timer />
|
|
|
+ </el-icon>
|
|
|
+ 当前信息
|
|
|
+ </template>
|
|
|
+ </el-radio-button>
|
|
|
+ <el-radio-button label="历史记录" value="2">
|
|
|
+ <template #default>
|
|
|
+ <el-icon style="top: 2px">
|
|
|
+ <RefreshLeft />
|
|
|
+ </el-icon>
|
|
|
+ 历史记录
|
|
|
+ </template>
|
|
|
+ </el-radio-button>
|
|
|
+ <el-radio-button label="电脑信息" value="3">
|
|
|
+ <template #default>
|
|
|
+ <el-icon style="top: 2px">
|
|
|
+ <Monitor />
|
|
|
+ </el-icon>
|
|
|
+ 电脑信息
|
|
|
+ </template>
|
|
|
+ </el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+ <template #toolbar_tools>
|
|
|
+ <div class="mr-2.5">
|
|
|
+ <el-button :disabled="selectedTab != '1'" :icon="Edit" circle plain type="warning" @click="drawerOpen"></el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #pager>
|
|
|
+ <vxe-pager
|
|
|
+ v-model:currentPage="gridOptions.pagerConfig.page"
|
|
|
+ v-model:pageSize="gridOptions.pagerConfig.limit"
|
|
|
+ :total="gridOptions.pagerConfig.total"
|
|
|
+ @page-change="handlePageChange"
|
|
|
+ >
|
|
|
+ </vxe-pager>
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <EditDrawer
|
|
|
+ v-if="isOpen"
|
|
|
+ v-model="isOpen"
|
|
|
+ :companySelect
|
|
|
+ :formSelect
|
|
|
+ :gridOptions="gridOptions"
|
|
|
+ :operatorOption
|
|
|
+ :platformNumber
|
|
|
+ @refresh="handleRefresh"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
.artistic-text-container {
|
|
|
- height: 120px; /* 高度与要求一致 */
|
|
|
- width: 120px; /* 宽度与要求一致 */
|
|
|
- display: flex;
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
- justify-content: center; /* 水平居中 */
|
|
|
- background-color: #f5f5f5; /* 背景色 */
|
|
|
- border-radius: 12px; /* 圆角 */
|
|
|
- overflow: hidden; /* 隐藏溢出部分 */
|
|
|
- position: relative; /* 为绝对定位提供参考 */
|
|
|
+ height: 120px; /* 高度与要求一致 */
|
|
|
+ width: 120px; /* 宽度与要求一致 */
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ background-color: #f5f5f5; /* 背景色 */
|
|
|
+ border-radius: 12px; /* 圆角 */
|
|
|
+ overflow: hidden; /* 隐藏溢出部分 */
|
|
|
+ position: relative; /* 为绝对定位提供参考 */
|
|
|
}
|
|
|
|
|
|
.artistic-text {
|
|
|
- font-size: 1rem; /* 初始字体大小 */
|
|
|
- font-weight: bold; /* 加粗字体 */
|
|
|
- text-align: center; /* 居中对齐 */
|
|
|
- background: linear-gradient(90deg, #c86fc9, #3023ae);
|
|
|
- -webkit-background-clip: text; /* 背景裁剪 */
|
|
|
- -webkit-text-fill-color: transparent; /* 字体颜色透明 */
|
|
|
- white-space: nowrap; /* 防止换行 */
|
|
|
- overflow: hidden; /* 隐藏溢出部分 */
|
|
|
- text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
|
|
- transform: scale(1); /* 默认缩放为 1 */
|
|
|
- transition: transform 0.2s ease; /* 动画过渡效果 */
|
|
|
- max-width: 100%; /* 最大宽度为 100% */
|
|
|
+ font-size: 1rem; /* 初始字体大小 */
|
|
|
+ font-weight: bold; /* 加粗字体 */
|
|
|
+ text-align: center; /* 居中对齐 */
|
|
|
+ background: linear-gradient(90deg, #c86fc9, #3023ae);
|
|
|
+ -webkit-background-clip: text; /* 背景裁剪 */
|
|
|
+ -webkit-text-fill-color: transparent; /* 字体颜色透明 */
|
|
|
+ white-space: nowrap; /* 防止换行 */
|
|
|
+ overflow: hidden; /* 隐藏溢出部分 */
|
|
|
+ text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
|
|
+ transform: scale(1); /* 默认缩放为 1 */
|
|
|
+ transition: transform 0.2s ease; /* 动画过渡效果 */
|
|
|
+ max-width: 100%; /* 最大宽度为 100% */
|
|
|
}
|
|
|
|
|
|
/* 当文本溢出时，缩小文本以适应容器 */
|
|
|
.artistic-text-container:has(.artistic-text) {
|
|
|
- /* 计算并缩放文本 */
|
|
|
- animation: scale-text 0.2s forwards;
|
|
|
+ /* 计算并缩放文本 */
|
|
|
+ animation: scale-text 0.2s forwards;
|
|
|
}
|
|
|
|
|
|
/* @keyframes scale-text {
|
