1168 lines
29 KiB
Vue
1168 lines
29 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="ZYC.cn"></u-loading-page>
|
|||
|
|
<view class="card">
|
|||
|
|
<u-sticky>
|
|||
|
|
<view class="player-wrapper">
|
|||
|
|
<div class="container-shell">
|
|||
|
|
<div id="container" @tap='operate' :ref="'container'+refId"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="player-display" />
|
|||
|
|
<view class="kBps"
|
|||
|
|
v-if="statisticsAll && (screensStats.abps || screensStats.buf || screensStats.fps || screensStats.ts || screensStats.vbps)">
|
|||
|
|
<text class="iconfont icon-dian"></text>
|
|||
|
|
<text class="li" v-if="screensStats.abps">{{ statisticsAll.abps }}abps</text>
|
|||
|
|
<text class="li" v-if="screensStats.buf">{{ statisticsAll.buf }}buf</text>
|
|||
|
|
<text class="li" v-if="screensStats.fps">{{ statisticsAll.fps }}fps</text>
|
|||
|
|
<text class="li" v-if="screensStats.ts">{{ statisticsAll.ts }}ts</text>
|
|||
|
|
<text class="li" v-if="screensStats.vbps">{{ statisticsAll.vbps }}vbps</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="tabbar" v-if="isTabbar" @tap="tapTbabar">
|
|||
|
|
<view class="title">
|
|||
|
|
<text class="iconfont icon-fanhui"></text>
|
|||
|
|
<view class="texts">{{ title }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- <u-tabs class="tab_wrap" :list="[{ name: '实时视频' }, { name: '录像回放' }]" @click="tabClick"
|
|||
|
|
lineWidth="60"></u-tabs> -->
|
|||
|
|
<view class="video-tab-bar">
|
|||
|
|
<view v-for="(item, index) in tabs" :key="index"
|
|||
|
|
:class="['video-tab-item', tabIndex === index ? 'video-tab-item-active' : '']"
|
|||
|
|
@click="switchTab(index)">
|
|||
|
|
<image :src="icons[index]" :class="['video-tab-icon', isRotated[index] ? 'rotated' : '']" />
|
|||
|
|
<text>{{ item }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="video-slider" :style="{ left: `${tabIndex * 50}%` }"></view>
|
|||
|
|
</view>
|
|||
|
|
</u-sticky>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="opt_button_wrap">
|
|||
|
|
<view v-if="tabIndex == 0">
|
|||
|
|
<view class="remote-control">
|
|||
|
|
<!-- 圆环中方向控制按钮，圆环中心添加播放按钮 -->
|
|||
|
|
<view class="container-circle">
|
|||
|
|
<view class="circle">
|
|||
|
|
<view class="button top" @click='handlePtz("up")'>
|
|||
|
|
<u-icon name="arrow-up" color="#b9b9b9" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button right" @click='handlePtz("right")'>
|
|||
|
|
<u-icon name="arrow-right" color="#b9b9b9" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button bottom" @click='handlePtz("down")'>
|
|||
|
|
<u-icon name="arrow-down" color="#b9b9b9" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button left" @click='handlePtz("left")'>
|
|||
|
|
<u-icon name="arrow-left" color="#b9b9b9" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<!-- 圆环中心的播放按钮 -->
|
|||
|
|
<view class="button center" @click="operate">
|
|||
|
|
<u-icon name="play-right" color="#b9b9b9" size="30"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 下方的缩放按钮分布于左右两侧 -->
|
|||
|
|
<view class="bottom-controls">
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon-size" @click="handlePtzScale(1)">
|
|||
|
|
<u-icon name="plus" size="24" color="#b9b9b9"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon-size" @click="handlePtzScale(2)">
|
|||
|
|
<u-icon name="minus" size="24" color="#b9b9b9"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="playback_wrap" v-show="tabIndex == 1">
|
|||
|
|
<!-- 页面日期选择按钮 -->
|
|||
|
|
<view class="button-trap">
|
|||
|
|
<!-- 左侧部分 -->
|
|||
|
|
<view class="date_wrap" @click="showcalendar = true">
|
|||
|
|
<uni-icons class="calendar-icon" type="calendar-filled" size="30"></uni-icons>
|
|||
|
|
<u--input readonly :value="playbackDate || '今天'"
|
|||
|
|
customStyle="background:rgba(255, 255, 255,0.1); border:none; padding:6rpx 0; margin-left: 16rpx; width:auto;">
|
|||
|
|
</u--input>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧部分 -->
|
|||
|
|
<view class="date_wrap">
|
|||
|
|
<uni-icons class="calendar-icon" type="download-filled" size="30"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<video-progress-bar></video-progress-bar>
|
|||
|
|
|
|||
|
|
<u-calendar :show="showcalendar" :minDate="minDate" :maxDate="maxDate" month-num="12"
|
|||
|
|
:defaultDate="defaultDate" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部 Tab 栏 -->
|
|||
|
|
<!-- 实时视频部分导航功能 -->
|
|||
|
|
<view class="tab-bar" v-show="tabIndex == 0">
|
|||
|
|
<view class="tab-item" @click="takeScreenshot" :class="{ active: activeTab === 'screenshot' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/screenshot.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">截图</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="tab-item" @click="startRecording" :class="{ active: activeTab === 'record' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/record.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">录制</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 中间凸起的对讲按钮 -->
|
|||
|
|
<view class="tab-item tab-item-center" @touchstart="startIntercom" @touchend="endIntercom"
|
|||
|
|
:class="{ active: intercomActive }">
|
|||
|
|
<view class="tab-icon-wrapper tab-icon-center">
|
|||
|
|
<image src="/static/intercom.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item" @click="controlPanTilt" :class="{ active: activeTab === 'pantilt' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/pantilt.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">云台</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="tab-item" @click="more" :class="{ active: activeTab === 'more' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/more.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">更多</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 录像部分 -->
|
|||
|
|
<view class="tab-bar" v-if="tabIndex == 1">
|
|||
|
|
<view class="tab-item" @click="screenShot" :class="{ active: activeTab === 'screenshot' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/screenshot.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">截图</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="tab-item" @click="operate" :class="{ active: activeTab === 'operate' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/play.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">播放</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="tab-item" @click="startRecording" :class="{ active: activeTab === 'record' }">
|
|||
|
|
<view class="tab-icon-wrapper small-icon">
|
|||
|
|
<image src="/static/record.png" class="tab-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="tab-text">录制</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import VideoProgressBar from './VideoProgressBar.vue';
|
|||
|
|
import props from './props.js';
|
|||
|
|
import {
|
|||
|
|
ptzdirection,
|
|||
|
|
ptzscale
|
|||
|
|
} from '@/apis/modules/sip';
|
|||
|
|
import {
|
|||
|
|
startPlay,
|
|||
|
|
playback,
|
|||
|
|
closeStream,
|
|||
|
|
playbackPause,
|
|||
|
|
playbackReplay,
|
|||
|
|
playbackSeek,
|
|||
|
|
playbackSpeed,
|
|||
|
|
getDevRecord
|
|||
|
|
} from '@/apis/modules/player';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'devicePlayer',
|
|||
|
|
mixins: [props],
|
|||
|
|
components: {
|
|||
|
|
VideoProgressBar
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
if (option.deviceId) {
|
|||
|
|
console.log(option, '携带参数')
|
|||
|
|
this.deviceId = option.deviceId
|
|||
|
|
this.channelId = option.channelSipId
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tabs: ['实时视频', '录像回放'],
|
|||
|
|
icons: [
|
|||
|
|
'../../static/play.png', // 自定义的图标1
|
|||
|
|
'../../static/record.png' // 自定义的图标2
|
|||
|
|
],
|
|||
|
|
tabIndex: 0,
|
|||
|
|
isRotated: [false, false], // 初始化旋转状态
|
|||
|
|
intercomActive: false, // 对讲功能激活状态
|
|||
|
|
activeTab: null, // 当前激活的Tab项
|
|||
|
|
// 设备升级模态窗
|
|||
|
|
show: false,
|
|||
|
|
showcalendar: false,
|
|||
|
|
// 加载图标
|
|||
|
|
loading: false,
|
|||
|
|
// 控制模块标题
|
|||
|
|
title: ' 设备通道 ',
|
|||
|
|
// 选项卡索引
|
|||
|
|
//tabIndex: 0,
|
|||
|
|
queryParams: {
|
|||
|
|
deviceSipId: '', //设备sipid
|
|||
|
|
},
|
|||
|
|
// 通道集合
|
|||
|
|
selectChannel: null,
|
|||
|
|
// 设备信息
|
|||
|
|
deviceId: '',
|
|||
|
|
channelId: '',
|
|||
|
|
streamId: '',
|
|||
|
|
streaminfo: {
|
|||
|
|
ssrc: '',
|
|||
|
|
playurl: ''
|
|||
|
|
},
|
|||
|
|
jessibuca: null,
|
|||
|
|
operateBtns: {
|
|||
|
|
fullscreen: true,
|
|||
|
|
play: true,
|
|||
|
|
ptz: true,
|
|||
|
|
zoom: true,
|
|||
|
|
//record: true,
|
|||
|
|
//audio: true,
|
|||
|
|
//scale: true,
|
|||
|
|
},
|
|||
|
|
statisticsAll: null,
|
|||
|
|
playing: false,
|
|||
|
|
quieting: true,
|
|||
|
|
pausing: false,
|
|||
|
|
queryDate: '',
|
|||
|
|
retryCount: 0,
|
|||
|
|
videoVod: false,
|
|||
|
|
vodData: {},
|
|||
|
|
minDate: "",
|
|||
|
|
maxDate: "",
|
|||
|
|
defaultDate: "",
|
|||
|
|
hisData: [],
|
|||
|
|
playbackDate: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.onerror = (msg) => (this.err = msg);
|
|||
|
|
this.create();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
takeScreenshot() {
|
|||
|
|
this.activeTab = 'screenshot';
|
|||
|
|
console.log('截图');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300); // 稍微延长动画时间
|
|||
|
|
},
|
|||
|
|
startRecording() {
|
|||
|
|
this.activeTab = 'record';
|
|||
|
|
console.log('录制开始');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 用户长按开始对讲
|
|||
|
|
startIntercom() {
|
|||
|
|
this.intercomActive = true;
|
|||
|
|
console.log('对讲开始');
|
|||
|
|
// 这里可以添加对讲逻辑的代码，如开始录音
|
|||
|
|
},
|
|||
|
|
// 用户松开结束对讲
|
|||
|
|
endIntercom() {
|
|||
|
|
this.intercomActive = false;
|
|||
|
|
console.log('对讲结束');
|
|||
|
|
// 这里可以添加对讲结束的逻辑，如停止录音
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
controlPanTilt() {
|
|||
|
|
this.activeTab = 'pantilt';
|
|||
|
|
console.log('云台控制');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300);
|
|||
|
|
},
|
|||
|
|
more() {
|
|||
|
|
this.activeTab = 'more';
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "更多功能尽情期待！",
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmCalendar(n) {
|
|||
|
|
this.playbackDate = n[0];
|
|||
|
|
this.showcalendar = false;
|
|||
|
|
this.queryDate = n;
|
|||
|
|
if (!this.jessibuca) {
|
|||
|
|
this.create();
|
|||
|
|
}
|
|||
|
|
this.loadDevRecord();
|
|||
|
|
},
|
|||
|
|
closeCalendar(n) {
|
|||
|
|
this.showcalendar = false;
|
|||
|
|
},
|
|||
|
|
create() {
|
|||
|
|
const jessibuca = new window.JessibucaPro(
|
|||
|
|
Object.assign({
|
|||
|
|
container: this.$refs['container' + this.refId],
|
|||
|
|
videoBuffer: Number(0.2),
|
|||
|
|
decoder: this.decoder + 'pages_player/static/h5/js/jessibuca-pro/decoder-pro.js',
|
|||
|
|
timeout: 20,
|
|||
|
|
debug: false,
|
|||
|
|
debugLevel: 'debug',
|
|||
|
|
isResize: false,
|
|||
|
|
useWCS: false,
|
|||
|
|
useMSE: false,
|
|||
|
|
useSIMD: true,
|
|||
|
|
wcsUseVideoRender: false,
|
|||
|
|
loadingText: '加载中...',
|
|||
|
|
hasAudio: true,
|
|||
|
|
isFlv: true,
|
|||
|
|
showBandwidth: true,
|
|||
|
|
supportDblclickFullscreen: true,
|
|||
|
|
operateBtns: this.operateBtns,
|
|||
|
|
ptzClickType: 'mouseDownAndUp',
|
|||
|
|
forceNoOffscreen: true,
|
|||
|
|
playbackForwardMaxRateDecodeIFrame: 4,
|
|||
|
|
playbackCurrentTimeMove: false,
|
|||
|
|
networkDelayTimeoutReplay: true
|
|||
|
|
},
|
|||
|
|
this.options
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
this.jessibuca = jessibuca
|
|||
|
|
const _this = this
|
|||
|
|
jessibuca.on('error', function(error) {
|
|||
|
|
console.log('error')
|
|||
|
|
console.log(error)
|
|||
|
|
_this.destroy()
|
|||
|
|
})
|
|||
|
|
jessibuca.on('timeout', function() {
|
|||
|
|
console.log('timeout')
|
|||
|
|
if (_this.retryCount <= 2) {
|
|||
|
|
_this.replay()
|
|||
|
|
_this.retryCount++
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
let pre = 0
|
|||
|
|
let cur = 0
|
|||
|
|
jessibuca.on('timeUpdate', function(ts) {
|
|||
|
|
cur = parseInt(ts / 60000)
|
|||
|
|
if (pre !== cur) {
|
|||
|
|
pre++
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (this.videoVod) {
|
|||
|
|
jessibuca.on('playbackSeek', (timeObj) => {
|
|||
|
|
console.log('playbackSeek!')
|
|||
|
|
_this.seekPlay(timeObj)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
jessibuca.on(JessibucaPro.EVENTS.play, function(play) {
|
|||
|
|
console.log('play success!')
|
|||
|
|
_this.playing = true
|
|||
|
|
})
|
|||
|
|
jessibuca.on(JessibucaPro.EVENTS.pause, function(pause) {
|
|||
|
|
console.log('pause success!')
|
|||
|
|
console.log(pause)
|
|||
|
|
_this.playing = false
|
|||
|
|
})
|
|||
|
|
// jessibuca.on('stats', function (s) {
|
|||
|
|
// console.log('stats is', s)
|
|||
|
|
// })
|
|||
|
|
jessibuca.on(JessibucaPro.EVENTS.ptz, (arrow) => {
|
|||
|
|
console.log('ptz arrow', arrow);
|
|||
|
|
_this.handlePtz(arrow);
|
|||
|
|
})
|
|||
|
|
jessibuca.on(JessibucaPro.EVENTS.crashLog, (value) => {
|
|||
|
|
console.error('crashLog: ', value);
|
|||
|
|
_this.$u.toast({
|
|||
|
|
type: 'error',
|
|||
|
|
message: JSON.stringify(value)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
jessibuca.on(JessibucaPro.EVENTS.close, () => {
|
|||
|
|
!this.isDebug && console.log('jessibuca close');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
_this.cleanPlayer(true);
|
|||
|
|
}, 10)
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
initUrl(data) {
|
|||
|
|
if (data) {
|
|||
|
|
this.streamId = data.streamId
|
|||
|
|
this.streaminfo.ssrc = data.ssrc
|
|||
|
|
this.streaminfo.playurl = data.playurl
|
|||
|
|
} else {
|
|||
|
|
this.streamId = ''
|
|||
|
|
this.streaminfo.ssrc = ''
|
|||
|
|
this.streaminfo.playurl = ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cleanPlayer(stop) {
|
|||
|
|
this.destroy()
|
|||
|
|
if (stop) {
|
|||
|
|
this.stopPlay()
|
|||
|
|
}
|
|||
|
|
this.playing = false
|
|||
|
|
},
|
|||
|
|
destroy() {
|
|||
|
|
if (this.jessibuca) {
|
|||
|
|
this.jessibuca.destroy()
|
|||
|
|
}
|
|||
|
|
switch (this.tabIndex) {
|
|||
|
|
case 0:
|
|||
|
|
this.videoVod = false;
|
|||
|
|
this.operateBtns.ptz = true;
|
|||
|
|
this.operateBtns.zoom = true;
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.videoVod = true;
|
|||
|
|
this.operateBtns.ptz = false;
|
|||
|
|
this.operateBtns.zoom = false;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
// this.create();
|
|||
|
|
},
|
|||
|
|
// 单击选显卡
|
|||
|
|
switchTab(index) {
|
|||
|
|
//console.log(item)
|
|||
|
|
this.tabIndex = index;
|
|||
|
|
this.$set(this.isRotated, index, !this.isRotated[index]);
|
|||
|
|
if (this.playing) {
|
|||
|
|
this.cleanPlayer(true);
|
|||
|
|
}
|
|||
|
|
switch (this.tabIndex) {
|
|||
|
|
case 0:
|
|||
|
|
this.sendDevicePush();
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.initCalendar();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
initCalendar() {
|
|||
|
|
this.defaultDate = new Date();
|
|||
|
|
let minstamp = new Date().getTime() - 1000 * 3600 * 24 * 28 * 12;
|
|||
|
|
let maxstamp = new Date().getTime();
|
|||
|
|
var mindate = new Date(minstamp);
|
|||
|
|
let minmonth = mindate.getMonth() + 1;
|
|||
|
|
let minday = mindate.getDate();
|
|||
|
|
if (minmonth <= 9) {
|
|||
|
|
minmonth = '0' + minmonth;
|
|||
|
|
}
|
|||
|
|
if (minday <= 9) {
|
|||
|
|
minday = '0' + minday;
|
|||
|
|
}
|
|||
|
|
var maxdate = new Date(maxstamp);
|
|||
|
|
let maxmonth = maxdate.getMonth() + 1;
|
|||
|
|
let maxday = maxdate.getDate();
|
|||
|
|
if (maxmonth <= 9) {
|
|||
|
|
maxmonth = '0' + maxmonth;
|
|||
|
|
}
|
|||
|
|
if (maxday <= 9) {
|
|||
|
|
maxday = '0' + maxday;
|
|||
|
|
}
|
|||
|
|
this.minDate = mindate.getFullYear() + '-' + minmonth + '-' + minday;
|
|||
|
|
this.maxDate = maxdate.getFullYear() + '-' + maxmonth + '-' + maxday;
|
|||
|
|
},
|
|||
|
|
//直播控制
|
|||
|
|
sendDevicePush: function() {
|
|||
|
|
console.log("通知设备推流1：" + this.deviceId + " : " + this.channelId);
|
|||
|
|
if (this.channelId) {
|
|||
|
|
startPlay(this.deviceId, this.channelId).then((response) => {
|
|||
|
|
console.log("开始播放：" + this.deviceId + " : " + this.channelId);
|
|||
|
|
let res = response.data;
|
|||
|
|
console.log("playurl：" + res.playurl);
|
|||
|
|
this.streamId = res.streamId;
|
|||
|
|
this.streaminfo.playurl = res.playurl;
|
|||
|
|
this.play();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
play: function() {
|
|||
|
|
this.playing = true;
|
|||
|
|
this.jessibuca.play(this.streaminfo.playurl);
|
|||
|
|
},
|
|||
|
|
operate() {
|
|||
|
|
//这是增加动画效果的
|
|||
|
|
this.activeTab = 'operate';
|
|||
|
|
console.log('播放暂停');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300);
|
|||
|
|
if (!this.videoVod) {
|
|||
|
|
if (this.streaminfo.playurl) {
|
|||
|
|
if (this.playing) {
|
|||
|
|
this.jessibuca.pause();
|
|||
|
|
this.pausing = true;
|
|||
|
|
} else {
|
|||
|
|
this.play();
|
|||
|
|
this.pausing = false;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.sendDevicePush();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.streaminfo.ssrc && this.playing) {
|
|||
|
|
this.pausing = true
|
|||
|
|
this.playing = false
|
|||
|
|
this.jessibuca.playbackPause()
|
|||
|
|
} else {
|
|||
|
|
this.pausing = false
|
|||
|
|
this.playing = true
|
|||
|
|
this.jessibuca.playbackResume()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stopPlay() {
|
|||
|
|
if (this.streamId && this.playing) {
|
|||
|
|
closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
|
|||
|
|
this.pausing = false
|
|||
|
|
this.playing = false
|
|||
|
|
if (this.jessibuca) {
|
|||
|
|
this.retryCount = 0
|
|||
|
|
this.destroy()
|
|||
|
|
}
|
|||
|
|
this.streamId = '';
|
|||
|
|
this.streaminfo = {
|
|||
|
|
ssrc: '',
|
|||
|
|
playurl: ''
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handlePtz(arrow) {
|
|||
|
|
let leftRight = 0;
|
|||
|
|
let upDown = 0;
|
|||
|
|
if (arrow === 'left') {
|
|||
|
|
leftRight = 2;
|
|||
|
|
} else if (arrow === 'right') {
|
|||
|
|
leftRight = 1;
|
|||
|
|
} else if (arrow === 'up') {
|
|||
|
|
upDown = 1;
|
|||
|
|
} else if (arrow === 'down') {
|
|||
|
|
upDown = 2;
|
|||
|
|
}
|
|||
|
|
var data = {
|
|||
|
|
leftRight: leftRight,
|
|||
|
|
upDown: upDown,
|
|||
|
|
moveSpeed: 125
|
|||
|
|
};
|
|||
|
|
ptzdirection(this.deviceId, this.channelId, data).then(async response => {
|
|||
|
|
//console.log("云台方向控制：" + JSON.stringify(response));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handlePtzScale(inOut) {
|
|||
|
|
console.log('云台缩放：' + inOut);
|
|||
|
|
var data = {
|
|||
|
|
inOut: inOut,
|
|||
|
|
scaleSpeed: 30
|
|||
|
|
}
|
|||
|
|
ptzscale(this.deviceId, this.channelId, data);
|
|||
|
|
// 放大/缩小后自动关闭
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ptzscale(this.deviceId, this.channelId, {
|
|||
|
|
inOut: 0,
|
|||
|
|
scaleSpeed: 30
|
|||
|
|
})
|
|||
|
|
}, 800);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//录像控制
|
|||
|
|
loadDevRecord() {
|
|||
|
|
this.cleanPlayer(false);
|
|||
|
|
if (this.deviceId && this.channelId) {
|
|||
|
|
const date = this.queryDate ? new Date(new Date(this.queryDate).toLocaleDateString()).getTime() :
|
|||
|
|
new Date(new Date().toLocaleDateString()).getTime()
|
|||
|
|
const start = date / 1000
|
|||
|
|
const end = Math.floor((date + 24 * 60 * 60 * 1000 - 1) / 1000)
|
|||
|
|
const query = {
|
|||
|
|
start: start,
|
|||
|
|
end: end,
|
|||
|
|
}
|
|||
|
|
getDevRecord(this.deviceId, this.channelId, query).then(async (response) => {
|
|||
|
|
if (response.data != null && response.data.recordItems != null) {
|
|||
|
|
this.hisData = response.data.recordItems
|
|||
|
|
const len = this.hisData.length
|
|||
|
|
if (len > 0) {
|
|||
|
|
if (this.hisData[0].start < start) {
|
|||
|
|
this.vodData = {
|
|||
|
|
start: start,
|
|||
|
|
end: end,
|
|||
|
|
base: start
|
|||
|
|
}
|
|||
|
|
this.hisData[0].start = start
|
|||
|
|
} else {
|
|||
|
|
this.vodData = {
|
|||
|
|
start: this.hisData[0].start,
|
|||
|
|
end: end,
|
|||
|
|
base: start
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.playback(this.hisData)
|
|||
|
|
} else {
|
|||
|
|
this.$u.toast('当前通道没有录像');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$u.toast('当前通道没有录像');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
triggerPlay(playTimes) {
|
|||
|
|
if (this.playing) {
|
|||
|
|
this.jessibuca.on('play', () => {
|
|||
|
|
this.quieting = this.jessibuca.quieting
|
|||
|
|
})
|
|||
|
|
if (this.videoVod) {
|
|||
|
|
this.jessibuca.playback(this.streaminfo.playurl, {
|
|||
|
|
playList: playTimes,
|
|||
|
|
fps: 20, //FPS（定频(本地设置)生效）
|
|||
|
|
showControl: true,
|
|||
|
|
showRateBtn: true,
|
|||
|
|
isUseFpsRender: true, // 是否使用固定的fps渲染，如果设置的fps小于流推过来的，会造成内存堆积甚至溢出
|
|||
|
|
isCacheBeforeDecodeForFpsRender: false, // rfs渲染时，是否在解码前缓存数据
|
|||
|
|
supportWheel: true, // 是否支持滚动轴切换精度。
|
|||
|
|
rateConfig: [{
|
|||
|
|
label: '正常',
|
|||
|
|
value: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '2倍',
|
|||
|
|
value: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '4倍',
|
|||
|
|
value: 4
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '8倍',
|
|||
|
|
value: 8
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
playback(playTimes) {
|
|||
|
|
if (this.deviceId && this.channelId) {
|
|||
|
|
this.pausing = false
|
|||
|
|
if (this.streamId) {
|
|||
|
|
closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
|
|||
|
|
const query = {
|
|||
|
|
start: this.vodData.start,
|
|||
|
|
end: this.vodData.end,
|
|||
|
|
}
|
|||
|
|
playback(this.deviceId, this.channelId, query).then(res => {
|
|||
|
|
this.playing = true
|
|||
|
|
console.log(res.data);
|
|||
|
|
this.initUrl(res.data)
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.triggerPlay(playTimes)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
const query = {
|
|||
|
|
start: this.vodData.start,
|
|||
|
|
end: this.vodData.end,
|
|||
|
|
}
|
|||
|
|
playback(this.deviceId, this.channelId, query).then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
this.playing = true
|
|||
|
|
this.initUrl(res.data)
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.triggerPlay(playTimes)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
scalePlay() {
|
|||
|
|
if (this.streaminfo.ssrc && this.playing) {
|
|||
|
|
playbackSpeed(this.deviceId, this.channelId, this.streamId, this.speed).then(res => {
|
|||
|
|
//this.jessibuca.scale(this.speed)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
seekPlay(s) {
|
|||
|
|
const curTime = this.vodData.base + s.hour * 3600 + s.min * 60 + s.second
|
|||
|
|
const seekRange = curTime - this.vodData.start
|
|||
|
|
if (this.streaminfo.ssrc && this.playing) {
|
|||
|
|
const query = {
|
|||
|
|
seek: seekRange,
|
|||
|
|
}
|
|||
|
|
playbackSeek(this.deviceId, this.channelId, this.streamId, query).then(res => {
|
|||
|
|
this.jessibuca.setPlaybackStartTime(curTime)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
screenShot() {
|
|||
|
|
this.activeTab = 'screenshot';
|
|||
|
|
console.log('截图');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300); // 稍微延长动画时间
|
|||
|
|
if (this.playing) {
|
|||
|
|
this.jessibuca.screenshot()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
replay() {
|
|||
|
|
this.cleanPlayer(false);
|
|||
|
|
if (this.videoVod) {
|
|||
|
|
this.playback(this.hisData);
|
|||
|
|
} else {
|
|||
|
|
this.play();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeSpeed() {
|
|||
|
|
if (this.speed !== val) {
|
|||
|
|
this.speed = val
|
|||
|
|
this.scalePlay()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
this.cleanPlayer(true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '/pages_player/static/icon/iconfont.css';
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
background: radial-gradient(circle, #e9faff, #f5f5f5); // 整体背景颜色变得更亮
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 150rpx;
|
|||
|
|
/* 给底部 Tab 栏留出空间 */
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.player-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
place-content: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 260px;
|
|||
|
|
|
|||
|
|
.player-display {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 4px;
|
|||
|
|
bottom: 48px;
|
|||
|
|
display: flex;
|
|||
|
|
width: 140px;
|
|||
|
|
height: 30px;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container-shell {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#container {
|
|||
|
|
background: rgba(13, 14, 27, 0.7);
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 中部切换录像与直播tab标签
|
|||
|
|
.video-tab-bar {
|
|||
|
|
display: flex;
|
|||
|
|
position: relative;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
background: rgba(244, 246, 246, 1);
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
border-bottom: #767676 solid 1rpx;
|
|||
|
|
//box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #004164; // 使用深蓝色
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
transform: scale(1.1); // 鼠标悬浮时放大
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.video-tab-item-active {
|
|||
|
|
color: #015586; // 激活状态使用更深的蓝色
|
|||
|
|
text-shadow: 0 3rpx 5rpx rgba(2, 119, 189, 0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-tab-icon {
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-tab-icon.rotated {
|
|||
|
|
transform: rotate(360deg); // 激活时旋转
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-slider {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
margin-left: 12.5%;
|
|||
|
|
width: 25%;
|
|||
|
|
height: 7rpx;
|
|||
|
|
background: linear-gradient(90deg, #3588ab, #004b73); // 渐变浅蓝到深蓝色
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
box-shadow: 0 3rpx 8rpx rgba(2, 136, 209, 0.5);
|
|||
|
|
transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); // 添加弹跳效果
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.opt_button_wrap {
|
|||
|
|
margin-top: 40px;
|
|||
|
|
|
|||
|
|
.live_str_wrap {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.live_str_item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.remote-control {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play_btn_wrap {
|
|||
|
|
margin: 10rpx;
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: linear-gradient(145deg, #ffffff, #d8e8f6);
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 更柔和的阴影效果
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
box-shadow: inset 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.1), inset -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.7); // 按下效果更深一些
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container-circle {
|
|||
|
|
margin: 50rpx;
|
|||
|
|
position: relative;
|
|||
|
|
width: 375rpx;
|
|||
|
|
height: 375rpx;
|
|||
|
|
|
|||
|
|
.circle {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: radial-gradient(circle, #d8e8f6, #fff);
|
|||
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 外圈阴影调整
|
|||
|
|
|
|||
|
|
&:before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 175rpx;
|
|||
|
|
height: 175rpx;
|
|||
|
|
//background: radial-gradient(circle, #d0e6f6, #d0e6f6); // 中间渐变效果
|
|||
|
|
border-radius: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
box-shadow: inset 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1), inset -4rpx -4rpx 8rpx rgba(255, 255, 255, 0.7); // 内圈拟态效果
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 110rpx;
|
|||
|
|
background-color: rgba(221, 239, 251, 0.1); // 更亮的白色背景
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: box-shadow 0.3s;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
box-shadow: inset 5rpx 5rpx 15rpx rgba(0, 0, 0, 0.1), inset -5rpx -5rpx 15rpx rgba(255, 255, 255, 0.7);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, 0%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
top: 50%;
|
|||
|
|
right: 0;
|
|||
|
|
transform: translate(0%, -50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom {
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, 0%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
top: 50%;
|
|||
|
|
left: 0;
|
|||
|
|
transform: translate(0%, -50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 播放按钮居中 */
|
|||
|
|
.center {
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
background: linear-gradient(145deg, #ffffff, #d8e8f6); // 中心按钮渐变背景
|
|||
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 中心按钮拟态效果
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-controls {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
width: 80%;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.playback_wrap {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
background-color: rgba(244, 246, 246, 0.1);
|
|||
|
|
|
|||
|
|
.button-trap {
|
|||
|
|
margin-top: -30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
/* 将内容分布在左右两侧 */
|
|||
|
|
align-items: center;
|
|||
|
|
/* 垂直居中对齐 */
|
|||
|
|
width: 100%;
|
|||
|
|
/* 容器宽度为 100% */
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
/* 外边距，适配不同屏幕 */
|
|||
|
|
.date_wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: rgba(248, 248, 248, 0.8);
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.calendar-icon {
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
/* 图标与输入框的间距 */
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
u--input {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
/* 输入框字体大小 */
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button_wrap {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-top: 56px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Tab栏整体 */
|
|||
|
|
.tab-bar {
|
|||
|
|
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 130rpx;
|
|||
|
|
background: radial-gradient(circle, #d0e6f6, #f0faff);
|
|||
|
|
/* 浅蓝色渐变背景 */
|
|||
|
|
box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.25);
|
|||
|
|
/* 强化阴影 */
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
border-top-left-radius: 50rpx;
|
|||
|
|
border-top-right-radius: 50rpx;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
transition: background 0.5s ease;
|
|||
|
|
z-index:999
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 单个Tab项 */
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 中间凸起的对讲按钮 */
|
|||
|
|
.tab-item-center {
|
|||
|
|
position: relative;
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
margin-bottom: 35rpx;
|
|||
|
|
|
|||
|
|
background-color: #d8ebf8;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 中间对讲按钮图标 */
|
|||
|
|
.tab-icon-center {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: radial-gradient(circle, #42a7ff, #3cabff, #9ed8f6, #cbf0ff);
|
|||
|
|
|
|||
|
|
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
|
|||
|
|
|
|||
|
|
.tab-icon {
|
|||
|
|
width: 55rpx;
|
|||
|
|
height: 55rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* Tab激活时的状态 */
|
|||
|
|
.tab-item.active .small-icon {
|
|||
|
|
transform: translateY(0rpx) scale(1.1);
|
|||
|
|
/* 激活时上浮并放大 */
|
|||
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
|
|||
|
|
/* 动态阴影 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标的容器 */
|
|||
|
|
.tab-icon-wrapper {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background-color: #f0faff;
|
|||
|
|
/* 与背景保持一致的浅蓝色 */
|
|||
|
|
border-radius: 50%;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标 */
|
|||
|
|
.tab-icon {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 文字 */
|
|||
|
|
.tab-text {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #555;
|
|||
|
|
transition: color 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 点击时的效果 */
|
|||
|
|
.tab-item:active .tab-icon-wrapper {
|
|||
|
|
//transform: scale(1.1) rotate(0deg); /* 增强的放大和旋转效果 */
|
|||
|
|
background-color: #a3d7ff;
|
|||
|
|
/* 浅蓝色点击效果背景 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item:active .tab-text {
|
|||
|
|
color: #1e90ff;
|
|||
|
|
/* 点击时文字变为蓝色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item-center:active .tab-icon-center {
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
box-shadow: 0 15rpx 25rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item-center:active {
|
|||
|
|
height: 140rpx;
|
|||
|
|
//margin-bottom: 100rpx; /* 突出效果 */
|
|||
|
|
}
|
|||
|
|
</style>
|