更换接口以及调整样式

src/views/commandScreen/commandCenter/centerBottom.vue

@@ -8,14 +8,23 @@
 			<div class="cbHeaderLine"></div>
 		</div>
 		<div class="cbContent">
-			<vue3-seamless-scroll :speed="1" :list="listData" :step="0.3" :hover="true" class="scroll">
+			<div v-if="listData.length < 10 && listData.length !== 0">
 				<div class="item" v-for="(item, index) in listData" :key="index">
 					<div class="itemHead">
-						<div class="itemHeadInner" v-if="item.type === 1">{{ item.header }}</div>
+						<div v-if="JSON.parse(item.payload).level">
-						<div class="itemHeadInner2" v-if="item.type === 3">{{ item.header }}</div>
+							<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
+							<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
+							<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
+							<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
+						</div>
+						<div v-else>
+							<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
+							<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
+							<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
+						</div>
 						<div class="itemContent">
-							<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
+							<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
-								<text style="margin-left:10px">{{ item.content }}</text>
+								<text style="margin-left:10px">{{ item.msg }}</text>
 							</el-tooltip>
 						</div>
 					</div>
@@ -25,15 +34,55 @@
 						</el-tooltip>
 					</div> -->
 					<div class="itemTime">
-						<text class="timeInfo">{{ item.startTime + '-' + item.endTime }}</text>
+						<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
+					</div>
+				</div>
+			</div>
+			<div v-else>
+
+			<vue3-seamless-scroll v-if="listData.length>0" :speed="1" :list="listData" :limitScrollNum="10" :step="0.3" :hover="true" class="scroll">
+				<div class="item" v-for="(item, index) in listData" :key="index">
+					<div class="itemHead">
+						<div v-if="JSON.parse(item.payload).level">
+							<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
+							<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
+							<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
+							<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
+						</div>
+						<div v-else>
+							<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
+							<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
+							<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
+						</div>
+						<div class="itemContent">
+							<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
+								<text style="margin-left:10px">{{ item.msg }}</text>
+							</el-tooltip>
+						</div>
+					</div>
+					<!-- <div class="itemContent">
+						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
+							{{item.content}}
+						</el-tooltip>
+					</div> -->
+					<div class="itemTime">
+						<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
 					</div>
 				</div>
 			</vue3-seamless-scroll>
+			</div>
+			<div class="notoDta" v-if="listData.length == 0">
+				<img src="@/assets/images/noData.png" alt="" />
+				<p>暂无数据</p>
+			</div> 
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { 
+	getNoticeListApi 
+} from "@/api/modules/projectOverview";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import Card from "@/components/card.vue";
 import { ref, watch, onMounted } from "vue";
@@ -42,32 +91,74 @@ import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 
 let listData = ref([
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
-	{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
+	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
 ])
 
-onMounted(async () => {
+const getNoticeList = async () => {
+	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
+	const res: any = await getNoticeListApi({ isBigScreen: 1 ,type:32});
+	console.log('隐患智能分析', res);
+	listData.value = res.result.records;
+	
+		// listData.value.push({
+		// 	accountId:"1779721457571291137",
+		// 	id:"1789601398432559107",
+		// 	imageUrl:null,
+		// 	isRead:0,
+		// 	msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
+		// 	payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
+		// 	sendTime: "2024-05-12 18:19:57",
+		// 	title: "大屏通知",
+		// 	type: "31",
+		// })
 
+	console.log("================center================",listData.value)
+}
+
+onMounted(async () => {
+	await getNoticeList();
 });
 </script>
 
 <style lang="scss" scoped>
+.notoDta {
+    top: 30%;
+    width: 50%;
+    // left: 40%;
+    position: absolute;
+    text-align: center;
+    left:50%;
+    transform: translateX(-50%);
+
+    img {
+        width: 30%;
+        margin: 5% 22%;
+    }
+
+    p {
+        color: #fff;
+        font-size: calc(100vw * 14 / 1920);
+        margin: -6% 30%;
+    }
+}
 .scroll {
 	height: 100%;
+	width: 100%;
 	overflow: hidden;
 }
 
@@ -130,7 +221,7 @@ onMounted(async () => {
 		// background: #fff;
 		.item {
 			width: 100%;
-			line-height: 130%;
+			line-height: 110%;
 			display: flex;
 			align-items: center;
 			// justify-content: flex-start;
@@ -146,21 +237,60 @@ onMounted(async () => {
 				font-size: 16px;
 				width: 75%;
 
-				.itemHeadInner {
+				.itemHeadInner1 {
-					border: 1px solid #f77c7d;
+					border: 1px solid #e02020;
-					box-shadow: 0 0 0 1px #f77c7d;
+					box-shadow: 0 0 0 1px #e02020;
-					background: rgba(247, 124, 125, 0.4);
+					background: rgba(224,32,32, 0.4);
 					border-radius: 3px;
 					padding: 0 15px;
 					margin: 9px 0;
 					margin-left: 2px;
 				}
-
 				.itemHeadInner2 {
 					font-size: 16px;
-					border: 1px solid #0db027;
+					border: 1px solid #f46649;
-					box-shadow: 0 0 0 1px #0db027;
+					box-shadow: 0 0 0 1px #f46649;
-					background: rgba(13, 176, 39, 0.4);
+					background: rgba(244,102,73, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemHeadInner3 {
+					font-size: 16px;
+					border: 1px solid #ecbe45;
+					box-shadow: 0 0 0 1px #ecbe45;
+					background: rgba(236,190,69, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemHeadInner4 {
+					font-size: 16px;
+					border: 1px solid #5394f7;
+					box-shadow: 0 0 0 1px #5394f7;
+					background: rgba(83,148,247, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemHeadInner5 {
+					font-size: 16px;
+					border: 1px solid #9400D3;
+					box-shadow: 0 0 0 1px #9400D3;
+					background: rgba(148,0,211, 0.4);
+					border-radius: 3px;
+					padding: 0 15px;
+					margin: 9px 0;
+					margin-left: 2px;
+				}
+				.itemHeadInner6 {
+					font-size: 16px;
+					border: 1px solid #00CED1;
+					box-shadow: 0 0 0 1px #00CED1;
+					background: rgba(	0,206,209, 0.4);
 					border-radius: 3px;
 					padding: 0 15px;
 					margin: 9px 0;

src/views/commandScreen/commandCenter/centerTop.vue

@@ -52,22 +52,22 @@
 			</div>
 			<div class="classify-div">
 				<div class="classify-div-item" @click="openDialogData({index: 1, title: '危大工程'})">
-					<span>危大工程&nbsp;&nbsp;{{statsDirectorateBigScreen.dangerousEngineeringRecordNum}}</span>
+					<span style="font-size: 12px;">危大工程&nbsp;&nbsp;{{statsDirectorateBigScreen.dangerousEngineeringRecordNum}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({index: 2, title: '安全教育'})">
-					<span>安全教育&nbsp;&nbsp;{{statsDirectorateBigScreen.workerInfoAuditRecordNum}}</span>
+					<span style="font-size: 12px;">安全教育&nbsp;&nbsp;{{statsDirectorateBigScreen.workerInfoAuditRecordNum}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({index: 3, title: '影响进度的因素'})">
-					<span>极端恶劣天气&nbsp;&nbsp;{{statsDirectorateBigScreen.taskProgressContentNum}}</span>
+					<span style="font-size: 12px;">极端恶劣天气&nbsp;&nbsp;{{statsDirectorateBigScreen.taskProgressContentNum}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({index: 4, title: '风险统计'})">
-					<span>风险统计&nbsp;&nbsp;{{statsDirectorateBigScreen.securityQualityInspectionRecordNum}}</span>
+					<span style="font-size: 12px;">风险统计&nbsp;&nbsp;{{statsDirectorateBigScreen.securityQualityInspectionRecordNum}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({index: 5, title: '安全隐患'})">
-					<span>安全隐患&nbsp;&nbsp;{{statsDirectorateBigScreen.securityQualityInspectionRecordNum}}</span>
+					<span style="font-size: 12px;">安全隐患&nbsp;&nbsp;{{statsDirectorateBigScreen.securityQualityInspectionRecordNum}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({index: 6, title: 'AI警报'})">
-					<span>AI警报&nbsp;&nbsp;{{statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum}}</span>
+					<span style="font-size: 12px;">AI警报&nbsp;&nbsp;{{statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum}}</span>
 				</div>
 			</div>
 			<div class="background-title">

src/views/commandScreen/commandCenter/rightAll.vue

@@ -39,24 +39,49 @@
 					<div class="cbHeaderLine"></div>
 				</div>
 				<div class="cbContent">
-					<vue3-seamless-scroll v-show="listData.length>0" :list="listData" :step="1" :limitScrollNum="10" :hover="true" class="scroll">
+					<div v-if="listData2.length < 10 && listData2.length !== 0">
-						<div class="item" v-for="(item, index) in listData" :key="index">
+						<div class="item" v-for="(item, index) in listData2" :key="index">
 							<div class="itemHead">
-								<div class="itemHeadInner" v-if="item.type === 1">{{ item.title }}</div>
+								<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
-								<div class="itemHeadInner2" v-if="item.type === 2">{{ item.title }}</div>
+								<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
-								<div class="itemHeadInner3" v-if="item.type == 10">{{ item.title }}</div>
+								<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
+								<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
+								<div class="itemContent">
+									<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
+										<text style="margin-left:10px">{{ item.msg }}</text>
+									</el-tooltip>
+								</div>
 							</div>
-							<div class="itemContent">
+							<div class="itemTime">
-								<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
+								<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
-									{{ item.msg }}
+							</div>
-								</el-tooltip>
+						</div>
+					</div>
+					<div class="notoDta" v-else-if="listData2.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div> 
+					<div v-else>
+
+					<vue3-seamless-scroll v-if="listData2.length > 0" :speed="1" :list="listData2" :step="0.3" :limitScrollNum="10" :hover="true" class="scroll">
+						<div class="item" v-for="(item, index) in listData2" :key="index">
+							<div class="itemHead">
+								<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
+								<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
+								<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
+								<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
+								<div class="itemContent">
+									<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
+										<text style="margin-left:10px">{{ item.msg }}</text>
+									</el-tooltip>
+								</div>
+							</div>
+							<div class="itemTime">
+								<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
 							</div>
 						</div>
 					</vue3-seamless-scroll>
-					<div class="notoDta" v-if="listData.length == 0">
+					</div>
-                    <img src="@/assets/images/noData.png" alt="" />
-                    <p>暂无数据</p>
-                </div>
 				</div>
 			</div>
 		</div>
@@ -89,7 +114,7 @@ let majorDangerRate = ref(50 as any);
 let overdueMajorDangerCount = ref(20 as any);
 let overdueMajorDangerRate = ref(50 as any);
 
-let listData = ref([
+let listData2 = ref([
 	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
 	// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
 	// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
@@ -749,9 +774,22 @@ const getSelectQualityStatisticsNum = async () => {
 }
 
 const getNoticeList = async () => {
-	const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
+	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
+	const res: any = await getNoticeListApi({ isBigScreen: 1 ,type:31});
 	console.log('隐患智能分析', res);
-	listData.value = res.result.records;
+	listData2.value = res.result.records;
+		// listData2.value.push({
+		// 	accountId:"1779721457571291137",
+		// 	id:"1789601398432559107",
+		// 	imageUrl:null,
+		// 	isRead:0,
+		// 	msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
+		// 	payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
+		// 	sendTime: "2024-05-12 18:19:57",
+		// 	title: "大屏通知",
+		// 	type: "31",
+		// })
+	console.log("================================",listData2.value)
 }
 
 watch(dateRange,async () => {
@@ -896,7 +934,7 @@ onMounted(async () => {
 			// background-color: #fff;
 			// padding: 0 20px;
 			position: relative;
-
+			overflow: hidden;
 			.cbHeader {
 				width: 100%;
 				height: 40px;
@@ -937,29 +975,34 @@ onMounted(async () => {
 					background-size: 100% 100%;
 				}
 			}
-
 			.cbContent {
 				width: 100%;
-				height: calc(100% - 60px);
+				height: calc(100% - 55px);
+				// height: 100%;
 
 				// background: #fff;
 				.item {
-					// width: 100%;
+					width: 100%;
-					line-height: 130%;
+					line-height: 110%;
 					display: flex;
 					align-items: center;
-					justify-content: flex-start;
+					// justify-content: flex-start;
+					justify-content: space-between;
 					// background-color: green;
 					color: #fff;
 
 					.itemHead {
 						white-space: nowrap;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						font-size: 16px;
+						width: 65%;
 
-						.itemHeadInner {
+						.itemHeadInner1 {
-							font-size: 16px;
+							border: 1px solid #e02020;
-							border: 1px solid #f77c7d;
+							box-shadow: 0 0 0 1px #e02020;
-							box-shadow: 0 0 0 1px #f77c7d;
+							background: rgba(224,32,32, 0.4);
-							background: rgba(247, 124, 125, 0.4);
 							border-radius: 3px;
 							padding: 0 15px;
 							margin: 9px 0;
@@ -968,37 +1011,119 @@ onMounted(async () => {
 
 						.itemHeadInner2 {
 							font-size: 16px;
-							border: 1px solid #56a8f8;
+							border: 1px solid #f46649;
-							box-shadow: 0 0 0 1px #56a8f8;
+							box-shadow: 0 0 0 1px #f46649;
-							background: rgba(86, 168, 248, 0.4);
+							background: rgba(244,102,73, 0.4);
+							border-radius: 3px;
+							padding: 0 15px;
+							margin: 9px 0;
+							margin-left: 2px;
+						}
+						.itemHeadInner3 {
+							font-size: 16px;
+							border: 1px solid #ecbe45;
+							box-shadow: 0 0 0 1px #ecbe45;
+							background: rgba(236,190,69, 0.4);
+							border-radius: 3px;
+							padding: 0 15px;
+							margin: 9px 0;
+							margin-left: 2px;
+						}
+						.itemHeadInner4 {
+							font-size: 16px;
+							border: 1px solid #5394f7;
+							box-shadow: 0 0 0 1px #5394f7;
+							background: rgba(83,148,247, 0.4);
 							border-radius: 3px;
 							padding: 0 15px;
 							margin: 9px 0;
 							margin-left: 2px;
 						}
 
-						.itemHeadInner3 {
+						.itemContent {
-							font-size: 16px;
+							margin-left: 10px;
-							border: 1px solid #0db027;
+							font-size: 15px;
-							box-shadow: 0 0 0 1px #0db027;
+							white-space: nowrap;
-							background: rgba(13, 176, 39, 0.4);
+							overflow: hidden;
-							border-radius: 3px;
+							text-overflow: ellipsis;
-							padding: 0 15px;
+							width: 100%;
-							margin: 9px 0;
-							margin-left: 2px;
 						}
 					}
 
-					.itemContent {
+					.itemTime {
-						margin-left: 10px;
+						// background-color: #fff;
-						font-size: 15px;
+						width: 35%;
-						white-space: nowrap;
+						font-size: 16px;
-						overflow: hidden;
-						text-overflow: ellipsis;
 
+						.timeInfo {
+							display: flex;
+							justify-content: flex-end;
+							margin-right: 10px;
+						}
 					}
 				}
 			}
+			// .cbContent {
+			// 	width: 100%;
+			// 	height: calc(100% - 60px);
+
+			// 	// background: #fff;
+			// 	.item {
+			// 		// width: 100%;
+			// 		line-height: 130%;
+			// 		display: flex;
+			// 		align-items: center;
+			// 		justify-content: flex-start;
+			// 		// background-color: green;
+			// 		color: #fff;
+
+			// 		.itemHead {
+			// 			white-space: nowrap;
+
+			// 			.itemHeadInner {
+			// 				font-size: 16px;
+			// 				border: 1px solid #f77c7d;
+			// 				box-shadow: 0 0 0 1px #f77c7d;
+			// 				background: rgba(247, 124, 125, 0.4);
+			// 				border-radius: 3px;
+			// 				padding: 0 15px;
+			// 				margin: 9px 0;
+			// 				margin-left: 2px;
+			// 			}
+
+			// 			.itemHeadInner2 {
+			// 				font-size: 16px;
+			// 				border: 1px solid #56a8f8;
+			// 				box-shadow: 0 0 0 1px #56a8f8;
+			// 				background: rgba(86, 168, 248, 0.4);
+			// 				border-radius: 3px;
+			// 				padding: 0 15px;
+			// 				margin: 9px 0;
+			// 				margin-left: 2px;
+			// 			}
+
+			// 			.itemHeadInner3 {
+			// 				font-size: 16px;
+			// 				border: 1px solid #0db027;
+			// 				box-shadow: 0 0 0 1px #0db027;
+			// 				background: rgba(13, 176, 39, 0.4);
+			// 				border-radius: 3px;
+			// 				padding: 0 15px;
+			// 				margin: 9px 0;
+			// 				margin-left: 2px;
+			// 			}
+			// 		}
+
+			// 		.itemContent {
+			// 			margin-left: 10px;
+			// 			font-size: 15px;
+			// 			white-space: nowrap;
+			// 			overflow: hidden;
+			// 			text-overflow: ellipsis;
+
+			// 		}
+			// 	}
+			// }
 		}
 	}
 }