Update style and README.md (f033e3e2) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/components/canteen/RealtimeTraffic.vue

+25 −71

Original line number	Diff line number	Diff line
		<template>
		<Transition mode="out-in" name="fade" appear>
		<div class="container mt-3" :class="{ 'dark-mode': isDarkMode }">
		<transition name="fade" mode="out-in" appear>
		<div class="container mt-3">
		<div class="card mb-3" v-for="canteen in trafficList" :key="canteen.canteen_id">
		<div class="card-header">
		<h5 class="card-title">{{ canteen.canteen_name }}</h5>
		<p class="card-subtitle">平均人数: {{ canteen.avg_number.toFixed(2) }}</p>
		<p class="card-subtitle">更新时间: {{ timeFormat(canteen.time) }}</p>
		<h5 class="card-title">{{ canteen.canteen_name }} {{ canteen.canteen_en_name }}</h5>
		<p class="card-subtitle">平均人数 Avg Number: {{ canteen.avg_number.toFixed(2) }}</p>
		<p class="card-subtitle">更新时间 Last Updated: {{ timeFormat(canteen.time) }}</p>
		</div>
		<ul class="list-group list-group-flush">
		<ul class="list-group">
		<li class="list-group-item" v-for="booth in canteen.booth_traffic" :key="booth.booth_id">
		<strong>{{ booth.booth_name }}</strong> - 排队人数约: {{ booth.avg_number }} 人
		<strong>{{ booth.booth_name }} {{ booth.booth_en_name }}</strong> - 排队人数约: {{ booth.avg_number }} 人
		</li>
		</ul>
		</div>
		</div>
		</Transition>
		</transition>
		</template>

		<script>
		import axios from 'axios';
		import { watch, ref } from 'vue';

		import { ref } from 'vue';

		export default {
		name: "RealtimeTraffic",
		@@ -28,7 +27,6 @@ export default {
		return {
		baseUrl: "https://susteen.itbill.cn/api/v1/traffic",
		trafficList: [],
		isDarkMode: false,
		formatter: new Intl.DateTimeFormat('zh-CN', {
		hour12: false,
		year: 'numeric',
		@@ -42,32 +40,21 @@ export default {
		},

		mounted() {
		this.detectDarkMode();
		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
		this.isDarkMode = e.matches;
		});
		this.getTrafficList();
		},

		methods: {
		detectDarkMode() {
		this.isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
		},
		async getTrafficList() {
		try {
		// 获取初始交通列表
		const res = await axios.get(this.baseUrl + "/canteens");
		this.trafficList = res.data.data;

		// 创建一个请求每个食堂详细交通数据的 promise 数组
		const trafficPromises = this.trafficList.map(elem =>
		axios.get(`${this.baseUrl}/canteens/${elem.canteen_id}`)
		);

		// 并行执行所有请求
		const trafficResults = await Promise.all(trafficPromises);

		// 将结果合并回 trafficList
		this.trafficList = this.trafficList.map((elem, index) => {
		return {
		...elem,
		@@ -79,9 +66,8 @@ export default {
		}
		},
		timeFormat(time) {
		const t = new Date(time)
		const formattedTime = this.formatter.format(t)
		return formattedTime
		const t = new Date(time);
		return this.formatter.format(t);
		}
		},
		};
		@@ -93,18 +79,14 @@ export default {
		color: #333;
		}

		.dark-mode {
		color: #ccc;
		/* background-color: #2c2c2c; */
		}

		.card {
		padding-top: 10px;
		margin: 10px 0px;
		border: none;
		border-radius: 16px;
		overflow: hidden;
		background-color: #fff;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
		}

		.card:hover {
		@@ -113,13 +95,9 @@ export default {
		}

		.card-header {
		/* background-color: #007bff; */
		color: white;
		padding: 0px 24px;
		}

		.dark-mode .card-header {
		/* background-color: #333; */
		color: #333;
		padding: 8px 24px;
		background-color: #fff;
		}

		.card-subtitle {
		@@ -127,21 +105,17 @@ export default {
		margin-top: 4px;
		}

		.list-group-item {
		list-style-type: none; /* 移除列表项前的点 */
		/* ... 其他已有的样式 ... */
		}

		/* 如果您想要对整个列表应用样式，而不仅仅是单个列表项 */
		.list-group-flush {
		.list-group {
		list-style-type: none;
		padding-left: 0; /* 也可能需要移除默认的内边距 */
		padding-left: 0;
		border-radius: 16px;
		}

		.list-group-item {
		list-style-type: none;
		font-size: 0.875rem;
		background-color: #FFFFFF;
		padding: 12px 24px;
		background-color: #f4f4f4;
		padding: 16px 24px;
		border: none;
		transition: background-color 0.3s;
		}
		@@ -150,27 +124,6 @@ export default {
		background-color: #f8f9fa;
		}

		.dark-mode .list-group-item {
		background-color: #2a2a2a;
		color: #ddd;
		border-top: 1px solid #3a3a3a;
		}

		.dark-mode .list-group-item:hover {
		background-color: #3a3a3a;
		}

		@media (prefers-color-scheme: dark) {
		.dark-mode .card {
		background-color: #1a1a1a;
		color: white;
		}
		}

		.realtime-queue-length-hint {
		padding-bottom: 4px;
		}

		/* 淡入淡出效果 */
		.fade-enter-active,
		.fade-leave-active {
		@@ -180,4 +133,5 @@ export default {
		.fade-enter-from,
		.fade-leave-to {
		opacity: 0;
		}</style>
		}
		</style>

docs/.vuepress/components/canteen/TrendChart.vue

+10 −9

Original line number	Diff line number	Diff line
		<template>
		<div id="bustable">
		<object-selector :objs="{
		'中心餐厅': true,
		'十栋餐厅': false
		'中心餐厅 \| Center Cafeteria': true,
		'十栋餐厅 \| Building 10 No.2 Cafeteria': false
		}" v-slot="canteenProps">
		<br />
		<br />
		<object-selector :objs="canteenProps.selected ? {
		'麻辣烫 ': 11,
		'大众菜左': 12,
		'大众菜右': 13,
		'特色菜左': 14,
		'特色菜中': 15,
		'特色菜右': 16
		} : { '大众菜左': 21, '大众菜右': 22 }
		'麻辣烫 \| Spicy Hot Pot': 11,
		'大众菜左 \| Popular Dishes': 12,
		'大众菜右 \| Popular Dishes': 13,
		'风味面食 \| Noodles': 14,
		'潮汕卤味套餐 \| Chiu Chow-style Brino Meat': 15,
		'铁锅拌饭 \| Rice with Mixed Vegetables': 16
		} : { '大众菜左 \| Popular Dishes': 21, '大众菜右 \| Popular Dishes': 22 }
		" v-slot="boothProps">
		<div v-for="meal in [0, 1, 2]" :key="meal">
		<data-request :path="getUrl(boothProps.selected, meal)" v-slot="{ data }">

docs/README.md

+0 −3

Original line number	Diff line number	Diff line
		@@ -57,9 +57,6 @@
		<li><a href="http://live.cra.moe/">校园风景直播</a></li>
		</ul>
		</th>
		<th class="tg-0lax">
		<h3><a href="./canteen/">饭堂<svg aria-hidden="true" x="0px" y="0px" width="15" height="15" class="icon outbound"><use href="#link-icon" /></svg></a></h3>
		</th>
		</tr>
		</thead>
		</table>

docs/canteen/README.md

+8 −1

Original line number	Diff line number	Diff line
		@@ -3,3 +3,10 @@
		<ClientOnly>
		<Canteen></Canteen>
		</ClientOnly>

		<br/>
		上线伊始，如有问题欢迎及时反馈: <br/>
		susteen-campus@outlook.com

		功能更丰富的食堂服务小程序正在开发中，如果您想查看开发内容或者加入开发，请访问：
		[SUSTeenCampus](https://github.com/SUSTeenCampus)
		No newline at end of file

Admin message