SmartBeehive/pages/Apiary/addVadio.vue
2024-06-21 18:04:01 +08:00

136 lines
2.3 KiB
Vue

<template>
<view class="page">
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
:title-bold='true' height='45' id="navbar">
</u-navbar>
<view class="tit">
蜂场名称
</view>
<view class="iptbox">
<input type="text" class="ips" v-model="code" placeholder="请输入监控名称"
placeholder-class="my-placeholder" />
</view>
<view class="tit">
设备ID或视频流地址
</view>
<view class="iptbox">
<input type="text" class="ips" v-model="code" placeholder="设备ID或视频流地址"
placeholder-class="my-placeholder" />
</view>
<view class="tit">
添加视频监控
</view>
<view class="iptbox">
<input type="text" class="ips" v-model="code" placeholder="请输入操控接口地址"
placeholder-class="my-placeholder" />
</view>
<view class="btn">
确认添加
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
title: "添加视频监控",
}
},
onLoad() {
},
onShow() {
},
methods: {
addApiary(){
uni.navigateTo({
url:'/pages/Apiary/AddApiary'
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #F4FAF8;
}
.page {
// position: relative;
width: 750rpx;
.tit {
margin-top: 40rpx;
margin-left: 50rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.imgbox{
margin-top: 28rpx;
margin-left: 46rpx;
image{
width: 412rpx;
height: 222rpx;
}
}
.btn{
margin: 160rpx auto;
// position: fixed;
display: flex;
align-items: center;
justify-content: center;
// bottom: 100rpx;
// left: 46rpx;
width: 658rpx;
height: 88rpx;
background: #FFCC25;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
}
.iptbox {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 22rpx;
margin: 28rpx auto 0;
width: 658rpx;
height: 88rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.ips {
width: 630rpx;
}
image {
width: 18rpx;
height: 32rpx;
}
.my-placeholder {
font-weight: 400;
font-size: 32rpx;
color: #808080;
}
}
}
</style>