From 79993be468244e6cc16ce9c1d7e8736bd359c600 Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期五, 05 五月 2023 14:48:51 +0800
Subject: [PATCH] 样式全面修改,所有页面焕然一新

---
 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue |  672 ++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 439 insertions(+), 233 deletions(-)

diff --git a/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue b/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue
index b8dd609..66b528c 100644
--- a/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue
+++ b/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue
@@ -1,19 +1,76 @@
 <template>
-	<view class="main">
-		<view class="top-statistics">
-			<view class="content-statistics">
-				<view class="content-text">鍙戣繍缁熻</view>
-				<view class="content-text">鍏眥{ totalLength }}杞�</view>
-				<view class="content-text">鍏眥{ totalTon.toFixed(2) }}鍚�</view>
+	<view class="">
+		<view class="main">
+			<view class="top-statistics">
+				<view class="top-body">
+					<view class="content-title">鍙戣繍缁熻</view>
+					<view class="content-statistics">
+						<view class="content-text">
+							<view class="content-container">{{ totalLength }}</view>
+							<view class="content-num">鍙戣繍杞︽暟</view>
+						</view>
+						<view class="content-text">
+							<view class="content-container">{{ totalTon.toFixed(2) }}</view>
+							<view class="content-num">鍙戣繍鍚ㄦ暟</view>
+						</view>
+					</view>
+				</view>
 			</view>
-		</view>
-		<view class="collapse-main">
-			<view class="filter-show">
-				<view class="filtershow-date">{{ dateRange }}</view>
-				<view class="filter-icon"><u-icon name="grid" :size="40" color="#9ec16c "></u-icon></view>
-				<view class="filtershow-text" @click="showPopup">绛涢��</view>
+			<view class="main-block">
+				<view class="data-filter" @click="showPopup">
+					<view class="search-icon"><u-icon name="search" color="#494949" size="50"></u-icon></view>
+					<view class="date-text">{{ dateselect }}</view>
+					<view class="">
+						<view class="arrow-icon"><u-icon name="arrow-down-fill" color="#1481FF" size="50"></u-icon></view>
+					</view>
+				</view>
+				<view class="filter-condition"></view>
+				<view class="date-information">
+					<view class="statistics-card" v-for="(item, index) in filterList" :key="index">
+						<view class="card-top">
+							<view class="left"><combined-title :title="item.condition"></combined-title></view>
+							<view class="card-top_num">
+								{{ item.taskCoalList.length }}杞{
+									item.taskCoalList.reduce((prev, cur) => {
+										return prev + cur.clean;
+									}, 0)
+								}}鍚�
+							</view>
+						</view>
+						<view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
+							<view class="first-line">
+								<view class="dispatch-receive">
+									<view v-if="value.orderType == '澶栭攢' || value.orderType == '鍐呴攢' || value.orderType == '杞嚭'" class="container">
+										<view class="dispatch">{{ value.deptName }}</view>
+										<view class="receive-icon"></view>
+										<view class="receive">{{ value.customerName }}</view>
+									</view>
+									<view v-else-if="value.orderType == '澶栬喘' || value.orderType == '鍐呰喘' || value.orderType == '杞叆'" class="container">
+										<view class="dispatch">{{ value.customerName }}</view>
+										<view class="receive-icon"></view>
+										<view class="receive">{{ value.deptName }}</view>
+									</view>
+								</view>
+								<view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view>
+							</view>
+							<view class="second-line">
+								<view class="coal-name">{{ value.coalName }}</view>
+								<view class="black-block"></view>
+								<view class="coal-type">{{ value.orderType }}</view>
+							</view>
+							<view class="third-line">
+								<view class="carnum-icon"><image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png" mode="widthFix"></image></view>
+								<view class="carnum-text">{{ value.carNo || '' }}</view>
+							</view>
+							<view class="fourth-line">
+								<view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
+								<view class="send-date">{{ value.sendDate }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
 			</view>
-			<u-popup :show="conditinonShow" mode="top" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose">
+			<u-popup :show="conditinonShow" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose">
 				<view class="filter-main">
 					<view class="filter-body date-button">
 						<view class="condition-name">鏃ユ湡</view>
@@ -39,124 +96,99 @@
 						<view class="condition-name">鐓ょ</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < coalShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button :text="coalShow < coalTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="coalShow < coalTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
-					<view class="filter-body">
+					<view class="filter-body" v-if="typeList.length !== 0">
 						<view class="condition-name">绫诲瀷</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < typeShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button :text="typeShow < typeTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="typeShow < typeTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
-					<view class="filter-body">
+					<view class="filter-body" v-if="roleType !== 1">
 						<view class="condition-name">瀹㈡埛</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < customerShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button
-									:text="customerShow < customerTotal ? '鏌ョ湅鏇村' : '鏀惰捣'"
-									type="primary"
-									size="small"
-									@click="toggle(2)"
-									v-if="customerTotal > 3"
-								></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="customerShow < customerTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
 					<view class="filter-body" v-if="roleType == 1">
 						<view class="condition-name">璐т唬</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" v-if="index < forwarderShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button
-									:text="forwarderShow < forwarderTotal ? '鏌ョ湅鏇村' : '鏀惰捣'"
-									type="primary"
-									size="small"
-									@click="toggle(3)"
-									v-if="forwarderTotal > 3"
-								></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button
+								:text="forwarderShow < forwarderTotal ? '鏌ョ湅鏇村' : '鏀惰捣'"
+								type="primary"
+								size="small"
+								@click="toggle(3)"
+								v-if="forwarderTotal > 3"
+							></u-button>
+						</view> -->
 						</view>
 					</view>
 					<view class="filter-body" v-if="roleType != 3">
 						<view class="condition-name">杞﹂槦</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < fleetShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button :text="fleetShow < fleetTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="fleetShow < fleetTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
-					<view class="filter-body" v-if="roleType != 1">
+					<view class="filter-body">
 						<view class="condition-name">鐭垮満</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < filedShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button :text="filedShow < filedTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="filedShow < filedTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
 					<view class="filter-body" v-if="roleType == 2">
 						<view class="condition-name">杞︾墝鍙�</view>
 						<view class="filter-name">
 							<view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)">
-								<u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < carNoShow"></u-button>
+								<u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button>
 							</view>
-							<view class="toggle-button">
-								<u-button :text="carNoShow < carNoTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
-							</view>
+							<!-- <view class="toggle-button">
+							<u-button :text="carNoShow < carNoTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
+						</view> -->
 						</view>
 					</view>
 				</view>
 			</u-popup>
+			<tab-bar :current="1"></tab-bar>
 		</view>
-		<view class="date-information">
-			<view class="statistics-card" v-for="(item, index) in filterList" :key="index">
-				<view class="card-title">
-					<view class="title-date">{{ item.condition }}</view>
-					<view class="title-number">
-						鍏眥{ item.taskCoalList.length }}杞�&nbsp;{{
-							item.taskCoalList.reduce((prev, cur) => {
-								return prev + cur.clean;
-							}, 0)
-						}}鍚�
-					</view>
-				</view>
-				<view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
-					<view class="arrow-right"><u-icon name="arrow-right" size="50"></u-icon></view>
-					<view class="main-body">
-						<view class="coal-name">鐓ょ:{{ value.coalName || '' }}</view>
-						<view class="clean">鎵ц閲�:{{ value.clean.toFixed(2) || 0 }}</view>
-						<view class="out-time">鍑哄満鏃堕棿:{{ value.outTime || '' }}</view>
-						<view class="car-number">杞︾墝鍙�:{{ value.carNo || '' }}</view>
-						<view class="filedName">鐭垮満:{{ value.filedName || '' }}</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<tab-bar :current="1"></tab-bar>
+		<view class="white-block"></view>
 	</view>
 </template>
 
 <script>
+import combinedTitle from '@/components/combined-title/combined-title.vue';
 export default {
+	components: {
+		combinedTitle
+	},
 	data() {
 		return {
 			conditionList: [],
@@ -386,6 +418,7 @@
 			console.log(e, '鏃ユ湡閫夋嫨');
 			this.first = e.range.before;
 			this.last = e.range.after;
+			this.conditinonShow = false;
 		},
 		opencalendar() {
 			this.$refs.calendar.open();
@@ -519,187 +552,360 @@
 </script>
 
 <style lang="scss" scoped>
+@mixin flex {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
 ::v-deep .toggle-button .u-button {
 	width: vww(40);
 }
-// ::v-deep .filter-name:nth-last-child(1) {
-// 	.u-button {
-// 		width: 66%;
-// 	}
-// }
+.white-block {
+	width: 100%;
+	height: vww(50);
+	margin-top: vww(10);
+}
 .main {
-	width: 96%;
+	width: 100%;
 	margin: 0 auto;
-	background-color: #e8eaec;
 	/*椤堕儴缁熻鏍�*/
 	.top-statistics {
 		width: 100%;
-		height: vww(50);
+		height: 430rpx;
+		background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
 		display: flex;
 		justify-content: center;
-		align-items: center;
-		.content-statistics {
-			width: 100%;
-			height: 100%;
-			padding: 0 vww(10);
+		.top-body {
+			width: 690rpx;
+			height: 220rpx;
+			margin: vww(21) auto;
 			display: flex;
 			justify-content: space-between;
-			align-items: center;
-			.content-text {
-				width: 33.3%;
-				height: vww(30);
-				font-size: vww(20);
-				color: #393a3c;
+			flex-direction: column;
+			.content-statistics {
+				width: 690rpx;
+				height: 140rpx;
+				background: #ffffff;
+				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
+				border-radius: 10rpx;
+				display: flex;
+				justify-content: space-evenly;
+				align-items: center;
+				.content-text {
+					height: vww(40);
+					@include flex flex-direction: column;
+					.content-container {
+						width: 100%;
+						height: vww(16);
+						font-size: 40rpx;
+						font-family: Source Han Sans CN;
+						font-weight: bold;
+						color: #3b56eb;
+						text-align: center;
+					}
+					.content-num {
+						width: 96rpx;
+						height: 24rpx;
+						font-size: 24rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #333333;
+					}
+				}
+			}
+			.content-title {
+				width: 158rpx;
+				height: 38rpx;
+				font-size: 40rpx;
+				font-family: Adobe Heiti Std;
+				font-weight: normal;
+				color: #ffffff;
+				line-height: 69rpx;
+				margin: vww(21) auto;
 			}
 		}
 	}
-	// 閫夐」鎶樺彔妗�
-	.collapse-main {
-		width: 100%;
-		margin-top: vww(10);
-		background-color: #fff;
-		border: 1px solid #cccccc;
-		border-radius: vww(5);
-		.filter-show {
+	.main-block {
+		width: 690rpx;
+		margin: vww(12) vww(15) auto vww(15);
+		background: #ffffff;
+		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
+		border-radius: 20rpx;
+		@include flex flex-direction: column;
+		overflow: hidden;
+		.data-filter {
+			width: 635rpx;
+			height: 68rpx;
+			border: 2px solid #5b95fd;
+			box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
+			border-radius: 34rpx;
+			margin-top: vww(21);
+			padding: 0 vww(5);
+			@include flex .date-text {
+				width: 330rpx;
+				height: 40rpx;
+				font-size: 28rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #494949;
+			}
+		}
+		.filter-condition {
 			width: 100%;
-			height: vww(40);
-			background-color: #fff;
-			border-radius: vww(5);
-			font-size: vww(18);
-			color: #333;
-			position: relative;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			.filtershow-date {
-				font-size: vww(15);
-				padding-left: vww(8);
-			}
-			.filter-icon {
-				position: absolute;
-				right: vww(45);
-				top: vww(11);
-			}
-			.filtershow-text {
-				color: #9ec16c;
-				padding-right: vww(8);
-				position: relative;
-				&::before {
-					content: '';
-					position: absolute;
-					width: 1px;
-					height: vww(22);
-					background-color: #dcdfe6;
-					right: 94px;
-					bottom: 0;
+			height: 54rpx;
+			background: #f5f5f5;
+			@include flex;
+			margin-top: vww(15);
+		}
+		.date-information {
+			width: 635rpx;
+			background: #f6faff;
+			border-radius: 20rpx;
+			.statistics-card {
+				width: 100%;
+				min-height: vww(120);
+				@include flex;
+				flex-direction: column;
+				margin-top: vww(5);
+				.card-top {
+					width: 96%;
+					@include flex;
+					.left {
+						font-size: 30rpx;
+						font-family: Microsoft YaHei;
+						font-weight: 400;
+						color: #494949;
+					}
+					.card-top_num {
+						font-size: 40rpx;
+						font-family: CTCuHeiSJ;
+						font-weight: 400;
+						color: #6074ee;
+					}
+				}
+				.card-main {
+					width: 100%;
+					height: vww(120);
+					border-bottom: vww(1) solid #d6d6d6;
+					margin-top: vww(12);
+					padding-bottom: vww(12);
+					position: relative;
+					@include flex flex-direction: column;
+					align-items: flex-start;
+					.first-line {
+						width: 94%;
+						height: vww(32);
+						color: #303030;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.dispatch-receive {
+							width: 90%;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							margin-right: vww(12);
+							.container {
+								width: 100%;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+							}
+							.receive-icon {
+								width: 62rpx;
+								height: 14rpx;
+								border-bottom: 3px solid #275fa5;
+								position: relative;
+								&:after {
+									content: '';
+									position: absolute;
+									width: 3px;
+									height: 10px;
+									background-color: #275fa5;
+									right: 0;
+									transform: rotate(-45deg);
+								}
+							}
+						}
+						.point-number {
+							width: 20%;
+							font-size: 40rpx;
+							font-family: CTCuHeiSJ;
+							font-weight: 400;
+							color: #f81414;
+						}
+					}
+					.second-line {
+						width: 60%;
+						height: vww(15);
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.coal-name {
+							width: 60%;
+							height: 30rpx;
+							font-size: 30rpx;
+							font-family: Microsoft YaHei;
+							font-weight: 300;
+							color: #515151;
+							position: relative;
+							display: flex;
+							justify-content: space-between;
+						}
+						.black-block {
+							width: 2rpx;
+							height: 30rpx;
+							background: #515151;
+						}
+						.coal-type {
+							width: 24%;
+							height: 30rpx;
+							font-size: 30rpx;
+							font-family: Microsoft YaHei;
+							font-weight: 300;
+							color: #515151;
+						}
+					}
+					.third-line {
+						width: 40%;
+						height: vww(14);
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.carnum-icon {
+							width: 28rpx;
+							height: 24rpx;
+							image {
+								width: 28rpx;
+								height: 24rpx;
+							}
+						}
+						.carnum-text {
+							font-size: 28rpx;
+							font-family: Microsoft YaHei;
+							font-weight: 300;
+							color: #515151;
+						}
+					}
+					.fourth-line {
+						width: 40%;
+						height: vww(14);
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+					}
 				}
 			}
 		}
-		.filter-main {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-			.date-button {
-				width: 80%;
-				height: vww(80);
-				margin: vww(5) auto;
-				.condition-name {
-					margin-bottom: vww(10);
-				}
+	}
+	.filter-main {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		.date-button {
+			width: 80%;
+			height: vww(80);
+			margin: vww(5) auto;
+			.condition-name {
+				margin-bottom: vww(10);
 			}
-			.filter-body {
-				width: 100%;
+		}
+		.filter-body {
+			width: 100%;
+			position: relative;
+			display: flex;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			.condition-name {
+				margin-left: vww(15);
+				margin-top: vww(10);
+				font-size: vww(16);
+				color: #686868;
+			}
+			.filter-name {
+				width: 94%;
+				margin: 0 auto;
 				position: relative;
 				display: flex;
-				justify-content: flex-start;
 				flex-wrap: wrap;
-				.condition-name {
-					margin-left: vww(15);
-					margin-top: vww(10);
-					font-size: vww(16);
-					color: #686868;
-				}
-				.filter-name {
-					width: 94%;
-					margin: 0 auto;
-					position: relative;
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: flex-start;
-					align-items: flex-start;
+				justify-content: flex-start;
+				align-items: flex-start;
 
-					.filter-button {
-						color: #393a3c;
-						height: vww(16);
-						padding: vww(8);
-						margin: vww(5) vww(5);
-						margin-bottom: vww(10);
+				.filter-button {
+					color: #393a3c;
+					height: vww(16);
+					padding: vww(8);
+					margin: vww(5) vww(5);
+					margin-bottom: vww(10);
+					/deep/ .shadowactive {
+						background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
+						box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
 					}
-					.toggle-button {
-						width: 30%;
-						display: flex;
-						justify-content: center;
-						position: absolute;
-						right: vww(-21);
-						top: vww(-23);
-					}
+				}
+				.toggle-button {
+					width: 30%;
+					display: flex;
+					justify-content: center;
+					position: absolute;
+					right: vww(-21);
+					top: vww(-23);
 				}
 			}
 		}
 	}
 	// 鏃ユ湡鍙戣繍
-	.date-information {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		.statistics-card {
-			width: 100%;
-			margin-top: vww(8);
-			border: 1px solid #cccccc;
-			border-radius: vww(5);
-			background-color: #fff;
-			min-height: vww(120);
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			.card-title {
-				width: 100%;
-				height: vww(40);
-				line-height: vww(40);
-				padding-left: vww(5);
-				color: #bcbcbc;
-				border-bottom: 1px solid #cccccc;
-				display: flex;
-				.title-date {
-					width: vww(90);
-					margin-right: vww(10);
-				}
-				.title-number {
-					flex: 1;
-				}
-			}
-			.card-main {
-				width: 100%;
-				flex: 1;
-				position: relative;
-				.arrow-right {
-					position: absolute;
-					right: vww(14);
-					top: vww(18);
-				}
-				.main-body {
-					width: 80%;
-					height: vww(60);
-					margin-top: vww(5);
-					padding: vww(3);
-					color: #686868;
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: space-around;
-				}
-			}
-		}
-	}
+	// .date-information {
+	// 	width: 100%;
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	.statistics-card {
+	// 		width: 100%;
+	// 		margin-top: vww(8);
+	// 		border: 1px solid #cccccc;
+	// 		border-radius: vww(5);
+	// 		background-color: #fff;
+	// 		min-height: vww(120);
+	// 		display: flex;
+	// 		flex-direction: column;
+	// 		justify-content: space-between;
+	// 		.card-title {
+	// 			width: 100%;
+	// 			height: vww(40);
+	// 			line-height: vww(40);
+	// 			padding-left: vww(5);
+	// 			color: #bcbcbc;
+	// 			border-bottom: 1px solid #cccccc;
+	// 			display: flex;
+	// 			.title-date {
+	// 				width: vww(90);
+	// 				margin-right: vww(10);
+	// 			}
+	// 			.title-number {
+	// 				flex: 1;
+	// 			}
+	// 		}
+	// 		.card-main {
+	// 			width: 100%;
+	// 			flex: 1;
+	// 			position: relative;
+	// 			.arrow-right {
+	// 				position: absolute;
+	// 				right: vww(14);
+	// 				top: vww(18);
+	// 			}
+	// 			.main-body {
+	// 				width: 80%;
+	// 				height: vww(60);
+	// 				margin-top: vww(5);
+	// 				padding: vww(3);
+	// 				color: #686868;
+	// 				display: flex;
+	// 				flex-wrap: wrap;
+	// 				justify-content: space-around;
+	// 			}
+	// 		}
+	// 	}
+	// }
 }
 </style>

--
Gitblit v1.9.1