跟我一起做京东金融的项目

Posted 2022-04-26 smart-girl

虽然突兀，但是项目已经开始了
我们首先定义公共的css文件

//app\\css\\layout.scss
@charset "UTF-8";
@mixin flex($direction:column,$inline:block)
    display: if($inline==block,flex,inline-block);
    flex-direction: $direction;
    flex-wrap: wrap;

//app\\css\\element.scss
@import "./layout.scss";
@mixin btn($size:14px,$color:#fff,$bgcolor:#F04752,$padding:5px,$radius:5px) 
    padding: $padding;
    background-color: $bgcolor;
    border-radius: $radius;
    border:1px solid $bgcolor;
    color: $color;
    line-height: 1;
    display: inline-block;
    text-align: center;

@mixin list($direction:column) 
    @include flex($direction)

@mixin panel($bgcolor:#fff,$padding:0,$margin:20px 0,$height:112px,$txtPadding:0,$color:#333,$fontSize:32px) 
    background: $bgcolor;
    padding:$padding;
    margin: $margin;
    >h4
        height:$height;
        line-height: $height;
        padding: $txtPadding;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        color: $color;
        font-size: $fontSize;
    

关于js组件设计设计原则

https://github.com/jawil/blog/issues/21

em相对于父级元素

rem相对于根html标签

有一个小栗子

<a class="api a">a.html</a>
    <a class="api b">b.html</a>
    <script type="text/javascript">
      //注册路由
      document.querySelectorAll('.api').forEach(item=>
        item.addEventListener('click',(e)=>
         e.preventDefault();
          let link = item.textContent;
          window.history.pushState(name:'api',link,link);
        ,false)
      );
      // 监听路由
      window.addEventListener('popstate',(e)=>
        console.log(
          location:location.href,
          state:e.state
        )
      ,false)
    </script>
    <style>
      html a
        color:blue;
        cursor: pointer;
        margin: 20px 10px;
      
    </style>
    <h1>hash</h1>
    <a  class="hash a">#a.html</a>
    <a  class="hash b">#b.html</a>
    <script>
    //注册路由
    document.querySelectorAll('.hash').forEach(item=>
      item.addEventListener('click',(e)=>
        e.preventDefault();
        let link =item.textContent;
       location.hash = link;
      ,false)
    );
    // 监听路由
    window.addEventListener('hashchange',(e)=>
      console.log(
        location:location.href,
        hash:location.hash
      )
    )
    </script>