菜单导航组件

Posted 2020-11-22 daicw

<template>
  <div class="Tab">
    <div v-for="(item,index) in Colors" :key="index" :style="index===0?‘‘:‘margin-left: -6px;‘" class="I3DFolderMenuNavigation">
      <div class="I3DFolderMenuNavigationFoot">
        <div class="I3DFolderMenuNavigationFootTop">
          <div class="I3DFolderMenuNavigationParallelogram" :style="‘background:‘+item.botColor"></div>
          <div class="I3DFolderMenuNavigationTriangle" :style="‘border-top: 15px solid ‘+item.bodyColor"></div>
        </div>
        <div class="I3DFolderMenuNavigationFootBot">
          <div class="I3DFolderMenuNavigationParallelogram" :style="‘background:‘+item.botColor"></div>
          <div class="I3DFolderMenuNavigationTriangle" :style="‘border-bottom: 15px solid ‘+item.bodyColor"></div>
        </div>
      </div>
      <div class="I3DFolderMenuNavigationMain" :style="‘background:‘+item.bodyColor">{{item.title}}</div>
      <div class="I3DFolderMenuNavigationTop">
        <div class="I3DFolderMenuNavigationTriangleTop" :style="‘border-bottom: 15px solid ‘+item.bodyColor"></div>
        <div class="I3DFolderMenuNavigationTriangleBot" :style="‘border-top: 15px solid ‘+item.bodyColor"></div>
      </div>
    </div>
  </div>
</template>
<script>
// 菜单导航组件需要传入颜色：botColor、bodyColor和文字：title
export default {
  props: [‘Colors‘]
}
</script>

组件内容

.I3DFolderMenuNavigation{
    display: flex;
}
.I3DFolderMenuNavigationFoot{
    width: 15px;
    height: 30px;
}
.I3DFolderMenuNavigationFootTop{
    width: 100%;
    height: 50%;
    display: flex;
}
.I3DFolderMenuNavigationFootBot{
    width: 100%;
    height: 50%;
    display: flex;
}
.I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationParallelogram{
    width: 5px;
    height: 100%;
    transform: skewX(35deg) translateX(5px);
    background: #FFD649;
}
.I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationTriangle{
    width: 10px;
    height: 100%;
    border-left: 10px solid transparent;
    border-top: 15px solid #FBECBB;
    border-right: 0;
    border-bottom: 0;
}
.I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationParallelogram{
    width: 5px;
    height: 100%;
    transform: skewX(-35deg) translateX(5px);
    background: #FFD649;
}
.I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationTriangle{
    width: 10px;
    height: 100%;
    border-left: 10px solid transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 15px solid #FBECBB;
}
.I3DFolderMenuNavigationMain{
    padding: 0 15px;
    height: 100%;
    background: #FBECBB;
    line-height: 31px;
    color: #606060;
    font-family: Anton !important;
}
.I3DFolderMenuNavigationTop{
    width: 10px;
    height: 100%;
}
.I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleTop{
    width: 100%;
    height: 50%;
    border-right: 10px solid transparent;
    border-top: 0;
    border-left: 0;
    border-bottom: 15px solid #FBECBB;
}
.I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleBot{
    width: 100%;
    height: 50%;
    border-right: 10px solid transparent;
    border-top: 0;
    border-left: 0;
    border-top: 15px solid #FBECBB;
}
.Tab{
    display: flex;
}

css