自己写滚动条

参考文章:
bootstrap table 固定table最底部的滚动条到屏幕底部_侠课的博客-CSDN博客

vue滚动条始终悬浮在页面最下方_Cardhu丶的博客-CSDN博客_vue滚动条默认在最下面

<template>
	<div class="generalView">
		<!-- <div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item style="font-size: 20px !important">创伤质控指标</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-divider></el-divider> -->
		<div class="form-search date-picker">
			<el-form class="form-search-input">
				<!-- <elDatePickerQuarter></elDatePickerQuarter> -->
				<el-form-item label="填报周期" v-if="centerType !== 'mind'">
					<el-date-picker
						v-model="findPatientForm.start_time"
						type="month"
						value-format="YYYY-MM"
						placeholder="开始时间"
						:disabled-date="(time:any)=>disabledMonthStartDate(time,findPatientForm.end_time)"
					>
					</el-date-picker>
					<span class="picer-text">至</span>
					<el-date-picker
						v-model="findPatientForm.end_time"
						type="month"
						value-format="YYYY-MM"
						:disabled-date="(time:any)=>disabledMonthEndDate(time,findPatientForm.start_time)"
						placeholder="结束时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="填报周期" v-if="centerType === 'mind'">
					<elDatePickerQuarter
						ref="sonElDatePicker"
						@ok="ok"
						:time_flag="'start'"
						:place_holder="'开始时间'"
					></elDatePickerQuarter>
					<span class="picer-text">至</span>
					<elDatePickerQuarter
						ref="sonElDatePicker"
						@ok="ok"
						:time_flag="'end'"
						:place_holder="'结束时间'"
					></elDatePickerQuarter>
				</el-form-item>
				<el-form-item label="医院名称">
					<el-select
						v-model="findPatientForm.hospital_id"
						filterable
						remote
						reserve-keyword
						placeholder="请输入"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in hospitalList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<div class="search-button-container">
					<el-button type="success" @click="getQualityControlList">搜索</el-button>
					<el-button @click="clearForm">重置</el-button>
				</div>
			</el-form>
			<!-- <query-condition :form-data="formData" :form-item="formItem"></query-condition> -->
		</div>
		<div class="table-container">
			<div class="container-right-button">
				<el-button v-auth="`boardExport`" type="primary" @click="exportFn">导出</el-button>
			</div>
			<div
				class="trauma-table"
				v-loading="loading"
				id="allTable"
				@scroll="sysHandleScroll()"
				@mouseover="changeFlag(false)"
			>
				<div class="hosipital-name-container">
					<div class="table-head-one" :class="centerType == 'trauma' ? 'trauma' : ''">质控指标</div>
					<div class="table-content-item" v-for="(item, index) in qualityNineData.info" :key="index">
						{{ item[0] }}
					</div>
				</div>
				<div class="center-table" id="tabTable">
					<div class="table-head">
						<template v-for="(item, index) in qualityNineData.title" :key="index">
							<div
								:class="{ 'table-head-item': index !== 0, 'head-item': index === 0 || index === 1 }"
								v-if="index != 0 || centerType == 'trauma'"
							>
								<div
									class="table-head-first"
									:class="index === qualityNineData.title.length - 1 ? 'last' : ''"
									v-if="item.first_title && item.second_title.length !== 0"
								>
									{{ item.first_title }}
								</div>
								<div class="table-trauma-head" v-if="!item.first_title && centerType === 'trauma'">
									<template v-for="(item1, index) in item.second_title" :key="index">
										<div
											class="table-head-one"
											:class="[
												centerType === 'trauma' ? 'table-head-one-trauma' : '',
												index === item.second_title.length - 1 ? 'last' : ''
											]"
											v-if="index != 0"
										>
											{{ item1 }}
										</div>
									</template>
								</div>
								<div
									class="table-head-one"
									v-if="item.second_title.length == 0 && centerType !== 'trauma'"
								>
									{{ item.first_title }}
								</div>
								<div class="table-head-second" v-if="item.first_title && item.second_title.length > 0">
									<div
										class="table-head-second-item"
										:class="
											index === qualityNineData.title.length - 1 &&
											index1 === item.second_title.length - 1
												? 'last'
												: ''
										"
										v-for="(item2, index1) in item.second_title"
										:key="index1"
										:title="item2"
									>
										{{ item2 }}
									</div>
								</div>
							</div>
						</template>
					</div>
					<div class="table-body" v-if="qualityNineData.info.length > 0">
						<div class="table-body-item" v-for="(item, index) in qualityNineData.info" :key="index">
							<!-- <div class="table-items" v-if="item.flag === 'traumaRate' || item.flag === 'checkList'">
							<div class="item-left">
								<div class="item-left-name">
									{{ item.title }}
								</div>
								<div class="item-left-title">
									<div
										class="item-left-title-pic"
										:class="{ 'item-left-title-pic1': ind === item.detail.length - 1 }"
										v-for="(arg, ind) in item.detail"
										:key="ind"
									>
										{{ arg.title }}
									</div>
								</div>
							</div>
							<div class="item-right">
								<div
									class="body-item"
									:class="{ 'line-body': index1 === item.detail.length - 1 }"
									v-for="(item1, index1) in item.detail"
									:key="index1"
								>
									<div class="left-item">
										<span>{{ item1.desc }}</span>
									</div>
									<div class="right-item line-item">
										{{ item1.hosipital ? item1.hosipital : '--' }}
									</div>
									<div class="right-item line-item">{{ item1.country ? item1.country : '--' }}</div>
								</div>
							</div>
						</div> -->
							<template v-for="(item1, index) in item" :key="index">
								<div
									class="table-content-item"
									:class="[
										centerType === 'trauma' ? 'table-content-item-trauma' : '',
										index === item.length - 1 ? 'last' : ''
									]"
									v-if="index != 0"
								>
									{{ item1 }}
								</div>
							</template>
						</div>
					</div>
					<div class="no-data" v-else>暂无数据</div>
				</div>
			</div>
			<div
				class="table-scrool"
				id="externalForm"
				@scroll="handleScroll()"
				@mouseover="changeFlag(true)"
				:style="{ width: `${tableScroll.screenWidth + 'px'}` }"
				style="background-color: aqua"
			>
				<div
					:style="{ width: `${tableScroll.listWidth + 'px'}` }"
					style="height: 10px; background-color: red"
				></div>
			</div>
		</div>
		<!-- <div class="pagination">
			<el-pagination
				background
				layout="total,sizes, prev, pager, next,jumper"
				:current-page="findRoleForm.page"
				:page-size="findRoleForm.page_size"
				:page-sizes="[10, 20, 30, 40]"
				:total="pageTotal"
				@size-change="handleSizeChange"
				@current-change="handlePageChange"
			></el-pagination>
		</div> -->
	</div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive, onMounted, onActivated, nextTick } from 'vue'
import {
	cardioAdminDownLoadBoardApi,
	traumaAdminDownLoadBoardApi,
	nuclearAdminDownLoadBoardApi,
	breathAdminDownLoadBoardApi,
	nerveAdminDownLoadBoardApi,
	bloodAdminDownLoadBoardApi,
	nerveAdminDataBoardApi,
	getRoleList,
	cardioAdminDataBoardApi,
	nuclearAdminDataBoardApi,
	traumaAdminDataBoardApi,
	bloodAdminDataBoardApi,
	breathAdminDataBoardApi,
	qualityControlListApi,
	getPatientListApi,
	postAddPatientApi,
	postDelPatientApi,
	gethospitalMemberApi
} from '@/api/api'
import { CODE_SUCCESS } from '@/utils/cont'
import { ElMessage, ElMessageBox } from 'element-plus'
import QueryCondition from '@components/QueryCondition/QueryCondition.vue'
import { storeToRefs } from 'pinia'
import { useReportStore } from '@/store/report'
import { disabledDate, disabledMonthStartDate, disabledMonthEndDate, disabledEndDate } from '@/utils/timeCompute'

const formItem = reactive([
	{
		type: 'time',
		label: '上报周期',
		value: 'start_time',
		value2: 'end_time'
	},
	{
		type: 'text',
		label: '医院名称',
		value: 'name'
	}
])
const formData = {
	end_time: '',
	start_time: '',
	status: ''
}
const reportStore = useReportStore()
const { centerType } = storeToRefs(reportStore)

const tableData = ref([])
const pageTotal = ref(0)
const timeType = ref(0)
const loading = ref(true)
const findPatientForm = reactive({
	start_time: '',
	end_time: '',
	hospital_id: ''
	// patient_name: '',
	// out_emgcy_no: '',
	// visit_no: '',
	// reporting_status: '',
	// severity: '', //严重程度
	// page: 1,
	// page_size: 20
})
const findRoleForm = reactive({
	page: 1,
	page_size: 10
})
const getData = () => {
	getRoleList(findRoleForm).then((res: any) => {
		if (res.code === CODE_SUCCESS) {
			tableData.value = res.data.list
			pageTotal.value = res.data.count || 0
		} else {
			ElMessage.error(res.msg)
		}
	})
}
getData()
// 改变每页条数
const handleSizeChange = (val: number) => {
	findRoleForm.page_size = val
	getData()
}
// 分页导航
const handlePageChange = (val: any) => {
	findRoleForm.page = val
	getData()
}
const ok = (tempdate: any, time_flag: any) => {
	console.log('调用了ok')

	if (time_flag === 'start') {
		findPatientForm.start_time = tempdate || ''
	} else if (time_flag === 'end') {
		findPatientForm.end_time = tempdate || ''
	}
}
// const disabledDate = (time: any) => {
// 	const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
// 	const tempTime = Date.now() - timeRange

// 	if (findPatientForm.end_time) {
// 		const minTime = new Date(findPatientForm.end_time).getTime() - timeRange * 60
// 		const maxTime = new Date(findPatientForm.end_time).getTime()
// 		if (tempTime < maxTime) {
// 			return time.getTime() <= minTime || time.getTime() > tempTime
// 		}
// 		return time.getTime() <= minTime || time.getTime() > maxTime
// 	}
// 	return time.getTime() >= tempTime
// }
// const disabledEndDate = (time: any) => {
// 	const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
// 	const tempTime = Date.now() - timeRange
// 	if (findPatientForm.start_time) {
// 		const minTime = new Date(findPatientForm.start_time).getTime()
// 		const maxTime = new Date(findPatientForm.start_time).getTime() + timeRange * 60
// 		if (tempTime < maxTime) {
// 			return time.getTime() <= minTime || time.getTime() > tempTime
// 		}
// 		return time.getTime() <= minTime || time.getTime() > maxTime
// 	}
// 	return time.getTime() >= tempTime
// }
let left = ['zkong', '省平均数据', 'shipingjun', 's医院', 'ttttt']

const qualityNineData = reactive({
	title: [
		{
			first_title: '基本指标',
			second_title: [
				'门诊病人数',
				'出院病人数',
				'出院治愈好转例数',
				'出院诊断符合人数',
				'平均住院日',
				'术前平均住院日',
				'住院手术例数',
				'四级手术例数',
				'住院死亡例数',
				'非计划再手术例数',
				'先心开放手术例数',
				'先心介入例数',
				'心血管手术总数',
				'瓣膜置换例数',
				'瓣膜成形例数',
				'冠脉搭桥例数',
				'大血管开放手术例数',
				'主动脉腔内修复例数',
				'肺癌手术例数',
				'食管癌手术例数',
				'出院治愈好转率',
				'出院诊断符合率',
				'四级手术比例',
				'住院死亡率',
				'非计划再手术率',
				'先心开放手术率',
				'先心介入手术率',
				'心血管手术率',
				'瓣膜置换率',
				'瓣膜成形率',
				'冠脉搭桥率',
				'大血管手术率',
				'主动脉腔内修复率',
				'肺癌手术率',
				'食管癌手术率'
			]
		},
		{
			first_title: '先心介入',
			second_title: [
				'介入治疗成功例数',
				'严重房室传导阻滞发生例数',
				'封堵器移位或脱落发生例数',
				'术后心包填塞发生例数',
				'住院死亡例数',
				'介入治疗成功率',
				'严重房室传导阻滞发生率',
				'封堵器移位或脱落发生率',
				'术后心包填塞发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '冠脉搭桥',
			second_title: [
				'术后心梗发生例数',
				'乳内动脉桥使用例数',
				'术后血透发生例数',
				'术后脑卒中发生例数',
				'住院死亡例数',
				'术后心梗发生率',
				'乳内动脉桥使用率',
				'术后血透发生率',
				'术后脑卒中发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '大血管开放手术',
			second_title: [
				'术后脑卒中发生例数',
				'术后血透发生例数',
				'术后心梗发生例数',
				'住院死亡例数',
				'术后脑卒中发生率',
				'术后血透发生率',
				'术后心梗发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '主动脉腔内修复',
			second_title: [
				'术后血透发生例数',
				'内漏发生例数',
				'术后心梗发生例数',
				'术后脑卒中发生例数',
				'术后脊髓损伤发生例数',
				'住院死亡例数',
				'术后血透发生率',
				'内漏发生率',
				'术后心梗发生率',
				'术后脑卒中发生率',
				'术后脊髓损伤发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '瓣膜手术',
			second_title: [
				'术后瓣周漏发生例数',
				'术后血透发生例数',
				'出院抗凝药物使用例数',
				'术后脑卒中发生例数',
				'住院死亡例数',
				'术后瓣周漏发生率',
				'术后血透发生率',
				'出院抗凝药物使用率',
				'术后脑卒中发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '先心开放手术',
			second_title: [
				'术后血透发生例数',
				'严重房室传导阻滞发生例数',
				'住院死亡例数',
				'术后血透发生率',
				'严重房室传导阻滞发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '肺癌',
			second_title: [
				'腔镜手术例数',
				'呼衰发生例数',
				'支气管胸膜瘘发生例数',
				'住院死亡例数',
				'腔镜手术率',
				'呼衰发生率',
				'支气管胸膜瘘发生率',
				'住院死亡率'
			]
		},
		{
			first_title: '食管癌',
			second_title: [
				'微创手术例数',
				'吻合口瘘例数',
				'呼衰发生例数',
				'喉返神经损伤例数',
				'住院死亡例数',
				'微创手术率',
				'吻合口瘘率',
				'呼衰发生率',
				'喉返神经损伤率',
				'住院死亡率'
			]
		}
	],
	info: [[]]
})
const exportFn = () => {
	if (findPatientForm.end_time && !findPatientForm.start_time) {
		ElMessage.error('请选择开始时间')
		return
	}
	if (findPatientForm.start_time && !findPatientForm.end_time) {
		ElMessage.error('请选择结束时间')
		return
	}
	let name = '数据看板.xls'
	let tempDeleteApi = traumaAdminDownLoadBoardApi
	if (centerType.value === 'trauma') {
		tempDeleteApi = traumaAdminDownLoadBoardApi
		name = '创伤中心数据看板.xls'
	} else if (centerType.value === 'mind') {
		tempDeleteApi = cardioAdminDownLoadBoardApi
		name = '心胸外科数据看板.xls'
	} else if (centerType.value === 'breathe') {
		tempDeleteApi = breathAdminDownLoadBoardApi
		name = '呼吸内科数据看板.xls'
	} else if (centerType.value === 'nerve') {
		tempDeleteApi = nerveAdminDownLoadBoardApi
		name = '神经外科数据看板.xls'
	} else if (centerType.value === 'nuclearMedicine') {
		tempDeleteApi = nuclearAdminDownLoadBoardApi
		name = '核医学科数据看板.xls'
	} else if (centerType.value === 'blood') {
		tempDeleteApi = bloodAdminDownLoadBoardApi
		name = '血液内科数据看板.xls'
	}
	tempDeleteApi({ ...findPatientForm, download: 1 }).then((res: any) => {
		const myFile = new Blob([res], { type: '' })
		const reader = new FileReader()
		reader.readAsArrayBuffer(myFile) // res为后端返回的文件流
		reader.onload = (e: any) => {
			console.log(e)
			const { result } = e.target
			const blob = new Blob([result], { type: '' })
			const url = URL.createObjectURL(blob)
			let link = document.createElement('a')
			link.href = url
			link.setAttribute('download', name)
			link.style.display = 'none'
			document.getElementsByTagName('link')
			link.click()
			link.remove()
			URL.revokeObjectURL(link.href) // 释放URL对象
		}
	})
}

const changeDate = (flag: any) => {
	if (flag === 1) {
		findPatientForm.start_time = ''
		findPatientForm.end_time = ''
		getQualityControlList()
	}
}
const hospitalList = ref<Object>([])
const getHospital = () => {
	gethospitalMemberApi({
		hospital_name: '',
		register_begin: '',
		register_end: '',
		credit_code: '',
		page: 1,
		page_size: 1000
	}).then((res: any) => {
		if (res.code === CODE_SUCCESS) {
			hospitalList.value = res.data.list
		}
	})
}
getHospital()
let sonElDatePicker: any = ref(null)
let sonElDatePicker1: any = ref(null)
const clearForm = () => {
	findPatientForm.start_time = ''
	findPatientForm.end_time = ''
	findPatientForm.hospital_id = ''
	sonElDatePicker.value.clearData()
	sonElDatePicker1.value.clearData()
	getQualityControlList()
}
let tableScroll = reactive({
	screenWidth: 0,
	listWidth: 0,
	flag: false,
	clientHeight: 0,
	tableHeight: 0
})
function setSize() {
	// 把原来外层的宽度赋值给新滚动条的外层
	tableScroll.screenWidth = document.getElementById('allTable').offsetWidth
	console.log('offsetWidth', document.getElementById('allTable').offsetWidth)
	console.log('info', qualityNineData.info[0])
	// 把表格的宽度赋值给新滚动条的内层以撑出原本的滚动条的样子
	tableScroll.listWidth = qualityNineData.info[0].length * 124
}
const getQualityControlList = () => {
	loading.value = false

	if (findPatientForm.end_time && !findPatientForm.start_time) {
		ElMessage.error('请选择开始时间')
		return
	}
	if (findPatientForm.start_time && !findPatientForm.end_time) {
		ElMessage.error('请选择结束时间')
		return
	}
	let tempDeleteApi = traumaAdminDataBoardApi
	if (centerType.value === 'trauma') {
		tempDeleteApi = traumaAdminDataBoardApi
	} else if (centerType.value === 'mind') {
		tempDeleteApi = cardioAdminDataBoardApi
	} else if (centerType.value === 'breathe') {
		tempDeleteApi = breathAdminDataBoardApi
	} else if (centerType.value === 'nerve') {
		tempDeleteApi = nerveAdminDataBoardApi
	} else if (centerType.value === 'nuclearMedicine') {
		tempDeleteApi = nuclearAdminDataBoardApi
	} else if (centerType.value === 'blood') {
		tempDeleteApi = bloodAdminDataBoardApi
	}
	loading.value = true
	tempDeleteApi(findPatientForm).then((res: any) => {
		if (res.code === CODE_SUCCESS) {
			loading.value = false
			qualityNineData.info = res.data.info
			qualityNineData.title = res.data.title
			loading.value = false
		}
	})
	setSize()
}
function changeFlag(flag) {
	tableScroll.flag = flag
}
// 左右滚动条滚动同步
function sysHandleScroll() {
	if (!tableScroll.flag) {
		document.getElementById('externalForm').scrollLeft = document.getElementById('tabTable').scrollLeft
	}
}
function handleScroll() {
	document.getElementById('tabTable').scrollLeft = document.getElementById('externalForm').scrollLeft
}
onMounted(() => {
	getQualityControlList()
	nextTick(() => {
		console.log('document.getElementById', document.getElementById('tabTable')?.clientHeight)

		tableScroll.clientHeight = document.documentElement.clientHeight
		tableScroll.tableHeight = document.getElementById('tabTable')?.clientHeight || 0
	})
	window.addEventListener('resize', setSize, false)
})
watch(
	() => centerType.value,
	(value) => {
		getQualityControlList()
	}
)
</script>

<style lang="scss" scoped>
.container-right-button {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
	// margin-right: 20px;
}
.trauma-table {
	// background: #ffffff;
	// border-radius: 4px;
	// padding: 20px;
	display: flex;
	.trauma-table-time {
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #e9564a;
		padding: 0 0 20px 0;
	}
}
.center-table {
	/* 设置滚动条的样式 */
	/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	/*定义滚动条轨道内阴影+圆角*/
	::-webkit-scrollbar-track {
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.05);
	}

	/*定义滑块内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	/* x轴和y轴滚动条交叉地方 */
	::-webkit-scrollbar-corner {
		border-radius: 10px;
	}
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #333333;
	border: 1px solid #dddddd;
	line-height: 46px;
	overflow-x: auto;
	.table-head {
		flex: 0 0 46px;
		font-weight: bold;
		display: flex;
		background: #f5f5f5;
		width: 100%;
		div {
			// flex: 1;
			text-align: center;
		}
		.table-head-item {
			// border-left: 1px solid #dddddd;
			background: #f5f5f5;
			.table-head-first {
				border-bottom: 1px solid #ddd;
				border-right: 1px solid #ddd;
				&.last {
					border-right: none;
				}
			}

			.table-head-one {
				width: 150px;
				border-right: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				line-height: 25px;
				background: #f5f5f5;
				&.last {
					border-right: none;
				}
			}
			.table-head-one-trauma {
				width: 130px;
			}
			.table-head-second {
				display: flex;
				flex-wrap: nowrap;
				// border-right: 1px solid #ddd;
				height: 90px;
				overflow: hidden;
				.table-head-second-item {
					// height: 100%;
					font-weight: 400;
					padding: 0 10px;
					line-height: 30px;
					width: 100px;
					border-right: 1px solid #ddd;
					border-bottom: 1px solid #ddd;
					&.last {
						border-right: none;
					}
				}
			}
		}
		.head-item {
			background: #f5f5f5;
			.table-head-one {
				height: 100%;
				width: 150px;
				border-right: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				line-height: 25px;
				padding-top: 10px;
				background: #f5f5f5;
				&.last {
					border-right: none;
				}
			}
			.table-trauma-head {
				display: flex;

				.table-head-one-trauma {
					width: 120px;
					height: 60px;
					padding: 5px;
				}
			}
			.table-head-first {
				border-bottom: 1px solid #ddd;
				text-align: left;
				padding: 0 30px;
			}
			// flex: 3;
			.table-head-second {
				display: flex;
				flex-wrap: nowrap;
				height: 90px;
				.table-head-second-item {
					padding: 0 10px;

					font-weight: 400;
					line-height: 30px;
					width: 100px;
					border-right: 1px solid #ddd;
					&.last {
						border-right: none;
					}
				}
			}
		}
	}
	.table-body {
		// display: flex;

		// overflow-x: scroll;
		.table-body-item {
			display: flex;
		}
	}
	.no-data {
		border-bottom: 1px solid #dddddd;
		text-align: center;
	}
	.nine-table-body {
		.four-row {
			min-height: 160px;
			flex: 4;
		}
		.three-row {
			min-height: 120px;
			flex: 3;
		}
	}
	.left-flex {
		flex: 3;
		text-align: left;
		display: flex;
		// border-left: 1px solid #dddddd;
		align-items: center;
		span {
			padding: 0 20px;
			line-height: 30px;
		}
	}
	.right-flex {
		flex: 1;
		text-align: center;
		// border-left: 1px solid #dddddd;
	}
	.border-left {
		border-left: 0px;
		padding-left: 1.8px;
		text-indent: 2em;
	}
	.table-content-item {
		overflow: hidden;
		height: 41px;
		width: 100px;
		flex-shrink: 0;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		padding: 10px;
		line-height: 20px;
		&.table-content-item-trauma {
			width: 120px;
		}
		&.last {
			border-right: none;
		}
	}
}
.hosipital-name-container {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 14px;
	.table-head-one {
		height: 137px;
		width: 150px;
		background: #f5f5f5;
		// border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		line-height: 25px;
		padding-top: 10px;
		padding-left: 20px;
		font-weight: 600;
		&.trauma {
			height: 60px;
			padding-top: 5px;
		}
	}
	.table-content-item {
		width: 150px;
		overflow: hidden;
		height: 41px;
		flex-shrink: 0;
		// border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		padding: 0 10px;
		line-height: 20px;
		display: flex;
		align-items: center;
		&.table-content-item-trauma {
			width: 120px;
		}
		&.last {
			border-right: none;
		}
	}
}
.tab-table {
	margin: 0 16px 15px 16px;
	overflow-x: auto;
	white-space: nowrap;
}
.table-scrool {
	height: 5px;
	position: fixed;
	bottom: 0;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 12;
}
</style>