Skip to content

Y
yanshouyi-Minipro
Commit 301ed0ea authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

首页样式 图表logo

parent 6823bec3
Show whitespace changes
Inline Side-by-side
Showing with 91 additions and 27 deletions
pages/home/home.vue
View file @ 301ed0ea
<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>
</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>
<span>炮孔设计数据导入</span>
<!-- <button size="mini" class="funcBtn" type="primary" @click="navTo('import')">导入导出</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 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/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
View file @ 301ed0ea
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment