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>

 

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