<template>
  <div class="main-content">
    <div class="content">
      <!--一中23线主风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'fengji' + item.deviceId"
        v-show="item.deviceName == '一中23线主风机'"
        style="top: 74px; left: 96px"
      >
        <div class="fengji-title">一中23线主风机</div>
        <div class="fengji-content">
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" @click="remoteControl(item)">远程控制</div>
        <div class="fengji-msg">
          <p><span>电源电压</span>：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p><span>电机电流</span>：{{ item.motorCurrent | decimalFilter }}A</p>
          <p><span>运行频率</span>：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p><span>设定频率</span>：{{ item.setFrequency | decimalFilter }}HZ</p>
          <p><span>风压</span>：{{ item.windPressure | decimalFilter }}KPa</p>
          <p><span>风速</span>：{{ item.windSpeed | decimalFilter }}m/s</p>
          <p><span>风量</span>：{{ item.airVolume | decimalFilter }}m³/s</p>
          <p><span>电机温度</span>：{{ item.frontAxisTemperature | decimalFilter }}℃</p>
          <p><span>电机温度</span>：{{ item.rearAxisTemperature | decimalFilter }}℃</p>
          <p><span>环境温度</span>：{{ item.motorTemperature | decimalFilter }}℃</p>
          <p><span>电机振动1</span>：{{ item.frontVibration | decimalFilter }}mm/s</p>
          <p><span>电机振动2</span>：{{ item.rearVibration | decimalFilter }}mm/s</p>
        </div>
      </div>
      <div class="arrow-psition" style="top: 132px; left: 300px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition" style="top: 132px; left: 1398px">
        <div class="fengji-arrow"></div>
      </div>
      <!--一中辅扇风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'yizhong' + item.deviceId"
        v-show="item.deviceName == '一中辅扇风机'"
        style="left: 760px; top: 74px"
      >
        <div class="fengji-title">一中辅扇风机</div>
        <div class="fengji-content">
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" @click="remoteControl(item)">远程控制</div>
        <div class="fengji-msg msg-postion">
          <p>电源电压：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p>电机电流：{{ item.motorCurrent | decimalFilter }}A</p>
          <p>运行频率：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p>设定频率：{{ item.setFrequency | decimalFilter }}HZ</p>
        </div>
      </div>
      <!--地面空压机-->
      <div
        class="kongya"
        v-for="(item, index) in kyList"
        :key="index + 'kongya' + item.deviceId"
        v-show="item.deviceName == '地表空压机'"
        style="left: 1160px; top: 44px"
      >
        <div class="kongya-title">地面空压机</div>
        <img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
        <div class="kongya-msg">
          <p>管道压力：{{ item.pipelinePressure }}KPa</p>
          <p>瞬时流量：{{ item.flowRate }}m³</p>
          <p>瞬时流速：{{ item.velocity }}m³/s</p>
          <p>气体温度：{{ item.gasTemperature }}℃</p>
        </div>
      </div>
      <!--东风井主风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'dongfeng1' + item.deviceId"
        v-show="item.deviceName == '东风井主风机'"
        style="right: 80px; top: 74px"
      >
        <div class="fengji-title" style="margin-left: 50px">东风井主风机</div>
        <div class="fengji-content">
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0" style="top: 5px; left: -141px">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0" style="margin-left: 50px">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" style="margin-left: 50px" @click="remoteControl(item)">
          远程控制
        </div>
        <div class="fengji-msg" style="position: absolute; right: -30px">
          <p><span>电源电压</span>：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p><span>电机电流1</span>：{{ item.motorCurrent | decimalFilter }}A</p>
          <p><span>电机电流2</span>：{{ item.motorCurrentTwo | decimalFilter }}A</p>
          <p><span>运行频率</span>：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p><span>设定频率</span>：{{ item.setFrequency | decimalFilter }}HZ</p>
          <p><span>风压</span>：{{ item.windPressure | decimalFilter }}KPa</p>
          <p><span>风速</span>：{{ item.windSpeed | decimalFilter }}m/s</p>
          <p><span>风量</span>：{{ item.airVolume | decimalFilter }}m³/s</p>
          <p><span>电机温度</span>：{{ item.frontAxisTemperature | decimalFilter }}℃</p>
          <p><span>电机温度</span>：{{ item.rearAxisTemperature | decimalFilter }}℃</p>
          <p><span>环境温度</span>：{{ item.motorTemperature | decimalFilter }}℃</p>
          <p><span>电机振动1</span>：{{ item.frontVibration | decimalFilter }}mm/s</p>
          <p><span>电机振动2</span>：{{ item.rearVibration | decimalFilter }}mm/s</p>
        </div>
      </div>
      <div class="arrow-psition" style="top: 302px; left: 558px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition" style="top: 302px; left: 758px">
        <div class="fengji-arrow"></div>
      </div>
      <!--二中空压机-->
      <div
        class="kongya"
        v-for="(item, index) in kyList"
        :key="index + '二中空压机' + item.deviceId"
        v-show="item.deviceName == '二中空压机'"
        style="left: 360px; top: 274px"
      >
        <div class="kongya-title">二中空压机</div>
        <img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
        <div class="kongya-msg" style="top: -18px; right: -221px">
          <p>管道压力：{{ item.pipelinePressure | decimalFilter }}KPa</p>
          <p>瞬时流量：{{ item.flowRate | decimalFilter }}m³</p>
          <p>瞬时流速：{{ item.velocity | decimalFilter }}m³/s</p>
          <p>气体温度：{{ item.gasTemperature | decimalFilter }}℃</p>
        </div>
      </div>
      <!--二中风门-->
      <div class="fengmen" style="top: 212px; left: 950px">
        <div class="fengmen-title">二中风门</div>
        <div class="fengmen-icon close"></div>
        <div class="fengmen-text">
          <p v-for="item in fmList" :key="item.id">{{ item.fname + '：' + item.data + item.danwei }}</p>
        </div>
      </div>
      <!--二中辅扇风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'erzhong' + item.deviceId"
        v-show="item.deviceName == '二中辅扇风机'"
        style="left: 1160px; top: 247px"
      >
        <div class="fengji-title" style="margin-left: 50px">二中辅扇风机</div>
        <div class="fengji-content">
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0" style="top: 5px; left: -141px">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0" style="margin-left: 55px">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" style="margin-left: 55px" @click="remoteControl(item)">
          远程控制
        </div>
        <div class="fengji-msg" style="position: absolute; right: -180px; top: 20px">
          <p>电源电压：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p>电机电流：{{ item.motorCurrent | decimalFilter }}A</p>
          <p>运行频率：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p>设定频率：{{ item.setFrequency | decimalFilter }}HZ</p>
        </div>
      </div>
      <div class="arrow-psition" style="top: 472px; left: 288px">
        <div class="fengji-arrow"></div>
      </div>
      <!-- <div class="arrow-psition" style="top: 472px; left: 888px">
        <div class="fengji-arrow"></div>
      </div> -->
      <div class="arrow-psition" style="top: 472px; left: 1088px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition bevel" style="top: 472px; left: 1268px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition bevel" style="top: 282px; left: 1490px">
        <div class="fengji-arrow"></div>
      </div>
      <!--三中辅扇风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'sanzhong' + item.deviceId"
        v-show="item.deviceName == '三中辅扇风机'"
        style="left: 660px; top: 415px"
      >
        <div class="fengji-title">三中辅扇风机</div>
        <div class="fengji-content">
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" @click="remoteControl(item)">远程控制</div>
        <div class="fengji-msg msg-postion">
          <p>电源电压：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p>电机电流：{{ item.motorCurrent | decimalFilter }}A</p>
          <p>运行频率：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p>设定频率：{{ item.setFrequency | decimalFilter }}HZ</p>
        </div>
      </div>
      <!--四中辅扇风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'sizhong' + item.deviceId"
        v-show="item.deviceName == '四中辅扇风机'"
        style="left: 1190px; top: 583px"
      >
        <div class="fengji-title" style="margin-left: 50px">四中辅扇风机</div>
        <div class="fengji-content">
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0" style="top: 5px; left: -141px">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0" style="margin-left: 55px">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" style="margin-left: 55px" @click="remoteControl(item)">
          远程控制
        </div>
        <div class="fengji-msg" style="position: absolute; right: -180px; top: 20px">
          <p>电源电压：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p>电机电流：{{ item.motorCurrent | decimalFilter }}A</p>
          <p>运行频率：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p>设定频率：{{ item.setFrequency | decimalFilter }}HZ</p>
        </div>
      </div>
      <div class="arrow-psition" style="top: 642px; left: 288px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition" style="top: 642px; left: 588px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition" style="top: 642px; left: 888px">
        <div class="fengji-arrow"></div>
      </div>
      <div class="arrow-psition bevel" style="top: 642px; left: 1068px">
        <div class="fengji-arrow"></div>
      </div>
      <!--五中辅扇风机dom-->
      <div
        class="fengji"
        v-for="(item, index) in fengjiList"
        :key="index + 'wuzhong' + item.deviceId"
        v-show="item.deviceName == '五中辅扇风机'"
        style="left: 400px; top: 750px"
      >
        <div class="fengji-title">五中辅扇风机</div>
        <div class="fengji-content">
          <img src="../../../assets/images/screen/tfxt/device1.png" alt="" srcset="" />
          <div class="fengji-control">
            <div class="fengji-icon" :class="fengjiIconClass[Number(item.fanRunStatus)]"></div>
            <div class="fengji-lamp" :class="item.fanIsRun != 0 ? 'active' : ':'">
              <div class="fault-tip" v-show="item.fanIsRun != 0">
                {{ item.fanIsRun == 1 ? '风机故障' : '变频器故障' }}
              </div>
            </div>
          </div>
        </div>
        <div class="fengji-button active" v-if="item.isBoolean == 0">本地控制</div>
        <div class="fengji-button" v-if="item.isBoolean == 1" @click="remoteControl(item)">远程控制</div>
        <div class="fengji-msg msg-postion">
          <p>电源电压：{{ item.powerSupplyVoltage | decimalFilter }}V</p>
          <p>电机电流：{{ item.motorCurrent | decimalFilter }}A</p>
          <p>运行频率：{{ item.operatingFrequency | decimalFilter }}HZ</p>
          <p>设定频率：{{ item.setFrequency | decimalFilter }}HZ</p>
        </div>
      </div>
      <div class="arrow-psition bevel" style="top: 812px; left: 868px">
        <div class="fengji-arrow"></div>
      </div>
    </div>
    <div class="up-window" v-show="upWindowShow">
      <div class="up-window-box" v-if="showPas" ref="upWindowBox">
        <p><span></span>{{ windowTitle }}</p>
        <i class="el-icon-close close-button" @click="upWindowShow = false"></i>
        <div class="W400">
          <div
            class="but-box"
            @click="
              currentDevice.status = 1
              showPas = false
            "
          >
            风机正向启动
          </div>
          <div
            class="but-box"
            @click="
              currentDevice.status = 2
              showPas = false
            "
          >
            风机反向启动
          </div>
          <div
            class="but-box"
            @click="
              currentDevice.status = 3
              showPas = false
            "
          >
            风机停止运行
          </div>
          <div
            class="but-box"
            @click="
              currentDevice.status = 4
              showPas = false
            "
          >
            风机故障复位
          </div>
        </div>
      </div>
      <div class="up-window-box" v-else>
        <p><span></span>请输入风机操作密码</p>
        <i class="el-icon-close close-button" @click="upWindowShow = false"></i>
        <div class="pas-box">
          <el-input placeholder="" v-model="password" show-password></el-input>
        </div>
        <div>
          <div class="button close" @click="upWindowShow = false">取消</div>
          <div class="button" @click="submitPumpPassword()">确认</div>
        </div>
      </div>
    </div>
    <div class="example-window" v-show="exampleWindow">
      <i class="el-icon-close close-button" @click="exampleWindow = false"></i>
    </div>
    <div class="example" @click="exampleWindow = true"></div>
  </div>
</template>

<script>
import { fenshanQuery, kongyajiQuery, fengmengQuery, editFengjiStatus } from '@/api/tyler/tfxt'
import { updatePumpSwitch } from '@/api/tyler/psxt.js'

export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      fengjiList: [],
      kyList: [],
      fmList: [],
      upWindowShow: false,
      windowTitle: '', // 新增标题字段
      currentDevice: {
        id: '',
        status: '',
      }, // 新增当前设备字段
      timer: null, // 新增定时器引用
      exampleWindow: false,
      fengjiIconClass: {
        1: 'runing',
        2: 'runingopps',
        3: '',
      },
      password: '',
      pumpPassword: '',
      showPas: true,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData()
  },
  mounted() {
    // 初始化定时器
    this.timer = setInterval(() => {
      this.getData()
    }, 10000)
  },
  methods: {
    //提交水泵密码
    submitPumpPassword() {
      console.log(this.currentDevice)
      let password = this.password
      if (!password) {
        return this.$modal.msgError('请输入密码')
      }
      updatePumpSwitch({
        deviceId: this.currentDevice.deviceId,
        password,
        status: this.currentDevice.status,
      }).then(res => {
        if (res.code === 200) {
          this.upWindowShow = false
          this.password = ''
          this.$modal.msgSuccess(res.msg)
          this.initPumpList()
        } else {
          this.$modal.msgError(res.msg)
        }
      })
    },

    getData() {
      fenshanQuery().then(res => {
        if (res.code == 200) {
          this.fengjiList = res.rows
        }
      })
      kongyajiQuery().then(res => {
        if (res.code == 200) {
          this.kyList = res.rows
        }
      })
      fengmengQuery().then(res => {
        if (res.code == 200) {
          this.fmList = res.rows
        }
      })
    },
    remoteControl(item) {
      console.log(item)

      this.upWindowShow = true
      this.windowTitle = `${item.deviceName}远程操作` // 直接设置数据
      this.currentDevice = item // 保存当前设备信息
    },
    submitPumpSetting(status) {
      const param = {
        devicesId: this.currentDevice.deviceId,
        devicesType: 1,
        devicesStatus: status,
      }
      // 提交时使用 this.currentDevice 获取设备信息
      editFengjiStatus(param).then(res => {
        if (res.code == 200) {
          this.upWindowShow = false
          this.getData()
          this.$message({
            message: '操作成功',
            type: 'success',
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'error',
          })
        }
      })
    },
  },
  filters: {
    decimalFilter(value) {
      return value === null || typeof value === 'undefined' ? '--' : Number(value).toFixed(2)
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
}
</script>

<style scoped lang="scss">
.main-content {
  background: url('~@/assets/images/screen/tfxt/bg.png') no-repeat center;
  padding-top: 100px;
  pointer-events: auto;
  position: relative;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('~@/assets/images/screen/tfxt/line.png') no-repeat center;
    background-size: 90% 95%;
    background-position-x: 50px;
    font-family: 'fangsong';
    pointer-events: auto;

    .fengji {
      position: absolute;
      width: 206px;
      pointer-events: auto;

      .fengji-title {
        font-weight: 400;
        font-size: 20px;
        color: #ffd200;
        line-height: 30px;
        margin: 0;
        background: url('~@/assets/images/screen/tfxt/fengjititle.png') no-repeat center;
        text-align: center;
        width: 150px;
      }
      .fengji-content {
        display: flex;
        img {
          width: 149px;
          height: 141px;
          padding: 10px 18px;
        }
        .fengji-control {
          padding-top: 16px;
          .fengji-icon {
            width: 53px;
            height: 53px;
            background: url('~@/assets/images/screen/tfxt/icon2.png') no-repeat center;
            background-size: 100% 100%;
            &.runing {
              //需要这个元素做旋转动画，围着自身圆心一直旋转
              animation: rotate 2s linear infinite;
              @keyframes rotate {
                from {
                  transform: rotate(0deg);
                }
                to {
                  transform: rotate(360deg);
                }
              }
            }
            &.runingopps {
              //需要这个元素做旋转动画，围着自身圆心一直旋转
              animation: rotateOpposite 2s linear infinite;
              @keyframes rotateOpposite {
                from {
                  transform: rotate(0deg);
                }
                to {
                  transform: rotate(-360deg);
                }
              }
            }
          }
          .fengji-lamp {
            width: 53px;
            height: 53px;
            background: url('~@/assets/images/screen/tfxt/icon4.png') no-repeat center;
            background-size: 100%;
            position: relative;
            &.active {
              background: url('~@/assets/images/screen/tfxt/icon5.png') no-repeat center;
              background-size: 100%;
              .fault-tip {
                position: absolute;
                top: 5px;
                left: 53px;
                width: 137px;
                height: 41px;
                background: #052952;
                box-shadow: 2px -5px 21px 0px rgba(5, 22, 43, 0.48);
                border-radius: 4px;
                border: 1px solid #00c6ff;
                text-align: center;
                color: #ff1305;
                font-size: 18px;
                font-weight: 400;
                opacity: 0.9;
                line-height: 40px;
              }
            }
          }
        }
      }
      .fengji-button {
        width: 140px;
        height: 36px;
        //开启点击
        pointer-events: auto;
        position: relative; // 添加层级控制
        z-index: 999;
        border-radius: 4px;
        border: 2px solid #00d8ff;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        line-height: 34px;
        text-align: center;
        background: #0387c8;
        &:hover {
          cursor: pointer;
        }
        &.active {
          background: #7196a8;
          border-radius: 4px;
          border: 2px solid #96c5cd;
        }
      }
      .fengji-msg {
        padding: 5px;
        border: 2px solid #00ccff;
        font-weight: 400;
        font-size: 18px;
        color: #11e0ff;
        line-height: 28px;
        background: #05162b;
        margin-top: 15px;
        p {
          margin: 0%;
          span {
            display: inline-block;
            width: 85px;
            text-align: justify;
            text-align-last: justify;
          }
        }
        &.msg-postion {
          position: absolute;
          top: 30px;
          left: -180px;
        }
      }
    }
    .kongya {
      position: absolute;
      .kongya-title {
        font-weight: 400;
        font-size: 20px;
        color: #ffd200;
        line-height: 30px;
        margin: 0;
        padding-left: 5px;
        text-align: center;
      }
      img {
        width: 171px;
        height: 76px;
      }
      .kongya-msg {
        position: absolute;
        top: -18px;
        right: -253px;
        padding: 5px 17px;
        border: 2px solid #00ccff;
        font-weight: 400;
        font-size: 18px;
        color: #11e0ff;
        line-height: 28px;
        background: #05162b;
        margin-top: 15px;
        margin-left: -15px;
        p {
          margin: 0%;
        }
      }
    }
    .arrow-psition {
      position: absolute;
      .fengji-arrow {
        width: 53px;
        height: 53px;
        position: absolute;
        background: url('~@/assets/images/screen/tfxt/icon1.png') no-repeat center;

        //这里制作动画淡入切向右移动100px淡出，
        animation: arrow 2s linear infinite;
        @keyframes arrow {
          0% {
            opacity: 0;
            transform: translateX(0px);
          }
          25% {
            opacity: 1;
            transform: translateX(25px);
          }
          75% {
            transform: translateX(75px);
            opacity: 1;
          }
          100% {
            transform: translateX(100px);
            opacity: 0;
          }
        }
      }
      &.bevel {
        // 旋转45度
        transform: rotate(-45deg);
      }
    }
    .fengmen {
      max-width: 100%;
      position: absolute;
      .fengmen-title {
        font-weight: 400;
        font-size: 20px;
        color: #ffd200;
        line-height: 30px;
        margin: 0;
        background: url('~@/assets/images/screen/tfxt/fengjititle.png') no-repeat center;
        text-align: center;
        margin: 10px;
      }
      .fengmen-icon {
        width: 69px;
        height: 82px;
        background: url('~@/assets/images/screen/tfxt/icon_open.png') no-repeat center;
        background-size: 100%;
        margin: 0 auto 10px;
        &.close {
          background: url('~@/assets/images/screen/tfxt/icon_close.png') no-repeat center;
          background-size: 100%;
        }
      }
      .fengmen-text {
        padding: 5px 10px;
        border: 2px solid #00ccff;
        font-weight: 400;
        font-size: 18px;
        color: #11e0ff;
        line-height: 28px;
        background: #05162b;
        margin-top: 15px;
        p {
          margin: 0%;
        }
      }
    }
  }
  .up-window {
    width: 100%;
    height: 100%;
    background: RGBA(4, 21, 42, 0.6);
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    .up-window-box {
      width: 588px;
      height: 250px;
      background: linear-gradient(0deg, #062451 0%, #09162d 100%);
      box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
      border: 2px solid #11b9ff;
      opacity: 1;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 20px 37px 37px 27px;
      color: #ffffff;
      p {
        width: 500px;
        height: 37px;
        margin: 0px;
        background: url('~@/assets/images/screen/psxt/title.png') no-repeat center;
        background-size: 100%;
        font-weight: 500;
        font-size: 22px;
        color: #ffffff;
        height: 37px;
        background-position-y: 9px;
        span {
          width: 27px;
          display: inline-block;
        }
      }
      .close-button {
        font-size: 30px;
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
        &:hover {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
          -webkit-transition: -webkit-transform 1s linear;
          transition: transform 1s linear;
        }
      }
      .W400 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 30px; // 统一垂直和水平间距为30px
        justify-items: center;
        margin-top: 30px;
        .but-box {
          width: 160px;
          height: 45px;
          // background: url("~@/assets/images/screen/psxt/btn_bg.png") no-repeat
          //   center;
          background-size: 100% 100%;
          border: 1px solid #0d92ff;
          border-radius: 4px;
          font-weight: 500;
          font-size: 18px;
          color: #b6e1ff;
          text-align: center;
          line-height: 42px;
          cursor: pointer;
          transition: all 0.3s;
          background: linear-gradient(180deg, #0a2d4d 0%, #05162b 100%);
          border: 1px solid #0d92ff;
          box-shadow: inset 0 0 8px rgba(13, 146, 255, 0.3);
          &:hover {
            // background-image: url("~@/assets/images/screen/psxt/btn_bg_active.png");
            color: #fff;
            background: linear-gradient(180deg, #0d3a5c 0%, #08203d 100%);
            box-shadow: 0 0 10px rgba(13, 146, 255, 0.5);
          }

          &:active {
            transform: scale(0.95);
            box-shadow: 0 0 15px rgba(13, 146, 255, 0.8); // 加深阴影强度
          }
        }
      }
      .pas-box {
        width: 400px;
        margin: auto;
        margin-top: 30px;
        ::v-deep .el-input__inner {
          border-radius: 0px !important;
          height: 42px;
        }
        span {
          font-weight: 400;
          font-size: 21px;
          color: #ffffff;
          margin-top: 10px;
          display: inline-block;
          margin-bottom: 15px;
        }
      }
      .button {
        width: 110px;
        height: 42px;
        background: #11b9ff;
        border-radius: 4px;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        line-height: 42px;
        float: left;
        margin-left: 100px;
        margin-top: 25px;
        cursor: pointer;
        &:hover {
          background: #66d2ff;
        }
        &.close {
          background: none;
          color: #fff;
          &:hover {
            color: #66d2ff;
          }
        }
      }
    }
  }
  .example-window {
    width: 1070px;
    height: 921px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #00deff;
    z-index: 999;
    background: url('~@/assets/images/screen/bg111.png') no-repeat center;
    .close-button {
      font-size: 30px;
      position: absolute;
      top: 16px;
      right: 16px;
      color: #fff;
      cursor: pointer;
      &:hover {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: -webkit-transform 1s linear;
        transition: transform 1s linear;
      }
    }
  }
  .example {
    width: 49px;
    height: 56px;
    position: absolute;
    right: 40px;
    bottom: 40px;
    background: url('~@/assets/images/screen/icon.png') no-repeat center;
    &:hover {
      background: url('~@/assets/images/screen/icon_click.png') no-repeat center;
      cursor: pointer;
    }
  }
  @keyframes wave {
    0% {
      background-position-x: 0;
      border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
    }
    50% {
      border-radius: 50% 50% 0 0 / v-bind('(waveHeight + 2) + "px"');
    }
    100% {
      background-position-x: 200px;
      border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
    }
  }
}
</style>
