hsq-pro/LongList.vue

<template>
  <div class="long-list">
    <div class="list-title">
      <span>设备列表</span>
      <span style="margin-left: 5px">{{ count }}</span>
    </div>
    <div class="list-content">
      <div class="list-search">
        <a-input v-model:value="searchData" placeholder="搜索设备编号，名称" size="small" />
      </div>
      <div class="content-container">
        <div class="content-nav">
          <div
            :class="activeIndex == index ? 'nav-item-active' : 'nav-item'"
            v-for="(item, index) in navList"
            :key="index"
            @click="changeNav(item, index)"
            >{{ item.label }}</div
          >
        </div>
        <div class="content-box">
          <basicDevice v-for="(item, index) in 10" :key="index"></basicDevice>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import basicDevice from './src/views/vent/home/configurable/components/basicDevice.vue';

//设备列表数量
let count = ref(0);
//搜索条件
let searchData = ref('');
//当前激活nav选项
let activeIndex = ref(0);
let navList = ref<any[]>([
  { label: '全部', value: '0' },
  { label: 'xxx', value: '1' },
  { label: 'xxx', value: '2' },
  { label: 'xxx', value: '3' },
  { label: 'xxx', value: '4' },
  { label: 'xxx', value: '5' },
]);

//nav选项切换
function changeNav(item, index) {
  activeIndex.value = index;
}
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .long-list {
  }
}

.long-list {
  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-6.png');
  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-2.png');

  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;

  .list-title {
    width: 177px;
    height: 30px;
    line-height: 22px;
    padding-left: 16px;
    color: #01fefc;
    font-weight: bolder;
    background: var(--image-box-bg) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 5px;
  }

  .list-content {
    width: 100%;
    height: calc(100% - 35px);
  }

  .list-search {
    margin-bottom: 5px;
  }

  .content-container {
    width: 100%;
    height: calc(100% - 47px);
  }

  .content-nav {
    display: flex;
    align-items: center;
    height: 32px;
    margin: 0px 5px 10px 5px;
    background-color: #15517b;
  }

  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 100%;
    cursor: pointer;
  }

  .nav-item-active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 100%;
    cursor: pointer;
    background-color: #1d73a8;
    border-bottom: 2px solid #36c7ff;
  }
  .content-box {
    height: calc(100% - 42px);
    overflow-y: auto;
  }

  .zxm-input {
    height: 42px;
    color: #fff;
    background-color: transparent;
    border: none;
    background: var(--image-box-bg1) no-repeat;
    background-size: 100% 100%;
  }

  .zxm-input-sm {
    padding: 0px 20px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
</style>