zoukankan      html  css  js  c++  java
  • Vue---Ant组件---下拉菜单样式

     <h3 style="margin-bottom: 15px">单人课程统计</h3>
                <a-dropdown :trigger="['click']">
                  <a class="ant-dropdown-link" style="font-size: 16px;">
                    全部(队员:{{ people }}) <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay">
                    <a-col :md="24" :lg="3">
                      <a-menu-item v-for="item in peopleTreeData" :key="item.course_id" style=" 160px">
                        <a href="" style="font-size: 16px" @click.prevent="linkClick(item)">{{ item.course_name }}-{{ item.course_times }}</a>
                      </a-menu-item>
                    </a-col>
                  </a-menu>
                </a-dropdown>
    
    <style lang="less" scoped>
      li{
        margin-left: 10px;
         138px;
        list-style: none;
        line-height: 2rem;
        color: black;
        transition: background-color 1s linear,color 1s linear;
        -webkit-transition: background-color 1s linear,color 1s linear;
        -moz-transition: background-color 1s linear,color 1s linear;
        -o-transition: background-color 1s linear,color 1s linear;
      }
      li:hover{
        background-color: #ADFF2F;
        color: blue;
      }
      .ant-dropdown-menu{
        padding: 0px 0;
      }
    

      

  • 相关阅读:
    gocurd案例
    Go module的介绍及使用
    shell脚本第二天
    shell脚本第一天
    php实现图片压缩
    Golang协程详解和应用
    layui的表格渲染方式
    layui-treetable使用
    模拟tp5.1加载自定义类
    多卡训练的state_dict
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11670407.html
Copyright © 2011-2022 走看看