259 lines
5.8 KiB
Vue
259 lines
5.8 KiB
Vue
<template>
|
|
<view class="videoLive">
|
|
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="摄像机01"
|
|
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
|
|
|
|
<view class="center">
|
|
<view class="video_live">
|
|
<image src="/static/videoLive.png" mode=""></image>
|
|
</view>
|
|
|
|
<view class="skills">
|
|
<view class="left">
|
|
<image src="/static/direction_keys.png" mode=""></image>
|
|
<image class="left_arrow" src="/static/left_arrow.png" mode=""></image>
|
|
<image class="right_arrow" src="/static/right_arrow.png" mode=""></image>
|
|
<image class="up_arrow" src="/static/up_arrow.png" mode=""></image>
|
|
<image class="down_arrow" src="/static/down_arrow.png" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="right_item">
|
|
<view :class="flag1?'add_act':'add'" @click="focus_addClick">
|
|
<image src="/static/add_act.png" mode="" v-if="flag1==true"></image>
|
|
<image src="/static/add.png" mode="" v-if="flag1==false"></image>
|
|
</view>
|
|
<view class="focus">
|
|
焦距
|
|
</view>
|
|
<view :class="flag1?'subtract':'subtract_act'" @click="focus_subtractClick">
|
|
<image src="/static/subtract.png" mode="" v-if="flag1==true"></image>
|
|
<image src="/static/subtract_act.png" mode="" v-if="flag1==false"></image>
|
|
</view>
|
|
</view>
|
|
<view class="right_item">
|
|
<view :class="flag2?'add_act':'add'" @click="scale_addClick">
|
|
<image src="/static/add_act.png" mode="" v-if="flag2==true"></image>
|
|
<image src="/static/add.png" mode="" v-if="flag2==false"></image>
|
|
</view>
|
|
<view class="focus">
|
|
缩放
|
|
</view>
|
|
<view :class="flag2?'subtract':'subtract_act'" @click="scale_subtractClick">
|
|
<image src="/static/subtract.png" mode="" v-if="flag2==true"></image>
|
|
<image src="/static/subtract_act.png" mode="" v-if="flag2==false"></image>
|
|
</view>
|
|
</view>
|
|
<view class="right_item">
|
|
<view :class="flag3?'add_act':'add'" @click="aperture_addClick">
|
|
<image src="/static/add_act.png" mode="" v-if="flag3==true"></image>
|
|
<image src="/static/add.png" mode="" v-if="flag3==false"></image>
|
|
</view>
|
|
<view class="focus">
|
|
光圈
|
|
</view>
|
|
<view :class="flag3?'subtract':'subtract_act'" @click="aperture_subtractClick">
|
|
<image src="/static/subtract.png" mode="" v-if="flag3==true"></image>
|
|
<image src="/static/subtract_act.png" mode="" v-if="flag3==false"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 头部导航背景
|
|
background: {
|
|
backgroundColor: '#24B383',
|
|
},
|
|
|
|
flag1:true,
|
|
flag2:true,
|
|
flag3:true,
|
|
};
|
|
},
|
|
methods:{
|
|
// 焦距
|
|
focus_addClick(){
|
|
this.flag1 = true
|
|
},
|
|
focus_subtractClick(){
|
|
this.flag1 = false
|
|
},
|
|
// 缩放
|
|
scale_addClick(){
|
|
this.flag2 = true
|
|
},
|
|
scale_subtractClick(){
|
|
this.flag2 = false
|
|
},
|
|
// 光圈
|
|
aperture_addClick(){
|
|
this.flag3 = true
|
|
},
|
|
aperture_subtractClick(){
|
|
this.flag3 = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.videoLive{
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #F5F6FA;
|
|
|
|
.center{
|
|
|
|
.video_live{
|
|
width: 750rpx;
|
|
height: 970rpx;
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.skills{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 61rpx 0 0 40rpx;
|
|
display: flex;
|
|
|
|
.left{
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
position: relative;
|
|
margin-right: 60rpx;
|
|
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.left_arrow,.right_arrow{
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
}
|
|
.left_arrow{
|
|
position: absolute;
|
|
top: 155rpx;
|
|
left: 47rpx;
|
|
}
|
|
.right_arrow{
|
|
position: absolute;
|
|
top: 155rpx;
|
|
right: 45rpx;
|
|
}
|
|
.up_arrow,.down_arrow{
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
}
|
|
.up_arrow{
|
|
position: absolute;
|
|
top: 42rpx;
|
|
left: 157rpx;
|
|
}
|
|
.down_arrow{
|
|
position: absolute;
|
|
bottom: 40rpx;
|
|
left: 157rpx;
|
|
}
|
|
}
|
|
|
|
.right{
|
|
box-sizing: border-box;
|
|
padding-top: 10rpx;
|
|
|
|
|
|
.right_item{
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
background: #EFFAF6;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 7rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.add{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #EFFAF6;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
.add_act{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
|
|
.focus{
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #24B383;
|
|
}
|
|
|
|
.subtract{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #EFFAF6;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image{
|
|
width: 38rpx;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
.subtract_act{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #24B383;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image{
|
|
width: 38rpx;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|