zoukankan      html  css  js  c++  java
  • 菜单导航组件

    <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{
         15px;
        height: 30px;
    }
    .I3DFolderMenuNavigationFootTop{
         100%;
        height: 50%;
        display: flex;
    }
    .I3DFolderMenuNavigationFootBot{
         100%;
        height: 50%;
        display: flex;
    }
    .I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationParallelogram{
         5px;
        height: 100%;
        transform: skewX(35deg) translateX(5px);
        background: #FFD649;
    }
    .I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationTriangle{
         10px;
        height: 100%;
        border-left: 10px solid transparent;
        border-top: 15px solid #FBECBB;
        border-right: 0;
        border-bottom: 0;
    }
    .I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationParallelogram{
         5px;
        height: 100%;
        transform: skewX(-35deg) translateX(5px);
        background: #FFD649;
    }
    .I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationTriangle{
         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{
         10px;
        height: 100%;
    }
    .I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleTop{
         100%;
        height: 50%;
        border-right: 10px solid transparent;
        border-top: 0;
        border-left: 0;
        border-bottom: 15px solid #FBECBB;
    }
    .I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleBot{
         100%;
        height: 50%;
        border-right: 10px solid transparent;
        border-top: 0;
        border-left: 0;
        border-top: 15px solid #FBECBB;
    }
    .Tab{
        display: flex;
    }

    css

  • 相关阅读:
    mysql事务
    python zip dict函数
    有关mysql索引
    hash(散列函数)
    Docker使用
    Mac终端命令自动补全
    python序列化与反序列化(json与pickle)
    python txt、excel读写
    python 正则表达式
    python进行数据预处理-pandas
  • 原文地址:https://www.cnblogs.com/daicw/p/11883656.html
Copyright © 2011-2022 走看看