<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2026-01-09 15:10:53
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-01-13 14:10:41
 * @FilePath: /huaxindd-web/src/views/Ind2/components/Right.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="right">
    <div class="t">
      <Title text="视频监控" />
      <div class="video-box">
        <div v-for="item in 10" class="video">
          <div class="text">
              场站监控
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/PubCom/title.vue";

export default {
  name: "",
  components: {
    Title,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.right {
  // width: 20%;
  width: 434px;

  position: absolute;
  top: 102px;
  bottom: 50px;
  // background: url("~@/assets/index/r.png") no-repeat center;
  // background-size: 100% 100%;
  // background: red;
  // border: 1px solid red;
  right: 10px;
  z-index: 9999;
}
.t {
  height: 100%;
  display: flex;
  flex-direction: column;
  .video-box {
    box-sizing: border-box;
    margin-top: 20px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    overflow: hidden;
    overflow: auto;
    &::-webkit-scrollbar {
      height: 0;
    }

    .video {
      width: 200px;
      height: 152px;
      background: red;
      margin-bottom: 20px;
      position:relative;
      .text{
        position:absolute;
        bottom:0;

        width: 100%;
        height: 40px;
        color:#fff;
        background: #3AA4FB;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        
      }
    }
  }
}
</style>
