orgStatus.vue
1.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
<view class="status-page">
<f-navbar navbarType="2" @leftClick="leftClick">
<view class="u-flex" slot="left" style="justify-content: space-between;flex-direction: row;">
<view style="width: 700rpx;"><u--input prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view>
</view>
</f-navbar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="status-container">
<view @click="openStatusDetail(item.id)" v-for="(item, index) in list" :key="index" class="status-item u-flex" style="flex-direction: column;justify-content: space-between;">
<view style="margin-top: 38rpx;"><image style="width: 198rpx;height: 119rpx;" :src="item.icon" mode=""></image></view>
<view style="position: relative;top: -25rpx;">
<text style="color: #333333;font-size: 14px;">{{ item.name }}</text>
</view>
</view>
</view>
<f-tabbar></f-tabbar>
</view>
</template>
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import fNavbar from '@/components/module/f-navbar/f-navbar';
export default {
components: {
fTabbar,
fNavbar
},
data() {
return {
list: [
{
id:1,
name: '智慧办公室1',
icon: '../../../static/test.png'
},
{
id:2,
name: '智慧办公室2',
icon: '../../../static/test.png'
},
]
};
},
onLoad() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
methods: {
leftClick() {
return false;
},
openStatusDetail(e){
console.log(e);
uni.navigateTo({
url:'statusDetail'
})
}
}
};
</script>
<style lang="scss" scoped>
.status-page {
padding: 15rpx 15rpx;
}
.status-container {
width: 700rpx;
height: 250rpx;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
flex-direction: row;
.status-item {
width: 300rpx;
height: 250rpx;
margin: 23rpx;
background-color: #ffffff;
border-radius: 20px;
}
}
</style>