add: 商家home主页 政府home主页 ui开发

src/_home.html

@@ -32,17 +32,30 @@
 
 
 			<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
-			<div class="second-layer" v-show="pageType=='SJ'">
-				<img class="merchant-icon" src="../image/code/zhengfu_logo.png" alt="商户图标">
-				<div class="merchant-info">
-					<div class="name-rank">
-						<span class="merchant-name">示例商户</span>
-						<span class="user-rank">用户等级：VIP3</span>
+			<div class="second-layer-sj" v-show="pageType=='SJ'">
+				<div class="header">
+					<span>商家信息</span>
+					<div class="user_tag">
+						<img src="../image/code/user.png" alt="">
+						<span>商家</span>
 					</div>
-					<div class="divider"></div>
-					<div class="type-address">
-						<p>场所类型：餐厅</p>
-						<p>地址：示例地址</p>
+				</div>
+				<div class="bottom">
+					<div class="left">
+						<img class="merchant-icon" src="../image/code/sj.png" alt="商户图标">
+					</div>
+					<div class="right">
+						<div class="merchant-info">
+							<div class="name-rank">
+								<span class="merchant-name">威海市宝威酒店有限公司</span>
+								<span class="user-rank">安全等级:绿</span>
+							</div>
+							<div class="divider"></div>
+							<div class="type-address">
+								<p>场所类型：小餐饮</p>
+								<p>山东省威海市环翠区恒瑞街35-6</p>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -52,7 +65,7 @@
 					<div class="stats-title">数据统计</div>
 					<!-- <van-cell-group> -->
 					<div @click="showPopup('showPopup4completionDate')" style="position: absolute;
-    top: -.05rem;
+    top: -.08rem;
     right: .4rem;"><span class="formValue">{{formattedDate}}</span><van-icon name="arrow-down" /></div>
 					<van-popup v-model="showPopup4completionDate" position="bottom">
 						<van-datetime-picker v-model="selectedDate" :min-date="minDate" type="year-month" title="选择年月"
@@ -187,6 +200,9 @@
 		</script>
 
 		<style>
+			body{
+				letter-spacing: .02rem;
+			}
 			.page_wrapper {
 				background-image: url('../image/code/home_bg6.png');
 				background-size: contain;
@@ -235,16 +251,107 @@
 				padding-top: 1rem;
 				padding-left: .6rem;
 			}
+			
+			.second-layer-sj{
+				background-color: transparent;
+				width: 92vw;
+				margin: 0 auto;
+			}
+			.second-layer-sj .header{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0.2rem 0;
+				
+			}
+			.second-layer-sj .header span{
+				font-weight: 500;
+				font-size: .3rem;
+				color: #0166BC;
+			}
+			
+			.second-layer-sj .header img{
+				width: 0.25rem;
+				height: .25rem;
+			}
+			
+			.second-layer-sj .bottom{
+				    display: flex;
+				    margin: 0 auto;
+				    border-radius: .2rem;
+				    background-color: #ffffff42;
+					padding: .24rem;
+					margin-bottom: -.22rem;
+			}
+			
+			.second-layer-sj img{
+				width: 1rem;
+				height: 1rem;
+			}
+			
+			.second-layer-sj .user_tag{
+				width: 1.8rem;
+				height: .48rem;
+				line-height: .48rem;
+				background: #CFE8FD;
+				border-radius: .24rem;
+				font-weight: bold;
+				font-size: .26rem;
+				color: #0166BC;
+				text-align: center;
+			}
+			
+			.second-layer-sj .merchant-name{
+				font-weight: bold;
+				font-size: .34rem;
+				color: #0166BC;
+			}
+			
+			
+			
+			.second-layer-sj .name-rank {
+				display: flex;
+				justify-content: space-around;
+				align-items: start;
+				gap: .2rem;
+				flex-direction: column;
+				margin-bottom: 10px;
+			}
+			
+			
+			.second-layer-sj .user-rank {
+				width: 2.4rem;
+				text-align: center;
+				height: 0.5rem;
+				line-height: 0.5rem;
+				background: #00B55E;
+				border-radius: 0.22rem;
+				font-family: PingFang SC;
+				font-weight: 500;
+				font-size: 0.26rem;
+				color: #FFFFFF;
+			}
+			
+			.second-layer-sj .type-address p {
+				font-weight: 500;
+				font-size: 0.28rem;
+				color: #1376CA;
+				    margin-bottom: .14rem;
+			}
+			 
 
 			.merchant-icon {
-				width: 80px;
-				height: 80px;
-				border-radius: 8px;
+				width: 1rem;
+				height: 1rem;
 				margin-right: 15px;
 			}
+			.second-layer-zf .merchant-icon {
+				width: 1.2rem;	
+				height: 1.2rem;
+			}
 
 			.merchant-info {
-				flex: 1;
+				width: 68vw;
 			}
 
 			.welcome {
@@ -274,23 +381,9 @@
 				height: 0.25rem;
 			}
 
-			.name-rank {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				margin-bottom: 10px;
-			}
+		
 
-			.merchant-name {
-				font-size: 18px;
-				font-weight: bold;
-				color: #333;
-			}
 
-			.user-rank {
-				font-size: 14px;
-				color: #666;
-			}
 
 			.divider {
 				height: 1px;
@@ -298,11 +391,7 @@
 				margin-bottom: 10px;
 			}
 
-			.type-address p {
-				font-size: 14px;
-				color: #666;
-				line-height: 1.5;
-			}
+			
 
 			/* 第三层样式 */
 			.third-layer {