xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
wszhyWx/pages/editSite/editSite.vue

375 lines
8.3 KiB
Vue
Raw Normal View History

add
2023-10-05 02:26:25 +00:00
<template>
<view class="editSite">
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="编辑站点"
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
<view class="content">
<view class="siteInfo">
<u-field v-model="childSite" label="子站点" required :clearable='false' label-width='163'
input-align='right' placeholder-style='color:#DDDDDD' :auto-height='false'>
</u-field>
<u-field v-model="siteName" label="站点名称" required :clearable='false' label-width='163'
input-align='right' placeholder-style='color:#DDDDDD' :auto-height='false'>
</u-field>
<u-field v-model="sort" label="排序" :clearable='false' label-width='163' input-align='right'
placeholder-style='color:#DDDDDD' :auto-height='false'>
</u-field>
<u-field v-model="siteDescribe" label="站点描述" :clearable='false' label-width='163' input-align='right'
placeholder-style='color:#DDDDDD' :auto-height='false'>
</u-field>
</view>
<view class="greenhouse_controller">
<view class="title">
温室控制器
</view>
<view class="input">
<u-input v-model="value" :type="type" :border="border" :auto-height='false' :clearable='false' />
</view>
<view class="btn">
<view class="edit">
<image src="../../static/edit.png" mode=""></image>
<text>编辑</text>
</view>
<view class="delete">
删除
</view>
</view>
</view>
<view class="camera">
<text class="left">摄像机</text>
<view class="right">
<image src="../../static/add_camera.png" mode=""></image>
<text>摄像机</text>
</view>
</view>
<view class="deviceInfo">
<view class="title">
<text>设备名称</text>
<text>设备类型</text>
<text>品牌</text>
<text>操作</text>
</view>
<view class="detail">
<text>摄像机#2</text>
<text>网络摄像机</text>
<text>海康威视</text>
<view class="controlBtn">
<text class="editBtn">编辑</text>
<text class="deleteBtn">删除</text>
</view>
</view>
</view>
<view class="main_camera">
<text class="left">主摄像机</text>
<view class="right">
摄像机#2
<image src="../../static/downArrow.png" mode=""></image>
</view>
</view>
</view>
<view class="save">
<view class="save_btn">
<image src="../../static/save_image.png" mode=""></image>
保存
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: '#24B383',
},
childSite: '1111111',
siteName: '温室#1',
sort: '01',
siteDescribe: '温室#2描述信息'
};
}
}
</script>
<style lang="scss" scoped>
.editSite {
width: 100%;
min-height: 100vh;
background-color: #F5F6FA;
.content {
box-sizing: border-box;
padding: 21rpx 30rpx 0 30rpx;
.siteInfo {
width: 690rpx;
// height: 412rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
box-sizing: border-box;
padding-left: 30rpx;
}
.greenhouse_controller {
width: 690rpx;
height: 280rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx 30rpx;
margin-top: 30rpx;
.title {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
}
.input {
width: 630rpx;
height: 80rpx;
background: #F5F6FA;
border: 2px solid #E1E2E6;
border-radius: 10rpx;
margin: 20rpx 0 30rpx;
}
.btn {
display: flex;
.edit {
width: 140rpx;
height: 60rpx;
background: linear-gradient(0deg, #57CFA6, #25B383);
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
>image {
width: 25rpx;
height: 26rpx;
margin-right: 10rpx;
}
>text {
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
}
}
.delete {
width: 140rpx;
height: 60rpx;
background: #FFEFEF;
border: 2px solid rgba(255, 99, 99, 0.3);
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FF6363;
}
}
}
.camera{
width: 690rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
border-radius: 20rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 0rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.left{
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
}
.right{
width: 140rpx;
height: 60rpx;
background: linear-gradient(0deg, #57CFA6, #25B383);
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
>image{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
>text{
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
}
}
}
.deviceInfo{
width: 690rpx;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
border-radius: 20rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 30rpx;
.title{
width: 630rpx;
height: 60rpx;
background: #F5F6FA;
display: flex;
align-items: center;
justify-content: space-around;
>text{
width: 25%;
text-align: center;
}
}
.detail{
width: 630rpx;
// height: 60rpx;
display: flex;
align-items: center;
padding: 20rpx 0;
>text{
width: 25%;
text-align: center;
}
.controlBtn{
width: 25%;
display: flex;
text-align: center;
.editBtn{
width: 80rpx;
height: 54rpx;
background: linear-gradient(0deg, #57CFA6, #25B383);
border-radius: 10rpx;
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.deleteBtn{
width: 80rpx;
height: 54rpx;
background: #FFEFEF;
border: 2px solid rgba(255,99,99,0.3);
border-radius: 10rpx;
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FF6363;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.main_camera{
width: 690rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
border-radius: 20rpx;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
.left,.right{
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.right{
display: flex;
align-items: center;
>image{
width: 16rpx;
height: 8rpx;
margin-left: 20rpx;
}
}
}
}
.save{
width: 750rpx;
height: 180rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 32rpx 4rpx rgba(216,221,230,0.75);
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.save_btn{
width: 660rpx;
height: 110rpx;
background: linear-gradient(0deg, #57CFA6, #25B383);
box-shadow: 0rpx 3rpx 15rpx 0rpx rgba(36,179,131,0.35);
border-radius: 15rpx;
font-size: 38rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
>image{
width: 38rpx;
height: 40rpx;
margin-right: 16rpx;
}
}
}
}
</style>