dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeWorkSpace.vue

<!-- 委员会工作空间 -->
<template>
	<div class="autoBox box1" style="position: relative; background: #f5f5f5">
		<div class="topImg" style="margin-top: -20px">
			<div class="spaceImg">
				<h1 class="topTitle">
					{{ $t("common.clean") }}&nbsp;&nbsp;{{ $t("common.green") }}
				</h1>
				<span class="topContent1">{{ $t("common.structure") }}</span>
				<span class="topContent2">{{ $t("common.promote") }}</span>
				<img
						style="
            width: 600px;
            height: 302px;
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: 0;
          "
						:src="require('@/assets/img/committeeWorkSpace/Group 186.png')"
						alt=""
				/>
			</div>
		</div>
		<div class="center">
			<div class="left">
				<div class="centerLeft1">
					<div class="top">
						<div class="top1"></div>
						<div class="top2"></div>
						<div class="allApplication">
							<span>{{ $t("common.allApplication") }}</span>
						</div>
						<div @click="moreApplication" class="more mouse">
							<span>{{ $t("common.more") }}</span>
						</div>
					</div>
					<div class="content mouse">
						<div @click="toCreate" class="content1">
							<el-button icon="el-icon-plus" type="text">{{
									$t("common.createApplication")
								}}
							</el-button>
						</div>

						<div
								class="content2"
								v-for="(item, index) in allApplicationList"
								:key="item.id"
						>
							<span class="title" :title="item.title" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.title }}</span>
							<span class="time">{{ item.applyTime }}</span>
							<!--<span class="type">{{ defineType }}</span>-->
							<span
									v-if="item.applyTypeName === '公文'"
									class="type"
							>{{ $i18n.locale == "zh" ? "公文" : "Document" }}</span
							>
							<span
									v-if="item.applyTypeName === '活动方案'"
									class="type"
							>{{ $i18n.locale == "zh" ? "活动方案" : "Activity Plan" }}</span
							>
							<span
									v-if="item.applyTypeName === '意见与建议'"
									class="type"
							>{{ $i18n.locale == "zh" ? "意见与建议" : "Comments And Suggestions" }}</span
							>
							<span
									v-if="item.applyTypeName === '活动方案'"
									class="type"
							>{{ $i18n.locale == "zh" ? "活动方案" : "Activity、 release" }}</span
							>
							<span
									v-if="item.applyTypeName === '工作计划/总结'"
									class="type"
							>{{ $i18n.locale == "zh" ? "工作计划/总结" : "Work Plan/ Conclusion" }}</span
							>
							<span
									v-if="item.applyTypeName === '委员会资料发布'"
									class="type"
							>{{ $i18n.locale == "zh" ? "委员会资料发布" : "Committee Information Releases" }}</span
							>
							<!-- <span class="finish">{{ item.reserveThree }}</span> -->
							<!--<span
									v-if="item.reserveThree === '驳回'"
									style="color: #f01834"
									class="finish"
							>{{ $i18n.locale == "zh" ? "驳回" : "Reject" }}</span
							>
							<span
									v-if="item.reserveThree === '通过'"
									style="color: #58c52a"
									class="finish"
							>{{ $i18n.locale == "zh" ? "通过" : "Pass" }}</span
							>
							<span
									v-if="item.reserveThree === '审批中'"
									style="color: #ef992a"
									class="finish"
							>{{ $i18n.locale == "zh" ? "审批中" : "Auditing" }}</span
							>
							<span
									v-if="item.reserveThree === '撤回'"
									style="color: #f01834"
									class="finish"
							>{{ $i18n.locale == "zh" ? "撤回" : "Recall" }}</span
							>-->

							<div>
								<img
										class="audit"
										v-if="item.reserveThree === '驳回'"
										:src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/驳回.png' :'@/assets/img/committeeWorkSpace/_Reject.png' )"
										alt=""
								/>
								<img
										class="audit"
										v-if="item.reserveThree === '通过'"
										:src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/已完成.png' :'@/assets/img/committeeWorkSpace/_Pass.png' )"
										alt=""
								/>
								<img
										class="audit"
										v-if="item.reserveThree === '审批中'"
										:src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/待审批.png' :'@/assets/img/committeeWorkSpace/_Auditing.png' )"
										alt=""
								/>
								<img
										class="audit"
										v-if="item.reserveThree === '撤回'"
										:src="require($i18n.locale == 'zh' ? '@/assets/img/committeeWorkSpace/撤回.png' :'@/assets/img/committeeWorkSpace/_Recall.png' )"
										alt=""
								/>
							</div>
							<div class="detail">
                <span class="toView" @click="detail(item)">{{
		                $t("common.checkDetails")
	                }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="centerLeft2 mouse">
					<div class="top">
						<div class="top1"></div>
						<div class="top2"></div>
						<div class="allApplication">
							<i
									:class="titleIndex == 1 ? 'title1' : 'title2'"
									@click="changeTitle(1)"
									style="
                  font-size: 16px;
                  line-height: 22px;
                  font-weight: 700;
                  font-family: 'PingFang SC';
                  font-style: normal;
                "
							>{{ $t("common.committeeOfficial") }}</i
							>
						</div>
						<div :class="{lineVertical:isZh,lineVertical1:!isZh}"></div>
<!--						<div :class="isZh ? 'lineVertical' : 'lineVertical1'"></div>-->
						<div :class="isZh ? 'notice' : 'notice1'">
							<i
									:class="titleIndex == 2 ? 'title1' : 'title2'"
									@click="changeTitle(2)"
									style="
                  font-size: 16px;
                  line-height: 22px;
                  font-weight: 700;
                  font-family: 'PingFang SC';
                  font-style: normal;
                "
							>{{ $t("common.Notice") }}</i
							>
						</div>
						<div @click="moreNotice" class="more">
							<span>{{ $t("common.more") }}</span>
						</div>
					</div>
					<div>
						<div v-show="titleIndex == 1" class="center">
							<span v-if="isShowOfficialDocument">
								<span class="leftCheck3"></span>
							  <span class="leftCheck4"></span>
								<span class="leftCheck5"></span>
							</span>
							<div
									v-for="(item, index) in commissionDocumentsList"
									:key="index"
									class="list"
									@click="officialDocumentDetail(item)"
							>
                <span
		                class="leftTitle"
		                style="
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ item.title }}</span
                >
								<span class="rightTime1"> {{ item.releaseTime }}</span>
							</div>
						</div>
						<div v-show="titleIndex == 2" class="center">
							<span v-if="isShowNotice">
								<span class="leftCheck3"></span>
								<span class="leftCheck4"></span>
								<span class="leftCheck5"></span>
							</span>
							<div
									@click="noticeDetails(item)"
									v-for="(item, index) in announcementsList"
									:key="index"
									class="list"
							>
                <span
		                class="leftTitle"
		                style="
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ item.title }}</span
                >
								<span class="rightTime1"> {{ item.releaseTime }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="centerLeft3 mouse">
					<div class="top">
						<div class="top1"></div>
						<div class="top2"></div>
						<div class="allApplication">
							<span>{{ $t("common.opinionsSuggestions") }}</span>
						</div>
						<div @click="moreComments" class="more">
							<span>{{ $t("common.more") }}</span>
						</div>
					</div>
					<div class="center">
           <span v-if="isShowSuggest">
	           <span class="leftCheck"></span>
            <span class="leftCheck1"></span>
            <span class="leftCheck2"></span>
           </span>
						<!--						<span style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; ">暂无数据</span>-->
						<div
								v-for="(item, index) in opinionsSuggestionsList"
								:key="index"
								class="list"
						>
              <span @click="comments(item)" class="leftTitle1">
                {{ item.title }}</span
              >
							<span
									v-if="item.sendBySelf === '0'"
									style="margin-left: 10px"
									class="myRecieve"
							>{{ $i18n.locale == "zh" ? "我接收" : "Receive" }}</span
							>
							<span
									v-if="item.sendBySelf === '1'"
									style="margin-left: 10px"
									class="mySubmit"
							>{{ $i18n.locale == "zh" ? "我提交" : "Submit" }}</span
							>
							<span class="rightTime"> {{ item.createDate }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="centerRight1 mouse">
					<div class="top">
						<div class="top1"></div>
						<div class="top2"></div>
						<div class="allApplication">
							<span>{{ $t("common.convenientNavigation") }}</span>
						</div>
					</div>
					<div class="content">
						<div @click="myApplication" class="top1">
							<img src="@/assets/img/committeeWorkSpace/申请@2x.png" alt=""/>
							<span style="margin-top: 3px">{{
									$t("common.myApplication")
								}}</span>
						</div>
						<div @click="allInformation" class="top2">
							<img
									src="@/assets/img/committeeWorkSpace/全部资料@2x.png"
									alt=""
							/>
							<span>{{ $t("common.allInformation") }}</span>
						</div>
						<div @click="interactiveMessage" class="bottom1">
							<img src="@/assets/img/committeeWorkSpace/组 51@2x.png" alt=""/>
							<span>{{ $t("common.interactiveMessage") }}</span>
						</div>
						<div @click="interactiveMessage" v-if="flag" class="bottom1" style="top: 100px;left: 120px;font-size: 90px;color: red;">
							<span>.</span>
						</div>
						<div @click="onlineMeet" class="bottom2">
							<img
									src="@/assets/img/committeeWorkSpace/在线会议@2x.png"
									alt=""
							/>
							<span>{{ $t("common.onlineMeeting") }}</span>
						</div>
					</div>
				</div>
				<div class="centerRight2 mouse">
					<div class="top">
						<div class="top1"></div>
						<div class="top2"></div>
						<div class="allApplication">
							<span>{{ $t("common.organizationalStructure") }}</span>
						</div>
					</div>
					<div class="rightContent">
						<el-card>
							<el-tree
									style="font-size: 18px"
									:default-expand-all="true"
									:data="treeList"
									:props="defaultProps"
									@node-click="handleNodeClick"
							>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span
		                  style="margin-right: 3px"
		                  v-if="data.types"
		                  class="group"
                  ></span>
	                <!-- 父级icon -->
                  <span style="margin-right: 3px" v-if="data.param"></span>
	                <!-- 子集icon -->
                  <span v-else class="renwu"></span>
                  <span>{{ node.label }}</span>

                  <span v-if="data.type === '3'">
                    <span v-show="data.dropdownShow">
                      <i
		                      style="margin-left: 10px; font-size: 22px"
		                      class="el-icon-s-home"
                      ></i>
                      <i
		                      style="margin: 0 3px; font-size: 22px"
		                      class="el-icon-user"
                      ></i>
                      <i
		                      style="margin: 0 3px; font-size: 22px"
		                      class="el-icon-edit-outline"
                      ></i>
                      <i style="font-size: 22px" class="el-icon-delete"></i>
                    </span>
                  </span>
                </span>
							</el-tree>
						</el-card>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	getCommitteeAllApplication,
	getNotificationList,
	getOpinionTheSuggestionList,
	getOrganize,
} from "@/api/committee/committeeWorkSpace";
import {getAccept} from '@/api/committee/interactive';
// import { getOrganize } from "@/api/committee/interactive";
import _ from "lodash";
export default {
	name: "CommitteeWorkSpace",
	data() {
		return {
			timer:null,//定时器
			titleIndex: "1",
			islogin: true,
			flag:undefined,
			allApplicationList: [],
			defineType: "",
			commissionDocumentsList: [],
			announcementsList: [],
			opinionsSuggestionsList: [],
			treeList: [],
			treeListEn: [],
			defaultProps: {
				children: "param",
				label: "name",
			},
			isZh: null,
			isShowSuggest: null,
			isShowOfficialDocument: null,
			isShowNotice: null
		};
	},
	watch: {
		// "$i18n.locale": {
		// 	handler: function () {
		// 	  debugger;
		// 		this.isZh = !this.isZh;
		// 	},
		// 	deep: true,
    //
		// },
		"$i18n.locale"() {
      this.getTree();
      this.isZh = !this.isZh;
		},
	},
	mounted() {
		this.refreshmessage();
		let language = window.localStorage.getItem("locale");
		if (language == "zh") {
			this.isZh = true;
		} else {
			this.isZh = false;
		}
		window.scrollTo(0, 0);
		this.accessToAllApplications();

		this.timer = setInterval(()=>{
			// 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
			this.refreshmessage();
		}, 5000) // 每五秒执行1次
	},
	destroyed() {
		//清除多次执行定时器
		clearInterval(this.timer)
	},
	methods: {

		refreshmessage(){
			let params={
				frontOrBack:2
			}
			getAccept(params).then(res=>{
				res.data.page.forEach((item,index)=>{
					if(item.unReadCount!=0){
						this.flag=true;
						return;
					}
				})
			})
		},

		detail(param) {
			console.log(param);
			if (param.reserveTwo == 2) {
				var params = {
					name: "approvalfinish",
					type: false,
					detailids: param.id,
					flag: 1,
				};
				this.$emit("applicationType", params);
			}
			if (param.reserveTwo == 5) {
				var params = {
					name: "withdrawdetail",
					type: false,
					detailids: param.id,
					flag: 1,
				};
				this.$emit("applicationType", params);
			}
			if (
					param.reserveTwo == 6 ||
					param.reserveTwo == 7 ||
					param.reserveTwo == 10 ||
					param.reserveTwo == 11
			) {
				var params = {
					name: "approvaldetail",
					type: false,
					detailids: param.id,
					flag: 1,
				};
				this.$emit("applicationType", params);
			}
			if (param.reserveTwo == 8 || param.reserveTwo == 9) {
				var params = {
					name: "nopassdetail",
					type: false,
					detailids: param.id,
					flag: 1,
				};
				this.$emit("applicationType", params);
			}
		},
		changeTitle(i) {
			this.titleIndex = i;
			console.log(i);
			// this.toObtainListDocumentNotification();
		},
		// changeTitle: _.debounce(function (i) {
		// 	this.titleIndex = i;
		// 	this.toObtainListDocumentNotification();
		// }, 2000),
		toCreate() {
			/* this.$router.push("Submitapplication");*/
			var params = {
				name: "submitapplication",
				type: false,
				flag: 1,
				/*      category: "3",*/
			};
			this.$emit("applicationType", params);
		},
		initData() {
			// this.accessToAllApplications();
			this.getTree();
			this.toObtainListDocumentNotification();
			this.toObtainListViewsSuggestions();
		},
		// 获取全部申请
		accessToAllApplications() {
			getCommitteeAllApplication(1, 5, "", "").then((res) => {
				this.allApplicationList = res.data.nrcApplyQuerys;
				if(this.allApplicationList.length > 0){
					this.allApplicationList.forEach((item) => {
						switch (item.applyType) {
							case "1":
								this.defineType = "活动方案";
								item.applyTypeName = "活动方案";
								break;
							case "2":
								this.defineType = "意见与建议";
								item.applyTypeName = "意见与建议";
								break;
							case "3":
								this.defineType = "活动方案";
								item.applyTypeName = "活动方案";
								break;
							case "4":
								this.defineType = "工作计划/总结";
								item.applyTypeName = "工作计划/总结";
								break;
							case "5":
								this.defineType = "公文";
								item.applyTypeName = "公文";
								break;
							case "6":
								this.defineType = "委员会资料发布";
								item.applyTypeName = "委员会资料发布";
								break;
						}
					});
				}

				this.initData();
			});
		},
		// 获取公文通知列表
		toObtainListDocumentNotification() {
			// var params = this.titleIndex;
			// if (params === "1") {
			// 	getNotificationList(params, "1", "").then((res) => {
			// 		if (JSON.stringify(res.data) != "{}") {
			// 			this.commissionDocumentsList =
			// 					res.data.nrcCommitteeDocumentAnnouncements.slice(0, 3);
			// 			this.isShowOfficialDocument = true
			// 		} else {
			// 			this.isShowOfficialDocument = false
			// 		}
			// 	});
			// } else {
			// 	getNotificationList(params, "1", "").then((res) => {
			// 		if (JSON.stringify(res.data) != "{}") {
			// 			this.announcementsList =
			// 					res.data.nrcCommitteeDocumentAnnouncements.slice(0, 3);
			// 			this.isShowNotice = true
			// 		} else {
			// 			this.isShowNotice = false
			// 		}
			//
			// 	});
			// }
			getNotificationList("1", "1", "").then((res) => {
				if (JSON.stringify(res.data) != "{}") {
					this.commissionDocumentsList =
							res.data.nrcCommitteeDocumentAnnouncements.slice(0, 3);
					this.isShowOfficialDocument = true
				} else {
					this.isShowOfficialDocument = false
				}
			});
			getNotificationList("2", "1", "").then((res) => {
				if (JSON.stringify(res.data) != "{}") {
					this.announcementsList =
							res.data.nrcCommitteeDocumentAnnouncements.slice(0, 3);
					this.isShowNotice = true
				} else {
					this.isShowNotice = false
				}
			});
		},

		// 获取意见与建议列表
		toObtainListViewsSuggestions() {
			var params = "1";
			getOpinionTheSuggestionList(params, "", "").then((res) => {
				if (JSON.stringify(res.data) != "{}") {
					this.opinionsSuggestionsList = res.data.nrcApplyQuerys.slice(0, 3);
					this.isShowSuggest = true
					console.log(res);
				} else {
					this.isShowSuggest = false
				}
			});
		},
		// 公文详情
		officialDocumentDetail(item) {
			var params = {
				name: "noticeDetail",
				type: false,
				id: item.id,
			};
			this.$emit("applicationType", params);
		},

		// 通告详情
		noticeDetails(item) {
			var params = {
				name: "noticeDetail",
				type: false,
				id: item.id,
			};
			this.$emit("applicationType", params);
		},

		// 右侧树
		getTree() {
			let params = {
				frontOrBack: 2,
			};
			getOrganize(params).then((res) => {
				let treelist = res.data.page;
				if(treelist.length > 0){
                    treelist.forEach((item, index) => {
                        item.id = item.id;
                        if(this.$i18n.locale == 'en'){
                            item.name = item.committeeNameEn;
                        }else {
                            item.name = item.committeeName;
                        }
                        if (item.committeeType) {
                            item.committeeType = item.committeeType;
                        }

                        /*if (item.nrcCommitteeUserList) {
                            item.nrcCommitteeUserList = item.nrcCommitteeUserList;
                            item.nameid = item.id;
                        }*/
                        let obj = {};
                        obj.param=[]

                        if(item.nrcCommitteeUserList){
                            item.nrcCommitteeUserList.forEach(item4=>{
                                let param1={}
                                param1.id=item4.id
                                if(this.$i18n.locale == 'en'){
                                    param1.committeeName=item.committeeNameEn;
                                }else {
                                    param1.committeeName=item.committeeName;
                                }
                                param1.type=1
                                if(this.$i18n.locale == 'en'){
                                    param1.name=item4.nameEn
                                }else {
                                    param1.name=item4.name
                                }
                                param1.isInOffice=item4.isInOffice
                                param1.duty=item4.duty
                                if(item4.committeeType){
                                    param1.committeeType=item4.committeeType
                                }
                                (obj.param).push(param1)
                            })
                        }
                        item.type = 0;
                        item.types = 0;
                        item.param = [];
                        item.param = (obj.param)
                        if (item.sonList.length > 0) {
                            item.sonList.forEach((item2) => {
                                let param = {};
                                param.id = item2.id;
                                param.type = 0;

                                if (item2.committeeName) {
                                    if(this.$i18n.locale == 'en'){
                                        param.name = item2.committeeNameEn;
                                    }else {
                                        param.name = item2.committeeName;
                                    }
                                }
                                if (item2.committeeType) {
                                    param.committeeType = item2.committeeType;
                                }
                                param.param = [];

                                if (item2.nrcCommitteeUserList) {
                                    item2.nrcCommitteeUserList.forEach((item3) => {
                                        let param1 = {};
                                        param1.id = item3.id;
                                        param1.type = 1;
                                        param1.types = 0;
                                        if(this.$i18n.locale == 'en'){
                                            param1.name=item3.nameEn
                                        }else {
                                            param1.name=item3.name
                                        }
                                        param1.isInOffice = item3.isInOffice;
                                        if(this.$i18n.locale == 'en'){
                                            param1.committeeName = item2.committeeNameEn;
                                        }else {
                                            param1.committeeName = item2.committeeName;
                                        }
                                        param1.duty = item3.duty;
                                        if (item3.committeeType) {
                                            param1.committeeType = item3.committeeType;
                                        }

                                        param.param.push(param1);
                                    });
                                } else {
                                    param.types = 1;
                                }
                                item.param.push(param);
                            });
                        }
                    });
                }


				this.treeList = treelist;
			});
		},

		// 提交申请
		myApplication() {
			var params = {
				name: "application",
				type: true,
			};
			this.$emit("applicationType", params);
		},
		// 全部资料
		allInformation() {
			var params = {
				name: "allInformation",
				type: true,
			};
			this.$emit("applicationType", params);
		},
		// 互动留言
		interactiveMessage() {
			var params = {
				name: "interactive",
				type: true,
			};
			this.$emit("applicationType", params);
		},
		// 更多申请
		moreApplication() {
			var params = {
				name: "application",
				type: false,
			};
			this.$emit("applicationType", params);
		},
		// 更多建议
		moreComments() {
			var params = {
				name: "comments",
				type: false,
			};
			this.$emit("applicationType", params);
		},
		// 建议
		comments(item) {
			console.log(item);
			if (item.sendBySelf === "0") {
				var params = {
					name: "receiveComment",
					type: false,
					id: item.id,
				};
				this.$emit("applicationType", params);
			} else {
				var params = {
					name: "submitComment",
					type: false,
					id: item.id,
				};
				this.$emit("applicationType", params);
			}
		},
		// 更多通告
		moreNotice() {
			if (this.titleIndex == "2") {
				var params = {
					name: "noticeList",
					type: false,
				};
				this.$emit("applicationType", params);
			} else {
				var params = {
					name: "documentList",
					type: false,
				};
				this.$emit("applicationType", params);
			}
		},
		// 在线会议
		onlineMeet() {
			// this.$router.push("onlineMeeting");
			let routerUrl = this.$router.resolve({
				path: "/onlineMeeting",
			});
			window.open(routerUrl.href, "_blank");
		},
		handleNodeClick() {
		},
	},
	computed: {},
};
</script>
<style scoped>
.spaceImg {
	width: 1200px;
	height: 324px;
	background: #6a9ce7;
	position: relative;
}

.topTitle {
	position: absolute;
	/* width: 356px;
	height: 70px; */
	left: 102px;
	top: 21px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 60px;
	line-height: 70px;
	color: #ffffff;
}

.topContent1 {
	position: absolute;
	width: 450px;
	height: 78px;
	left: 102px;
	top: 162px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 25px;
	line-height: 29px;
	color: #ffffff;
}

.topContent2 {
	position: absolute;
	width: 450px;
	height: 78px;
	left: 102px;
	top: 212px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 25px;
	line-height: 29px;
	color: #ffffff;
}

.colorGreen {
	color: #58c52a;
}

.mouse {
	cursor: pointer;
}

.rightContent {
	position: absolute;
	left: 10px;
	top: 90px;
	width: 300px;
	height: 540px;
	overflow-y: auto;
}

.mySubmit {
	background: #f6ffed;
	border: 0.5px solid #b7eb8f;
	border-radius: 1px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 8px;
	line-height: 11px;
	color: #94db5d;
}

.myRecieve {
	background: #e6f7ff;
	border: 0.5px solid #91d5ff;
	border-radius: 1px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 8px;
	line-height: 11px;
	color: #64bef7;
}

.box1 {
	padding: 0 0 20px 0;
	position: absolute;
}

.center {
	display: flex;
}

.topImg img {
	display: inline-block;
	width: 1200px;
	height: 324px;
}

.centerLeft1 {
	height: 419px;
	width: 850px;
	border-radius: 0px;
	background: #fff;
}

.left {
	position: relative;
}

.top .top1 {
	position: absolute;
	width: 5.5px;
	height: 10.5px;
	left: 20px;
	top: 35px;
	background: #376ac7;
	z-index: 1;
}

.top .top2 {
	position: absolute;
	width: 5.5px;
	height: 15px;
	left: 20px;
	top: 35px;
	background: #83bd50;
}

.top .allApplication {
	position: absolute;
	height: 22px;
	left: 34px;
	top: 31px;
}

.top .allApplication span {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #375586;
}

.top .notice {
	position: absolute;
	height: 22px;
	left: 160px;
	top: 32px;
}

.top .notice1 {
	position: absolute;
	height: 22px;
	left: 360px;
	top: 32px;
}

.top .notice span {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: rgba(10, 10, 10, 0.85);
}

.top .more {
	position: absolute;
	height: 16px;
	right: 21px;
	top: 31px;
}

.top .more span {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	color: #4790f7;
}

.content .content1 {
	box-sizing: border-box;
	position: absolute;
	width: 247px;
	height: 149px;
	left: 28px;
	top: 70px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	display: flex;
	justify-content: center;
	align-items: center;
}

.content .content2:nth-of-type(2) {
	box-sizing: border-box;
	width: 247px;
	height: 149px;
	position: absolute;
	left: 302px;
	top: 70px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.content .content2:nth-of-type(3) {
	box-sizing: border-box;
	width: 247px;
	height: 149px;
	position: absolute;
	right: 27px;
	top: 70px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.content .content2:nth-of-type(4) {
	box-sizing: border-box;
	width: 247px;
	height: 149px;
	position: absolute;
	left: 28px;
	top: 239px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.content .content2:nth-of-type(5) {
	box-sizing: border-box;
	width: 247px;
	height: 149px;
	position: absolute;
	left: 302px;
	top: 239px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.content .content2:nth-of-type(6) {
	box-sizing: border-box;
	width: 247px;
	height: 149px;
	position: absolute;
	right: 27px;
	top: 239px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.content .title {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 16px;
	top: 16px;
	right: 14px;
	bottom: 113px;
}

.content .time {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: rgba(0, 0, 0, 0.65);
	position: absolute;
	left: 16px;
	top: 61px;
}

.content .type {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 16px;
	top: 89px;
}

.content .finish {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.85);
	position: absolute;
	right: 16px;
	top: 59px;
}

.content .audit {
	position: absolute;
	right: 5%;
}

.detail {
	position: absolute;
	bottom: 0;
	height: 34px;
	width: 246px;
	border-radius: 0px;
	background: rgba(217, 217, 217, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}

.content .toView {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #274e92;
}

.centerLeft2 {
	position: relative;
	margin-top: 20px;
	height: 177px;
	width: 850px;
	border-radius: 0px;
	background: #fff;
}

.leftCheck3 {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 75px;
	background: #055bdb;
}

.leftCheck4 {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 105px;
	background: #055bdb;
}

.leftCheck5 {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 135px;
	background: #055bdb;
}

.list2 {
	position: absolute;
	left: 52px;
	top: 70px;
}

.lineVertical {
	position: absolute;
	width: 15px;
	height: 0px;
	left: 130px;
	top: 42px;
	border: 1px solid #000000;
	transform: rotate(90deg);
}

.lineVertical1 {
	position: absolute;
	width: 15px;
	height: 0px;
	left: 338px;
	top: 42px;
	border: 1px solid #000000;
	transform: rotate(90deg);
}

.centerLeft3 {
	position: relative;
	margin-top: 20px;
	height: 177px;
	width: 849px;
	border-radius: 0px;
	background: #fff;
}

.list:nth-of-type(1) {
	position: absolute;
	left: 52px;
	top: 70px;
}

.list:nth-of-type(2) {
	position: absolute;
	left: 52px;
	top: 100px;
}

.list:nth-of-type(3) {
	position: absolute;
	left: 52px;
	top: 130px;
}

.leftCheck {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 76px;
	background: #055bdb;
}

.leftCheck1 {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 106px;
	background: #055bdb;
}

.leftCheck2 {
	position: absolute;
	width: 8px;
	height: 8px;
	left: 34px;
	top: 136px;
	background: #055bdb;
}

.list .leftTitle {
	/* height: 177px; */
	display: inline-block;
	width: 500px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(5, 5, 5, 0.85);
}

.list .leftTitle1 {
	/* height: 177px; */
	display: inline-block;
	/* width: 500px; */
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(5, 5, 5, 0.85);
}

.list .rightTime {
	width: 200px;
	height: 20px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 630px;
}

.list .rightTime1 {
	width: 200px;
	height: 20px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 630px;
}

.centerRight1 {
	position: relative;
	height: 182px;
	width: 329px;
	border-radius: 0px;
	background: #fff;
	margin-left: 20px;
}

.centerRight1 .content .top1 {
	position: absolute;
	height: 20px;
	left: 36px;
	top: 87px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #4790f7;
	display: flex;
}

.centerRight1 .content img {
	display: block;
	width: 30px;
	height: 30px;
}

.centerRight1 .content .top2 {
	position: absolute;
	height: 20px;
	left: 194px;
	top: 88px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #4790f7;
	display: flex;
}

.centerRight1 .content .bottom1 {
	position: absolute;
	height: 20px;
	left: 34px;
	top: 138px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #4790f7;
	display: flex;
}

.centerRight1 .content .bottom2 {
	position: absolute;
	height: 20px;
	left: 194px;
	top: 136px;
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #4790f7;
	display: flex;
}

/*  */
.centerRight2 {
	position: relative;
	height: 608px;
	width: 329px;
	border-radius: 0px;
	background: #fff;
	margin-left: 20px;
	margin-top: 20px;
}

.title1 {
	color: #375586;
}

.title2 {
	color: rgba(0, 0, 0, 0.85);
}

::v-deep .el-tree .el-icon-caret-right:before {
	background: url("../../assets/img/nationaIntorduction/zhankai.png") no-repeat 0 3px;
	content: "";
	display: block;
	width: 18px;
	height: 23px;
	font-size: 18px;
	background-size: 18px;
}

::v-deep
.el-tree
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
	background: url("../../assets/img/nationaIntorduction/shousuo.png") no-repeat 0 3px;
	/*content: '';*/
	display: block;
	width: 18px;
	height: 23px;
	font-size: 18px;
	background-size: 18px;
}

::v-deep .el-tree-node__expand-icon.is-leaf::before {
	display: none;
}

.renwu {
	background: url("../../assets/img/nationaIntorduction/renwu.png") no-repeat 0 3px;
	content: "";
	display: inline-block;
	width: 18px;
	height: 20px;
	font-size: 18px;
	background-size: 18px;
}

.group {
	background: url("../../assets/img/nationaIntorduction/group.png") no-repeat 0 3px;
	content: "";
	display: inline-block;
	width: 18px;
	height: 20px;
	font-size: 18px;
	background-size: 18px;
}
img{
  width: 103px;
}
</style>