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

  • 相关阅读:
    转载:.NET Web开发技术简单整理
    我眼中的Java架构师
    使用命令行写一个 Java Servlet
    不用注入方式使用Spring管理的对象中的方法,神奇
    部署java项目日志乱码求解!!!
    Java后台解决跨域问题
    发送ajax请求时候注意的问题
    简单的调用阿里云的短信接口
    jmeter测试
    springboot集成mongo
  • 原文地址:https://www.cnblogs.com/daicw/p/11883656.html
Copyright © 2011-2022 走看看