From ab57988c81e121c406969babfa44f6159449b5c4 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 27 Aug 2024 16:15:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 1095 +++++++++++++++++++++--------------------
 1 file changed, 564 insertions(+), 531 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8b4e168..e15fc62 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,42 +1,41 @@
 <template>
-	<view>
-		<view class="upper-user">
-			<view class="user-lef">
-				<image src="/static/bg1.jpg" mode=""></image>
-			</view>
-			<view class="user-rig">
-				<view>你好！{{ username }}</view>
-				<view>欢迎使用智慧仓储（装备共享平台）</view>
-			</view>
-		</view>
-		<view class="sliders">
-			<view>
-				<h2>{{ todayDatas.dayLeaseNum }}</h2>
-				<span>当日领料</span>
-			</view>
-			<view>
-				<h2>{{ todayDatas.dayBackNum }}</h2>
-				<span>当日退料</span>
-			</view>
-			<view>
-				<h2>{{ todayDatas.dayInputNum }}</h2>
-				<span>当日入库</span>
-			</view>
-			<view>
-				<h2>{{ todayDatas.dayOutNum }}</h2>
-				<span>当日出库</span>
-			</view>
-		</view>
-		<view class="sections">
-			<view 
-				v-for="(part, index) in isUsingList"
-				:key="index"
-				@click="jumpUrl(part.iconMark)"
-			>
-				<image :src="`/static/${part.iconMark}.png`" mode=""></image>
-				<span>{{ part.iconName }}</span>
-			</view>
-			<!-- <view @click="jumpUrl('fetchMaterial')">
+    <view>
+        <view class="upper-user">
+            <view class="user-lef">
+                <image src="/static/bg1.jpg" mode=""></image>
+            </view>
+            <view class="user-rig">
+                <view>你好！{{ username }}</view>
+                <view>欢迎使用智慧仓储（装备共享平台）</view>
+            </view>
+        </view>
+        <view class="sliders">
+            <view>
+                <h2>{{ todayDatas.dayLeaseNum }}</h2>
+                <span>当日领料</span>
+            </view>
+            <view>
+                <h2>{{ todayDatas.dayBackNum }}</h2>
+                <span>当日退料</span>
+            </view>
+            <view>
+                <h2>{{ todayDatas.dayInputNum }}</h2>
+                <span>当日入库</span>
+            </view>
+            <view>
+                <h2>{{ todayDatas.dayOutNum }}</h2>
+                <span>当日出库</span>
+            </view>
+        </view>
+        <view class="sections">
+            <view
+                v-for="(part, index) in isUsingList"
+                :key="index"
+                @click="jumpUrl(part.iconMark)">
+                <image :src="`/static/${part.iconMark}.png`" mode=""></image>
+                <span>{{ part.iconName }}</span>
+            </view>
+            <!-- <view @click="jumpUrl('fetchMaterial')">
 				<image src="/static/领料申请.png" mode=""></image>
 				<span>领料申请</span>
 			</view>
@@ -44,503 +43,537 @@
 				<image src="/static/退料申请.png" mode=""></image>
 				<span>退料申请</span>
 			</view> -->
-		</view>
-		<h4 style="width: 90%; margin: 3vh auto;">待办事项</h4>
-		<view class="wait-do">
-			<view class="llsp" @click="jumpUrl('fetchExam')">
-				<h4>{{ waitList.leaseNum }}</h4>
-				<h5>领料待审批</h5>
-			</view>
-			<view class="tlsp" @click="jumpUrl('exitExam')">
-				<h4>{{ waitList.backNum }}</h4>
-				<h5>退料待审批</h5>
-			</view>
-			<view class="bfsh" @click="jumpUrl('crashExam')">
-				<h4>{{ waitList.scrapNum }}</h4>
-				<h5>报废待审核</h5>
-			</view>
-			<view class="sysh" @click="jumpUrl('testExam')">
-				<h4>{{ waitList.trialNum }}</h4>
-				<h5>试验检验待审核</h5>
-			</view>
-		</view>
-		<h4 style="width: 90%; margin: 3vh auto; display: flex; justify-content: space-between; align-items: center;">
-			<span>通知公告</span>
-			<text @click="seeMore" style="color: #5297FF; font-weight: normal; font-size: 12px;">查看更多>></text>
-		</h4>
-		<view 
-			class="single-notice"
-			v-for="(notice, index) in noticeList"
-			:key="index"
-			@click="noticeDetail(notice.noticeId)"
-		>
-			<view class="notice-lef">
-				<image src="/static/notice.png" mode=""></image>
-			</view>
-			<view class="notice-rig">
-				<h4>{{ notice.noticeTitle }}</h4>
-				<h5>{{ notice.createTime }}</h5>
-			</view>
-		</view>
-		<uni-popup
-			ref="popup" 
-			type="center"
-			:mask-click="false"
-		>
-			<view class="popup">
-				<view class="pop-top">
-					<h4>公告({{ unreadIndex + 1 }}/{{ unreadList.length }})</h4>
-					<uni-icons 
-						style="color: #AAAAAA; font-weight: bold;" 
-						type="closeempty" 
-						@click="closePopup"
-					>
-					</uni-icons>
-				</view>
-				<view 
-					class="unread-notice"
-					v-for="(list, index) in unreadList"
-					:key="index"
-					v-show="index == unreadIndex"
-				>
-					<view class="tit">
-						{{ list.noticeTitle }}
-					</view>
-					<view class="info">
-						<view>发布人：{{ list.createBy }}</view>
-						<view>发布时间：{{ list.createTime }}</view>
-						<view>公告内容：{{ list.noticeContent }}</view>
-					</view>
-					<view 
-						class="read-one"
-						v-show="unreadIndex < unreadList.length - 1"
-						@click="readOneNotice(list.noticeId)"
-					>
-						我知道了
-					</view>
-				</view>
-			</view>
-		</uni-popup>
-	</view>
+        </view>
+        <h4 style="width: 90%; margin: 3vh auto">待办事项</h4>
+        <view class="wait-do">
+            <view
+                class="llsp"
+                @click="jumpUrl('fetchExam')"
+                v-if="
+                    store.includes('service:auditing') || store.includes('*')
+                ">
+                <h4>{{ waitList.leaseNum }}</h4>
+                <h5>领料待审批</h5>
+            </view>
+            <view class="tlsp" @click="jumpUrl('exitExam')">
+                <h4>{{ waitList.backNum }}</h4>
+                <h5>退料待审批</h5>
+            </view>
+            <view class="bfsh" @click="jumpUrl('crashExam')">
+                <h4>{{ waitList.scrapNum }}</h4>
+                <h5>报废待审核</h5>
+            </view>
+            <view class="sysh" @click="jumpUrl('testExam')">
+                <h4>{{ waitList.trialNum }}</h4>
+                <h5>试验检验待审核</h5>
+            </view>
+        </view>
+        <h4
+            style="
+                width: 90%;
+                margin: 3vh auto;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            ">
+            <span>通知公告</span>
+            <text
+                @click="seeMore"
+                style="color: #5297ff; font-weight: normal; font-size: 12px"
+                >查看更多>></text
+            >
+        </h4>
+        <view
+            class="single-notice"
+            v-for="(notice, index) in noticeList"
+            :key="index"
+            @click="noticeDetail(notice.noticeId)">
+            <view class="notice-lef">
+                <image src="/static/notice.png" mode=""></image>
+            </view>
+            <view class="notice-rig">
+                <h4>{{ notice.noticeTitle }}</h4>
+                <h5>{{ notice.createTime }}</h5>
+            </view>
+        </view>
+        <uni-popup ref="popup" type="center" :mask-click="false">
+            <view class="popup">
+                <view class="pop-top">
+                    <h4>公告({{ unreadIndex + 1 }}/{{ unreadList.length }})</h4>
+                    <uni-icons
+                        style="color: #aaaaaa; font-weight: bold"
+                        type="closeempty"
+                        @click="closePopup">
+                    </uni-icons>
+                </view>
+                <view
+                    class="unread-notice"
+                    v-for="(list, index) in unreadList"
+                    :key="index"
+                    v-show="index == unreadIndex">
+                    <view class="tit">
+                        {{ list.noticeTitle }}
+                    </view>
+                    <view class="info">
+                        <view>发布人：{{ list.createBy }}</view>
+                        <view>发布时间：{{ list.createTime }}</view>
+                        <view>公告内容：{{ list.noticeContent }}</view>
+                    </view>
+                    <view
+                        class="read-one"
+                        v-show="unreadIndex < unreadList.length - 1"
+                        @click="readOneNotice(list.noticeId)">
+                        我知道了
+                    </view>
+                </view>
+            </view>
+        </uni-popup>
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				showLoading: false,
-				username: uni.getStorageSync('userInfo').username,
-				noticeList: [],
-				todayDatas: {
-					dayLeaseNum: '',
-					dayBackNum: '',
-					dayInputNum: '',
-					dayOutNum: ''
-				},
-				waitList: {
-					lldsp: '',
-					tldsp: '',
-					bfdsh: '',
-					sydsh: ''
-				},
-				isUsingList: [],
-				percent: '',
-				unreadList: [],
-				unreadIndex: 0
-			}
-		},
-		methods: {
-			seeMore () {
-				uni.navigateTo({
-					url: '/pages/moreNotice/moreNotice'
-				})
-			},
-			noticeDetail (id) {
-				console.log(id);
-				uni.navigateTo({
-					url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`
-				})
-			},
-			jumpUrl (path) {
-				uni.navigateTo({
-					url: `/pages/${path}/${path}`
-				})
-			},
-			extractTextFromHTML(htmlString) {
-			  return htmlString.replace(/<[^>]*>/g, '');
-			},
-			openPopup () {
-				this.$refs.popup.open()
-			},
-			closePopup () {
-				let that = this
-				let noticeArr = []
-				that.unreadList.forEach(item => {
-					noticeArr.push(item.noticeId)
-				})
-				console.log(noticeArr);
-				that.uploadUnNotice(noticeArr)
-				that.$refs.popup.close()
-			},
-			readOneNotice (noticeId) {
-				let that = this
-				let noticeArr = []
-				noticeArr.push(noticeId)
-				that.uploadUnNotice(noticeArr)
-				that.unreadIndex++
-			},
-			uploadUnNotice (arr) {
-				let that = this
-				that.$api.index.uploadNotice({
-					noticeId: arr,
-					userId: uni.getStorageSync('userInfo').userid
-				}).then(res => {
-					console.log(res);
-				}).catch(err => {
-					console.log(err);
-				})
-			}
-		},
-		onShow() {
-			console.log(uni.getStorageSync('token'));
-			console.log(uni.getStorageSync('userInfo'));
-			let that = this
-			that.unreadIndex = 0
-			that.noticeList = []
-			// 获取公告内容
-			that.$api.index.noticeCont().then(res => {
-				console.log(res);
-				if (res.data.code == 200) {
-					that.noticeList = res.data.data.slice(0, 5)
-				} else if (res.data.code == 401) {
-					uni.showToast({
-						icon: 'none',
-						title: '登录状态已过期，请重新登录！',
-						success: () => {
-							uni.removeStorageSync('token')
-							uni.removeStorageSync('userInfo')
-							uni.reLaunch({
-								url: '/pages/login/login'
-							})
-						}
-					})
-				}
-			}).catch(err => {
-				console.log(err);
-			})
-			// 获取待办事项
-			that.$api.index.waitDo().then(res => {
-				console.log(res);
-				if (res.data.code == 200) {
-					that.waitList = res.data.data
-				}
-			}).catch(err => {
-				console.log(err);
-			})
-			// 获取关键数据
-			that.$api.index.keyData().then(res => {
-				console.log(res);
-				if (res.data.code == 200) {
-					that.todayDatas = res.data.data
-				}
-			}).catch(err => {
-				console.log(err);
-			})
-			// 获取已用模块
-			that.$api.authManage.fetchIsUsing({
-				userId: uni.getStorageSync('userInfo').userid
-			}).then(res => {
-				console.log(res);
-				if (res.data.code == 200) {
-					that.isUsingList = res.data.data
-					console.log(that.isUsingList);
-				}
-			}).catch(err => {
-				console.log(err);
-			})
-			// 获取公司名称
-			let dept = uni.getStorageSync('userInfo').sysUser.dept.ancestors
-			if (dept == null) {
-				uni.setStorageSync('companyName', '')
-			} else {
-				that.$api.index.fetchCompanyName({
-					ancestors: dept
-				}).then(res => {
-					console.log(res);
-					if (res.data.code == 200) uni.setStorageSync('companyName', res.data.msg)
-				}).catch(err => {
-					console.log(err);
-				})
-			}
-			// 获取通知公告
-			that.$api.index.fetchNotice().then(res => {
-				console.log(res);
-				if (res.data.code == 200) {
-					if (res.data.data.length != 0) {
-						res.data.data.forEach(item => {
-							item.noticeContent = that.extractTextFromHTML(item.noticeContent)
-						})
-						that.unreadList = res.data.data
-						console.log(that.unreadList);
-						that.openPopup()
-					} else {
-						console.log('无未读公告');
-					}
-				} else {
-					uni.showToast({
-						icon: 'none',
-						title: res.data.msg
-					})
-				}
-			}).catch(err => {
-				console.log(err);
-			})
-		},
-		onNavigationBarButtonTap(e) {
-			console.log(e);
-			if (e.text == '权限') {
-				uni.navigateTo({
-					url: '/pages/authManage/authManage'
-				})
-			} else if (e.text == '扫一扫') {
-				uni.scanCode({
-					success: (res) => {
-						console.log(res);
-						const fixedRes = res.result.split('=')[1]
-						console.log(fixedRes);
-						uni.navigateTo({
-							url: `/pages/indexScan/indexScan?scan=${fixedRes}`
-						})
-					}
-				})
-			}
-		}
-	}
+    import store from "../../store/user";
+    export default {
+        data() {
+            return {
+                showLoading: false,
+                username: uni.getStorageSync("userInfo").username,
+                noticeList: [],
+                todayDatas: {
+                    dayLeaseNum: "",
+                    dayBackNum: "",
+                    dayInputNum: "",
+                    dayOutNum: "",
+                },
+                waitList: {
+                    lldsp: "",
+                    tldsp: "",
+                    bfdsh: "",
+                    sydsh: "",
+                },
+                isUsingList: [],
+                percent: "",
+                unreadList: [],
+                unreadIndex: 0,
+                store: store.state.permissions || [],
+            };
+        },
+        methods: {
+            seeMore() {
+                uni.navigateTo({
+                    url: "/pages/moreNotice/moreNotice",
+                });
+            },
+            noticeDetail(id) {
+                console.log(id);
+                uni.navigateTo({
+                    url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`,
+                });
+            },
+            jumpUrl(path) {
+                uni.navigateTo({
+                    url: `/pages/${path}/${path}`,
+                });
+            },
+            extractTextFromHTML(htmlString) {
+                return htmlString.replace(/<[^>]*>/g, "");
+            },
+            openPopup() {
+                this.$refs.popup.open();
+            },
+            closePopup() {
+                let that = this;
+                let noticeArr = [];
+                that.unreadList.forEach((item) => {
+                    noticeArr.push(item.noticeId);
+                });
+                console.log(noticeArr);
+                that.uploadUnNotice(noticeArr);
+                that.$refs.popup.close();
+            },
+            readOneNotice(noticeId) {
+                let that = this;
+                let noticeArr = [];
+                noticeArr.push(noticeId);
+                that.uploadUnNotice(noticeArr);
+                that.unreadIndex++;
+            },
+            uploadUnNotice(arr) {
+                let that = this;
+                that.$api.index
+                    .uploadNotice({
+                        noticeId: arr,
+                        userId: uni.getStorageSync("userInfo").userid,
+                    })
+                    .then((res) => {
+                        console.log(res);
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            },
+        },
+        onShow() {
+            console.log(uni.getStorageSync("token"));
+            console.log(uni.getStorageSync("userInfo"));
+            let that = this;
+            that.unreadIndex = 0;
+            that.noticeList = [];
+            // 获取公告内容
+            that.$api.index
+                .noticeCont()
+                .then((res) => {
+                    console.log(res);
+                    if (res.data.code == 200) {
+                        that.noticeList = res.data.data.slice(0, 5);
+                    } else if (res.data.code == 401) {
+                        uni.showToast({
+                            icon: "none",
+                            title: "登录状态已过期，请重新登录！",
+                            success: () => {
+                                uni.removeStorageSync("token");
+                                uni.removeStorageSync("userInfo");
+                                uni.reLaunch({
+                                    url: "/pages/login/login",
+                                });
+                            },
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+            // 获取待办事项
+            that.$api.index
+                .waitDo()
+                .then((res) => {
+                    console.log(res);
+                    if (res.data.code == 200) {
+                        that.waitList = res.data.data;
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+            // 获取关键数据
+            that.$api.index
+                .keyData()
+                .then((res) => {
+                    console.log(res);
+                    if (res.data.code == 200) {
+                        that.todayDatas = res.data.data;
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+            // 获取已用模块
+            that.$api.authManage
+                .fetchIsUsing({
+                    userId: uni.getStorageSync("userInfo").userid,
+                })
+                .then((res) => {
+                    console.log(res);
+                    if (res.data.code == 200) {
+                        that.isUsingList = res.data.data;
+                        console.log(that.isUsingList);
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+            // 获取公司名称
+            let dept = uni.getStorageSync("userInfo").sysUser.dept.ancestors;
+            if (dept == null) {
+                uni.setStorageSync("companyName", "");
+            } else {
+                that.$api.index
+                    .fetchCompanyName({
+                        ancestors: dept,
+                    })
+                    .then((res) => {
+                        console.log(res);
+                        if (res.data.code == 200)
+                            uni.setStorageSync("companyName", res.data.msg);
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+            // 获取通知公告
+            that.$api.index
+                .fetchNotice()
+                .then((res) => {
+                    console.log(res);
+                    if (res.data.code == 200) {
+                        if (res.data.data.length != 0) {
+                            res.data.data.forEach((item) => {
+                                item.noticeContent = that.extractTextFromHTML(
+                                    item.noticeContent
+                                );
+                            });
+                            that.unreadList = res.data.data;
+                            console.log(that.unreadList);
+                            that.openPopup();
+                        } else {
+                            console.log("无未读公告");
+                        }
+                    } else {
+                        uni.showToast({
+                            icon: "none",
+                            title: res.data.msg,
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        onNavigationBarButtonTap(e) {
+            console.log(e);
+            if (e.text == "权限") {
+                uni.navigateTo({
+                    url: "/pages/authManage/authManage",
+                });
+            } else if (e.text == "扫一扫") {
+                uni.scanCode({
+                    success: (res) => {
+                        console.log(res);
+                        const fixedRes = res.result.split("=")[1];
+                        console.log(fixedRes);
+                        uni.navigateTo({
+                            url: `/pages/indexScan/indexScan?scan=${fixedRes}`,
+                        });
+                    },
+                });
+            }
+        },
+    };
 </script>
 
 <style lang="scss">
-	body{
-		background: url('/static/bgd.png');
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-	}
-	.upper-user{
-		width: 85%;
-		margin: 8vh auto;
-		margin-bottom: 0;
-		box-sizing: border-box;
-		padding: 15rpx;
-		display: flex;
-		.user-lef{
-			width: 15%;
-			height: 6vh;
-			border-radius: 50%;
-			overflow: hidden;
-			image{
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.user-rig{
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-			box-sizing: border-box;
-			padding-left: 20rpx;
-			view{
-				width: 100%;
-				color: #fff;
-			}
-			view:first-child{
-				font-size: 18px;
-			}
-			view:last-child{
-				font-size: 12px;
-				letter-spacing: 6rpx;
-			}
-		}
-	}
-	.sliders{
-		width: 85%;
-		height: 5vh;
-		margin: 4vh auto;
-		margin-bottom: 2vh;
-		border-radius: 15rpx 15rpx 0 0;
-		background: rgba(255, 255, 255, 0.1);
-		backdrop-filter: blur(2px);
-		border: 1px solid #B3D3FF;
-		padding: 1.3vh 0;
-		display: flex;
-		view{
-			width: 25%;
-			height: 100%;
-			border-right: 1px solid #CDE2FF;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-			align-items: center;
-			color: #fff;
-			h2{
-				font-size: 22px;
-			}
-			span{
-				font-size: 12px;
-			}
-		}
-		view:last-child{
-			border-right: none;
-		}
-	}
-	.sections{
-		width: 90%;
-		margin: 15rpx auto;
-		display: flex;
-		flex-wrap: wrap;
-		box-sizing: border-box;
-		padding-top: 2vh;
-		view{
-			width: 25%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin-bottom: 2vh;
-			image{
-				width: 50%;
-				height: 6vh;
-				margin-bottom: 10rpx;
-			}
-			span{
-				font-size: 20rpx;
-			}
-		}
-	}
-	.wait-do{
-		width: 90%;
-		margin: 0 auto;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-around;
-		view{
-			width: 48%;
-			height: 13vh;
-			margin-bottom: 15rpx;
-			border-radius: 15rpx;
-			box-sizing: border-box;
-			padding: 25rpx;
-			h4{
-				margin-bottom: 5rpx;
-				font-size: 22px;
-			}
-			h5{
-				font-weight: normal;
-				font-size: 14px;
-			}
-		}
-		.llsp{
-			background: url('/static/llsp.png');
-			background-repeat: no-repeat;
-			background-size: 100% 100%;
-		}
-		.tlsp{
-			background: url('/static/tlsp.png');
-			background-repeat: no-repeat;
-			background-size: 100% 100%;
-		}
-		.bfsh{
-			background: url('/static/bfsh.png');
-			background-repeat: no-repeat;
-			background-size: 100% 100%;
-		}
-		.sysh{
-			background: url('/static/sysh.png');
-			background-repeat: no-repeat;
-			background-size: 100% 100%;
-		}
-	}
-	.single-notice{
-		width: 100%;
-		margin: 0 auto;
-		border-bottom: 1px solid #DEE3EA;
-		box-sizing: border-box;
-		padding: 20rpx 5%;
-		display: flex;
-		background-color: #fff;
-		.notice-lef{
-			width: 12%;
-			height: 5.5vh;
-			border-radius: 50%;
-			overflow: hidden;
-			image{
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.notice-rig{
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-			box-sizing: border-box;
-			padding-left: 20rpx;
-			h4{
-				font-size: 14px;
-			}
-			h5{
-				font-size: 12px;
-				color: #8F9298;
-				font-weight: normal;
-			}
-		}
-	}
-	.popup{
-		width: 80vw;
-		height: 90vh;
-		background-color: #fff;
-		border-radius: 15rpx;
-		overflow-y: auto;
-		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
-		.pop-top{
-			width: 100%;
-			height: 5vh;
-			box-sizing: border-box;
-			padding: 0 25rpx;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-		.unread-notice{
-			width: 85%;
-			margin: 40rpx auto;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			.tit{
-				font-size: 20px;
-				font-weight: bold;
-				margin-bottom: 20rpx;
-			}
-			.info{
-				width: 100%;
-				view{
-					margin-bottom: 15rpx;
-				}
-				view:last-child{
-					margin-bottom: 0;
-				}
-			}
-			.read-one{
-				width: 40%;
-				margin: 40rpx auto;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				box-sizing: border-box;
-				border-radius: 15rpx;
-				padding: 10rpx 0;
-				background-color: #3788FF;
-				color: #fff;
-			}
-		}
-	}
+    body {
+        background: url("/static/bgd.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+    .upper-user {
+        width: 85%;
+        margin: 8vh auto;
+        margin-bottom: 0;
+        box-sizing: border-box;
+        padding: 15rpx;
+        display: flex;
+        .user-lef {
+            width: 15%;
+            height: 6vh;
+            border-radius: 50%;
+            overflow: hidden;
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .user-rig {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            box-sizing: border-box;
+            padding-left: 20rpx;
+            view {
+                width: 100%;
+                color: #fff;
+            }
+            view:first-child {
+                font-size: 18px;
+            }
+            view:last-child {
+                font-size: 12px;
+                letter-spacing: 6rpx;
+            }
+        }
+    }
+    .sliders {
+        width: 85%;
+        height: 5vh;
+        margin: 4vh auto;
+        margin-bottom: 2vh;
+        border-radius: 15rpx 15rpx 0 0;
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(2px);
+        border: 1px solid #b3d3ff;
+        padding: 1.3vh 0;
+        display: flex;
+        view {
+            width: 25%;
+            height: 100%;
+            border-right: 1px solid #cde2ff;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            color: #fff;
+            h2 {
+                font-size: 22px;
+            }
+            span {
+                font-size: 12px;
+            }
+        }
+        view:last-child {
+            border-right: none;
+        }
+    }
+    .sections {
+        width: 90%;
+        margin: 15rpx auto;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        padding-top: 2vh;
+        view {
+            width: 25%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 2vh;
+            image {
+                width: 50%;
+                height: 6vh;
+                margin-bottom: 10rpx;
+            }
+            span {
+                font-size: 20rpx;
+            }
+        }
+    }
+    .wait-do {
+        width: 90%;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        view {
+            width: 48%;
+            height: 13vh;
+            margin-bottom: 15rpx;
+            border-radius: 15rpx;
+            box-sizing: border-box;
+            padding: 25rpx;
+            h4 {
+                margin-bottom: 5rpx;
+                font-size: 22px;
+            }
+            h5 {
+                font-weight: normal;
+                font-size: 14px;
+            }
+        }
+        .llsp {
+            background: url("/static/llsp.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+        .tlsp {
+            background: url("/static/tlsp.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+        .bfsh {
+            background: url("/static/bfsh.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+        .sysh {
+            background: url("/static/sysh.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+    .single-notice {
+        width: 100%;
+        margin: 0 auto;
+        border-bottom: 1px solid #dee3ea;
+        box-sizing: border-box;
+        padding: 20rpx 5%;
+        display: flex;
+        background-color: #fff;
+        .notice-lef {
+            width: 12%;
+            height: 5.5vh;
+            border-radius: 50%;
+            overflow: hidden;
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .notice-rig {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            box-sizing: border-box;
+            padding-left: 20rpx;
+            h4 {
+                font-size: 14px;
+            }
+            h5 {
+                font-size: 12px;
+                color: #8f9298;
+                font-weight: normal;
+            }
+        }
+    }
+    .popup {
+        width: 80vw;
+        height: 90vh;
+        background-color: #fff;
+        border-radius: 15rpx;
+        overflow-y: auto;
+        background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
+        .pop-top {
+            width: 100%;
+            height: 5vh;
+            box-sizing: border-box;
+            padding: 0 25rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .unread-notice {
+            width: 85%;
+            margin: 40rpx auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .tit {
+                font-size: 20px;
+                font-weight: bold;
+                margin-bottom: 20rpx;
+            }
+            .info {
+                width: 100%;
+                view {
+                    margin-bottom: 15rpx;
+                }
+                view:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            .read-one {
+                width: 40%;
+                margin: 40rpx auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                border-radius: 15rpx;
+                padding: 10rpx 0;
+                background-color: #3788ff;
+                color: #fff;
+            }
+        }
+    }
 </style>