瀏覽代碼

fix: 订单模块分包

chenjj 1 月之前
父節點
當前提交
6a69d09789

+ 23 - 20
pages.json

@@ -12,7 +12,8 @@
 			"up-grid-item": "uview-plus/components/u-grid-item/u-grid-item"
 		}
 	},
-	"pages": [{
+	"pages": [
+		{
 			"path": "pages/index",
 			"style": {
 				"navigationBarTitleText": "乐融融",
@@ -80,19 +81,6 @@
 				"navigationBarTitleText" : "注册"
 			}
 		},
-		{
-			"path" : "pages/order/order",
-			"style" : 
-			{
-				"navigationBarTitleText" : "订单详情"
-			}
-		},
-		{
-			"path": "pages/order/handle",
-			"style": {
-				"navigationBarTitleText": "订单处理"
-			}
-		},
 		{
 			"path" : "pages/myCenter/wallet",
 			"style" : 
@@ -322,15 +310,30 @@
 				}
 			]
 		},
+		// 订单
 		{
 			"root": "pages_classify/pages",
-			"pages": [{
-				"path": "test/index",
-				"style": {
-					"navigationBarTitleText": "test",
-					"navigationStyle": "custom"
+			"pages": [
+				{
+					"path": "test/index",
+					"style": {
+						"navigationBarTitleText": "test",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "handle/index",
+					"style": {
+						"navigationBarTitleText": "订单处理"
+					}
+				},
+				{
+					"path": "order/index",
+					"style": {
+						"navigationBarTitleText": "订单详情"
+					}
 				}
-			}]
+			]
 		},
 		{
 			"root": "pages_qiun/pages",

+ 2 - 2
pages/classify.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import List from './order/list/index.vue';
+import List from '@/pages_classify/components/orderList/index.vue';
 import { provide } from 'vue';
 import { getVolunteerOrderList } from '@/api/volunteer.js'
 import { onMounted } from 'vue';
@@ -91,7 +91,7 @@ function btnClick(row, type) {
 	if (type === 1) {
 
 		uni.navigateTo({
-			url: `/pages/order/handle?orderId=${row.secondOrderId}`
+			url: `/pages_classify/pages/handle/index?orderId=${row.secondOrderId}`
 		});
 		// uni.navigateTo({
 		// 	url: `/pages/order/order?orderId=${row.secondOrderId}`

+ 68 - 0
pages_classify/components/orderList/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <view class="list-page">
+        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-if="type === 'ordinary'">
+            <up-list-item v-for="(item, index) in data" :key="index" >
+                <ListItem :data="item" />
+            </up-list-item>
+            <up-loadmore
+					:line="true"
+					status="nomore"
+				></up-loadmore>
+        </up-list>
+
+        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-else>
+            <up-list-item v-for="(item, index) in data" :key="index" >
+                <RankingItem :data="item" />
+            </up-list-item>
+            <up-loadmore
+					:line="true"
+					status="nomore"
+				></up-loadmore>
+        </up-list>
+      
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import ListItem from './listItem.vue';
+import RankingItem from './rankingItem.vue';
+
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: [],
+    },
+    type: {
+        type: String,
+        default: 'ordinary' , // ordinary: 普通 ranking: 排行
+    }
+});
+
+const emit = defineEmits(['refresh']);
+
+
+const scrolltolower = () => {
+    console.log('底部');
+    // emit('refresh');
+};
+
+</script>
+
+<style lang="scss" scoped>
+.list-page {
+
+    background: rgba(245, 245, 245, 1);
+    padding: 12px;
+    height: 100%;
+    overflow-y: auto;
+    .item {
+        height: 120px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 1);
+        padding: 12px;
+    }
+}
+</style>

+ 167 - 0
pages_classify/components/orderList/listItem.vue

@@ -0,0 +1,167 @@
+<template>
+    <view class="item">
+        <view class="item-img">
+             <img :src=" baseUrl + data.avatar" alt="">
+        </view>
+        <view class="item-info">
+            <view class="item-title-box">
+                <view class="item-title">
+                    <view class="item-name">
+                         姓名: {{ data.name }}
+                    </view>
+                    <dict-tag :options="order_status" :value="data.orderStatus" />
+                </view>
+                <view class="item-de">
+                    服务地址:{{ data.address }}
+                </view>
+            </view>
+            <view class="item-box">
+                <view class="item-price"><span class="item-price-yuan">¥</span> {{ data.serviceOnePrice || 0 }}</view>
+                <view class="item-btns">
+                    <up-button type="error" text="查看" size="mini" :custom-style="btn_style"
+                        @click="onClick(1)"></up-button>
+                   <up-button type="error" text="沟通" size="mini" :custom-style="btn_style" @click="onClick(2)"></up-button>
+                         <!-- <up-button type="error" text="上传照片" size="mini" :custom-style="btn_style" @click="onClick(3)"></up-button> -->
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import DictTag from '@/components/DictTag/index.vue'
+
+import config from '@/config'
+const baseUrl = config.baseUrl
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+});
+
+const inject_click = inject('onClick');
+
+const order_status = inject('order_status');
+
+const btn_style = ` width: 120rpx; height: 50rpx; font-size: 24rpx;border-radius: 25rpx;margin-left: 12rpx;`;
+
+/**
+ * 1: 查看
+ * 2:沟通
+ */
+function onClick(type) {
+    inject_click(props.data, type);
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    height: 120px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 1);
+    padding: 12px;
+    margin-bottom: 12px;
+    display: flex;
+
+    .item-img {
+        width: 96px;
+        height: 96px;
+        margin-right: 12px;
+
+        image {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .item-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .item-title-box {
+            .item-title {
+                font-size: 14px;
+                font-weight: 700;
+                letter-spacing: 0px;
+                line-height: 20.27px;
+                color: rgba(51, 51, 51, 1);
+                text-align: left;
+                vertical-align: top;
+                margin-bottom: 10px;
+
+                display: flex;
+                align-content: center;
+                justify-content: space-between;
+
+                .item-name {
+                    flex: 1;
+                    display: flex;
+                    // display: -webkit-box;
+                    // -webkit-box-orient: vertical;
+                    // -webkit-line-clamp: 1;
+                    // overflow: hidden;
+                    // text-overflow: ellipsis;
+                    // word-break: break-all;
+                }
+
+                .item-tag {
+                //    color: #3c9cff;
+                }
+
+            }
+
+            .item-de {
+                font-size: 12px;
+                font-weight: 500;
+                letter-spacing: 0px;
+                line-height: 17.38px;
+                color: rgba(153, 153, 153, 1);
+                text-align: left;
+                vertical-align: top;
+
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-all;
+            }
+        }
+
+        .item-box {
+            display: flex;
+            align-content: flex-end;
+            justify-content: space-between;
+
+            .item-price {
+                font-size: 18px;
+                font-weight: 500;
+                letter-spacing: 0px;
+                line-height: 21.09px;
+                color: rgba(246, 74, 31, 1);
+                text-align: center;
+                vertical-align: top;
+
+                .item-price-yuan {
+                    font-size: 13px;
+                    font-weight: 700;
+                    letter-spacing: 0px;
+                    line-height: 21.09px;
+                    color: rgba(246, 74, 31, 1);
+                }
+            }
+
+            .item-btns {
+                display: flex;
+            }
+        }
+    }
+}
+</style>

+ 194 - 0
pages_classify/components/orderList/rankingItem.vue

@@ -0,0 +1,194 @@
+<template>
+    <view class="item">
+        <view class="item-img">
+            <img src="/static/img/dd.png" alt="" />
+        </view>
+        <view class="item-info">
+            <view class="item-title-box">
+                <view class="item-title">
+                    <view class="item-name">
+                        <!-- <dict-tag :options="lrr_service_category" :value="data.serviceCategory" /> -->
+                        姓名: {{ }}
+                    </view>
+                    <dict-tag :options="order_status" :value="data.orderStatus" />
+                </view>
+                <view class="item-de">类别:</view>
+                <view class="item-de">综合评分:</view>
+                <view class="item-de">技能简介:</view>
+
+                <!-- <view class="item-de">
+                    服务地址:{{ data.address }}
+                </view> -->
+            </view>
+            <view class="item-box">
+                <view>
+                    <dict-tag :options="lrr_study" :value="data.serviceType" v-if="data.serviceCategory === 2" />
+                    <dict-tag :options="lrr_chitchat" :value="data.serviceType" v-if="data.serviceCategory === 1" />
+                </view>
+                <view class="rank-num">
+                   <!-- <label class="rank-label">No.</label>11 -->
+                    <img src="/static/img/no1.png" alt="" class="no-img" />
+                </view>
+
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import DictTag from '@/components/DictTag/index.vue'
+import { computed } from 'vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+});
+
+const inject_click = inject('onClick');
+
+const lrr_chitchat = inject('lrr_chitchat');
+const lrr_study = inject('lrr_study');
+const order_status = inject('order_status');
+
+const btn_style = ` width: 120rpx; height: 50rpx; font-size: 24rpx;border-radius: 25rpx;margin-left: 12rpx;`;
+
+/**
+ * 1: 查看
+ * 2:沟通
+ * 3:上传照片
+ */
+function onClick() {
+    inject_click(props.data, 1);
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    height: 120px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 1);
+    padding: 12px;
+    margin-bottom: 12px;
+    display: flex;
+
+    .item-img {
+        width: 96px;
+        height: 96px;
+        margin-right: 12px;
+
+        image {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .item-info {
+        flex: 1;
+        display: flex;
+        // flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+
+        .item-title-box {
+            .item-title {
+                font-size: 14px;
+                font-weight: 700;
+                letter-spacing: 0px;
+                // line-height: 20.27px;
+                color: rgba(51, 51, 51, 1);
+                text-align: left;
+                vertical-align: top;
+                margin-bottom: 10px;
+
+                display: flex;
+                align-content: center;
+                justify-content: space-between;
+
+                .item-name {
+                    flex: 1;
+                    display: flex;
+                    // display: -webkit-box;
+                    // -webkit-box-orient: vertical;
+                    // -webkit-line-clamp: 1;
+                    // overflow: hidden;
+                    // text-overflow: ellipsis;
+                    // word-break: break-all;
+                }
+
+                .item-tag {
+                    //    color: #3c9cff;
+                }
+
+            }
+
+            .item-de {
+                font-size: 12px;
+                font-weight: 500;
+                letter-spacing: 0px;
+                line-height: 21.38px;
+                color: rgba(153, 153, 153, 1);
+                text-align: left;
+                vertical-align: top;
+
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-all;
+            }
+        }
+
+        .item-box {
+            display: flex;
+            align-content: flex-end;
+            justify-content: space-between;
+
+            .item-price {
+                font-size: 18px;
+                font-weight: 500;
+                letter-spacing: 0px;
+                line-height: 21.09px;
+                color: rgba(246, 74, 31, 1);
+                text-align: center;
+                vertical-align: top;
+
+                .item-price-yuan {
+                    font-size: 13px;
+                    font-weight: 700;
+                    letter-spacing: 0px;
+                    line-height: 21.09px;
+                    color: rgba(246, 74, 31, 1);
+                }
+            }
+
+            .item-btns {
+                display: flex;
+            }
+        }
+    }
+
+
+    .no-img {
+        width: 47px;
+        height: 36px;
+    }
+    .rank-num {
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 23.44px;
+        color: rgba(51, 51, 51, 1);
+    }
+    .rank-label{
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 16.41px;
+        color: rgba(153, 153, 153, 1);
+    }
+}
+</style>

+ 216 - 0
pages_classify/pages/handle/index.vue

@@ -0,0 +1,216 @@
+<!-- 订单详情 -->
+<template>
+    <view class="order-detail">
+        <view class="service-info order-card">
+            <PositioningMap />
+        </view>
+        <view class="user-info order-card">
+            <view class="user-box">
+                <view class="info-list">
+                    <view>被服务人员:{{ detaile.name }}</view>
+                    <view @click="onPhone">电话号码:<label class="phone">{{ detaile.telephone }}</label></view>
+                    <view>地址:{{ detaile.address }}</view>
+                    <view>备注信息:{{ detaile.remark }}</view>
+
+                </view>
+            </view>
+        </view>
+
+        <view class=" footer-g">
+            <Slide ref="verify" @change='change' :sliderText="slideData" />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { getVolunteerOrderInfo,getTimesByDate, } from '@/api/volunteer.js'
+import { getAddress } from '@/api/address.js'
+import PositioningMap from '@/components//PositioningMap/index.vue'
+import Slide from '@/components/Slide/index.vue'
+
+import { wxMakePhoneCall } from '@/utils/wxRequest.js'
+import { computed } from 'vue';
+
+const fileList = ref([]);
+const orderId = ref('');
+const detaile = ref({});
+const verify = ref(null);
+
+const orderStatus = ref(false);//false:未开始服务 true:服务已开始,待上传图片
+const onPhone = (phone) => {
+    wxMakePhoneCall(phone)
+}
+
+const slideData = computed(() => {
+    //服务已开始,待上传图片
+    if (orderStatus.value) {
+        return { successText: '服务已完成', startText: '拖动滑块结束服务', successColor: '#f64a1f', btnText: '上传照片' }
+    }
+    return { successText: '服务已开始', startText: '拖动滑块开始服务', successColor: '#72c13f', btnText: '开始' }
+})
+
+const getOrderDetail = async () => {
+    try {
+        uni.showLoading({
+            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
+            }
+        }
+        detaile.value = data;
+        console.log('xxxx', detaile.value);
+
+    } catch (error) {
+        console.log('error', error);
+        uni.showToast({
+            title: error.msg,
+            icon: 'error',
+        })
+    } finally {
+        uni.hideLoading();
+    }
+}
+
+const change = (e) => {
+    console.log('验证信息:', e)
+    console.log('验证是否成功:' + e.state)
+    console.log('验证次数:' + e.verification)
+    if (e.state && !orderStatus.value) {
+
+        getTimesByDate(orderId.value).then(res =>{
+            if(res.code === 200){
+                verify.value.initialization();
+                // 验证成功
+                orderStatus.value = true;
+            }
+        })
+
+    }
+    if (e.state && orderStatus.value) {
+        console.log('完成任务')
+        uni.redirectTo({ url: `/pages_classify/pages/order/index?orderId=${orderId.value}` });
+    }
+}
+
+onLoad((options) => {
+    console.log('options', options);
+    orderId.value = options.orderId;
+    getOrderDetail();
+
+})
+</script>
+<style lang="scss" scoped>
+.order-detail {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 12px 12px 24px;
+    background: rgba(245, 245, 245, 1);
+
+
+    .order-card {
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 1);
+        padding: 12px;
+        margin-bottom: 12px;
+    }
+
+    .font-title {
+        margin-bottom: 12px;
+    }
+
+    .user-box {
+        display: flex;
+
+        .user-img {
+            width: 65.8px;
+            height: 65.8px;
+            margin-right: 12px;
+        }
+
+    }
+
+    .register-box {
+        display: flex;
+        margin-bottom: 12px;
+
+        .register-img {
+            width: 90px;
+            height: 90px;
+            margin-right: 12px;
+        }
+
+    }
+
+    .info-list {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0px;
+        line-height: 23.27px;
+        color: rgba(51, 51, 51, 1);
+    }
+
+    .price {
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(246, 74, 31, 1);
+
+        .price-yuan {
+            font-size: 13px;
+            font-weight: 700;
+            color: rgba(246, 74, 31, 1);
+        }
+    }
+
+    .footer-g {
+        padding: 12px;
+        position: absolute;
+        bottom: 18px;
+        left: 0px;
+        right: 0px;
+        background: rgba(255, 255, 255, 1);
+
+    }
+
+    .upload-img {
+        height: 68px;
+        width: 68px;
+        margin-right: 12px;
+        margin-bottom: 12px;
+    }
+
+    .upload-box {
+        display: flex;
+        flex-wrap: wrap;
+
+        .upload-img-item {
+            position: relative;
+
+            .delete-icon {
+                position: absolute;
+                top: -7px;
+                right: 7px;
+                z-index: 1;
+            }
+        }
+    }
+
+    .phone {
+        color: #3c9cff;
+    }
+}
+</style>

+ 226 - 0
pages_classify/pages/order/index.vue

@@ -0,0 +1,226 @@
+<!-- 订单详情 -->
+<template>
+	<view class="order-detail">
+		<view class="user-info order-card">
+			<view class="font-title">基本信息</view>
+			<view class="user-box">
+				<view class="info-list">
+					<view>被服务人员:{{ detaile.name }}</view>
+					<view @click="onPhone">电话号码:<label class="phone">{{ detaile.telephone }}</label></view>
+					<view>地址:{{ detaile.address }}</view>
+				</view>
+			</view>
+		</view>
+		<view class="service-info order-card">
+			<view class="font-title ">备注信息</view>
+			<view class="info-list">
+				{{ detaile.remark }}
+			</view>
+		</view>
+
+		<view class="service-info order-card">
+			<view class="font-title">图片上传</view>
+			<view class="upload-box">
+				<view class="upload-img-item" v-for="(item, index) in fileList" :key="item.url">
+					<view class="delete-icon" @click="deletePic(index)"><up-icon name="close-circle-fill"
+							color="#f64a1f" size="18"></up-icon></view>
+					<img class="upload-img" :src="item.url" :alt="item.fileName" srcset="">
+				</view>
+				<img src="/static/img/upload.png" alt="" class="upload-img" @click="uploadClick('img')"
+					v-if="fileList.length < 10">
+			</view>
+		</view>
+
+		<view class=" footer-g">
+			<up-button type="primary" text="确定结束" @click="onSubmit"></up-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, toRaw } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { getVolunteerOrderInfo, getVolunteerFinishSecondOrder } from '@/api/volunteer.js'
+import { getAddress } from '@/api/address.js'
+
+import { wxUploadFile, wxMakePhoneCall } from '@/utils/wxRequest.js'
+
+const fileList = ref([]);
+const orderId = ref('');
+const detaile = ref({});
+
+// 删除图片
+const deletePic = (index) => {
+	fileList.value.splice(index, 1);
+};
+
+
+const uploadClick = async (type) => {
+	const res = await wxUploadFile(type);
+	fileList.value = [...fileList.value, ...res];
+	console.log('xxxxres', res, fileList.value);
+}
+const onPhone = (phone) => {
+	wxMakePhoneCall(phone)
+}
+
+const getOrderDetail = async () => {
+	try {
+		uni.showLoading({
+			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
+			}
+		}
+		detaile.value = data;
+		console.log('detaile.value', detaile.value);
+
+	} catch (error) {
+		console.log('error', error);
+		uni.showToast({
+			title: error.msg,
+			icon: 'error',
+		})
+	} finally {
+		uni.hideLoading();
+	}
+}
+
+const onSubmit = () => {
+	const  img_urls = fileList.value.map(item => item.url).join(',');
+	console.log('submit', fileList.value,img_urls);
+
+	getVolunteerFinishSecondOrder({
+		secondOrderId:orderId.value,
+		serviceLog:img_urls,
+		volunteerId: detaile.value.volunteerId
+	}).then(res=> {
+		if(res.code === 200){
+			uni.switchTab({
+			url: '/pages/classify'
+		});	
+		}
+
+	})
+
+}
+
+onLoad((options) => {
+	console.log('options', options);
+	orderId.value = options.orderId;
+	// orderId.value = '1911685346559660034';
+
+	getOrderDetail();
+
+})
+</script>
+<style lang="scss" scoped>
+.order-detail {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 12px 12px 24px;
+	background: rgba(245, 245, 245, 1);
+
+
+	.order-card {
+		border-radius: 8px;
+		background: rgba(255, 255, 255, 1);
+		padding: 12px;
+		margin-bottom: 12px;
+	}
+
+	.font-title {
+		margin-bottom: 12px;
+	}
+
+	.user-box {
+		display: flex;
+
+		.user-img {
+			width: 65.8px;
+			height: 65.8px;
+			margin-right: 12px;
+		}
+
+	}
+
+	.register-box {
+		display: flex;
+		margin-bottom: 12px;
+
+		.register-img {
+			width: 90px;
+			height: 90px;
+			margin-right: 12px;
+		}
+
+	}
+
+	.info-list {
+		flex: 1;
+		font-size: 14px;
+		font-weight: 500;
+		letter-spacing: 0px;
+		line-height: 23.27px;
+		color: rgba(51, 51, 51, 1);
+	}
+
+	.price {
+		font-size: 18px;
+		font-weight: 500;
+		color: rgba(246, 74, 31, 1);
+
+		.price-yuan {
+			font-size: 13px;
+			font-weight: 700;
+			color: rgba(246, 74, 31, 1);
+		}
+	}
+
+	.footer-g {
+		padding: 12px;
+		position: absolute;
+		bottom: 18px;
+		left: 0px;
+		right: 0px;
+	}
+
+	.upload-img {
+		height: 68px;
+		width: 68px;
+		margin-right: 12px;
+		margin-bottom: 12px;
+	}
+
+	.upload-box {
+		display: flex;
+		flex-wrap: wrap;
+
+		.upload-img-item {
+			position: relative;
+
+			.delete-icon {
+				position: absolute;
+				top: -7px;
+				right: 7px;
+				z-index: 1;
+			}
+		}
+	}
+
+	.phone {
+		color: #3c9cff;
+	}
+}
+</style>