Merge branch 'master' into jyb_20250422_dev

components/DictTag/index.vue

@@ -3,12 +3,11 @@
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
         <span
-          v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
           :key="item.value"
           :index="index"
           :class="item.elTagClass"
         >{{ item.label + " " }}</span>
-        <up-tag
+        <!-- <up-tag
           v-else
           :disable-transitions="true"
           :key="item.value + ''"
@@ -16,7 +15,7 @@
           :type="item.elTagType"
           :class="item.elTagClass"
           :text="item.label + ''"
-        ></up-tag>
+        ></up-tag> -->
       </template>
     </template>
     <template v-if="unmatch && showValue">
@@ -81,4 +80,5 @@ function handleArray(array) {
 .el-tag + .el-tag {
   margin-left: 10px;
 }
+
 </style>

pages/mine.vue

@@ -1,48 +1,25 @@
 <template>
-	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
-		<view class="mine-top-bgc"></view>
-		<view class="mine-box">
-			<view class="mine-user">
-				<view class="user-name-box">
-					<view class="user-avatar">
-						<up-avatar :src="userInfo.avatar" shape="square"></up-avatar>
-					</view>
-					<view class="user-name">{{ userInfo.nickName }}</view>
-					<view class="grid-box" v-for="(listItem, listIndex) in setTing" :key="listIndex">
-						<!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
-						<up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName" :size="22"
-							@click="handLsetTing"></up-icon>
-						<text class="grid-text">{{ listItem.name }}</text>
-
-					</view>
-				</view>
-				<up-divider></up-divider>
-				<view class="service-list">
-					<up-grid :border="false" col="4">
-						<up-grid-item v-for="(listItem, listIndex) in serviceList" :key="listIndex"
-							@click="onClick(listItem)">
-							<view class="grid-box">
-								<!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
-								<up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName"
-									:size="22"></up-icon>
-								<text class="grid-text">{{ listItem.name }}</text>
-							</view>
-						</up-grid-item>
-					</up-grid>
-				</view>
+	<view class="mine-container">
+
+		<view class="mine-header">
+			<img :src="userInfo.avatar" alt="" style="width: 136rpx;height: 136rpx;">
+			<view class="header-info">
+				<text class="info-name">{{ userInfo.nickName }}</text>
+				<text class="info-id">ID: {{ data.volunteerId }}</text>
+				<text class="info-edit" @click="handLsetTing"  v-if="userType == 1">设置> </text>
 			</view>
 		</view>
 
 		<view class="list-box">
 			<view class="mine-card price-card" v-if="userType == 2">
 				<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
-					:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }">
+					:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }" @click="onClick(item)">
 					<view class="price-name flex-center"> {{ item.name }} </view>
 					<view class="price-data flex-center">
 						{{ index === 0 ? '¥' : '' }}<up-count-to :startVal="0" :endVal="data[item.key]"
 							:decimals="item.decimals"></up-count-to>
 					</view>
-					<text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.key] }}</text>
+					<text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.balance] }}</text>
 				</view>
 			</view>
 
@@ -95,272 +72,293 @@
 </template>
 
 <script setup>
-	import {
-		onMounted,
-		ref
-	} from 'vue';
-	import {
-		getVolunteerAccount
-	} from '@/api/volunteer.js'
-	import {
-		onLoad,
-		onShow
-	} from '@dcloudio/uni-app';
-	import store from "@/store"
-	const userType = uni.getStorageSync('userType') //读取本地存储
-
-	// 用户/志愿者 识别标识
-	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
-
-	const userInfo = ref({});
-
-	const setTing = ref(
-		[{
-			iconName: 'setting-fill',
-			value: 1,
-		}, ]);
-
-	const serviceList = ref(
-		[{
-				name: '待服务',
-				iconName: 'clock',
-				page: '/pages/classify',
-				value: 1
-			},
-			{
-				name: '进行中',
-				iconName: 'car',
-				page: '/pages/classify',
-				value: 2
-			},
-			{
-				name: '已完成',
-				iconName: 'car-fill',
-				page: '/pages/classify',
-				value: 3
-			},
-			{
-				name: '差评申述',
-				iconName: 'edit-pen',
-				page: '/pages_mine/pages/bad/index'
-			},
-			{
-				name: '钱包',
-				iconName: 'rmb-circle',
-				page: '/pages_mine/pages/wallet/index'
-			},
-			{
-				name: '帮助与客服',
-				iconName: 'kefu-ermai',
-			},
-			{
-				name: '服务地址',
-				iconName: 'map',
-				page: '/pages_mine/pages/serviceInforMation/index'
-			},
-		]);
-
-
-
-
-	const serviceList2 = ref([{
-			name: '待服务',
-			iconName: 'clock',
-			page: '/pages/classify',
-			value: 1
-		},
-
-		{
-			name: '进行中',
-			iconName: 'car',
-			page: '/pages/classify',
-			value: 2
-		},
-		{
-			name: '已完成',
-			iconName: 'car-fill',
-			page: '/pages/classify',
-			value: 3
-		},
-		{
-			name: '评论',
-			iconName: 'edit-pen',
-			// page: '/pages/myCenter/bad'
-		},
-		{
-			name: '钱包',
-			iconName: 'rmb-circle',
-			page: '/pages_mine/pages/wallet/index'
-		},
-		{
-			name: '帮助与客服',
-			iconName: 'kefu-ermai',
-		},
-		{
-			name: '浏览记录',
-			iconName: 'eye',
-			page: '/pages_mine/pages/wallet/index'
-		},
-		{
-			name: '收藏',
-			iconName: 'star',
-		},
-	]);
-
-	const priceList = [{
-			name: '余额',
-			key: 'balance',
-			decimals: 2
-		},
-		{
-			name: '订单总数',
-			key: 'orderCount',
-			decimals: 0
-		}
-	]
-
-
-
-	const orderList = ref([{
-			name: '预约单',
-			key: 'orderCount'
-		},
-
-		{
-			name: '进行单',
-			key: 'orderCount'
-
-		},
-		{
-			name: '完成单',
-			key: 'orderCount'
-
-		},
-		{
-			name: '取消单',
-			key: 'orderCount'
-
+import { onMounted, ref } from 'vue';
+import {
+	onLoad,
+	onShow
+} from '@dcloudio/uni-app';
+import store from "@/store"
+import { getVolunteerAccountInfo,volunteerOrderStatistics } from "@/api/mine";
+
+const userInfo = ref({
+	avatar: '/static/serverImg/mine/user.png'
+})
+
+const rateValue = ref(3)
+const priceList = [{
+	name: '账户余额',
+	key: 'balance',
+	decimals: 2,
+	balance:'orderFrozenBalance',
+	page: '/pages_mine/pages/wallet/index'
+},
+{
+	name: '订单总数',
+	key: 'orderCount',
+	decimals: 0
+}
+]
+const orderList = ref([{
+	name: '预约单',
+	key: 'reservationCount'
+},
+
+{
+	name: '进行单',
+	key: 'doingCount'
+
+},
+{
+	name: '完成单',
+	key: 'finishedCount'
+
+},
+{
+	name: '取消单',
+	key: 'cancelCount'
+
+}
+]);
+const data = ref({
+	balance: 0.0,
+	reservationCount: 0,
+	doingCount:0,
+	finishedCount:0,
+	cancelCount:0,
+	orderCount:0,
+});
+
+const userType = uni.getStorageSync('userType') //读取本地存储
+
+const adminList = ref(
+	[
+	// 	{
+	// 	name: '待服务',
+	// 	iconName: '/static/serverImg/mine/icon1.png',
+	// 	page: '/pages/classify',
+	// 	value: 1
+	// },
+	// {
+	// 	name: '进行中',
+	// 	iconName: '/static/serverImg/mine/icon2.png',
+	// 	page: '/pages/classify',
+	// 	value: 2
+	// },
+	// {
+	// 	name: '已完成',
+	// 	iconName: '/static/serverImg/mine/icon3.png',
+	// 	page: '/pages/classify',
+	// 	value: 3
+	// },
+	{
+		name: '差评申述',
+		iconName: '/static/serverImg/mine/icon4.png',
+		page: '/pages_mine/pages/bad/index'
+	},
+	// {
+	// 	name: '钱包',
+	// 	iconName: '/static/serverImg/mine/icon5.png',
+	// 	page: '/pages_mine/pages/wallet/index'
+	// },
+	{
+		name: '帮助与客服',
+		iconName: '/static/serverImg/mine/icon6.png',
+	},
+	{
+		name: '用户端',
+		iconName: '/static/serverImg/mine/icon6.png',
+		operate:()=>{
+			uni.reLaunch({ 
+				url: '/pages/UserSelection'
+			});
 		}
+	},
+	]);
+const userList = ref(
+	[{
+		name: '待服务',
+		iconName: 'clock',
+		page: '/pages/classify',
+		value: 1
+	},
+	{
+		name: '进行中',
+		iconName: 'car',
+		page: '/pages/classify',
+		value: 2
+	},
+	{
+		name: '已完成',
+		iconName: 'car-fill',
+		page: '/pages/classify',
+		value: 3
+	},
+	{
+		name: '评论',
+		iconName: 'edit-pen',
+	},
+	{
+		name: '钱包',
+		iconName: 'rmb-circle',
+		page: '/pages_mine/pages/wallet/index'
+	},
+	{
+		name: '浏览记录',
+		iconName: 'eye',
+	},
+	{
+		name: '收藏',
+		iconName: 'star',
+	},
+	{
+		name: '帮助与客服',
+		iconName: 'kefu-ermai',
+	},
+	{
+		name: '地址',
+		iconName: 'kefu-ermai',
+	},
+	{
+		name: '志愿者',
+		iconName: 'kefu-ermai',
+	},
 	]);
 
-	const avatarSrc = ref('/static/my/客服.png');
-	const data = ref({
-		balance: 0.0,
-		orderCount: 0,
-	});
-	const rateValue = ref(3);
-	const onClick = (record) => {
-		console.log('record', record, record.page);
-		if (record.page && record.value) {
-			const app = getApp();
-			app.globalData.switchTabParams = {
-				tabKey: record.value
-			};
-			// JS跳转 
-			uni.switchTab({
-				url: record.page
-			});
-			return;
-		}
-		if (record.page) {
-			uni.navigateTo({
-				url: record.page
-			});
-		}
 
-		onMounted(getDetails)
+const onClick = (record) => {
+	console.log('record', record, record.page);
+	if(record.page){
+		uni.navigateTo({
+			url: record.page
+		})
 	}
+	if(record.operate){
+		record.operate()
+	}
+	// if (record.page && record.value) {
+	// 	const app = getApp();
+	// 	app.globalData.switchTabParams = {
+	// 		tabKey: record.value
+	// 	};
+	// 	// JS跳转 
+	// 	uni.switchTab({
+	// 		url: record.page
+	// 	});
+	// 	return;
+	// }
+}
 
-	const getDetails = async () => {
-		try {
-			// const res = await getVolunteerAccount();
-			// console.log('res',res);
-
-		} catch (error) {
-			console.log('error', error);
 
-		}
-	}
 
+const getDetails = async () => {
+	try {
+		// const res = await getVolunteerAccount();
+		// console.log('res',res);
 
+	} catch (error) {
+		console.log('error', error);
 
-	const geUserInfo = () => {
-		console.log(store.state, '>>>>99');
-		userInfo.value = store.state.user
 	}
+}
 
-	// 设置
-	const handLsetTing = () => {
+const handLsetTing = () => {
 		console.log('123')
 		uni.navigateTo({
 			url: '/pages_mine/pages/setupUser/index'
 		})
 	}
-	onShow(() => {
-		geUserInfo();
 
-	})
-</script>
 
-<style lang="scss" scoped>
-	.mine-card {
-		border-radius: 8px;
-		background: rgba(255, 255, 255, 1);
-		padding: 12px;
-		margin-bottom: 12px;
-	}
 
-	.mine-container {
-		position: fixed;
-		top: 0px;
-		left: 0px;
-		right: 0px;
-		bottom: 0px;
-		background: rgba(245, 245, 245, 1);
-
-		.mine-top-bgc {
-			height: 120px;
-			background: linear-gradient(180deg, rgba(255, 219, 171, 1) 0%, rgba(242, 151, 99, 1) 100%);
+const geUserInfo = () => {
+	console.log(store.state, '>>>>99');
+	// userInfo.value = store.state.user
+	store.dispatch('GetInfo').then((res) => {
+		userInfo.value = store.state.user
+		console.log(store.state.user, '>>>>99');
+		
+		
 
+	});
+}
+
+onShow(() => {
+	geUserInfo();
+	init();
+})
+
+const init = async() => {
+	try {
+		uni.showLoading({
+			title: '数据加载中...'
+		});
+
+		if(userType === 2){
+			const res1 = await getVolunteerAccountInfo();
+			const res2 = await volunteerOrderStatistics();
+			data.value = {
+				...res1.data,
+				...res2.data
+			}
+			console.log(11,res1,res2,data.value);
+			
 		}
-
-		.mine-box {
-			position: absolute;
-			top: 40px;
-			left: 12px;
-			right: 12px;
-			bottom: 0px;
-			overflow-y: auto;
+	} catch (error) {
+		console.log('error', error);
+		uni.showToast({
+			title: error.msg,
+			icon: 'error',
+		});
+	} finally {
+		uni.hideLoading();
+	}
+}
 
 
-			.mine-user {
-				border-radius: 8px;
-				background: rgba(255, 255, 255, 1);
-				margin-bottom: 12px;
+</script>
 
-				.user-name-box {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					padding: 12px 12px 0;
+<style lang="scss" scoped>
+.mine-container {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(245, 245, 245, 1);
+	overflow-y: auto;
+
+	.mine-header {
+		padding: 42rpx 44rpx;
+		background: #fff;
+		display: flex;
+
+		.header-info {
+			display: flex;
+			flex-direction: column;
+			margin-left: 36rpx;
 
-					.user-avatar {}
+			.info-name {
+				font-size: 36rpx;
+				font-weight: 400;
+				line-height: 54rpx;
+				color: rgba(51, 51, 51, 1);
+			}
 
-					.user-name {
-						font-size: 18px;
-						font-weight: 700;
-						line-height: 21.09px;
-						color: rgba(51, 51, 51, 1);
-						margin-left: 12px;
-					}
-				}
+			.info-id {
+				font-size: 28rpx;
+				font-weight: 400;
+				letter-spacing: 0rpx;
+				line-height: 42rpx;
+				color: rgba(153, 153, 153, 1);
 			}
-		}
 
-		.service-img {
-			width: 60rpx;
-			height: 60rpx;
-			margin-bottom: 10rpx;
+			.info-edit {
+				font-size: 24rpx;
+				font-weight: 400;
+				letter-spacing: 0rpx;
+				line-height: 36rpx;
+				color: #3366ff;
+			}
 		}
 
 	}
@@ -368,8 +366,7 @@
 	.list-box {
 		padding: 16rpx 40rpx;
 
-
-		.grid-box {
+		.price-card {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
@@ -379,90 +376,25 @@
 				align-items: center;
 				flex-direction: column;
 
-				.user-name-box {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-
-					padding: 12px 12px 0;
-
-					.user-avatar {}
-
-					.user-name {
-						font-size: 18px;
-						font-weight: 700;
-						line-height: 21.09px;
-						color: rgba(51, 51, 51, 1);
-						margin-left: 12px;
-					}
+				.price-name {
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 42rpx;
+					color: rgba(102, 102, 102, 1);
 				}
-			}
-		}
-
-		.service-img {
-			width: 60rpx;
-			height: 60rpx;
-			margin-bottom: 10rpx;
-		}
-
-		.service-list {
-			padding-bottom: 12px;
-		}
 
-		.grid-text {
-			font-size: 14px;
-			color: #909399;
-			padding: 10rpx 0 20rpx 0rpx;
-			/* #ifndef APP-PLUS */
-			box-sizing: border-box;
-			/* #endif */
-		}
-
-
-		.grid-box {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			position: relative;
-
-			.item-badge {
-				position: absolute;
-			}
-		}
-
-		.price-box {
-			display: flex;
-			align-content: center;
-			justify-content: space-between;
-			// padding: 12px;
-
-			.price-item {
-				width: 50%;
-				padding: 12px;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-
-				.user-name-box {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-
-					padding: 12px 12px 0;
-
-					.user-avatar {}
+				.price-data {
+					font-size: 48rpx;
+					font-weight: 400;
+					line-height: 72rpx;
+					color: rgba(51, 51, 51, 1);
+				}
 
-					.user-name {
-						font-size: 18px;
-						font-weight: 700;
-						line-height: 21.09px;
-						color: rgba(51, 51, 51, 1);
-						margin-left: 12px;
-					}
+				.grid-min-price {
+					font-size: 24rpx;
+					font-weight: 400;
+					line-height: 36rpx;
+					color: rgba(153, 153, 153, 1);
 				}
 			}
 		}
@@ -536,105 +468,35 @@
 
 
 			}
+		}
 
-			.service-list {
-				padding-bottom: 12px;
-			}
-
-			.grid-text {
-				font-size: 14px;
-				color: #909399;
-				padding: 10rpx 0 20rpx 0rpx;
-				/* #ifndef APP-PLUS */
-				box-sizing: border-box;
-				/* #endif */
-			}
+		.status-card {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 48rpx;
 
-			.grid-box {
+			/* 网格项之间的间距 */
+			.status-card-item {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				flex-direction: column;
-				position: relative;
-
-				.item-badge {
-					position: absolute;
-				}
-
-
-			}
-
-			.price-box {
-				display: flex;
-				align-content: center;
-				justify-content: space-between;
-				// padding: 12px;
-
-				.price-item {
-					width: 50%;
-					padding: 12px;
-
-					.price-name {
-						font-size: 16px;
-						font-weight: 700;
-						line-height: 23.17px;
-						color: rgba(51, 51, 51, 1);
-						margin-bottom: 12px;
-					}
-
-					.price-data {
-						font-size: 20px;
-						font-weight: 700;
-						line-height: 23.44px;
-						color: rgba(51, 51, 51, 1);
-					}
-
-					.grid-min-price {
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 17.38px;
-						color: rgba(153, 153, 153, 1);
-						margin-top: 4px;
-					}
-				}
-
-				.price-item:first-child {
-					border-right: 1px solid #dcdfe6;
 
+				.grid-img-box {
+					padding: 35rpx;
+					border-radius: 50%;
+					background: rgba(249, 250, 251, 1);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 18rpx;
 				}
 
-			}
-
-		}
-
-		.rate-box {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.rate-left {
-				font-size: 14px;
-				font-weight: 500;
-				letter-spacing: 0px;
-				line-height: 20.27px;
-				color: rgba(0, 0, 0, 1);
-
-				display: flex;
-				align-items: center;
-				justify-content: left;
-
-				flex: 1;
-			}
-
-			.rate-rigth {
-				font-size: 14px;
-				font-weight: 500;
-				letter-spacing: 0px;
-				line-height: 20.27px;
-				color: rgba(0, 0, 0, 1);
-
-				.rate-count {
-					color: rgba(237, 123, 47, 1);
+				.grid-text {
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 42rpx;
+					color: rgba(51, 51, 51, 1);
 				}
 			}
 		}
@@ -694,4 +556,21 @@
 		}
 
 	}
+}
+
+.mine-card {
+	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.05);
+	margin-bottom: 16rpx;
+	padding: 40rpx;
+}
+
+.count-title {
+	font-size: 32rpx;
+	font-weight: 400;
+	line-height: 48rpx;
+	color: rgba(51, 51, 51, 1);
+	margin-bottom: 32rpx;
+}
 </style>

pages_classify/components/orderList/listItem.vue

@@ -9,8 +9,10 @@
                     <view class="item-name">
                         {{ data.name }}
                     </view>
-                    <dict-tag :options="lrr_service_status" :value="data.orderStatus" v-if="data.score" />
-                    <text v-else>
+                    <view v-if="data.score || ['0','1'].includes(String(data.orderStatus))">
+                        <dict-tag :options="lrr_service_status" :value="String(data.orderStatus)"  />
+                    </view>
+                    <text v-else class="color-blue ">
                         待评价
                     </text>
                 </view>

pages_classify/pages/handle/index.vue

@@ -66,21 +66,22 @@ const getOrderDetail = async () => {
             title: '数据加载中...'
         });
         const res = await getVolunteerOrderInfo({ orderId: orderId.value });
-        const ad_res = await getAddress(res.data.addressId);
-
-        let data = res.data;
-        if (ad_res.data) {
-            data = {
-                ...data,
-                address: ad_res.data.address,
-                name: ad_res.data.name,
-                telephone: ad_res.data.telephone,
-                isContagion: ad_res.data.isContagion,
-                haveContagion: ad_res.data.haveContagion,
-
-            }
-        }
-        detaile.value = data;
+        // const ad_res = await getAddress(res.data.addressId);
+
+        let data = res.data.secondOrder;
+        detaile.value = {...res.data.secondOrder,...res.data.address}
+        // if (ad_res.data) {
+        //     data = {
+        //         ...data,
+        //         address: ad_res.data.address,
+        //         name: ad_res.data.name,
+        //         telephone: ad_res.data.telephone,
+        //         isContagion: ad_res.data.isContagion,
+        //         haveContagion: ad_res.data.haveContagion,
+
+        //     }
+        // }
+        // detaile.value = data;
         if (data.orderStatus === 1) {
 
             orderStatus.value = true;

pages_classify/pages/order/index.vue

@@ -138,22 +138,14 @@ const getOrderDetail = async () => {
 			title: '数据加载中...'
 		});
 		const res = await getVolunteerOrderInfo({ orderId: orderId.value });
-		const ad_res = await getAddress(res.data.addressId);
-		let data = res.data;
-		if (ad_res.data) {
-			data = {
-				...data,
-				address: ad_res.data.address,
-				name: ad_res.data.name,
-				telephone: ad_res.data.telephone
-			}
-		}
+		// const ad_res = await getAddress(res.data.addressId);
+		detaile.value = {...res.data.secondOrder,...res.data.address}
 		// if (data.volunteerPicture) {
 		// 	fileList.value = data.volunteerPicture.split(',').map(item => {
 		// 		return { url: item }
 		// 	});
 		// }
-		detaile.value = data;
+		// detaile.value = data;
 		console.log('detaile.value', detaile.value);
 
 	} catch (error) {

static/scss/global.scss

@@ -129,4 +129,17 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+}
+.color-orange {
+  color: rgba(255, 149, 0, 1);
+}
+.color-blue {
+  color: rgba(51, 102, 255, 1);
+}
+.color-green {
+  color: rgba(52, 199, 89, 1);
+}
+
+.color-grey {
+  color: rgba(153, 153, 153, 1);
 }