企业会员

pages.json

@@ -694,6 +694,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/user/company-vip",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/user/company-vip.vue

@@ -0,0 +1,194 @@
+<template>
+	<view>
+		<view class="header">
+			<view class="title">
+				<text class="iconfont">&#xe602;</text>
+				<text class="content">企业会员</text>
+			</view>
+			<view class="user-card">
+				<view class="head-img">
+					<img src="../../assets/img/headPortrait.png" alt="">
+				</view>
+				<view class="user-name">
+					<view class="name">
+						李广宵
+					</view>
+					<view class="sign">
+						荆鹏软件企业会员
+					</view>
+				</view>
+				
+			</view>
+			
+		</view>
+		<view class="details">
+			  <view class="month-electric">
+			  	  <view class="month">
+			  	  	8月<text class="iconfont">&#xe62b;</text>
+			  	  </view>
+				  <view class="electric">
+				  	本月累计充电 100 度
+				  </view>
+			  </view>
+		<view class="item">
+			 <view class="infos">
+				 <view class="station-name">
+				 	荆鹏充电站A02
+				 </view>
+				 <view class="time">
+				 	2022-08-08 16:00:38
+				 </view>
+			 	
+			 </view>
+			 <view class="electricity-consumption">
+			 	50度
+			 </view>
+		</view>
+		<view class="item">
+			 <view class="infos">
+				 <view class="station-name">
+				 	荆鹏充电站A02
+				 </view>
+				 <view class="time">
+				 	2022-08-08 16:00:38
+				 </view>
+			 	
+			 </view>
+			 <view class="electricity-consumption">
+			 	50度
+			 </view>
+		</view>
+		
+		<u-divider color="#a8a8a8"  half-width="200" border-color="#CFD2D5" fontSize="28">已经到底了</u-divider>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #fff;
+	}
+	.header{
+		background-color: #4C586B;
+		color: #fff;
+		.title{
+			display: flex;
+			line-height: 26px;
+			padding: 9px 11px;
+			
+			
+		}
+		.iconfont{
+			font-size: 24px
+		}
+		.content{
+			flex: 1;
+			text-align: center;
+			font-size: 20px
+		}
+		
+		.user-card{
+		   padding: 19px 0 39px 20px;
+			margin: 21px 20px 0 20px;
+			background:url(@/assets/img/companyVIP.png) no-repeat right,linear-gradient(to right,#C6D4ED,#DCE6F0) no-repeat;
+			box-shadow: 0px 0px 16px 0px rgba(14, 39, 84, 28);
+			border: 2px solid rgba(236, 239, 245, 100);
+			border-radius: 16px;
+			display: flex;
+			.head-img{
+				width: 48px;
+				height: 48px;
+				img{
+					width: 100%;
+				}
+			}
+			.user-name{
+				margin-left: 12px;
+				.name{
+					line-height: 24px;
+					color: rgba(33, 41, 48, 100);
+					font-size: 24px;
+					font-weight: 550;
+				}
+				.sign{
+					color: rgba(76, 89, 111, 100);
+					font-size: 16px;
+					line-height: 16px;
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+
+.details{
+	height: 100%;
+	
+	box-shadow: 0px -6px 6px 0px #1A313C47;
+	margin-top: -15px;
+	border-radius: 16px 16px 0px 0px;
+	background-color: #fff;
+	padding: 30px 20px;
+	
+	.month-electric{
+		display: flex;
+		justify-content: space-between;
+		line-height: 16px;
+		margin-bottom: 25px;
+		.month{
+			
+			color: #333333;
+			.iconfont{
+				color:#666666;
+			}
+		}
+		.electric{
+			color: rgba(102, 102, 102, 100);
+			font-size: 16px;
+		}
+	}
+	
+	.item{
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 22px;
+		.infos{
+			.station-name{
+				color: rgba(51, 51, 51, 100);
+				font-size: 16px;
+				line-height: 16px;
+			}
+			.time{
+				color: rgba(119, 119, 119, 100);
+				line-height: 14px;
+				margin-top: 8px;
+			}
+		}
+		.electricity-consumption{
+			
+			margin: auto 0;
+			font-size: 24px;
+			color: #111111;
+		}
+		
+	}
+	/deep/.u-divider{
+		margin-top: 27px !important;
+		
+	}
+}
+</style>