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

91
pages/index.vue
View File

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