v3-lab-xcx/pages_safetyExamine/views/examineManage/examineList.vue

<!-- 安全检查-校院巡查管理 -->
<template>
	<view class="examine">
		<view class="header">
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(index)" :key="index" v-for="(item,index) in tabTextTow">
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
				</view>
			</view>
			<view class="lab_title">
				<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="lab_title_l">
					<view class="lab_title_l_n">
						<view>{{getData.deptName?getData.deptName:'选择学院'}}</view>
						<img src="@/pages_safetyExamine/images/icon_06.png">
					</view>
				</picker>
				<view class="lab_title_r">
					<input type="text" v-model="getData.searchValue" placeholder="请输入实验室名称" name="search"
						@confirm='searchBtn' confirm-type='search' maxlength="50"
						placeholder-style="color: #CCCCCC;font-size:26rpx;">
					<view v-if="getData.searchValue>0" class="lab_title_r_btn" @click="clearBtn">
						<img src="@/pages_safetyExamine/images/clear.png" />
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list_three">
				<view class="list_three_li" v-for="(item,index) in  dataList" :key="index">
					<view class="list_three_li_t">
						<view class="list_three_li_t_l">
							<img v-if="item.checkRange==1" src="@/pages_safetyExamine/images/icon_xyxc_qx.png" />
							<img v-if="item.checkRange==2" src="@/pages_safetyExamine/images/icon_xyxc_xy.png" />
							<img v-if="item.checkRange==3" src="@/pages_safetyExamine/images/icon_xyxc_sys.png" />
							<text></text>
						</view>
						<view class="list_three_li_t_c">{{item.subjectName}}-{{item.roomNumber}}</view>
						<view class="list_three_li_t_c2" v-if="item.isOverdue==1">已逾期</view>
						<view class="list_three_li_t_r"></view>
					</view>
					<view class="list_three_li_m">
						<view class="list_three_li_m_t">{{item.title}}</view>
						<view class="list_three_li_m_b">
							<text class="blue_color" v-if="item.manageStatus==0">待检查</text>
							<text class="red_color" v-if="item.manageStatus==1">检查中</text>
							<text class="green_color" v-if="item.manageStatus==2">已检查</text>
							<text>{{item.checkType==1?'校院巡查':'实验室自查'}}-{{item.checkCategory==1?'综合检查':'专项检查'}}</text>
							<text>{{item.collegeName}}</text>
						</view>
					</view>
					<!-- 开始检查 -->
					<view v-if="buttonHide && item.isSelfData==1">
						<view v-if="item.manageStatus==0 && item.notStarted" class="list_three_li_b"
							@click="handleClick(item,'add')">开始检查</view>
						<view v-if="item.manageStatus==1 && item.notStarted" class="list_three_li_b"
							@click="handleClick(item,'edit')">编辑</view>
						<view v-if="!item.notStarted" class="list_three_li_b_tow"><img
								src="@/pages_safetyExamine/images/icon_xyxcgl_jhwks.png" />计划未开始</view>
						<view v-if="item.manageStatus==2 && item.notStarted" class="list_three_li_b_three">
							<img src="@/pages_safetyExamine/images/icon_djcsys.png" />
							<text>整改进度：</text>
							<text v-if="item.checkResult==0"
								@click="handleClick(item,'detail')">{{item.rectifySchedule}}</text>
							<text v-if="item.checkResult==1" @click="handleClick(item,'detail')">已完成</text>
							<text v-if="item.isEndProcess==1" class="report"
								@click="handleClick(item,'download')">整改报告</text>
						</view>
					</view>
				</view>
			</view>
			<img class="null-img" v-if="!dataList[0]" src="@/pages_safetyExamine/images/null-data-1.png">
		</scroll-view>
		<view class="bottom_btn" @click="handleClick('','startInspect')">开始检查</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		checkManageList,
	} from '@/api/apiDemo/index.js'
	import {
		systemDeptDropList
	} from '@/pages_safetyExamine/api/index.js'

	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
					isSelf: 0, //是否本人查询
					checkType: '', //检查组织(0全部1校院巡查2实验室自查)
					manageStatus: -1, //管理状态(-1全部 0待检查，1检查中，2已检查)
					searchValue: '',
				},
				tabTextTow: ['全部', '待检查', '检查中', '已检查'],
				curTabTow: 0,
				form: {
					name: '',
					type: '校院巡查',
					startTime: '',
					endTime: '',
					inspectScope: [],
					tiemQuickList: [],
					scopeIndex: '',
					seleteListLab: [],
					patrolIndex: '',
					seleteListMember: [],
				},
				collegeList: [],
				collegeIndex: 0,
				collegeArray: [],
				dataList: [],
				currentDate: '',
				myApplyGentle: '', //自查身份 校院巡查管理 里操作按钮隐藏
				applyGentle: '', //检查组身份 实验室自查管理 里操作按钮隐藏
				buttonHide: false, //判断按钮显示隐藏
			}
		},
		onLoad(option) {
			this.myApplyGentle = uni.getStorageSync('gentleIdentifierData').myApplyGentle
			this.applyGentle = uni.getStorageSync('gentleIdentifierData').applyGentle

			if (option.pageType == 1) {
				this.getData.checkType = option.pageType
				uni.setNavigationBarTitle({
					title: '校院巡查管理'
				})
				if (this.myApplyGentle && !this.applyGentle) {
					this.buttonHide = false
				}
				if (!this.myApplyGentle && !this.applyGentle) {
					this.buttonHide = false
				} else {
					this.buttonHide = true;
				}

			} else if (option.pageType == 2) {
				this.getData.checkType = option.pageType
				uni.setNavigationBarTitle({
					title: '实验室自查管理'
				})
				if (!this.myApplyGentle && this.applyGentle) {
					this.buttonHide = false
				}
				if (!this.myApplyGentle && !this.applyGentle) {
					this.buttonHide = false
				} else {
					this.buttonHide = true;
				}
			}
		},
		onShow() {

		},
		mounted() {
			//获取当前日期
			this.currentDate = this.getNowFormatDate()
			this.dataList = [];
			this.getList();
			this.systemDeptDropList();

		},
		methods: {
			//顶部tab点击
			tabClickTow(index) {
				this.curTabTow = index;
				this.getData.pageNum = 1;
				this.dataList = [];
				if (index == 0) {
					this.getData.manageStatus = -1;
				} else if (index == 1) {
					this.getData.manageStatus = 0;
				} else if (index == 2) {
					this.getData.manageStatus = 1;
				} else if (index == 3) {
					this.getData.manageStatus = 2;
				}
				this.getList()
			},
			//选择学院
			collegeChange(e) {
				this.collegeIndex = e.target.value;
				this.getData.deptId = this.collegeList[e.target.value].deptId
				this.getData.deptName = this.collegeList[e.target.value].deptName
				this.dataList = [];
				this.getList();
			},
			//实验室搜索
			searchBtn() {
				this.dataList = [];
				this.getList();
			},
			//清除
			clearBtn() {
				this.getData.pageNum = 1;
				this.collegeIndex = 0;
				this.getData.deptId = '';
				this.getData.deptName = '';
				this.getData.searchValue = '';
				this.dataList = [];
				this.getList();
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.pageNum) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.getData.pageNum += 1;
						self.getList();
					}, 1000)

				}

			},
			//查询学院列表
			async systemDeptDropList() {
				let self=this;
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					data.data.forEach(function(item) {
						item.type = false;
					})
					self.collegeList = data.data;

					//检查管理
					for (let i = 0; i < data.data.length; i++) {
						self.collegeArray.push(data.data[i].deptName)
					}
				}
			},
			handleClick(row, doType) {
				let self = this;
				if (doType == 'add') { //开始检查
					uni.navigateTo({
						url: '/pages_safetyExamine/views/examineManage/examineAdd?id=' + row.id
					});
				} else if (doType == 'edit') {
					uni.navigateTo({
						url: '/pages_safetyExamine/views/examineManage/examineAdd?id=' + row.id
					});
				} else if (doType == 'detail') {
					uni.navigateTo({
						url: '/pages_safetyExamine/views/examineManage/examineDetail?id=' + row.id +
							'&manageStatus=' + row.manageStatus
					});
				} else if (doType == 'startInspect') { //开始检查
					uni.navigateTo({
						url: '/pages_safetyExamine/views/examineManage/examineAdd'
					});
				} else if (doType == 'download') { //整改报告下载rectifyNotice 整改通知(1整改告知书 2整改通知书)
					this.rectifyReport(row.id)
				}

			},
			//整改报告
			rectifyReport(id) {
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url + '/zd-security/checkRectify/genReport/' + id,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function(res) {
						const fileManager = wx.getFileSystemManager()
						const filePath = wx.env.USER_DATA_PATH + '/(整改报告).docx'
						fileManager.saveFile({
							tempFilePath: res.tempFilePath,
							filePath,
							success: () => {
								uni.hideLoading();
								wx.openDocument({
									filePath: filePath,
									showMenu: true,
									fileType: 'docx'
								})
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon: "none",
									mask: true,
									duration: 2000
								});
							}
						})
					},
					fail: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				})
			},
			//整改通知书
			genNotice(id) {
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url + '/zd-security/checkManage/getRectifyAdviceNote/' + id,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function(res) {
						const fileManager = wx.getFileSystemManager()
						const filePath = wx.env.USER_DATA_PATH + '/(整改通知书).docx'
						fileManager.saveFile({
							tempFilePath: res.tempFilePath,
							filePath,
							success: () => {
								uni.hideLoading();
								wx.openDocument({
									filePath: filePath,
									showMenu: true,
									fileType: 'docx'
								})
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon: "none",
									mask: true,
									duration: 2000
								});
							}
						})
					},
					fail: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				})
			},
			//整改告知书
			genReport(id) {
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url + '/zd-security/checkManage/getRectifyNotification/' + id,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function(res) {
						const fileManager = wx.getFileSystemManager()
						const filePath = wx.env.USER_DATA_PATH + '/整改报告.docx'
						fileManager.saveFile({
							tempFilePath: res.tempFilePath,
							filePath,
							success: () => {
								uni.hideLoading();
								wx.openDocument({
									filePath: filePath,
									showMenu: true,
									fileType: 'docx'
								})
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon: "none",
									mask: true,
									duration: 2000
								});
							}
						})
					},
					fail: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				})
			},
			//获取当前日期函数
			getNowFormatDate() {
				let date = new Date(),
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

				return `${year}-${month}-${strDate}`
			},
			//是否可以开始检查
			compareTime(date1) {
				if (!date1) {
					return false
				} else {
					const oDate1 = new Date(date1);
					const oDate2 = new Date(this.currentDate)

					if (oDate1.getTime() <= oDate2.getTime()) {
						return true; //可以开始
					} else {
						return false; //不能开始
					}
				}
			},
			async getList() {
				let self = this;
				const {
					data
				} = await checkManageList(this.getData);
				if (data.code == 200) {
					//判断计划是否开始
					data.data.records.forEach(function(item) {
						item.notStarted = self.compareTime(item.cycleStartTime)
					})
					this.dataList = [...this.dataList, ...data.data.records]
					this.total = data.data.total;
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;
		// padding: 0 30rpx;
		// box-sizing: border-box;
		padding-bottom: 126rpx;
		box-sizing: border-box;

		.blue_color {
			color: #0183FA;
			border: 1rpx solid #0183FA;
		}

		.red_color {
			color: #FF4545;
			border: 1rpx solid #FF4545;
		}

		.green_color {
			color: #1FA50D;
			border: 1rpx solid #1FA50D;
		}

		.null-img {
			display block;
			 width: 276rpx;
			height: 321rpx;
			margin: 100rpx 0 0 274rpx;
		}

		.info-max-box {
			flex: 1;
			overflow: scroll;

			padding: 220rpx 0rpx 0;
			box-sizing: border-box;
		}

		/* 切换按钮 */
		.header {
			width: 100%;
			position: fixed;
			top: 0rpx;
			z-index: 100;

			.tabTitle_tow {
				width: 100%;
				height: 100rpx;
				background: #fff;
				display flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #E0E0E0;

				.tabTitle_tow_li {
					position: relative;
					width: 146rpx;
					text-align center;

					.tabTitle_tow_text {
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						position: relative;

						&.on {
							color: #0183FA;
						}
					}

					.tabTitle_tow_across {
						width: 50rpx;
						height: 4rpx;
						background: #0183FA;
						border-radius: 2rpx;
						margin-left: 46rpx;
						display none;

						&.on {
							display block;
						}
					}

				}
			}

			.lab_title {
				width: 750rpx;
				height: 100rpx;
				background: #FFFFFF;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;

				.lab_title_l {
					width: 250rpx;
					height: 60rpx;
					margin-right: 20rpx;

					.lab_title_l_n {
						width: 250rpx;
						height: 60rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E0E0E0;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						>view {
							flex: 1;
							line-height: 60rpx;
							margin-left: 20rpx;
							color: #999999;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						>img {
							width: 14rpx;
							height: 8rpx;
							margin-right: 30rpx;
						}
					}
				}

				.lab_title_r {
					width: 420rpx;
					height: 60rpx;
					position: relative;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;

					.lab_title_r_btn {
						width: 60rpx;
						height: 60rpx;
						 position: absolute;
						top: 0rpx;
						right: 0rpx;
						z-index: 100;

						>img {
							width: 20rpx;
							height: 20rpx;
							position: absolute;
							top: 20rpx;
							left: 24rpx;
						}
					}

					>input {
						width: 274rpx;
						height: 60rpx;
						position: absolute;
						top: 0rpx;
						left: 60rpx;
					}

					.clear {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 0rpx;
						right: 20rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 60rpx;
					}
				}
			}

		}

		.list_three {
			padding: 0 30rpx;
			box-sizing: border-box;

			.list_three_li {
				position: relative;
				width: 690rpx;
				/* height: 360rpx; */
				height: auto;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				.list_three_li_t {
					width: 100%;
					height: 110rpx;
					position: relative;
					left: 0;
					top: 0;

					.list_three_li_t_l {
						>img {
							width: 70rpx;
							height: 70rpx;
						}

						>text {
							position: absolute;
							left: -15rpx;
							top: 76rpx;
							display: inline-block;
							width: 30rpx;
							height: 30rpx;
							background: #F5F5F5;
							border-radius: 15rpx;
						}
					}

					.list_three_li_t_c {
						width: 630rpx;
						height: 110rpx;
						position: absolute;
						left: 30rpx;
						top: 0;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 110rpx;
						border-bottom: 1rpx dashed #D8D8D8;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 120rpx;
						box-sizing: border-box;
					}

					.list_three_li_t_c2 {
						position: absolute;
						right: 20rpx;
						top: 38rpx;
						width: 120rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #FF5757;
						line-height: 40rpx;
						border: 1rpx solid #FF5757;
						border-radius: 6rpx;
						text-align: center;
					}

					.list_three_li_t_r {
						position: absolute;
						right: -15rpx;
						top: 76rpx;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}
				}

				.list_three_li_m {
					// position: absolute;
					// top: 110rpx;
					// left: 0;
					width: 690rpx;
					height: 158rpx;
					padding-left: 30rpx;
					box-sizing: border-box;

					.list_three_li_m_t {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						margin-top: 22rpx;
					}

					.list_three_li_m_b {
						margin-top: 26rpx;

						>text:nth-of-type(1) {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							border-radius: 6rpx;
							padding: 0 20rpx;
							margin-right: 14rpx;
						}

						>text:nth-of-type(2) {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #0183FA;
							line-height: 40rpx;
							padding: 0 8rpx;
							border-radius: 6rpx;
							background: rgba(1, 131, 250, 0.1);
							margin-right: 24rpx;
						}

						>text:nth-of-type(3) {
							display: inline-block;
							width: 220rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}
					}
				}

				.list_three_li_b {
					height: 80rpx;
					width: 100%;
					// position: absolute;
					// top: 278rpx;
					// left: 0;
					border-top: 1rpx solid #E0E0E0;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 80rpx;
					text-align: center;
				}

				.list_three_li_b_tow {
					height: 80rpx;
					width: 100%;
					// position: absolute;
					// top: 278rpx;
					// left: 0;
					border-top: 1rpx solid #E0E0E0;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					>img {
						width: 28rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}
				}

				.list_three_li_b_three {
					height: 80rpx;
					// position: absolute;
					// top: 278rpx;
					// left: 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					border-top: 1rpx solid #E0E0E0;

					>img {
						width: 24rpx;
						height: 30rpx;
						margin-right: 26rpx;
						margin-left: 30rpx;
					}

					>text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					>text:nth-of-type(2) {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 28rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.report {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 28rpx;
						margin-right: 40rpx;
					}
				}
			}
		}

		.bottom_btn {
			position: fixed;
			bottom: 26rpx;
			left: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #0183FA;
			border-radius: 20rpx;
			text-align: center;

		}

		/* 指纹采集 */
		.shade {
			height: 100%;
			width: 100%;
			position: fixed;
			display: flex;
			flex-direction: column;
			z-index: 10;
			background: rgba(0, 0, 0, 0.2);

			.null-box {
				flex: 1;
			}

			.shade_n {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				.shade_n_title {
					height: 100rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #E0E0E0;

					>text:nth-of-type(1) {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 100rpx;
					}

					>text:nth-of-type(2) {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 100rpx;

					}
				}

				.shade_n_b {
					height: 460rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					overflow-y: auto;

					.shade_n_b_li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 80rpx;
						border-bottom: 1rpx solid #E0E0E0;

						>text {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							line-height: 80rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						>img {
							width: 24rpx;
							height: 16rpx;
							margin-right: 14rpx;
						}
					}

					.color_A {
						color: #333333;
					}

					.color_B {
						color: #0183FA;
					}


				}
			}
		}
	}
</style>