vue 項目界面繪製_stylus_iconfont_swiper

stylus

• 兼容 less 的大部分語法
• <link rel="stylesheet" href="stylus/index.css">
• less 語法 省略 {}
• 縮進 分割語法塊
• 分號 , 冒號 能夠省略
• 變量使用方式： 不識別 @height: 40px，而是 $height=40px
• 父級引用器： &
• 混合 mixins.styl ：
• less:

.line-height(@h){

height: @h

line-height: @h

}

---------------------------------------------------

@import "mixins.styl"

• stylus:

line-height(h){

height h

line-height h

}

---------------------------------------------------

@import "mixins.styl"

line-height(41px)

• a

---------------------------------------------------------------------------------

npm install -g stylus

文件後綴： index.styl 

stylus 自動編譯

File - settings - Tools - file Watchers

點擊 +

選擇 stylus ，直接 ok 應用

---------------------------------------------------------------------------------

iconfont

選擇目標 ---- 添加入庫 ---- 購物車添加進項目 ---- 下載到本地

UI會直接給 .eot .svg .ttf .woff .woff2 ---- 查看說明書使用 demo_index.html

將 iconfont.css 放到 項目的 css 文件夾中，引入 css 後直接使用就好 <link >

• 使用方式一 ---- unicode 只支持單色 引用 兼容到 ie6

<i class="iconfont">&#xe61f;</i>

• 使用方式二 ---- font-class 引用兼容到 ie8

<i class="iconfont">&#xe61f;</i>

• 使用方式三 ---- 引入 js/iconfont.js ---- 引入通用 css 代碼 

<svg class="icon" aria-hidden="true"></svg>

自制字體圖標 https://icomoon.io

選擇 svg 生成字體GrnerateSVG&More

修改

下載

保存 font 文件，引入 css 文件

• 使用方式一 類引用： <i class="icon-search"></i>
• 使用方式二 Unicode 引用： <i class="icon-">&#xe61f;</i>

上線使用：

引入在線 css 連接

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css">

---------------------------------------------------------------------------------

<header>

版芯固定 1190px / 1226px，兩翼自適應

浮動不會超越上一個塊級元素

padding 和 border 實現 導航距離分割線 --------自認爲不大好，建議 | 直接 li 包裹使用，而後加 padding

---------------------------------------------------------------------------------

輪播圖 https://www.swiper.com.cn/usage/index.html

下載 css 和 js 並引入，便可使用

vue 中使用 swiper

• <template>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(i,index) in imgNodes" :key="index">
          <img :src="i" :alt="i">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </template>
  
  <script>
    import "../../common/swiper/swiper.css"
    import Swiper from "swiper"
    
    export default {
      name: 'KJFSwiper',
      data () {
        return {
          imgNodes: ['https://yanxuan.nosdn.127.net/bec4a597a9aed55605eeb7c0c7710f9b.jpg?imageView&quality=75&thumbnail=750x0',
            'https://yanxuan.nosdn.127.net/981c28d7f7276a2c84bf8c7790a9b559.jpg?imageView&quality=75&thumbnail=750x0',
            'https://yanxuan.nosdn.127.net/feadfbdcc0e2dea285d92c6740d46c66.jpg?imageView&quality=75&thumbnail=750x0',
            'https://yanxuan.nosdn.127.net/791dda3ae432212164b1668b25fbd11c.jpg?imageView&quality=75&thumbnail=750x0',
            'https://yanxuan.nosdn.127.net/5afff79cb85dfcd465e6da0d8404ddae.jpg?imageView&quality=75&thumbnail=750x0'
          ]
        }
      },
      mounted() {
        new Swiper('.swiper-container', {
          autoplay: true,//可選選項，自動滑動
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
          },
        })
      }
    }
  </script>
  
  <style  lang="stylus" rel="stylesheet/stylus" scoped>
    .swiper-container
      width 100%
      height 4.9rem
      .swiper-slide
        position relative
        img
          width 100%
          height auto
          position absolute
          left 0
          top 50%
          transform: translateY(-50%);
      .swiper-pagination-bullets
        bottom 0.5rem
      .swiper-pagination-bullet
        width .5rem
        height .08rem
        border-radius .1rem
      .swiper-pagination-bullet-active
        background white
  </style>

 

---------------------------------------------------------------------------------