首页样式 图表logo

pages/home/home.vue

 <template>
 	<view class="wrapper">
-		 <CustomNavbar title="" :showLeft="false">
-			 <image class="langImg" style="width:55rpx; height: 44rpx;" src="../../static/image/home/change.png" mode="" ></image>
-		</CustomNavbar>
 		<view class="body-wrapper">
 			<view class="logo-wrapper">
 				<image class="logoImg" src="/static/image/home/logo.png" alt="" />
 				<h3>露天炮孔验收仪</h3>
 			</view>
+			
+			<view class="link-info-wrapper"  @click="navTo('login')">
+				<div class="left">
+					<image src="/static/image/paokong/linkY.png" mode=""></image>
+					<view class="link-status">
+						蓝牙已连接
+					</view>
+				</div>
+				<div class="right">
+					<h2>设备参数</h2>
+					<p>设备名称：露天炮孔验收仪</p>
+					<p>设备型号：MYSM-OH-01</p>
+				</div>
+			</view>
 			<p class="list-item">
 				<image src="/static/image/home/icon1.png" alt="" />
-				<span>登录</span>
-				<button size="mini" class="funcBtn" type="primary" @click="navTo('login')">登录</button>
+				<span>炮孔设计数据导入</span>
+				<!-- <button size="mini" class="funcBtn" type="primary" @click="navTo('import')">导入导出</button> -->
 			</p>
-			<p class="list-item">
-				<image src="/static/image/home/icon1.png" alt="" />
-				<span>入出date</span>
-				<button size="mini" class="funcBtn" type="primary" @click="navTo('import')">导入导出</button>
+			<p class="list-item" @click="navTo('link')">
+				<image src="/static/image/paokong/link.png" alt="" />
+				<span>连接露天炮孔验收仪</span>
+				<!-- <button size="mini" class="funcBtn" type="primary">连接</button> -->
 			</p>
-			<p class="list-item">
-				<image src="/static/image/home/icon2.png" alt="" />
-				<span>连接中深孔验收仪</span>
-				<button size="mini" class="funcBtn" type="primary" @click="navTo('link')">连接</button>
-			</p>
-			<p class="list-item">
-				<image src="/static/image/home/icon3.png" alt="" />
+			<!-- <p class="list-item">
+				<image src="/static/image/paokong/measure.png" alt="" />
 				<span>设备测试</span>
 				<button size="mini" class="funcBtn" type="primary" @click="navTo('measureTest')">测量</button>
-			</p>
+			</p> -->
 			<p class="list-item">  
-				<image src="/static/image/home/icon4.png" alt="" />
+				<image src="/static/image/paokong/measure.png" alt="" />
 				<span>炮孔测量</span>
-				<button size="mini" class="funcBtn" type="primary" @click="navTo('measure')">测量</button>
+				<!-- <button size="mini" class="funcBtn" type="primary" @click="navTo('measure')">测量</button> -->
 			</p>
 			<p class="list-item">
 				<image src="/static/image/home/icon1.png" alt="" />
-				<span>钻孔测量数据列表</span>
-				<button size="mini" class="funcBtn" type="primary" @click="navTo('export')">导出</button>
+				<span>炮孔测量数据导出</span>
+				<!-- <button size="mini" class="funcBtn" type="primary" @click="navTo('export')">导出</button> -->
 			</p>
 			<p class="list-item">
+				<image src="/static/image/paokong/operatelog.png" alt="" />
+				<span>操作日志</span>
+				<!-- <button size="mini" class="funcBtn" type="primary" @click="navTo('export')">导出</button> -->
+			</p>
+			<!-- <p class="list-item">
 				<image src="/static/image/home/5.png" alt="" />
 				<span>导入数据预览</span>
 				<button size="mini" class="funcBtn" type="primary" @click="navTo('importFileDataPreview')">进入</button>
@@ -47,7 +58,7 @@
 				<image src="/static/image/home/5.png" alt="" />
 				<span>炮孔测量</span>
 				<button size="mini" class="funcBtn" type="primary" @click="navTo('paokongceliang')">进入</button>
-			</p>
+			</p> -->
 			<view class="footer">
 				<span>
 					威海晶合数字矿山技术有限公司
@@ -117,8 +128,8 @@
 <style lang="scss">
 .wrapper{
 	width: 100vw;
-	height: calc(100vh-44rpx);
-	padding-top: 44rpx;
+	height: calc(100vh-55rpx);
+	padding-top: 55rpx;
 	background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
 	position: relative;
 	.footer{
@@ -143,7 +154,8 @@
 	flex-direction: column;
 	align-items: center;
 	gap: 20rpx;
-	background-color: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);;
+	background-color: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
+	padding-top: 50rpx;
 }
 .logo-wrapper{
 	position: relative;
@@ -161,14 +173,62 @@
 	h3{
 		color: #ffffff;
 		font-size: 37rpx;
+		font-weight: bold;
 	}
 }
+
+.link-info-wrapper{
+	
+	width: 646rpx;
+	height: 300rpx;
+	background: linear-gradient(-90deg, #F6F9FF 31%, #E4EFFF 100%);
+	box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(7,36,72,0.11);
+	border-radius: 10rpx;
+	border: 2px solid #FFFFFF;
+	display: flex;
+	align-items: center;
+	gap: 47rpx;
+	padding-left: 49rpx;
+	.left{
+		image{
+			width: 136rpx;
+			height: 136rpx;
+		}
+		.link-status{
+			font-family: Source Han Sans SC;
+			font-weight: bold;
+			font-size: 30rpx;
+			color: #007AFF;
+			::before{
+				content: '';
+				width: 12rpx;
+				height: 12rpx;
+				background: #007AFF;
+				border-radius: 50%;
+			}
+		}
+	}
+	.right{
+		h2{
+			font-size: 34rpx;
+			font-weight: bold;
+		}
+		p{
+			font-size: 30rpx;
+			// font-weight: bold;
+			color: #848484;
+			margin-top: 20rpx;
+		}
+	}
+}
+
+
 .list-item{
 	width: 660rpx;
 	height: 140rpx;
 	// border-top: 1px solid rgba(187,187,187,1);
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-start;
 	align-items: center;
 	gap: 0px 30px;
 	padding: 10px;
@@ -180,7 +240,7 @@
 	}
 	span{
 		display: inline-block;
-		width: 320rpx;
+		width: 420rpx;
 		font-family: PingFangSC-regular;
 		color: rgba(0,0,0,1);
 		font-size: 18px;

pages/user/login.vue

@@ -169,6 +169,9 @@
 			font-size: 34rpx;
 			color: #000000;
 		}
+		input{
+			font-size: 34rpx;
+		}
 	}
 	.loginBtn{
 		width: 630rpx;
@@ -179,4 +182,5 @@
 		margin-top: 172rpx;
 		font-size: 34rpx;
 	}
+	
 </style>