Vue仿京东左侧列表划过显示 组件

<template>
  <q-page class="flex_classifycation">
    <div class="tabwrapper" @mouseleave="handleleave">
      <div class="left">
        <ul>
          <li
            v-for="(item, index) of citylist"
            :key="index"
            @mouseenter="handleenter(index)"
            :class="{
              active: currentindex == index,
            }"
          >
            <span>{{ item.type }}</span
            ><i></i>
          </li>
        </ul>
      </div>
      <div class="right" v-if="isshow">
        <ul>
          <li v-for="(v, i) of citylist[currentindex].children" :key="i">
            <strong>{{ i + 1 }}</strong>
            <span>{{ v.city }}</span>
            <i>{{ v.desc }}</i>
          </li>
        </ul>
      </div>
    </div>
  </q-page>
</template>

<script>
export default {
  name: "ClassificationMain",
  data: function () {
    return {
      isshow: false,
      currentindex: 99,
      citylist:  [
        {
          "type": "热门城市",
          "children": [
            {
              "city": "北京",
              "desc": "世界著名古都和现代化国际城市"
            },
            {
              "city": "广州",
              "desc": "粤港澳大湾区、泛珠江三角洲经济区"
            },
            {
              "city": "上海",
              "desc": "长江入海口，东隔东中国海"
            },
            {
              "city": "成都",
              "desc": "国家历史文化名城"
            },
            {
              "city": "西安",
              "desc": "中国国际形象最佳城市之一"
            }
          ]
        },
        {
          "type": "推荐城市",
          "children": [
            {
              "city": "青岛",
              "desc": "滨海度假旅游城市"
            },
            {
              "city": "杭州",
              "desc": "西湖十景"
            },
            {
              "city": "深圳",
              "desc": "世界影响力的创新创意之都"
            },
            {
              "city": "广州",
              "desc": "粤港澳大湾区、泛珠江三角洲经济区"
            },
            {
              "city": "成都",
              "desc": "国家历史文化名城"
            }
          ]
        },
        {
          "type": "奔向海岛",
          "children": [
            {
              "city": "秦皇岛",
              "desc": "驰名中外的旅游休闲胜地"
            },
            {
              "city": "青岛",
              "desc": "滨海度假旅游城市"
            },
            {
              "city": "珠海",
              "desc": "浪漫之城，百岛之市"
            },
            {
              "city": "深圳",
              "desc": "世界影响力的创新创意之都"
            },
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            }
          ]
        },
        {
          "type": "主题推荐",
          "children": [
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            },
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            },
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            },
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            },
            {
              "city": "海口",
              "desc": "海滨自然旖旎风光"
            },
            {
              "city": "广州",
              "desc": "粤港澳大湾区、泛珠江三角洲经济区"
            },
            {
              "city": "上海",
              "desc": "长江入海口，东隔东中国海"
            },
            {
              "city": "珠海",
              "desc": "浪漫之城，百岛之市"
            },
            {
              "city": "西安",
              "desc": "中国国际形象最佳城市之一"
            }
          ]
        }
      ]
    };
  },
  created: function () {
    this.getcity();
  },
  methods: {
    handleenter: function (index) {
      this.currentindex = index;
      this.isshow = true;
    },
    handleleave: function () {
      this.currentindex = 99;
      this.isshow = false;
    },
    getcity: function () {
      this.$axios({
        url: "/posts/cities",
      }).then((res) => {
        // console.log(res.data);
        // this.citylist = res.data.data;
      });
    },
  },
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.flex_classifycation{

  min-height: 480px !important;
}
.tabwrapper {
  box-sizing: border-box;
  position: relative;
  width: 1200px;
  height: 480px;
  .left {
    position: relative;
    box-sizing: border-box;
    width: 190px;
    height: 480px;
    background: #fff;
    border-right: none;
    border-bottom: none;
    z-index: 2;
    ul > li {
      box-sizing: border-box;
      width: 190px;
      height: 41px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      //border-right: 1px solid #999;
      border-bottom: 1px solid #eee;
      padding-left: 20px;
      &.active {
        border-right-color: #fff;
        color: brown;
        i {
          border-color: #999999;
        }
      }
      // &:hover {
      // color: orange;
      // border-right-color: #fff;
      //   i {
      //     border-color: orange;
      //   }
      // }
      //i {
      //  width: 14px;
      //  height: 14px;
      //  border-top: 1px solid #999;
      //  border-right: 1px solid #999;
      //  transform: rotate(45deg);
      //}
    }
    li:hover{
      background: #eee;
      color: brown;
    }
  }
  .right {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 1010px;
    min-height: 480px;
    left: 190px;
    border: 1px #eee solid;

    ul > li {
      width: 360px;
      height: 42px;
      display: flex;
      align-items: center;
      strong {
        display: inline-block;
        margin-left: 20px;
        color: black;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        color: black;
      }
      i {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
}
</style>