mky-vent-5/src/views/vent/home/clique/components/wind-device.vue

<template>
  <div class="windDevice">
    <div class="title-top" @click="getDetail">通风设施远程控制</div>
    <div class="toggle-search">
      <i class="icon-search">
        <SvgIcon class="icon" size="14" name="toggle" />
      </i>
      <a-select
        v-model:value="searchValue"
        style="width: 180px; margin-right: 10px"
        :options="options1"
        aria-placeholder="请选择"
        @change="changeSelect"
      />
    </div>
    <!-- <img class="contents" :src="imgSrc" alt="" /> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  // import { getAssetURL } from '/@/utils/ui';
  let searchValue = ref('风门');
  const options1 = reactive<any>([
    {
      value: '风门',
      label: '风门',
    },
    {
      value: '风窗',
      label: '风窗',
    },
  ]);
  //跳转详情
  function getDetail() {
    console.log('跳转详情');
  }
  // let imgSrc = ref(getAssetURL('home-container/wind-door.gif'));
  //选项切换
  function changeSelect(val) {
    switch (val) {
      case '风门':
        // imgSrc.value = getAssetURL('home-container/wind-door.gif');
        break;
      case '风窗':
      
        break;
    }
  }
</script>  

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../../assets/font/douyuFont.otf');
  }
  .windDevice {
    width: 100%;
    height: 100%;
    position: relative;
    .title-top {
      position: absolute;
      top: 9px;
      left: 46px;
      color: #fff;
      font-size: 16px;
      font-family: 'douyuFont';
      cursor: pointer;
      &:hover{
        color: #66ffff;
      }
    }
    .toggle-search {
      position: absolute;
      left: 9px;
      top: 37px;
      display: flex;
      .icon-search {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translate(0%, -50%);
      }
    }
    // .contents {
    //   display: inline-block;
    //   position: absolute;
    //   top: 66px;
    //   left: 50%;
    //   transform: translate(-50%, 0);
    //   // width: 100%;
    //   height: calc(100% - 66px);
    //   padding-bottom: 10px;
    //   box-sizing: border-box;
    // }
  }
  :deep .zxm-select-selector {
    width: 100%;
    height: 30px !important;
    padding: 0 11px 0px 25px !important;
    background-color: rgba(8, 148, 255, 0.3) !important;
    border: 1px solid #1d80da !important;
  }
  :deep .zxm-select-selection-item {
    color: #fff !important;
    line-height: 28px !important;
  }
  :deep .zxm-select-arrow {
    color: #fff !important;
  }
</style>