。
This commit is contained in:
王丹
parent
9e8ad4394b
commit
e77620924b
@ -13,8 +13,8 @@
|
|||||||
}, {
|
}, {
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "若依移动端框架",
|
"navigationBarTitleText": "",
|
||||||
"navigationStyle": "custom"
|
"navigationBarBackgroundColor": "#39ac4f"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
143
pages/index.vue
143
pages/index.vue
@ -75,11 +75,11 @@
|
|||||||
<u-row>
|
<u-row>
|
||||||
<u-col span="3">
|
<u-col span="3">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<text style="color: #39ac4f;">●</text>
|
<text class="font-red">●</text>
|
||||||
<view>E0000104</view>
|
<view>E0000104</view>
|
||||||
</view>
|
</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="4" align="center">
|
<u-col span="4">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<view class="signal">
|
<view class="signal">
|
||||||
<view class="bar"></view>
|
<view class="bar"></view>
|
||||||
@ -104,11 +104,11 @@
|
|||||||
<u-row>
|
<u-row>
|
||||||
<u-col span="3">
|
<u-col span="3">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<text style="color: #e60012;">●</text>
|
<text class="font-green">●</text>
|
||||||
<view>E0000104</view>
|
<view>E0000104</view>
|
||||||
</view>
|
</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="4" align="center">
|
<u-col span="4">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<view class="signal">
|
<view class="signal">
|
||||||
<view class="bar green"></view>
|
<view class="bar green"></view>
|
||||||
@ -121,9 +121,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text>(12)</text>
|
<text>(12)</text>
|
||||||
<div class="battery-container">
|
<view class="battery-container">
|
||||||
<div class="battery-level battery-level-60"></div>
|
<text>60</text>
|
||||||
</div>
|
<view class="battery-level battery-level-60">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="5">
|
<u-col span="5">
|
||||||
@ -154,18 +156,48 @@
|
|||||||
<u-col span="4">
|
<u-col span="4">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<view>A1</view>
|
<view>A1</view>
|
||||||
<text style="color: #39ac4f;">●离线</text>
|
<text class="font-green">●在线</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="5" align="left">
|
<u-col span="5">
|
||||||
(12)
|
<view class="battery-container">
|
||||||
|
<text>60</text>
|
||||||
|
<view class="battery-level battery-level-60">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="3" style="align-items: flex-end;">
|
<u-col span="3" style="align-items: flex-end;">
|
||||||
<u-switch v-model="value" @change="change" size="20"
|
<u-switch v-model="value" @change="change" size="20"
|
||||||
activeColor="#39ac4f"></u-switch>
|
activeColor="#39ac4f"></u-switch>
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-row>
|
</u-row>
|
||||||
|
<view class="card-grey">
|
||||||
|
<view class="title">
|
||||||
|
<u-row>
|
||||||
|
<u-col span="3">
|
||||||
|
<view><text class="font-green">●</text>1-1</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="4">
|
||||||
|
<view class="fixed">
|
||||||
|
<view class="battery-container">
|
||||||
|
<text>60</text>
|
||||||
|
<view class="battery-level battery-level-60">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="iconfont icon-wendu icon"></view>26.2
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="5" style="align-items: flex-end;">
|
||||||
|
<view class="fixed">
|
||||||
|
<u-button type="success" size="mini" text="刷新" icon="reload"></u-button>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-collapse-item>
|
</u-collapse-item>
|
||||||
</u-collapse>
|
</u-collapse>
|
||||||
@ -178,7 +210,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import store from "@/store"
|
import store from "@/store"
|
||||||
import plugin from "@/plugins"
|
import plugin from "@/plugins"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -315,10 +347,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
margin-bottom: 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
|
||||||
|
|
||||||
::v-deep.u-cell__body {
|
::v-deep.u-cell__body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -332,7 +360,7 @@
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -375,109 +403,132 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 信号
|
// 信号
|
||||||
.signal {
|
.signal {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background-color: #999;
|
background-color: #999;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar:nth-child(1) {
|
.bar:nth-child(1) {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar:nth-child(2) {
|
.bar:nth-child(2) {
|
||||||
height: 7px;
|
height: 7px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar:nth-child(3) {
|
.bar:nth-child(3) {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar:nth-child(4) {
|
.bar:nth-child(4) {
|
||||||
height: 13px;
|
height: 13px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar:nth-child(5) {
|
.bar:nth-child(5) {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar.red {
|
.bar.red {
|
||||||
background-color: #e60012;
|
background-color: #e60012;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar.orange {
|
.bar.orange {
|
||||||
background-color: #ffa200;
|
background-color: #ffa200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar.green {
|
.bar.green {
|
||||||
background-color: #39ac4f;
|
background-color: #39ac4f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-no {
|
.bar-no {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -2px;
|
left: -2px;
|
||||||
bottom: 3px;
|
bottom: 3px;
|
||||||
|
|
||||||
::v-deep.u-icon__icon {
|
::v-deep.u-icon__icon {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 18rpx !important;
|
font-size: 18rpx !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 电池
|
// 电池
|
||||||
.battery-container {
|
.battery-container {
|
||||||
|
margin: 0 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 30px;
|
width: 31px;
|
||||||
height: 12px;
|
height: 16px;
|
||||||
|
line-height: 14px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
text {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.battery-container::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: -2px;
|
||||||
|
width: 1px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #333;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level {
|
.battery-level {
|
||||||
|
height: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 1px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 1px;
|
||||||
width: 100%;
|
width: 90%;
|
||||||
|
max-width: 90%;
|
||||||
background-color: #4CAF50;
|
background-color: #4CAF50;
|
||||||
border-radius: 4px;
|
border-radius: 2px;
|
||||||
transition: width 0.5s;
|
transition: width 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 不同的电量级别 */
|
/* 不同的电量级别 */
|
||||||
.battery-level-100 {
|
.battery-level-100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level-80 {
|
.battery-level-80 {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level-60 {
|
.battery-level-60 {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level-40 {
|
.battery-level-40 {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level-20 {
|
.battery-level-20 {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-level-0 {
|
.battery-level-0 {
|
||||||
width: 0%;
|
width: 0%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,21 +1,85 @@
|
|||||||
/* 徽标数 */
|
/* 徽标数 */
|
||||||
.u-badge{border-radius: 5px !important;}
|
.u-badge {
|
||||||
.u-badge--not-dot {padding: 4px !important;}
|
border-radius: 5px !important;
|
||||||
.u-badge--success{ background-color: #39ac4f !important;}
|
|
||||||
/* tabs标签 */
|
|
||||||
.u-tabs__wrapper__nav__line{background-color: #39ac4f !important;}
|
|
||||||
/* 按钮 */
|
|
||||||
.u-button{width: fit-content !important;}
|
|
||||||
.u-button--square{border-radius: 5px !important;}
|
|
||||||
.u-button--small{height: 25px !important;}
|
|
||||||
.u-button--success[data-v-5ce41ee6] {
|
|
||||||
background-color: #39ac4f !important;
|
|
||||||
border-color: #39ac4f !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-badge--not-dot {
|
||||||
|
padding: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-badge--success {
|
||||||
|
background-color: #39ac4f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs标签 */
|
||||||
|
.u-tabs__wrapper__nav__line {
|
||||||
|
background-color: #39ac4f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮 */
|
||||||
|
.u-button {
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-button--square {
|
||||||
|
border-radius: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-button--small {
|
||||||
|
height: 25px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-button--success[data-v-5ce41ee6] {
|
||||||
|
background-color: #39ac4f !important;
|
||||||
|
border-color: #39ac4f !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 列表 */
|
/* 列表 */
|
||||||
.u-collapse-item{
|
.u-collapse-item {
|
||||||
&>.u-line{border-bottom: none !important;}
|
&>.u-line {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fixed */
|
/* fixed */
|
||||||
.fixed{display: flex;align-items: center;flex-direction: row;}
|
.fixed {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 字体颜色 */
|
||||||
|
.font-red {
|
||||||
|
color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-orange {
|
||||||
|
color: #ffa200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-green {
|
||||||
|
color: #39ac4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片 */
|
||||||
|
.card,
|
||||||
|
.card-grey {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grey {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grey {
|
||||||
|
.title {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #c7c7c7;
|
||||||
|
.icon {
|
||||||
|
color: #39ac4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user