<template>
  <!-- @keydown.esc.stop="() => {
       full = fullScreen(full)
       switchVideoPalyer(saveVideoType);
  }" -->
  <div id="DataHome">
    <!-- 盒子 | S-->
    <div v-if="full" class="video-box">
      <!-- canvaS -->
      <canvas style="width: 100%; height: 100%;" id="canvas-04">
      </canvas>

      <div style="position: absolute; bottom: 20px; right: 30px; width: 40px; height: 40px; cursor: pointer; ">
        <icon-gridicons-fullscreen-exit v-if="full" color="#1872F0" font-size="30"
          style="position: relative; z-index: 9999;" @click="() => {
            full = fullScreen(full)
            switchVideoPalyer(saveVideoType);
          }
            " />
        <icon-gridicons-fullscreen v-else font-size="30" style="position: relative; z-index: 9999;" color="#1872F0"
          @click="() => {
            full = fullScreen(full);
            console.log(full);
          }" />
      </div>
    </div>

    <!-- ========================================= 弹窗 | S -->
    <NModal v-model:show="showModal">
      <div class="modal-wrap">
        <!-- ================================== Modal 标题 -->
        <div class="modal-top text-focus-in">
          <div>
            <NSpace v-if="!isVideoPlayer">
              <div v-if="cLogInfo?.algorithmGrade === 0" class="order-type01"></div>
              <div v-if="cLogInfo?.algorithmGrade === 1" class="order-type02"></div>
              <div v-if="cLogInfo?.algorithmGrade === 2" class="order-type03"></div>
              <div v-if="cLogInfo?.algorithmGrade === 3" class="order-type04"></div>
              <div v-if="cLogInfo?.algorithmGrade === 4" class="order-type05"></div>
              <span style="font-size: 16px; color: #fff; vertical-align: top; position: relative; top:-2px;">{{
                cLogInfo.algorithmName }}</span>
            </NSpace>

            <NSpace v-else>
              <div class="order-reset01" @click="isVideoPlayer = false"></div>
              <span style="font-size: 16px; color: #fff; vertical-align: top; position: relative; top:-2px;">[ {{
                cLogInfo.algorithmName }}
                ]</span>
            </NSpace>
          </div>
          <span
            style="font-size: 16px; color: #fff; vertical-align: top; position: relative; left: -37px; top: 2px; ">{{
              cLogInfo.createTime }}</span>


          <div style="display: flex; align-items: center; ">
            <!-- /**
            1. 三种结果
            2. 改变状态之后， 变更标识


            */ -->

            <div v-if="cLogInfo.status === 0" class="no-result-type"></div>
            <div v-if="cLogInfo.status === 1" class="success-type">
            </div>
            <div v-if="cLogInfo.status === 2" class="error-type">
            </div>
            <div @click="showModal = false" class="close-img"></div>
          </div>
        </div>
        <!-- ================================== Modal 标题 -->
        <div v-if="!isVideoPlayer" class="modal-content">
          <img style="width: 100%; height:100%" :src="cLogInfo.image" />
        </div>

        <!-- =============================================== VIDEO 暂未全部展示问题， 目前两侧留有白边 | S -->
        <div v-else class="modal-content-video">
          <!-- <canvas id="canvas-4"></canvas> -->
          <!-- MP4 切换视频 -->
          <!-- width: 100%; height: 100%;  -->
          <!--
            既： 1080 * 1920 （57p 100p）
          -->
          <video controls style="width: 100%; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
            <source :src="`${apiUrl}/v1/playVideo/${cLogInfo?.remark}`" type="audio/mpeg">
            </source>
          </video>
        </div>
        <!-- =============================================== VIDEO 暂未全部展示问题， 目前两侧留有白边 | E -->
        <!--  footer  -->
        <div v-if="!isVideoPlayer" class="modal-footer">
          <NSpace>
            <div @click="() => modifyAlramStatus(cLogInfo.id, '1')" class="success-btn"></div>
            <div @click="() => modifyAlramStatus(cLogInfo.id, '2')" class="error-btn"></div>
          </NSpace>
          <div @click="isVideoPlayer = true" class="video-btn"></div>
        </div>
      </div>
    </NModal>
    <!-- ========================================= 弹窗 | E -->

    <!-- 管理后台 -->
    <div class="header-wrap">
      <i class="tracking-in-contract">智慧矿山AI推理平台</i>
    </div>

    <NModal v-model:show="videoModal">
      <NCard>
        <canvas style="width: 100%; height: 100%; border: 1px solid red;" id="canvas-4"></canvas>
      </NCard>
    </NModal>


    <!-- 管理后台 -->
    <div style="cursor: pointer; position: fixed; top: 4vh; width: 220px; height: 50px; margin-left: 15px; "
      @click="router.push('/home')">
      <img style="width: 150px; height: 35px; position: absolute; top: 0; left: 0;" src="../../../assets/UI_06.png">
    </div>

    <!-- 内容区域 -->
    <div v-if="isAaralmModule && !full">
      <NRow style="height: 85vh">
        <NCol :span="5">
          <Row :gutter="16">
            <!-- 左侧盒子 - 上 -->
            <div class="left-wrap text-focus-in" style="height: 100%;">
              <div class="left-01" style="height: 100%; ">
                <div class="item-wrap">
                  <div>
                    <img src="../../../assets/jiankong1.png"
                      style="height: 80px; display: inline-block;  border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
                    <br />
                    <i>在线监控: {{ form[0] || 0 }} 个 </i>
                  </div>
                  <div>
                    <img src="../../../assets/jiankong2.png"
                      style="height: 80px; display: inline-block;  border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
                    <br />
                    <i>离线监控: {{ form[1] || 0 }} 个 </i>
                  </div>
                </div>
              </div>
              <!-- 左侧盒子 - 中 -->
              <div class="left-02 text-focus-in" style="height: 100%; ">
                <!-- ==================== 饼图 | S -->
                <!-- <Echat></Echat> -->
                <!-- ==================== 饼图 | E -->
                <PieChart />
              </div>
              <!-- 左侧盒子 - 下 -->
              <div class="left-03 text-focus-in" style="height: 100%; ">

                <div class="left_03-bottom">
                  <i class="left_03-t"> 今日累计报警</i>
                  <i class="left_03-t">报警已处理</i>
                  <i class="left_03-t">报警未处理</i>
                  <!-- <i class="left_03-t01"> {{ alarmResultDat?.totalCount || 0 }}</i>
                  <i class="left_03-t01"> {{ alarmResultDat?.disposeCount || 0 }}</i>
                  <i class="left_03-t01"> {{ alarmResultDat?.unDisposeCount || 0 }}</i> -->
                </div>

                <div class="left_03-number">
                  <i class="left_03-t01" style="position: relative; right: -10px;">
                    <n-number-animation ref="numberAnimationInstRef" :from="0" :to="alarmResultData?.totalCount" />
                    <!-- {{ alarmResultData?.totalCount || 0
                    }} -->
                  </i>
                  <i class="left_03-t01" style="position: relative; right: 0px;">
                    <n-number-animation ref="numberAnimationInstRef" :from="0" :to="alarmResultData?.disposeCount" />
                    <!-- {{ alarmResultData?.disposeCount || 0
                    }} -->
                  </i>
                  <i class="left_03-t01" style="position: relative; right: 10px;">
                    <n-number-animation ref="numberAnimationInstRef" :from="0" :to="alarmResultData?.unDisposeCount" />
                    <!-- {{ alarmResultData?.unDisposeCount ||
                    0 }} -->
                  </i>
                </div>
              </div>
            </div>
          </Row>
        </NCol>
        <!-- ====================================================================================== 中间区域 | S -->
        <!-- ====================================================================================== 中间区域 | E -->
        <NCol :span="14">
          <div class="main-wrap text-focus-in">
            <!-- 中间区域 - top -->
            <div class="main_video-wrap">
              <!-- =================================== video  -->
              <!-- class="video text-focus-in" -->
              <!-- <div :class="[full ? 'video-player' : 'video text-focus-in']"> -->
              <div class="video text-focus-in">

                <!-- 全局图标 -->
                <!-- full -->
                <div :class="[full ? 'video-player' : 'canvas-wrap']">
                  <div
                    style="position: absolute; bottom: 20px; right: 30px; width: 40px; height: 40px; cursor: pointer; ">
                    <!--  -->
                    <icon-gridicons-fullscreen-exit v-if="full" color="#1872F0" font-size="30"
                      style="position: relative; z-index: 9999;" @click="() => {
                        full = fullScreen(full);
                      }" />
                    <!--  -->
                    <icon-gridicons-fullscreen v-else font-size="30" style="position: relative; z-index: 9999;"
                      color="#1872F0" @click="() => {
                        full = fullScreen(full);
                        switchVideoPalyer01(saveVideoType);
                        console.log(full);
                      }" />
                  </div>
                  <canvas id="canvas-4"></canvas>
                </div>
                <img style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"
                  src="../../../assets/UI-1_03.png" alt="">
                <!-- 临时测试 -->
                <div style="position: absolute; top: 20px; right: 30px;  cursor: pointer;  width: 200px;">
                  <NSelect :style="{
                    '--n-border': 'none !important',
                    '--n-color': '#0E4AB3 !important',
                  }" size="small" @update:value="val => switchVideoPalyer(val)" placeholder="监控源"
                    label-field="cameraName" value-field="id" :options="cameraList"></NSelect>
                </div>
              </div>
            </div>

            <!-- 监控中心 - bottom -->
            <div class="main_draw-wrap" style="position: relative;">
              <!-- 日期 -->
              <div style=" position: absolute; right: 20px; top: 10px; width: 300px; ">

                <!-- 日期 ++++++++++++++++++++++++++++++++++++ | S -->
                <n-date-picker :style="{
                  '--n-color': '#0000CD'
                }" size="small" v-model:value="range" type="daterange" clearable />
                <!-- 日期 ++++++++++++++++++++++++++++++++++++ | E -->
              </div>
              <!-- 折线图 -->
              <div style="margin: 50px 20px 0px; height: calc(100% - 40px)">
                <LineChart :date="range" style="width: 100%; height: 100%" />
              </div>
            </div>
          </div>
        </NCol>

        <NCol :span="5" style="padding: 10px;">
          <div class="right-wrap">
            <!-- 详情+ -->
            <div @click="isAaralmModule = false" class="detail-text">
              <i>详情 +</i>
            </div>
            <!-- 报警中心项 -->
            <NRow v-for="i in tableData" :gutter="20" class="blinking-red slide-in-blurred-bottom" @click="(e) => {
              e.stopPropagation();
              e.preventDefault();
              cLogInfo = i;
              console.log(i);
              isVideoPlayer = false;
              showModal = true;
            }"
              style="margin-bottom: 5px; cursor: pointer; background-color: #000348; color: #fff;overflow: hidden; padding: 20px 10px; position: relative; display: flex; justify-content: center; align-items: center;">
              <!-- title -->
              <NCol :span="12">
                <n-space justify="space-around" size="large" vertical>
                  <div>
                    <NSpace>
                      <!-- ====================================================== image 报警中心 | S -->
                      <div v-if="i?.algorithmGrade == 0" class="order-type01"></div>
                      <div v-if="i?.algorithmGrade == 1" class="order-type02"></div>
                      <div v-if="i?.algorithmGrade == 2" class="order-type03"></div>
                      <div v-if="i?.algorithmGrade == 3" class="order-type04"></div>
                      <div v-if="i?.algorithmGrade == 4" class="order-type05"></div>
                      <!-- ====================================================== image 报警中心 | E -->
                      <h1> {{ i.algorithmName || "张三" }}</h1>
                    </NSpace>
                  </div>
                  <div>{{ i?.cameraName || "lisi" }}</div>
                  <div>{{ i?.createTime || "2024/09/16" }}</div>
                </n-space>
              </NCol>
              <!-- image -->
              <NCol :span="12">
                <img style="height: 100px; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,.3);" :src="i.image">
                </img>
              </NCol>
            </NRow>
          </div>
        </NCol>
      </NRow>
    </div>


    <div v-if="!isAaralmModule && !full" class="alarmModule">
      <!-- 返回相关 | S -->
      <!-- <div style="margin-bottom: 20px;">
        <NSpace>
          <div class="back-btn" @click="isAaralmModule = true"></div> -->
      <!-- <span @click="isAaralmModule = true" class="alarm-title">报警中心</span> -->
      <!-- </NSpace>
      </div> -->


      <!-- 报警中心 -->
      <n-row style="margin-bottom: 20px;">
        <n-col :span="6">
          <NSpace align="center">
            <div class="back-btn" @click="isAaralmModule = true"></div>
            <n-divider vertical />
            <span @click="isAaralmModule = true" class="alarm-title"><i>报警中心</i></span>
          </NSpace>
        </n-col>
      </n-row>

      <!-- 报警 -->
      <n-row>
        <n-col :span="6" style="display: flex; justify-content: center; align-items: center;" v-for="item in tableList"
          :key="10000">
          <!-- 单个样式 -->
          <div class="slide-in-blurred-right aaa" style="
              max-width: 650px;
              background-color: #12409E;
              box-shadow: 2px 3px 10px rgba(24, 114, 240, 0.24);
              color: #fff;
              margin: 10px;
              padding: 0 0 5px 0 ;
              border-radius: 5px;
              overflow: hidden;
              min-width: 300px;
              cursor: pointer;
            ">
            <div style="height: 200px; position: relative; ">
              <img @click="(e) => {
                e.stopPropagation();
                e.preventDefault();
                cLogInfo = item;
                console.log(item)
                showModal = true;
              }"
                style="width: 100%;  height: 100%; box-shadow:  0 0 10px rgba(0, 0, 0, 0.2); border: 1px solid #5852FB; translate: scale(1);"
                :src="item?.image" />
            </div>

            <n-flex style="margin: 5px 10px 2px 10px; " justify="space-between">
              <span style="font-size: 18px; font-weight: 500;">
                {{ item?.algorithmName || `` }}
              </span>
              <span style="font-size: 15px; color: #fff; text-decoration: underline;">
                <i>
                  {{ item?.createTime || `` }}
                </i>
              </span>
            </n-flex>

            <n-flex style="font-size: 15px;margin: 0 10px; margin-top: 10px; color: #fff;" align="center"
              justify="space-between">
              <span>{{ item.cameraName }}</span>
              <div v-if="item.status === 0" class="type-01"> </div>
              <div v-else class="type-02"></div>
            </n-flex>
          </div>
        </n-col>
      </n-row>

      <NSpace justify="end">
        <div class="pagination-wrap">
          <!-- pageSize -->
          <n-pagination :item-count="total" v-model:pageSize="pageSize" v-model:page="page" size="large" :style="{
            '--n-item-text-color': '#fff',
            '--n-item-text-color-active': '#153FAC',
            '--n-item-border-active': '#fff',
            '--n-item-text-color-pressed': '#fff',
            '--n-item-font-size': '17px',
            '--n-item-text-color-hover': '#153FAC',
            '--n-item-size': '26px'
          }
            ">
            <template #prev>
              <span style="text-decoration: underline;">上一页</span>
            </template>
            <template #next>
              <span style="text-decoration: underline;">下一页</span>
            </template>
          </n-pagination>
        </div>
      </NSpace>
    </div>
  </div>
</template>


<script setup lang="tsx">
import { useMessage, NRow, NCol, NTag, NSpace, NConfigProvider, darkTheme, NButton, NImage, useNotification, NDropdown, NEllipsis, arDZ } from "naive-ui"
import { api_getAlarmLog, api_getCameraList, api_modifyAlarmLog, api_getAlarmResultData, api_pointsCount } from '@/api/index.ts';
import { ref, onMounted, reactive, nextTick, watch } from 'vue';
import PieChart from '@/views/home/modules/pie-chart-pro.vue';
import LineChart from '@/views/home/modules/line-chart-pro.vue';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import { useRouter } from 'vue-router';
import fullScreen from '@/utils/full'
// import { cursorTo } from "readline";


// 单日志信息
let cLogInfo = ref({
  status: '',
  id: ''
});

const total = ref(0)


const videoModal = ref(false);


let full = ref(false);

const router = useRouter();

const message = useMessage();

// 下拉框列表
const options = ref([
  {
    label: 'Everybody\'s Got Something to Hide Except Me and My Monkey',
    value: 'song0',
    disabled: true
  },
  {
    label: 'Drive My Car',
    value: 'song1'
  },
  {
    label: 'Norwegian Wood',
    value: 'song2'
  },
  {
    label: 'You Won\'t See',
    value: 'song3',
    disabled: true
  },
  {
    label: 'Nowhere Man',
    value: 'song4'
  },
  {
    label: 'Think For Yourself',
    value: 'song5'
  },
  {
    label: 'The Word',
    value: 'song6'
  },
  {
    label: 'Michelle',
    value: 'song7',
    disabled: true
  },
  {
    label: 'What goes on',
    value: 'song8'
  },
  {
    label: 'Girl',
    value: 'song9'
  },
  {
    label: 'I\'m looking through you',
    value: 'song10'
  },
  {
    label: 'In My Life',
    value: 'song11'
  },
  {
    label: 'Wait',
    value: 'song12'
  }
]);

// 修改状态
const modifyAlramStatus = async (id: string, status: string) => {
  await api_modifyAlarmLog(id, status).then(res => {
    if (res.data.code === 200) {
      cLogInfo.value.status = Number(status);
      console.log('cLogInfo.value____________________123', cLogInfo.value.status, Number(status))
      return message.success(res.data.msg)
    }
    return message.error(res.data.msg)
  })
};

// 日期区间范围
const range = ref<[number, number]>([Date.now() - 86400000 * 30, Date.now()]);

// 报警累计三个数值

/**
 *
 *
 *      <i class="left_03-t"> {{ alarmResultDat.totalCount }}</i>
                  <i class="left_03-t"> {{ alarmResultDat.disposeCount }}</i>
                  <i class="left_03-t"> {{ alarmResultDat.unDisposeCount }}</i>
 */

let alarmResultData = ref({
  totalCount: 0,
  disposeCount: 0,
  unDisposeCount: 0
});

const getAlarmResultData = () => {
  return api_getAlarmResultData().then(res => {
    if (res.data.code === 200) {
      alarmResultData.value = res.data.data;
      // console.log(" alarmResultData = res.data.data", alarmResultData)
    }
  })
}

// 服务IP
const apiUrl = import.meta.env.VITE_SERVICE_URL;

// 图片
const img = 'https://jzo2o-oss-11.oss-cn-hangzhou.aliyuncs.com/人员离岗检测-40-10-20241021_134509.jpg';

// 报警中心
const isAaralmModule = ref(true);

// 报警弹窗
const showModal = ref(false);

// 回放
const isVideoPlayer = ref(false);

// 流地址
const serviceUrl = import.meta.env.VITE_VIDEO_URL;

// const message = useMessage();
const cameraList = ref([]);


const cId = ref('');
const cName = ref('');
const jsmpeg = ref(null);

const page = ref(1);

const saveVideoType = ref('');

const switchVideoPalyer = (id: string) => {
  cId.value = id;
  let camera = cameraList.value.filter(item => item?.id === id)[0];

  console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);

  if (!camera?.cameraAddress?.includes(`rtsp://`)) {
    return message.error('摄像头流地址格式有误!');
  }

  cName.value = camera.cameraName;

  jsmpeg.value && jsmpeg.value?.destroy();

  saveVideoType.value = id;

  nextTick(() => {
    try {
      const rtsp1 = camera?.cameraAddress;
      jsmpeg.value = new JSMpeg.Player(
        `${serviceUrl}/rtsp?url=${btoa(rtsp1)}&scale=640:-1&-b:v=1k&brightness=0.2&saturation=1.8`,
        {
          canvas: document.getElementById('canvas-4'),
          preserveDrawingBuffer: true,
          controls: true,
          videoBufferSize: 1024 * 1024 * 2,
        }
      );
    } catch (e) {
      console.log("======================================= error", e);
    }
  });
};


const switchVideoPalyer01 = (id: string) => {
  cId.value = id;
  let camera = cameraList.value.filter(item => item?.id === id)[0];

  console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);

  if (!camera?.cameraAddress?.includes(`rtsp://`)) {
    return message.error('摄像头流地址格式有误!');
  }

  cName.value = camera.cameraName;

  jsmpeg.value && jsmpeg.value?.destroy();

  saveVideoType.value = id;
  nextTick(() => {
    try {
      const rtsp1 = camera?.cameraAddress;
      jsmpeg.value = new JSMpeg.Player(
        `${serviceUrl}/rtsp?url=${btoa(rtsp1)}&-s=1920x1080&fps=30`,
        {
          canvas: document.getElementById('canvas-04'),
          preserveDrawingBuffer: true,
          controls: true,
          videoBufferSize: 1024 * 1024 * 2,
        }
      );
    } catch (e) {
      console.log("======================================= error", e);
    }
  });
};



const tableData = ref([]);
const tableList = ref([]);

const show = ref(false);
// const page = ref(1);
const pageSize = ref(8);

// 获取日志
const getAlarmLogAll = async () => {
  show.value = true;

  const param = {
    pageNum: page.value,
    pageSize: pageSize.value
  };

  await api_getAlarmLog(param)
    .then(res => {
      if (res.data.code === 200) {
        tableList.value = res.data.data.records;
        total.value = res.data.data.total;
        cLogInfo.value
        console.log("获取数据后， 当前的这个数据", tableList.value.filter(item => item.id === cLogInfo.value.id), tableList.value, cLogInfo.value.id)
      }
      show.value = false;
    })
    .catch(() => (show.value = false));
};

watch(page, (newValue, oldValue) => {
  getAlarmLogAll();
});


watch(isAaralmModule, (val) => {
  if (val) {
    // saveVideoType
    switchVideoPalyer(saveVideoType.value);
  }
});

// 获取日志
const getAlarmLog = async () => {

  const param = {
    pageNum: 1,
    pageSize: 5
  };

  await api_getAlarmLog(param).then(res => {
    if (res.data.code === 200) {
      tableData.value = res.data.data.records;

      console.log("大屏报警日志 ==== LOG ======>", tableData.value.filter((item) => item.id == cLogInfo.value.id), tableData, cLogInfo.value.id);

      // console.log("=========== 过滤后的数据", tableData.value.filter(item => item.id));
    }
  });
};

// 获取区域
const getCameraList = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10000,
    resourceNo: '100001000000000'
  };
  await api_getCameraList(params).then(res => {
    if (res.data.code === 200) {
      cameraList.value = res.data.data.records;
      cameraList.value.length > 0 && switchVideoPalyer(cameraList.value[1].id);
    }
  });
};

const form = ref([]);

const getLogData = async () => {
  await api_pointsCount().then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(item => {
        form.value.push(item.count)
      })
    };
  })
}


onMounted(() => {
  getLogData();
  getAlarmLog();
  getAlarmLogAll();
  getCameraList();
  getAlarmResultData();

  const initCanvasStyleFunc = () => {
    let el = document.getElementsByClassName('canvas-wrap')[0];
    el.style.height = `${el.clientWidth / 1920 * 1080 * 0.7}px`
  }

  initCanvasStyleFunc();

  // 监听
  window.addEventListener('resize', () => {
    initCanvasStyleFunc();
  })

  // document.addEventListener('keydown', (e) => {
  //   if(e.keyCode === 18 && full.value) {
  //     full.value = false;
  //   }
  //   console.log("监听到键盘事件 第一次 alt?" , e);
  // });

  /**
   *
   *  默认全屏后， 游览器默认行为， 优先征用 keyup / keydown ， 全屏后， 第一次 esc 不会被触发，存在优先级。
   *  1. fullscreenchange 事件， hack 处理
   */
  document.addEventListener('fullscreenchange', (e) => {

    console.log("=========== 监听到全屏事件", e);
    // full.value = false
    /**
     *
     *
     *
     *
     */

    if (!document.fullscreenElement) {
      full.value = false;
      switchVideoPalyer(saveVideoType.value);
      // window.location.href = '/demo';
    }
  });
});
</script>


<style lang="scss">
#DataHome .n-base-selection {
  --n-border: none !important;
  --n-color: #0E4AB3 !important;
  --n-color-active: #0E4AB3 !important;
  --n-text-color: #fff !important;
  --n-icon-color: #fff !important;
  --n-border: none !important;
  --n-placeholder-color: #fff !important;
  --n-arrow-color: #fff !important;
}

#DataHome .n-input.n-input--resizable.n-input--pair.n-input--stateful {
  --n-color: #0E4AB3 !important;
  --n-color-focus: #0E4AB3 !important;
  --n-text-color: #fff !important;
  --n-icon-color: #fff !important;
  --n-border: none !important;
}

// ======================================= 视频全屏 | S
.video-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999999999999999999;
  border: 10px solid red;
}

;


// ================== 视频盒子 | S
.video-box {
  position: fixed !important;
  width: 100vw;
  height: 100vh;
  z-index: 99999999999999999999;
  box-sizing: border-box;
  overflow: hidden;
}


.left-01 {
  left: 0 !important;
}

.left-02 {
  left: 0 !important;
}

.left-03 {
  left: 0 !important;
}

.modal-wrap {
  background: url('../../../assets/xq2_03.png') no-repeat;
  background-size: 100% 100%;
  width: 800px;
  height: 500px;
}


.modal-top {
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  margin-top: 45px;
  margin: 45px 23px 0px 63px;
}

.modal-content {
  height: 360px;
  margin: 5px 25px 0px;
}

.modal-content-video {
  height: 380px;
  margin: 5px 25px 0px;
  background: #fff;
}


// 报警详情底部
.modal-footer {
  height: 20px;
  display: flex;
  justify-content: space-between;
  margin: 10px 20px;
}

// 正确报警
.success-btn {
  background: url('../../../assets/uic_13.png') no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 25px;
  cursor: pointer;
}

// 报警级别 01
.order-type01 {
  background: url('../../../assets/1j.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}

// 5 5_03.png
.order-type05 {
  background: url('../../../assets/5j.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}

// 4 5_03.png
.order-type04 {
  background: url('../../../assets/4j.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}

// 3 5_03.png
.order-type03 {
  background: url('../../../assets/3j.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}


// 2 5_03.png
.order-type02 {
  background: url('../../../assets/2j.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}



.order-reset01 {
  background: url('../../../assets/fh_03.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;
}

.error-btn {
  background: url('../../../assets/uic_15.png') no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 25px;
  cursor: pointer;
}


.no-result-type {
  background: url('../../../assets/uic_001.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px;
  height: 20px;
  cursor: pointer;

  div {
    display: inline-block;
    text-align: center
  }
}

.success-type {
  background: url('../../../assets/uic_05.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 80px;
  height: 20px;
  cursor: pointer;

  div {
    display: inline-block;
    text-align: center
  }
}

.error-type {
  background: url('../../../assets/cw_03.jpg') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 80px;
  height: 20px;
  cursor: pointer;

  div {
    display: inline-block;
    text-align: center
  }
}

.close-img {
  background: url('../../../assets/uic_07.png') no-repeat;
  margin-left: 15px;
  display: inline-block;
  background-size: 100% 100%;
  width: 15px;
  height: 15px;
  cursor: pointer;
}



.video-btn {
  background: url('../../../assets/uic_17.png') no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 25px;
  cursor: pointer;
}

/* 设置根节点滚动条的宽度和高度 */
#DataHome::-webkit-scrollbar {
  width: 1px;
  /* 水平滚动条的宽度 */
  height: 1px;
  /* 垂直滚动条的高度 */
}

/* 设置根节点滚动条的轨道样式 */
#DataHome::-webkit-scrollbar-track {
  background: transparent;
  /* 设置轨道背景颜色为透明 */
}

/* 设置根节点滚动条的滑块样式 */
#DataHome::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  /* 设置滑块背景颜色为半透明黑色 */
  border-radius: 2px;
  /* 设置滑块圆角 */
}

/* 设置根节点滚动条的箭头按钮样式 */
#DataHome::-webkit-scrollbar-button {
  display: none;
  /* 隐藏箭头按钮 */
}

#DataHome {
  width: calc(100vw);
  height: calc(100vh);
  overflow: hidden;
  box-sizing: border-box;
  background: url('../../../assets/bg.jpg');
  background-size: 100% 100%;

  .text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-29 15:10:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }

    100% {
      -webkit-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }

  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }

    100% {
      -webkit-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }


  #canvas-4 {
    height: 100%;
    width: 100%;
  }

  .canvas-wrap {
    width: calc(100% - 30px);
    // min-height: 250px;
    // max-height: 400px;
    // height: 400px;
    height: 450px;
    margin: 15px 15px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
  }


  .left_03-t {
    position: relative;
    top: -20px;
  }

  .left_03-t01 {
    position: relative;
    top: 30px;
    font-size: 20px;
  }

  .left_03-t01 {
    position: relative;
    font-size: 35px;
    top: -30px;
  }

  // 左侧顶部
  .left-01 {
    background: url('../../../assets/UI-1_02.png') no-repeat;
    background-size: 100% 100%;
  }

  .left-02 {
    background: url('../../../assets/UI-1_05.png') no-repeat;
    background-size: 100% 100%;
    padding: 40px 0;
  }

  .left-03 {
    background: url('../../../assets/UI-1_07.png') no-repeat;
    background-size: 100% 100%;
  }

  .header-wrap {
    width: 100%;
    height: 10vh;
    text-align: center;
    font-size: 30px;
    font-weight: 550;
    color: #fff;
    padding-top: 1.5vh;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  .left_03-title {
    display: flex;
    justify-content: space-between;
    width: 389px;
  }

  .left_03-bottom {
    width: 389px;
    height: 141px;
    background: url('../../../assets/UI_34.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 15px;
    display: flex;
    justify-content: space-around;
    color: #fff;
  }

  ;

  .left_03-number {
    width: 389px;
    height: 81px;
    position: absolute;
    bottom: 15px;
    display: flex;
    justify-content: space-around;
    color: #fff;
  }

  .left-wrap {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 10px;

    >div {
      flex: 1 1;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      position: relative;


      // 内容外层盒子
      .item-wrap {
        width: 75%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 20%;


        // 单个盒子
        &>div {
          // border: 1px solid green;
          display: inline-block;
          text-align: center;
          width: 150px;
          color: #fff;
          font-size: 16px;

          // 图片
          >img {
            margin-bottom: 11px;
          }

          // 文字
          >i {
            text-decoration: underline;
          }
        }
      }
    }


    >div:last-child {
      margin-bottom: 0;
    }
  }

  .video {
    padding: 2px;
    position: relative;
  }

  .video:hover {
    cursor: pointer;
    transform: scale(1.0);
  }

  // ======================= order
  .main-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 10px;
    flex-direction: column;


    .main_video-wrap {
      // flex: 1 1 ;
      // height: 80%;
      // background: url('../UI-1_03.png');
      // background-size: 100% 100%;
      // padding: 40px 20px 30px 20px;
    }

    // 监控中心
    .main_draw-wrap {
      flex: 1;
      margin-top: 10px;
      background: url('../../../assets/UI-1_06.png');
      background-size: 100% 100%;
    }
  }

  .right-wrap {
    height: 100%;
    padding: 10px;
    background: url('../../../assets/UI-1_04.png');
    background-size: 100% 100%;
    // overflow: scroll;
  }

  .item {
    border: 1px solid green;
    height: 100%;
  }

  // 报警中心 - 详情文字
  .detail-text {
    color: #fff;
    text-decoration: underline;
    font-size: 15px;
    display: flex;
    justify-content: end;
    margin-right: 2px;
    position: relative;
    top: -5px;
    cursor: pointer;
  }

  // ======================== aralm old logs

  .right-wrap-content {
    height: 100% !important;
    color: #fff;
  }


  .blinking-red {
    box-shadow: inset 0 0 15px rgba(4, 73, 183, 0.5) !important;
    // background-color: red !important;
    // background: url('./')
  }


  .blinking-red:hover {
    box-shadow: inset 0 0 15px rgba(4, 73, 183, 0.5) !important;
    // background-color: #0243B2 !important;
    background: url('../../../assets/spkuang_01.png') no-repeat !important;
    background-size: 100% 100%;
    border: 1px solid #3759CA;

  }


  // ================== 样式调优

  .tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }


  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 14:50:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
  @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }

    40% {
      opacity: 0.6;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }

    40% {
      opacity: 0.6;
    }

    100% {
      opacity: 1;
    }
  }


  .text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 14:51:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w:  http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
*/

  @-webkit-keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: none;
    }

    100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }


  @keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: none;
    }

    100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }


  .text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }


  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 14:52:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
  @-webkit-keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: none;
    }

    100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }

  @keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: none;
    }

    100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }


  .text-shadow-drop-center {
    -webkit-animation: text-shadow-drop-center 0.6s both;
    animation: text-shadow-drop-center 0.6s both;
  }


  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 14:53:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * @animation text-shadow-drop-center
 * ----------------------------------------
 */
  @-webkit-keyframes text-shadow-drop-center {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
      text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
  }

  @keyframes text-shadow-drop-center {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
      text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
  }


  .text-shadow-drop-tr {
    -webkit-animation: text-shadow-drop-tr 0.6s both;
    animation: text-shadow-drop-tr 0.6s both;
  }


  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 14:54:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * @animation text-shadow-drop-tr
 * ----------------------------------------
 */
  @-webkit-keyframes text-shadow-drop-tr {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
      text-shadow: 6px -6px 18px rgba(0, 0, 0, 0.35);
    }
  }

  @keyframes text-shadow-drop-tr {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
      text-shadow: 6px -6px 18px rgba(0, 0, 0, 0.35);
    }
  }


  .tracking-in-contract {
    -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-16 15:0:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
  @-webkit-keyframes tracking-in-contract {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }

    40% {
      opacity: 0.6;
    }

    100% {
      letter-spacing: normal;
      opacity: 1;
    }
  }

  @keyframes tracking-in-contract {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }

    40% {
      opacity: 0.6;
    }

    100% {
      letter-spacing: normal;
      opacity: 1;
    }
  }

  .alarmModule {
    padding-top: 60px;
    height: 85vh !important;
    // margin-top: 5vh;
    background: url('../../../assets/UIB_02.png') no-repeat;
    background-size: 100% 100%;
    margin: 0px 1.5vw;
  }

  .back-btn {
    background: url('../../../assets/UI2_03.png') no-repeat;
    background-size: 100% 100%;
    width: 90px;
    height: 30px;
    margin-left: 25px;
    cursor: pointer;
  }

  .alarm-title {
    color: #4093DB;
    font-size: 18px;
    text-decoration: underline;
    cursor: pointer;
  }

  .type-01 {
    background: url('../../../assets/UI_08.png') no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 20px;
  }

  .type-02 {
    background: url('../../../assets/UI_10.png') no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 20px;
  }

  .pagination-wrap {
    margin: 20px 20px;
  }

  .slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    border: 1px solid #061BE4 !important;
    width: 90% !important;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-25 10:19:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
  @-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
      transform: translateX(1000px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
      transform: translateX(1000px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }







  .slide-in-blurred-bottom {
    -webkit-animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-29 9:57:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation slide-in-blurred-bottom
 * ----------------------------------------
 */
  @-webkit-keyframes slide-in-blurred-bottom {
    0% {
      -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
      transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-blurred-bottom {
    0% {
      -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
      transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }



  .slide-in-blurred-right {
    -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    border: 1px solid #061BE4 !important;
    width: 90% !important;
    box-shadow: 0 0 10px transparent !important;
  }

  // 报警项目， 悬浮
  .aaa:hover {
    background: #061BE4 !important;
    border: 1px solid #061BE4 !important;
    // box-shadow: 0 0 10px #061BE4 !important;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-29 10:46:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */
  @-webkit-keyframes slide-in-blurred-right {
    0% {
      -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
      transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
      -webkit-transform-origin: 0% 50%;
      transform-origin: 0% 50%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0) scaleY(1) scaleX(1);
      transform: translateX(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-blurred-right {
    0% {
      -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
      transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
      -webkit-transform-origin: 0% 50%;
      transform-origin: 0% 50%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0) scaleY(1) scaleX(1);
      transform: translateX(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }


  // ======================================== 更改按钮设置 | S

  .btn-101,
  .btn-101 *,
  .btn-101 :after,
  .btn-101 :before,
  .btn-101:after,
  .btn-101:before {
    border: 0 solid;
    box-sizing: border-box;
  }

  .btn-101 {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: button;
    background-color: #000;
    background-image: none;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
      Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 100%;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
    padding: 0;
    text-transform: uppercase;
  }

  .btn-101:disabled {
    cursor: default;
  }

  .btn-101:-moz-focusring {
    outline: auto;
  }

  .btn-101 svg {
    vertical-align: middle;
  }

  .btn-101 [hidden] {
    display: none;
  }

  .btn-101 {
    --thickness: 0.3rem;
    --roundness: 1.2rem;
    --color: #eff6ff;
    --opacity: 0.6;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    background: none;
    background: hsla(0, 0%, 100%, 0.2);
    border: none;
    border-radius: var(--roundness);
    color: var(--color);
    cursor: pointer;
    display: block;
    font-family: Poppins, "sans-serif";
    font-size: 1rem;
    font-weight: 500;
    padding: 0.8rem 3rem;
    position: relative;
  }

  .btn-101:hover {
    background: hsla(0, 0%, 100%, 0.3);
    filter: brightness(1.2);
  }

  .btn-101:active {
    --opacity: 0;
    background: hsla(0, 0%, 100%, 0.1);
  }

  .btn-101 svg {
    border-radius: var(--roundness);
    display: block;
    filter: url(#glow);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .btn-101 rect {
    fill: none;
    stroke: var(--color);
    stroke-width: var(--thickness);
    rx: var(--roundness);
    stroke-linejoin: round;
    stroke-dasharray: 185%;
    stroke-dashoffset: 80;
    -webkit-animation: snake 2s linear infinite;
    animation: snake 2s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
    width: 100%;
  }

  .btn-101:hover rect {
    -webkit-animation-play-state: running;
    animation-play-state: running;
    opacity: var(--opacity);
  }

  @-webkit-keyframes snake {
    to {
      stroke-dashoffset: 370%;
    }
  }

  @keyframes snake {
    to {
      stroke-dashoffset: 370%;
    }
  }
}
</style>
