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

  • 相关阅读:
    CentOS 5.5如何通过yum安装Zend Optimizer
    如何更改商品分类名称的长度?
    ECSHOP的后台路径修改
    SVN协同开发时服务端与线上APACHE测试环境网站同步记录 转
    一个简单的替换字符的SQL命令
    svn 的常见操作 import
    SVN制作补丁包的方法
    kloxo密码解决办法
    SVN的分支/标记/合并
    如何将一个表中的所有字母都变成小写
  • 原文地址:https://www.cnblogs.com/daicw/p/11883656.html
Copyright © 2011-2022 走看看