<template>
  <div class="light" v-if="floorHeatingList && floorHeatingList.length">
    <!--如果有子设备-->
    <div class="floor-top">
      <div class="top-box">
        <div class="top-left">
          <span>地暖</span>
          <span>{{ realTemp ? realTemp : "--" }} <sup>℃</sup></span>
        </div>
        <div class="top-right">
          <img
            :src="
              isOpen
                ? parseImgUrl('page-officehome', 'heating-active.svg')
                : parseImgUrl('page-officehome', 'heating.svg')
            "
            alt=""
          />
        </div>
      </div>
      <div class="top-switch">
        <div
          class="top-nav"
          v-if="floorHeatingList && floorHeatingList.length > 1"
        >
          <span
            :class="navType == 'all' ? 'nav-active' : ''"
            @click="checkNav('all')"
          >
            总控制
          </span>
          <span
            :class="navType == 'child' ? 'nav-active' : ''"
            @click="checkNav('child')"
          >
            子设备
          </span>
        </div>
        <div v-else></div>
        <Switch
          class="switch-btn"
          :loading="loadingFlag"
          :disabled="loadingFlag"
          :model-value="isOpen"
          @click.stop="eqChangeSwitch('main', floorHeatingList[0])"
          inactive-color="rgba(196, 196, 196, 0.4)"
        />
      </div>
    </div>

    <div
      class="floor-control floor-control-padding"
      v-if="isOpen && navType == 'all'"
    >
      <div class="control-box">
        <div class="temp-slider" id="slideFloorId">
          <div class="slider-bar" id="barFloorId">
            <div class="bar-temp">{{ realTemp ? realTemp + "℃" : "--" }}</div>
            <div class="bar-circle" id="handFloorId"></div>
          </div>
          <div class="temp-left" id="tempLeftId">
            {{ heatingData.minTempSet }}
          </div>
          <div class="temp-right">
            {{ heatingData.maxTempSet }}
          </div>
        </div>
      </div>
    </div>

    <!--灯控制按钮-->
    <div class="line" v-if="navType == 'child'"></div>
    <div class="light-box" v-if="navType == 'child'">
      <template v-for="item in floorHeatingList" :key="item.id">
        <div class="light-control">
          <div class="control-top">
            <div class="control-temp">
              <span>{{ item.tempSet ? item.tempSet : "--" }}<sup>℃</sup></span>
              <span>{{ item.runStatus ? "已开启" : "已关闭" }}</span>
            </div>
            <Switch
              active-color="$elActiveColor"
              v-model="item.switch"
              :loading="item.loading"
              size="14px"
              @click.stop="eqChangeSwitch('child', item)"
              inactive-color="rgba(196, 196, 196, 0.2)"
              class="child-switch"
            />
          </div>
          <div class="control-bottom">
            <div class="control-title">
              {{ item.localName }}
            </div>
            <img
              @click="showFloorHeating(item)"
              :style="{ opacity: item.switch ? '1' : '0.3' }"
              :src="lightColorImg"
              alt=""
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  watch,
  onBeforeMount,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import { Switch, Toast } from "vant";
import {
  getLampHttp,
  getStatusHttp,
  querySapceFloorHeating,
  setallLampHttp,
  setSpaceCondtioners,
} from "@/apis/envmonitor";
import { parseImgUrl, setQueryConfig } from "@/utils";
import { type } from "os";
import { onDeactivated } from "vue";
import { AnyMxRecord } from "dns";
import { swiper } from "@/utils/swiper";
import { nextTick } from "process";

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
    forceOverTimeFlag: {
      type: Boolean,
      default: () => false,
    },
    seviceEquipmentList: {
      // 是否走服务定制的设备
      type: Array,
      default: () => [],
    },
  },
  components: { Switch },
  setup(props, contx) {
    const floorHeatingList: any = [];
    let heatingData: any = {};
    let floorHeathingStatus: any = null;
    const timeOut: any = null;
    const proxyData = reactive({
      seviceEquipmentList: props.seviceEquipmentList,
      forceOverTimeFlag: props.forceOverTimeFlag,
      spaceId: props.spaceId,
      heatingData: heatingData,
      isOpen: false,
      parseImgUrl: parseImgUrl,
      timeOut: timeOut,
      loadingFlag: false,
      floorHeatingList: floorHeatingList,
      floorHeathingStatus: floorHeathingStatus,
      swiperIinit: false,
      part: 1,
      realTemp: 0,
      navType: "all",
      runStatus: 0,
      lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
      showFloorHeating(floorHeatingItem: any) {
        let item: any = floorHeatingItem;
        if (!item.switch) {
          Toast("请先开启地暖,才可温度调节!");
          return;
        }
        item.minTempSet = proxyData.heatingData.minTempSet;
        item.maxTempSet = proxyData.heatingData.maxTempSet;
        contx.emit("showFloorHeating", item);
      },
      // 改变地暖态(main)
      changeZongAir(text: any) {
        if (text == "temp" && !proxyData.heatingData.runStatus) {
          return;
        }
        let data: any = [];
        proxyData.floorHeatingList.map((item: any) => {
          let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
          let value: any =
            text == "temp" ? proxyData.realTemp : proxyData.isOpen ? 1 : 0;
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: code, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: value, //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        if (!proxyData.loadingFlag) {
          // 调整设备状态
          proxyData.loadingFlag = false;
          proxyData.setSpaceCondtioners(data);
        }
      },
      // 改变地暖态(child)
      changeChildZongAir(text: any, item: any) {
        let runStatus: any = item.switch ? 1 : 0;
        let data: any = [];
        proxyData.floorHeatingList.map((item: any) => {
          let code: any = text == "temp" ? item.tempSetCode : item.switchCode;
          let value: any = text == "temp" ? proxyData.realTemp : runStatus;
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: code, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: value, //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        console.log(data);
        if (!item.loading) {
          // 调整设备状态
          item.loading = true;
          proxyData.setSpaceCondtioners(data, item);
        }
      },
      // 改变设备状态
      setSpaceCondtioners(data: any, item: any = null) {
        console.log("调节数据", data);
        setSpaceCondtioners(data)
          .then((res) => {
            proxyData.loadingFlag = false;
            if (item) {
              item.loading = false;
            }
          })
          .catch(() => {
            proxyData.loadingFlag = false;
            item.loading = false;
            Toast("连接异常,请检查网络！");
          });
      },
      // 地暖开关
      eqChangeSwitch(type: any, item: any) {
        if (type == "main") {
          proxyData.isOpen = !proxyData.isOpen;
          proxyData.loading = true;
          proxyData.endBoxSwiper();
          proxyData.changeZongAir("switch");
        } else {
          proxyData.changeChildZongAir("switch", item);
        }
      },
      // 设置地暖温度
      eqChangeTemp() {
        proxyData.changeZongAir("temp");
      },
      // 子设备导航切换
      checkNav(type: any = "all") {
        proxyData.navType = type;
        proxyData.swiperIinit = false;
        proxyData.sliderInit();
      },
      getEleWidth(ele: any) {
        if (ele) {
          return ele.getBoundingClientRect().width;
        } else {
          return 1;
        }
      },
      // 初始化滑动
      sliderInit() {
        nextTick(() => {
          if (proxyData.navType == "all" && proxyData.isOpen) {
            proxyData.endBoxSwiper();
          }
          if (proxyData.navType == "all") {
            proxyData.setBarNowPerstion();
          }
        });
      },
      // 滑动
      endBoxSwiper() {
        proxyData.swiperIinit = true;
        let handBox: any = document.querySelector("#handFloorId");
        let barBox: any = document.querySelector("#barFloorId");
        let sliderBox: any = document.querySelector("#slideFloorId");
        let isMove: any = false;
        let barLeft: any = 0;
        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
        let barWidth: any = proxyData.getEleWidth(barBox);
        let tempLeftBox: any = document.querySelector("#tempLeftId");
        let sliderPadingL: any = proxyData.getEleWidth(tempLeftBox);
        let sliderPadingR: any = sliderPadingL;
        if (sliderWidth > 1) {
          sliderWidth = sliderWidth - barWidth;
        }
        let tempPart =
          (proxyData.heatingData.maxTempSet -
            proxyData.heatingData.minTempSet) /
          sliderWidth;
        let part: any = tempPart;
        proxyData.part = part;
        if (!handBox) {
          return;
        }
        handBox.addEventListener("touchstart", function (e: any) {
          barLeft = isNaN(parseInt(barBox.style.left))
            ? 0
            : parseInt(barBox.style.left);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
          proxyData.eqChangeTemp();
        });
        swiper(handBox, {
          swipeLeft: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft - moveRealX;
              left = left < 0 ? 0 : left;
              barBox.style.left = left + "px";
              proxyData.realTemp =
                left * part + proxyData.heatingData.minTempSet;
              proxyData.realTemp = Math.round(proxyData.realTemp);
            }
          },
          swipeRight: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft + moveRealX;
              left = left > sliderWidth ? sliderWidth : left;
              barBox.style.left = left + "px";
              proxyData.realTemp =
                left * part + proxyData.heatingData.minTempSet;
              proxyData.realTemp = Math.round(proxyData.realTemp);
            }
          },
        });
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp = proxyData.heatingData.tempSet
          ? proxyData.heatingData.tempSet
          : 0;

        let barBox: any = document.querySelector("#barFloorId");
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#slideFloorId");
        let tempLeftBox: any = document.querySelector("#tempLeftId");
        let sliderPading: any = proxyData.getEleWidth(tempLeftBox);
        console.log("proxyData.realTemp==", sliderPading);
        if (
          proxyData.realTemp >= proxyData.heatingData.minTempSet &&
          proxyData.realTemp <= proxyData.heatingData.maxTempSet
        ) {
          // 正常温度范围
          let left: any =
            (proxyData.realTemp - proxyData.heatingData.minTempSet) /
            proxyData.part;
          left = left;

          if (barBox) {
            barBox.style.left = left + "px";
          }
        } else {
          if (!proxyData.realTemp) {
            barBox.style.left = 0 + "px";
          } else if (proxyData.realTemp < proxyData.heatingData.minTempSet) {
            barBox.style.left = 0 + "px";
          } else if (proxyData.realTemp > proxyData.heatingData.maxTempSet) {
            let sliderWidth: any = sliderBox.offsetWidth;
            let barWidth: any = barBox.offsetWidth;
            barBox.style.left = sliderWidth - barWidth + "px";
          }
        }
      },
      // 格式化地暖数据状态
      formateDataStatus() {
        if (proxyData.heatingData.runStatus) {
          proxyData.isOpen = true;
        } else {
          proxyData.isOpen = false;
        }
        proxyData.floorHeatingList.map((item: any) => {
          item.switch = item.runStatus ? true : false;
        });
      },
      // 获取地暖的状态
      getFloorHeatingList() {
        let str: any = setQueryConfig({ spaceId: proxyData.spaceId });
        querySapceFloorHeating(str)
          .then((res) => {
            const resData: any = res;
            const data: any = resData ? resData.data : {};
            proxyData.heatingData = data;
            if (data.equipList && data.equipList.length) {
              proxyData.floorHeatingList = data.equipList || [];
            }
            proxyData.formateDataStatus();
            let timeout: any = setTimeout(() => {
              clearTimeout(timeout);
              proxyData.sliderInit();
            }, 1000);
            proxyData.startfloorHeathingStatus();
          })
          .catch(() => {
            proxyData.startfloorHeathingStatus();
          });
      },
      loadingTimer: 0,
      loading: false,
      // 计算loading时间
      setLoadingNumber() {
        let timer: any = setInterval(() => {
          proxyData.loadingTimer++;
          console.log(proxyData.loadingTimer);
          if (proxyData.loadingTimer >= 15) {
            clearInterval(timer);
            proxyData.loading = false;
          }
        }, 1000);
      },
      // 灯灯接口清除定时器
      clearFloorHeathingTimer() {
        clearTimeout(proxyData.floorHeathingStatus);
        proxyData.floorHeathingStatus = null;
      },
      // 定时刷新接口
      startfloorHeathingStatus(timerLen: any = 15000) {
        proxyData.clearFloorHeathingTimer();
        proxyData.floorHeathingStatus = setTimeout(() => {
          proxyData.getFloorHeatingList();
        }, timerLen);
      },
    });
    watch(
      [() => props, () => props.spaceId],
      (newProps: any, oldProps: any) => {
        if (newProps[0]) {
          proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
          proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
        }

        if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
          // 空间id改变的重新获取值调用接口
          console.log("地暖的spaceId变化了");
          // 清除原始数据
          proxyData.floorHeatingList = [];
          proxyData.heatingData = {};
          proxyData.swiperIinit = false;
          proxyData.navType = "all";
          proxyData.spaceId = newProps[1];
          proxyData.clearFloorHeathingTimer();
          proxyData.getFloorHeatingList();
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    onBeforeUnmount(() => {
      console.log("灯的组件销毁了--");
      proxyData.clearFloorHeathingTimer();
    });

    onMounted(() => {
      // proxyData.clearFloorHeathingTimer();
      proxyData.getFloorHeatingList();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.light {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  margin: 15px 0px;
}

.light-main {
  padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.floor-top {
  padding: 20px;
  padding-bottom: 16px;
  .top-box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    .top-left {
      span {
        display: block;
        &:nth-child(1) {
          font-family: "PingFang SC";
          padding-top: 4px;
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          color: #4d5262;
        }
        &:nth-child(2) {
          position: relative;
          padding-top: 4px;
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 32px;
          line-height: 39px;
          color: #1b2129;
          sup {
            position: absolute;
            right: -12px;
            top: 0;
            font-family: "Mulish";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: #c4c4c4;
          }
        }
      }
    }
    .top-right {
      width: 106px;
      height: 62px;
      margin-right: 17px;
      img {
        width: 106px;
        height: 62px;
      }
    }
  }

  .top-switch {
    display: flex;
    justify-content: space-between;
    // padding-bottom: 15px;
    .top-nav {
      height: 28px;
      line-height: 28px;
      border-radius: 21px;
      background: #f1f4f6;
      span {
        box-sizing: border-box;
        display: inline-block;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        padding: 5px 8px;
        height: 28px;
        line-height: 14px;
        color: #424c59;
      }
      .nav-active {
        background: #fff;
        border: 1px solid #e1e5eb;
        border-radius: 21px;
      }
    }
    .switch-btn {
      margin-top: 0;
    }
  }
}

.floor-control {
  padding: 10px;
  border-top: 1px solid #e8ecf0;
  .control-box {
    display: flex;
    justify-content: space-between;
  }
  .volume-box {
    padding: 10px;
    color: #c4c4c4;
    font-size: 12px;
    .text {
      padding-top: 5px;
      font-style: normal;
      font-weight: 600;
      font-size: 11px;
    }
    .number {
      span {
        display: inline-block;
        vertical-align: middle;
        color: #c4c4c4;
        padding-right: 5px;
      }
      .number-active {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        font-size: 22px;
        line-height: 24px;
        color: #4d5262 !important;
      }
    }
    .model {
      font-size: 14px;
      color: #1f2429;
    }
  }
  .volume-icon {
    .icon-item {
      position: relative;
      display: inline-block;
      width: 42px;
      height: 42px;
      background: rgba(196, 196, 196, 0.2);
      border-radius: 50%;
      img {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &:nth-child(2) {
        margin-left: 10px;
        margin-right: 10px;
      }
      span {
        font-size: 12px;
        color: #000000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.8);
      }
    }
  }
  .temp-slider {
    position: relative;
    top: 31px;
    display: flex;
    height: 22px;
    flex: 1;
    padding: 0 24px;
    background: linear-gradient(
      270deg,
      #ffbab6 0%,
      #ffe7d1 29.05%,
      #f1efff 62%,
      #c8d6ff 100%
    );
    border-radius: 16px;

    .temp-left,
    .temp-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-family: "Persagy";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      text-align: right;
      color: #626c78;
    }
    .temp-left {
      left: 0px;
      padding-left: 8px;
    }
    .temp-right {
      right: 0px;
      padding-right: 8px;
      text-align: left;
    }

    .slider-bar {
      position: absolute;
      width: 32px;
      left: 0;
      bottom: -4px;
      z-index: 333;
      .bar-temp {
        display: block;
        text-align: center;
        // width: 50px;
        padding-bottom: 4px;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: #626c78;
      }
      .bar-circle {
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
          0px 4px 10px rgba(0, 0, 0, 0.07);
        border-radius: 21px;
        z-index: 444;
      }
    }
  }
  .control-text {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    color: #c4c4c4;
    padding: 10px 0 0 10px;
  }
}

.floor-control-padding {
  padding: 30px 20px;
  padding-top: 0px;
  height: 82px;
}

.line {
  border-top: 1px solid #e8ecf0;
  margin-bottom: 16px;
}
.light-main-control {
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 15px;
  // line-height: 36px;
  display: flex;
  justify-content: space-between;
  text-align: right;
  div {
    width: 36px;
  }
  .main-color {
    width: 36px;
    height: 36px;
    // line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background: #f7f9fa;
    img {
      width: 20px;
      height: 20px;
      margin-top: 8px;
    }
  }
  .switch-btn {
    margin-top: 6px;
    margin-right: 12px;
  }
}

.light-desc {
  padding-top: 10px;
  // padding-left: 5px;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
}

.light-right {
  position: relative;
  text-align: center;
  .switch-box {
    padding-top: 20px;
    padding-right: 15px;
    span {
      display: inline-block;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #2e3742;
      margin-left: 20px;
      // width: 60px;
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      background: #f1f4f6;
      border-radius: 21px;
    }
    .switch-item {
      &:hover {
        background: #e8ecf0;
      }
      &:active {
        background: #e8ecf0;
      }
    }
  }

  img {
    //width: 98px;
    height: 100px;
  }

  .switch-btn {
    position: absolute;
    right: -20px;
    bottom: 20px;
  }
}

.light-title {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.light-status {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 12px;
  line-height: 16px;
  color: #c4c4c4;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 15px 0px;
}

.show-all {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  padding-bottom: 15px;
  padding-top: 5px;
  color: #cccccc;
  text-align: center;
  .light-icon {
    font-size: 12px;
    padding-right: 10px;
  }
}

.line {
  border-top: 1px solid #e8ecf0;
  margin-top: 4px;
  margin-bottom: 16px;
}
.light-box {
  padding: 0 16px;
  font-size: 0;
}
.light-control {
  display: inline-block;
  width: 49%;
  vertical-align: middle;
  background: #f7f9fa;
  border-radius: 16px;
  padding-right: 16px;
  padding-left: 16px;
  padding-top: 13px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  &:nth-child(2n - 1) {
    margin-right: 2%;
  }
  .control-top {
    display: flex;
    padding-bottom: 26px;
    justify-content: space-between;
    .control-temp {
      vertical-align: middle;
      span {
        display: block;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 22px;
        color: #1b144e;
        &:nth-child(1) {
          margin-bottom: 4px;
          sup {
            width: 12px;
            height: 15px;
            font-family: "Mulish";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: #c4c4c4;
          }
        }
        &:nth-child(2) {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 17px;
          color: #c4c9cf;
        }
      }
    }
    .child-switch {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .control-bottom {
    display: flex;
    justify-content: space-between;
    .control-title {
      font-family: PingFang SC;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #4d5262;
    }
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
}
</style>
  <style class="style" lang="scss">
.light {
  .van-loading__spinner {
    color: $elActiveColor !important;
  }

  .van-switch__loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .van-switch--disabled {
    opacity: 0.5;
  }
}
</style>
  