通知公告/看房预约/合同签约/退租申请页面样式改版

components/DatePicker/DatePicker.vue

@@ -204,7 +204,7 @@ export default {
   font-size: 16px;
 }
 .cancel { color: #999; }
-.confirm { color:#007aff; }
+.confirm { color:#EA4D3E; }
 .title { font-weight:bold; }
 
 .picker-columns {
@@ -225,7 +225,7 @@ export default {
 }
 
 .item.active {
-  color:#007aff;
+  color:#EA4D3E;
   font-weight:bold;
   font-size:18px;
 }

pages/center/contract.vue

@@ -6,18 +6,12 @@
 
 		<!-- Tabs -->
 		<view class="tab-wrapper">
-			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#2979ff"
+			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#EA4D3E" activeColor="#EA4D3E"
-				activeColor="#2979ff" itemStyle="padding: 0 30rpx;"></u-tabs>
+				itemStyle="padding: 0 30rpx;"></u-tabs>
 		</view>
 
-	
+		<DateFilter :start="startDate" :end="endDate" @update:start="startDate = $event" @update:end="endDate = $event"
-		<DateFilter
+			@change="onDateFilterChange" />
-		  :start="startDate"
-		  :end="endDate"
-		  @update:start="startDate = $event"
-		  @update:end="endDate = $event"
-		  @change="onDateFilterChange"
-		/>
 
 		<!-- 合同列表 -->
 		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
@@ -55,282 +49,281 @@
 
 
 <script>
-	import DateFilter from '../../components/DatePicker/DateFilter.vue';
+import DateFilter from '../../components/DatePicker/DateFilter.vue';
-	export default {
+export default {
-		  components: { DateFilter },
+	components: { DateFilter },
-		data() {
+	data() {
-			return {
+		return {
-				tabList: [{
+			tabList: [{
-						name: "全部",
+				name: "全部",
-						value: "all"
+				value: "all"
-					},
+			},
-					{
+			{
-						name: "待签署",
+				name: "待签署",
-						value: "pending"
+				value: "pending"
-					},
+			},
-					{
+			{
-						name: "已签署",
+				name: "已签署",
-						value: "signed"
+				value: "signed"
-					},
+			},
-					{
+			{
-						name: "已过期",
+				name: "已过期",
-						value: "expired"
+				value: "expired"
-					},
+			},
-				],
+			],
 
-				currentTab: 0,
+			currentTab: 0,
-				statusFilter: "all",
+			statusFilter: "all",
 
-				// --- 时间筛选 ---
+			// --- 时间筛选 ---
-				startDate: "",
+			startDate: "",
-				endDate: "",
+			endDate: "",
-				// 可选：限制日期范围
+			// 可选：限制日期范围
-				minDate: "2000-01-01",
+			minDate: "2000-01-01",
-				maxDate: "2099-12-31",
+			maxDate: "2099-12-31",
-				contracts: [],
+			contracts: [],
-				pageNo: 1,
+			pageNo: 1,
-				pageSize: 10,
+			pageSize: 10,
-				total: 0,
+			total: 0,
-				loadStatus: "loadmore",
+			loadStatus: "loadmore",
-				isRefreshing: false,
+			isRefreshing: false,
-				defaultCover: "/static/img/index/swiper/swiper3.jpg",
+			defaultCover: "/static/img/index/swiper/swiper3.jpg",
-			};
+		};
+	},
+
+	onLoad() {
+		this.loadContracts(true);
+	},
+
+	methods: {
+		onTabChange(index) {
+			this.currentTab = index;
+			this.statusFilter = this.tabList[index].value;
+			this.resetAndLoad();
+		},
+		onDateFilterChange({ start, end }) {
+			this.resetAndLoad();
 		},
 
-		onLoad() {
+		formatDate(time) {
+			const d = new Date(time);
+			const m = String(d.getMonth() + 1).padStart(2, "0");
+			const day = String(d.getDate()).padStart(2, "0");
+			return `${d.getFullYear()}-${m}-${day}`;
+		},
+
+		resetAndLoad() {
+			this.pageNo = 1;
+			this.contracts = [];
+			this.loadStatus = "loading";
 			this.loadContracts(true);
 		},
 
-		methods: {
+		/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
-			onTabChange(index) {
+		loadContracts(isInit = false) {
-				this.currentTab = index;
+			this.loadStatus = "loading";
-				this.statusFilter = this.tabList[index].value;
-				this.resetAndLoad();
-			},
-			  onDateFilterChange({ start, end }) {
-			     this.resetAndLoad();
-			   },
 
-			formatDate(time) {
+			setTimeout(() => {
-				const d = new Date(time);
+				let mockAll = [{
-				const m = String(d.getMonth() + 1).padStart(2, "0");
+					id: 1,
-				const day = String(d.getDate()).padStart(2, "0");
+					assetName: '金辉大厦',
-				return `${d.getFullYear()}-${m}-${day}`;
+					assetRoom: '502',
-			},
+					coverUrl: '',
-
+					status: 'pending',
-			resetAndLoad() {
+					startDate: '2025-01-01',
-				this.pageNo = 1;
+					endDate: '2025-12-31'
-				this.contracts = [];
+				},
-				this.loadStatus = "loading";
+				{
-				this.loadContracts(true);
+					id: 2,
-			},
+					assetName: '东方广场',
-
+					assetRoom: '',
-			/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
+					status: 'signed',
-			loadContracts(isInit = false) {
+					startDate: '2024-03-01',
-				this.loadStatus = "loading";
+					endDate: '2025-03-01'
-
+				},
-				setTimeout(() => {
+				{
-					let mockAll = [{
+					id: 3,
-							id: 1,
+					assetName: '海景公寓',
-							assetName: '金辉大厦',
+					assetRoom: 'A-1201',
-							assetRoom: '502',
+					status: 'expired',
-							coverUrl: '',
+					startDate: '2023-01-01',
-							status: 'pending',
+					endDate: '2024-01-01'
-							startDate: '2025-01-01',
+				},
-							endDate: '2025-12-31'
+				{
-						},
+					id: 4,
-						{
+					assetName: '富力中心',
-							id: 2,
+					assetRoom: '1699',
-							assetName: '东方广场',
+					status: 'pending',
-							assetRoom: '',
+					startDate: '2024-10-01',
-							status: 'signed',
+					endDate: '2025-10-01'
-							startDate: '2024-03-01',
+				},
-							endDate: '2025-03-01'
+				{
-						},
+					id: 5,
-						{
+					assetName: '财富大厦',
-							id: 3,
+					assetRoom: '2308',
-							assetName: '海景公寓',
+					status: 'signed',
-							assetRoom: 'A-1201',
+					startDate: '2023-06-01',
-							status: 'expired',
+					endDate: '2024-06-01'
-							startDate: '2023-01-01',
-							endDate: '2024-01-01'
-						},
-						{
-							id: 4,
-							assetName: '富力中心',
-							assetRoom: '1699',
-							status: 'pending',
-							startDate: '2024-10-01',
-							endDate: '2025-10-01'
-						},
-						{
-							id: 5,
-							assetName: '财富大厦',
-							assetRoom: '2308',
-							status: 'signed',
-							startDate: '2023-06-01',
-							endDate: '2024-06-01'
-						}
-					];
-
-					// 状态过滤
-					if (this.statusFilter !== "all") {
-						mockAll = mockAll.filter(i => i.status === this.statusFilter);
-					}
-
-					// 时间过滤
-					if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
-					if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);
-
-					// 分页
-					this.total = mockAll.length;
-					const start = (this.pageNo - 1) * this.pageSize;
-					const pageList = mockAll.slice(start, start + this.pageSize);
-
-					if (this.pageNo === 1) {
-						this.contracts = pageList;
-					} else {
-						this.contracts = [...this.contracts, ...pageList];
-					}
-
-					this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
-					this.isRefreshing = false;
-				}, 400);
-			},
-
-			refresh() {
-				this.isRefreshing = true;
-				this.resetAndLoad();
-			},
-
-			loadMore() {
-				if (this.loadStatus !== "loadmore") return;
-				this.pageNo++;
-				this.loadContracts();
-			},
-
-			goDetail(item) {
-				uni.navigateTo({
-					url: `/pages/detail/contractDetail?id=${item.id}`,
-				});
-			},
-
-			getStatusText(status) {
-				switch (status) {
-					case "pending":
-						return "待签署";
-					case "signed":
-						return "已签署";
-					case "expired":
-						return "已过期";
 				}
-			},
+				];
+
+				// 状态过滤
+				if (this.statusFilter !== "all") {
+					mockAll = mockAll.filter(i => i.status === this.statusFilter);
+				}
+
+				// 时间过滤
+				if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
+				if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);
+
+				// 分页
+				this.total = mockAll.length;
+				const start = (this.pageNo - 1) * this.pageSize;
+				const pageList = mockAll.slice(start, start + this.pageSize);
+
+				if (this.pageNo === 1) {
+					this.contracts = pageList;
+				} else {
+					this.contracts = [...this.contracts, ...pageList];
+				}
+
+				this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
+				this.isRefreshing = false;
+			}, 400);
 		},
-	};
+
+		refresh() {
+			this.isRefreshing = true;
+			this.resetAndLoad();
+		},
+
+		loadMore() {
+			if (this.loadStatus !== "loadmore") return;
+			this.pageNo++;
+			this.loadContracts();
+		},
+
+		goDetail(item) {
+			uni.navigateTo({
+				url: `/pages/detail/contractDetail?id=${item.id}`,
+			});
+		},
+
+		getStatusText(status) {
+			switch (status) {
+				case "pending":
+					return "待签署";
+				case "signed":
+					return "已签署";
+				case "expired":
+					return "已过期";
+			}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.contract-page {
+.contract-page {
-		background-color: #f8f8f8;
+	background-color: #f8f8f8;
-		padding-top: 175rpx;
+	padding-top: 120rpx;
-		/* 给导航栏留空间 */
+	/* 给导航栏留空间 */
-		min-height: 100vh;
+	min-height: 100vh;
-	}
+}
 
-	.scroll-content {
+.scroll-content {
-		height: calc(100vh - 100rpx);
+	height: calc(100vh - 100rpx);
-	}
+}
 
-	.contract-list {
+.contract-list {
-		padding: 20rpx;
+	padding: 20rpx;
-	}
+}
 
-	.contract-card {
+.contract-card {
-		display: flex;
+	display: flex;
-		background: #fff;
+	background: #fff;
-		border-radius: 16rpx;
+	border-radius: 16rpx;
-		margin-bottom: 20rpx;
+	margin-bottom: 24rpx;
-		padding: 20rpx;
+	padding: 20rpx;
-		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		position: relative;
+	position: relative;
-	}
+}
 
-	.contract-cover {
+.contract-cover {
-		width: 160rpx;
+	width: 193rpx;
-		height: 160rpx;
+	height: 145rpx;
-		border-radius: 12rpx;
+	border-radius: 10rpx;
-		background-color: #f0f0f0;
+	background-color: #FCE5E0;
-		flex-shrink: 0;
+	flex-shrink: 0;
-	}
+}
 
-	.contract-info {
+.contract-info {
+	flex: 1;
+	margin-left: 20rpx;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.top-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.asset-name {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #333;
 		flex: 1;
-		margin-left: 20rpx;
+	}
-		display: flex;
+}
-		flex-direction: column;
+
-		position: relative;
+.asset-room {
+	font-size: 26rpx;
+	color: #555;
+	margin-top: 18rpx;
+}
+
+.date-range {
+	font-size: 24rpx;
+	color: #888;
+	margin-top: 20rpx;
+}
+
+.status-tag {
+	position: absolute;
+	bottom: 20rpx;
+	right: 0rpx;
+	padding: 12rpx 15rpx;
+	border-radius: 6rpx;
+	font-size: 26rpx;
+
+	&.pending {
+		background: #FEEDDD;
+		color: #EFA049;
 	}
 
-	.top-row {
+	&.signed {
-		display: flex;
+		background: #FCE5E0;
-		justify-content: space-between;
+		color: #ED7748;
-		align-items: center;
-
-		.asset-name {
-			font-size: 30rpx;
-			font-weight: bold;
-			color: #333;
-			flex: 1;
-		}
 	}
 
-	.asset-room {
+	&.expired {
-		font-size: 26rpx;
+		background: #CDCDCD;
-		color: #555;
+		color: #969696;
-		margin-top: 10rpx;
 	}
+}
 
-	.date-range {
+.empty {
-		font-size: 24rpx;
+	margin-top: 200rpx;
-		color: #888;
+}
-		margin-top: 8rpx;
-	}
-
-	.status-tag {
-		position: absolute;
-		bottom: 10rpx;
-		right: 0rpx;
-		padding: 6rpx 16rpx;
-		border-radius: 24rpx;
-		font-size: 24rpx;
-
-		&.pending {
-			background: #fff8e1;
-			color: #ff9800;
-		}
-
-		&.signed {
-			background: #e8f5e9;
-			color: #4caf50;
-		}
-
-		&.expired {
-			background: #fbe9e7;
-			color: #e53935;
-		}
-	}
-
-	.empty {
-		margin-top: 200rpx;
-	}
-
-	.tab-wrapper {
-		background-color: #ffffff;
-		padding: 10rpx 0;
-		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
-		position: sticky;
-		top: 0;
-		z-index: 10;
-	}
 
+.tab-wrapper {
+	background-color: #ffffff;
+	padding: 10rpx 0;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
 </style>

pages/detail/contractDetail.vue

@@ -45,14 +45,9 @@
 
     <!-- 底部操作栏 -->
     <view v-if="contract.status === '待签署'" class="bottom-bar">
-        <u-button
+      <u-button class="sign-btn" @click="goSign">
-            type="primary"
+        去签署
-            shape="circle"
+      </u-button>
-            class="sign-btn"
-            @click="goSign"
-            >
-            去签署
-        </u-button>
     </view>
   </view>
 </template>
@@ -141,8 +136,10 @@ export default {
 .contract-detail-page {
   background: #f7f8fa;
   min-height: 100vh;
-  padding-top: 175rpx; /* 给导航栏留空间 */
+  /* 给导航栏留空间 */
-  padding-bottom: 120rpx; /* 预留底部操作栏空间 */
+  padding-top: 120rpx;
+  /* 预留底部操作栏空间 */
+  padding-bottom: 150rpx;
 }
 
 /* 顶部封面信息 */
@@ -154,9 +151,9 @@ export default {
   margin: 20rpx;
 
   .cover {
-    width: 180rpx;
+    width: 194rpx;
-    height: 180rpx;
+    height: 156rpx;
-    border-radius: 12rpx;
+    border-radius: 10rpx;
     margin-right: 20rpx;
   }
 
@@ -164,12 +161,12 @@ export default {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
 
     .name {
       font-size: 30rpx;
       font-weight: bold;
       color: #333;
+      margin-top: 10rpx;
       margin-bottom: 12rpx;
     }
 
@@ -188,17 +185,17 @@ export default {
   padding: 20rpx 24rpx;
 
   .section-title {
-    font-weight: bold;
+    font-weight: 500;
-    font-size: 28rpx;
+    font-size: 40rpx;
     margin-bottom: 12rpx;
-    color: #333;
+    color: #212121;
   }
 
   .info-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20rpx 0;
+    padding: 40rpx 0;
     border-bottom: 1rpx solid #f0f0f0;
 
     &:last-child {
@@ -206,8 +203,8 @@ export default {
     }
 
     .label {
-      font-size: 26rpx;
+      font-size: 30rpx;
-      color: #666;
+      color: #86868C;
     }
 
     .value-box {
@@ -215,8 +212,8 @@ export default {
       align-items: center;
 
       .value {
-        font-size: 26rpx;
+        font-size: 30rpx;
-        color: #333;
+        color: #222222;
       }
 
       u-icon {
@@ -241,5 +238,13 @@ export default {
     width: 100%;
     height: 88rpx;
   }
+
+  /* 使用样式穿透让u-btn样式生效 */
+  &::v-deep .u-btn {
+    font-size: 30rpx;
+    color: #fff;
+    background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
+    border-radius: 10rpx;
+  }
 }
 </style>

pages/form/leaseCancel.vue

@@ -135,7 +135,7 @@ export default {
   background-color: #f6f8fa;
   display: flex;
   flex-direction: column;
-  padding-top: 175rpx;
+  padding-top: 120rpx;
   padding-bottom: 120rpx;
 }
 
@@ -159,7 +159,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #007aff;
+  color: #EA4D3E;
   margin-top: 40rpx;
   margin-bottom: 20rpx;
 }
@@ -191,6 +191,7 @@ export default {
     font-size: 28rpx;
     min-height: 140rpx;
     color: #333;
+	width: 94%;
   }
 }
 
@@ -202,12 +203,13 @@ export default {
   background-color: #fff;
   padding: 20rpx 40rpx;
   box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
+  z-index: 999;
 }
 
 .submit-btn {
   width: 100%;
   height: 88rpx;
-  background: linear-gradient(90deg, #007aff, #00aaff);
+  background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
   border-radius: 44rpx;
   color: #fff;
   font-size: 32rpx;

pages/notice/notice.vue

@@ -5,19 +5,17 @@
 			<scroll-view scroll-y style="height: 100%;width: 100%;">
 				<view class="page-box">
 					<view class="tabSwiper" v-for="(item, index) in dataList" :key="item.id" @click="clickContent(item)">
-						<view class="top">
+						<u-icon name="bell" :size="35" color="#2979ff" class="bell-icon"></u-icon>
-							<view class="left">
+						<view class="content-wrapper">
-								<u-icon name="bell" :size="35" color="#2979ff"></u-icon>
+							<view class="top">
 								<view class="title">{{ item.title }}</view>
-								<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+								<view class="date">{{ item.date }}</view>
 							</view>
-							<view class="right">{{ item.date }}</view>
+							<view class="item">
-						</view>
+								<view class="content u-line-2">{{ item.content }}</view>
-						<view class="item">
-							<view class="content">
-								<view class="title u-line-2">{{ item.content }}</view>
 							</view>
 						</view>
+						<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26" class="arrow-icon"></u-icon>
 					</view>
 				</view>
 			</scroll-view>
@@ -28,106 +26,145 @@
 <script>
 export default {
 	data() {
+		// 静态公告数据
+		const staticNoticeList = [
+			{
+				id: 1,
+				title: '关于开展2025年度招商工作的通知',
+				date: '2025-01-15',
+				content: '为进一步推进我市招商引资工作，优化营商环境，现就开展2025年度招商工作有关事项通知如下：一、工作目标；二、重点领域；三、保障措施...'
+			},
+			{
+				id: 2,
+				title: '2024年度招商成果通报',
+				date: '2025-01-10',
+				content: '2024年，我市招商引资工作取得显著成效，共引进各类项目120个，总投资达500亿元，现将具体成果通报如下：一、总体情况；二、主要特点；三、下一步计划...'
+			},
+			{
+				id: 3,
+				title: '关于举办2025年春季招商推介会的通知',
+				date: '2025-01-05',
+				content: '为搭建投资合作平台，展示我市投资环境和发展机遇，定于2025年3月15日举办春季招商推介会，诚邀各界企业家参会...'
+			},
+			{
+				id: 4,
+				title: '关于印发《市招商引资优惠政策实施细则》的通知',
+				date: '2024-12-28',
+				content: '为进一步规范招商引资优惠政策的实施，经市政府同意，现将《市招商引资优惠政策实施细则》印发给你们，请认真贯彻执行...'
+			},
+			{
+				id: 5,
+				title: '关于认定2024年度市重点招商引资项目的通知',
+				date: '2024-12-20',
+				content: '根据《市重点招商引资项目认定管理办法》，经评审，认定以下30个项目为2024年度市重点招商引资项目，现予以公布...'
+			}
+		];
 		return {
-			pageNum:1,
+			pageNum: 1,
-			pageSize:50,
+			pageSize: 50,
-			dataList: [],
+			dataList: staticNoticeList,
 		};
 	},
 	onLoad() {
-		this.getNoticecList();
+		// 静态数据已在data中初始化，无需调用接口
+		// this.getNoticecList();
 	},
 	methods: {
-		clickContent(item){
+		clickContent(item) {
-			if(item.id){
+			if (item.id) {
 				this.$u.route('/pages/notice/noticeDetail', {
 					id: item.id
 				});
 			}
 		},
-		getNoticecList(){
+		getNoticecList() {
-			let url = "/notice/findNoticeList";
+			// 静态数据已在data中初始化，无需调用接口
-			this.$u.get(url,{
+			// 保留此方法以保持兼容性
-				pageNum:this.pageNum,
+			return;
-				pageSize:this.pageSize,
-				orderByColumn:'create_time',
-				isAsc:'desc'
-			}).then(obj => {
-				let data = obj.data.result
-				data.filter(item=>{
-					this.dataList.push(
-						{
-							id:item.noticeId,
-							title: item.noticeTitle,
-							date:item.createTime,
-							content: item.reMark,
-						}
-					)
-				})
-			});
 		}
 	}
 };
 </script>
 <style lang="scss" scoped>
 .tabSwiper {
-	width: 710rpx;
+	width: 95%;
 	background-color: #ffffff;
-	margin: 20rpx auto;
+	margin: 16rpx auto;
-	border-radius: 20rpx;
+	border-radius: 12rpx;
 	box-sizing: border-box;
-	padding: 20rpx;
+	padding: 32rpx;
-	font-size: 28rpx;
+	box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
+	transition: all 0.2s ease;
+	border: 1rpx solid #f0f0f0;
+	display: flex;
+	align-items: center;
+	position: relative;
+	
+	&:hover {
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+	}
+	
+	.bell-icon {
+		margin-right: 32rpx;
+		flex-shrink: 0;
+		margin-top: 4rpx;
+	}
+	
+	.content-wrapper {
+		flex: 1;
+		min-width: 0;
+	}
+	
+	.arrow-icon {
+		margin-left: 24rpx;
+		flex-shrink: 0;
+		margin-top: 16rpx;
+	}
+	
 	.top {
 		display: flex;
 		justify-content: space-between;
-		.left {
+		align-items: flex-start;
-			display: flex;
+		margin-top: 20rpx;
-			align-items: center;
+		
-			.title {
+		.title {
-				margin: 0 10rpx;
+			font-size: 28rpx;
-				font-size: 32rpx;
+			font-weight: 600;
-				font-weight: bold;
+			color: #1a1a1a;
-			}
+			line-height: 38rpx;
+			flex: 1;
 		}
-		.right {
+		
-			color: $u-tips-color;
+		.date {
+			color: #999999;
+			font-size: 26rpx;
+			flex-shrink: 0;
+			position: absolute;
+			right: 30rpx;
+			top: 15rpx;
 		}
 	}
+	
 	.item {
-		display: flex;
-		margin: 20rpx 0 0;
-		.left {
-			margin-right: 20rpx;
-			image {
-				width: 200rpx;
-				height: 200rpx;
-				border-radius: 10rpx;
-			}
-		}
 		.content {
-			.title {
+			font-size: 26rpx;
-				font-size: 28rpx;
+			line-height: 36rpx;
-				line-height: 50rpx;
+			color: #666666;
-			}
+			letter-spacing: 0.5rpx;
-		}
+			margin-top: 10rpx;
-		.right {
-			margin-left: 10rpx;
-			padding-top: 20rpx;
-			text-align: right;
 		}
 	}
 }
+
 .wrap {
 	display: flex;
 	flex-direction: column;
 	height: calc(100vh - var(--window-top));
 	width: 100%;
+	background-color: #fafafa;
 }
-.swiper-box {
+
-	flex: 1;
+.page-box {
-}
+	padding: 16rpx 0 40rpx 0;
-.swiper-item {
-	height: 100%;
 }
 </style>

pages/reserve/reserveRecords.vue

@@ -18,12 +18,9 @@
           :key="item.id"
           class="record-card"
         >
-          <!-- 顶部时间 + 状态 -->
+          <!-- 资产名称和状态 -->
-          <view class="record-header">
+          <view class="card-header">
-            <view class="time-box">
+            <text class="asset-name">{{ item.assetName }}</text>
-              <u-icon name="clock" size="32" color="#999" />
-              <text class="record-time">{{ item.date }}</text>
-            </view>
             <text
               :class="['record-status', item.status]"
             >
@@ -32,42 +29,41 @@
           </view>
 
           <!-- 内容部分 -->
-          <view class="record-body">
+          <view class="card-content">
-            <!-- 资产名称 -->
+            <!-- 预约时间 -->
-            <view class="info-line">
+            <view class="info-item">
-              <text class="info-text">资产名称：{{ item.assetName }}</text>
+              <text class="info-label">预约时间：</text>
+              <text class="info-value">{{ formatDate(item.date) }}</text>
             </view>
 
-            <!-- 资产地址 + 查看位置按钮 -->
+            <!-- 地址 -->
-            <view class="info-line">
+            <view class="info-item">
-              <text class="info-text">地址：{{ item.assetAddress }}</text>
+              <text class="info-label">地址：</text>
-              <u-button
+              <text class="info-value">{{ item.assetAddress }}</text>
-                class="map-btn"
-                size="mini"
-                type="primary"
-                @click="viewLocation(item)"
-				icon="map"
-              >
-			  查看位置
-			  </u-button>
             </view>
 
-            <!-- 管家信息 + 拨号按钮 -->
+            <!-- 管家 -->
-            <view class="info-line">
+            <view class="info-item">
-              <text class="info-text">
+              <text class="info-label">管家：</text>
-                管家：{{ item.managerName }}（{{ item.managerPhone }}）
+              <text class="info-value">{{ item.managerName }}（{{ item.managerPhone }}）</text>
-              </text>
-              <u-button
-                class="call-btn"
-                size="mini"
-                type="success"
-				icon="phone"
-                @click="callManager(item.managerPhone)"
-              >
-			  拨打电话
-			  </u-button>
             </view>
           </view>
+
+          <!-- 操作按钮 -->
+          <view class="action-buttons">
+            <button
+              class="location-btn"
+              @click="viewLocation(item)"
+            >
+              查看位置
+            </button>
+            <button
+              class="call-btn"
+              @click="callManager(item.managerPhone)"
+            >
+              拨打电话
+            </button>
+          </view>
         </view>
 
         <u-loadmore :status="loadStatus" />
@@ -123,6 +119,19 @@ export default {
           return '未知';
       }
     },
+    formatDate(dateStr) {
+      // 格式化日期，例如：2025-11-10 周五 09:00
+      const date = new Date(dateStr);
+      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const weekday = weekdays[date.getDay()];
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      
+      return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
+    },
     viewLocation(item) {
       uni.openLocation({
         latitude: item.lat,
@@ -153,9 +162,9 @@ export default {
 
 <style lang="scss" scoped>
 .reserve-records {
-  background: #f8f8f8;
+  background: #f5f5f5;
   min-height: 100vh;
-  padding-top: 175rpx; /* 给导航栏留空间 */
+  padding-top: 120rpx; /* 给导航栏留空间 */
 }
 
 .scroll-content {
@@ -163,76 +172,107 @@ export default {
 }
 
 .record-list {
-  padding: 20rpx;
+  padding: 30rpx 40rpx;
 }
 
 .record-card {
   background: #fff;
-  border-radius: 16rpx;
+  border-radius: 12rpx;
-  padding: 24rpx;
+  padding: 32rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 }
 
-.record-header {
+.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 24rpx;
+}
 
-  .time-box {
+.asset-name {
-    display: flex;
+  font-size: 32rpx;
-    align-items: center;
+  font-weight: 500;
-    gap: 8rpx;
+  color: #2D2B2C;
+}
+
+.record-status {
+  font-size: 26rpx;
+  padding: 10rpx 15rpx;
+  border-radius: 4rpx;
+  &.done {
+    background: #FCE5E0;
+    color: #ED7748;
   }
-
+  &.pending {
-  .record-time {
+    background: #F2F3F7;
-    font-size: 28rpx;
+    color: #86868C;
-    color: #666;
-  }
-
-  .record-status {
-    font-size: 26rpx;
-    padding: 4rpx 14rpx;
-    border-radius: 24rpx;
-    &.done {
-      background: #e8f5e9;
-      color: #4caf50;
-    }
-    &.pending {
-      background: #fffbe6;
-      color: #ff9800;
-    }
   }
 }
 
-.record-body {
+.card-content {
+  margin-bottom: 32rpx;
+}
+
+.info-item {
   display: flex;
-  flex-direction: column;
+  align-items: flex-start;
-  gap: 16rpx;
+}
 
-  .info-line {
+.info-item:last-child {
-    display: flex;
+  margin-bottom: 0;
-    align-items: center;
+}
-    justify-content: space-between;
-    gap: 10rpx;
-    font-size: 28rpx;
-    color: #333;
 
-    .info-text {
+.info-label {
-      flex: 1;
+  font-size: 24rpx;
-      line-height: 1.6;
+  color: #666;
-    }
+  width: 120rpx;
+  flex-shrink: 0;
+  line-height: 44rpx;
+}
 
-    u-icon {
+.info-value {
-      flex-shrink: 0;
+  font-size: 24rpx;
-    }
+  color: #333;
+  flex: 1;
+  line-height: 44rpx;
+}
 
-    u-button {
+.action-buttons {
-      flex-shrink: 0;
+  display: flex;
-      margin-left: 10rpx;
+  justify-content: flex-end;
-    }
+  gap: 20rpx;
-  }
+  margin-top: 32rpx;
+  padding-top: 32rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.location-btn {
+  width: 220rpx;
+  height: 72rpx;
+  background: #fff;
+  color: #2D2B2C;
+  font-size: 28rpx;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid #222222;
+}
+
+.call-btn {
+  width: 220rpx;
+  height: 72rpx;
+  background: #ff3b30;
+  color: #fff;
+  font-size: 28rpx;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
 }
 
 .empty {