diff --git a/api/demo.js b/api/demo.js
deleted file mode 100644
index 025c496..0000000
--- a/api/demo.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import http from '@/http/api.js'
-
-// 获取验证码
-const captcha = (data) => {
-	return http.request({
-		url: '/api/blade-auth/oauth/captcha',
-		method: 'GET',
-		data
-	})
-}
-
-export default {
-	captcha,
-}
\ No newline at end of file
diff --git a/api/notice.js b/api/notice.js
deleted file mode 100644
index d2373b7..0000000
--- a/api/notice.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import http from '@/http/api.js'
-
-// 获取通知公告列表
-export const getList = (params) => {
-	return http.request({
-		url: '/api/blade-desk/notice/list',
-		method: 'GET',
-		params
-	})
-}
-
-export const remove = (ids) => {
-  return http.request({
-    url: '/api/blade-desk/notice/remove',
-    method: 'post',
-    params: {
-      ids,
-    }
-  })
-}
-
-export const add = (row) => {
-  return http.request({
-    url: '/api/blade-desk/notice/submit',
-    method: 'post',
-    data: row
-  })
-}
-
-export const update = (row) => {
-  return http.request({
-    url: '/api/blade-desk/notice/submit',
-    method: 'post',
-    data: row
-  })
-}
\ No newline at end of file
diff --git a/api/reserve.js b/api/reserve.js
deleted file mode 100644
index 477c804..0000000
--- a/api/reserve.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import http from '@/http/api.js'
-
-/**
- * 获取部门列表
- * @param {*} params
- * @returns
- */
-export const deptList = params => {
-	return http.request({
-		url: '/api/blade-system/dept/list-page',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 获取事项列表
- * @param {*} params
- * @returns
- */
-export const itemList = params => {
-	return http.request({
-		url: '/api/blade-biz/item/list',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 预约须知
- * @param {*} params
- * @returns
- */
-export const noticeData = params => {
-	return http.request({
-		url: '/api/blade-noticeinfo/noticeInfo/list',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 获取可用日历
- * @param {*} params
- * @returns
- */
-export const availableDate = params => {
-	return http.request({
-		url: '/api/blade-bookingdate/bookingDate/available-week-dates',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 查询用户信息
- * @param {*} params
- * @returns
- */
-export const getUserInfo = params => {
-	return http.request({
-		url: '/api/blade-system/user/info',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 提交预约
- * @param {*} params
- * @returns
- */
-export const submit = params => {
-	return http.request({
-		url: '/api/blade-biz/booking/submit-booking',
-		method: 'POST',
-		data: {
-			...params
-		},
-	});
-};
-
-/**
- * 查询我的预约
- * @param {*} params
- * @returns
- */
-export const myReserve = params => {
-	return http.request({
-		url: '/api/blade-biz/booking/list',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 取消预约
- * @param {*} params
- * @returns
- */
-export const cancel = params => {
-	return http.request({
-		url: '/api/blade-biz/booking/cancel',
-		method: 'POST',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 获取详情
- * @param {*} params
- * @returns
- */
-export const getDetail = params => {
-	return http.request({
-		url: '/api/blade-biz/booking/detail',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
-
-/**
- * 获取是否无感取号成功
- * @param {*} params
- * @returns
- */
-export const getIsSuccessTicket = params => {
-	return http.request({
-		url: '/api/blade-onlineticket/onlineTicket/getByYyNo',
-		method: 'GET',
-		params: {
-			...params
-		},
-	});
-};
\ No newline at end of file
diff --git a/api/ticket.js b/api/ticket.js
new file mode 100644
index 0000000..d80e324
--- /dev/null
+++ b/api/ticket.js
@@ -0,0 +1,59 @@
+import http from '@/http/api.js'
+
+/**
+ * 主题取号列表
+ * @param {*} params
+ * @returns
+ */
+export const getThemeList = params => {
+	return http.request({
+		url: 'api/blade-subject/subject/list',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 事项列表
+ * @param {*} params
+ * @returns
+ */
+export const getBusinessList = params => {
+	return http.request({
+		url: 'api/blade-item/list',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 历史取号列表
+ * @param {*} params
+ * @returns
+ */
+export const getHistoryList = params => {
+	return http.request({
+		url: 'api/blade-queuerecord/queueRecord/history',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 取号
+ * @param {*} data { applicantName, applicantIdCard, itemId, windowId }
+ * @returns
+ */
+export const takeNumber = data => {
+	return http.request({
+		url: 'api/blade-queuerecord/queueRecord/take-number',
+		method: 'POST',
+		data
+	});
+};
\ No newline at end of file
diff --git a/http/api.js b/http/api.js
index 5a6d9fc..8dd9009 100644
--- a/http/api.js
+++ b/http/api.js
@@ -20,7 +20,7 @@ http.interceptors.request.use((config) => { // 可使用async await 做异步操
 	config.header['Blade-Requested-With'] = 'BladeHttpRequest';
 	// 客户端认证参数
 	config.header['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
-	
+
 	// #ifndef H5
 	let url = config.url
 	if (process.env.NODE_ENV == 'development' && !url.startsWith("http")) {
@@ -44,8 +44,8 @@ http.interceptors.request.use((config) => { // 可使用async await 做异步操
 	/**
 	 /* 演示
 	 if (!token) { // 如果token不存在，return Promise.reject(config) 会取消本次请求
-	    return Promise.reject(config)
-	  }
+			return Promise.reject(config)
+		}
 	 **/
 	return config
 }, config => { // 可使用async await 做异步操作
diff --git a/manifest.json b/manifest.json
index 72add51..1facbc1 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-	"name": "住房保障预约",
+	"name": "环江取号机",
 	"appid": "__UNI__8FD82FF",
 	"description": "",
 	"versionName": "2.0.0",
@@ -104,11 +104,6 @@
 	},
 	"h5": {
 		"template": "template.h5.html",
-		"publicPath": "/housingAssuranceBookingMobile/",
-		"router": {
-			"mode": "hash",
-			"base": "/housingAssuranceBookingMobile"
-		},
 		"optimization": {
 			"treeShaking": {
 				"enable": true
@@ -117,18 +112,12 @@
 		"devServer": {
 			"proxy": {
 				"/api": {
-					"target": "http://192.168.3.111:8181",
+					"target": "http://192.168.3.130:8079",
 					// "target" : "http://192.168.3.100:2891",
 					//"target" : "https://rider.bladex.vip/api",
 					"pathRewrite": {
 						"^/api": "/"
 					}
-				},
-				"/epoint-web-cs": {
-					"target": "https://gxqzzfbzzx.cn",
-					"pathRewrite": {
-						"^/epoint-web-cs": "/"
-					}
 				}
 			},
 			"port": ""
diff --git a/pages/home/businessList.vue b/pages/home/businessList.vue
index 879746c..dd0263c 100644
--- a/pages/home/businessList.vue
+++ b/pages/home/businessList.vue
@@ -4,16 +4,20 @@
 		<template #main>
 			<view class="wrap">
 				<view class="list-card">
-					<view class="item" v-for="(item,idx) in businessList" :key="idx">
+					<view class="page-title" v-if="titleName">{{ titleName }}</view>
+					<view class="item" v-for="(item, idx) in businessList" :key="idx">
 						<view class="left">
 							<text class="dot">◆</text>
-							<text class="title-text">{{ item.name }}</text>
+							<text class="title-text">{{ item.itemName }}</text>
 						</view>
 						<view class="btn-box">
 							<view class="btn-guide" @click="openGuide(item)">办事指南</view>
 							<view class="btn-take" @click="toTakeNum(item)">取号</view>
 						</view>
 					</view>
+					<view class="empty" v-if="businessList.length === 0">
+						暂无事项
+					</view>
 				</view>
 			</view>
 		</template>
@@ -22,50 +26,118 @@
 
 <script>
 	import Container from '@/components/container/container.vue'
+	import {
+		getBusinessList,
+		getHistoryList,
+		takeNumber,
+	} from '@/api/ticket.js'
+
 	export default {
 		components: {
 			Container
 		},
 		data() {
 			return {
-				businessList: [{
-						name: '个人社保参保证明查询打印'
-					},
-					{
-						name: '城镇职工基本养老保险关系转移接续申请'
-					},
-					{
-						name: '住房公积金个人住房贷款购房"一件事"'
-					},
-					{
-						name: '租赁非公共租赁住房提取'
-					},
-					{
-						name: '租赁公共租赁住房提取'
-					},
-					{
-						name: '住房档案变更（房屋坐落变更）'
-					},
-				]
+				titleName: '',
+				source: '',
+				subjectId: '',
+				deptId: '',
+				idcard: '',
+				businessList: []
 			}
 		},
+		onLoad(options) {
+			this.source = options.source || ''
+			this.subjectId = options.subjectId || ''
+			this.deptId = options.deptId || ''
+			this.idcard = options.idcard || ''
+			this.titleName = options.titleName || options.subjectName || options.deptName || ''
+			this.fetchList()
+		},
 		methods: {
 			// 返回上一页
 			goBack() {
 				uni.navigateBack()
 			},
 
-			// 点击取号：跳转刷身份证页面
-			toTakeNum(row) {
-				uni.showToast({
-					title: '取号成功',
-					icon: 'none'
-				})
+			// 根据 source 调用不同接口
+			async fetchList() {
+				let res = null
+				try {
+					switch (this.source) {
+						case 'history':
+							// 历史取号
+							if (!this.idcard) {
+								console.warn('历史取号缺少身份证号')
+								return
+							}
+							res = await getHistoryList({
+								applicantIdCard: this.idcard
+							})
+							break
+						case 'business':
+							// 业务取号（全部事项）
+							res = await getBusinessList({
+								status: 1
+							})
+							break
+						case 'subject':
+						default:
+							// 主题取号 / 部门取号（兼容无 source 的旧跳转）
+							const params = { status: 1 }
+							if (this.subjectId) {
+								params.subjectId = this.subjectId
+							} else if (this.deptId) {
+								params.deptId = this.deptId
+							} else {
+								// 兼容默认：无筛选查全部
+							}
+							res = await getBusinessList(params)
+							break
+					}
+					if (res && res.success && res.data) {
+						this.businessList = res.data.records || []
+					}
+				} catch (e) {
+					console.error('获取列表失败', e)
+				}
 			},
-			// 办事指南（可弹窗/新页面）
+
+			// 获取事项 ID（历史记录用 itemId，事项列表用 id）
+			getItemId(item) {
+				return item.itemId || item.id
+			},
+
+			// 点击取号
+			async toTakeNum(row) {
+				if (!this.idcard) {
+					uni.showToast({
+						title: '请先刷身份证',
+						icon: 'none'
+					})
+					return
+				}
+				try {
+					const res = await takeNumber({
+						applicantIdCard: this.idcard,
+						itemId: this.getItemId(row)
+					})
+					if (res.success) {
+						uni.showToast({
+							title: '取号成功',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					console.error('取号失败', e)
+				}
+			},
+
+			// 办事指南
 			openGuide(item) {
+				const id = this.getItemId(item)
 				uni.navigateTo({
-					url: `/pages/home/guide?theme=${item}`
+					url: `/pages/home/guide?id=${id}&itemName=${item.itemName}`
 				})
 			}
 		}
@@ -94,6 +166,16 @@
 		overflow-y: auto;
 	}
 
+	.page-title {
+		font-size: 36px;
+		font-weight: bold;
+		color: rgba(51, 51, 51, 1);
+		text-align: center;
+		padding: 20px 0 30px;
+		border-bottom: 2px solid rgba(188, 200, 209, 1);
+		margin-bottom: 20px;
+	}
+
 	.item {
 		display: flex;
 		align-items: center;
@@ -149,4 +231,11 @@
 		padding: 1.2vh 3vw;
 		border-radius: 99px;
 	}
-</style>
\ No newline at end of file
+
+	.empty {
+		text-align: center;
+		font-size: 30px;
+		color: #999;
+		padding: 100px 0;
+	}
+</style>
diff --git a/pages/home/dept.vue b/pages/home/dept.vue
index 0463be5..bf1a901 100644
--- a/pages/home/dept.vue
+++ b/pages/home/dept.vue
@@ -1,13 +1,13 @@
 <template>
-	<Container backBtn logoutBtn @handleBack="handleBack" >
+	<Container backBtn logoutBtn @handleBack="handleBack">
 		<template #main>
 			<view class="theme-page">
 				<view class="card">
 					<view class="title">部门取号</view>
 					<view class="btn-group">
-						<view class="btn-item" v-for="(item, index) in themeList" :key="index"
+						<view class="btn-item" v-for="(item, index) in deptList" :key="index"
 							@click="handleSelect(item)">
-							{{ item }}
+							{{ item.deptName }}
 						</view>
 					</view>
 				</view>
@@ -18,6 +18,9 @@
 
 <script>
 	import Container from '@/components/container/container.vue'
+	import {
+		getList,
+	} from '@/api/system/dept.js'
 
 	export default {
 		components: {
@@ -25,27 +28,36 @@
 		},
 		data() {
 			return {
-				themeList: [
-					'住房城乡建设厅',
-					'直属单位住房保障中心',
-					'公积金',
-					'职业资格',
-					'教育服务',
-					'婚姻生育',
-					'户籍户政',
-					'医疗医保'
-				]
+				deptList: [],
+				idcard: ''
 			}
 		},
+		onLoad(options) {
+			this.idcard = options.idcard || ''
+		},
+		mounted() {
+			this.fetchDeptList()
+		},
 		methods: {
 			handleBack() {
 				uni.navigateBack()
 			},
-			
+
 			handleSelect(item) {
 				uni.navigateTo({
-					url: `/pages/home/businessList?theme=${item}`
+					url: `/pages/home/businessList?source=dept&deptId=${item.id}&deptName=${item.deptName}&idcard=${this.idcard}`
 				})
+			},
+
+			async fetchDeptList() {
+				try {
+					const res = await getList({ parentId: '1123598813738675202' })
+					if (res.success && res.data) {
+						this.deptList = res.data.records || res.data || []
+					}
+				} catch (e) {
+					console.error('获取部门列表失败', e)
+				}
 			}
 		}
 	}
@@ -104,4 +116,4 @@
 		color: rgba(51, 51, 51, 1);
 		cursor: pointer;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 72760bd..5ebd393 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -2,12 +2,13 @@
 	<view class="container">
 		<Container>
 			<template #main>
-				<view class="card" @click="goRoute">
+				<view class="card">
 					<!-- 身份证图标区域 -->
 					<view class="id-card">
 					</view>
 					<!-- 提示文字 -->
 					<text class="tip">请刷身份证取号</text>
+					<input v-model="inputVal" placeholder="请输入内容" confirm-type="done" @confirm="goRoute" />
 				</view>
 			</template>
 		</Container>
@@ -23,6 +24,7 @@
 		},
 		data() {
 			return {
+				inputVal: '',
 				currentTime: ''
 			}
 		},
@@ -47,9 +49,9 @@
 				const seconds = String(now.getSeconds()).padStart(2, '0')
 				this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
 			},
-			goRoute(){
+			goRoute() {
 				uni.navigateTo({
-					url: '/pages/home/ticket'
+					url: `/pages/home/ticket?idcard=${this.inputVal}`
 				})
 			}
 		}
@@ -91,4 +93,9 @@
 		font-weight: 500;
 		letter-spacing: 0.2vh;
 	}
-</style>
\ No newline at end of file
+
+	::v-deep .uni-input-wrapper {
+		width: 800rpx;
+		border: 2rpx solid #ccc;
+	}
+</style>
diff --git a/pages/home/theme.vue b/pages/home/theme.vue
index 6809d53..1460ffa 100644
--- a/pages/home/theme.vue
+++ b/pages/home/theme.vue
@@ -7,7 +7,7 @@
 					<view class="btn-group">
 						<view class="btn-item" v-for="(item, index) in themeList" :key="index"
 							@click="handleSelect(item)">
-							{{ item }}
+							{{ item.subjectName }}
 						</view>
 					</view>
 				</view>
@@ -18,6 +18,9 @@
 
 <script>
 	import Container from '@/components/container/container.vue'
+	import {
+		getThemeList,
+	} from '@/api/ticket.js'
 
 	export default {
 		components: {
@@ -25,18 +28,16 @@
 		},
 		data() {
 			return {
-				themeList: [
-					'就业创业',
-					'社会保障',
-					'公积金',
-					'职业资格',
-					'教育服务',
-					'婚姻生育',
-					'户籍户政',
-					'医疗医保'
-				]
+				themeList: [],
+				idcard: ''
 			}
 		},
+		onLoad(options) {
+			this.idcard = options.idcard || ''
+		},
+		mounted() {
+			this.fetchThemeList()
+		},
 		methods: {
 			handleBack() {
 				uni.navigateBack()
@@ -44,8 +45,19 @@
 
 			handleSelect(item) {
 				uni.navigateTo({
-					url: `/pages/home/businessList?theme=${item}`
+					url: `/pages/home/businessList?source=subject&subjectId=${item.id}&subjectName=${item.subjectName}&idcard=${this.idcard}`
 				})
+			},
+
+			async fetchThemeList() {
+				try {
+					const res = await getThemeList({ status: 1 })
+					if (res.success && res.data) {
+						this.themeList = res.data.records || []
+					}
+				} catch (e) {
+					console.error('获取主题列表失败', e)
+				}
 			}
 		}
 	}
@@ -104,4 +116,4 @@
 		color: rgba(51, 51, 51, 1);
 		cursor: pointer;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/home/ticket.vue b/pages/home/ticket.vue
index d6cf5ff..f7c36b6 100644
--- a/pages/home/ticket.vue
+++ b/pages/home/ticket.vue
@@ -1,177 +1,201 @@
 <template>
-	<Container logoutBtn>
-		<template #main>
-			<view class="home-page">
-				<!-- 左侧四大功能按钮 -->
-				<view class="btn-group">
-					<view class="btn-item blue" @click="goTheme"> </view>
-					<view class="btn-item green" @click="goDept"> </view>
-					<view class="btn-item orange" @click="goHistory"> </view>
-					<view class="btn-item red" @click="goBusiness"> </view>
-				</view>
+  <Container logoutBtn>
+    <template #main>
+      <view class="home-page">
+        <!-- 左侧四大功能按钮 -->
+        <view class="btn-group">
+          <view class="btn-item blue" @click="goTheme"> </view>
+          <view class="btn-item green" @click="goDept"> </view>
+          <view class="btn-item orange" @click="goHistory"> </view>
+          <view class="btn-item red" @click="goBusiness"> </view>
+        </view>
 
-				<!-- 右侧热门推荐 -->
-				<view class="hot-recommend">
-					<view class="recommend-title">热门推荐</view>
-					<view class="recommend-list">
-						<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
-							<text class="dot">◆</text>
-							<text class="text">{{ item }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</template>
-	</Container>
+        <!-- 右侧热门推荐 -->
+        <view class="hot-recommend">
+          <view class="recommend-title">热门推荐</view>
+          <view class="recommend-list">
+            <view class="recommend-item" v-for="(item, index) in recommendList" :key="index" @click="handleSelect(item)">
+              <text class="dot">◆</text>
+              <text class="text">{{ item.itemName }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </template>
+  </Container>
 </template>
 
 <script>
-	import Container from '@/components/container/container.vue'
+import Container from '@/components/container/container.vue'
+import { getBusinessList } from '@/api/ticket.js'
 
-	export default {
-		components: {
-			Container
-		},
-		data() {
-			return {
-				recommendList: [
-					'公有住房、全额集资建房退房',
-					'职务(职称)晋升后住房面积未达标户住房补贴业务',
-					'公有住房、全额集资建房退房',
-					'公有住房、全额集资建房退房',
-					'公有住房、全额集资建房退房',
-					'职务(职称)晋升后住房面积未达标户住房补贴业务'
-				]
-			}
-		},
-		methods: {
-			// 主题取号
-			goTheme() {
-				uni.navigateTo({
-					url: '/pages/home/theme'
-				})
-			},
-			// 部门取号
-			goDept() {
-				uni.navigateTo({
-					url: '/pages/home/dept'
-				})
-			},
-			// 历史取号
-			goHistory() {
-				uni.navigateTo({
-					url: `/pages/home/businessList`
-				})
-			},
-			// 业务取号
-			goBusiness() {
-				uni.navigateTo({
-					url: `/pages/home/businessList`
-				})
-			}
-		}
-	}
+export default {
+  components: {
+    Container
+  },
+  data() {
+    return {
+      recommendList: [],
+      idcard: ''
+    }
+  },
+  onLoad(options) {
+    this.idcard = options.idcard || ''
+  },
+  mounted() {
+    this.fetchHotList()
+  },
+  methods: {
+    // 查询热门事项
+    async fetchHotList() {
+      try {
+        const res = await getBusinessList({
+          hot: 1,
+          status: 1,
+          current: 1,
+          size: 6,
+          descs: 'create_time,id'
+        })
+        if (res.success && res.data) {
+          this.recommendList = res.data.records || []
+        }
+      } catch (e) {
+        console.error('获取热门事项失败', e)
+      }
+    },
+
+    // 点击事项 → 跳转办事指南
+    handleSelect(item) {
+      uni.navigateTo({
+        url: `/pages/home/guide?id=${item.id}&itemName=${item.itemName}`
+      })
+    },
+
+    // 主题取号
+    goTheme() {
+      uni.navigateTo({
+        url: `/pages/home/theme?idcard=${this.idcard}`
+      })
+    },
+    // 部门取号
+    goDept() {
+      uni.navigateTo({
+        url: `/pages/home/dept?idcard=${this.idcard}`
+      })
+    },
+    // 历史取号
+    goHistory() {
+      uni.navigateTo({
+        url: `/pages/home/businessList?source=history&idcard=${this.idcard}&titleName=历史取号`
+      })
+    },
+    // 业务取号
+    goBusiness() {
+      uni.navigateTo({
+        url: `/pages/home/businessList?source=business&titleName=业务取号`
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
-	* {
-		box-sizing: border-box;
-	}
+* {
+  box-sizing: border-box;
+}
 
-	.home-page {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		padding: 0 5%;
-		box-sizing: border-box;
-	}
+.home-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 5%;
+  box-sizing: border-box;
+}
 
-	/* 左侧按钮组 */
-	.btn-group {
-		/* width: 60%; */
-		/* height: 85%; */
-		display: flex;
-		flex-wrap: wrap;
-		/* justify-content: space-between; */
-		align-content: space-around;
-	}
+/* 左侧按钮组 */
+.btn-group {
+  /* width: 60%; */
+  /* height: 85%; */
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: space-between; */
+  align-content: space-around;
+}
 
-	.btn-item {
-		width: 500px;
-		height: 340px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+.btn-item {
+  width: 500px;
+  height: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-	.btn-item.blue {
-		margin-right: 60px;
-		margin-bottom: 60px;
-		background: url('../../static/images/ticket/theme_bg.png');
-		background-size: 100% 100%;
-	}
+.btn-item.blue {
+  margin-right: 60px;
+  margin-bottom: 60px;
+  background: url('../../static/images/ticket/theme_bg.png');
+  background-size: 100% 100%;
+}
 
-	.btn-item.green {
-		background: url('../../static/images/ticket/dept_bg.png');
-		background-size: 100% 100%;
-	}
+.btn-item.green {
+  background: url('../../static/images/ticket/dept_bg.png');
+  background-size: 100% 100%;
+}
 
-	.btn-item.orange {
-		margin-right: 60px;
-		background: url('../../static/images/ticket/history_bg.png');
-		background-size: 100% 100%;
-	}
+.btn-item.orange {
+  margin-right: 60px;
+  background: url('../../static/images/ticket/history_bg.png');
+  background-size: 100% 100%;
+}
 
-	.btn-item.red {
-		background: url('../../static/images/ticket/business_bg.png');
-		background-size: 100% 100%;
-	}
+.btn-item.red {
+  background: url('../../static/images/ticket/business_bg.png');
+  background-size: 100% 100%;
+}
 
+/* 右侧热门推荐 */
+.hot-recommend {
+  width: 55%;
+  height: 740px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 40px 40px 16px;
+  box-sizing: border-box;
+}
 
+.recommend-title {
+  font-size: 40px;
+  font-weight: bold;
+  color: rgba(51, 51, 51, 1);
+  text-align: center;
+  margin-bottom: 30px;
+}
 
-	/* 右侧热门推荐 */
-	.hot-recommend {
-		width: 55%;
-		height: 740px;
-		background: #fff;
-		border-radius: 20px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-		padding: 40px 40px 16px;
-		box-sizing: border-box;
-	}
+.recommend-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 85%;
+}
 
-	.recommend-title {
-		font-size: 40px;
-		font-weight: bold;
-		color: rgba(51, 51, 51, 1);
-		text-align: center;
-		margin-bottom: 30px;
-	}
+.recommend-item {
+  display: flex;
+  align-items: flex-start;
+  line-height: 1.5;
+}
 
-	.recommend-list {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-around;
-		height: 85%;
-	}
+.dot {
+  color: #4080ff;
+  font-size: 30px;
+  margin-right: 10px;
+}
 
-	.recommend-item {
-		display: flex;
-		align-items: flex-start;
-		line-height: 1.5;
-	}
-
-	.dot {
-		color: #4080ff;
-		font-size: 30px;
-		margin-right: 10px;
-	}
-
-	.text {
-		font-size: 30px;
-		color: rgba(51, 51, 51, 1);
-	}
-</style>
\ No newline at end of file
+.text {
+  font-size: 30px;
+  color: rgba(51, 51, 51, 1);
+}
+</style>