Homestay_manage_owner/src/views/data/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">数据中台</div>
						</div>
					</div>
					<div class="cell-body">
						<el-row type="flex">
							<el-col :span="24">
								<div class="header">
									<div class="icon"></div>
									<div class="title">经营概况</div>
								</div>
								<div class="content">
									<div class="con-con con-bg-1">
										<div class="con-title">民宿总数</div>
										<div class="con-num">{{ total_number_of_accommodation }}</div>
									</div>
									<div class="con-con con-bg-2">
										<div class="con-title">今日访问量</div>
										<div class="con-num">{{ todays_traffic }}</div>
										<div v-if="more_traffic_today_than_yesterday >= 0" class="con-num">较昨天 ▲ {{ more_traffic_today_than_yesterday }}</div>
										<div v-else class="con-num">较昨天 ▼ {{ more_traffic_today_than_yesterday }}</div>
									</div>
									<div class="con-con con-bg-3">
										<div class="con-title">今日销售额</div>
										<div class="con-num">{{ todays_sales }}</div>
										<div v-if="sales_are_higher_today_than_yesterday >= 0" class="con-num">较昨天 ▲ {{ sales_are_higher_today_than_yesterday }}
										</div>
										<div v-else class="con-num">较昨天 ▼ {{ sales_are_higher_today_than_yesterday }}</div>
									</div>
									<div class="con-con con-bg-4">
										<div class="con-title">今日订单量</div>
										<div class="con-num">{{ order_quantity_today }}</div>
										<div v-if="todays_order_volume_is_higher_than_yesterday >= 0" class="con-num">较昨天 ▲
											{{ todays_order_volume_is_higher_than_yesterday }}
										</div>
										<div v-else class="con-num">较昨天 ▼ {{ todays_order_volume_is_higher_than_yesterday }}</div>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="6">
								<div class="header">
									<div class="icon"></div>
									<div class="title">订单状态占比</div>
								</div>
								<div class="content">
									<div ref="chartPie" style="width: 400px; height: 330px;"></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="header">
									<div class="icon"></div>
									<div class="title">民宿统计</div>
								</div>
								<div class="content">
									<div ref="chartBar" style="width: 400px; height: 330px;"></div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="head">
									<div class="header">
										<div class="icon"></div>
										<div class="title">访问量趋势</div>
									</div>
									<div class="ctrs">
										<el-button-group>
											<el-button size="mini" :class="{ active: activeVisitButton === 'activeVisitButton1' }"
												@click="toggleVisitButton('activeVisitButton1')">今日</el-button>
											<el-button size="mini" :class="{ active: activeVisitButton === 'activeVisitButton2' }"
												@click="toggleVisitButton('activeVisitButton2')">本周</el-button>
											<el-button size="mini" :class="{ active: activeVisitButton === 'activeVisitButton3' }"
												@click="toggleVisitButton('activeVisitButton3')">本月</el-button>
										</el-button-group>
										<el-date-picker ref="datePickerRef" v-model="visit_date" type="daterange" align="right" unlink-panels
											range-separator="～" start-placeholder="开始日期" end-placeholder="结束日期" class="custom-date-picker">
										</el-date-picker>
									</div>
								</div>
								<div class="content">
									<div ref="chartArea" style="width: 100%; height: 330px; box-sizing: border-box;"></div>
								</div>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<div class="head">
									<div class="header">
										<div class="icon"></div>
										<div class="title">用户画像</div>
									</div>
									<div class="ctrs">
										<el-button-group>
											<el-button size="mini" :class="{ active: activeUserButton === 'activeUserButton1' }"
												@click="toggleUserButton('activeUserButton1')">今日</el-button>
											<el-button size="mini" :class="{ active: activeUserButton === 'activeUserButton2' }"
												@click="toggleUserButton('activeUserButton2')">本月</el-button>
											<el-button size="mini" :class="{ active: activeUserButton === 'activeUserButton3' }"
												@click="toggleUserButton('activeUserButton3')">本年</el-button>
										</el-button-group>
									</div>
								</div>
								<div class="content">
									<div class="left-pie">
										<div ref="chartUserPie" style="width: 100%; height: 330px; box-sizing: border-box;"></div>
									</div>
									<div class="right-bar">
										<div ref="chartUserBar" style="width: 100%; height: 330px; box-sizing: border-box;"></div>
									</div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="head">
									<div class="header">
										<div class="icon"></div>
										<div class="title">订单量排行</div>
									</div>
									<div class="ctrs">
										<el-button-group>
											<el-button size="mini" :class="{ active: activeOrderButton === 'activeOrderButton1' }"
												@click="toggleOrderButton('activeOrderButton1')">今日</el-button>
											<el-button size="mini" :class="{ active: activeOrderButton === 'activeOrderButton2' }"
												@click="toggleOrderButton('activeOrderButton2')">本月</el-button>
											<el-button size="mini" :class="{ active: activeOrderButton === 'activeOrderButton3' }"
												@click="toggleOrderButton('activeOrderButton3')">本年</el-button>
										</el-button-group>
									</div>
								</div>
								<div class="content">
									<el-table :data="tableOrderData" style="width: 100%" height="330">
										<el-table-column fixed prop="rark" label="排行" align="center" width="80px">
										</el-table-column>
										<el-table-column prop="hotelName" label="民宿名称" align="center">
										</el-table-column>
										<el-table-column prop="bookNum" label="订单量" align="center">
										</el-table-column>
									</el-table>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="head">
									<div class="header">
										<div class="icon"></div>
										<div class="title">销售额排行榜</div>
									</div>
									<div class="ctrs">
										<el-button-group>
											<el-button size="mini" :class="{ active: activeSellButton === 'activeSellButton1' }"
												@click="toggleSellButton('activeSellButton1')">今日</el-button>
											<el-button size="mini" :class="{ active: activeSellButton === 'activeSellButton2' }"
												@click="toggleSellButton('activeSellButton2')">本月</el-button>
											<el-button size="mini" :class="{ active: activeSellButton === 'activeSellButton3' }"
												@click="toggleSellButton('activeSellButton3')">本年</el-button>
										</el-button-group>
									</div>
								</div>
								<div class="content">
									<el-table :data="tableSellData" style="width: 100%" height="330">
										<el-table-column fixed prop="rark" label="排行" align="center" width="80px">
										</el-table-column>
										<el-table-column prop="hotelName" label="民宿名称" align="center">
										</el-table-column>
										<el-table-column prop="salesAmount" label="销售额" align="center">
										</el-table-column>
									</el-table>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	import {
		getOrderData,
		getHomestayStatistics,
		getOrderVolumeRanking,
		getQuerySalesRankings,
		getManagementProfile
	} from '@/api/data';

	import {
		getDateComponents
	} from '@/js/common';

	export default {
		data() {
			return {
				total_number_of_accommodation: 0,
				todays_traffic: 0,
				more_traffic_today_than_yesterday: 0,
				todays_sales: 0,
				sales_are_higher_today_than_yesterday: '0.00',
				order_quantity_today: 0,
				todays_order_volume_is_higher_than_yesterday: 0,
				tableOrderData: [], // 订单量排行
				tableSellData: [], // 销售量排行
				chartOrderPieData: [], // 订单状态占比数据
				chartUserPieData: [{
						value: 335,
						name: '男'
					},
					{
						value: 310,
						name: '女'
					}
				],
				chartBarData: [{
						value: 335,
						name: '中源乡'
					},
					{
						value: 310,
						name: '中源乡1'
					},
					{
						value: 234,
						name: '中源乡2'
					},
					{
						value: 135,
						name: '中源乡3'
					},
					{
						value: 1548,
						name: '中源乡4'
					},
					{
						value: 1548,
						name: '中源乡5'
					}
				],
				chartUserBarData: [{
						value: 335,
						name: '24岁及以下'
					},
					{
						value: 310,
						name: '25-30岁'
					},
					{
						value: 234,
						name: '31-35岁'
					},
					{
						value: 135,
						name: '36-40岁'
					},
					{
						value: 1548,
						name: '41岁及以上'
					}
				],
				chartPie: null,
				chartBar: null,
				chartArea: null,
				visit_date: null,
				activeVisitButton: 'activeVisitButton2',
				activeUserButton: 'activeUserButton2',
				activeOrderButton: 'activeOrderButton2',
				activeSellButton: 'activeSellButton2',
			}
		},
		created() {

		},
		mounted() {
			// 获取订单状态占比数据
			this.getOrderData()
			// 查询各县民宿数量 民宿统计
			this.getHomestayStatistics()
			// 查询订单量排行
			this.getOrderVolumeRanking(2)
			// 查询销售额排行
			this.getQuerySalesRankings(2)
			// 查询经营概况
			this.getManagementProfile()

			this.pieUser()
			this.barUser()
			this.area()
			// 自适应窗口大小
			window.addEventListener('resize', () => {
				this.chartPie.resize();
				this.chartBar.resize();
			});
		},
		methods: {
			toggleVisitButton(buttonName) {
				this.activeVisitButton = buttonName;
			},
			toggleUserButton(buttonName) {
				this.activeUserButton = buttonName;
			},
			// 销售排行不同时间切换
			toggleSellButton(buttonName) {
				if (buttonName === 'activeSellButton1') {
					this.getQuerySalesRankings(1)
				} else if (buttonName === 'activeSellButton2') {
					this.getQuerySalesRankings(2)
				} else if (buttonName === 'activeSellButton3') {
					this.getQuerySalesRankings(3)
				} else {
					this.$message.error('未知时间')
				}
				this.activeSellButton = buttonName;
			},
			getManagementProfile() {
				getManagementProfile().then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						// bookNumyDay;//昨日订单量
						// salesAmountyDay;//昨日销售量
						const tempdata = res.data

						this.total_number_of_accommodation = tempdata.hotelSum // 民宿总数
						// 访问量
						this.todays_traffic = 0
						this.more_traffic_today_than_yesterday = 0
						// 销售额
						this.todays_sales = tempdata.salesAmountDay // 今日销售量 
						this.sales_are_higher_today_than_yesterday = tempdata.salesAmountGrowth.toFixed(2) // 销售量增长量
						// 订单量
						this.order_quantity_today = tempdata.bookNumDay // 今日订单量
						this.todays_order_volume_is_higher_than_yesterday = tempdata.bookNumGrowth // 订单量增长量
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 查询销售额排行
			 */
			getQuerySalesRankings(param) {
				getQuerySalesRankings(param).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						this.tableSellData = []
						for (var i = 0; i < res.data.length; i++) {
							this.tableSellData.push({
								rark: res.data[i].rank,
								bookNum: res.data[i].bookNum,
								hotelName: res.data[i].hotelName,
								salesAmount: res.data[i].salesAmount
							})
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			// 订单排行不同时间切换
			toggleOrderButton(buttonName) {
				if (buttonName === 'activeOrderButton1') {
					this.getOrderVolumeRanking(1)
				} else if (buttonName === 'activeOrderButton2') {
					this.getOrderVolumeRanking(2)
				} else if (buttonName === 'activeOrderButton3') {
					this.getOrderVolumeRanking(3)
				} else {
					this.$message.error('未知时间')
				}
				this.activeOrderButton = buttonName;
			},
			/**
			 * 查询订单量排行
			 */
			getOrderVolumeRanking(param) {
				getOrderVolumeRanking(param).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						this.tableOrderData = []
						for (var i = 0; i < res.data.length; i++) {
							this.tableOrderData.push({
								rark: res.data[i].rank,
								bookNum: res.data[i].bookNum,
								hotelName: res.data[i].hotelName,
								salesAmount: res.data[i].salesAmount
							})
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 查询各县民宿数量 民宿统计
			 */
			getHomestayStatistics() {
				getHomestayStatistics().then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						this.chartBarData = []
						for (var i = 0; i < res.data.length; i++) {
							this.chartBarData.push({
								value: res.data[i].hotelNum,
								name: res.data[i].hposition
							})
						}
						this.bar()
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			// 查询各县民宿数量 民宿统计
			bar() {
				this.chartBar = echarts.init(this.$refs.chartBar);
				this.chartBar.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						type: 'plain',
						orient: 'horizontal',
						left: 'center',
						top: 'bottom'
					},
					grid: {
						left: 0,
						top: 0,
						right: 15,
						bottom: 0,
						containLabel: true
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							interval: 0,
							// rotate: 30
							formatter: function(params) {
								var newParamsName = ""; // 最终拼接成的字符串
								var paramsNameNumber = params.length; // 实际标签的字数
								var provideNumber = 6; // 每行能显示的字的个数
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
								/**
								 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
								 */
								// 条件等同于rowNumber>1
								if (paramsNameNumber > provideNumber) {
									/** 循环每一行,p表示行 */
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = ""; // 表示每一次截取的字符串
										var start = p * provideNumber; // 开始截取的位置
										var end = start + provideNumber; // 结束截取的位置
										// 此处特殊处理最后一行的索引值
										if (p == rowNumber - 1) {
											// 最后一次不换行
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											// 每一次拼接字符串并换行
											// tempStr = params.substring(start, end) + "\n";
											tempStr = params.substring(start, end) + "…";
										}
										newParamsName += tempStr; // 最终拼成的字符串
										break;
									}

								} else {
									// 将旧标签的值赋给新标签
									newParamsName = params;
								}
								//将最终的字符串返回
								return newParamsName
							}
						},
						data: this.chartBarData.map(item => item.name)
					},
					series: [{
						type: 'bar',
						data: this.chartBarData,
						itemStyle: {
							color: '#8080FF'
						}
					}]
				});
			},
			/**
			 * 获取订单状态占比数据
			 */
			getOrderData() {
				getOrderData().then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						this.chartOrderPieData = []
						for (var i = 0; i < res.data.length; i++) {
							this.chartOrderPieData.push({
								value: res.data[i].statusNum,
								name: res.data[i].orderStatusName
							})
						}
						this.orderPie()
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			// 订单状态占比 饼图
			orderPie() {
				this.chartPie = echarts.init(this.$refs.chartPie);
				this.chartPie.setOption({
					tooltip: {
						trigger: "item",
					},
					legend: {
						orient: 'horizontal',
						left: 'center',
						top: 'bottom'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '28%',
						top: '3%'
					},
					series: [{
						type: 'pie',
						radius: ['30%', '50%'],
						data: this.chartOrderPieData,
						label: {
							show: true,
							position: 'outer',
							distance: 0,
							formatter: '{c}'
						},
						emphasis: {
							label: {
								show: true,
								fontWeight: 'bold'
							}
						}
					}]
				});
			},
			// 饼图
			pieUser() {
				this.chartUserPie = echarts.init(this.$refs.chartUserPie);
				this.chartUserPie.setOption({
					tooltip: {
						trigger: "item",
					},
					title: {
						text: '客户性别占比',
						left:'center',
						textAlign: 'left',
						textStyle: {
							fontSize: 14
						}
					},
					legend: {
						orient: 'horizontal',
						bottom: 10
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '3%'
					},
					series: [{
						type: 'pie',
						radius: ['30%', '50%'],
						data: this.chartUserPieData,
						label: {
							show: true,
							position: 'outer',
							distance: 0,
							formatter: '{c}'
						},
						emphasis: {
							label: {
								show: true,
								fontWeight: 'bold'
							}
						}
					}]
				});
			},
			// 柱形图
			barUser() {
				this.chartUserBar = echarts.init(this.$refs.chartUserBar);
				this.chartUserBar.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					title: {
						text: '人群年龄占比',
						left:'center',
						textStyle: {
							fontSize: 14
						}
					},
					legend: {
						type: 'plain',
						orient: 'horizontal',
						bottom: 10
					},
					grid: {
						left: '8%',
						right: '5%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
					},
					yAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							interval: 0,
							// rotate: 60
						},
						data: this.chartUserBarData.map(item => item.name)
					},
					series: [{
						type: 'bar',
						data: this.chartUserBarData,
						itemStyle: {
							color: '#8080FF'
						}
					}]
				});
			},
			// 面积图
			area() {
				this.chartArea = echarts.init(this.$refs.chartArea);

				this.chartArea.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					grid: {
						left: '8%',
						right: '5%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07'],
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						type: 'line',
						areaStyle: {},
						data: [65, 59, 80, 81, 56, 55, 40],
						itemStyle: {
							color: '#4CBAFF'
						}
					}],
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							display: flex;
							align-items: center;
							cursor: pointer;
							box-sizing: border-box;

							.title {
								text-align: center;
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
							}
						}
					}

					.cell-body {
						background-color: #EFF2F7;
						padding: 6px;

						.el-row {

							.el-col {
								margin: 6px;
								border-radius: 6px;
								background-color: #FFFFFF;

								.head {
									display: flex;
									justify-content: space-between;
								}

								.header {
									display: flex;

									.icon {
										width: 5px;
										height: 20px;
										background-color: #8080FF;
										margin-right: 8px;
									}

									.title {
										font-size: 18px;
										font-weight: 500;
									}
								}

								.ctrs {
									display: flex;
									justify-content: space-between;

									.custom-date-picker {
										width: 260px;
										font-size: 14px;
										height: 28px;
										margin-left: 10px;
									}
								}

								.content {
									display: flex;
									justify-content: space-around;
									padding-top: 20px;
									color: #FFFFFF;

									.left-pie {
										width: 50%;
									}

									.right-bar {
										width: 50%;
									}

									.con-con {
										width: 300px;
										height: 130px;
										padding: 15px 50px;
										border-radius: 10px;
										display: flex;
										flex-direction: column;
										justify-content: space-around;

										.con-title {
											font-size: 20px;
											font-weight: 600;
										}

										.con-num {
											font-size: 18px;
											font-weight: 600;
										}
									}

									.con-bg-1 {
										background: linear-gradient(to right, #0BBEFE, #7DFDD9);
									}

									.con-bg-2 {
										background: linear-gradient(to right, #09BDFE, #01A7F0);
									}

									.con-bg-3 {
										background: linear-gradient(to right, #F286A0, #FCC587);
									}

									.con-bg-4 {
										background: linear-gradient(to right, #FAC2EB, #A28DD1);
									}

									::v-deep .el-table__row .cell {
										white-space: nowrap !important;
									}

									::v-deep .el-table__row:nth-child(1) td:nth-child(1) .cell,
									::v-deep .el-table__row:nth-child(2) td:nth-child(1) .cell,
									::v-deep .el-table__row:nth-child(3) td:nth-child(1) .cell,
									::v-deep .el-table__row:nth-child(4) td:nth-child(1) .cell,
									::v-deep .el-table__row:nth-child(5) td:nth-child(1) .cell {
										display: block;
										width: 30px;
										height: 30px;
										line-height: 30px;
										text-align: center;
										margin-left: 26px;
										border-radius: 50%;
										color: #FFFFFF !important;

									}

									::v-deep .el-table__row:nth-child(1) td:nth-child(1) .cell {
										background-color: #f73131;
										box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
									}

									::v-deep .el-table__row:nth-child(2) td:nth-child(1) .cell {
										background-color: #f60 !important;
										box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
									}

									::v-deep .el-table__row:nth-child(3) td:nth-child(1) .cell {
										background-color: #ffc20d !important;
										box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
									}

									::v-deep .el-table__row:nth-child(4) td:nth-child(1) .cell {
										background-color: #c8c6c7 !important;
										box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
									}

									::v-deep .el-table__row:nth-child(5) td:nth-child(1) .cell {
										background-color: #c8c6c7 !important;
										box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>

<style>
	.el-date-editor .el-range__icon,
	.el-date-editor .el-range__close-icon,
	.el-date-editor .el-range-separator {
		height: 28px;
		line-height: 28px;
	}

	.el-button-group .el-button.active {
		color: #fff;
		background-color: #8080FF;
	}
</style>