645 lines
22 KiB
Vue
645 lines
22 KiB
Vue
<template>
|
||
<el-row class="mt-8px" :gutter="8" justify="space-between" >
|
||
<el-col :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
|
||
<el-card shadow="hover">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">新闻速递</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
@click.prevent="moreNews"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-card shadow="never" style="margin-bottom: 5px;height: 280px">
|
||
<el-carousel :interval="4000" height="240px" motion-blur @change="handleCarouselChange">
|
||
<el-carousel-item v-for="item in filteredList" :key="item.id">
|
||
<el-image style="width: 100%; height: 100%" :src="imgUrl+item.newsImg" alt="无图片" :title="item.newsName"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</el-card>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<span class="ellipsis" v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].newsName}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">内部刊物</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-row>
|
||
<el-col
|
||
v-for="(item,index) in todo"
|
||
:key="`card-${index}`"
|
||
>
|
||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">系统聚焦</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-row>
|
||
<el-col
|
||
v-for="(item,index) in todo"
|
||
:key="`card-${index}`"
|
||
>
|
||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||
<el-card shadow="hover">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">事务</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
@click.prevent="more"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-tabs type="border-card" class="demo-tabs" @tab-click="moreName">
|
||
<el-tab-pane label="待办">
|
||
<el-table v-loading="loading" :data="TodoList" height="250">
|
||
<el-table-column align="center" label="流程" prop="processInstance.name" style="width: 20%;" />
|
||
<el-table-column
|
||
align="center"
|
||
label="发起人"
|
||
prop="processInstance.startUser.nickname"
|
||
style="width: 20%;"
|
||
/>
|
||
<el-table-column align="center" label="当前任务" prop="name" style="width: 20%;" />
|
||
<el-table-column
|
||
:formatter="dateFormatter2"
|
||
align="center"
|
||
label="任务时间"
|
||
prop="createTime"
|
||
width="180"
|
||
/>
|
||
<el-table-column align="center" label="操作" fixed="right" style="width: 20%;">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="handleAudit(scope.row)">办理</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- <el-col v-for="(item,index) in TodoList" :key="`card-${index}`">-->
|
||
<!-- <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.processInstance.name}}</span>-->
|
||
<!-- </el-col>-->
|
||
</el-tab-pane>
|
||
<el-tab-pane label="已办" name="BpmDoneTask">
|
||
<el-table v-loading="loading" :data="DoneList" height="250">
|
||
<el-table-column align="center" label="流程" prop="processInstance.name" style="width: 20%;" />
|
||
<el-table-column
|
||
align="center"
|
||
label="发起人"
|
||
prop="processInstance.startUser.nickname"
|
||
style="width: 20%;"
|
||
/>
|
||
<el-table-column align="center" label="当前任务" prop="name" style="width: 20%;" />
|
||
<el-table-column align="center" label="审批状态" prop="status" style="width: 20%;" >
|
||
<template #default="scope">
|
||
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作" fixed="right" style="width: 20%;">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="handleAudit(scope.row)">历史</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="抄送" name="BpmProcessInstanceCopy">
|
||
<el-table v-loading="loading" :data="CopyList" height="250">
|
||
<el-table-column align="center" label="流程名" prop="processInstanceName" style="width: 20%;" />
|
||
<el-table-column align="center" label="流程发起人" prop="startUserName" style="width: 20%;" />
|
||
<el-table-column align="center" label="抄送任务" prop="taskName" style="width: 20%;" />
|
||
<el-table-column align="center" label="抄送人" prop="creatorName" style="width: 20%;" />
|
||
<el-table-column align="center" label="操作" fixed="right" style="width: 20%;">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="handleAudit2(scope.row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">报销单</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-row>
|
||
<el-col
|
||
v-for="(item,index) in todo"
|
||
:key="`card-${index}`"
|
||
>
|
||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">会议室管理</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-row>
|
||
<el-col
|
||
v-for="(item,index) in todo"
|
||
:key="`card-${index}`"
|
||
>
|
||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||
<el-card shadow="hover">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">新闻</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
@click.prevent="moreNews"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<div v-for="(item, index) in filteredList2" :key="`dynamics-${index}`">
|
||
<div class="flex items-center">
|
||
<div>
|
||
<div class="text-14px" @click="openDialog(item.contentType,item.id)">
|
||
<dict-tag :type="DICT_TYPE.HOME_CONTENT_STATUS" :value="item.contentType" /> :
|
||
{{ item.newsName }}
|
||
</div>
|
||
<div class="text-12px text-gray-400">
|
||
{{ formatTime(item.newsCreatetime, 'yyyy-MM-dd') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-divider />
|
||
</div>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">邮件</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-row>
|
||
<el-table stripe :data="tableData" border style="width: 100%" max-height="300">
|
||
<el-table-column :formatter="dateFormatter2" prop="Date" label="时间" width="100" />
|
||
<el-table-column prop="Name" label="发件人" width="70" />
|
||
<el-table-column
|
||
prop="Address"
|
||
label="标题"
|
||
show-overflow-tooltip
|
||
/>
|
||
</el-table>
|
||
</el-row>
|
||
</el-skeleton>
|
||
</el-card>
|
||
<el-card shadow="hover" class="mt-8px">
|
||
<template #header >
|
||
<div class="SystemThem" style="height: 2px;"></div>
|
||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||
<span style="display: inline-block;">日历</span>
|
||
<el-link
|
||
type="primary"
|
||
:underline="false"
|
||
target="_blank"
|
||
style="margin-top: 10px"
|
||
>
|
||
更多>>
|
||
</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :loading="loading" animated>
|
||
<el-calendar ref="calendar" class="custom-calendar">
|
||
<template #header = "{date}">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<span style="display: inline-block;font-size: 10px">{{ date }}</span>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-button-group style="display: flex; justify-content: space-between;">
|
||
<el-button size="small" @click="selectDate('prev-year')">上年</el-button>
|
||
<el-button size="small" @click="selectDate('prev-month')">上月</el-button>
|
||
<el-button size="small" @click="selectDate('today')">今天</el-button>
|
||
<el-button size="small" @click="selectDate('next-year')">下年</el-button>
|
||
<el-button size="small" @click="selectDate('next-month')">下月</el-button>
|
||
</el-button-group>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-calendar>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
|
||
<el-form >
|
||
<el-form-item >
|
||
<span style="font-size: 20px; font-weight: bold;">{{formData.newsName}}</span>
|
||
<el-divider style="border-top: none; margin: 0;"/>
|
||
<span style="font-size: 12px">发布时间: {{formatTime(formData.newsCreatetime,'yyyy-MM-dd')}}</span>
|
||
<el-divider style="margin-top: 10px"/>
|
||
<span style="line-height: 1.2" v-html="formData.newsContent"></span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">确 定</el-button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { formatTime } from '@/utils'
|
||
import type {Todo, Email} from './types'
|
||
import {dateFormatter, dateFormatter2} from "@/utils/formatTime";
|
||
import {DICT_TYPE} from "@/utils/dict";
|
||
import {imgApi, imgVO} from "@/api/home/homeimg";
|
||
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||
import * as TaskApi from "@/api/bpm/task";
|
||
import * as ProcessInstanceApi from "@/api/bpm/processInstance";
|
||
const { push } = useRouter()
|
||
|
||
defineOptions({ name: 'Home' })
|
||
|
||
const loading = ref(false)
|
||
const imgList = ref<imgVO[]>([]) // 列表的数据
|
||
const total = ref(0) // 列表的总页数
|
||
|
||
const pageNo = ref<number>(1)
|
||
const calendar = ref<CalendarInstance>()
|
||
const selectDate = (val: CalendarDateType) => {
|
||
if (!calendar.value) return
|
||
calendar.value.selectDate(val)
|
||
}
|
||
const handleCarouselChange = async (currentIndex:number) => {
|
||
pageNo.value=currentIndex+1
|
||
|
||
}
|
||
|
||
/** 利用路由实现新闻跳转 */
|
||
const moreNews = async () => {
|
||
await push({name: 'Homeimg'})
|
||
}
|
||
|
||
/** 动态切换路由的参数 */
|
||
const bpmRouterNames = ref('BpmTodoTask')
|
||
|
||
/** 流程模块需要切换路由 */
|
||
const moreName = async (tab:any) => {
|
||
const name = tab.props?.name
|
||
if (name !== undefined){
|
||
bpmRouterNames.value = name
|
||
}
|
||
}
|
||
|
||
/** 利用路由实现流程跳转 */
|
||
const more = async () => {
|
||
await push({name: `${bpmRouterNames.value}`})
|
||
}
|
||
|
||
/** 处理审批按钮 */
|
||
const handleAudit = (row: any) => {
|
||
console.log("processInstanceId",row.processInstanceId.id)
|
||
push({
|
||
name: 'BpmProcessInstanceDetail',
|
||
query: {
|
||
id: row.processInstance.id
|
||
}
|
||
})
|
||
}
|
||
/** 处理审批按钮 */
|
||
const handleAudit2 = (row: any) => {
|
||
push({
|
||
name: 'BpmProcessInstanceDetail',
|
||
query: {
|
||
id: row.processInstanceId
|
||
}
|
||
})
|
||
}
|
||
let tableData = reactive<Email[]>([])
|
||
const getTableData = async () => {
|
||
const data = [
|
||
{
|
||
Date:new Date(),
|
||
Name:'张三',
|
||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||
},
|
||
{
|
||
Date:new Date(),
|
||
Name:'李四',
|
||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||
},
|
||
{
|
||
Date:new Date(),
|
||
Name:'王二',
|
||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||
},
|
||
{
|
||
Date:new Date(),
|
||
Name:'麻子',
|
||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||
},
|
||
{
|
||
Date:new Date(),
|
||
Name:'张三',
|
||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||
},
|
||
]
|
||
tableData = Object.assign(tableData, data)
|
||
}
|
||
//获取待办已办信息
|
||
let todo = reactive<Todo[]>([])
|
||
const getTodo = async () => {
|
||
const data = [
|
||
{
|
||
title: '集团政研会六届五次会员大会在贵州遵义召开',
|
||
type: '请假',
|
||
content: '',
|
||
date: new Date()
|
||
},
|
||
{
|
||
title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
|
||
type: '任务',
|
||
content: '',
|
||
date: new Date()
|
||
},
|
||
{
|
||
title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
|
||
type: '出差',
|
||
content: '',
|
||
date: new Date()
|
||
},
|
||
{
|
||
title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
|
||
type: '会议',
|
||
content: '需要你在某日某月开会',
|
||
date: new Date()
|
||
},
|
||
{
|
||
title: '集团政研会六届五次会员大会在贵州遵义召开',
|
||
type: '会议',
|
||
content: '需要你在某日某月开会',
|
||
date: new Date()
|
||
},
|
||
{
|
||
title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
|
||
type: '会议',
|
||
content: '需要你在某日某月开会',
|
||
date: new Date()
|
||
}
|
||
]
|
||
todo = Object.assign(todo, data)
|
||
}
|
||
const formData = ref({
|
||
id: undefined,
|
||
newsName: undefined,
|
||
newsCreatetime: undefined,
|
||
newsImg: [],
|
||
newsContent: undefined,
|
||
contentType: undefined,
|
||
newsStatus: undefined,
|
||
status: undefined,
|
||
deptId: undefined,
|
||
userId: undefined,
|
||
})
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const dialogTitle = ref('') // 弹窗的标题
|
||
const openDialog = async (type:number,id?:number) => {
|
||
dialogVisible.value = true
|
||
dialogTitle.value = type===1?'公告':'通知'
|
||
resetForm()
|
||
if (id) {
|
||
formData.value = await imgApi.getimg(id)
|
||
}
|
||
}
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
Id: undefined,
|
||
newsName: undefined,
|
||
newsCreatetime: undefined,
|
||
newsImg: undefined,
|
||
newsContent: undefined,
|
||
contentType: undefined,
|
||
newsStatus: undefined,
|
||
status: undefined,
|
||
deptId: undefined,
|
||
userId: undefined,
|
||
}
|
||
}
|
||
const filteredList = computed(() => {
|
||
return imgList.value.filter(item => item.newsStatus !== 0 && item.status!==0);
|
||
});
|
||
// const filteredList2 = computed(() => {
|
||
// return imgList.value.filter(item => item.contentStatus !== 0 );
|
||
// });
|
||
const filteredList2 = computed(() => {
|
||
return imgList.value
|
||
.filter(item => item.status !== 0)
|
||
.slice(0, 3); // 限制只显示前3条
|
||
});
|
||
const queryParamsImg = reactive({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
id: undefined,
|
||
newsName: undefined,
|
||
newsCreatetime: [],
|
||
newsImg: undefined,
|
||
newsContent: undefined,
|
||
contentType: undefined,
|
||
newsStatus: undefined,
|
||
status: undefined,
|
||
deptId: undefined,
|
||
userId: undefined,
|
||
createTime: [],
|
||
})
|
||
const imgUrl = "//images.weserv.nl/?url="
|
||
|
||
const TodoList = ref([]) // 列表的数据
|
||
const queryParamsTodo = reactive({
|
||
pageNo: 1,
|
||
pageSize: 6,
|
||
name: '',
|
||
createTime: []
|
||
})
|
||
const DoneList = ref([]) // 列表的数据
|
||
const queryParamsDone = reactive({
|
||
pageNo: 1,
|
||
pageSize: 6,
|
||
name: '',
|
||
createTime: []
|
||
})
|
||
const CopyList = ref([]) // 列表的数据
|
||
const queryParamsCopy = reactive({
|
||
pageNo: 1,
|
||
pageSize: 6,
|
||
processInstanceId: '',
|
||
processInstanceName: '',
|
||
createTime: []
|
||
})
|
||
/** 查询列表 */
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
const imgData = await imgApi.getimgPage(queryParamsImg)
|
||
const TodoData = await TaskApi.getTaskTodoPage(queryParamsTodo)
|
||
const DoneData = await TaskApi.getTaskDonePage(queryParamsDone)
|
||
const CopyData = await ProcessInstanceApi.getProcessInstanceCopyPage(queryParamsCopy)
|
||
CopyList.value = CopyData.list
|
||
DoneList.value = DoneData.list
|
||
TodoList.value = TodoData.list
|
||
imgList.value = imgData.list
|
||
total.value = imgData.total
|
||
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const getAllApi = async () => {
|
||
await Promise.all([
|
||
getTableData(),
|
||
getTodo(),
|
||
])
|
||
loading.value = false
|
||
}
|
||
|
||
getAllApi()
|
||
|
||
/** 初始化 **/
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-carousel__item h3 {
|
||
opacity: 0.75;
|
||
line-height: 200px;
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
|
||
.el-table .warning-row {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.SystemThem {
|
||
background-color: var(--el-color-primary);
|
||
}
|
||
.custom-calendar {
|
||
height: 310px; /* 根据需要调整高度 */
|
||
}
|
||
.custom-calendar .el-calendar-table__row {
|
||
height: 40px; /* 设置行高度，根据需要调整 */
|
||
}
|
||
.custom-calendar .el-calendar-day {
|
||
height: 100%; /* 设置每个日历单元格的高度为100% */
|
||
display: flex; /* 使用 flexbox */
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
.ellipsis {
|
||
display: inline-block; /* 需要是块状元素，span默认是行内元素，所以使用inline-block */
|
||
max-width: 400px; /* 设置最大宽度，超出部分将显示省略号 */
|
||
white-space: nowrap; /* 禁止换行 */
|
||
overflow: hidden; /* 超出容器的内容隐藏 */
|
||
text-overflow: ellipsis; /* 超出的内容以省略号显示 */
|
||
}
|
||
</style>
|