界面优化

pages/Charts/mainStatistics.vue

@@ -199,6 +199,7 @@
 				endDate3: '',
 				startDate4: '',
 				endDate4: '',
+				// pname:''
 			}
 		},
 		computed: {
@@ -222,7 +223,8 @@
 		methods: {
 			...mapActions('chart', ['getStatistics','getMainStatistics','getMachineNum']),
 			async init(){
-				console.log('pname:{}',this.pname)
+				console.log('pname:{}',this.pname);
+				// this.pname=uni.getStorageSync("name");
 				if(!this.pname){
 					console.log('loginUser:{}',this.loginUser)
 					this.pname=this.loginUser.name;

pages/User/equipmentStatusList.vue

@@ -1,7 +1,11 @@
 <template>
 	<view v-if="merchantList.length>1">
 		<uni-collapse :accordion="true">
-			<view v-for="(merchant,index) in merchantList" :key="merchant.id" >
+			<view class="titleFlag">
+				<image class="img" src="../../static/img/red.png" ></image>  <font class="wenziT">红色代表机器报警</font>
+				<image class="img" src="../../static/img/green.png"></image>  <font class="wenziT">绿色代表机器正常</font>
+			</view>
+			<view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id" >
 				<uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
 					<view style="padding: 20upx;background-color: aliceblue;">
 						<view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
@@ -37,7 +41,11 @@
 	</view>
 	<view v-else>
 		<uni-collapse :show-animation="true">
-			<view style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
+			<view class="titleFlag">
+				<image class="img" src="../../static/img/red.png" ></image>  <font class="wenziT">红色代表机器报警</font>
+				<image class="img" src="../../static/img/green.png"></image>  <font class="wenziT">绿色代表机器正常</font>
+			</view>
+			<view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
 				<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
 				<uni-collapse-item :title="getEquipmentTitle(equipment)">
 					<view style="padding: 20upx;background-color: antiquewhite;">
@@ -129,7 +137,14 @@
 
 <style>
 	.status-css {
-		position: absolute;width: 30upx;height: 30upx;right: 86upx;top: 30upx;border-radius: 30upx;
+		position: absolute;
+		width: 30upx;
+		height: 30upx;
+		right: 86upx;
+		top: 30upx;
+		border-radius: 30upx;
+		color: "#596D83";
+		font-size: 12upx;
 	}
 	.status-error {
 		background-color: #dd524d
@@ -140,4 +155,27 @@
 	.baojing{
 		padding-left: 120upx;
 	}
+	.titleFlag{
+		height: 56upx;
+		background-color: #F8F8F8;
+		color: #8C959F;
+		font-size: 22upx;
+		display: flex;
+		flex-direction: row;
+	}
+	.img{
+		padding-top: 20upx;
+		padding-left: 30upx;
+		width: 15upx;
+		height: 15upx;
+	}
+	.wenziT{
+		padding-top: 10upx;
+		padding-left: 10upx;
+	}
+	.titlelist{
+		color:#363D44;
+		font-size: 16upx;
+		font-family: "PingFang-SC-Medium";
+	}
 </style>

pages/User/merchantList.vue

@@ -1,11 +1,14 @@
+<!-- 机器销售列表页 -->
 <template>
 	<view v-if="merchantList.length>1">
 		<uni-collapse :accordion="true" >
-			<view v-for="(merchant,index) in merchantList" :key="merchant.id" >
+			<view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id" >
 				<uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
-					<view style="padding: 20upx;background-color: aliceblue;">
+					<view class="titlelist" style="padding: 20upx;background-color: aliceblue;">
 						<view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
 						<view v-if="merchant.equipmentList.length>0">
+						<view class="">
+						</view>
 							<uni-collapse :accordion="true">
 								<uni-list>
 									<uni-list-item title="总销售情况" @click="openByAdmin(merchant.name,merchant.id)"/>
@@ -25,7 +28,7 @@
 			<uni-collapse :accordion="true">
 				<uni-list>
 					<uni-list-item title="总销售情况" @click="openByAdmin(merchantList[0].name,merchantList[0].id)"/>
-					<view  v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
+					<view class="titlelist" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
 						<uni-list-item :title="getEquipmentTitle(equipment)" @click="openByEquipment(merchantList[0].name,equipment.id)"/>
 					</view>
 				</uni-list>
@@ -104,5 +107,9 @@
 </script>
 
 <style>
-	
+	.titlelist{
+		color:#363D44;
+		font-size: 16upx;
+		font-family: "PingFang-SC-Medium";
+	}
 </style>

pages/User/user.vue

@@ -1,24 +1,20 @@
 <template>
-	<!-- <view class="content">
-        <view class="btn-row">
-            <button type="default" @tap="bindLogout">退出登录</button>
-        </view>
-    </view> -->
 	<view class="page-fill">
+		<view class="headimg"></view>
 		<view class="header">
-			<image src="../../static/icons/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png" class="face"></image>
+			<image src="../../static/img/userimg.png" class="face"></image>
 
 			<view class="info-wapper">
 				<view class="nickname">
-					用户名:{{name}}
+					{{name}}
 				</view>
 			</view>
-			<view>
-				<button type="default" @tap="bindLogout" class="settings">退出</button>
+			<view class="tuichu">
+				<button  @tap="bindLogout" class="settings"><p class="p3">退出</p></button>
 			</view>
 		</view>
 		<view v-if="show">
-			<view class="">
+			<view class="xiugai">
 				修改设备名称
 			</view>
 			<view v-for="(list,index) in listName" :key="index" class="body">
@@ -149,37 +145,48 @@
 	.page-fill {
 		width: 100%;
 		height: 100%;
+		background: #FFFFFF;
+	}
+	.headimg{
+		height: 148upx;
+		background: #206DC3;
+		width: 750upx;
 	}
-
 	.header {
-		padding: 60upx 30upx 40upx 30upx;
-		background-color: #ffd655;
-		background: url(../../static/icons/CpoxxFwu_1OAYFAIAAAzO_Q1tPg693.png) repeat;
-
+		height:160upx;
+		width: 690upx;
+		background:#FFFFFF;
+		margin: auto;
+		padding-top: 50upx;
+		box-shadow:0upx -1upx   20upx #D3D3D3;
+		border-radius: 15upx;
+		transform: translateY(-80upx);
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-start;
 	}
 
 	.face {
-		width: 120upx;
-		height: 120upx;
+		width: 116upx;
+		height: 116upx;
+		padding-left: 30upx;
 		border-radius: 50%;
 		flex-shrink: 0;
 	}
 
 	.info-wapper {
-		width: 60%;
-		margin-left: 40upx;
+		width: 50%;
+		margin-left: 30upx;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.nickname {
-		color: #6a5018;
-		font-size: 12px;
-		font-weight: bold;
+		color: #363D44;
+		font-size: 16px;
+		font-weight: 600;
 		padding: 30upx 0upx 0upx 0upx;
+		font-family: "PingFang-SC-Bold";
 	}
 
 	.set-wapper {
@@ -190,8 +197,11 @@
 	}
 
 	.settings {
-		width: 160upx;
-		height: 110upx;
+		width: 140upx;
+		height: 70upx;
+		border-radius: 10upx;
+		background: #D6101F;
+		padding-top: 5upx;
 	}
 
 	.button {
@@ -201,14 +211,33 @@
 	}
 
 	.input {
-		padding: 10upx 10upx 10upx 0upx;
-		background-color: #EEEEEE;
-		width: 550upx;
+		/* padding: 10upx 20upx 10upx 0upx; */
+		padding-left: 20upx;
+		padding-top: 10upx;
+		background-color: #FFFFFF;
+		width: 500upx;
 		height: 50upx;
+		box-shadow:0upx 0upx   20upx #D3D3D3;
+		border-radius: 5upx;
+	}
+	.tuichu{
+		padding-top: 35upx;
+		padding-right: 30upx;
+	}
+	.xiugai{
+		border-left: 30upx solid #0ea391;
+		padding-top: 20upx;
+		/* border-left: 20upx; */
+		padding-left: 10upx;
+		height: 85upx;
+		font-family: "PingFang-SC-Bold";
+		font-weight: bold;
+		margin: auto;
+		font-size: 32upx;
+		color: #363D44;
 	}
-
 	.body {
-		background-color: #D9D9D9;
+		background-color: #FFFFFF;
 		padding: 10upx 10upx 10upx 10upx;
 		display: flex;
 		flex-direction: row;
@@ -218,6 +247,7 @@
 	.input-two {
 		width: 600upx;
 		height: 100upx;
+		padding-left: 30upx;
 	}
 
 	.p {
@@ -232,4 +262,12 @@
 		height: 50upx;
 		border: 1px;
 	}
+	.p3{
+		font-size: 32upx;
+		padding-left: 5upx;
+		color: #FFFFFF;
+		font-weight: bold;
+		width: 64upx;
+		height: 33upx;
+	}
 </style>