warehouse-ui/src/views/components/housecamer.vue

<template>
    <div class="in_house" v-if="showHouse">
        <div><span class="returnback" @click="closeDlg"></span><span class="close" @click="closeDlg"></span></div>
        <div class="content">
            <div class="left">
                <div class="top">
                    <el-select v-model="provinceValue" :popper-append-to-body="false">
                        <el-option 
                            v-for="item in provinceList" 
                            :label="item.label" 
                            :value="item.id"
                        />
                    </el-select>
                    <el-select v-model="cityValue"><el-option v-for="item in cityList" :label="item.label" :value="item.id"/></el-select>
                    <el-select v-model="countryeValue"><el-option v-for="item in countryeList" :label="item.label" :value="item.id"/></el-select>
                    <div class="houselist">
                        <div v-for="item in houselist" :class="item.active==true ?'house-item active' : 'house-item'" @click="selectedHouse(item)">{{ item.name }}</div>
                    </div>
                </div>
                <div class="middle">
                  <div class="title"><span class="line"></span><span>流程督办</span><span class="stat_rate">(月)</span></div>
                  <div class="toolsbtn">
                    <div :class="currFlowType=='total'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('total')">总量</div>
                    <div :class="currFlowType=='closed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('closed')">闭单量</div>
                    <div :class="currFlowType=='unclosed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('unclosed')">未闭单量</div>
                  </div>
                  <div class="echartsdiv" ref="echarts03"></div>
                </div>
            </div>
            <div class="right">
                <div class="top">
                  <span class="housename">{{ selectHouse.name }}</span>
                  <span class="iotstat"><img src="/images/icon_iot_01.png"> 排风正常</span>
                  <span class="iotstat"><img src="/images/icon_iot_02.png"> 烟感正常</span>
                  <span class="countstat alarm_list">
                    <span class="alarm_list_item" v-for="item in alarm_curr"><img :src="alarm_type[item.code].icon"/><span>{{ alarm_type[item.code].name }}</span><span class="alarm_item_brager" :style="{'background-color':alarm_type[item.code].bg}">{{ item.value }}</span></span>
                  </span>
                  <span class="videocount">
                    <span :class="videocount_type=='4' ?'videocount_item active':'videocount_item'">四分屏</span>
                    <span :class="videocount_type=='9' ?'videocount_item active':'videocount_item'">九分屏</span>
                    <span :class="videocount_type=='16' ?'videocount_item active':'videocount_item'">十六分屏</span>
                  </span>
                </div>
                <div class="middle">
                  <div v-for="item in video_list" :class="item.contrlset ? 'video contrlset type'+videocount_type : 'video type'+videocount_type" @click="videocontrl(item)">
                    <div class="video-title"><img src="/images/ico-video.png"><span>{{ item.name }}</span><span style="float: right;margin-right: 42px;">{{ item.statedesc }}</span></div>
                    <div class="video-play">
                      <Player :ref="(el)=>handleSetTempMap(el,item)"/>
                    </div>
                    <div class="cloudset" v-if="item.contrlset==true">
                      <div><span class="close" @click.stop="closeCloudset(item)" style="top:2px"></span></div>
                      <div class="camername">{{ item.name }}摄像头</div>
                      <div class="cc">
                        <div class="cc_bg"></div>
                        <div class="cc_01" @click="ccMove(1,5)"></div>
                        <div class="cc_02" @click="ccMove(2,5)"></div>
                        <div class="cc_03" @click="ccMove(3,5)"></div>
                        <div class="cc_04" @click="ccMove(4,5)"></div>
                      </div>
                      <div class="cc_params"><span class="span1">变倍</span><img src="/images/cc_sub.png" @click="ccParamsSet(1,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params1+'%'}"></span><span class="span32" :style="{'left':(cc_params1-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(1,1)"></div>
                      <div class="cc_params"><span class="span1">变焦</span><img src="/images/cc_sub.png" @click="ccParamsSet(2,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params2+'%'}"></span><span class="span32" :style="{'left':(cc_params2-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(2,1)"></div>
                      <div class="cc_params"><span class="span1">光圈</span><img src="/images/cc_sub.png" @click="ccParamsSet(3,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params3+'%'}"></span><span class="span32" :style="{'left':(cc_params3-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(3,1)"></div>
                      <div class="audio">
                        <img v-if="cc_params4>0" src="/images/cc_a.png" @click="cc_params4=0">
                        <img v-else src="/images/cc_b.png" @click="cc_params4=50">
                      </div>
                      <div class="cc_params"><span class="span1">音量</span><img src="/images/cc_sub.png" @click="ccParamsSet(4,-10)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params4+'%'}"></span><span class="span32" :style="{'left':(cc_params4-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(4,10)"></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {shallowRef,onMounted,defineExpose} from "vue";
import request from '@/utils/request';
import {
  deptTreeSelect,
} from "@/api/biz/houseConfig";
import * as echarts from "echarts";
import Player from './player.vue'
const {proxy} = getCurrentInstance();
const showHouse=ref(false);
const provinceValue = ref('')
const cityValue = ref('');
const countryeValue=ref('');
const provinceList=ref(null);//省列表
const cityList=ref([]);//地市列表
const countryeList=ref([]);//区县列表
const houselist = ref(null);
const selectHouse = ref({});
const echarts03 = ref(null);
const echars03data = ref(null);
const alarm_type = ref(null);
const alarm_curr = ref([]);
const videocount_type = ref('4');
const video_list=ref([]);
const cc_params1=ref(0);
const cc_params2=ref(0);
const cc_params3=ref(0);
const cc_params4=ref(50);
// 存储动态 ref 的对象
const tempPlayerRefs = ref({});
const channelIdList = ref([]);
const currFlowType = ref('total');
const eventFlowData = ref([]);
const deptOptions = ref([]);
const typeMapping={
  "0":"none",  
  "201":"smoke",
  "195":"fire",
  "189":"person",
  "191":"temp"  
}
const alarm_list = ref([{
  code:"none",
  count:0
},{
  code:"smoke",
  count:0
},{
  code:"fire",
  count:0
},{
  code:"temp",
  count:0
},{
  code:"person",
  count:0
}]);

const load=(hostlist, houseinfo,v_alarm_type)=>{
    alarm_type.value = v_alarm_type
    showHouse.value = true;
    houselist.value=hostlist;
    for (let index = 0; index < houselist.value.length; index++) {
        const element = houselist.value[index];
        if(element.code==houseinfo.value.code){
            houselist.value[index]["active"] = true;
            selectHouse.value = element;
        }else{
          houselist.value[index]["active"] = false;
        }
    }
    getchannel();    
    loadEvent();
    deptTreeSelect().then(response => {
      deptOptions.value = response.data;
      getprovinceList();
      getcityList();
      getcountyList();
    });
}
const getprovinceList=()=>{
  let lv= [];
  for(let i=0;i<deptOptions.value.length;i++){
    lv.push(deptOptions.value[i])
  }
  provinceList.value = lv;
}
const getcityList=()=>{
  let lv= [];
  for(let i=0;i<deptOptions.value.length;i++){
    if(deptOptions.value[i].children.length>0){      
      lv.push(...deptOptions.value[i].children)
      lv.map(item=>{
        item.id = deptOptions.value[i].id+"-"+item.id;
      })
    }
  }
  cityList.value = lv;
}
const getcountyList=()=>{
  let lv= [{label:"全部区县",id:""}];
  for(let i=0;i<deptOptions.value.length;i++){
    if(deptOptions.value[i].children.length>0){ 
      for (let index = 0; index < deptOptions.value[i].children.length; index++) {
        const element = deptOptions.value[i].children[index];
        if(element.children.length>0){
          element.children.map(item=>{
            item.id = deptOptions.value[i].id+"-"+element.id+"-"+item.id;
          })
          lv.push(...element.children)
        }
      }
    }
  }
  countryeList.value = lv;
}
const loadEvent=()=>{
  request({
            url: '/index/events/'+selectHouse.value.houseId,
            method: 'get',
            data: null
  }).then(res=>{
    eventFlowData.value = res.flow;
    let vl=[];
    for (let k in typeMapping) {
      vl.push({id:k, code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.curr[k]*1});
    }
    alarm_curr.value = vl;
    loadEchars03(); 
  })
}
const getchannel=()=>{
  if(tempPlayerRefs.value!=null && tempPlayerRefs.value.length>0){
    for(let k in tempPlayerRefs.value){
      tempPlayerRefs.value[k].destroy();
    }
  }
  request({
      url: '/index/device/'+selectHouse.value.houseId,
      method: 'get',
      data: null
  }).then(res=>{
    channelIdList.value = res;
    initvideodata();
  })
}
const switchFlow=(key)=> {
  currFlowType.value = key;
  loadEchars03();
}
const closeDlg=() =>{
    //销毁资源
    for(let k in tempPlayerRefs.value){
      tempPlayerRefs.value[k].destroy();
    }
    showHouse.value = false;
}
const selectedHouse=(item)=>{
    selectHouse.value = item;
    for (let index = 0; index < houselist.value.length; index++) {
        const element = houselist.value[index];
        if(element.code==item.code){
            houselist.value[index]["active"] = true;
        }else{
            houselist.value[index]["active"] = false;
        }
    }
    getchannel();
    loadEvent();
}
const loadEchars03=()=>{
  let vl=[];
  for (let index = 0; index < eventFlowData.value.length; index++) {
    const element = eventFlowData.value[index];
    vl.push({date:element.date.substr(5),value:element[currFlowType.value]})
  }
  echars03data.value = vl;
  var gain = 0.9;
  var gap = 0;
  let maxvalue=0;
  //柱子数据
  var data = [];
  var dataX = [];
  echars03data.value.map(item=>{
    dataX.push(item.date);
    data.push(item.value);
    if (maxvalue.length>1){
      maxvalue = Math.max(maxvalue,item.value);
    }
  })
  maxvalue =maxvalue+2;
  var option = {
      backgroundColor: '',
      tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
    grid: {
      left: '3%',
      top: '10%',
      right: '2%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(160,160,160,0.3)'
          }
        },
        axisLabel: {
          textStyle:{
              fontSize:12,
              color:'#5a6268'
          }
        },
        data: dataX
      },
      {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle:{
              fontSize:12,
              color:'#fff'
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: []
      }
    ],
    yAxis: {
      type: 'value',      
      nameTextStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
           lineStyle: {
              color: '#575f66', // 分割线的颜色
              type: 'dashed',
           }
      },
      axisLabel: {
        textStyle: {
          color: '#5a6268',
          fontSize: 12
        }
      }
    },
    series: [
      {
        type: 'bar',
        xAxisIndex: 1,
        itemStyle: {
          normal: {
            show: true,
            color: "#2186fd00",
            barBorderRadius: 50,
            borderWidth: 0,
            borderColor: '#333'
          }
        },
        barWidth: '30%',
        data: [maxvalue, maxvalue, maxvalue, maxvalue,maxvalue, maxvalue, maxvalue, maxvalue,maxvalue, maxvalue, maxvalue, maxvalue]
      },
      {
        type: 'bar',
        itemStyle: {
          normal: {
            show: true,
            color: "#2186fd",
            barBorderRadius: 50,
            borderWidth: 0,
            borderColor: '#333'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            textStyle: {
                  fontSize: 12
              }
          }
        },
        barWidth: '30%',
        data: data
      }
    ]
  };
  setTimeout(() => {
    echarts.init(echarts03.value).setOption(option);
  }, 300);
  
}
const initvideodata=()=>{
  let tmp = [];
  for (let index = 0; index < Math.min(videocount_type.value*1,channelIdList.value.length); index++) {
    let ele = channelIdList.value[index];
    let video_url = window.VideoServerUrl+"/flv/"+ele.deviceCode+"/"+ele.channelId;
    tmp.push({name:ele.channelName,code:ele.deviceCode,contrlset:false,state:ele.status,statedesc:ele.status=='ON'?'在线':'离线',url:video_url});
  }
  video_list.value = tmp;
  setTimeout(() => {
    for(let i=0;i<tmp.length;i++){
      //tempPlayerRefs.value[tmp[i].code].play(tmp[i].url);
    }
  }, 200);
}
// 动态设置 ref 的函数
const handleSetTempMap = (el, item) => {
  if (el) {
  tempPlayerRefs.value[item.code] = el;
  }
};
const videocontrl=(item)=>{
  item['contrlset'] = true
}
const closeCloudset=(item)=>{
  item['contrlset'] = false
}
//旋转
//1:向上 ptzcmd=A50F0108007D003A 2：向下 ptzcmd=A50F0104007D0036 3：向右 ptzcmd=A50F01017D000033 4：向左 ptzcmd=A50F01027D000034
//Bearer monibuca
//停止指令：ptzcmd=A50F0100000000B5
const ccMove=(dir,v)=>{
  let cmd = "";
  //http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd=A50F0108007D003A
  if(dir==1){
    cmd = "A50F0108007D003A"
  }else if(dir==2){
    cmd = "A50F0104007D0036"
  }else if(dir==3){
    cmd = "A50F01017D000033"
  }else if(dir==4){
    cmd = "A50F01027D000034"
  }
  request({
      url: window.VideoServerUrl+'/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
      headers: {
        authorization: 'Bearer monibuca',
      },
      method: 'get',
      data: null
    }).then(res=>{
      if(res.code==0){
        cmd='A50F0100000000B5';
        request({
            url: window.VideoServerUrl+'/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
            headers: {
              authorization: 'Bearer monibuca',
            },
            method: 'get',
            data: null
          }).then(res=>{});
      }
  });
}

const ccParamsSet=(type,value)=>{
  if(type==1){
    cc_params1.value += value;
    if(cc_params1.value>100) cc_params1.value=100
    if(cc_params1.value<0) cc_params1.value=0
  }  else if(type==2) {
    cc_params2.value += value;
    if(cc_params2.value>100) cc_params2.value=100
    if(cc_params2.value<0) cc_params2.value=0
  }  else if(type==3) {
    cc_params3.value += value;
    if(cc_params3.value>100) cc_params3.value=100
    if(cc_params3.value<0) cc_params3.value=0
  }  else if(type==4) {
    //音量
    cc_params4.value += value;
    if(cc_params4.value>100) cc_params4.value=100
    if(cc_params4.value<0) cc_params4.value=0
    tempPlayerRefs.value[selectHouse.value.code].volumeChange(cc_params4.value);
  }
}
onMounted(() => {

})
defineExpose({
    load
})
</script>
<style lang='scss' scoped>
    ::v-deep .el-select__wrapper {
      /* 你的样式 */
      background-color: #303740;
      box-shadow: 0 0 0 1px #4f555c inset;
      .el-select__placeholder{
        color: #fff;
        font-size: 14px;
      }
      .el-select__placeholder.is-transparent{
        color: #ffffff94;
      }
    }
    .in_house{
        background-color: #18202a;
        position: absolute;
        left: 60px;
        top: 0;
        width: calc(100% - 60px);
        height: 100%;
        z-index: 100;
        .close{
            position: absolute;
            right: 15px;
            top: 10px;
            background-image: url(/images/close.png);
            cursor: pointer;
            width: 16px;
            height: 16px;
            background-size: 55%;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: center;
            border: 1px solid #ccc;
        }
        .returnback{
            position: absolute;
            left: 20px;
            top: 10px;
            background-image: url(/images/return.png);
            cursor: pointer;
            width: 16px;
            height: 16px;
            background-size: contain;
            border: 1px solid #ccc;
        }
        .content{
            margin-top: 38px;
            height: calc(100% - 38px);
            width: 100%;
            display: flex;
            .left{
                width: 18%;
                height: 100%;
                margin-right: 2%;
                padding-left: 20px;
                .el-select{
                    margin-bottom: 5px;
                }
                .top{
                    width: 100%;
                    height: 60%;
                    .houselist{
                        height: 70%;
                        width: 100%;
                        overflow-y: auto;
                        background-color: #303740;
                        border: 1px solid #4f555c;
                        border-radius: 3px;
                        .house-item{
                            color: #fff;
                            font-size: 12px;
                            padding: 5px;
                        }
                        .house-item.active,.house-item:hover{
                            background-color: #4f555c;
                        }
                    }
                }
                .middle{
                    width: 100%;
                    height: 39%;
                    .title{
                      background-color: #192733;
                      font-size: 14px;
                      font-weight: bold;
                      color: #fff;
                      height: 35px;
                      line-height: 15px;
                      padding: 10px;
                      display: flex;
                      .line{
                        width: 5px;
                        height: 15px;
                        background-color: #fff;
                        border-radius: 5px;
                        margin-right: 10px;
                      }
                    }
                    .toolsbtn{
                      height: 24px;
                      width: 100%;
                      display: flex;
                      margin-top: 10px;
                      margin-left: 10px;
                      line-height: 15px;
                      margin-right: 2px;
                      cursor: pointer;
                      .toolsbtn_item{
                        display: inline-block;
                        padding: 5px 10px;
                        background-color: #262f38;
                        color: #686f75;
                        font-size: 12px;
                      }
                      .toolsbtn_item.active,.toolsbtn_item:hover{
                        background-color: #2184fa;
                        color: #fff;
                      }
                    }
                    .echartsdiv{
                      height: calc(100% - 66px);
                      width: 100%;
                    }
                }
            }
            .right{
                width: 80%;
                height: 100%;
                .top{
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 10px;
                    width: 100%;
                    display: flex;
                    .housename{
                      font-weight: bold;
                      color: #fff;
                      width:200px;
                      display: inline-block;
                      text-overflow: hidden;
                    }
                    .iotstat{
                      font-size: 12px;
                      color: #fff;
                      background-image: url('/images/iot_stat_bg.png');
                      background-repeat: no-repeat;
                      padding: 0 10px;
                      background-size: contain;
                      margin: 0 10px;
                      display: inline-block;
                      img{
                        width: 16px;
                        height: 16px;
                        vertical-align: sub;
                      }
                    }
                    .countstat{
                      width: 58%;
                    }
                    .alarm_list{
                        z-index: 10;
                        font-size: 12px;
                        text-align: center;
                        .alarm_list_item{
                          position: relative;
                          margin: 0 5px;
                          padding: 6px 10px;
                          border-radius: 30px;
                          color: #fff;
                          background-color: #455b6d;
                          img{
                            width: 20px;
                            height: 20px;
                            vertical-align: middle;
                          }
                          .alarm_item_brager{
                            position: absolute;
                            font-weight: bold;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 20px;
                            top: -13px;
                            right: 0;
                            font-size: 10px;
                          }
                        }
                     }
                     .videocount{
                      height: 20px;
                      width: 13%;
                      line-height: 20px;
                      margin-right: 2px;
                      cursor: pointer;
                      .videocount_item{
                          display: inline-block;
                          padding: 5px 10px;
                          background-color: #262f38;
                          color: #686f75;
                          font-size: 12px;
                        }
                        .videocount_item.active,.videocount_item:hover{
                          background-color: #2184fa;
                          color: #fff;
                        }
                     }
                }
                .middle{
                    height: calc(100% - 40px);
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    .video{
                      background-image: url('/images/video_bg.png');
                      background-size: contain;                      
                      .video-title{
                        background-color: #ffffff45;
                        font-size: 12px;
                        height: 20px;
                        line-height: 20px;
                        color: #fff;
                        img{
                          width: 24px;
                          height: 14px;
                          vertical-align: text-top;
                          margin: 0 5px;
                        }
                      }
                      .video-play{
                        width: 100%;
                        height: calc(100% - 20px);
                      }
                    }
                    .contrlset{
                      position: absolute;
                      width: 1288px !important;
                      height: 760px !important;
                      z-index: 1000;
                      left: 50%;
                      top: 50%;
                      margin-top: -380px !important;
                      margin-left: -644px !important;
                      border-radius: 10px;
                      border: 1px solid #4f555c;
                      .video-title{
                        border-radius: 10px 10px 0 0 !important;
                      }
                      .cloudset{
                        width: 258px !important;
                        margin-left: 4px;
                        background-color: #303740;
                        border: 1px solid #4f555c;
                        height: calc(100% - 20px);
                        float: right;
                        border-radius: 0 0 10px 0;
                        .camername{
                          color: #dadada;
                          font-weight: bold;
                          font-size: 20px;
                          width: 100%;
                          text-align: center;
                          height: 100px;
                          line-height: 100px;
                        }
                        .cc{
                          position: relative;
                          height: 260px;
                          width: 100%;
                          .cc_bg{
                            background-image: url('/images/cc_bg.png');
                            width: 150px;
                            height: 150px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-left: -75px;
                            margin-top: -75px;
                            background-size: contain;                            
                          }
                          .cc_01{
                            background-image: url('/images/cc_01.png');
                            background-size: contain;
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            top:75px;
                            left:50%;
                            margin-left: -10px;
                            cursor: pointer;
                          }
                          .cc_02{
                            background-image: url('/images/cc_02.png');
                            background-size: contain;
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            bottom:75px;
                            left:50%;
                            margin-left: -10px;
                            cursor: pointer;
                          }
                          .cc_03{
                            background-image: url('/images/cc_03.png');
                            background-size: contain;
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            top:50%;
                            right:73px;
                            margin-top: -10px;
                            margin-left: -10px;
                            cursor: pointer;
                          }
                          .cc_04{
                            background-image: url('/images/cc_04.png');
                            background-size: contain;
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            top:50%;
                            left:82px;
                            margin-top: -10px;
                            margin-left: -10px;
                            cursor: pointer;
                          }
                        }
                        .cc_params{
                          color: #dadada;
                          height: 40px;
                          line-height: 40px;
                          font-size: 12px;
                          width: 100%;
                          padding: 0 20px;
                          display: flex;
                          img{
                            height: 32px;
                            width: 32px;
                            cursor: pointer;
                            margin-top: 4px;
                          }
                          .span1{
                            width:36px;
                          }
                          .span2{
                            margin-left:5px;
                            font-size: 10px;
                          }
                          .span3{
                            font-size: 10px;
                            display: inline-block;
                            width: 100px;
                            height: 2px;
                            background: #ffffff33;
                            margin: 20px 0;
                            position: relative;
                            .span31{
                              position: absolute;
                              height: 2px;
                              background-color: #fff;
                              left:0;
                              top:0;
                              width:0%;
                            }
                            .span32{
                              background-image: url('/images/cc_p.png');
                              background-size: contain;
                              width: 20px;
                              height: 20px;
                              position: absolute;
                              top:-9px;
                              left:-8px;
                            }
                          }
                          .span4{
                            font-size: 10px;
                            opacity: 0.2;
                            margin-right:5px;
                          }
                        }
                        .audio{
                          position: relative;
                          height: 100px;
                          margin-top: 50px;
                          width: 100%;
                          img{
                            width:48px;
                            height: 48px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-left: -24px;
                            margin-top: -24px;
                          }
                        }
                      }
                      .video-play{
                        width: 1024px !important;
                        float: left;
                      }
                    }
                    .type4{
                      width: calc(50% - 10px);
                      height: calc(50% - 10px);
                      margin: 5px;
                    }
                }
            }
        }
    }
</style>