prevent_drowning_manage/ruoyi-ui/src/views/shipinggaoj/jiansuo/detail.vue

<template>
  <div class="app-container" style="padding-top:15px;height:calc(100vh - 50px);" v-loading="loading"
    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row>
      <el-col :span="6" class="jsleft">

        <div class="jslfot">
          <div class="flexc flex0 mb10">
            <div class="line"></div>
            <div class="f16 co3 flex1 fw">抓拍信息</div>
          </div>
          <!-- 比对结果 -->
          <div class="plr14">
            <div class="dbtop flexcc">
              <img src="../../../assets/images/pic_gjgl_lt.png" class="headimg" />
              <div class="flexcdc flex0" style="width: 30%;">
                <div class="tit">94%</div>
                <img src="@/assets/images/search//icon_sijs_jg_sxd.png" class="dbimg" />
              </div>
              <img src="../../../assets/images/pic_gjgl_lt.png" class="headimg" />
            </div>
            <div class="jstlists">
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>抓拍位置</p>：</div>
                <p class="txt">4# 中间道路西南侧</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>抓拍设备</p>：</div>
                <p class="txt">4#旁 3号摄像头</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>抓拍时间</p>：</div>
                <p class="txt">2025-06-13 20:33:24</p>
              </div>
            </div>
          </div>
          <!-- 特征分析 -->
          <div class="flexc flex0" style="padding-top: 24px;margin-bottom: 14px;">
            <div class="line"></div>
            <div class="f16 co3 flex1 fw">特征分析</div>
          </div>
          <div class="plr14">
            <div class="flexcw">
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>年龄段</p>：</div>
                <p class="txt">幼儿</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>性别</p>：</div>
                <p class="txt">男</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>上衣颜色</p>：</div>
                <p class="txt">黑色</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>下衣颜色</p>：</div>
                <p class="txt">黑色</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>上衣类型</p>：</div>
                <p class="txt">短袖</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>下衣类型</p>：</div>
                <p class="txt">短裤</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>鞋子颜色</p>：</div>
                <p class="txt">黑白</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>帽子颜色</p>：</div>
                <p class="txt">黑色</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>鞋子类型</p>：</div>
                <p class="txt">帆布鞋</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>帽子类型</p>：</div>
                <p class="txt">棒球帽</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>眼睛信息</p>：</div>
                <p class="txt">未知</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>口罩信息</p>：</div>
                <p class="txt">未知</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="maps">
          <div>
            <img src="../../../assets/images/pic_gjgl_lt.png"/>
            <div class="maptit">
              <div class="flex1 overtwo">高新技术开发园区</div>
              <div>30°N,116°E</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" class="jsright">
        <div class="jsbox flex1">
          <div style="height: 100%;width: 100%;">
            <!-- poster="your-poster.jpg" -->
           <VideoPlayer
                  :src="videourl"
                  :options="{
                    autoplay: false,
                    controls: false,
                    fluid: true
                  }"
            />
          </div>
          <div class="lttit left">4# 中间道路西南侧</div>
          <div class="lttit right">2025-06-13  10:33:24</div>


        </div>
        <div class="jsswbox flex0">
          <el-carousel indicator-position="outside" height="120px" :autoplay="false" arrow="always">
            <el-carousel-item v-for="item in 2" :key="item">
              <div class="flexc swiper">
                <div class="imgs" @click="getChange(ite)" :class="playidx==ite?'act':''" v-for="ite in 5" :key="ite">
                  <img src="../../../assets/images/pic_gjgl_lt.png" />
                  <div class="tit over">相似度 94%</div>
                </div>
                <!-- <div class="zhantit">到底啦</div> -->
              </div>

            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import trackBox from "@/components/jiansuo/index"
  import VideoPlayer from "@/components/jiansuo/VideoPlayer"
  export default {
    components: {
      trackBox,VideoPlayer
    },
    data() {
      return {
        loading: false,
        videourl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
        paly:false,
        playidx:1,
        list: [{
          tit: '123'
        }, {
          tit: '123'
        }, ],
      }
    },
    methods: {
      getChange(idx){
        this.playidx=idx
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    border: none !important;font-size: 14px;padding: 0;padding-right: 5px;
  }
  .el-carousel__arrow{color: #a8a8a8;background: transparent;font-size: 16px;font-weight: bold;}
  .el-carousel__arrow--right{right: 5px;}
  .el-carousel__arrow--left{left:5px}
  .el-icon-arrow-right:before{font-weight: bold;}
  .el-icon-arrow-left:before{font-weight: bold;}
  .bigbox {
    .el-select{
      .el-input__suffix{display: none;}
      input{font-weight: 500;background: transparent;font-size: 14px;color: #FFFFFF;width: 40px;padding-right: 0;text-align: right;height: 18px;line-height: 18px;}
      }
  }
}
p{margin: 0;padding: 0;}
.mb12{margin-bottom: 12px;}
.flex{display: flex;}
.flext{display: flex;align-items: flex-start;}
.flexc{display: flex;align-items: center;}
.flexcc{display: flex;align-items: center;justify-content: center;}
.flexcdc{display: flex;align-items: center;flex-direction: column;}
.flexcw{display: flex;align-items: center;flex-wrap: wrap;}
.flexcj{display: flex;justify-content: space-between;}
.flex0{flex: 0 0 auto;}
.flex1{flex: 1;}
.f16{font-size: 16px;}
.co3{color: #333333;}
.fw{font-weight: bold;}
.el-row{height: 100%;}
.plr14{padding: 0 14px;}
.txr{text-align: right;}
.over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.overtwo{word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;}
.jsleft{padding-right:12px;height: 100%;display: flex;flex-direction: column;
.jstlists{padding-bottom: 10px;border-bottom: 1px solid #E6E6E6;}
  .jstlist{margin-bottom: 13px;min-width: 50%;
      .tit{font-size: 14px;color: #AAAAAA;
        p{text-align: justify;width: 58px;display: block;text-align-last: justify;}
      }
      .txt{font-size: 14px;color: #3D455B;}
  }

  .jslfot{background: #FFFFFF;border-radius: 10px;padding:14px 0px 6px 0;flex: 1;display: flex;flex-direction: column;overflow: auto;min-height: 260px;
    .line{width: 6px;height: 20px;background-color: #03BF8A;margin-right: 10px;}
    .sortimg{width: 13px;height: 13px;}

  }
  .dbtop{padding: 8px 0 16px;
    .tit{font-size: 20px;color: #03BF8A;}
    .headimg{width: 80px;height: 80px;flex: 0 0 auto;}
    .dbimg{width: 28px;height: 14px;margin-top: 3px;}
  }
  .maps{width: 100%;height: 146px;position: relative;flex: 0 0 auto;border-radius: 10px;overflow: hidden;margin-top: 12px;
  img{width: 100%;height: 100%;}
    .maptit{position: absolute;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;min-height: 28px;padding: 4px 14px;
      div{font-weight: 500;font-size: 14px;color: #FFFFFF;}
    }
  }
}
.jsright{height: 100%;display: flex;flex-direction: column;overflow: hidden;
  .jsbox{background: #FFFFFF;border-radius: 10px;position: relative;overflow: hidden;
    .lttit{font-weight: 500;font-size: 18px;color: #FFFFFF;position: absolute;top: 10px;line-height: 24px;
      &.left{left: 24px;}
      &.right{right: 24px;}
    }



  }
    .jsswbox{background: #FFFFFF;margin-top: 10px;
border-radius: 10px;height: 146px;padding: 12px 0px;box-sizing: border-box;}
    .swiper{padding: 0 44px;}
    .imgs{position: relative;width: 20%;height: 120px;border-radius: 8px;overflow: hidden;margin-right: 12px;
    &:nth-of-type(5n){margin-right: 0;}
      &.act{border: 2px solid #00B278;}
      img{width: 100%;height: 100%;}
      .tit{background: rgba(0, 0, 0, 0.5);font-size: 14px;color: #FFFFFF;text-align: center;height: 28px;line-height: 28px;position: absolute;right: 0;left: 0;bottom: 0;
border-radius:0 0 8px 8px;}
    }
    .zhantit{font-weight: 500;font-size: 12px;color: #AAAAAA;width: 12px;margin-left: 16px;}
    .videos{width: 100%;height: 100%;background-color: red;}

}
</style>