fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

录像查询更换日期后先清空原先的查询列表

pull/1/head
Lawrence 4 years ago
parent
37e97a782c
commit
9b18c33dd8
1 changed files with 421 additions and 423 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 844
      web_src/src/components/gb28181/devicePlayer.vue

844
web_src/src/components/gb28181/devicePlayer.vue
View File

@ -1,195 +1,191 @@
<template>
<div id="devicePlayer">
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
<LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live ></LivePlayer>
<div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName">
<el-tab-pane label="实时视频" name="media">
<div style="margin-bottom: 0.5rem;">
<!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
<!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button>-->
<!-- <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>-->
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
</div>
</el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
<el-tab-pane label="录像查询" name="record">
<el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期"
@change="queryRecords()"></el-date-picker>
<!-- <el-slider style="margin: 0 1rem 1rem 1rem;"-->
<!-- v-model="timeVal"-->
<!-- :min="timeMin"-->
<!-- :max="timeMax"-->
<!-- :step="5"-->
<!-- :marks="getTimeMakrs()"-->
<!-- :format-tooltip="formatTooltip">-->
<!-- </el-slider>-->
<!-- <range-slider :min="timeMin"-->
<!-- :max="timeMax"-->
<!-- :step="5"></range-slider>-->
<div id="devicePlayer">
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
<LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
<div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName">
<el-tab-pane label="实时视频" name="media">
<div style="margin-bottom: 0.5rem;">
<!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
<!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button>-->
<!-- <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>-->
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
</div>
</el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
<el-tab-pane label="录像查询" name="record">
<el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker>
<!-- <el-slider style="margin: 0 1rem 1rem 1rem;"-->
<!-- v-model="timeVal"-->
<!-- :min="timeMin"-->
<!-- :max="timeMax"-->
<!-- :step="5"-->
<!-- :marks="getTimeMakrs()"-->
<!-- :format-tooltip="formatTooltip">-->
<!-- </el-slider>-->
<!-- <range-slider :min="timeMin"-->
<!-- :max="timeMax"-->
<!-- :step="5"></range-slider>-->
<!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
<!-- @change="recordList()"></el-date-picker>-->
<el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="文件" prop="filePath"></el-table-column>
<el-table-column label="开始时间" prop="startTime" :formatter="timeFormatter"></el-table-column>
<el-table-column label="结束时间" prop="endTime" :formatter="timeFormatter"></el-table-column>
<!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
<!-- @change="recordList()"></el-date-picker>-->
<el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="文件" prop="filePath"></el-table-column>
<el-table-column label="开始时间" prop="startTime" :formatter="timeFormatter"></el-table-column>
<el-table-column label="结束时间" prop="endTime" :formatter="timeFormatter"></el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!--遥控界面-->
<el-tab-pane label="云台控制" name="control">
<div style="display: flex; justify-content: center;">
<div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-top"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-left"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-bottom"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-right"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
</div>
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
@mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
</div>
</div>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!--遥控界面-->
<el-tab-pane label="云台控制" name="control">
<div style="display: flex; justify-content: center;">
<div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-top"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-left"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-bottom"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-right"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
</div>
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
name: 'devicePlayer',
props: {},
components: {
LivePlayer
},
computed: {
getPlayerShared: function() {
import LivePlayer from '@liveqing/liveplayer'
export default {
name: 'devicePlayer',
props: {},
components: {
LivePlayer
},
computed: {
getPlayerShared: function () {
return {
sharedUrl: window.location.host + '/' + this.videoUrl,
sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
sharedRtmp: this.videoUrl
};
}
},
created() {},
data() {
return {
sharedUrl: window.location.host + '/' + this.videoUrl,
sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
sharedRtmp: this.videoUrl
};
}
},
created() {
},
data() {
return {
video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '',
videoHistory: {
date: '',
searchHistoryResult: [] //媒体流历史记录搜索结果
},
timeMakrs:{
// 0 : "0:00",
// // 60 : "1:00",
// 120 : "2:00",
// // 180 : "3:00",
// 240 : "4:00",
// // 300 : "5:00",
// 360 : "6:00",
// // 420 : "7:00",
// 480 : "8:00",
// 540 : "9:00",
600: "10:00",
// 660 : "11:00",
720 : "12:00",
// 780 : "13:00",
840 : "14:00",
// 900 : "15:00",
960 : "16:00",
// 1020 : "17:00",
1080 : "18:00",
// 1140 : "19:00",
// 1200 : "20:00",
// // 1260 : "21:00",
// 1320 : "22:00",
// // 1380 : "23:00",
// 1440 : "24:00"
},
showVideoDialog: false,
ssrc: '',
deviceId: '',
channelId: '',
tabActiveName: 'media',
hasaudio: false,
loadingRecords: false,
recordsLoading: false,
timeVal: 0,
timeMin: 0,
timeMax: 1440,
video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '',
videoHistory: {
date: '',
searchHistoryResult: [] //媒体流历史记录搜索结果
},
timeMakrs: {
// 0 : "0:00",
// // 60 : "1:00",
// 120 : "2:00",
// // 180 : "3:00",
// 240 : "4:00",
// // 300 : "5:00",
// 360 : "6:00",
// // 420 : "7:00",
// 480 : "8:00",
// 540 : "9:00",
600: "10:00",
// 660 : "11:00",
720: "12:00",
// 780 : "13:00",
840: "14:00",
// 900 : "15:00",
960: "16:00",
// 1020 : "17:00",
1080: "18:00",
// 1140 : "19:00",
// 1200 : "20:00",
// // 1260 : "21:00",
// 1320 : "22:00",
// // 1380 : "23:00",
// 1440 : "24:00"
},
showVideoDialog: false,
ssrc: '',
deviceId: '',
channelId: '',
tabActiveName: 'media',
hasaudio: false,
loadingRecords: false,
recordsLoading: false,
timeVal: 0,
timeMin: 0,
timeMax: 1440,
};
},
methods: {
openDialog: function (tab, deviceId, channelId, param) {
this.tabActiveName = tab;
this.channelId = channelId;
this.deviceId = deviceId;
this.ssrc = "";
this.videoUrl = ""
if (!!this.$refs.videoPlayer) {
this.$refs.videoPlayer.pause();
}
};
},
methods: {
openDialog: function (tab, deviceId, channelId, param) {
this.tabActiveName = tab;
this.channelId = channelId;
this.deviceId = deviceId;
this.ssrc = "";
this.videoUrl = ""
if (!!this.$refs.videoPlayer) {
this.$refs.videoPlayer.pause();
}
switch(tab) {
case "media":
this.play(param.streamInfo, param.hasAudio)
break;
case "record":
this.showVideoDialog = true;
switch (tab) {
case "media":
this.play(param.streamInfo, param.hasAudio)
break;
case "record":
this.showVideoDialog = true;
this.videoHistory.date = param.date;
this.queryRecords()
break;
case "control":
break;
}
},
timeAxisSelTime:function (val) {
console.log(val)
},
getTimeMakrs(){
return this.timeMakrs;
},
this.videoHistory.date = param.date;
this.queryRecords()
break;
case "control":
break;
}
},
timeAxisSelTime: function (val) {
console.log(val)
},
getTimeMakrs() {
return this.timeMakrs;
},
play: function (streamInfo, hasAudio) {
this.hasaudio = hasAudio;
// 根据媒体流信息二次判断
@ -236,276 +232,278 @@
);
},
queryRecords: function() {
if (!this.videoHistory.date) {
return;
}
this.recordsLoading = true;
let that = this;
var startTime = this.videoHistory.date + " 00:00:00";
var endTime = this.videoHistory.date + " 23:59:59";
this.$axios({
method: 'get',
url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
}).then(function(res) {
// 处理时间信息
that.videoHistory.searchHistoryResult = res.data.recordList;
that.recordsLoading = false;
}).catch(function(e) {
// that.videoHistory.searchHistoryResult = falsificationData.recordData;
});
queryRecords: function () {
if (!this.videoHistory.date) {
return;
}
this.recordsLoading = true;
this.videoHistory.searchHistoryResult = [];
let that = this;
var startTime = this.videoHistory.date + " 00:00:00";
var endTime = this.videoHistory.date + " 23:59:59";
this.$axios({
method: 'get',
url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
}).then(function (res) {
// 处理时间信息
that.videoHistory.searchHistoryResult = res.data.recordList;
that.recordsLoading = false;
}).catch(function (e) {
console.log(e.message);
// that.videoHistory.searchHistoryResult = falsificationData.recordData;
});
},
onTimeChange: function (video) {
// this.queryRecords()
},
playRecord: function(row) {
let that = this;
if (that.ssrc != "") {
that.stopPlayRecord(function (){
that.ssrc = "",
that.playRecord(row);
})
}else {
this.$axios({
method: 'get',
url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime
}).then(function(res) {
var streamInfo = res.data;
that.ssrc = streamInfo.ssrc;
that.videoUrl = streamInfo.ws_flv;
});
}
},
stopPlayRecord: function (callback) {
this.$refs.videoPlayer.pause();
this.videoUrl = '';
this.$axios({
method: 'get',
url: '/api/playback/' + this.ssrc + '/stop'
}).then(function(res) {
if (callback) callback()
});
},
ptzCamera: function(leftRight, upDown, zoom) {
console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
let that = this;
this.$axios({
method: 'post',
url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
}).then(function(res) {});
},
//////////////////////播放器事件处理//////////////////////////
videoError:function(e){
console.log("播放器错误："+JSON.stringify(e));
},
formatTooltip:function(val) {
var h = parseInt(val/60);
var hStr = h< 10 ? ("0" + h):h;
var s = val%60;
var sStr = s< 10 ? ("0" + s):s;
return h + ":" + sStr;
},
timeFormatter: function (row, column, cellValue, index) {
return cellValue.split( " ")[1];
},
mergeTime: function (timeArray) {
var resultArray = [];
for (let i = 0; i < timeArray.length; i++) {
var startTime = new Date(timeArray[i].startTime);
var endTime = new Date(timeArray[i].endTime);
if (i ==0) {
resultArray[0] = {
startTime: startTime,
endTime: endTime
},
onTimeChange: function (video) {
// this.queryRecords()
},
playRecord: function (row) {
let that = this;
if (that.ssrc != "") {
that.stopPlayRecord(function () {
that.ssrc = "",
that.playRecord(row);
})
} else {
this.$axios({
method: 'get',
url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime
}).then(function (res) {
var streamInfo = res.data;
that.ssrc = streamInfo.ssrc;
that.videoUrl = streamInfo.ws_flv;
});
}
}
for (let j = 0; j < resultArray.length; j++) {
if (startTime > resultArray[j].endTime ) { // 合并
if (startTime - resultArray[j].endTime <= 1000){
resultArray[j].endTime = endTime;
}else {
resultArray[resultArray.length] = {
startTime: startTime,
endTime: endTime
},
stopPlayRecord: function (callback) {
this.$refs.videoPlayer.pause();
this.videoUrl = '';
this.$axios({
method: 'get',
url: '/api/playback/' + this.ssrc + '/stop'
}).then(function (res) {
if (callback) callback()
});
},
ptzCamera: function (leftRight, upDown, zoom) {
console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
let that = this;
this.$axios({
method: 'post',
url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
}).then(function (res) {});
},
//////////////////////播放器事件处理//////////////////////////
videoError: function (e) {
console.log("播放器错误：" + JSON.stringify(e));
},
formatTooltip: function (val) {
var h = parseInt(val / 60);
var hStr = h < 10 ? ("0" + h) : h;
var s = val % 60;
var sStr = s < 10 ? ("0" + s) : s;
return h + ":" + sStr;
},
timeFormatter: function (row, column, cellValue, index) {
return cellValue.split(" ")[1];
},
mergeTime: function (timeArray) {
var resultArray = [];
for (let i = 0; i < timeArray.length; i++) {
var startTime = new Date(timeArray[i].startTime);
var endTime = new Date(timeArray[i].endTime);
if (i == 0) {
resultArray[0] = {
startTime: startTime,
endTime: endTime
}
}
}
}else if(resultArray[j].startTime > endTime ) { // 合并
if (resultArray[j].startTime - endTime <= 1000) {
resultArray[j].startTime = startTime;
}else {
resultArray[resultArray.length] = {
startTime: startTime,
endTime: endTime
for (let j = 0; j < resultArray.length; j++) {
if (startTime > resultArray[j].endTime) { // 合并
if (startTime - resultArray[j].endTime <= 1000) {
resultArray[j].endTime = endTime;
} else {
resultArray[resultArray.length] = {
startTime: startTime,
endTime: endTime
}
}
} else if (resultArray[j].startTime > endTime) { // 合并
if (resultArray[j].startTime - endTime <= 1000) {
resultArray[j].startTime = startTime;
} else {
resultArray[resultArray.length] = {
startTime: startTime,
endTime: endTime
}
}
}
}
}
}
}
console.log(resultArray)
return resultArray;
}
console.log(resultArray)
return resultArray;
}
}
};
}
};
</script>
<style>
.control-wrapper {
position: relative;
width: 6.25rem;
height: 6.25rem;
max-width: 6.25rem;
max-height: 6.25rem;
margin: 0 auto;
border-radius: 100%;
float: left;
}
.control-wrapper {
position: relative;
width: 6.25rem;
height: 6.25rem;
max-width: 6.25rem;
max-height: 6.25rem;
margin: 0 auto;
border-radius: 100%;
float: left;
}
.control-btn {
display: flex;
justify-content: center;
position: absolute;
width: 44%;
height: 44%;
border-radius: 5px;
border: 1px solid #78aee4;
box-sizing: border-box;
transition: all 0.3s linear;
}
.control-btn {
display: flex;
justify-content: center;
position: absolute;
width: 44%;
height: 44%;
border-radius: 5px;
border: 1px solid #78aee4;
box-sizing: border-box;
transition: all 0.3s linear;
}
.control-btn i {
font-size: 20px;
color: #78aee4;
display: flex;
justify-content: center;
align-items: center;
}
.control-btn i {
font-size: 20px;
color: #78aee4;
display: flex;
justify-content: center;
align-items: center;
}
.control-round {
position: absolute;
top: 21%;
left: 21%;
width: 58%;
height: 58%;
background: #fff;
border-radius: 100%;
}
.control-round {
position: absolute;
top: 21%;
left: 21%;
width: 58%;
height: 58%;
background: #fff;
border-radius: 100%;
}
.control-round-inner {
position: absolute;
left: 15%;
top: 15%;
display: flex;
justify-content: center;
align-items: center;
width: 70%;
height: 70%;
font-size: 40px;
color: #78aee4;
border: 1px solid #78aee4;
border-radius: 100%;
transition: all 0.3s linear;
}
.control-round-inner {
position: absolute;
left: 15%;
top: 15%;
display: flex;
justify-content: center;
align-items: center;
width: 70%;
height: 70%;
font-size: 40px;
color: #78aee4;
border: 1px solid #78aee4;
border-radius: 100%;
transition: all 0.3s linear;
}
.control-inner-btn {
position: absolute;
width: 60%;
height: 60%;
background: #fafafa;
}
.control-inner-btn {
position: absolute;
width: 60%;
height: 60%;
background: #fafafa;
}
.control-top {
top: -8%;
left: 27%;
transform: rotate(-45deg);
border-radius: 5px 100% 5px 0;
}
.control-top {
top: -8%;
left: 27%;
transform: rotate(-45deg);
border-radius: 5px 100% 5px 0;
}
.control-top i {
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-top i {
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-top .control-inner {
left: -1px;
bottom: 0;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-top .control-inner {
left: -1px;
bottom: 0;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-top .fa {
transform: rotate(45deg) translateY(-7px);
}
.control-top .fa {
transform: rotate(45deg) translateY(-7px);
}
.control-left {
top: 27%;
left: -8%;
transform: rotate(45deg);
border-radius: 5px 0 5px 100%;
}
.control-left {
top: 27%;
left: -8%;
transform: rotate(45deg);
border-radius: 5px 0 5px 100%;
}
.control-left i {
transform: rotate(-45deg);
}
.control-left i {
transform: rotate(-45deg);
}
.control-left .control-inner {
right: -1px;
top: -1px;
border-bottom: 1px solid #78aee4;
border-left: 1px solid #78aee4;
border-radius: 0 0 0 100%;
}
.control-left .control-inner {
right: -1px;
top: -1px;
border-bottom: 1px solid #78aee4;
border-left: 1px solid #78aee4;
border-radius: 0 0 0 100%;
}
.control-left .fa {
transform: rotate(-45deg) translateX(-7px);
}
.control-left .fa {
transform: rotate(-45deg) translateX(-7px);
}
.control-right {
top: 27%;
right: -8%;
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-right {
top: 27%;
right: -8%;
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-right i {
transform: rotate(-45deg);
}
.control-right i {
transform: rotate(-45deg);
}
.control-right .control-inner {
left: -1px;
bottom: -1px;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-right .control-inner {
left: -1px;
bottom: -1px;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-right .fa {
transform: rotate(-45deg) translateX(7px);
}
.control-right .fa {
transform: rotate(-45deg) translateX(7px);
}
.control-bottom {
left: 27%;
bottom: -8%;
transform: rotate(45deg);
border-radius: 0 5px 100% 5px;
}
.control-bottom {
left: 27%;
bottom: -8%;
transform: rotate(45deg);
border-radius: 0 5px 100% 5px;
}
.control-bottom i {
transform: rotate(-45deg);
}
.control-bottom i {
transform: rotate(-45deg);
}
.control-bottom .control-inner {
top: -1px;
left: -1px;
border-bottom: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 0 100% 0;
}
.control-bottom .control-inner {
top: -1px;
left: -1px;
border-bottom: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 0 100% 0;
}
.control-bottom .fa {
transform: rotate(-45deg) translateY(7px);
}
.control-bottom .fa {
transform: rotate(-45deg) translateY(7px);
}
</style>

Write Preview
Loading…
Cancel
Save