MP_XOIL_company_new/Financial/pages/details/index.vue

<template>
	<view class="details_body">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">评估报告</block>
		</cu-custom>
		<view class="details_container_bg"></view>
		<view class="details_container">
			<seleBar moveBackground='rgba(255, 103, 0, 0.7);' @seleBarFn='seleBarFn' :seleBarData='seleBarData' />
			<swiper :current="current" class="details_swiper" circular>
				<swiper-item v-if="scoreData" @touchmove.stop class="swiper_item">
					<view class="fractionCar flex column">
						<view class="fractionCar_top flex">
							<view class="fractionCar_top_left">
								<view class="fractionCar_plateNumber">
									{{ formatCarNumber(scoreData.platenumOrVinnum,0) }}</view>
								<view class="fractionCar_time smallText flex ac">
									{{scoreData.queryDate}}
									<view class="estimate_plate"> 近{{scoreData.statype}}个月</view>
									<br />
								</view>
								<view class="smallText">
									评估时间 {{scoreData.createTime}}
								</view>
							</view>
							<view class="fractionCar_top_right">
								<view class="fractionCar_top_right_label"> {{displayChange?'综合等级':'综合分数'}}</view>
								<view @click="displayChange=true" v-if="!displayChange"
									class="fractionCar_top_right_rank">
									{{scoreData.rate?Number((scoreData.rate)*100).toFixed(1).split('.')[0]:'-'}}
									<text style="color: #FF6700;"
										class="smallText ">.{{scoreData.rate?(Number(scoreData.rate)*100).toFixed(1).split('.')[1]:'-'}}</text>
								</view>
								<view @click="displayChange=false" v-else class="fractionCar_top_right_rank">
									{{displayChangeFn(Number(scoreData.rate)*100)}}
								</view>
							</view>
						</view>
						<view class="fractionCar_footer flex">
							<view v-for="(item,index) in footerList" :key='index'
								class="fractionCar_footer_item flex column">
								<view class="fractionCar_footer_item_label">{{item.label}}</view>
								<view class="fractionCar_footer_item_value flex ac jc">
									前 <text class="subjectColor"><text style="margin-left: 10rpx;" class="bigText ">
											{{ scoreData[item.field]?Number(scoreData[item.field]).toFixed(2).split('.')[0]:'0' }}</text>
										.{{ scoreData[item.field]?Number(scoreData[item.field]).toFixed(2).split('.')[1]:'00' }}
										%
										<!-- .6% -->
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="voitureCar flex">
						<view class="voitureCar_item">
							<view class="voitureCar_item_label labelColor">车辆类型</view>
							<view class="voitureCar_item_value subjectColor">{{scoreData.f12}}</view>
						</view>
						<view class="voitureCar_item">
							<view class="voitureCar_item_label labelColor">车辆评分基础</view>
							<view class="voitureCar_item_value subjectColor">{{scoreData.esc||'---'}}</view>
						</view>
					</view>
					<view class="detailsCar flex">
						<view v-for="(item,index) in detailsList" :key='index' class="detailsCar_item">
							<view class="detailsCar_item_label labelColor">{{item.label}}</view>
							<view class="detailsCar_item_value  subjectColor"> <text
									class="bigText">{{Number(scoreData[item.field]).toFixed(1)}}</text> {{item.unit}}
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="proposal" @touchmove.stop class="swiper_item flex column">
					<view class="fractionCar flex column">
						<view class="fractionCar_top flex">
							<view class="fractionCar_top_left">
								<view class="fractionCar_plateNumber">
									{{ formatCarNumber(proposal.homeRiskVo.platenumOrVinnum,0)}}</view>
								<view class="fractionCar_time smallText flex ac">
									{{proposal.homeRiskVo.safeinfoQueryDate}}
									<view class="estimate_plate"> 近{{proposal.homeRiskVo.safeinfoStatype}}个月</view>
									<br />
								</view>
								<view class="smallText">
									评估时间 {{proposal.homeRiskVo.safeinfoCreateTime||'---'}}
								</view>
							</view>
							<view class="fractionCar_top_right flex column bw ">
								<view class="fractionCar_top_right_label">改善建议</view>
								<view @click="$refs.popup.open('center')"
									class="fractionCar_top_right_suggest flex ac jc ">
									查看等级说明
								</view>
							</view>
						</view>
						<view class="fractionCar_footer flex bw" style="padding-bottom: 10rpx;margin-top: 40rpx;">
							<view @click="item2Index=0"
								:class="item2Index==0?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
								class=" flex column">
								<view>
									<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjsteering .png'">
									</image>
								</view>
								<view>驾驶风险</view>
								<view style="margin-bottom: 10rpx;">有 <text
										class="subjectColor">{{proposal.homeRiskVo.drivingRiskCoefficient||0}}</text>
									项风险</view>
							</view>
							<view @click="item2Index=1"
								:class="item2Index==1?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
								class=" flex column">
								<view>
									<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjtruck.png'"></image>
								</view>
								<view>运营风险</view>
								<view style="margin-bottom: 10rpx;">有 <text
										class="subjectColor">{{proposal.homeRiskVo.operationalRiskCoefficient||0}}</text>
									项风险</view>
							</view>
							<view @click="item2Index=2"
								:class="item2Index==2?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
								class=" flex column">
								<view>
									<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjroad.png'"></image>
								</view>
								<view>道路风险</view>
								<view style="margin-bottom: 10rpx;">有 <text
										class="subjectColor">{{proposal.homeRiskVo.roadRiskCoefficient}}</text> 项风险
								</view>
							</view>
						</view>
					</view>
					<view class="riskCar">
						<scroll-view class="riskCar_scroller" :scroll-into-view="toView" scroll-y="true"
							scroll-with-animation="true">
							<view :id="item.id" class="riskCar_scroller_item" v-for="(item,index) in riskData">
								<view class="riskCar_scroller_item_title flex bw">
									<text style="color: #BBBBBB;">{{item.title}}</text>
									<text class="subjectColor">{{proposal.transdisrto||'--'}}</text>
								</view>
								<view class="riskCar_scroller_item_progress_container">
									<view v-for="(progressItem,progressIndex) in item.progress" class="progress flex">
										<view class="progress_label">{{progressItem[0]}}</view>
										<view class="progress_right flex">
											<view :style="{width:`${(proposal[item.id][progressItem[1]] / 1.25)*100}%`}" class="progressBar">
												<view :style="{color:progressItem[2].color}" class="progressBar_tip">
													{{progressItem[2].label}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="proposal.homeRiskVo[item.suggested].length!==0"
									class="riskCar_scroller_item_propose">
									<view class="riskCar_scroller_item_propose_title subjectColor">
										风险改善建议
									</view>
									<view class="riskCar_scroller_item_propose_data">
										<view style="margin-bottom: 10rpx;"
											v-if="proposal.homeScoreVo[item.suggested].length!==0"
											v-for="(suggestedItem,suggestedIndex) in proposal.homeRiskVo[item.suggested]"
											:key='suggestedIndex' class="riskCar_scroller_item_propose_data_item">
											{{suggestedIndex+1}}.<text>{{suggestedItem}}</text>
										</view>
									</view>
								</view>
								<view class="riskCar_scroller_item_propose subjectColor" style="text-align: center;"
									v-else>
									暂无建议
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="details_footer">
			<view class="sendMail flex ac jc">发送邮件</view>
			<view class="download flex ac jc">下载PDF到手机</view>
		</view> -->
		<uni-popup ref="popup" @change="change">
			<view class="popup_explain flex column">
				<view class="indicatorBar"></view>
				<view class="indicatorBarGrade flex column jc">
					<view v-for="(item,index) in indicatorBar" :key='index' class="indicatorBarGrade_item flex jc ac">
						<view :style="{color:item.color}" class="indicatorBarGrade_item_label">{{item.label}}</view>
						<view class="indicatorBarGrade_item_value">{{item.value}}</view>
					</view>
				</view>
				<view @click="$refs.popup.close()" class="popup_explain_footer flex jc ac">
					返回
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import seleBar from '../../components/seleBar.vue'
	import Financial from '@/api/Financial.js'
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离 
		},
		components: {
			seleBar
		},
		watch: {

		},
		data() {
			return {
				displayChange: false,
				imgURL: this.global.newImgURL,
				item2Index: 0,
				detailsList: [{
						label: '车辆载重',
						field: 'f9',
						unit: 't'
					},
					{
						label: '总运营率',
						field: 'f10',
						unit: '%'
					},
					{
						label: '第一常跑路线%',
						field: 'f11',
						unit: '%'
					},
					{
						label: '轨迹完整率',
						field: 'f0',
						unit: '%'
					},
					{
						label: '平均速度',
						field: 'f1',
						unit: 'km/s'
					},
					{
						label: '日疲劳时长偏差',
						field: 'f2',
						unit: 'h'
					},
					{
						label: '日运营时长',
						field: 'f3',
						unit: 'h'
					},
					{
						label: '日均清晨运营时长',
						field: 'f4',
						unit: 'h'
					},
					{
						label: '夜间里程%',
						field: 'f5',
						unit: '%'
					},
					{
						label: '高速里程%',
						field: 'f6',
						unit: '%'
					},
					{
						label: '超速里程%',
						field: 'f7',
						unit: '%'
					},
					{
						label: '严重超速时长%',
						field: 'f8',
						unit: '%'
					}
				],
				footerList: [{
						label: '全国排名',
						field: 'natrnk'
					},
					{
						label: '全省排名',
						field: 'prornk'
					},
					{
						label: '加权赔付率',
						field: 'wtlossrto'
					}
				],
				carryData: null,
				indicatorBar: [{
					label: '优秀',
					value: '[0.00,0.85)',
					color: '#17A00E'
				}, {
					label: '良好',
					value: '[0.85,0.95)',
					color: '#5DD425'
				}, {
					label: '正常',
					value: '[0.95,1.05)',
					color: '#2866FF'
				}, {
					label: '轻危',
					value: '[1.05,1.15)',
					color: '#FFB730'
				}, {
					label: '危险',
					value: '[1.15,1.25)',
					color: '#BC853B'
				}, {
					label: '高危',
					value: '[1.25,MAX)',
					color: '#EE0113'
				}],
				riskData: [{
					id: 'drive',
					title: '驾驶风险',
					suggested: 'drivingRecommendations',
					progress: [
						['疲劳驾驶', 'rftdrivrto'],
						['超速行驶', 'ovsprto'],
						['低速行驶', 'lowsprto'],
						['路口超速', 'crossovsprto'],
						['路口急加速', 'rapdspuprto'],
						['路口急减速', 'rapdspdownrto'],
						['急转弯', 'sharpturn'],
						['驾驶平稳度', 'drivsteadyrto'],
						['刹车灵敏度', 'brakesensrto']
					]
				}, {
					id: 'operation',
					title: '运营风险',
					suggested: 'operationalRecommendations',
					progress: [
						['运营时长', 'rundurrto'],
						['行驶里程', 'runmilerto'],
						['运营频次', 'runcountrto'],
						['夜间行驶', 'nightdrivrto'],
						['常跑路线', 'regularlinerto'],
						['轨迹完整率', 'trateintgrto'],
						['车辆及运营类型', 'optyperto'],
						// ['运输距离', 'transdisrto']
					]
				}, {
					id: 'road',
					title: '道路风险',
					suggested: 'roadRecommendation',
					progress: [
						['高速公路占比', 'hwayrto'],
						['危险路段', 'dngroadrto'],
						['危险路口', 'dngcrossrto'],
						['道路拥堵程度', 'roadfreerto'],
						['路口拥堵程度', 'crossfreerto']
					]
				}],
				toView: '',
				current: 0,
				seleBarData: [],
				scoreData: null,
				proposal: null
			}
		},
		onLoad(e) {
			this.carryData = JSON.parse(e.data);
			this.initData()
		},
		watch: {
			item2Index: function(n, o) {
				this.toView = this.riskData[n].id
			}
		},
		methods: {
			formatCarNumber(carnum, isAuth) {
				if (carnum) {
					if (isAuth == 1) {
						const numBegin = carnum.substring(0, 2);
						const numEnd = carnum.substring(2);
						return numBegin + '·' + numEnd;
					} else {
						const numBegin = carnum.substring(0, 3);
						const numEnd = carnum.substring(4, 5);
						return numBegin + '***' + numEnd;
					}
				}
				return "";
			},
			displayChangeFn(e) {
				console.log('========')
				e = e !== '' ? Number(e) : 0;
				if (Number(e) >= 80 && Number(e) < 100) {
					return 'A'
				} else if (Number(e) >= 60 && Number(e) < 80) {
					return 'B'
				} else if (Number(e) >= 40 && Number(e) < 60) {
					return 'C'
				} else if (Number(e) >= 20 && Number(e) < 40) {
					return 'D'
				} else if (Number(e) >= 0 && Number(e) < 20) {
					return 'E'
				} else {
					return '--'
				}
			},
			colorClassification(e) {
				e = e !== '' ? Number(e) : '';
				console.log(e, e > 0.95 && e <= 1.05, 'colorClassification')
				if (e >= 0 && e < 0.85) {
					return {
						color: '#17A00E',
						label: '优秀'
					}
				} else if (e >= 0.85 && e < 0.95) {
					return {
						color: '#5DD425',
						label: '良好'
					}
				} else if (e >= 0.95 && e < 1.05) {
					return {
						color: '#2866FF',
						label: '正常'
					}
				} else if (e >= 1.05 && e < 1.15) {
					return {
						color: '#FFB730',
						label: '轻危'
					}
				} else if (e >= 1.15 && e < 1.25) {
					return {
						color: '#BC853B',
						label: '危险'
					}
				} else if (e > 1.25) {
					return {
						color: '#EE0113',
						label: '高危'
					}
				} else {
					return {
						color: '#EE0113',
						label: '---'
					}
				}
				console.log(e, '===')
			},
			initData() {
				switch (this.carryData.type) {
					case 0:
						this.getScore();
						this.getProposal();
						break;
					case 1:
						this.getScore();
						break;
					case 2:
						this.getProposal();
						break;
				}
			},
			getScore() {
				this.seleBarData.push({
					lable: '综合评分',
					value: 0,
					open: true
				})
				Financial.xoilSinoiovCustomerRiskevalReport({
					id: this.carryData.id
				}).then(res => {
					this.scoreData = res.data;

				})
			},
			getProposal() {
				this.seleBarData.push({
					lable: '改善建议',
					value: 1,
					open: true
				})
				Financial.getEvaluationReportById({
					id: this.carryData.homeRiskVoId
				}).then(res => {
					this.proposal = res.data;
					this.proposal['transdisrto'] = res.data.drive?.transdisrto||res.data.operation?.transdisrto||res.data.road?.transdisrto;
					Object.keys(this.proposal).forEach(item=>{
						if( typeof this.proposal[item] == 'object' && this.proposal[item]?.transdisrto ){
							 delete this.proposal[item].transdisrto;
						}
					})
					this.proposalSort()
				})
			},
			proposalSort() {
				let driveProgress = Object.keys(this.proposal.drive).map(item => {
					let data = null
					this.riskData[0].progress.forEach(x => {
						if (x[1] == item) {
							data = x;
							x.push(this.colorClassification(this.proposal.drive[item]))
						}
					})
					return data
				})
				let operationProgress = Object.keys(this.proposal.operation).map(item => {
					let data
					this.riskData[1].progress.forEach(x => {
						if (x[1] == item) {
							data = x;
							x.push(this.colorClassification(this.proposal.operation[item]))
						}
					})
					return data
				})
				let roadProgress = Object.keys(this.proposal.road).map(item => {
					let data
					this.riskData[2].progress.forEach(x => {
						if (x[1] == item) {
							data = x;
							x.push(this.colorClassification(this.proposal.road[item]))
						}
					})
					return data
				});
				this.riskData[0].progress = driveProgress;
				this.riskData[1].progress = operationProgress;
				this.riskData[2].progress = roadProgress;
			},
			change() {},
			scroll() {},
			seleBarFn(e) {
				if (this.seleBarData.length <= 1) return;
				this.current = e.value
				console.log(e, this.scoreData, this.proposal, 'seleBarFn')
			}
		}
	}
</script>

<style>
	.samall_text {
		font-size: 28rpx;
	}

	.popup_explain_footer {
		width: 100%;
		background-color: #BBBBBB;
		border-radius: 20rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		height: 80rpx;
		/* position: absolute;
		bottom: 0; */
	}

	.indicatorBarGrade_item_value {
		margin-left: 30rpx;
	}

	.indicatorBarGrade_item:first-child {
		margin-top: 0;
	}

	.indicatorBarGrade_item {
		width: 100%;
		margin-top: 20rpx;
	}

	.indicatorBarGrade {
		flex: 1;
	}

	.indicatorBar {
		background: linear-gradient(to right, #17A00E, #5DD425, #2866FF, #FFB730, #BC853B, #EE0113);
		width: 74rpx;
		height: 20rpx;
		width: 100%;
		font-size: 28rpx;
	}

	.popup_explain {
		width: 574rpx;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx;
		position: relative;
	}

	.riskCar_scroller_item_propose_data_item {
		font-size: 24rpx;
	}

	.progressBar_tip {
		position: absolute;
		top: -38rpx;
		right: 0;
		font-size: 22rpx;
	}

	.riskCar_scroller_item_propose_title {
		width: 100%;
		text-align: center;
	}

	.riskCar_scroller_item_propose {
		font-size: 28rpx;
		background-color: #F0F0F0;
		width: 100%;
		padding: 40rpx;
		color: #666666;
	}

	.riskCar_scroller_item_progress_container .progressBar {
		background: #F0F0F0;
		min-width: 15%;
		height: 8rpx;
		position: relative;
		font-size: 24rpx;
	}

	.riskCar_scroller_item_progress_container .progress_label {
		width: 140rpx;
		text-align: right;
		font-size: 20rpx;
	}

	.riskCar_scroller_item_progress_container .progress_right {
		flex: 1;
		align-items: flex-end;
		margin-left: 20rpx;
	}

	.riskCar_scroller_item_progress_container .progress {
		margin-bottom: 26rpx;
		color: #666666;
	}

	.labelColor {
		color: #666666;
	}

	.detailsCar_item_label {}

	.detailsCar_item_value {
		margin-top: 8rpx;
	}

	.detailsCar_item {
		width: 28%;
		text-align: center;
		/* background-color: #007AFF; */
		font-size: 20rpx;
	}

	.voitureCar_item_value {
		font-size: 28rpx;
		margin-top: 15rpx;
	}

	.voitureCar_item {
		width: 50%;
		text-align: center;
	}

	.voitureCar {
		padding: 40rpx 50rpx;
		font-size: 24rpx;

	}

	.subjectColor {
		color: #FF6700;
	}

	.fractionCar_footer {
		flex: 1;
		align-items: flex-end;
	}

	.fractionCar_top {}

	.bigText {
		font-size: 48rpx;
	}

	.fractionCar_footer_item2_select {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		width: calc((100% / 3) - 20rpx);
		border-bottom: solid #FF6700 2px;
	}

	.fractionCar_footer_item2_ {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		width: calc((100% / 3) - 20rpx);
		padding-bottom: 2px;
	}

	.fractionCar_footer_item {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		width: calc(100% / 3);
	}

	.fractionCar_footer_item_value {}

	.fractionCar_top_right_label {
		color: #666666;
		font-size: 28rpx;
	}

	.fractionCar_top_left {
		flex: 1;
	}

	.fractionCar_top_right {
		text-align: center;
	}

	.fractionCar_top_right_rank {
		font-weight: 400;
		font-size: 106rpx;
		line-height: 112rpx;
		color: #FF6700;
	}

	.smallText {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #666666;
	}

	.fractionCar_time {
		margin: 10rpx 0;
	}

	.estimate_plate {
		/* display: block; */
		background: #F0F0F0;
		padding: 0 10rpx;
		margin-left: 20rpx;
		color: #666666;
		font-size: 24rpx;
		/* height: 40rpx; */
		display: inline-block;
		line-height: 40rpx;
	}

	.fractionCar_plateNumber {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 400;
		font-size: 48rpx;
		line-height: 56rpx;
		color: #FF6700;
	}

	.riskCar_scroller_item {
		width: 100%;
		min-height: 100%;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}

	.riskCar_scroller {
		height: 100%;
		width: 100%;
	}

	.bw {
		justify-content: space-between;
	}

	.riskCar_scroller_item_title {
		margin-bottom: 30rpx;
	}

	.fractionCar_top_right_suggest {
		background: #FF6700;
		border-radius: 5px;
		height: 60rpx;
		width: 236rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.riskCar {
		width: calc(100% - 54rpx);
		/* height: 920rpx; */
		border-radius: 10px;
		margin: auto;
		margin: 40rpx auto;
		flex: 1;
		overflow: hidden;
		background-color: #FFFFFF;
		padding: 40rpx;
	}

	.detailsCar {
		width: calc(100% - 54rpx);
		height: calc(100% - 710rpx);
		background: #FFFFFF;
		border-radius: 10px;
		margin: auto;
		padding: 40rpx 50rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		overflow: auto;
	}

	.voitureCar {
		width: calc(100% - 54rpx);
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 40rpx auto;

	}

	/* .swiper_item:last-child{
		overflow-y: auto !important;
	} */
	.swiper_item {
		width: 100%;
		/* height: 100%; */
	}

	.details_swiper {
		width: 100%;
		flex: 1;
		/* height: 100%; */
	}

	.scroll-view-item {
		width: 100%;
		height: 100%;
	}

	.scroll-x {
		background-color: #007AFF;
		height: 380rpx;
		width: 100%;
		white-space: nowrap
	}

	.details_data_container {
		flex: 1;
		/* background-color: #007AFF; */
		width: 100%;
		overflow: auto;
	}

	.fractionCar {
		width: calc(100% - 54rpx);
		min-height: 380rpx;
		background: #FFFFFF;
		border-radius: 10px;
		flex: none;
		order: 0;
		flex-grow: 0;
		left: 0;
		right: 0;
		margin: auto;
		margin-top: 50rpx;
		padding: 50rpx;
	}

	.flex {
		display: flex;
	}

	.ac {
		align-items: center;
	}

	.jc {
		justify-content: center;
	}

	.download {
		height: 100%;
		flex: 1;
		background-color: #FF6700;
	}

	.sendMail {
		height: 100%;
		flex: 1;
		background-color: #17A00E;
	}

	.details_footer {
		width: 100vw;
		background-color: #007AFF;
		display: flex;
		height: 120rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		position: relative;
		z-index: 1;
	}

	.details_container_bg {
		width: 180%;
		background: #FF6700;
		border-radius: 0 0 50% 50%;
		position: absolute;
		height: calc(76rpx + 190px + 20rpx + 340rpx + 45rpx + 90rpx + 20rpx);
		z-index: 0;
		left: -40%;
	}

	.column {
		flex-direction: column;
	}

	.details_container {
		flex: 1;
		position: relative;
		z-index: 1;
		/* padding: 0 54rpx; */
		display: flex;
		flex-direction: column;
	}

	.details_body {
		width: 100vw;
		height: 100vh;
		background: #E5E5E5;
		display: flex;
		flex-direction: column;
	}
</style>