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)

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

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

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

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

自制字体图标 https://icomoon.io

选择 svg 生成字体GrnerateSVG&More

修改

下载

保存 font 文件，引入 css 文件

使用方式一类引用： <i class="icon-search"></i>
使用方式二 Unicode 引用： <i class="icon-"></i>

上线使用：

引入在线 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>

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

秒客网

vue 项目界面绘制_stylus_iconfont_swiper

相关文章