fix

virgo.wzfrontend/yui_wx/pages.json

@@ -275,6 +275,13 @@
 		"style": {
 			"navigationBarTitleText": "数据中心"
 		}
+	},
+	{
+		"path" : "pages/file/file",
+		"style" : 
+		{
+			"navigationBarTitleText" : ""
+		}
 	}],
 	"tabBar": {
 		"color": "#8c8c8c",

virgo.wzfrontend/yui_wx/pages/dataCenter/dataCenter.vue

@@ -3,13 +3,13 @@
 		<mescroll-empty :option="option" @emptyclick="$navigateTo('/pages/login/login')" v-if="isEmpty">
 		</mescroll-empty>
 		<view class="file-list" v-else>
-			<view class="file-item" v-for="(item,index) in tableData" :key="index">
+			<view class="file-item" v-for="(item,index) in tableData" :key="index" @click="clickFolder(item)">
 				<view class="file-image">
 					<image class="image" src="/static/image/datacenter/folder.png" mode="aspectFill"></image>
 				</view>
 				<view class="file-content">
 					<view class="title">{{item.name}}</view>
-					<view class="sub">2024-01-01</view>
+					<view class="sub">{{item.createDate || '-'}}</view>
 				</view>
 			</view>
 		</view>
@@ -21,6 +21,9 @@
 		generateFileNodeProject,
 		getProjectDirList
 	} from '@/request/api/datacenter.js'
+	import {
+		projectPermission
+	} from '@/uitls/datacenter'
 	export default {
 		data() {
 			return {
@@ -44,31 +47,30 @@
 					tip: '暂未加入项目'
 				}
 			} else {
+				this.initProjectDir();
 				this.isEmpty = false;
 			}
 		},
-		onLoad(body) {
-			console.log(body.parentId);
-			if (!body.parentId) return this.initProjectDir();
-			this.parentId = body.parentId;
-			this.projectDirList();
-		},
 		methods: {
 			initProjectDir() {
 				generateFileNodeProject(this.$store.getters.project.id).then(res => {
 					if (res.code === 200) {
 						this.tableData = res.data.sort((a, b) => b.directory - a.directory);
-						console.log(this.tableData);
 					}
 				});
 			},
-			projectDirList() {
-				getProjectDirList(this.parentId).then(res => {
-					if (res.code === 200) {
-						this.tableData = res.data.sort((a, b) => b.directory - a.directory);
-					}
+			clickFolder(item) {
+				if (!item.directory) return;
+				projectPermission({
+					id: item.id,
+					oldPermission: item.permissions,
+					type: 'access',
+					name: item.name,
+					folderList: [item.name]
+				}, () => {
+					this.$navigateTo('/pages/file/file?parentId=' + item.id + '&title=' + item.name)
 				});
-			},
+			}
 		}
 	}
 </script>

virgo.wzfrontend/yui_wx/pages/file/file.vue

@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<mescroll-empty :option="option" v-if="tableData.length === 0">
+		</mescroll-empty>
+		<view class="file-list" v-else>
+			<view class="file-item" v-for="(item,index) in tableData" :key="index" @click="clickFolder(item)">
+				<view class="file-image">
+					<image class="image" src="../../static/image/datacenter/folder.png" mode="heightFix"
+						v-if="item.directory"></image>
+					<image class="image" :src="returnImage(item)" mode="heightFix" v-else></image>
+				</view>
+				<view class="file-content">
+					<view class="title">{{item.name}}</view>
+					<view class="sub">{{item.createDate || '-'}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getProjectDirList
+	} from '@/request/api/datacenter.js'
+	const fileBox = {
+		'doc': 'doc.png',
+		'docx': 'doc.png',
+		'jpg': 'jpg.png',
+		'jpeg': 'jpg.png',
+		'mp3': 'mp3.png',
+		'mp4': 'mp4.png',
+		'pdf': 'pdf.png',
+		'png': 'png.png',
+		'ppt': 'ppt.png',
+		'pptx': 'pptx.png',
+		'txt': 'txt.png',
+		'xls': 'xls.png',
+		'xlsx': 'xls.png',
+		'zip': 'zip.png',
+	}
+	import {
+		projectPermission
+	} from '@/uitls/datacenter'
+	export default {
+		data() {
+			return {
+				option: {
+					tip: '当前文件夹暂无数据'
+				},
+				tableData: [],
+				parentId: '',
+			}
+		},
+		onLoad(body) {
+			this.parentId = body.parentId;
+			uni.setNavigationBarTitle({
+				title: body.title
+			});
+			this.projectDirList();
+		},
+		methods: {
+			returnImage(item) {
+				console.log(item);
+				let name = item.name.split('.');
+				let type = name[name.length - 1].toLowerCase();
+				let fileName = fileBox[type] || 'nofile.png'
+				return '../../static/image/datacenter/' + fileName;
+			},
+			projectDirList() {
+				getProjectDirList(this.parentId).then(res => {
+					if (res.code === 200) {
+						this.tableData = res.data.sort((a, b) => b.directory - a.directory);
+					}
+				});
+			},
+			clickFolder(item) {
+				if (!item.directory) return;
+				projectPermission({
+					id: item.id,
+					oldPermission: item.permissions,
+					type: 'access',
+					name: item.name,
+					folderList: [item.name]
+				}, () => {
+					this.$navigateTo('/pages/file/file?parentId=' + item.id + '&title=' + item.name)
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.file-list {
+		padding: 30rpx;
+
+		.file-item {
+			display: flex;
+			padding: 20rpx;
+			background: #fff;
+			display: flex;
+			align-items: center;
+			border-radius: 16rpx;
+			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
+			margin-bottom: 30rpx;
+
+			.file-image {
+				width: 100rpx;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-right: 30rpx;
+			}
+
+			.title {
+				font-size: 32rpx;
+				font-weight: 600;
+				margin-bottom: 10rpx;
+			}
+
+			.sub {
+				font-weight: 300;
+				font-size: 24rpx;
+				margin-top: 10rpx;
+				color: $uni-secondary-color;
+			}
+
+		}
+	}
+</style>

virgo.wzfrontend/yui_wx/uitls/datacenter.js

@@ -0,0 +1,263 @@
+import {
+	getProjectPermission,
+	getUserProjectPermissions,
+	getUserOrganizationPermissions,
+	validationProjectPermission,
+	validationOrganizationPermission,
+	getSetApprove
+} from '@/request/api/datacenter.js'
+import store from '../store';
+import message from './message.js';
+let organization, project, user;
+let checker = []; //审核人
+const initData = () => {
+	organization = store.getters.organization;
+	project = store.getters.project;
+	user = store.getters.user;
+}
+//permission：1-公开 2-私密 3-密码
+const permission = (option, callback) => {
+	console.log(option);
+	switch (option.permissions) {
+		case '1':
+			callback();
+			break;
+		case '2':
+			privacy(option, callback);
+			break;
+		case '3':
+			password(option, callback);
+			break;
+		default:
+			break;
+	}
+}
+//私密操作
+const privacy = (option, callback) => {
+	if (option.approveType === 1) {
+		getUserProjectPermissions(option.id, user.userId).then(res => {
+			privacySuccessFunc(res, option, callback)
+		})
+	} else if (option.approveType === 2) {
+		getUserOrganizationPermissions(option.id, user.userId).then(res => {
+			privacySuccessFunc(res, option, callback)
+		})
+	}
+}
+
+const privacySuccessFunc = (res, option, callback) => {
+	if (res.code === 200) {
+		let data = res.data || {};
+		//权限通过
+		if (data[option.type]) return callback();
+		//权限不通过，是否申请权限
+		approveUser(option, callback);
+	}
+}
+
+const approveUser = (option, callback) => {
+	getSetApprove({
+		projectId: project.id,
+		operationOrganizationId: option.operationOrganizationId,
+		type: option.approveType
+	}).then(res => {
+		if (res.code === 200) {
+			let obj = res.data[0] || {};
+			if (obj.checker) checker = JSON.parse(obj.checker).map(node => -node[node.length - 1]);
+			if (checker.filter(id => id === user.userId).length > 0) return callback();
+			//仅申请文件夹访问和文件下载
+			approveTip(option)
+		}
+	})
+}
+
+const operationName = (type) => {
+	let str = '';
+	switch (type) {
+		case 'access':
+			str = '访问';
+			break;
+		case 'create':
+			str = '创建';
+			break;
+		case 'delete':
+			str = '删除';
+			break;
+		case 'edit':
+			str = '编辑';
+			break;
+		case 'fileDelete':
+			str = '删除';
+			break;
+		case 'fileDownload':
+			str = '下载';
+			break;
+		case 'fileUpload':
+			str = '上传';
+			break;
+		case 'fileView':
+			str = '预览';
+			break;
+		default:
+			break;
+	}
+	return str;
+}
+
+const approveTip = (option) => {
+	let title = `该文件是私密文件夹，是否申请${operationName(option.type)}？`;
+	uni.showModal({
+		title: '系统提示',
+		content: title,
+		success: function(res) {
+			if (res.confirm) {
+				if (checker.length === 0) return uni.showToast({
+					title: '暂未设置审核人',
+					icon: "none"
+				});
+				let folder = '';
+				for (let i = 0; i < option.folderList.length; i++) {
+					folder += ('-' + option.folderList[i].name);
+				}
+				let folderName = `【${option.typeName}${folder}-${option.name}】`;
+				let title = `申请${operationName(option.type)}${folderName}`;
+				message.sendFlowMessage({}, {
+					operation: title,
+					receiver: checker.join(','),
+					messageType: 5,
+					dataType: returnType(option)[option.type],
+					dataId: option.id
+				}).then(res => {
+					if (res.code === 200) uni.showToast({
+						title: '申请成功，请等待审核',
+						icon: "none"
+					});
+				})
+			}
+		}
+	});
+}
+
+const returnType = (option) => {
+	let obj = {};
+	switch (option.approveType) {
+		case 1:
+			obj = {
+				access: 1,
+				create: 2,
+				delete: 3,
+				edit: 4,
+				fileDelete: 5,
+				fileDownload: 6,
+				fileUpload: 7,
+				fileView: 8
+			}
+			break;
+		case 2:
+			obj = {
+				access: 9,
+				create: 10,
+				delete: 11,
+				edit: 12,
+				fileDelete: 13,
+				fileDownload: 14,
+				fileUpload: 15,
+				fileView: 16
+			}
+			break;
+		default:
+			break;
+	}
+	return obj;
+}
+//密码验证
+const password = (option, callback) => {
+	let title = `该文件是加密文件夹，请输入密码${operationName(option.type)}？`;
+	uni.showModal({
+		title: title,
+		editable: true,
+		placeholderText: '请输入密码',
+		success: function(res) {
+			if (res.confirm) {
+				if (res.content) return uni.showToast({
+					title: '密码错误',
+					icon: "none"
+				});
+				if (option.approveType === 1) {
+					validationProjectPermission(option.permissionsId, res.content).then(res => {
+						passwordSuccessFunc(res, callback)
+					})
+				} else if (option.approveType === 2) {
+					validationOrganizationPermission(option.id, res.content).then(res => {
+						passwordSuccessFunc(res, callback)
+					})
+				}
+			}
+		}
+	});
+}
+const passwordSuccessFunc = (res, callback) => {
+	if (res.code === 200) {
+		if (res.data) return callback();
+		uni.showToast({
+			title: '密码错误',
+			icon: "none"
+		});
+	}
+}
+/* 
+ * 项目中心文件夹以及文件权限
+ * option['type'] = access-访问/create创建/delete-删除/edit-修改/fileDelete-文件删除/fileDownload-文件下载/fileUpload-文件上传/fileView-文件预览
+ */
+export function projectPermission(option, callback) {
+	if (!user) initData();
+	//获取最新权限
+	option['dataType'] = 'project';
+	option['typeName'] = '项目中心';
+	option['approveType'] = 1;
+	option['operationOrganizationId'] = -1;
+	getProjectPermission(option.id, -1).then(res => {
+		if (res.code === 200) {
+			option['permissions'] = res.data == null ? option.oldPermission : res.data.permissions;
+			if (res.data) option['permissionsId'] = res.data.id;
+			permission(option, callback);
+		}
+	})
+}
+/* 
+ * 企业中心文件夹以及文件权限
+ * 
+ */
+export function organizationPermission(option, callback) {
+	if (!user) initData();
+	option['dataType'] = 'organization';
+	option['typeName'] = '企业中心';
+	option['approveType'] = 2;
+	option['operationOrganizationId'] = organization.id;
+	permission(option, callback);
+}
+/* 
+ * 下载文件
+ * 
+ */
+export function downloadFileDom(data, fileName) {
+	let blob = new Blob([data], {
+		type: 'application/octet-stream'
+	}); // 转化为blob对象
+	if (typeof window.navigator.msSaveBlob !== 'undefined') {
+		window.navigator.msSaveBlob(blob, fileName);
+	} else {
+		var blobURL = window.URL.createObjectURL(blob); // 将blob对象转为一个URL
+		var tempLink = document.createElement('a'); // 创建一个a标签
+		tempLink.style.display = 'none';
+		tempLink.href = blobURL;
+		tempLink.setAttribute('download', fileName); // 给a标签添加下载属性
+		if (typeof tempLink.download === 'undefined') {
+			tempLink.setAttribute('target', '_blank');
+		}
+		document.body.appendChild(tempLink); // 将a标签添加到body当中
+		tempLink.click(); // 启动下载
+		document.body.removeChild(tempLink); // 下载完毕删除a标签
+		window.URL.revokeObjectURL(blobURL);
+	}
+}

virgo.wzfrontend/yui_wx/uitls/message.js

@@ -1,24 +1,158 @@
-import request from '@/axios';
+import {
+	request
+} from '@/request/request.js';
 import store from '@/store';
-
+import {
+	dayjs
+} from '@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js'
 const messageType = [{
 	id: 2,
-	name: '项目邀请'
+	name: '审核消息',
+	dataType: [{
+		id: 1,
+		title: '资产登记',
+		content: '的资产登记流程'
+	}, {
+		id: 2,
+		title: '资产变更',
+		content: '的资产变更流程'
+	}, {
+		id: 3,
+		title: '资产折旧',
+		content: '的资产折旧流程'
+	}, {
+		id: 4,
+		title: '资产盘点',
+		content: '的资产盘点流程'
+	}, {
+		id: 5,
+		title: '设备管理',
+		content: '的设备管理流程'
+	}]
 }, {
 	id: 3,
-	name: '巡查消息'
+	name: '巡查消息',
+	dataType: [{
+		id: 1,
+		title: '巡查记录',
+		content: '的巡查记录'
+	}]
+}, {
+	id: 4,
+	name: '工单消息',
+	dataType: [{
+		id: 1,
+		title: '工单记录',
+		content: '的工单记录'
+	}]
+}, {
+	id: 5,
+	name: '数据中心',
+	dataType: [{
+		id: 1,
+		title: '项目中心',
+		content: '文件夹',
+		type: 'access'
+	}, {
+		id: 2,
+		title: '项目中心',
+		content: '文件夹',
+		type: 'create'
+	}, {
+		id: 3,
+		title: '项目中心',
+		content: '文件夹',
+		type: 'delete'
+	}, {
+		id: 4,
+		title: '项目中心',
+		content: '文件夹',
+		type: 'edit'
+	}, {
+		id: 5,
+		title: '项目中心',
+		content: '文件',
+		type: 'fileDelete'
+	}, {
+		id: 6,
+		title: '项目中心',
+		content: '文件',
+		type: 'fileDownload'
+	}, {
+		id: 7,
+		title: '项目中心',
+		content: '文件',
+		type: 'fileUpload'
+	}, , {
+		id: 8,
+		title: '项目中心',
+		content: '文件',
+		type: 'fileView'
+	}, {
+		id: 9,
+		title: '企业中心',
+		content: '文件夹',
+		type: 'access'
+	}, {
+		id: 10,
+		title: '企业中心',
+		content: '文件夹',
+		type: 'create'
+	}, {
+		id: 11,
+		title: '企业中心',
+		content: '文件夹',
+		type: 'delete'
+	}, {
+		id: 12,
+		title: '企业中心',
+		content: '文件夹',
+		type: 'edit'
+	}, {
+		id: 13,
+		title: '企业中心',
+		content: '文件',
+		type: 'fileDelete'
+	}, {
+		id: 14,
+		title: '企业中心',
+		content: '文件',
+		type: 'fileDownload'
+	}, {
+		id: 15,
+		title: '企业中心',
+		content: '文件',
+		type: 'fileUpload'
+	}, , {
+		id: 16,
+		title: '企业中心',
+		content: '文件',
+		type: 'fileView'
+	}]
+}, {
+	id: 6,
+	name: '项目邀请'
 }];
+
 export default {
-	send(data = {}, params = {}) {
-		let postData = {
+	send(sendData = {}, params = {}) {
+		let date = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+		let obj = {
 			projectId: store.getters.project.id,
 			organizationId: store.getters.organization.id,
-			sender: store.getters.user.userId
+			date: date
+		}
+		params['time'] = date;
+		obj = Object.assign(obj, sendData);
+		let postData = {
+			sender: store.getters.user.userId,
+			messageType: params.messageType,
+			message: this.messageContent(params),
+			json: JSON.stringify(obj),
+			viewed: 0
 		}
-		let obj = this.data(data, params);
-		postData = Object.assign(postData, obj);
 		return request({
-			url: `/manager/message/{data.userIds}`,
+			url: `/manager/message/${params.userIds}`,
 			method: 'post',
 			data: postData
 		})
@@ -26,18 +160,65 @@ export default {
 	viewed(messageId, callback) {
 		if (!messageId) return;
 		return request({
-			url: `/manager/operateMessage/${messageId}`,
+			url: `/manager/message/${messageId}`,
 			method: 'put',
 		}).then(res => {
 			if (res.state && callback) callback()
 		})
 	},
+	sendFlowMessage(data = {}, params = {}) {
+		let date = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+		let obj = {
+			projectId: store.getters.project.id,
+			organizationId: store.getters.organization.id,
+			date: date,
+			dataId: params.dataId,
+			dataType: params.dataType
+		}
+		let newData = this.data(data, params);
+		obj = Object.assign(obj, newData.data);
+		let postData = {
+			sender: store.getters.user.userId,
+			messageType: params.messageType,
+			message: newData.message,
+			json: JSON.stringify(obj),
+			viewed: 0,
+			isCC: params.isCC
+		}
+		return request({
+			url: `/manager/message/${params.receiver}`,
+			method: 'post',
+			data: postData
+		})
+	},
+	messageContent(params) {
+		let message = '';
+		if (params.messageType === 6) {
+			message =
+				`【项目邀请】${store.getters.user.name}在${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}邀请加入<${store.getters.project.name}>项目，请及时处理。`
+		}
+		return message;
+	},
 	data(data = {}, params = {}) {
-		let obj = params;
+		let obj = {},
+			msg = '',
+			type = messageType.filter(res => res.id === params.messageType)[0].dataType.filter(res => res.id === params
+				.dataType)[0];
+		if (data.projectItemName) {
+			msg += data.projectItemName;
+			obj['projectItemId'] = data.projectItemId;
+		}
+		if (data.projectItemTargetName) {
+			msg += ('-' + data.projectItemTargetName);
+			obj['projectItemTargetId'] = data.projectItemTargetId;
+		}
 		let message =
 			`【${type.title}】${store.getters.user.name}在${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}${params.operation}${msg}${type.content}`
-		obj['message'] = message;
-		return obj
+		if (params.isCC === 1) message += ',并抄送给你';
+		return {
+			message: message,
+			data: obj
+		}
 	},
 	messageType
 }

virgo.wzfrontend/yui_wx/unpackage/dist/build/mp-weixin/app.json

@@ -52,7 +52,9 @@
     "pages/deviceDetail/deviceDetail",
     "pages/bim/bim",
     "pages/bimShow/bimShow",
-    "pages/myReservation/myReservation"
+    "pages/myReservation/myReservation",
+    "pages/dataCenter/dataCenter",
+    "pages/file/file"
   ],
   "subPackages": [],
   "window": {
@@ -84,7 +86,7 @@
         "text": "公海"
       },
       {
-        "pagePath": "pages/data/data",
+        "pagePath": "pages/dataCenter/dataCenter",
         "iconPath": "static/image/tabbar/data.png",
         "selectedIconPath": "static/image/tabbar/data-active.png",
         "text": "数据"

virgo.wzfrontend/yui_wx/unpackage/dist/build/mp-weixin/components/common/navbar.json

@@ -1,4 +1,4 @@
 {
-  "usingComponents": {},
-  "component": true
+  "component": true,
+  "usingComponents": {}
 }

virgo.wzfrontend/yui_wx/unpackage/dist/build/mp-weixin/components/common/upload.json

@@ -1,6 +1,6 @@
 {
+  "component": true,
   "usingComponents": {
     "uv-upload": "/uni_modules/uv-upload/components/uv-upload/uv-upload"
-  },
-  "component": true
+  }
 }

virgo.wzfrontend/yui_wx/unpackage/dist/build/mp-weixin/pages/dataCenter/dataCenter.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "数据中心",
+  "usingComponents": {
+    "mescroll-empty": "/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty"
+  }
+}

virgo.wzfrontend/yui_wx/unpackage/dist/build/mp-weixin/pages/file/file.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "",
+  "usingComponents": {
+    "mescroll-empty": "/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty"
+  }
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/app.json

@@ -53,7 +53,8 @@
     "pages/bim/bim",
     "pages/bimShow/bimShow",
     "pages/myReservation/myReservation",
-    "pages/dataCenter/dataCenter"
+    "pages/dataCenter/dataCenter",
+    "pages/file/file"
   ],
   "subPackages": [],
   "window": {

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/components/common/navbar.json

@@ -1,4 +1,4 @@
 {
-  "usingComponents": {},
-  "component": true
+  "component": true,
+  "usingComponents": {}
 }

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/components/contract/clauseDetail.json

@@ -1,4 +1,4 @@
 {
-  "usingComponents": {},
-  "component": true
+  "component": true,
+  "usingComponents": {}
 }

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/file/file.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "",
+  "usingComponents": {
+    "mescroll-empty": "/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty"
+  }
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/file/file.wxss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+/* 需要放到文件最上面 */
+/* 水平间距 */
+/* 水平间距 */
+/*
+ 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
+ */
+/* 水平间距 */
+.file-list {
+  padding: 30rpx;
+}
+.file-list .file-item {
+  display: flex;
+  padding: 20rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  border-radius: 16rpx;
+  box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
+  margin-bottom: 30rpx;
+}
+.file-list .file-item .file-image {
+  width: 100rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 30rpx;
+}
+.file-list .file-item .title {
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 10rpx;
+}
+.file-list .file-item .sub {
+  font-weight: 300;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+  color: #8c8c8c;
+}
+