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-20 11:27:17 +08:00
parent 48f248c3fb
commit 8934eae67f
1 changed files with 84 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
pages/index.vue
View File

@ -28,32 +28,37 @@
</u-row>
</view>
<view class="content-section">
<view class="grey-box" style="border-radius: 15px 15px 0 0 ; padding-bottom: 0;"
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: -20px']">
<u-grid v-if="isSticky" :border="false" col="4"
style="background: #f3f3f3; margin-bottom: 0; box-shadow: 0 1px 9px rgba(209, 209, 209, 0.5);padding-bottom: 5px;">
<u-grid-item class="click" style="box-shadow: none;">
<text class="text">总设备</text>
<view class="iconfont icon-threshold"></view>
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
<view v-if="isSticky" class="grey-box ceiling"
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
<u-grid :border="false" col="4">
<u-grid-item class="click">
<view class="flex">
<view class="iconfont icon-threshold"></view>
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
</view>
</u-grid-item>
<u-grid-item style="box-shadow: none;">
<text class="text">总设备</text>
<view class="iconfont icon-jizhan"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<u-grid-item>
<view class="flex">
<view class="iconfont icon-jizhan"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
</view>
</u-grid-item>
<u-grid-item style="box-shadow: none;">
<text class="text">总设备</text>
<view class="iconfont icon-lixian"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<u-grid-item>
<view class="flex">
<view class="iconfont icon-lixian"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
</view>
</u-grid-item>
<u-grid-item style="box-shadow: none;">
<text class="text">总设备</text>
<view class="iconfont icon-shangqing"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<u-grid-item>
<view class="flex">
<view class="iconfont icon-shangqing"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
</view>
</u-grid-item>
</u-grid>
<u-grid v-else :border="false" col="4" style=" margin-bottom: 0;">
</view>
<view v-else class="grey-box normal">
<u-grid :border="false" col="4">
<u-grid-item class="click">
<view class="iconfont icon-threshold"></view>
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
@ -237,9 +242,8 @@
</view>
</view>
<u-line-progress height="8" :showText="false" :percentage="60"
style="width: 100%;">
inactiveColor="#c7c7c7" style="width: 75px;margin-top: 5px;">
</u-line-progress>
</u-col>
<u-col span="6">
<view class="valve">
@ -277,6 +281,9 @@
</view>
</u-col>
</u-row>
<view class="font-red">
<view class="iconfont icon-guzhang icon"></view>角度4故障
</view>
</view>
</view>
<view class="card-grey">
@ -483,6 +490,60 @@
position: relative;
top: -92px;
.grey-box.normal {
border-radius: 15px 15px 0 0;
padding-bottom: 0;
.u-grid {
margin-bottom: 0;
}
}
.grey-box.ceiling {
border-radius: 0;
padding-bottom: 0px;
margin: 0;
box-shadow: 0 1px 9px rgba(209, 209, 209, 0.5);
.u-grid {
padding-bottom: 10px;
.u-grid-item {
padding-bottom: 5px;
box-shadow: none;
.flex {
&>view {
margin: -2px 5px 0 0;
color: #39ac4f;
font-size: 50rpx;
}
::v-deep.u-badge {
position: relative;
right: auto;
top: auto;
height: 10px;
}
}
}
.click {
.flex {
&>view {
color: #fff;
}
}
}
}
}
.grey-box {
background-color: #f3f3f3;
margin: 0 10px;