|
@@ -1,19 +1,26 @@
|
|
|
+<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>
|
|
|
|
|
|
<div class="video">
|
|
|
- <video class="video11" :src="options[1].value" autoplay controls loop muted></video>
|
|
|
+ <video class="video11" :src="video" autoplay controls loop muted></video>
|
|
|
</div>
|
|
|
<div class="rightContent">
|
|
|
<div class="top">
|
|
|
<div class="font">苗情设备</div>
|
|
|
<div class="selectItem">
|
|
|
- <el-select size="small" v-model="value" placeholder="请选择">
|
|
|
+ <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>
|
|
@@ -23,17 +30,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import videofarm1 from '@/assets/video/videofarm1.mp4';
|
|
|
- import videofarm2 from '@/assets/video/videofarm2.mp4';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ video: videofarm1,
|
|
|
options: [{
|
|
|
- value: 'videofarm1',
|
|
|
+ value: videofarm1,
|
|
|
label: '设备一'
|
|
|
}, {
|
|
|
- value: 'videofarm2',
|
|
|
+ value: videofarm2,
|
|
|
label: '设备二'
|
|
|
}, {
|
|
|
value: '选项3',
|
|
@@ -41,13 +46,17 @@
|
|
|
}, {
|
|
|
value: '选项4',
|
|
|
label: '设备四'
|
|
|
- },],
|
|
|
+ }, ],
|
|
|
value: ''
|
|
|
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ select(val) {
|
|
|
+ this.video=val;
|
|
|
+ console.log(11111111,val)
|
|
|
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -64,8 +73,11 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 20rem;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1rem ;
|
|
|
+ border-color:rgb(200, 250, 255,0.3);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.rightContent {
|
|
|
margin-top: 30rem;
|
|
|
width: 165rem;
|
|
@@ -81,8 +93,8 @@
|
|
|
width: 70rem;
|
|
|
height: 30rem;
|
|
|
float: left;
|
|
|
- color:rgb(200, 250, 255);
|
|
|
- text-align: left;
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
|
|
@@ -102,26 +114,29 @@
|
|
|
display: inline-block;
|
|
|
float: right;
|
|
|
}
|
|
|
- .top{
|
|
|
+
|
|
|
+ .top {
|
|
|
height: 60rem;
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .midFont{
|
|
|
+
|
|
|
+ .midFont {
|
|
|
font-size: 14rem;
|
|
|
margin-top: 5rem;
|
|
|
- color: rgb(200, 250, 255);
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
text-align: left;
|
|
|
padding-left: 20rem;
|
|
|
background: url('@/assets/images/jiankong.png') no-repeat;
|
|
|
- background-size: 10%,10%;
|
|
|
+ background-size: 10%, 10%;
|
|
|
}
|
|
|
- .midbottomFont{
|
|
|
- margin-top:30rem;
|
|
|
+
|
|
|
+ .midbottomFont {
|
|
|
+ margin-top: 30rem;
|
|
|
font-size: 14rem;
|
|
|
- color:rgb(200, 250, 255);
|
|
|
+ color: rgb(200, 250, 255);
|
|
|
text-align: left;
|
|
|
padding-left: 20rem;
|
|
|
background: url('@/assets/images/shijian.png') no-repeat;
|
|
|
- background-size: 11%,11%;
|
|
|
+ background-size: 11%, 11%;
|
|
|
}
|
|
|
</style>
|