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

.

Browse Source
This commit is contained in:
Iruka 2024-09-19 18:13:43 +08:00
parent 000e62c0fd
commit 533129aa9a
1 changed files with 67 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
pages/index.vue
View File

@ -29,28 +29,52 @@
</view>
<view class="content-section">
<view class="grey-box">
<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>
<text class="text">总设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-jizhan"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">在线设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-lixian"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">离线设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-shangqing"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">土壤墒情</text>
</u-grid-item>
</u-grid>
<view style="z-index: 10; top: 0" :style="[isSticky ? 'position: sticky;':'']">
<u-grid :border="false" col="4" v-if="!isSticky">
<u-grid-item class="click">
<view class="iconfont icon-threshold"></view>
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
<text class="text">总设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-jizhan"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">在线设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-lixian"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">离线设备</text>
</u-grid-item>
<u-grid-item>
<view class="iconfont icon-shangqing"></view>
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
<text class="text">土壤墒情</text>
</u-grid-item>
</u-grid>
<u-grid :border="false" col="4" v-if="isSticky" style="background: #fff;">
<u-grid-item class="click">
<text class="text">总设备</text>
<view class="iconfont icon-threshold"></view>
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
</u-grid-item>
<u-grid-item>
<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>
<u-grid-item>
<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>
<u-grid-item>
<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>
</u-grid>
</view>
<view class="card">
<u-collapse accordion>
<u-collapse-item>
@ -227,7 +251,8 @@
<view class="right">-99.63</view>
<view class="bottom">-99.63</view>
</view>
<image src="../static/images/valves/valve3-all.gif" mode="widthFix">
<image src="../static/images/valves/valve3-all.gif"
mode="widthFix">
</image>
</view>
<view>
@ -284,7 +309,7 @@
<text>0.00</text>
<view class="iconfont icon-suoding icon"></view>
</view>
</view>
</u-col>
<u-col span="6">
@ -302,7 +327,8 @@
<view class="right">-99.63</view>
<view class="bottom">-99.63</view>
</view>
<image src="../static/images/fiveValves/valve5.png" mode="widthFix">
<image src="../static/images/fiveValves/valve5.png"
mode="widthFix">
</image>
</view>
<view>
@ -339,6 +365,7 @@
export default {
data() {
return {
isSticky: false,
show: false,
landList: [1, 2, 3],
value: false,
@ -353,6 +380,15 @@
plus.navigator.setFullscreen(false);
// #endif
},
onPageScroll(e) {
// 页面滚动触发事件的处理函数
// console.log(e.scrollTop); // 输出滚动位置的垂直距离
if (e.scrollTop >= 100) {
this.isSticky = true;
} else {
this.isSticky = false;
}
},
methods: {
ceshi(e) {
console.error("ceshi:", e);
@ -432,7 +468,12 @@
border-color: #ffffff !important;
}
}
.content{background-color: #fff;min-height: 100%;}
.content {
background-color: #fff;
min-height: 100%;
}
.content-section {
position: relative;
top: -92px;