ads_web/src/components/ruleCalendar/index.vue

<template>
	<div class="calendar">
		<table class="calendar-table calendar-table-hour">
			<thead class="calendar-head">
				<tr>
					<th rowspan="8" class="week-td">星期 / 时间</th>
					<th colspan="12">00:00 - 12:00</th>
					<th colspan="12">12:00 - 24:00</th>
					<th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
				</tr>
				<tr>
					<th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
				</tr>
			</thead>
			<tbody class="calendar-body">
				<tr>
					<th class="td-normal">星期一</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期二</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期三</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期四</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期五</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期六</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th class="td-normal">星期日</th>
					<td data-week="0" :data-time="i" class="un-selected" v-for="(_, i) in 24" :key="i">
						<span class=""></span>
					</td>
					<!-- <td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">ON</span>
					</td>
					<td colspan="2" class="td-normal" style="display: none">
						<span class="hover-link td-normal">OFF</span>
					</td> -->
				</tr>
				<tr>
					<th colspan="28" class="clear-bar td-normal">
						<span class="pull-left td-normal">可拖动鼠标选择时间段</span>
						<span class="hover-link fr td-normal">全部重置</span>
					</th>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<style lang="scss" scoped>
.calendar {
	background-color: #fff;
	-webkit-user-select: none;
	position: relative;
	display: inline-block;

	.calendar-table {
		border-collapse: collapse;
	}

	.week-td {
		width: 90px;
	}
}

table {
	display: table;
	border-collapse: separate;
	box-sizing: border-box;
	text-indent: initial;
	border-spacing: 2px;
	border-color: gray;

	thead {
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}

	tr {
		border: 1px solid #e0e5f4;
		font-size: 12px;
		text-align: center;
		line-height: 32px;
		color: rgba(0, 0, 0, 0.5);

		th {
			min-width: 40px;
			border: 1px solid #e0e5f4;
			font-size: 12px;
			text-align: center;
			line-height: 32px;
			background: #f7f8fa;
		}

		td {
			border: 1px solid #e0e5f4;
			font-size: 12px;
			text-align: center;
			line-height: 32px;
			min-width: 40px;
			cursor: pointer;

			&:hover {
				background: #ccdbff;
			}

			.active {
				background: #ccdbff;
			}
		}
	}
}

.clear-bar {
	line-height: 32px;
	padding: 0 12px;

	.hover-link {
		color: #1c6bde;
		cursor: pointer;
		font-size: 13px;
	}
	.fr {
		float: right;
	}
}
</style>