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 应用
---------------------------------------------------------------------------------
选择目标 ---- 添加入库 ---- 购物车添加进项目 ---- 下载到本地
UI会直接给 .eot .svg .ttf .woff .woff2 ---- 查看说明书使用 demo_index.html
将 iconfont.css 放到 项目的 css 文件夹中,引入 css 后直接使用就好 <link >
- 使用方式一 ---- unicode 只支持单色 引用 兼容到 ie6
<i class="iconfont"></i>
- 使用方式二 ---- font-class 引用兼容到 ie8
<i class="iconfont"></i>
- 使用方式三 ---- 引入 js/iconfont.js ---- 引入通用 css 代码
<svg class="icon" aria-hidden="true"></svg>
选择 svg 生成字体GrnerateSVG&More
修改
下载
保存 font 文件,引入 css 文件
- 使用方式一 类引用: <i class="icon-search"></i>
- 使用方式二 Unicode 引用: <i class="icon-"></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 并引入,即可使用
<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的更多相关文章
- 使用BootstrapVue相关组件,构建Vue项目界面
基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了.Bootst ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- 【View层】界面绘制
[引用]:http://www.jianshu.com/p/c5fc8c6b967a [View层]IOS纯代码绘制界面(一) 字数2303 阅读385 评论2 喜欢16 IOS开发中界面绘制占据了绝 ...
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- electron打包vue项目
electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- Vue项目搭建与部署
Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...
随机推荐
- [再寄小读者之数学篇](2014-10-18 利用 Lagrange 中值定理求极限)
试求 $$\bex \vlm{n}n^2\sex{x^\frac{1}{n}-x^\frac{1}{n+1}},\quad x>0. \eex$$ 解答: $$\beex \bea \mbox{ ...
- APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows
APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows iTunes 12.9.4 for Windows is now available and addres ...
- 2.9 while循环
while循环 <1>while循环的格式 while 条件: 条件满足时,做的事情1 条件满足时,做的事情2 条件满足时,做的事情3 ...(省略)... demo i = 0 whil ...
- Leetcode#88. Merge Sorted Array(合并两个有序数组)
题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...
- 第四节,目标检测---YOLO系列
1.R-CNN回顾 适应全卷积化CNN结构,提出全卷积化设计 共享ResNet的所有卷积层 引入变换敏感性(Translation variance) 位置敏感分值图(Position-sensiti ...
- Django之分页
需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字. 2.用户输入页码超出页码范围 def books(request): try: ...
- 易度文档管理系统--http://www.everydo.com/
易度文档管理系统--http://www.everydo.com/ 公司工程技术部门需要,暂收藏.
- AngularJS初识
AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...
- Jupyter Notebook启动不会自动打开浏览器,每次都要自己打开浏览器输入网址
今天在使用jupyter 时,已启动服务,但每次都需要手动去浏览器 输入网址才可以, 最好找了好久才解决了. 去cmd 命令窗口执行jupyter notebook --generate-config ...
- Spring 源码分析-1-启动
Spring 源码分析-1-启动 在web项目中使用spring的时候,我们会在web.xml中加入如下配置: <listener> <listener-class>org.s ...