Merge pull request #145 from SUSTech-CRA/feat/bus-tab-view (599ac1eb) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/client.js

+4 −2

Original line number	Diff line number	Diff line
		import { defineClientConfig } from '@vuepress/client'
		import BusTable from "./components/BusTable.vue";
		import Realtimemap from './components/Realtime-map.vue'
		import TabView from "./components/TabView.vue";
		import RealtimeMap from './components/RealtimeMap.vue'
		import WeatherSpan from './components/weather-span.vue'
		import BusChartVue from './components/BusChartVue.vue'
		// import AdsenseUnit from './components/adsense-inline-article.vue'
		@@ -8,7 +9,8 @@ import BusChartVue from './components/BusChartVue.vue'
		export default defineClientConfig({
		enhance({ app }) {
		app.component("BusTable", BusTable)
		app.component("Realtimemap", Realtimemap)
		app.component("TabView", TabView)
		app.component("RealtimeMap", RealtimeMap)
		app.component("WeatherSpan", WeatherSpan)
		app.component("BusChartVue", BusChartVue)
		// app.component("AdsenseUnit", AdsenseUnit)

+1 −1

Original line number	Diff line number	Diff line
		@@ -8,7 +8,7 @@
		<object-selector :objs="weekdayProps.selected ? {
		'Line 1 号线 │ 工学院方向 To COE': '/bus_times/one_down.json',
		'Line 1 号线 │ 欣园方向 To Joy Highland': '/bus_times/one_up.json',
		'Line 2 号线 │ 科研楼方向 To Research Building': '/bus_times/two_down.json',
		'Line 2 号线 │ 科研楼方向 To Research Bldg.': '/bus_times/two_down.json',
		'Line 2 号线 │ 欣园方向 To Joy Highland': '/bus_times/two_up.json',
		} : {
		'Line 1 号线 │ 工学院方向 To COE': '/bus_times/one_down_holiday.json',

+0 −0

File moved.

0 → 100644

+53 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<a-config-provider :theme="{
		token: {
		colorPrimary: '#49BF7C',
		},
		}">
		<a-tabs type="card" size="large">
		<a-tab-pane key="tab1">
		<template #tab>
		<div class="tab-text">车辆实时位置<br />Bus Realtime Location</div>
		</template>
		位置每5秒自动刷新。Location refreshes automatically every 5 seconds
		<RealtimeMap />
		<BusChartVue />
		</a-tab-pane>
		<a-tab-pane key="tab2">
		<template #tab>
		<div class="tab-text">时间表<br />Timetable</div>
		</template>
		<BusTable></BusTable>
		</a-tab-pane>
		</a-tabs>
		</a-config-provider>
		</div>
		</template>

		<script>
		import { Tabs } from 'ant-design-vue';
		import { ConfigProvider } from 'ant-design-vue';

		export default {
		name: 'TabView',
		components: {
		ATabs: Tabs,
		ATabPane: Tabs.TabPane,
		AConfigProvider: ConfigProvider
		}
		};
		</script>

		<style>
		.ant-tabs {
		color: unset;
		font-size: unset;
		font-variant: unset;
		font-feature-settings: unset;
		}

		.tab-text {
		white-space: pre-line;
		}
		</style>

+29 −19

Original line number	Diff line number	Diff line
		<template>
		<button
		v-for="(value, key, index) in objs"
		:key="index"
		@click="select(key)"
		:class="key==keySelected? 'selected' : 'unselected'"
		>
		<a-config-provider :theme="{
		token: {
		colorPrimary: '#49BF7C',
		},
		}">
		<a-button v-for="(value, key, index) in objs" :key="index" @click="select(key)"
		:class="key == keySelected ? 'selected' : 'unselected'" :type="key == keySelected ? 'primary' : 'default'" size="large">
		{{ key }}
		</button>
		</a-button>
		</a-config-provider>

		<slot v-bind:selected="objs[keySelected]"></slot>
		</template>
		<script>
		import { ConfigProvider } from 'ant-design-vue';
		import { Button as AButton } from 'ant-design-vue';

		export default {
		components: {
		AButton,
		AConfigProvider: ConfigProvider
		},
		data() {
		return {
		keySelected: null,
		@@ -47,22 +57,22 @@ export default {
		button {
		padding: 10px 15px;
		margin: 3px 3px 3px 3px;
		background-color: white;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 14px;
		border-radius: 2px;
		border: 1px solid rgb(194, 194, 194);
		// background-color: white;
		// text-align: center;
		// text-decoration: none;
		// display: inline-block;
		// font-size: 14px;
		// border-radius: 2px;
		// border: 1px solid rgb(194, 194, 194);
		}

		.selected {
		border-color: rgb(64, 169, 255);
		background-color: rgb(64, 169, 255);
		color: white;
		// border-color: rgb(64, 169, 255);
		// background-color: rgb(64, 169, 255);
		// color: white;
		}

		.unselected {
		color: #000;
		// color: #000;
		}
		</style>