折叠后

<template>
  <div class="page-type-left-wrap">
    <div class="page-type-left-wrap-info nav-link" :class="{ leftCollapse }">
      <el-tabs v-model="activeName" class="page-tabs" @tab-change="handleClick">
        <el-tab-pane label="xxx" name="room">
        </el-tab-pane>
        <el-tab-pane label="xxx" name="forecast">222
        </el-tab-pane>
        <el-tab-pane label="xxx" name="eng">333
        </el-tab-pane>
        <el-tab-pane label="xxx" name="eng">333
        </el-tab-pane>
        <el-tab-pane label="xxx" name="eng">333
        </el-tab-pane>
      </el-tabs>
      <div class="arrow-btn" @click="leftCollapse = !leftCollapse"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'


export default defineComponent({
  name: 'PageType',
  components: {
  },
  setup(props, { emit }) {
    const state = reactive({
      activeName: 'room',
      leftCollapse: false,
    })
    const methods = {
      // 点击具体内容
      handleClick(item) {
        console.log(item, '--页面类型改变--');
        emit('pageTypeChange', item)
      },
    }

    return {
      ...toRefs(state),
      ...methods,
    }
  }
})
</script>

<style scoped lang="less">
.page-type-left-wrap {
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;

  .page-type-left-wrap-info {
    position: relative;

    &.nav-link {
      width: 340px;

      :deep(.el-tabs__header) {
        width: fit-content;
      }
    }

    &.leftCollapse {

      // 折叠后隐藏tab内容面板
      :deep(.el-tabs__content) {
        width: 0;
        padding: 0;
      }

      // 折叠后把背景宽度改小，减少占位不影响底图，header宽度不变，，无这个需求的可不设置
      &.nav-link {
        width: 8px;

        :deep(.el-tabs__header) {
          width: fit-content;
        }
      }

      // 折叠后的箭头位置方向
      .arrow-btn {
        left: 0px;
        border-top-left-radius: 5px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 0px;

        &::before {
          content: '';
          position: absolute;
          border: 6px solid transparent;
          border-left-color: #fff;
          top: 50%;
          transform: translateY(-50%);
          left: 2px;
        }
      }
    }


    // 折叠前箭头位置方向
    .arrow-btn {
      position: absolute;
      top: 50%;
      right: -8px;
      width: 8px;
      height: 38px;
      transform: translateY(-50%);
      background-color: var(--el-color-primary);
      border-top-left-radius: 0px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 5px;
      cursor: pointer;

      &::before {
        content: '';
        position: absolute;
        border: 6px solid transparent;
        border-right-color: #fff;
        top: 50%;
        transform: translateY(-50%);
        right: 2px;
      }
    }
  }


  // tab头部样式
  :deep(.el-tabs__header) {
    height: 36px;
    background-color: #fff;
    border-radius: 4px;
    padding: 0 16px;
    margin: 0 0 16px;
  }

  // 隐藏底部横线
  :deep(.el-tabs__nav-wrap:after) {
    height: 0px; // 改为0
  }

  // 修改选中tab的横线圆角和高度
  :deep(.el-tabs__active-bar) {
    height: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #skyblue;
  }

  :deep(.el-tabs__item.is-active) {
    color: var(--gdky-blue-value-text);
    font-weight: 600;
  }

  :deep(.el-tabs__item) {
    padding: 0 var(--base-padding);
    height: 36px;
    font-weight: 400;
  }

  :deep(.el-tabs__item:hover) {
    color: #pink; // 自行修改
  }

  // 内容面板背景和高度
  :deep(.el-tabs__content) {
    width: 340px;
    height: calc(100vh - 16px - 16px - 15px - 36px);
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;
  }
}
</style>