smart-search-web/src/views/web/list/index.vue

<template>
  <div class="list">
    <div class="list-head">
      <div class="list-head-search">
        <div class="left-select __hover" @click.stop="ref_area.togglePopperVisible(true)">
          搜索范围<SvgIcon name="arrow_1" rotate="90" size="14" color="var(--cus-text-color-3)"/>
          <el-cascader ref="ref_area" class="area-cascader" v-model="state.cascaderParams.value" :props="state.cascaderParams.props" :options="state.cascaderParams.options"/>
        </div>
        <el-input v-model="state.searchText" placeholder="请输入关键字进行查询" @keyup.enter="onSearch"/>
        <div class="right-icon __hover" @click="onSearch">
          <SvgIcon name="search_1" color="var(--cus-main-color)" size="40"/>
        </div>
      </div>
      <div class="list-head-user">
        <div class="avatar">
          <img src="@/assets/images/web/web-list_avatar.png"/>
        </div>
        用户名
      </div>
    </div>
    <div class="count-percent" v-if="state.ws.countPercent < 100">
      <div class="bar-bg"><div class="bar-block" :style="{width: state.ws.countPercent + '%'}"/></div>
      已加载{{state.ws.countPercent}}%
    </div>
    <div class="list-content" :style="{
      paddingTop: state.ws.countPercent == 100 ? '24px' : 0
    }">
      <div class="list-filter">
        <div class="label">检索条件:</div>
        <div class="value">
          <template v-if="isSelectAllCpt || !state.cascaderParams.value.length">
            <div class="filter-item">全部</div>
          </template>
          <template v-else>
            <template v-for="(item, index) in state.cascaderParams.value">
              <div class="filter-item">
                {{ WebStore.searchAreaTypeMap.get(item) }}
                <SvgIcon class="__hover" name="close_1" size="10" color="var(--cus-text-color-3)" @click="onDelFilter(index)"/>
              </div>
            </template>
          </template>
        </div>
      </div>
      <div class="list-tab">
        <template v-for="item in state.resultParams.tree">
          <div class="list-tab-item __hover" :class="{active: item.treeId === state.resultParams.activeTab}" @click="state.resultParams.activeTab = item.treeId" v-if="item.__count > 0">
            {{item.treeName}}<span class="total">({{ item.__count }})</span>
          </div>
        </template>
      </div>
      <div class="list-result" v-if="state.resultParams.activeTab">
        <div class="list-result-tree">
          <template v-for="item in state.resultParams.tree.filter(v => v.treeId === state.resultParams.activeTab)[0].children">
            <div class="list-result-tree-item" v-if="item.__count > 0">
              <div class="item-parent __hover" @click="item.__expend = !item.__expend">
                <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
                {{item.treeName}}
                <span class="total">({{item.__count}})</span>
                <SvgIcon class="expend" name="arrow_1" :rotate="item.__expend ? -90 : 90" color="var(--cus-text-color-4)"/>
              </div>
              <template v-if="item.__expend">
                <template v-for="son in item.children">
                  <div class="item-son __hover" :class="{active: son.treeId === state.resultParams.activeIndex}" @click="state.resultParams.activeIndex = son.treeId" v-if="son.__count > 0">
                    {{son.treeName}}<span class="total">({{son.__count}})</span>
                  </div>
                </template>
              </template>
            </div>
          </template>
        </div>
        <div class="list-result-table">
          <div class="table-head">
            <div class="table-head-index">
              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
              {{currentIndexCpt.treeName}}
              <span class="total">({{currentIndexCpt.__count}})</span>
            </div>
            <div class="table-head-infos">
              <div class="main">
                <img src="@/assets/images/web/wen-list_table-head-icon-1.png"/>
                <div class="one">
                  <div>更新时间：</div>
                  <div>{{ state.resultParams.indexConfig?.updateTime }}</div>
                  <div>接入时间：</div>
                  <div>{{ state.resultParams.indexConfig?.createTime }}</div>
                </div>
                <div>
                  <div>共享方式：</div>
                  <div>{{ state.resultParams.indexConfig?.shareMethod }}</div>
                  <div>更新周期：</div>
                  <div>{{ state.resultParams.indexConfig?.updateCycle }}</div>
                </div>
              </div>
              <div class="info">
                <img src="@/assets/images/web/wen-list_table-head-icon-2.png"/>
                <div>
                  <div>数据共享来源</div>
                  <div>{{ state.resultParams.indexConfig?.dataShareSource }}</div>
                </div>
              </div>
              <div class="info">
                <img src="@/assets/images/web/wen-list_table-head-icon-3.png"/>
                <div>
                  <div>数据提供来源</div>
                  <div>{{ state.resultParams.indexConfig?.dataProvideSource }}</div>
                </div>
              </div>
              <div class="info">
                <img src="@/assets/images/web/wen-list_table-head-icon-4.png"/>
                <div>
                  <div>数据量</div>
                  <div>{{ state.resultParams.indexConfig?.dataTotal }}<span>条</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-switch" v-if="tableConfigCpt.hasCard">
            <div class="__hover" :class="{active: state.tableParams.model === 'list'}" @click="state.tableParams.model = 'list'">
              <SvgIcon name="list_1" size="16" :color="state.tableParams.model === 'list' ? '#ffffff' : 'var(--cus-text-color-3)'"/>
            </div>
            <div class="__hover" :class="{active: state.tableParams.model === 'card'}" @click="state.tableParams.model = 'card'">
              <SvgIcon name="card_1" size="16" :color="state.tableParams.model === 'card' ? '#ffffff' : 'var(--cus-text-color-3)'"/>
            </div>
          </div>
          <div class="table-content" v-loading="state.tableParams.loading">
            <div class="table-content-result">
              <div class="table-list" v-if="state.tableParams.model === 'list'">
                <template v-for="(item, index) in state.tableParams.data">
                  <div class="list-item __hover">
                    <div class="index">{{index + 1 + (state.tableParams.pageNum - 1) * state.tableParams.pageSize }}</div>
                    <div class="cols" :style="{
                      gridTemplateColumns: `repeat(${tableConfigCpt.listCol}, 1fr)`
                    }">
                      <template v-for="c in tableConfigCpt.listConfig">
                        <div class="cols-item" :style="{
                          gridColumn: `span ${c.col}`
                        }">
                          <div class="cols-item-label">{{c.key}}：</div>
                          <div class="cols-item-value" v-html="item[c.value]"/>
                        </div>
                      </template>
                    </div>
                    <div class="operation">
                      <div class="__hover">
                        <SvgIcon name="detail_1" color="var(--cus-main-color)"/>详情
                      </div>
                      <div class="__hover">
                        <SvgIcon name="archives_1" color="var(--cus-main-color)"/>档案
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <div class="table-card" v-if="state.tableParams.model === 'card'" :style="{
                gridTemplateColumns: `repeat(${tableConfigCpt.cardLayout}, 1fr)`
              }">
                <template v-for="(item, index) in state.tableParams.data">
                  <div class="card-item __hover">
                    <div class="main-row">
                      <template v-if="tableConfigCpt?.cardImg.value">
                        <div class="main-row-img">
                          <el-image
                            :src="item[tableConfigCpt?.cardImg.value]"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[item[tableConfigCpt?.cardImg.value]]"
                            :preview-teleported="true"
                          />
                        </div>
                      </template>
                      <div class="main-row-param" v-html="item[tableConfigCpt.cardMain.value]"/>
                      <div class="main-row-operation">
                        <div class="__hover">
                          <SvgIcon name="detail_1" color="var(--cus-main-color)"/>详情
                        </div>
                        <div class="__hover">
                          <SvgIcon name="archives_1" color="var(--cus-main-color)"/>档案
                        </div>
                      </div>
                    </div>
                    <div class="cols" :style="{
                      gridTemplateColumns: `repeat(${tableConfigCpt.cardCol}, 1fr)`
                    }">
                      <template v-for="c in tableConfigCpt.cardConfig">
                        <div class="cols-item" :style="{
                          gridColumn: `span ${c.col}`
                        }">
                          <div class="cols-item-label">{{c.key}}：</div>
                          <div class="cols-item-value" v-html="item[c.value]"/>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="table-content-page">
              <CusPage
                :page-num="state.tableParams.pageNum"
                :page-size="state.tableParams.pageSize"
                :total="state.tableParams.total"
                @page="onPage"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useWebStore} from "@/stores";
import {ElLoading} from "element-plus";

const {proxy} = getCurrentInstance()
const WebStore = useWebStore()
const route = useRoute()
const router = useRouter()
const state: any = reactive({
  searchText: '',
  cascaderParams: {
    value: [],
    props: {
      label: 'treeName',
      value: 'treeId',
      multiple: true,
      emitPath: false
    },
    show: false,
    options: []
  },
  searchParams: {
    text: '',
    indexKey: []
  },
  resultParams: {
    tree: [],
    activeTab: '',
    activeIndex: '',
    indexConfig: {}
  },
  ws: {
    count: () => {},
    list: () => {},
    countPercent: 100
  },
  tableParams: {
    model: 'list',
    pageNum: 1,
    pageSize: 10,
    total: 0,
    data: [],
    loading: false
  }
})
const ref_area = ref()
const isSelectAllCpt = computed(() => {
  return WebStore.searchAreaIndexTotal === state.cascaderParams.value.length
})
const currentIndexCpt = computed(() => {
  let obj = {}
  state.resultParams.tree.forEach(v => {
    v.children.forEach(c => {
      c.children.forEach(s => {
        if (s.treeId === state.resultParams.activeIndex) {
          obj = s
        }
      })
    })
  })
  return JSON.parse(JSON.stringify(obj))
})
const tableConfigCpt = computed(() => {
  return {
    listCol: 5,
    listConfig: [
      {key: '姓名', value: 'name', col: 3},
      {key: '性别', value: 'sex', col: 1},
      {key: '出生日期', value: 'a', col: 1},
      {key: '出生日期1', value: 'a', col: 1},
      {key: '出生日期2', value: 'a', col: 3},
      {key: '出生日期3', value: 'a', col: 1},
      {key: '出生日期4', value: 'a', col: 1},
      {key: '出生日期5', value: 'a', col: 1},
      {key: '出生日期6', value: 'a', col: 1},
      {key: '出生日期7', value: 'a', col: 1},
      {key: '出生日期8', value: 'a', col: 1},
      {key: '出生日期9', value: 'a', col: 1},
    ],
    hasCard: true,
    cardLayout: 3,
    cardCol: 2,
    cardMain: {key: '姓名', value: 'name', col: 1},
    cardImg: {key: '头像', value: 'avatar', isImg: true},
    cardConfig: [
      {key: '性别', value: 'sex', col: 1},
      {key: '出生日期', value: 'a', col: 2},
      {key: '出生日期1', value: 'a', col: 1},
      {key: '出生日期2', value: 'a', col: 1},
      {key: '出生日期3', value: 'a', col: 1},
      {key: '出生日期4', value: 'a', col: 1},
      {key: '出生日期5', value: 'a', col: 1},
      {key: '出生日期6', value: 'a', col: 1},
    ]
  }
})

const initArea = () => {
  WebStore.getSearchAreaTree().then(res => {
    const arr = []
    JSON.parse(JSON.stringify(res)).forEach(v => {
      v.children.forEach(c => {
        c.__children = JSON.parse(JSON.stringify(c.children))
        c.children = []
      })
      arr.push(v)
    })
    state.cascaderParams.options = arr
    onSearch()
  })
}
const onDelFilter = (index) => {
  const temp = JSON.parse(JSON.stringify(state.cascaderParams.value))
  temp.splice(index, 1)
  state.cascaderParams.value = temp
}
const onSearch = () => {
  state.searchParams = JSON.parse(JSON.stringify({
    text: state.searchText,
    indexKey: state.cascaderParams.value
  }))
  initResultTree()
}
const initResultTree = () => {
  state.resultParams.activeTab = ''
  state.resultParams.activeIndex = ''
  const arr = []
  WebStore.searchAreaTree.forEach(v => {
    const t = {
      ...v,
      children: []
    }
    v.children?.forEach(c => {
      if (state.searchParams.indexKey.includes(c.treeId)) {
        t.children.push(c)
      }
    })
    if (t.children.length > 0) {
      arr.push(t)
    }
  })
  if (arr.length > 0) {
    state.resultParams.tree = JSON.parse(JSON.stringify(arr))
  } else {
    state.resultParams.tree = JSON.parse(JSON.stringify(WebStore.searchAreaTree))
  }
  state.ws.count()
}
const getIndexConfig = () => {
  state.resultParams.indexConfig = {}
  setTimeout(() => {
    state.resultParams.indexConfig = {
      updateTime: '2024-09-09 14:20:20',
      createTime: '2024-09-09 14:20:20',
      shareMethod: '数据库表',
      updateCycle: 'T+1',
      dataShareSource: '海南省大数据管理局',
      dataProvideSource: '海南省大数据管理局',
      dataTotal: '9125815819',
    }
    state.ws.list()
  },500)
}
const onPage = (pageNum, pageSize) => {
  state.tableParams.pageNum = pageNum
  state.tableParams.pageSize = pageSize
  state.ws.list(false)
}
watch(() => state.resultParams.activeIndex, (n) => {
  if (n) {
    getIndexConfig()
  }
})
onMounted(() => {
  const {text, index} = route.query
  if (!text) {
    router.replace({
      name: '71305311-abcc-4d13-8531-f966b49839c5'
    })
  } else {
    state.searchText = text
    if (index) {
      state.cascaderParams.value = index.split(',')
    }
    const ws: any = new WebSocket('ws://localhost:18375')
    let sessionId = ''
    let timestamp = new Date().getTime()
    let lastCountParams = ''
    let lastCountStep = 0
    let lastCountStep_ = 0
    let lastListParams = ''
    ws.onopen = (e) => {
      state.ws.count = () => {
        state.ws.countPercent = 0
        // 如果有的话，终止上一次请求
        if (lastCountParams) {
          const p = JSON.parse(lastCountParams)
          p.flag = 'stop'
          ws.send(JSON.stringify(p))
        }
        // 如果有的话，终止上一次请求
        if (lastListParams) {
          const p = JSON.parse(lastListParams)
          p.flag = 'stop'
          ws.send(JSON.stringify(p))
          lastListParams = ''
        }
        // 执行新的请求
        let step = 0
        const builder = state.resultParams.tree.map(tag => ({
          tagCode: tag.treeId,
          datas: tag.children.map(type => {
            step++
            return {
              typeCode: type.treeId,
              datas: type.children.map(index => ({
                indexCode: index.treeId,
                datas: []
              }))
            }
          })
        }))
        lastCountStep = step
        lastCountStep_ = step
        timestamp = new Date().getTime()
        const params = {
          builder: builder,
          keyData: state.searchParams.text,
          type: 'count',
          sessionId: sessionId,
          timestamp: timestamp,
          flag: 'run',
          orderBy: {}
        }
        lastCountParams = JSON.stringify(params)
        ws.send(lastCountParams)
      }
      state.ws.list = (init = true) => {
        // 如果有的话，终止上一次请求
        if (lastListParams) {
          const p = JSON.parse(lastListParams)
          p.flag = 'stop'
          ws.send(JSON.stringify(p))
          lastListParams = ''
        }
        if (init) {
          state.tableParams = {
            model: 'list',
            pageNum: 1,
            pageSize: 10,
            total: 0,
            data: [],
            loading: true
          }
        }
        const params = {
          keyData: state.searchParams.text,
          pageNumber: state.tableParams.pageNum,
          pageSize: state.tableParams.pageSize,
          indexCode: state.resultParams.activeIndex,
          type: 'list',
          sessionId: sessionId,
          timestamp: timestamp,
          flag: 'run',
          orderBy: {}
        }
        lastCountParams = JSON.stringify(params)
        ws.send(lastCountParams)
      }
    }
    ws.onmessage = (e) => {
      try {
        const json = JSON.parse(e.data)
        if (typeof json === 'string') {
          sessionId = json
          initArea()
        } else {
          switch (json.type) {
            case 'count': {
              const p = JSON.parse(lastCountParams)
              // 返回为最新批次的
              if (json.timestamp == p.timestamp) {
                const resTag = json.datas[0]
                const resType = resTag.datas[0]
                state.resultParams.tree.forEach(tag => {
                  if (tag.treeId == resTag.tagCode) {
                    tag.children.forEach(type => {
                      if (type.treeId == resType.typeCode) {
                        resType.datas.forEach((index, indexI) => {
                          type.children[indexI].__count = index.data
                          type.__count = type.__count ? (type.__count + index.data) : index.data
                          tag.__count = tag.__count ? (tag.__count + index.data) : index.data
                        })
                      }
                    })
                  }
                })
                for (let tagI = 0; tagI < state.resultParams.tree.length; tagI++) {
                  const tag = state.resultParams.tree[tagI]
                  if (tag.__count > 0 && !state.resultParams.activeTab) {
                    state.resultParams.activeTab = tag.treeId
                    for (let typeI = 0; typeI < tag.children.length; typeI++) {
                      const type = tag.children[typeI]
                      if (type.__count > 0) {
                        type.__expend = true
                        for (let indexI = 0; indexI < type.children.length; indexI++) {
                          const index = type.children[indexI]
                          if (index.__count > 0 && !state.resultParams.activeIndex) {
                            state.resultParams.activeIndex = index.treeId
                            break
                          }
                        }
                        break
                      }
                    }
                    break
                  }
                }
                lastCountStep--
                state.ws.countPercent = ((lastCountStep_ - lastCountStep) / lastCountStep_ * 100).toFixed(0)
                if (lastCountStep === 0) {
                  lastCountParams = ''
                }
              }
            } break
            case 'list': {
              const p = JSON.parse(lastCountParams)
              // 返回为最新批次的
              if (json.timestamp == p.timestamp) {
                state.tableParams.total = json.records
                state.tableParams.data = json.datas
                state.tableParams.loading = false
              }
            } break
          }
        }
      } catch (e) {

      }
    }
    state.ws = ws
  }
})
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  height: 100%;
  background-color: #F6F7FB;
  display: flex;
  flex-direction: column;
  .list-head {
    display: flex;
    align-items: center;
    width: 100%;
    height: 72px;
    background-color: #FFFFFF;
    .list-head-search {
      margin-left: auto;
      width: 800px;
      display: flex;
      align-items: center;
      height: 48px;
      background: rgba(255,255,255,0.9);
      box-shadow: 0px 0px 2px 0px rgba(167,220,255,0.5);
      border-radius: 60px;
      border: 1px solid var(--cus-text-color-4);
      .left-select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 184px;
        gap: 17px;
        color: var(--cus-text-color-4);
        font-size: 18px;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          right: 0;
          height: 40px;
          width: 1px;
          background-color: var(--cus-text-color-4);
        }
        :deep(.area-cascader) {
          position: absolute;
          z-index: -1;
          opacity: 0;
          height: 50px;
        }
      }
      :deep(.el-input) {
        font-size: 18px;
        color: var(--cus-text-color-2);
        .el-input__wrapper {
          box-shadow: none;
          background-color: transparent;
          .el-input__inner {
            &::placeholder {
              color: var(--cus-text-color-4);
            }
          }
        }
      }
      .right-icon {
        margin-right: 20px;
      }
    }
    .list-head-user {
      display: flex;
      align-items: center;
      color: var(--cus-main-color);
      margin: 0 24px;
      .avatar {
        margin-right: 8px;
      }
    }
  }
  .count-percent {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 10px;
    color: var(---cus-text-color-2);
    padding: 10px 24px;
    line-height: 1;
    .bar-bg {
      flex: 1;
      margin-right: 10px;
      background-color: rgba(var(--cus-main-color-rgb), 0.1);
      height: 8px;
      border-radius: 8px;
      position: relative;
      .bar-block {
        transition: 1s;
        border-radius: 8px;
        position: absolute;
        height: 100%;
        background-color: rgba(var(--cus-main-color-rgb), 1);
      }
    }
  }
  .list-content {
    overflow: hidden;
    flex: 1;
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    $filterLineHeight: 26px;
    .list-filter {
      font-weight: 500;
      font-size: 14px;
      color: var(--cus-text-color-2);
      display: flex;
      .label {
        margin-right: 20px;
        line-height: $filterLineHeight;
      }
      .value {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 10px;
        .filter-item {
          height: $filterLineHeight;
          padding: 0 16px;
          background: #FFFFFF;
          border-radius: 45px;
          font-size: 12px;
          display: flex;
          align-items: center;
          .svg-icon {
            margin-left: 10px;
          }
        }
      }
    }
    .list-tab {
      height: 45px;
      margin-top: 19px;
      display: flex;
      .list-tab-item {
        height: 100%;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--cus-text-color-2);
        border-radius: 8px 8px 0 0;
        .total {
          font-size: 12px;
          margin-left: 4px;
          color: var(--cus-text-color-2);
          font-weight: 400;
        }
        &.active {
          background-color: #ffffff;
          box-shadow: 0px -4px 10px 0px rgba(62,123,250,0.1);
          color: var(--cus-main-color);
          font-weight: 500;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            width: calc(100% - 16px * 2);
            height: 3px;
            background-color: var(--cus-main-color);
          }
        }
      }
    }
    .list-result {
      flex: 1;
      background-color: #ffffff;
      padding: 16px;
      display: flex;
      gap: 16px;
      overflow: hidden;
      .list-result-tree {
        height: 100%;
        width: 300px;
        padding-right: 10px;
        overflow-y: auto;
        .list-result-tree-item {
          .item-parent {
            min-height: 38px;
            display: flex;
            align-items: center;
            padding-right: 16px;
            line-height: 1;
            color: var(--cus-text-color-1);
            .flag {
              margin-right: 10px;
            }
            .total {
              font-size: 14px;
            }
            .expend {
              margin-left: auto;
            }
          }
          .item-son {
            padding: 10px 34px;
            font-weight: 400;
            font-size: 14px;
            color: var(--cus-text-color-2);
            border-radius: 4px;
            .total {
              font-size: 12px;
            }
            &.active {
              background-color: rgba(var(--cus-main-color-rgb), 0.1);
              color: var(--cus-main-color);
            }
          }
        }
      }
      .list-result-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        .table-head {
          width: 100%;
          height: 162px;
          padding: 16px;
          background: linear-gradient( 90deg, rgba(var(--cus-main-color-rgb),0.1) 0%, rgba(var(--cus-main-color-rgb),0.05) 100%), #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(var(--cus-main-color-rgb),0.3);
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          .table-head-index {
            display: flex;
            align-items: center;
            padding-right: 16px;
            line-height: 1;
            color: var(--cus-text-color-1);
            .flag {
              margin-right: 10px;
            }
            .total {
              font-size: 14px;
            }
          }
          .table-head-infos {
            flex: 1;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            gap: 10px;
            .main {
              height: 92px;
              width: 455px;
              display: flex;
              align-items: center;
              background: linear-gradient( 90deg, rgba(var(--cus-main-color-rgb),0.3) 0%, rgba(var(--cus-main-color-rgb),0.2) 100%);
              font-weight: 400;
              font-size: 12px;
              position: relative;
              &:before {
                content: '';
                background-image: url("@/assets/images/web/wen-list_table-head-bg-2.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
              }
              >* {
                z-index: 2;
              }
              >img {
                margin-left: 24px;
                height: 100%;
              }
              >div {
                >div {
                  &:nth-child(odd) {
                    color: var(--cus-text-color-3);
                  }
                  &:nth-child(even) {
                    color: var(--cus-text-color-2);
                  }
                  &:nth-child(2) {
                    margin-bottom: 6px;
                  }
                }
              }
              .one {
                margin: 0 32px;
              }
            }
            .info {
              flex: 1;
              height: 70px;
              background: linear-gradient( 90deg, rgba(var(--cus-main-color-rgb),0.3) 0%, rgba(var(--cus-main-color-rgb),0.2) 100%);
              position: relative;
              &:before {
                content: '';
                background-image: url("@/assets/images/web/wen-list_table-head-bg-1.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
              }
              >* {
                z-index: 2;
              }
              >img {
                position: absolute;
                bottom: 0;
                left: 20px;
              }
              >div {
                margin-left: 144px;
                margin-top: 14px;
                position: inherit;
                >div:nth-child(1) {
                  font-weight: 400;
                  font-size: 14px;
                  color: var(--cus-text-color-2);
                }
                >div:nth-child(2) {
                  margin-top: 4px;
                  font-weight: 500;
                  font-size: 16px;
                  color: var(--cus-main-color);
                  >span {
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
        .table-switch {
          margin: 10px 0 10px auto;
          display: flex;
          >div {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #F5F7FA;
            border: 1px solid #DCDFE5;
            &:nth-child(1) {
              border-radius: 4px 0 0 4px;
            }
            &:nth-child(2) {
              border-radius: 0 4px 4px 0;
            }
            &.active {
              background-color: var(--cus-main-color);
              border-color: var(--cus-main-color);
            }
          }
        }
        .table-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .table-content-result {
            flex: 1;
            overflow: hidden;
            .table-list {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              overflow-y: auto;
              border: 1px solid #EAEBEF;
              border-radius: 4px;
              .list-item {
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 14px;
                color: var(--cus-text-color-2);
                padding: 12px 16px;
                &:hover {
                  background-color: rgba(46,129,255,0.05);
                }
                &:not(:last-child) {
                  border-bottom: 1px solid #EAEBEF;
                }
                .index {
                  margin-right: 16px;
                }
                .cols {
                  flex: 1;
                  display: grid;
                  row-gap: 4px;
                  .cols-item {
                    display: flex;
                    .cols-item-label {
                      color: var(--cus-text-color-1);
                      font-weight: bold;
                    }
                    .cols-item-value {
                      color: var(--cus-text-color-2);
                    }
                  }
                }
                .operation {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  font-size: 14px;
                  color: var(--cus-text-color-2);
                  >div {
                    display: flex;
                    align-items: center;
                    .svg-icon {
                      margin-right: 2px;
                    }
                  }
                }
              }
            }
            .table-card {
              width: 100%;
              height: 100%;
              display: grid;
              overflow-y: auto;
              gap: 16px;
              .card-item {
                padding: 16px;
                background: linear-gradient( 180deg, rgba(var(--cus-main-color-rgb), 0.1) 0%, rgba(var(--cus-main-color-rgb),0) 100%), #FFFFFF;
                box-shadow: 0px 2px 4px 0px rgba(var(--cus-main-color-rgb),0.2);
                border-radius: 4px;
                .main-row {
                  display: flex;
                  align-items: center;
                  .main-row-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    margin-right: 10px;
                    .el-image {
                      width: 100%;
                      height: 100%;
                      >img {
                        width: 100%;
                        height: 100%;
                      }
                    }
                  }
                  .main-row-param {
                    font-size: 20px;
                    color: var(--cus-text-color-1);
                    font-weight: bold;
                  }
                  .main-row-operation {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 14px;
                    color: var(--cus-text-color-2);
                    margin-left: auto;
                    >div {
                      display: flex;
                      align-items: center;
                      .svg-icon {
                        margin-right: 2px;
                      }
                    }
                  }
                }
                .cols {
                  flex: 1;
                  display: grid;
                  row-gap: 4px;
                  font-size: 14px;
                  .cols-item {
                    display: flex;
                    .cols-item-label {
                      color: var(--cus-text-color-1);
                      font-weight: bold;
                    }
                    .cols-item-value {
                      color: var(--cus-text-color-2);
                    }
                  }
                }
              }
            }
          }
          .table-content-page {
            margin-top: 10px;
            margin-left: auto;
          }
        }
      }
    }
  }
}
</style>