From a8c03746e6bd8ac1d46dc48c1b10bceff543664f Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 10 十二月 2024 20:16:12 +0800
Subject: [PATCH] ll

---
 h5/pages/staff/meetingCalendar.vue |  828 ++++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 507 insertions(+), 321 deletions(-)

diff --git a/h5/pages/staff/meetingCalendar.vue b/h5/pages/staff/meetingCalendar.vue
index 7af417d..dab5dd0 100644
--- a/h5/pages/staff/meetingCalendar.vue
+++ b/h5/pages/staff/meetingCalendar.vue
@@ -1,342 +1,528 @@
 <template>
-	<view class="main_app">
-		<view class="tabs">
-			<view class="tab" :class="{ active: activeTab === '0' }" @click="tabClick('0')">
-				<text class="name">浼氳鏃ュ巻</text>
-				<view class="line"></view>
-			</view>
-			<view class="tab" :class="{ active: activeTab === '1' }" @click="tabClick('1')">
-				<text class="name">棰勭害璁板綍</text>
-				<view class="line"></view>
-			</view>
-		</view>
-		<!--  -->
-		<template v-if="activeTab == '0'">
-			<!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
-			<!-- 鏃ュ巻 -->
-			<view class="container_b">
-				<Calendar
-					ref="Calendar"
-					:currentTime="currentTime1"
-					:mark="mark"
-					:showLunar="false"
-					@dayChange="dayChange"
-					@monthChange="monthChange"
-					:rangeMode="false"
-					:maskColor="'#ffffff'"
-					:dateStart="dateStart"
-					:dateEnd="dateEnd"
-					:canDrag="false"
-				></Calendar>
-			</view>
-			<!--  -->
-			<view class="card_list">
-				<view class="card_title">
-					<view class="name">
-						<view class="icon"></view>
-						<view class="text">浠婃棩浼氳</view>
-					</view>
-					<view class="meeting">
-						<view class="text mr24">鍏ㄩ儴浼氳瀹�</view>
-						<u-icon name="arrow-down" size="12" color="#999999" />
-					</view>
-				</view>
-				<view class="list">
-					<view class="item">
-						<view class="head">
-							<view class="name">aaaaa閫夊瀷</view>
-							<view class="status">鍗冲皢寮�濮�</view>
+  <view class="main_app">
+    <view class="tabs">
+      <view
+        class="tab"
+        :class="{ active: activeTab === '0' }"
+        @click="tabClick('0')"
+      >
+        <text class="name">浼氳鏃ュ巻</text>
+        <view class="line"></view>
+      </view>
+      <view
+        class="tab"
+        :class="{ active: activeTab === '1' }"
+        @click="tabClick('1')"
+      >
+        <text class="name">棰勭害璁板綍</text>
+        <view class="line"></view>
+      </view>
+    </view>
+    <!--  -->
+    <template v-if="activeTab == '0'">
+      <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
+      <!-- 鏃ュ巻 -->
+      <view class="container_b">
+        <Calendar
+          ref="Calendar"
+          :currentTime="currentDate"
+          :mark="monthMark"
+          :showLunar="false"
+          @dayChange="dayChange"
+          @monthChange="monthChange"
+          :rangeMode="false"
+          :maskColor="'#ffffff'"
+          :dateStart="dateStart"
+          :dateEnd="dateEnd"
+          :canDrag="false"
+        ></Calendar>
+      </view>
+      <!--  -->
+      <view class="card_list">
+        <view class="card_title">
+          <view class="name">
+            <view class="icon"></view>
+            <view class="text">浠婃棩浼氳</view>
+          </view>
+          <view class="meeting">
+            <view class="text mr24" @click="isShowStatus = true">{{
+              activeRoom.name
+            }}</view>
+            <u-icon name="arrow-down" size="12" color="#999999" />
+          </view>
+        </view>
+        <view class="list">
+          <view
+            @click="handleDetail(item.id)"
+            class="item"
+            v-for="item in myMeetingList"
+            :key="item.id"
+          >
+            <view class="head">
+              <view class="name">{{ item.meetingName }}</view>
+              <view class="status" v-if="item.meetingStatus == '1'"
+                >鏈紑濮�</view
+              >
+              <view class="status red" v-if="item.meetingStatus == '2'"
+                >杩涜涓�</view
+              >
+              <view class="status" v-if="item.meetingStatus == '3'"
+                >宸茬粨鏉�</view
+              >
+              <view class="status padding" v-if="item.meetingStatus == '4'"
+                >鍗冲皢寮�濮�</view
+              >
+              <view class="status" v-if="item.meetingStatus == '5'"
+                >宸叉挙閿�</view
+              >
+            </view>
+            <view class="line">
+              <view class="label">浼氳鏃堕棿锛�</view>
+              <view class="value">{{ item.meetingTime }}</view>
+            </view>
+            <view class="line">
+              <view class="label">浼氳瀹わ細</view>
+              <view class="value">{{ item.roomName }}</view>
+            </view>
+            <view class="line">
+              <view class="label">棰勭害浜猴細</view>
+              <view class="value">{{ item.bookingUser }}</view>
+            </view>
+            <view class="line">
+              <view class="label">澶囨敞锛�</view>
+              <view class="value">{{ item.remark || item.meetingRemark }}</view>
+            </view>
+          </view>
+          <view v-if="myMeetingList.length === 0" style="text-align: center">
+            <image
+              src="@/static/empty.png"
+              style="width: 320rpx; margin: 60rpx auto 0"
+              mode="widthFix"
+            />
+            <view class="placeholder9 fs24">鏆傛棤鏁版嵁</view>
+          </view>
+        </view>
+      </view>
+    </template>
+    <!--  -->
+    <template v-if="activeTab === '1'">
+      <view class="card_list">
+        <view class="list">
+          <view
+            class="item"
+            v-for="item in recordList"
+            :key="item.id"
+            @click="handleDetail(item.id)"
+          >
+            <view class="head">
+              <view class="name">{{ item.meetingName }}</view>
+              <view class="status" v-if="item.meetingStatus == '1'"
+                >鏈紑濮�</view
+              >
+              <view class="status red" v-if="item.meetingStatus == '2'"
+                >杩涜涓�</view
+              >
+              <view class="status" v-if="item.meetingStatus == '3'"
+                >宸茬粨鏉�</view
+              >
+              <view class="status padding" v-if="item.meetingStatus == '4'"
+                >鍗冲皢寮�濮�</view
+              >
+              <view class="status" v-if="item.meetingStatus == '5'"
+                >宸叉挙閿�</view
+              >
+            </view>
+						<view class="line">
+						  <view class="label">浼氳鏃ユ湡锛�</view>
+						  <view class="value">{{ item.meetingDate }}</view>
 						</view>
-						<view class="line">
-							<view class="label">浼氳鏃堕棿锛�</view>
-							<view class="value">12:00-12</view>
-						</view>
-						<view class="line">
-							<view class="label">浼氳瀹わ細</view>
-							<view class="value">202浼氳瀹�</view>
-						</view>
-						<view class="line">
-							<view class="label">棰勭害浜猴細</view>
-							<view class="value">鏉ㄦ煇鏌�</view>
-						</view>
-						<view class="line">
-							<view class="label">澶囨敞锛�</view>
-							<view class="value">--</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</template>
-		<!--  -->
-		<template v-if="activeTab === '1'">
-			<view class="card_list">
-				<view class="list">
-					<view class="item" @click="handleDetail()">
-						<view class="head">
-							<view class="name">aaaaa閫夊瀷</view>
-							<view class="status">鍗冲皢寮�濮�</view>
-						</view>
-						<view class="line">
-							<view class="label">浼氳鏃堕棿锛�</view>
-							<view class="value">12:00-12</view>
-						</view>
-						<view class="line">
-							<view class="label">浼氳瀹わ細</view>
-							<view class="value">202浼氳瀹�</view>
-						</view>
-						<view class="line">
-							<view class="label">棰勭害浜猴細</view>
-							<view class="value">鏉ㄦ煇鏌�</view>
-						</view>
-						<view class="line">
-							<view class="label">澶囨敞锛�</view>
-							<view class="value">--</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</template>
-	</view>
+            <view class="line">
+              <view class="label">浼氳鏃堕棿锛�</view>
+              <view class="value">{{ item.meetingTime }}</view>
+            </view>
+            <view class="line">
+              <view class="label">浼氳瀹わ細</view>
+              <view class="value">{{ item.roomName }}</view>
+            </view>
+            <view class="line">
+              <view class="label">棰勭害浜猴細</view>
+              <view class="value">{{ item.bookingUser }}</view>
+            </view>
+<!--            <view class="line">
+              <view class="label">澶囨敞锛�</view>
+              <view class="value">{{ item.remark || item.meetingRemark }}</view>
+            </view> -->
+          </view>
+          <view v-if="recordList.length === 0" style="text-align: center">
+            <image
+              src="@/static/empty.png"
+              style="width: 320rpx; margin: 120rpx auto 0"
+              mode="widthFix"
+            />
+            <view class="placeholder9 fs24">鏆傛棤鏁版嵁</view>
+          </view>
+        </view>
+      </view>
+    </template>
+
+    <u-picker
+      keyName="name"
+      :show="isShowStatus"
+      :columns="meetingList"
+      @confirm="seletedStatus"
+      @cancel="isShowStatus = false"
+    ></u-picker>
+  </view>
 </template>
 
 <script>
-import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
-import { getDay } from '@/utils/utils.js';
+import Calendar from '@/components/Li-Calendar/Li-Calendar.vue'
+import dayja from 'dayjs'
+import { myMeetingPage, monthMeetingPage, roomsListPost } from '@/api'
 function getDate(date, AddDayCount = 0) {
-	if (!date) {
-		date = new Date();
-	}
-	if (typeof date !== 'object') {
-		date = date.replace(/-/g, '/');
-	}
-	const dd = new Date(date);
+  if (!date) {
+    date = new Date()
+  }
+  if (typeof date !== 'object') {
+    date = date.replace(/-/g, '/')
+  }
+  const dd = new Date(date)
 
-	dd.setDate(dd.getDate() + AddDayCount); // 鑾峰彇AddDayCount澶╁悗鐨勬棩鏈�
+  dd.setDate(dd.getDate() + AddDayCount) // 鑾峰彇AddDayCount澶╁悗鐨勬棩鏈�
 
-	const y = dd.getFullYear();
-	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 鑾峰彇褰撳墠鏈堜唤鐨勬棩鏈燂紝涓嶈冻10琛�0
-	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 鑾峰彇褰撳墠鍑犲彿锛屼笉瓒�10琛�0
-	return {
-		fullDate: y + '-' + m + '-' + d,
-		year: y,
-		month: m,
-		date: d,
-		day: dd.getDay()
-	};
+  const y = dd.getFullYear()
+  const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 鑾峰彇褰撳墠鏈堜唤鐨勬棩鏈燂紝涓嶈冻10琛�0
+  const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 鑾峰彇褰撳墠鍑犲彿锛屼笉瓒�10琛�0
+  return {
+    fullDate: y + '-' + m + '-' + d,
+    year: y,
+    month: m,
+    date: d,
+    day: dd.getDay()
+  }
 }
 export default {
-	components: {
-		Calendar
-	},
-	data() {
-		return {
-			activeTab: '0',
-			currentTime1: '',
-			dateStart: '1999-05-01',
-			dateEnd: '2999-06-15',
-			mark: [],
-			selected: [
-				{
-					date: getDate(new Date(), -3).fullDate
-					// info: '鎵撳崱'
-				},
-				{
-					date: getDate(new Date(), -2).fullDate,
-					// info: '绛惧埌',
-					data: {
-						custom: '鑷畾涔変俊鎭�',
-						name: '鑷畾涔夋秷鎭ご'
-					}
-				},
-				{
-					date: getDate(new Date(), -1).fullDate,
-					info: '宸叉墦鍗�'
-				}
-			]
-		};
-	},
-	methods: {
-		tabClick(val) {
-			this.activeTab = val;
-		},
-		handleDetail(item) {
-			uni.navigateTo({
-				// url: `/pages/staff/meetingDetail?id=${item.id}`,
-				url: `/pages/staff/meetingDetail`
-			});
-		},
-		changeCalendar(e) {
-			console.log(e);
-		},
-		// 鐐瑰嚮鏌愬ぉ
-		dayChange(data) {
-			console.log(data);
-			let date = data.time;
-			let yyyy = data.time.substring(0, 4);
-			let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')));
-			let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length));
-			mm = mm < 10 ? `0${mm}` : mm;
-			dd = dd < 10 ? `0${dd}` : dd;
-			let riqi = `${yyyy}-${mm}-${dd}`;
-			this.currentTime = riqi;
-			this.list = [];
-			this.next = false;
-			this.page = 0;
-			// this.getRoomList()
-		},
-		// 涓嬩竴鏈�
-		monthChange(data) {
-			let date = data.date.replace(/[/]/g, '-');
-			let yyyy = date.substring(0, 4);
-			let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')));
-			let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length));
-			mm = mm < 10 ? `0${mm}` : mm;
-			dd = dd < 10 ? `0${dd}` : dd;
-			let riqi = `${yyyy}-${mm}-${dd}`;
-			console.log('鏃ユ湡', riqi);
-			this.currentTime1 = riqi;
-			// this.getDateNum()
-		}
-	}
+  components: {
+    Calendar
+  },
+  data() {
+    return {
+      activeTab: '0',
+      recordList: [],
+			total: 0,
+      recordPage: 1,
+      myPage: 1,
+      myMeetingList: [],
+      currentDate: '',
+      dateStart: '1999-05-01',
+      dateEnd: '2999-06-15',
+      monthMark: [],
+
+      isShowStatus: false,
+      activeRoom: {
+        name: '鍏ㄩ儴浼氳瀹�',
+        id: ''
+      },
+      meetingList: [],
+
+    }
+  },
+  onLoad() {
+    this.currentDate = dayja().format('YYYY-MM-DD')
+    this.initData()
+    this.getRoomList()
+		this.tabClick('0')
+  },
+  onShow() {
+    // this.tabClick('0')
+		
+  },
+  onReachBottom() {
+    const { activeTab, total, myMeetingList, recordList } = this
+		console.log(total);
+		console.log(recordList);
+    if (activeTab == '0') {
+			if(total <= myMeetingList.length) return this.showToast('鏆傛棤鏇村鏁版嵁')
+      this.myPage = this.myPage + 1
+      this.getDayMeeting()
+    } else {
+			if(total <= recordList.length) return this.showToast('鏆傛棤鏇村鏁版嵁')
+      this.recordPage = this.recordPage + 1
+      this.getRecordList()
+    }
+  },
+  methods: {
+    initData() {
+      // 褰撴湀鏁版嵁
+      monthMeetingPage({
+        yearMonth: this.currentDate.slice(0, 7)
+      }).then(res => {
+        this.monthMark = res.data.filter(i => i.meetingNum > 0).map(j => {
+          return {
+            time: j.monthDate,
+            pointText: j.meetingNum,
+            pointTextColor: '#fff'
+          }
+        })
+      })
+    },
+    getRoomList() {
+      roomsListPost({}).then(res => {
+        this.meetingList = [[{ id: '', name: '鍏ㄩ儴浼氳瀹�' }, ...res.data]]
+        console.log('meetingList', this.meetingList)
+      })
+    },
+    tabClick(val) {
+      this.activeTab = val
+      if (val === '1') {
+        this.recordPage = 1
+        this.recordList = []
+        this.getRecordList()
+      } else {
+        this.myMeetingList = []
+        this.activeRoom = {
+          name: '鍏ㄩ儴浼氳瀹�',
+          id: ''
+        }
+        this.myPage = 1
+        this.getDayMeeting()
+      }
+    },
+    seletedStatus(e) {
+      this.myMeetingList = []
+      this.activeRoom = { ...e.value[0] }
+      this.isShowStatus = false
+      this.myPage = 1
+      this.getDayMeeting()
+    },
+    handleDetail(id) {
+      uni.navigateTo({
+        url: `/pages/staff/meetingDetail?id=${id}`,
+        // url: `/pages/staff/meetingDetail`
+      })
+    },
+    changeCalendar(e) {
+      console.log(e)
+    },
+    // 鐐瑰嚮鏌愬ぉ
+    dayChange(data) {
+      let date = data.time
+      let yyyy = data.time.substring(0, 4)
+      let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')))
+      let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length))
+      mm = mm < 10 ? `0${mm}` : mm
+      dd = dd < 10 ? `0${dd}` : dd
+      let riqi = `${yyyy}-${mm}-${dd}`
+      this.currentDate = riqi
+      this.myMeetingList = []
+      this.activeStatus = {
+        name: '鍏ㄩ儴浼氳瀹�',
+        key: ''
+      }
+      this.myPage = 1
+      this.getDayMeeting()
+    },
+    // 涓嬩竴鏈�
+    monthChange(data) {
+      let date = data.date.replace(/[/]/g, '-')
+      let yyyy = date.substring(0, 4)
+      let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')))
+      let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length))
+      mm = mm < 10 ? `0${mm}` : mm
+      dd = dd < 10 ? `0${dd}` : dd
+      let riqi = `${yyyy}-${mm}-${dd}`
+      console.log('鏃ユ湡', riqi)
+      this.currentDate = riqi
+      this.initData()
+    },
+    getRecordList() {
+      const { activeStatus } = this
+      myMeetingPage({
+        capacity: 10,
+        page: this.recordPage,
+        model: {
+          // status: activeStatus.key || null,
+          // roomsId: this.roomId,
+          queryType: 2
+        }
+      }).then(res => {
+        this.recordList = [...this.recordList, ...res.data.records]
+        this.total = res.data.total
+      })
+    },
+    getDayMeeting() {
+      const { myPage, activeRoom, currentDate } = this
+      // 褰撳ぉ鎴戝弬涓庣殑浼氳
+      myMeetingPage({
+        model: {
+          queryType: '1',
+          roomsId: activeRoom.id,
+          queryDate: currentDate
+        },
+        page: myPage,
+        capacity: 10
+      }).then(res => {
+        this.myMeetingList = [...this.myMeetingList, ...res.data.records]
+				this.total = res.data.total
+      })
+    },
+  }
 };
 </script>
 
 <style lang="scss">
 page {
-	background-color: #f7f7f7;
+  background-color: #f7f7f7;
 }
 .main_app {
-	padding: 0;
-	background-color: #f7f7f7;
-	::v-deep .uni-calendar-item--checked {
-		background-color: $uni-color-primary;
-		border-radius: 8rpx;
-	}
-	::v-deep .uni-calendar-item--isDay-text {
-		color: $uni-color-primary;
-	}
-	::v-deep .uni-calendar-item--isDay {
-		background-color: $uni-color-primary;
-		color: #fff;
-		border-radius: 8rpx;
-	}
-	.tabs {
-		display: flex;
-		background-color: #fff;
-		.tab {
-			flex: 1;
-			height: 88rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 28rpx;
-			color: #666666;
-			position: relative;
-			.line {
-				width: 60rpx;
-				height: 4rpx;
-				background: #fff;
-				border-radius: 3rpx;
-				position: absolute;
-				bottom: 0;
-				left: 50%;
-				transform: translate(-50%, 0);
-			}
-		}
-		.active {
-			font-weight: 500;
-			font-size: 30rpx;
-			color: #222222;
-			.line {
-				background-color: $uni-color-primary;
-			}
-		}
-	}
-	//
-	.card_list {
-		padding: 30rpx;
-		.card_title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-bottom: 22rpx;
-			.name {
-				display: flex;
-				align-items: center;
-				.icon {
-					width: 6rpx;
-					height: 32rpx;
-					background: $uni-color-primary;
-					border-radius: 4rpx;
-					margin-right: 16rpx;
-				}
-				.text {
-					font-weight: 600;
-					font-size: 32rpx;
-					color: #222222;
-				}
-			}
-			.meeting {
-				display: flex;
-				height: 52rpx;
-				line-height: 52rpx;
-				background: #ffffff;
-				border-radius: 26rpx;
-				border: 2rpx solid #eeeeee;
-				padding: 0 24rpx;
-				.text {
-					font-size: 24rpx;
-					color: #333333;
-				}
-			}
-		}
-		.list {
-			.item {
-				padding: 0rpx 30rpx 30rpx;
-				background: #ffffff;
-				border-radius: 8rpx;
-				.head {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					border-bottom: 1rpx solid #e5e5e5;
-					padding: 22rpx 0;
-					margin-bottom: 22rpx;
-					.name {
-						font-weight: 600;
-						font-size: 32rpx;
-						color: #222222;
-					}
-					.status {
-						height: 38rpx;
-						line-height: 38rpx;
-						padding: 0 16rpx;
-						border-radius: 4rpx;
-						border: 1rpx solid #999999;
-						font-size: 22rpx;
-						color: #999999;
-					}
-				}
-				.line {
-					display: flex;
-					margin-bottom: 12rpx;
-					.label {
-						width: 140rpx;
-						color: #666666;
-					}
-					.value {
-						flex: 1;
-					}
-				}
-			}
-		}
-	}
+  padding: 0;
+  background-color: #f7f7f7;
+  ::v-deep .uni-calendar-item--checked {
+    background-color: $uni-color-primary;
+    border-radius: 8rpx;
+  }
+  ::v-deep .uni-calendar-item--isDay-text {
+    color: $uni-color-primary;
+  }
+  ::v-deep .uni-calendar-item--isDay {
+    background-color: $uni-color-primary;
+    color: #fff;
+    border-radius: 8rpx;
+  }
+  .tabs {
+    display: flex;
+    background-color: #fff;
+    .tab {
+      flex: 1;
+      height: 88rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 28rpx;
+      color: #666666;
+      position: relative;
+      .line {
+        width: 60rpx;
+        height: 4rpx;
+        background: #fff;
+        border-radius: 3rpx;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+    }
+    .active {
+      font-weight: 600;
+      font-size: 30rpx;
+      color: #222222;
+      .line {
+        background-color: $uni-color-primary;
+      }
+    }
+  }
+  //
+  .card_list {
+    padding: 30rpx;
+    .card_title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 22rpx;
+      .name {
+        display: flex;
+        align-items: center;
+        .icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: $uni-color-primary;
+          border-radius: 4rpx;
+          margin-right: 16rpx;
+        }
+        .text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #222222;
+        }
+      }
+      .meeting {
+        display: flex;
+        height: 52rpx;
+        line-height: 52rpx;
+        background: #ffffff;
+        border-radius: 26rpx;
+        border: 2rpx solid #eeeeee;
+        padding: 0 24rpx;
+        .text {
+          font-size: 24rpx;
+          color: #333333;
+        }
+      }
+    }
+    .list {
+      .item {
+        padding: 0rpx 30rpx 30rpx;
+        background: #ffffff;
+        border-radius: 8rpx;
+        margin-bottom: 24rpx;
+        .head {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1rpx solid #e5e5e5;
+          padding: 22rpx 0;
+          margin-bottom: 22rpx;
+          .name {
+            font-weight: 600;
+            font-size: 32rpx;
+            color: #222222;
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .status {
+            height: 38rpx;
+            line-height: 38rpx;
+            padding: 0 16rpx;
+            border-radius: 4rpx;
+            border: 1rpx solid #999999;
+            font-size: 22rpx;
+            color: #999999;
+            margin-left: 20rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .padding {
+            color: $uni-color-primary;
+            border: 1rpx solid $uni-color-primary;
+          }
+          .red {
+            color: #e23f29;
+            border: 1rpx solid #e23f29;
+          }
+        }
+        .line {
+          display: flex;
+          margin-bottom: 12rpx;
+          .label {
+            width: 140rpx;
+            color: #666666;
+          }
+          .value {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
 }
 .container_b {
-	width: 100%;
-	padding: 30rpx;
-	background: #ffffff;
-	padding-top: 20rpx;
-	box-sizing: border-box;
+  width: 100%;
+  padding: 30rpx;
+  background: #ffffff;
+  padding-top: 20rpx;
+  box-sizing: border-box;
 }
 </style>

--
Gitblit v1.9.3