<template>
  <div class="bioSafety">
    <div class="bio-flex">
      <div class="bio-flex-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">门卫管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-video">
          <div class="kuang">
            <iframe v-if="isVideo"  :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 95%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
          </div>
        </div>
        <div class="bio-out">
          <div class="bio-out-center">
            <div class="out-img"></div>
            <div style="color: white; font-size: 16px">
              <p>今日抓取次数</p>
              <p style="font-size: 22px; font-weight: 600">{{pig.tadayGate}}</p>
            </div>
          </div>
          <div class="bio-out-center">
            <div class="out-img1"></div>
            <div style="color: white; font-size: 16px">
              <p>七日抓取次数</p>
              <p style="font-size: 22px; font-weight: 600">{{pig.SevenDayGate}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">车辆管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{pig.carPassIn}}</strong>
                <span>次</span>
              </div>
              <div class="text">今日驶入</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{pig.carPassOut}}</strong>
                <span>次</span>
              </div>
              <div class="text">今日驶出</div>
            </div>
          </div>
          <div class="bio-content-right"
               v-loading="carLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper v-if="carListContent.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in carListContent" :key="i">
                <div class="case" @click="open(item, 1)">
                  <div class="case-left1">
                    <el-avatar :size="75" :src="item.originalPicPath" fit="cover"></el-avatar>
<!--                    <img style="align-items: center;" :src="item.originalPicPath" width="100%" alt="">-->
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{ item.capTimeStr }}</div>
                    <div class="case-content">
                      <div class="content-grid">
                        <span>区域：</span>
                        <span>{{item.devChnName}}</span>
                      </div>
                      <div class="content-grid">
                        <span>车牌:</span>
                        <span>{{item.carNum ? item.carNum : '未识别'}}</span>
                      </div>
                      <div class="content-grid">
                        <span>方向：</span>
                        <span>{{item.carDirectStr}}</span>
                      </div>
                      <div class="content-grid">
                        <span>车辆颜色：</span>
                        <span>{{item.parkingCarColor}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div v-else style="line-height: 250px; color: white; font-size: 18px"> 暂无数据</div>
          </div>
        </div>
        <div class="bio-content"
             v-loading="carsLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar v-if="carList.data.length > 0" :data="carList"></chart-bar>
          <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">门禁管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{enterPerson}}</strong>
                <span>人次</span>
              </div>
              <div class="text">今日进入人数</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{outPerson}}</strong>
                <span>次</span>
              </div>
              <div class="text">今日违规次数</div>
            </div>
          </div>
          <div class="bio-content-right"  v-loading="personLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper v-if="personList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in personList" :key="i">
                <div class="case" @click="open(item, 2)">
                  <div class="case-left1">
<!--                    <el-avatar :size="75" :src="item.recordImage" fit="none"></el-avatar>-->
                    <img :src="item.recordImage" width="100%" alt="">
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{item.swingTime}}</div>
                    <div style="text-align: left; margin-left: 10px">
                      <div style="color: white; line-height: 30px">
                        <span>姓名：</span>
                        <span>{{item.personName ? item.personName : '未识别'}}</span>
                      </div>
                      <div style="color: white; line-height: 30px">
                        进入区域：
                        <span style="padding-left: 10px">{{item.deviceName}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
          </div>
        </div>
        <div class="bio-content" v-loading="personChartLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar v-if="data1.data.length > 0" :data="data1" ></chart-bar>
          <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="bio-flex-1">
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">人员管理</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>进出人次</span>
                <strong>&nbsp;126</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img"></div>
              <div style="color: white; font-size: 14px">
                <p>正常进入</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{namalCount}}</strong>人次</span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-1"></div>
              <div style="color: white; font-size: 14px">
                <p>违规次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{alarmCount}}</strong>人次</span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right">
            <chart-bar :data="data2" v-if="data2.data.length > 0"></chart-bar>
            <div v-else style="line-height: 250px; width: 100%; color: white; font-size: 18px">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="bio-flex-1-center">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">车辆烘干</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical"  v-loading="hgLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar v-if="data3.data.length > 0" :data="data3"></chart-bar>
          <div v-else style="line-height: 250px; width: 100%; color: white; font-size: 18px">暂无数据</div>
        </div>
      </div>
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">死猪管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>视频抓取数</span>
                <strong>&nbsp;{{value1}}</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-2"></div>
              <div style="color: white; font-size: 14px">
                <p>七日抓取次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{value2}}</strong></span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-3"></div>
              <div style="color: white; font-size: 14px">
                <p>最近抓取时间</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{(value3).slice(5,16)}}</strong></span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right" v-loading="sizhuLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper v-if="sizhuList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in sizhuList" :key="i">
                <div class="case case1" @click="open(item, 3)">
                  <div class="case-left">
                    <el-avatar :size="75" :src="item.alarmPicture" fit="cover"></el-avatar>
<!--                    <img :src="item.alarmPicture" width="100%" alt="">-->
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{ item.alarmDate }}</div>
                    <div class="case-content1">
                      <span>位置：</span>
                      <span>{{item.alarmPosition}}</span>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div v-else style="line-height: 250px; color: white; font-size: 18px"> 暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
      <div class="dialog-content1" v-if="type === 1">
        <div>
<!--          <img style="float: left" :src="selectImg" height="400px" alt="">-->
          <div class="base-banner">
            <div class="base-left">
              <img :src="selectImg"  width="100%" alt="">
            </div>
            <div class="base-right">
              <p>抓拍时间：{{selectItems.capTimeStr}}</p>
              <p>抓拍区域：{{selectItems.devChnName}}</p>
              <p>车 牌 号：{{selectItems.carNum ? selectItems.carNum : '未识别'}}</p>
              <p> 方 向 ：{{selectItems.carDirectStr}}</p>
              <p>车辆颜色：{{selectItems.parkingCarColor}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-content2" v-else-if="type === 2">
        <div class="base-banner1">
          <div class="base-left1">
            <img :src="selectImg"  height="500px" alt="">
          </div>
          <div class="base-right">
            <p>抓拍时间：{{selectItems.swingTime}}</p>
            <p>抓拍区域：{{selectItems.deviceName}}</p>
            <p> 姓 名 ：{{selectItems.personName ? selectItems.personName : '未识别'}}</p>
          </div>
        </div>
      </div>
      <div class="dialog-content" v-else-if="type === 3">
        <iframe
            v-if="type === 3 && dialog === true"
            :src="'static/dahua/index.html?' + rtsp"
            frameborder="0"
            style="width: 100%; height: 700px"
        >
        </iframe>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import ChartBar from "@/views/BioSafety/chart/ChartBar";
import {
  getCar,
  getRecord,
  getSizhu,
  getCarList,
  getPersonList,
  getSizhuList,
  getHoure,
  getDoor,
  getCarWashVideo,
  getAlarmAndPig,
  getBaseVideo,
  JmGroups
} from "@/utils/api";
import axios from "axios";
import {timeDate} from "@/utils";
import { mapState } from "vuex";

export default {
  name: "BioSafety",
  components: {
    swiper,
    swiperSlide,
    ChartBar
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
      carList: {
        id: 11,
        time: [],
        data: [],
        name: '',
        unit: '次'
      },
      data1: {
        id: 1,
        time: [],
        data: [],
        name: '',
        unit: '人次'
      },
      data2: {
        id: 2,
        time: [],
        data: [],
        name: '',
        unit: '人次'
      },
      data3: {
        id: 3,
        time: [],
        data: [],
        name: '',
        unit: '次'
      },
      value1: '0',
      value2: '0',
      value3: '',
      carListContent: [],
      dialog: false,
      selectImg: '',
      type: 1,
      personList: [],
      sizhuList: [],
      token: '',
      carLoading: true,
      carsLoading: true,
      personLoading: true,
      personChartLoading: true,
      sizhuLoading: true,
      hgLoading: true,
      enterPerson: '0',
      outPerson: '0',
      rtsp: '',
      selectItems: {},
      pig: {
        SevenDaySiZhu: "0",
        SevenDayXIxiao: "0",
        carPassIn: "0",
        carPassOut: "0",
        personPassFail: "0",
        personPassSuccess: "0",
        tadaySiZhu: "0",
        tadayXiXiao: "0",
        SevenDayGate: '0',
        tadayGate: '0',
      },
      cameraOne: '',
      cameraTwo: '',
      isVideo: false,
      namalCount: 0,
      alarmCount: 0,
    }
  },
  computed: {
    ...mapState(['ip'])
  },
  methods: {
    init() {
      var that = this;
      axios.all([
        getCar({}),
          getRecord({})
      ]).then(axios.spread(function (res1, res2){
        if(res1.code === 0) {
          if(res1.data !== null) {
            that.carList.time = [];
            that.carList.data = [];
            res1.data.forEach(item => {
              that.carList.time.push(item.time);
              that.carList.data.push(item.value);
            })
          }
          that.carsLoading = false;
        }
        if(res2.code === 0) {
          if(res2.data !== null) {
            that.data1.time = [];
            that.data1.data = [];
            res2.data.forEach(item => {
              that.data1.time.push(item.time);
              that.data1.data.push(item.value);
            })
          }
          that.personChartLoading = false;
        }
      }))
      getSizhu({}).then(res => {
        if(res.code=== 0) {
          if(res.data !== null ) {
            this.value1 = res.data.value2;
            this.value2 = res.data.value1;
            this.value3 = res.data.value3;
          }
        }
      })
      // 车辆管理列表
      getCarList({pageNum:1,pageSize: 21}).then(res => {
        if(res.code == 200) {
          that.carLoading = false;
          const result = JSON.parse(res.result);
          this.carListContent = result.data.pageData;
          this.carListContent.forEach((item) => {
            item.originalPicPath = `${this.ip}/video/picture/get?fileUrl=${item.originalPicPath}`;
            item.devChnName = item.devChnName.split("_")[0];
          });
          // this.carListContent = res.data;
        } else {
          that.carLoading = false;
        }
      })
      // 门禁管理列表
      let params1 = {
        openType: 61,
        pageNum:1,
        pageSize: 21,
        startSwingTime: timeDate(new Date().getTime()) + ' 00:00:00',
        endSwingTime: timeDate(new Date().getTime()) + ' 23:59:59',
      }
      getPersonList(params1).then(res => {
        if(res.code == 0) {
          let result = JSON.parse(res.result);
          this.personList = result.data.pageData;

          this.personList.forEach((item) => {
            item.channelName = item.channelName.split("人脸门禁")[0];
            item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
          });
          that.personLoading = false;
        } else {
          that.personLoading = false;
        }
      })
      let queryParams = {
        pageNum: 1,
        pageSize: 21,
        alarmStartDateString: timeDate(new Date().getTime()) + " 00:00:00",
        alarmEndDateString: timeDate(new Date().getTime()) + " 23:59:59",
        nodeCodeList: [
          "1002874$1$0$0",
          "1002875$1$0$0",
          "1002876$1$0$0",
          "1002877$1$0$0",
          "1002878$1$0$0",
          "1002879$1$0$0",
          "1002880$1$0$0",
          "1002881$1$0$0",
          "1002882$1$0$0",
          "1002883$1$0$0",
          "1002884$1$0$0",
          "1002885$1$0$0",
          "1002886$1$0$0",
          "1002887$1$0$0",
          "1002888$1$0$0",
          "1002889$1$0$0",
          "1002890$1$0$0",
          "1002891$1$0$0",
          "1002892$1$0$0",
          "1002893$1$0$0",
          "1002894$1$0$0",
          "1002895$1$0$0",
          "1002896$1$0$0",
          "1002897$1$0$0",
          "1002898$1$0$0",
          "1002899$1$0$0",
          "1002900$1$0$0",
          "1002901$1$0$0",
          "1002902$1$0$0",
          "1002903$1$0$0",
          "1002904$1$0$0",
          "1002905$1$0$0",
          "1002906$1$0$0",
          "1002907$1$0$0",
          "1002908$1$0$0",
          "1002909$1$0$0",
          "1002910$1$0$0",
          "1002911$1$0$0",
          "1002912$1$0$0",
          "1002913$1$0$0",
          "1002939$1$0$0",
          "1002939$1$0$1",
          "1002939$1$0$2",
          "1002939$1$0$3",
          "1002939$1$0$4",
          "1002939$1$0$5",
          "1002939$1$0$6",
          "1002939$1$0$7",
          "1002939$1$0$8",
          "1002939$1$0$9",
          "1002940$1$0$0",
          "1002940$1$0$1",
          "1002940$1$0$2",
          "1002940$1$0$3",
          "1002940$1$0$4",
          "1002940$1$0$5",
          "1002940$1$0$6",
          "1002940$1$0$7",
          "1002939$1$0$10",
          "1002939$1$0$11",
          "1002939$1$0$12",
          "1002939$1$0$13",
          "1002939$1$0$14",
          "1002939$1$0$15",
        ],
        deviceCategory: 1,
        alarmType: 303,
        dbType: 0,
      };
      getSizhuList(queryParams).then( res => {
        if(res.code == 0) {
          const result = JSON.parse(res.result);
          this.sizhuList = result.data.pageData;
          this.sizhuList.forEach((item) => {
            item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
          });
          this.sizhuLoading = false;
        } else {
          this.sizhuLoading = false;
        }
      })
      getHoure({}).then(res => {
        if(res.code === 10000) {
          if(res.data !== null) {
            this.data3.time = [];
            this.data3.data = [];
            res.data.forEach(item => {
              this.data3.time.push(item.time);
              this.data3.data.push(item.value);
            })
          }
          this.hgLoading = false;
        }
      })
      // 门禁违规
      getDoor({}).then(res => {
        if(res.code === 0) {
          if(res.data !== null) {
            this.enterPerson = res.data.value1;
            this.outPerson = res.data.value2;
          }
        }
      })

      // 今日车辆驶入
      getAlarmAndPig({}).then(res => {
        if(res.code === 0) {
          if(res.data !== null) {
            this.pig = res.data;
          }
        }
      })


      // 拿到特定视频
      let params2 = {
        type: 1,
      }
      getBaseVideo(params2).then(res => {
        this.isVideo = true;
        if(res.code === 10000) {
          this.cameraOne = res.data[0].wsUrl;
          this.cameraTwo = res.data[0].rtspUrl;
        }
      })

      // 金铭人脸
      JmGroups({}).then(res => {
        if(res.code === 0) {
          if(res.data !== null) {
            console.log(res)
            this.namalCount = res.namalCount;
            this.alarmCount = res.alarmCount;
            this.data2.time = [];
            this.data2.data = [];
            res.data.forEach(item => {
              this.data2.time.push(item.time);
              this.data2.data.push(item.value);
            })
          }
        }
      })
    },
    // 打开img
    open(item, num) {
      this.dialog = true;
      this.type = num;
      this.selectItems = item;
      if(num === 1) {
        this.selectImg = item.originalPicPath;
      } else if(num === 2) {
        this.selectImg = item.recordImage;
      } else {
        // 拿到视频回放
        getCarWashVideo({
          happendTime: item.alarmDate,
          channelName: item.alarmPosition,
        }).then((res) => {
          if (res.code === 0) {
            this.rtsp = res.URL;
            this.videoVisible = true;
          } else {
            this.$message.error("视频获取失败");
          }
        });
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
  p{
    margin: 0;
  }
  .swiper-slide {
    height: 100px;
  }
  .bioSafety {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
  }
  .bio-flex {
    width: 100%;
    height: 560px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-left {
    width: 770px;
    height: 100%;
    /*border: 1px solid rgb(121, 121, 121);*/
  }
  .bio-flex-center {
    width: 465px;
    height: 100%;
    /*border: 1px solid rgb(121, 121, 121);*/
  }
  .bio-title {
    width: 100%;
    height: 26px;
    display: flex;
  }
  .bio-video {
    width: 100%;
    height: 440px;
    box-sizing: border-box;
    padding: 20px;
  }
  .kuang {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .bio-out {
    width: 100%;
    height: calc(100% - 440px - 40px);
    display: flex;
    justify-content: space-around;
  }
  .bio-out-center {
    width: 280px;
    height: 100%;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .out-img {
    width: 54px;
    height: 54px;
    background: url("../../assets/BioSafety/day.svg") no-repeat;
    background-size: 100% 100%;
  }
  .out-img1 {
    width: 54px;
    height: 54px;
    background: url("../../assets/BioSafety/servenday.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-title-left {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-title-left-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1745.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left-1:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center-1 {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1746.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right-1:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-content {
    width: 100%;
    height: calc((100% - 26px) / 2);
  }
  .flex {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;
  }
  .bio-content-left {
    width: 132px;
    height: 100%;
  }
  .bio-content-right {
    width: calc(100% - 142px);
    height: 100%;
    overflow: hidden;
  }
  .box {
    width: 100%;
    height: 113.5px;
    position: relative;
  }
  .circle {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: url("../../assets/BioSafety/ciru.png") no-repeat;
    background-size: 100% 100%;
    transform: rotate(40deg);
    position: relative;
  }
  .price {
    width: 100%;
    text-align: center;
    color: #00D1E5;
    position: absolute;
    top: 35px;
  }
  .price-size {
    font-size: 18px;
  }
  .text {
    width: 100%;
    text-align: center;
    color: white;
  }
  .case {
    width: 330px;
    height: 75px;
    background: url("../../assets/BioSafety/330x75(1).svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
  }
  .bio-flex-1 {
    width: 100%;
    height: calc(100% - 580px);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-1-left {
    width: 600px;
    height: 100%;
  }
  .bio-flex-1-center {
    width: 500px;
    height: 100%;
  }
  .bio-vertical {
    width: 100%;
    height: calc(100% - 26px);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
  .bio-vertical-left {
    width: 200px;
    height: 100%;
  }
  .bio-vertical-right {
    margin-left: 10px;
    flex: 1;
  }
  .bio-vertical-title {
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-left {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2475.svg") no-repeat;
    background-size: 100% 100%;
  }
  .title-center {
    flex: 1;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .title-center strong {
    font-size: 25px;
  }
  .title-right {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2476.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-vertical-content {
    width: 100%;
    height: 65px;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    margin-top: calc((100% - 155px));
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .content-img {
    width: 40px;
    height: 40px;
    background: url("../../assets/BioSafety/u3222.png") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-1 {
    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-2 {
    background: url("../../assets/BioSafety/u2168.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-3 {
    background: url("../../assets/BioSafety/u2179.svg") no-repeat;
    background-size: 100% 100%;
  }
  .case1 {
    width: 370px;
    height: 75px;
    background: url("../../assets/BioSafety/370x75(1).svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
  }
  .case-left1 {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 100%;
    display: flex;
    align-items: center;
  }
  .case-left {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 100%;
  }
  .case-right {
    flex: 1;
  }
  .case-time {
    width: 100%;
    height: 12px;
    box-sizing: border-box;
    line-height: 12px;
    text-align: left;
    /*text-align: center;*/
    font-size: 12px;
    color: #333
  }
  .case-box {
    width: 100%;
    height: calc(100% - 15px);
    display: flex;
    align-items: center;
  }
  .case-img {
    width: 60px;
    height: 100%;
    /*background-size: 100% 100%;*/
  }
  .case-img1 {
    width: 120px;
    height: 100%;
    /*background-size: 100% 100%;*/
  }
  .case-content {
    width: 100%;
    height: calc(100% - 14px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .case-content1 {
    width: 100%;
    height: calc(100% - 14px);
    text-align: center;
    color: white;
    line-height: 30px;
  }
  .content-grid {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    /*padding-left: 10px;*/
    line-height: 30px;
    color: white;
  }
  .bio-dialog {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .9);
    z-index: 999;
  }
  .dialog-content {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: #fff;*/
  }
  .dialog-content1 {
    width: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*background-color: black;*/
  }
  .dialog-content2 {
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*background-color: black;*/
  }
  .base-banner {
    width: 1200px;
    height: 600px;
    background: url("../../assets/BioSafety/03.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    box-sizing: border-box;
    padding: 40px 20px 20px 50px;
    align-items: center;
  }
  .base-banner1 {
    width: 800px;
    height: 600px;
    background: url("../../assets/BioSafety/03.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    box-sizing: border-box;
    padding: 40px 20px 20px 50px;
    align-items: center;
  }
  .base-left {
    width: 750px;
  }
  .base-left1 {
    box-sizing: border-box;
    text-align: left;
    padding-left: 100px;
    height: 500px;
  }
  .base-right {
    flex: 1;
  }
  .base-right p {
    line-height: 80px;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    text-align: left;
    padding-left: 50px;
  }
</style>
