[Feat 0000]样式优化

common/service/config.service.js

@@ -7,11 +7,11 @@ if (process.env.NODE_ENV == "development") {
   // BASE_URL = "http://10.35.116.82:9999";//棋盘井东区
   // BASE_URL = "http://192.168.126.12:9999";//王洼二矿
   // BASE_URL = "http://172.17.3.15:9999"; //黑龙煤矿
-  BASE_URL = "http://172.19.7.101:9999"; //准东二矿
+  // BASE_URL = "http://172.19.7.101:9999"; //准东二矿
   // BASE_URL = "http://172.16.53.16:9999"; //大海则煤矿
   //BASE_URL = "http://10.7.0.19:9999"; //特拉布拉
   //BASE_URL = "http://10.35.116.82:9999"; //棋盘井东区
-  //BASE_URL = "http://182.92.126.35:9999"; //测试环境
+  // BASE_URL = "http://182.92.126.35:9999"; //测试环境
 }
 let staticDomainURL = BASE_URL + "/sys/common/static";
 const configService = {

manifest.json

@@ -135,7 +135,7 @@
         "theme" : {
             "primaryColor" : "#000000",
             "window" : {
-                "fullscreen" : true,
+                "fullscreen" : false,
                 "navigationBarColor" : "#000000"
             }
         },

pages/device/index.vue

@@ -226,8 +226,8 @@ export default {
 // }
 
 .devic-box-content {
-  height: calc(100vh - 101px);
-  margin-top: 50px;
+  height: calc(100vh - 101px - var(--status-bar-height, 0px));
+  margin-top: calc(50px + var(--status-bar-height, 0px));
   overflow-y: auto;
   // background: #f4f7fd;
 }

pages/filecenter/filecenter.vue

@@ -863,7 +863,7 @@ export default {
 }
 
 .file-page-content {
-  padding-top: 50px;
+  padding-top: calc(50px + var(--status-bar-height, 0px));
   // min-height: calc(100vh - 50px);
 }
 

pages/home/detail/autodoor/autodoor.vue

@@ -879,7 +879,7 @@ export default {
 
 .main {
   // min-height: calc(100vh - 50px);
-  height: calc(100vh - 115px);
+  height: calc(100vh - 115px - var(--status-bar-height, 0px));
   // padding-bottom: 40rpx;
   overflow-y: auto;
   margin-bottom: 10px;
@@ -894,7 +894,7 @@ export default {
 
 /* ===== Tabs ===== */
 .detail-tabs {
-  margin-top: 50px;
+  margin-top: calc(50px + var(--status-bar-height, 0px));
   display: flex;
   flex-direction: row;
   align-items: center;

pages/user/userdetail.vue

@@ -1,83 +1,132 @@
 <template>
-	<view>
-		<scroll-view scroll-y class="page">
-			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
-				<block slot="backText">返回</block>
-				<block slot="content">用户详情</block>
-				<view slot="right"  @tap="rightClick">编辑</view>
-			</cu-custom>
-			<!-- list列表 -->
-			<view class="cu-list menu margin-top">
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
-					<view class="content">
-						<text class="text-grey">头像</text>
-					</view>
-					<view class="action">
-						<view class="cu-avatar round sm" :style="{backgroundImage: 'url(' + personalMsg.avatar + ')'}"></view>
-					</view>
-				
+	<view class="user-page">
+		<u-navbar
+			title="用户详情"
+			:safeAreaInsetTop="true"
+			:fixed="true"
+			:placeholder="true"
+			height="50px"
+			bgColor="transparent"
+			titleStyle="fw600 fs-18"
+			leftIconColor="#303133"
+			@leftClick="goBack"
+		>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" size="20" color="#303133"></u-icon>
+			</view>
+			<view class="u-nav-slot" slot="right" @tap="rightClick">
+				<view class="nav-edit-btn">
+					<u-icon name="edit-pen" size="14" color="#0065f8"></u-icon>
+					<text class="nav-edit-text">编辑</text>
 				</view>
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
-					<view class="content">
-						<text class="text-grey">姓名</text>
+			</view>
+		</u-navbar>
+
+		<view class="user-page-content">
+			<!-- 个人资料 -->
+			<view class="detail-card">
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="photo-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
-					<view class="action">
-						<text class="text-grey">{{personalMsg.realname}}</text>
+					<text class="detail-label">头像</text>
+					<view class="detail-value-area">
+						<image
+							class="detail-avatar"
+							:src="personalMsg.avatar"
+							mode="aspectFill"
+						></image>
 					</view>
 				</view>
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
-					<view class="content">
-						<text class="text-grey">性别</text>
-					</view>
-					<view class="action">
-						<text class="text-grey">{{personalMsg.sex}}</text>
+
+				<view class="detail-divider"></view>
+
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="account-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="detail-label">姓名</text>
+					<text class="detail-value">{{ personalMsg.realname }}</text>
 				</view>
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
-					<view class="content">
-						<text class="text-grey">生日</text>
+
+				<view class="detail-divider"></view>
+
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon
+								:name="personalMsg.sex === '女' ? 'woman' : 'man'"
+								size="14"
+								color="#ffffff"
+							></u-icon>
+						</view>
 					</view>
-					<view class="action">
-						<text class="text-grey">{{personalMsg.birthday}}</text>
+					<text class="detail-label">性别</text>
+					<text class="detail-value">{{ personalMsg.sex }}</text>
+				</view>
+
+				<view class="detail-divider"></view>
+
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="calendar-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="detail-label">生日</text>
+					<text class="detail-value">{{ personalMsg.birthday }}</text>
 				</view>
 			</view>
-			
-			<view class="cu-list menu">
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
-					<view class="content">
-						<text class="text-grey">对外信息展示</text>
-					</view>
-					<view class="action">
-						<text class="text-grey">{{getSubStringText(personalMsg.realname+'@'+personalMsg.orgCode,11)}}</text>
+
+			<!-- 对外信息展示 -->
+			<view class="detail-card">
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="eye-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="detail-label">对外信息展示</text>
+					<text class="detail-value">
+						{{
+							getSubStringText(
+								personalMsg.realname + "@" + personalMsg.orgCode,
+								11
+							)
+						}}
+					</text>
 				</view>
 			</view>
-			
-			
-			
-			<view class="cu-list menu">
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
-					<view class="content">
-						<text class="text-grey">手机</text>
-					</view>
-					<view class="action">
-						<text class="text-grey">{{personalMsg.phone}}</text>
+
+			<!-- 联系方式 -->
+			<view class="detail-card">
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="phone-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="detail-label">手机</text>
+					<text class="detail-value">{{ personalMsg.phone }}</text>
 				</view>
-				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '1s'}]">
-					<view class="content">
-						<text class="text-grey">邮箱</text>
-					</view>
-					<view class="action">
-						<text class="text-grey">{{personalMsg.email}}</text>
+
+				<view class="detail-divider"></view>
+
+				<view class="detail-row">
+					<view class="detail-icon-box">
+						<view class="detail-icon-glass">
+							<u-icon name="email-fill" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="detail-label">邮箱</text>
+					<text class="detail-value">{{ personalMsg.email }}</text>
 				</view>
 			</view>
-			
-	
-
-		</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -120,6 +169,12 @@
 				}
 				return text.substr(0,len)+"..."
 			},
+			//左上角返回键：返回上一页
+			goBack(){
+				uni.navigateBack({
+					delta: 1
+				});
+			},
 			rightClick(){
 				this.$Router.push({name:'useredit', params:this.personalMsg})
 				/* uni.navigateTo({
@@ -180,29 +235,122 @@
 	}
 </script>
 
-<style>
-	.page {
-		height: 100Vh;
-		width: 100vw;
-	}
+<style lang="scss" scoped>
+.user-page {
+	min-height: 100vh;
+	background: linear-gradient(180deg, #c8d8f8 0%, #eef4fd 320rpx, #f4f7fd 100%);
+}
 
-	.page.show {
-		overflow: hidden;
-	}
+.user-page-content {
+	padding-left: 24rpx;
+	padding-right: 24rpx;
+	padding-bottom: 40rpx;
+	box-sizing: border-box;
+}
 
-	.switch-sex::after {
-		content: "\e716";
-	}
+.nav-edit-btn {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0 14rpx;
+	height: 44rpx;
+	border: 1rpx solid #0065f8;
+	border-radius: 8rpx;
+	background: #ffffff;
+	box-sizing: border-box;
+}
 
-	.switch-sex::before {
-		content: "\e7a9";
-	}
+.nav-edit-text {
+	margin-left: 6rpx;
+	font-size: 24rpx;
+	color: #0065f8;
+	line-height: 1;
+}
 
-	.switch-music::after {
-		content: "\e66a";
-	}
+.detail-card {
+	background: #ffffff;
+	border: 1rpx solid #e8effc;
+	border-radius: 16rpx;
+	padding: 0 24rpx;
+	margin-bottom: 20rpx;
+	box-shadow: 0 4rpx 16rpx rgba(43, 124, 255, 0.08);
+}
 
-	.switch-music::before {
-		content: "\e6db";
-	}
+.detail-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-height: 112rpx;
+	padding: 20rpx 0;
+}
+
+.detail-divider {
+	height: 1rpx;
+	background: #eef0f4;
+}
+
+.detail-icon-box {
+	position: relative;
+	width: 56rpx;
+	height: 56rpx;
+	border-radius: 12rpx;
+	background: #2b7cff;
+	box-sizing: border-box;
+	box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
+	flex-shrink: 0;
+	margin-right: 20rpx;
+}
+
+.detail-icon-glass {
+	position: absolute;
+	left: -6rpx;
+	bottom: -6rpx;
+	width: 50rpx;
+	height: 50rpx;
+	border-radius: 12rpx;
+	background: transparent;
+	border: none;
+	box-shadow: 0 0 0 0.6px #ffffff inset;
+	box-sizing: border-box;
+	backdrop-filter: blur(4rpx);
+	-webkit-backdrop-filter: blur(4rpx);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.detail-label {
+	flex-shrink: 0;
+	width: 170rpx;
+	font-size: 24rpx;
+	color: #000;
+	line-height: 1.4;
+}
+
+.detail-value-area {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.detail-value {
+	flex: 1;
+	min-width: 0;
+	font-size: 24rpx;
+	font-weight: 500;
+	color: #0065f8;
+	line-height: 1.4;
+	text-align: right;
+	word-break: break-all;
+}
+
+.detail-avatar {
+	width: 88rpx;
+	height: 88rpx;
+	border-radius: 50%;
+	border: 1rpx solid #e8effc;
+}
 </style>

pages/user/useredit.vue

@@ -1,58 +1,195 @@
 <template>
-	<view>
-		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
-			<block slot="backText">返回</block>
-			<block slot="content">编辑资料</block>
-		</cu-custom>
-		<form class="user-edit-form">
-			<view class="cu-form-group">
-				<view class="title">姓名</view>
-				<input placeholder="请输入姓名" name="input" v-model="myFormData.realname"></input>
+	<view class="user-page">
+		<u-navbar
+			title="编辑资料"
+			:safeAreaInsetTop="true"
+			:fixed="true"
+			:placeholder="true"
+			height="50px"
+			bgColor="transparent"
+			titleStyle="fw600 fs-18"
+			leftIconColor="#303133"
+			@leftClick="goBack"
+		>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" size="20" color="#303133"></u-icon>
 			</view>
-			<view class="cu-form-group">
-				<view class="title">用户名</view>
-				<input placeholder="用户名" name="input" v-model="myFormData.username" disabled></input>
-			</view>
-			<view class="cu-form-group">
-				<view class="title">头像</view>
-				<view class="grid col-4 grid-square flex-sub">
-					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
-					 <image :src="imgList[index]" mode="aspectFill"></image>
-						<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
-							<text class='cuIcon-close'></text>
+		</u-navbar>
+
+		<view class="user-page-content">
+			<view class="edit-card">
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon name="account-fill" size="14" color="#ffffff"></u-icon>
 						</view>
 					</view>
-					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
-						<text class='cuIcon-cameraadd'></text>
+					<text class="edit-label">姓名</text>
+					<input
+						class="edit-input"
+						placeholder="请输入姓名"
+						placeholder-style="color: #b9c6da;"
+						name="input"
+						v-model="myFormData.realname"
+					/>
+				</view>
+
+				<view class="edit-divider"></view>
+
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon name="account" size="14" color="#ffffff"></u-icon>
+						</view>
 					</view>
+					<text class="edit-label">用户名</text>
+					<input
+						class="edit-input edit-input-disabled"
+						placeholder="用户名"
+						placeholder-style="color: #b9c6da;"
+						name="input"
+						v-model="myFormData.username"
+						disabled
+					/>
 				</view>
-			</view>
-			
-			<view class="cu-form-group margin-top">
-				<view class="title">性别</view>
-				<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
-				</view>	
-			
-			<view class="cu-form-group margin-top">
-				<view class="title">手机号码</view>
-				<input placeholder="输入手机号码" name="input" v-model="myFormData.phone"></input>
-				<view class="cu-capsule radius">                  
-					<view class='cu-tag bg-blue '>
-						+86
+
+				<view class="edit-divider"></view>
+
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon name="photo-fill" size="14" color="#ffffff"></u-icon>
+						</view>
+					</view>
+					<text class="edit-label">头像</text>
+					<view class="avatar-area">
+						<view
+							class="avatar-item"
+							v-for="(item, index) in imgList"
+							:key="index"
+							@tap="ViewImage"
+							:data-url="imgList[index]"
+						>
+							<image
+								class="avatar-img"
+								:src="imgList[index]"
+								mode="aspectFill"
+							></image>
+							<view
+								class="avatar-del"
+								@tap.stop="DelImg"
+								:data-index="index"
+							>
+								<u-icon
+									name="close"
+									size="10"
+									color="#ffffff"
+								></u-icon>
+							</view>
+						</view>
+						<view
+							class="avatar-add"
+							@tap="ChooseImage"
+							v-if="imgList.length < 1"
+						>
+							<u-icon
+								name="camera-fill"
+								size="18"
+								color="#0065f8"
+							></u-icon>
+						</view>
+					</view>
+				</view>
+
+				<view class="edit-divider"></view>
+
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon
+								:name="switchC ? 'man' : 'woman'"
+								size="14"
+								color="#ffffff"
+							></u-icon>
+						</view>
 					</view>
-					<view class="cu-tag line-blue">
-						中国大陆
+					<text class="edit-label">性别</text>
+					<view class="edit-control">
+						<view
+							class="sex-btn"
+							:class="switchC ? 'action-btn-primary' : 'action-btn-outline'"
+							@click="SwitchC(true)"
+						>
+							<text class="action-btn-text">男</text>
+						</view>
+						<view
+							class="sex-btn"
+							:class="!switchC ? 'action-btn-primary' : 'action-btn-outline'"
+							@click="SwitchC(false)"
+						>
+							<text class="action-btn-text">女</text>
+						</view>
 					</view>
 				</view>
+
+				<view class="edit-divider"></view>
+
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon
+								name="phone-fill"
+								size="14"
+								color="#ffffff"
+							></u-icon>
+						</view>
+					</view>
+					<text class="edit-label">手机号码</text>
+					<input
+						class="edit-input"
+						placeholder="输入手机号码"
+						placeholder-style="color: #b9c6da;"
+						name="input"
+						v-model="myFormData.phone"
+					/>
+					<view class="edit-capsule">
+						<text class="edit-capsule-code">+86</text>
+						<text class="edit-capsule-region">中国大陆</text>
+					</view>
+				</view>
+
+				<view class="edit-divider"></view>
+
+				<view class="edit-row">
+					<view class="edit-icon-box">
+						<view class="edit-icon-glass">
+							<u-icon
+								name="email-fill"
+								size="14"
+								color="#ffffff"
+							></u-icon>
+						</view>
+					</view>
+					<text class="edit-label">邮箱</text>
+					<input
+						class="edit-input"
+						placeholder="输入邮箱"
+						placeholder-style="color: #b9c6da;"
+						name="input"
+						v-model="myFormData.email"
+					/>
+				</view>
 			</view>
-			<view class="cu-form-group">
-				<view class="title">邮箱</view>
-				<input placeholder="输入邮箱" name="input"  v-model="myFormData.email"></input>
-			</view>
-			<view class="padding flex flex-direction">
-				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
+
+			<view class="submit-area">
+				<view
+					class="action-btn action-btn-primary submit-btn"
+					@click="onSubmit"
+				>
+					<text class="action-btn-text">提交</text>
+				</view>
 			</view>
-		</form>
+		</view>
 	</view>
 </template>
 
@@ -162,8 +299,14 @@ export default {
     DateChange(e) {
       this.myFormData.birthday = e.detail.value;
     },
-    SwitchC(e) {
-      this.switchC = e.detail.value;
+    //左上角返回键：返回上一页
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    SwitchC(value) {
+      this.switchC = value;
     },
     ChooseImage() {
       var that = this;
@@ -210,13 +353,235 @@ export default {
 };
 </script>
 
-<style>
-.user-edit-form {
-  margin-top: 50rpx;
+<style lang="scss" scoped>
+.user-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #c8d8f8 0%, #eef4fd 320rpx, #f4f7fd 100%);
+}
+
+.user-page-content {
+  padding-left: 24rpx;
+  padding-right: 24rpx;
+  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+.edit-card {
+  background: #ffffff;
+  border: 1rpx solid #e8effc;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(43, 124, 255, 0.08);
+}
+
+.edit-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 112rpx;
+  padding: 20rpx 0;
+}
+
+.edit-divider {
+  height: 1rpx;
+  background: #eef0f4;
+}
+
+.edit-icon-box {
+  position: relative;
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 12rpx;
+  background: #2b7cff;
+  box-sizing: border-box;
+  box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
+  flex-shrink: 0;
+  margin-right: 20rpx;
+}
+
+.edit-icon-glass {
+  position: absolute;
+  left: -6rpx;
+  bottom: -6rpx;
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 12rpx;
+  background: transparent;
+  border: none;
+  box-shadow: 0 0 0 0.6px #ffffff inset;
+  box-sizing: border-box;
+  backdrop-filter: blur(4rpx);
+  -webkit-backdrop-filter: blur(4rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.edit-label {
+  flex-shrink: 0;
+  width: 150rpx;
+  font-size: 24rpx;
+  color: #000;
+  line-height: 1.4;
+}
+
+.edit-input {
+  flex: 1;
+  min-width: 0;
+  height: 56rpx;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+  font-size: 24rpx;
+  color: #000;
+  background: #ffffff;
+  border: 1rpx solid #2572ff;
+  border-radius: 8rpx;
+}
+
+.edit-input-disabled {
+  color: #9aa4b2;
+  background: #f5f7fb;
+  border-color: #d7e0ee;
+}
+
+.edit-control {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.sex-btn {
+  width: 96rpx;
+  height: 56rpx;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.sex-btn + .sex-btn {
+  margin-left: 12rpx;
 }
 
-.user-edit-form .cu-form-group .title {
-  min-width: calc(4em + 15px);
+.edit-capsule {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 12rpx;
+  border: 1rpx solid #0065f8;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.edit-capsule-code {
+  height: 56rpx;
+  padding: 0 12rpx;
+  line-height: 56rpx;
+  font-size: 22rpx;
+  color: #ffffff;
+  background: #0065f8;
+}
+
+.edit-capsule-region {
+  height: 56rpx;
+  padding: 0 12rpx;
+  line-height: 56rpx;
+  font-size: 22rpx;
+  color: #0065f8;
+  background: #ffffff;
+}
+
+.avatar-area {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.avatar-item {
+  position: relative;
+  width: 96rpx;
+  height: 96rpx;
+  margin-left: 16rpx;
+}
+
+.avatar-img {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 12rpx;
+  border: 1rpx solid #e8effc;
+}
+
+.avatar-del {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 16rpx;
+  background: #ff3b30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-add {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 12rpx;
+  border: 1rpx dashed #2b7cff;
+  background: rgba(43, 124, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.submit-area {
+  margin-top: 32rpx;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.action-btn-text {
+  font-size: 24rpx;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.action-btn-primary {
+  background: #0065f8;
+}
+
+.action-btn-primary .action-btn-text {
+  color: #ffffff;
+}
+
+.action-btn-outline {
+  background: #ffffff;
+  border: 1rpx solid #0065f8;
+}
+
+.action-btn-outline .action-btn-text {
+  color: #0065f8;
+}
+
+.submit-btn {
+  height: 84rpx;
+  border-radius: 12rpx;
+}
+
+.submit-btn .action-btn-text {
+  font-size: 28rpx;
+  font-weight: 600;
 }
 </style>

pages/warndata/warndata.vue

@@ -249,7 +249,7 @@
                     <view class="dust-alarm-icon-wrap">
                       <image
                         class="dust-alarm-icon"
-                        src="/static/warndata/报警.svg"
+                        src="/static/warndata/warning.svg"
                         mode="aspectFit"
                       ></image>
                     </view>
@@ -269,7 +269,7 @@
                       >
                         <image
                           class="dust-risk-icon-img"
-                          src="/static/warndata/风险.svg"
+                          src="/static/warndata/fx.svg"
                           mode="aspectFit"
                         ></image>
                       </view>
@@ -320,7 +320,7 @@
                         <view class="gas-icon-box">
                           <image
                             class="gas-icon"
-                            src="/static/warndata/监测点.svg"
+                            src="/static/warndata/jcd.svg"
                             mode="aspectFit"
                           ></image>
                         </view>
@@ -357,7 +357,7 @@
                         <view class="gas-icon-box">
                           <image
                             class="gas-icon"
-                            src="/static/warndata/监测点.svg"
+                            src="/static/warndata/jcd.svg"
                             mode="aspectFit"
                           ></image>
                         </view>
@@ -614,22 +614,44 @@ export default {
         window: "风窗",
         wintest: "测风装置",
       };
-      const iconName = iconNameMap[item.code] || item.name || "评价单元";
+      // 设备图标文件名已由中文名改为中文首字母缩写
+      const iconFileMap = {
+        喷淋: "pl",
+        除尘器: "ccq",
+        跟机喷雾: "gjpw",
+        喷粉: "pf",
+        局扇: "js",
+        主扇: "zs",
+        压风: "yf",
+        抽采管路: "ccgl",
+        风门: "fm",
+        人员定位: "rydw",
+        注氮: "zd",
+        注浆: "zj",
+        瓦斯泵: "wsb",
+        语音扩播: "yykb",
+        安全监控: "aqjk",
+        评价单元: "default",
+        风窗: "fc",
+        测风装置: "cfzz",
+      };
+      const deviceName = iconNameMap[item.code] || item.name;
+      const iconName = iconFileMap[deviceName] || "default";
       return `/static/warndata/${iconName} – 1.png`;
     },
     getFireIcon(item) {
       const monitor = item.monitorcode || "";
       if (monitor.indexOf("上隅角") >= 0) {
-        return "/static/warndata/上隅角.svg";
+        return "/static/warndata/syj.svg";
       }
       if (monitor === "温度") {
-        return "/static/warndata/监测点.svg";
+        return "/static/warndata/jcd.svg";
       }
       if (monitor === "烟雾") {
-        return "/static/warndata/风险.svg";
+        return "/static/warndata/fx.svg";
       }
       if (monitor === "火焰") {
-        return "/static/warndata/报警.svg";
+        return "/static/warndata/warning.svg";
       }
       const codeMap = {
         coval: "CO.svg",
@@ -637,9 +659,9 @@ export default {
         ch2val: "C2H4.svg",
         chval: "C2H4.svg",
         co2val: "CO2.svg",
-        o2val: "上隅角.svg",
+        o2val: "syj.svg",
       };
-      return `/static/warndata/${codeMap[item.code] || "监测点.svg"}`;
+      return `/static/warndata/${codeMap[item.code] || "jcd.svg"}`;
     },
     getFireUnit(item) {
       if (
@@ -786,8 +808,8 @@ export default {
 }
 
 .menupage {
-  height: calc(100vh - 101px);
-  margin-top: 50px;
+  height: calc(100vh - 101px - var(--status-bar-height, 0px));
+  margin-top: calc(50px + var(--status-bar-height, 0px));
   overflow-y: auto;
 }
 
@@ -1042,7 +1064,7 @@ export default {
 
 .device-item-bar {
   position: absolute;
-  left: 28rpx;
+  left: 44rpx;
   right: 0;
   top: 50%;
   transform: translateY(-50%);

static/warndata/操作时间.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#f9faff"/>
-      <stop offset="1" stop-color="#c4d2fd"/>
-    </linearGradient>
-  </defs>
-  <path id="路径_56238" data-name="路径 56238" d="M77.5,91A13.5,13.5,0,1,1,91,77.5,13.5,13.5,0,0,1,77.5,91Zm0-3.857A9.643,9.643,0,1,0,67.857,77.5,9.643,9.643,0,0,0,77.5,87.143Zm7.749-11.571v3.857H75.571V69.786h3.857v5.786Z" transform="translate(-63.5 -63.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
-</svg>

static/warndata/操作记录.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.917" height="27.359" viewBox="0 0 23.917 27.359">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#f9faff"/>
-      <stop offset="1" stop-color="#c4d2fd"/>
-    </linearGradient>
-  </defs>
-  <path id="路径_56239" data-name="路径 56239" d="M89.555,24.7H68.481a.83.83,0,0,0,0,1.66H89.555a.83.83,0,0,0,0-1.66Zm0-3.319H80.041a.83.83,0,0,0,0,1.66h9.514a.83.83,0,0,0,0-1.66ZM82.53,18.889a.83.83,0,0,0,.83.83h6.195a.83.83,0,0,0,0-1.66H83.36a.83.83,0,0,0-.83.83ZM68.462,22.613a.907.907,0,0,0,.521.193h.1L76.046,22a.656.656,0,0,0,.27-.1.425.425,0,0,0,.174-.135L87.529,8.255a2.239,2.239,0,0,0-.347-3.146L81.855.517a2.084,2.084,0,0,0-1.621-.5,2.181,2.181,0,0,0-1.505.811L67.709,14.45a.6.6,0,0,0,0,.193.617.617,0,0,0,0,.27h-.193l.656,6.986a.791.791,0,0,0,.289.714Zm1.467-7.16L75.1,19.6l-.618.868-4.747.56-.5-4.67Z" transform="translate(-66.967 0.502)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
-</svg>

static/warndata/操作设备.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.986" height="25.979" viewBox="0 0 25.986 25.979">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#f9faff"/>
-      <stop offset="1" stop-color="#c4d2fd"/>
-    </linearGradient>
-  </defs>
-  <path id="路径_55532" data-name="路径 55532" d="M183.993,186.336a4.793,4.793,0,0,1-6.879-3.762,4.147,4.147,0,0,1,.15-1.9.532.532,0,0,0-.168-.64q-4.721-4.7-9.426-9.421a.593.593,0,0,0-.687-.168,4.835,4.835,0,0,1-6.04-3.675,4.51,4.51,0,0,1,.332-2.977c.205-.033.268.137.365.233.927.917,1.842,1.847,2.773,2.761a1.629,1.629,0,1,0,2.3-2.283c-1.006-1.023-2.028-2.031-3.11-3.112a4.909,4.909,0,0,1,4.352.083,4.847,4.847,0,0,1,2.411,5.581.629.629,0,0,0,.2.728q4.68,4.663,9.343,9.344a.705.705,0,0,0,.787.187,4.686,4.686,0,0,1,4.842,1.459,4.554,4.554,0,0,1,.987,4.8c-.134.391-.221.547-.592.155-.909-.961-1.856-1.886-2.8-2.811a1.584,1.584,0,0,0-1.766-.426,1.531,1.531,0,0,0-1.033,1.308,1.742,1.742,0,0,0,.61,1.514C181.95,184.3,182.951,185.3,183.993,186.336Zm-23.127-1.983a1.939,1.939,0,0,1,.654-1.621q3.862-3.879,7.733-7.748c.182-.183.284-.223.489-.013q1.467,1.5,2.97,2.966c.193.189.2.294,0,.49-2.589,2.572-5.15,5.171-7.758,7.723a2.384,2.384,0,0,1-3.9-.633A2,2,0,0,1,160.866,184.353Zm16.4-12.217c-.089-.077-.177-.143-.255-.219-.4-.4-.788-.816-1.209-1.195-.254-.229-.2-.363.019-.576.959-.937,1.879-1.916,2.858-2.832a6.512,6.512,0,0,0,1.8-2.5,5.006,5.006,0,0,1,3.174-3.181c.493-.176.965-.658,1.419-.624s.742.7,1.161,1.014c.513.385.563.737.209,1.3a25.011,25.011,0,0,0-1.258,2.405,1.16,1.16,0,0,1-.624.612A14.725,14.725,0,0,0,179,170.4c-.458.526-.983.993-1.478,1.487C177.443,171.97,177.359,172.045,177.262,172.136Z" transform="translate(-160.832 -160.92)" fill="url(#linear-gradient)"/>
-</svg>