• 安装sass(css预处理语言)


    nodejs安装
    npm i node-sass sass-loader -S
    语法

    参考sass使用方法

    组件中使用
    <style lang="scss" scoped>
    @import "@/assets/styles/mixin.scss";
    .header-box {
       100%;
      background-image: -webkit-linear-gradient(#000, #121212);
      background-image: linear-gradient(#000, #121212);
      .black-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        // position: relative;
        .logo {
          height: 100%;
          h1 {
            height: 100%;
            display: flex;
            align-items: center;
            a {
              background: url(/static/images/global-logo-red@2x.png) no-repeat 50%;
              background-size: cover;
              background-position: 0 0;
               50px;
              height: 40px;
              display: inline-block;
            }
          }
        }
        .right-box {
          display: flex;
          justify-content: flex-end;
          align-items: center;
           800px;
          .input-search {
             305px;
          }
          > a {
            color: #c8c8c8;
            margin-left: 40px;
            margin-right: 30px;
            &:hover {
              color: #fff;
            }
          }
          .user-and-cart {
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            &:before {
              background: hsla(0, 0%, 100%, 0.2);
              content: " ";
               1px;
              height: 20px;
              position: absolute;
              display: flex;
              align-items: center;
              // top: 4px;
              left: 0;
              margin-left: 20px;
            }
            > div {
              margin-left: 40px;
            }
            .user {
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
    
              .user-warpper {
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
                 168px;
                background: #fff;
                border-radius: 8px;
                position: absolute;
                left: -71px;
                top: 37px;
                z-index: 32;
                display: none;
                ul li {
                  border-top: 1px solid #f5f5f5;
                  height: 50px;
                  line-height: 50px;
                  text-align: center;
                }
                ul li:nth-child(1) {
                  border-top: none;
                  height: 90px;
                  .user-avatar {
                    > div {
                      height: 46px;
                       46px;
                      margin: 20px auto -5px;
                    }
                    .avatar {
                      display: block;
                      border-radius: 50%;
                      background-repeat: no-repeat;
                       100%;
                      height: 100%;
                      background-size: cover;
                    }
                  }
                }
                ul li a {
                  color: black;
                  display: block;
    
                  &:hover {
                    background: rgba($color: #000000, $alpha: 0.03);
                  }
                }
                // 小白箭头
                &:before {
                  @include white-corner(-12px, 71px);
                }
              }
              > a {
                display: inline-block;
                height: 20px;
                 20px;
                background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png);
                background-repeat: no-repeat;
                background-position: -155px 0;
                transition: none 0.15s ease-out;
              }
              &:hover {
                .user-warpper {
                  display: block;
                }
                a {
                  background-position: -5px 0;
                }
              }
            }
            .cart {
              position: relative;
              > a {
                display: inline-block;
                height: 20px;
                 20px;
                background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png)
                  no-repeat -156px -20px;
                transition: none 0.15s ease-out;
                &:hover {
                  background-position: -6px -20px;
                }
              }
              .cart-num {
                height: 20px;
                 20px;
                display: inline-block;
                position: absolute;
                background-image: radial-gradient(#eb746b, #e25147);
                border-radius: 50%;
                line-height: 20px;
                text-align: center;
                color:#fff;
              }
              .cart-wrapper {
                display: block;
                 360px;
                background: #fff;
                position: absolute;
                z-index: 32;
                border-radius: 8px;
                left: -326px;
                top: 38px;
                box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);
                &:before {
                  @include white-corner(-12px,326px);
                }
                .cart-detail{
                  
                }
              }
            }
          }
        }
      }
      //   .white-header {  }
    }
    </style>
    
  • 相关阅读:
    关于IE6不能兼容LCUC使用的PNG透明图象
    rmvb压制中高级技巧
    不错的课件网站
    C#程序多用户只启动一个进程的方法
    不可想像的加密光盘复制工具
    检测远程URL是否存在的三种方法
    请哪里有英文单词单复数转换的代码?
    一些感想,欢迎拍砖
    Some thoughts on my own O/R Mapping or Code Generation tools
    有了net send,谁还用IM?
  • 原文地址:https://www.cnblogs.com/fengxiongmiao/p/13742799.html
Copyright © 2020-2023  润新知