1027 lines
27 KiB
Vue
1027 lines
27 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">
|
|||
|
|
<web-view :src="webviewSrc" ref="webview" @onPostMessage="handlePostMessage"></web-view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 切换直播和录像的tab栏 -->
|
|||
|
|
<!-- <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>
|
|||
|
|
<!-- <u-row>
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon-size" @click="handlePtzScale(1)">
|
|||
|
|
<u-icon name="plus" size="24" color="#fff"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">放大</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="container-circle">
|
|||
|
|
<view class="circle">
|
|||
|
|
<view class="button top" @click='handlePtz("up")'>
|
|||
|
|
<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button right" @click='handlePtz("right")'>
|
|||
|
|
<u-icon name="arrow-right" color="#fff" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button bottom" @click='handlePtz("down")'>
|
|||
|
|
<u-icon name="arrow-down" color="#fff" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="button left" @click='handlePtz("left")'>
|
|||
|
|
<u-icon name="arrow-left" color="#fff" size="22"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon-size" @click="handlePtzScale(2)">
|
|||
|
|
<u-icon name="minus" size="24" color="#fff"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">缩小</text>
|
|||
|
|
</view>
|
|||
|
|
</u-row>
|
|||
|
|
<view class="live_str_item">
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon" @click="operate" :disabled="playing">
|
|||
|
|
<u-icon name="play-circle" size="30"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">播放</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon" @click="operate" :disabled="!playing">
|
|||
|
|
<u-icon name="pause-circle" size="30"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">暂停</text>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="playback_wrap" v-if="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-row justify="space-between" gutter="0">
|
|||
|
|
<u-col span="6" align="center">
|
|||
|
|
<view class="date_wrap" @click="showcalendar = true">
|
|||
|
|
<u--input readonly placeholderStyle="color:#000;" placeholder="选择录像日期"
|
|||
|
|
customStyle="background:#f8f8f8;padding:12rpx 40rpx;width:222rpx;" shape="circle"
|
|||
|
|
suffixIcon="arrow-rightward" suffixIconStyle="color:#606266" fontSize="28rpx"
|
|||
|
|
:value="playbackDate"></u--input>
|
|||
|
|
</view>
|
|||
|
|
</u-col>
|
|||
|
|
<u-col span="6" align="center">
|
|||
|
|
<view>
|
|||
|
|
<u--input readonly placeholderStyle="color:#000;" placeholder="设备存储"
|
|||
|
|
customStyle="background:#f8f8f8;padding:12rpx 40rpx;width:222rpx;" shape="circle"
|
|||
|
|
suffixIcon="arrow-rightward" suffixIconStyle="color:#606266" fontSize="28rpx"></u--input>
|
|||
|
|
</view>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row> -->
|
|||
|
|
<!-- <view class="button_wrap">
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon" @click="operate" :disabled="playing">
|
|||
|
|
<u-icon name="play-circle" size="30"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">播放</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon" @click="operate" :disabled="!playing">
|
|||
|
|
<u-icon name="pause-circle" size="30"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">暂停</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="play_btn_wrap">
|
|||
|
|
<button class="btn_icon" @click="screenShot" :disabled="!playing">
|
|||
|
|
<u-icon name="cut" size="30"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<text class="btn_title">截图</text>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<u-calendar :show="showcalendar" :minDate="minDate" :maxDate="maxDate" month-num="12"
|
|||
|
|
:defaultDate="defaultDate" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
|
|||
|
|
</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>
|
|||
|
|
var wv;
|
|||
|
|
import projectConfig from '@/env.config.js';
|
|||
|
|
import VideoProgressBar from './VideoProgressBar.vue';
|
|||
|
|
import {
|
|||
|
|
startPlay,
|
|||
|
|
playback,
|
|||
|
|
closeStream,
|
|||
|
|
getDevRecord
|
|||
|
|
} from '@/apis/modules/player';
|
|||
|
|
export default {
|
|||
|
|
name: 'devicePlayerApp',
|
|||
|
|
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: ' 设备通道 ',
|
|||
|
|
|
|||
|
|
scrollTop: 0,
|
|||
|
|
queryParams: {
|
|||
|
|
deviceSipId: '', //设备sipid
|
|||
|
|
},
|
|||
|
|
// 通道集合
|
|||
|
|
channelList: [],
|
|||
|
|
selectChannel: null,
|
|||
|
|
// 设备信息
|
|||
|
|
deviceId: '',
|
|||
|
|
channelId: '',
|
|||
|
|
streamId: '',
|
|||
|
|
webviewSrc: '/pages_player/static/app-plus/video.html',
|
|||
|
|
decoderUrl: '',
|
|||
|
|
playurl: '',
|
|||
|
|
playing: false,
|
|||
|
|
queryDate: '',
|
|||
|
|
videoVod: false,
|
|||
|
|
vodData: {},
|
|||
|
|
minDate: "",
|
|||
|
|
maxDate: "",
|
|||
|
|
defaultDate: "",
|
|||
|
|
hisData: [],
|
|||
|
|
playbackDate: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
var currentWebview = this.$scope.$getAppWebview()
|
|||
|
|
this.decoderUrl = projectConfig.decoderUrl;
|
|||
|
|
setTimeout(function() {
|
|||
|
|
wv = currentWebview.children()[0]
|
|||
|
|
wv.setStyle({
|
|||
|
|
top: 30,
|
|||
|
|
height: 260
|
|||
|
|
})
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap(event) {
|
|||
|
|
console.log(event, 'event')
|
|||
|
|
console.log(event.type, 'event.type')
|
|||
|
|
},
|
|||
|
|
onBackPress(event) {
|
|||
|
|
console.log(event, 'event');
|
|||
|
|
wv.clear();
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
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;
|
|||
|
|
this.loadDevRecord();
|
|||
|
|
},
|
|||
|
|
closeCalendar(n) {
|
|||
|
|
this.showcalendar = false;
|
|||
|
|
},
|
|||
|
|
closeWebview() {
|
|||
|
|
this.webviewSrc = ''; // 清空当前页面
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.webviewSrc = '/pages_player/static/app-plus/video.html';
|
|||
|
|
});
|
|||
|
|
wv.clear();
|
|||
|
|
},
|
|||
|
|
cleanPlayer(stop) {
|
|||
|
|
if (stop) {
|
|||
|
|
this.stopPlay()
|
|||
|
|
}
|
|||
|
|
this.closeWebview();
|
|||
|
|
this.playing = false
|
|||
|
|
},
|
|||
|
|
// 单击选显卡
|
|||
|
|
switchTab(index) {
|
|||
|
|
this.tabIndex = index;
|
|||
|
|
this.$set(this.isRotated, index, !this.isRotated[index]);
|
|||
|
|
if (this.playing) {
|
|||
|
|
this.cleanPlayer(true);
|
|||
|
|
}
|
|||
|
|
switch (this.tabIndex) {
|
|||
|
|
case 0:
|
|||
|
|
this.videoVod = false;
|
|||
|
|
this.sendDevicePush();
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.videoVod = true;
|
|||
|
|
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;
|
|||
|
|
this.streamId = res.streamId;
|
|||
|
|
this.playurl = res.playurl;
|
|||
|
|
//如果是页面初始化调用时，需要延时一下
|
|||
|
|
this.webviewSrc = ''; // 清空当前页面
|
|||
|
|
wv.clear();
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
// #ifdef APP-ANDROID
|
|||
|
|
console.log("playurl：" + res.playurl);
|
|||
|
|
this.webviewSrc = '/pages_player/static/app-plus/video.html?data=' +
|
|||
|
|
encodeURIComponent(JSON.stringify({
|
|||
|
|
"type": "play",
|
|||
|
|
"playUrl": res.playurl,
|
|||
|
|
"decoderUrl": this.decoderUrl
|
|||
|
|
}));
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-IOS
|
|||
|
|
console.log("hlsurl：" + res.hls);
|
|||
|
|
this.webviewSrc = '/pages_player/static/app-plus/video.html?data=' +
|
|||
|
|
encodeURIComponent(JSON.stringify({
|
|||
|
|
"type": "play",
|
|||
|
|
"playUrl": res.hls,
|
|||
|
|
"decoderUrl": this.decoderUrl
|
|||
|
|
}));
|
|||
|
|
// #endif
|
|||
|
|
});
|
|||
|
|
this.playing = true;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
operate() {
|
|||
|
|
//这是增加动画效果的
|
|||
|
|
this.activeTab = 'operate';
|
|||
|
|
console.log('播放暂停');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300);
|
|||
|
|
if (!this.videoVod) {
|
|||
|
|
if (this.playing == true) {
|
|||
|
|
wv?.evalJS(`jessibuca.pause();`);
|
|||
|
|
this.playing = false;
|
|||
|
|
} else {
|
|||
|
|
this.sendDevicePush();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.streamId && this.playing) {
|
|||
|
|
this.playing = false
|
|||
|
|
} else {
|
|||
|
|
this.playing = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stopPlay() {
|
|||
|
|
if (this.streamId && this.playing) {
|
|||
|
|
closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
|
|||
|
|
this.playing = false
|
|||
|
|
this.streamId = '';
|
|||
|
|
this.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() {
|
|||
|
|
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.videoVod) {
|
|||
|
|
this.webviewSrc = ''; // 清空当前页面
|
|||
|
|
wv.clear();
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.webviewSrc = '/pages_player/static/app-plus/video.html?data=' +
|
|||
|
|
encodeURIComponent(JSON.stringify({
|
|||
|
|
"type": "playback",
|
|||
|
|
"playUrl": this.playurl,
|
|||
|
|
"decoderUrl": this.decoderUrl,
|
|||
|
|
"playTimes": playTimes
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
screenShot() {
|
|||
|
|
this.activeTab = 'screenshot';
|
|||
|
|
console.log('截图');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.activeTab = null;
|
|||
|
|
}, 300); // 稍微延长动画时间
|
|||
|
|
if (this.playing) {
|
|||
|
|
wv?.evalJS("jessibuca.screenshot();");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handlePostMessage: function(data) {
|
|||
|
|
console.log("接收到消息：" + JSON.stringify(data.time));
|
|||
|
|
var json = JSON.stringify(data.time);
|
|||
|
|
if (json.action == "seekPlay") {
|
|||
|
|
this.seekPlay(json.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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 => {
|
|||
|
|
wv?.evalJS("jessibuca.setPlaybackStartTime(" + curTime + ");");
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
playback(playTimes) {
|
|||
|
|
if (this.deviceId && this.channelId) {
|
|||
|
|
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
|
|||
|
|
this.streamId = res.data.streamId
|
|||
|
|
this.playurl = res.data.playurl
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.triggerPlay(playTimes)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
const query = {
|
|||
|
|
start: this.vodData.start,
|
|||
|
|
end: this.vodData.end,
|
|||
|
|
}
|
|||
|
|
playback(this.deviceId, this.channelId, query).then(res => {
|
|||
|
|
this.playing = true
|
|||
|
|
this.streamId = res.data.streamId
|
|||
|
|
this.playurl = res.data.playurl
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.triggerPlay(playTimes)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.container{
|
|||
|
|
background: radial-gradient(circle, #e9faff, #f5f5f5); // 整体背景颜色变得更亮
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 150rpx;
|
|||
|
|
height: calc(100vh - 150rpx);
|
|||
|
|
}
|
|||
|
|
.player-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
place-content: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 220px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 中部切换录像与直播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); // 添加弹跳效果
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.remote-control {
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.live_str_item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.playback_wrap {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
|
|||
|
|
.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>
|