|
@@ -1,53 +1,70 @@
|
|
|
|
+<script setup>
|
|
|
|
+ import videofarm1 from '@/assets/video/videofarm1.mp4';
|
|
|
|
+ import videofarm2 from '@/assets/video/videofarm2.mp4';
|
|
|
|
+ import nongye from '@/assets/images/farm.jpg';
|
|
|
|
+ import nongye2 from '@/assets/images/farm2.jpg';
|
|
|
|
+</script>
|
|
|
|
+
|
|
<template>
|
|
<template>
|
|
|
|
|
|
<div class="video">
|
|
<div class="video">
|
|
- <video class="video11" autoplay controls loop muted></video>
|
|
|
|
|
|
+ <video class="video11" :src="video" autoplay controls loop muted></video>
|
|
</div>
|
|
</div>
|
|
<div class="rightContent">
|
|
<div class="rightContent">
|
|
- <div class="font">苗情设备</div>
|
|
|
|
- <div class="selectItem">
|
|
|
|
- <el-select size="small" v-model="value" placeholder="请选择">
|
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
|
- </el-option>
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <div class="top">
|
|
|
|
+ <div class="font">苗情设备</div>
|
|
|
|
+ <div class="selectItem">
|
|
|
|
+ <el-select size="small" v-model="value" placeholder="请选择" @change="select">
|
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="mid">
|
|
|
|
+ <div class="midFont">监控区域:<span>测试园区玉米</span></div>
|
|
|
|
+ <div class="midbottomFont">采集时间:<span>2023-05-06</span> </div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
+
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ video: videofarm1,
|
|
options: [{
|
|
options: [{
|
|
- value: '选项1',
|
|
|
|
|
|
+ value: videofarm1,
|
|
label: '设备一'
|
|
label: '设备一'
|
|
}, {
|
|
}, {
|
|
- value: '选项2',
|
|
|
|
|
|
+ value: videofarm2,
|
|
label: '设备二'
|
|
label: '设备二'
|
|
}, {
|
|
}, {
|
|
value: '选项3',
|
|
value: '选项3',
|
|
label: '设备三'
|
|
label: '设备三'
|
|
}, {
|
|
}, {
|
|
value: '选项4',
|
|
value: '选项4',
|
|
- label: '设备一'
|
|
|
|
- }, {
|
|
|
|
- value: '选项5',
|
|
|
|
- label: '设备五'
|
|
|
|
- }],
|
|
|
|
|
|
+ label: '设备四'
|
|
|
|
+ }, ],
|
|
value: ''
|
|
value: ''
|
|
|
|
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ select(val) {
|
|
|
|
+ this.video=val;
|
|
|
|
+ console.log(11111111,val)
|
|
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
.video {
|
|
.video {
|
|
- margin-top: 20rem;
|
|
|
|
|
|
+ margin-top: 25rem;
|
|
width: 180rem;
|
|
width: 180rem;
|
|
- height: 180rem;
|
|
|
|
|
|
+ height: 165rem;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
float: left;
|
|
float: left;
|
|
}
|
|
}
|
|
@@ -55,61 +72,71 @@
|
|
.video11 {
|
|
.video11 {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ border-radius: 20rem;
|
|
|
|
+ border-style: solid;
|
|
|
|
+ border-width: 1rem ;
|
|
|
|
+ border-color:rgb(200, 250, 255,0.3);
|
|
}
|
|
}
|
|
|
|
|
|
.rightContent {
|
|
.rightContent {
|
|
- margin-top: 20rem;
|
|
|
|
|
|
+ margin-top: 30rem;
|
|
width: 165rem;
|
|
width: 165rem;
|
|
height: 300rem;
|
|
height: 300rem;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
-
|
|
|
|
float: right;
|
|
float: right;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.font {
|
|
.font {
|
|
margin-top: 10rem;
|
|
margin-top: 10rem;
|
|
|
|
+ font-size: 16rem;
|
|
width: 70rem;
|
|
width: 70rem;
|
|
height: 30rem;
|
|
height: 30rem;
|
|
float: left;
|
|
float: left;
|
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
|
+ text-align: left;
|
|
}
|
|
}
|
|
|
|
|
|
- .el-dropdown-link {
|
|
|
|
- cursor: pointer;
|
|
|
|
- color: #409EFF;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .el-icon-arrow-down {
|
|
|
|
- font-size: 12px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .el-select-dropdown__item {
|
|
|
|
- color: #409eff !important;
|
|
|
|
- padding: 0 32rem 0 20rem;
|
|
|
|
- height: 34rem;
|
|
|
|
- line-height: 34rem;
|
|
|
|
- font-size: 14rem;
|
|
|
|
- }
|
|
|
|
|
|
|
|
::v-deep .el-input__inner {
|
|
::v-deep .el-input__inner {
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .el-input__wrapper {
|
|
::v-deep .el-input__wrapper {
|
|
- background-color: rgba(255, 255, 255, 0) !important;;
|
|
|
|
- color: #0e294d !important;;
|
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0) !important;
|
|
|
|
+ color: #0e294d !important;
|
|
}
|
|
}
|
|
|
|
|
|
.selectItem {
|
|
.selectItem {
|
|
- margin-top: 5rem;
|
|
|
|
|
|
+ margin-top: 10rem;
|
|
width: 90rem;
|
|
width: 90rem;
|
|
height: 5rem;
|
|
height: 5rem;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
float: right;
|
|
float: right;
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ .top {
|
|
|
|
+ height: 60rem;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ .midFont {
|
|
|
|
+ font-size: 14rem;
|
|
|
|
+ margin-top: 5rem;
|
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
|
+ text-align: left;
|
|
|
|
+ padding-left: 20rem;
|
|
|
|
+ background: url('@/assets/images/jiankong.png') no-repeat;
|
|
|
|
+ background-size: 10%, 10%;
|
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ .midbottomFont {
|
|
|
|
+ margin-top: 30rem;
|
|
|
|
+ font-size: 14rem;
|
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
|
+ text-align: left;
|
|
|
|
+ padding-left: 20rem;
|
|
|
|
+ background: url('@/assets/images/shijian.png') no-repeat;
|
|
|
|
+ background-size: 11%, 11%;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|