laozt
1 year ago
parent
433d322e29
commit
c2434a4e9b
@ -1,298 +0,0 @@
|
||||
<!--
|
||||
* @Author: 张涛
|
||||
* @Date: 2023-11-06 14:18:06
|
||||
* @LastEditors: 张涛
|
||||
* @LastEditTime: 2023-11-10 13:14:51
|
||||
* @FilePath: \JiangNingUmale-App\subcontract\work\videocenter\index.vue
|
||||
-->
|
||||
<template>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
title="视频中心"
|
||||
back-icon-color="#FFFFFF"
|
||||
title-color="#FFFFFF"
|
||||
leftText="返回"
|
||||
:autoBack="true"
|
||||
:placeholder="true"
|
||||
/>
|
||||
<view class="view-segmented">
|
||||
<uni-segmented-control
|
||||
:current="current"
|
||||
:values="items"
|
||||
@clickItem="onClickItem"
|
||||
styleType="button"
|
||||
activeColor="#007aff"
|
||||
bgColor="#FFFFFF"
|
||||
fontColor="#34373B"
|
||||
tabHeight="88rpx"
|
||||
tabFontsize="32rpx"
|
||||
tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.1)"
|
||||
tabBorderRadius="16rpx"
|
||||
class="segmented-controls"
|
||||
></uni-segmented-control>
|
||||
</view>
|
||||
|
||||
<view class="main-content">
|
||||
<view v-show="current === 0">
|
||||
<view class="work-center">
|
||||
<view
|
||||
v-for="(item, index) in grids"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
style="position: relative"
|
||||
>
|
||||
<!-- <image src="/static/images/umale/video.png" class="grid-img" />
|
||||
<view class="grid-img-play">
|
||||
<image src="/static/images/umale/play.png" />
|
||||
</view> -->
|
||||
<view class="videoMain">
|
||||
<video-main :src="videoSrc" :id="index"></video-main>
|
||||
</view>
|
||||
<view class="grid-name">
|
||||
<text>{{ item.name }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="current === 1">
|
||||
<view class="work-center">
|
||||
<view
|
||||
v-for="(item, index) in grids"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
style="position: relative"
|
||||
>
|
||||
<image src="/static/images/umale/video.png" class="grid-img" />
|
||||
<view class="grid-img-play">
|
||||
<image src="/static/images/umale/play.png" />
|
||||
</view>
|
||||
|
||||
<view class="grid-name">
|
||||
<text>{{ item.name }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videoMain from "./video.vue"
|
||||
export default {
|
||||
components:{
|
||||
videoMain
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: ["车载监控视频", "固定监控视频"],
|
||||
current: 0,
|
||||
videoSrc:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
|
||||
grids: [
|
||||
{
|
||||
name: "秦淮河1号监控",
|
||||
gridImg: "",
|
||||
color: "#0D306B",
|
||||
subcolor: "#BE9085",
|
||||
disable: false,
|
||||
toPage: "/subcontract/work/videocenter/play",
|
||||
},
|
||||
{
|
||||
name: "秦淮河2号监控",
|
||||
gridImg: "",
|
||||
color: "#0D516B",
|
||||
subcolor: "",
|
||||
disable: false,
|
||||
toPage: "/subcontract/mine/event/index",
|
||||
},
|
||||
// {
|
||||
// name: "秦淮河3号监控",
|
||||
// gridImg: "",
|
||||
// color: "#6B480D",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河4号监控",
|
||||
// gridImg: "",
|
||||
// color: "#154F06",
|
||||
// subcolor: "#C5A071",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河5号监控",
|
||||
// gridImg: "",
|
||||
// color: "#0D516B",
|
||||
// subcolor: "#6E89B1",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河6号监控",
|
||||
// gridImg: "",
|
||||
// color: "#6B0D0D",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河7号监控",
|
||||
// gridImg: "",
|
||||
// color: "#025629",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河8号监控",
|
||||
// gridImg: "",
|
||||
// color: "#0D306B",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河6号监控",
|
||||
// gridImg: "",
|
||||
// color: "#6B0D0D",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河7号监控",
|
||||
// gridImg: "",
|
||||
// color: "#025629",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
// {
|
||||
// name: "秦淮河8号监控",
|
||||
// gridImg: "",
|
||||
// color: "#0D306B",
|
||||
// subcolor: "",
|
||||
// disable: false,
|
||||
// toPage: "/subcontract/mine/event/index",
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
},
|
||||
goPath(item) {
|
||||
this.$tab.navigateTo(item.toPage);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log("当前页面",this.$route.path);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #f6f7f8;
|
||||
|
||||
.view-segmented {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f6f7f8;
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar-height) + 44px);
|
||||
z-index: 99;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.segmented-controls {
|
||||
width: 688rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
|
||||
/deep/.segmented-control--button {
|
||||
/deep/.segmented-control__item--button {
|
||||
/deep/.segmented-control__text {
|
||||
color: #34373b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
position: relative;
|
||||
margin-top: calc(var(--status-bar-height) + 84px);
|
||||
margin-left: 33rpx;
|
||||
margin-right: 33rpx;
|
||||
|
||||
.work-center {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 140rpx;
|
||||
|
||||
& > view {
|
||||
width: 48%;
|
||||
height: 290rpx;
|
||||
margin-bottom: 22rpx;
|
||||
position: relative;
|
||||
|
||||
.grid-img {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: block;
|
||||
}
|
||||
.videoMain {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.grid-img-play {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
image {
|
||||
width: 81rpx;
|
||||
height: 81rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-name {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #292f38;
|
||||
}
|
||||
.grid-img-play {
|
||||
}
|
||||
}
|
||||
|
||||
& > view:nth-child(odd) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,62 +0,0 @@
|
||||
<!--
|
||||
* @Author: 张涛
|
||||
* @Date: 2023-11-07 13:43:46
|
||||
* @LastEditors: 张涛
|
||||
* @LastEditTime: 2023-11-07 13:58:16
|
||||
* @FilePath: \JiangNingUmale-App\subcontract\work\videocenter\play.vue
|
||||
-->
|
||||
<template>
|
||||
<view class="uni-flex-item">
|
||||
<video
|
||||
class="video"
|
||||
ref="video"
|
||||
id="video"
|
||||
:src="src"
|
||||
:autoplay="autoplay"
|
||||
@play="playVideo()"
|
||||
@fullscreenchange="screenchange"
|
||||
></video>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
export default {
|
||||
onReady() {
|
||||
this.videoContext = uni.createVideoContext('video', this);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoContext: null,
|
||||
// 属性
|
||||
src: "http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
|
||||
_src: "http://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
|
||||
autoplay: true,
|
||||
poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
|
||||
_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e) {
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
},
|
||||
playVideo() {
|
||||
uni.createVideoContext('video', this).requestFullScreen();
|
||||
screen.orientation.lock('landscape');
|
||||
},
|
||||
screenchange() {
|
||||
screen.orientation.lock('landscape');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video {
|
||||
width: 750rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue