JiangNingUmale-h5/subcontract/work/videocenter/index.vue

<!--
 * @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>