chuangte/SmartBeehive
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
44e9dae6e8
SmartBeehive/pages/Beehive.vue

440 lines
9.6 KiB
Vue
Raw Normal View History

111
2024-06-11 18:02:55 +08:00
<template>
<view class="page">
11
2024-06-21 18:04:01 +08:00
<u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#000'
title-size='36' height='45' id="navbar">
111
2024-06-11 18:02:55 +08:00
</u-navbar>
11
2024-06-21 18:04:01 +08:00
<view class="top_cont">
<view class="top_box">
<view class="search">
<image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image>
<view class="search_center">
<input type="text" class="ips" v-model="code" placeholder="请输入蜂箱编号"
placeholder-class="my-placeholder" />
</view>
</view>
<view class="add" @click="addApiary()">
<image src="https://api.ccttiot.com/smartmeter/img/static/uR30yYn3IsHDu5qWV0ML" mode=""></image>
</view>
</view>
<view class="tabbar">
<view class="cont" v-for="item in 6 " :key="item">
福鼎蜂场（10）
</view>
</view>
</view>
<view class="warp_box">
<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
@change="swiperchange">
<swiper-item >
<view class="swiper-item ">
<view class="card_box" @click="todetail(item.deviceId)">
<view class="card">
<view class="card_top">
<view class="name">
福鼎蜂场-001
</view>
<view class="online">
离线
</view>
<view class="type">
已认养
</view>
<view class="ele">
<image src="https://api.ccttiot.com/smartmeter/img/static/uWDVO6wzl5tRe8X3rmhT" mode=""></image>
90%
</view>
</view>
<view class="card_top" style="margin-top: 20rpx;">
<view class="txt">
21111145
</view>
<view class="line"></view>
<view class="txt">
福鼎蜂场
</view>
<view class="line"></view>
<view class="txt">
2024-05-15 09:09:33
</view>
</view>
<view class="info_cont">
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD" mode=""></image>
<view class="li_txt">
0.0
<span>kg</span>
</view>
</view>
<view class="li_bot">
重量
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy" mode=""></image>
<view class="li_txt">
0
<span>只</span>
</view>
</view>
<view class="li_bot">
进出量
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/una6Kbd2gdBZ9gG6lg44" mode=""></image>
<view class="li_txt">
0.0
<span>%</span>
</view>
</view>
<view class="li_bot">
箱内湿度
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/utoKXhZBoejfRZwNUMP9" mode=""></image>
<view class="li_txt">
0.0
<span>℃</span>
</view>
</view>
<view class="li_bot">
箱内温度
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/um4lfl5q2O7FNM1EQc2L" mode=""></image>
<view class="li_txt">
0.0
<span>&</span>
</view>
</view>
<view class="li_bot">
二氧化碳
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/up9IaGzSg1RKhIZz3V7a" mode=""></image>
<view class="li_txt">
0.0
<span>Hz</span>
</view>
</view>
<view class="li_bot">
频率
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujmGWuQ8Xibi5qoOqN0B" mode=""></image>
<view class="li_txt">
0.0
<span>&</span>
</view>
</view>
<view class="li_bot">
箱外湿度
</view>
</view>
<view class="info_li">
<view class="li_top">
<image src="https://api.ccttiot.com/smartmeter/img/static/uWjV9HEHrP5g0B5AHD1j" mode=""></image>
<view class="li_txt">
0.0
<span>℃</span>
</view>
</view>
<view class="li_bot">
箱外温度
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
111
2024-06-11 18:02:55 +08:00
11
2024-06-21 18:04:01 +08:00
</swiper>
</view>
<view class="no_cont" v-if="false">
<view class="img">
<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
</view>
<view class="txt">
当前还没有添加蜂箱哦
</view>
</view>
111
2024-06-11 18:02:55 +08:00
<tab-bar :indexs='2' style=""></tab-bar>
11
2024-06-21 18:04:01 +08:00
111
2024-06-11 18:02:55 +08:00
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #FAFDFD",
},
11
2024-06-21 18:04:01 +08:00
code: '',
swiperHeight:554,
curtitidx:0
111
2024-06-11 18:02:55 +08:00
}
},
onLoad() {
11
2024-06-21 18:04:01 +08:00
111
2024-06-11 18:02:55 +08:00
},
onShow() {
11
2024-06-21 18:04:01 +08:00
111
2024-06-11 18:02:55 +08:00
},
methods: {
11
2024-06-21 18:04:01 +08:00
swiperchange(e) {
this.curtitidx = e.detail.current
// console.log(e, 'aaaa');
},
111
2024-07-01 10:06:13 +08:00
addApiary(){
uni.navigateTo({
url:'/page_Beehive/add_Beehive'
})
}
11
2024-06-21 18:04:01 +08:00
111
2024-06-11 18:02:55 +08:00
}
}
</script>
11
2024-06-21 18:04:01 +08:00
<style lang="scss">
page {
background-color: #FAFDFD;
}
.page {
// position: relative;
width: 750rpx;
.swiper {
.swiper-item {
height: 100%;
.card_box {
margin: 0 auto;
padding: 20rpx 24rpx;
margin-top: 24rpx;
width: 674rpx;
height: 506rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.info_cont{
display: flex;
flex-wrap: wrap;
.info_li:nth-child(3n){
margin-right: 0;
}
.info_li{
margin-top: 28rpx;
width: 33%;
// margin-right: 82rpx;
.li_top{
display: flex;
flex-wrap: nowrap;
image{
width: 46rpx;
height: 46rpx;
}
.li_txt{
margin-left: 22rpx;
display: flex;
align-items: flex-start;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
span{
font-size: 20rpx;
}
}
}
.li_bot{
margin-left: 4rpx;
margin-top: 14rpx;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
}
.card_top{
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt{
font-weight: 500;
font-size: 24rpx;
color: #808080;
}
.line{
margin-left: 18rpx;
margin-right: 18rpx;
width: 0rpx;
height: 30rpx;
border: 2rpx solid #808080;
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.online{
margin-left: 26rpx;
padding: 6rpx 10rpx;
background: #4CD964;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
.type{
margin-left: 24rpx;
padding: 6rpx 10rpx;
background: #FFC107;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
.ele{
margin-left: auto;
display: flex;
align-items: center;
flex-wrap: nowrap;
font-weight: 400;
font-size: 28rpx;
color: #808080;
image{
margin-right: 12rpx;
width: 46rpx;
height: 46rpx;
}
}
}
}
}
}
.top_cont {
padding: 0 38rpx;
.tabbar::-webkit-scrollbar {
width: 0 !important;
}
.tabbar {
display: flex;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
/* 防止换行 */
-webkit-overflow-scrolling: touch;
/* 优化触摸滚动 */
.cont {
margin-right: 20rpx;
font-weight: 400;
font-size: 36rpx;
color: #3D3D3D;
}
}
.top_box {
margin: 42rpx auto;
display: flex;
flex-wrap: nowrap;
width: 664rpx;
.search {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 20rpx 26rpx;
width: 566rpx;
height: 82rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
image {
width: 35.97rpx;
height: 35.97rpx;
}
.search_center {
margin-left: 34rpx;
width: 480rpx;
.ips {
// 基本样式设置
width: 100%; // 根据需要调整
// border: 1px solid #ccc; // 根据需要调整
// 设置 placeholder 样式
}
.my-placeholder {
font-weight: 400;
font-size: 32rpx;
color: #808080;
}
}
}
.add {
margin-left: 30rpx;
width: 66rpx;
height: 66rpx;
}
}
}
.no_cont {
margin: 152rpx auto 0;
width: 432rpx;
.img {
image {
width: 432rpx;
height: 432rpx;
}
}
.txt {
margin-top: 50rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #808080;
}
}
}
</style>
Reference in New Issue Copy Permalink