JSY/jsy-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

。

Browse Source
This commit is contained in:
王丹 2024-09-18 18:52:48 +08:00
parent 9e8ad4394b
commit e77620924b
3 changed files with 178 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages.json
View File

@ -13,8 +13,8 @@
}, {
"path": "pages/index",
"style": {
"navigationBarTitleText": "若依移动端框架",
"navigationStyle": "custom"
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#39ac4f"
}
},
{

93
pages/index.vue
View File

@ -75,11 +75,11 @@
<u-row>
<u-col span="3">
<view class="fixed">
<text style="color: #39ac4f;">●</text>
<text class="font-red">●</text>
<view>E0000104</view>
</view>
</u-col>
<u-col span="4" align="center">
<u-col span="4">
<view class="fixed">
<view class="signal">
<view class="bar"></view>
@ -104,11 +104,11 @@
<u-row>
<u-col span="3">
<view class="fixed">
<text style="color: #e60012;">●</text>
<text class="font-green">●</text>
<view>E0000104</view>
</view>
</u-col>
<u-col span="4" align="center">
<u-col span="4">
<view class="fixed">
<view class="signal">
<view class="bar green"></view>
@ -121,9 +121,11 @@
</view>
</view>
<text>(12)</text>
<div class="battery-container">
<div class="battery-level battery-level-60"></div>
</div>
<view class="battery-container">
<text>60</text>
<view class="battery-level battery-level-60">
</view>
</view>
</view>
</u-col>
<u-col span="5">
@ -154,18 +156,48 @@
<u-col span="4">
<view class="fixed">
<view>A1</view>
<text style="color: #39ac4f;">●离线</text>
<text class="font-green">●在线</text>
</view>
</u-col>
<u-col span="5" align="left">
(12)
<u-col span="5">
<view class="battery-container">
<text>60</text>
<view class="battery-level battery-level-60">
</view>
</view>
</u-col>
<u-col span="3" style="align-items: flex-end;">
<u-switch v-model="value" @change="change" size="20"
activeColor="#39ac4f"></u-switch>
</u-col>
</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>
</u-collapse-item>
</u-collapse>
@ -315,10 +347,6 @@
}
.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 {
padding: 10px;
@ -375,6 +403,7 @@
}
}
// 信号
.signal {
position: relative;
@ -439,21 +468,43 @@
// 电池
.battery-container {
margin: 0 10px;
position: relative;
width: 30px;
height: 12px;
width: 31px;
height: 16px;
line-height: 14px;
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;
}
.battery-level {
height: 12px;
position: absolute;
top: 0;
top: 1px;
bottom: 0;
left: 0;
width: 100%;
left: 1px;
width: 90%;
max-width: 90%;
background-color: #4CAF50;
border-radius: 4px;
border-radius: 2px;
transition: width 0.5s;
}

82
static/scss/app.css
View File

@ -1,21 +1,85 @@
/* 徽标数 */
.u-badge{border-radius: 5px !important;}
.u-badge--not-dot {padding: 4px !important;}
.u-badge--success{ background-color: #39ac4f !important;}
.u-badge {
border-radius: 5px !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-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 {
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-line{border-bottom: none !important;}
&>.u-line {
border-bottom: none !important;
}
}
/* 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;
}
}
}