本帖最后由 fengrui99 于 2019-8-19 10:46 编辑
原文转载来自：https://www.frbkw.com/1897/
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/阿里/百度/头条/QQ）等多个平台。说多了都是泪，官方的组件只有横的和竖的 ，你说魔改嘛，等会样式就炸了，不如自己手写 一个简单粗暴的方式学会。基础教程，介绍一个我们需要了解的知识点，首先我们看下效果图
以下内容可以在CSS 选择器参考手册中查询
1.p:after在每个 <p> 元素的内容之后插入内容
2.p:before在每个 <p> 元素的内容之前插入内容
3.p:last-child选择属于其父元素最后一个子元素每个 <p> 元素
4.阿里矢量图标阿里图标引入的方式有很多，下载文件引入，在线引入。因为我们要做after和before所有我们不能直接下载图片
了解以上东西后我们开始首先我们建立一个空的uni-app项目（万恶的老图）
1.打开首页编辑为了方便我提现写好了头部的样式，我们主要说明以下步骤条的写法，我们画view，最大的一个包裹住里面的步骤块
[Bash shell] 纯文本查看 复制代码 <!-- 步骤条 -->
<view class="set-1">
<view class="set-2" ></view>
<view class="set-2" ></view>
<view class="set-2" ></view>
</view>
随后我们给他们都上样式灰色背景，圆角，定位等
[Asm] 纯文本查看 复制代码 .set-1 {
margin: 30upx;
}
.set-2 {
background-color: #c6c6c6;
height: 300upx;
border-radius: 10upx;
width: 600upx;
margin-left: 100upx;
margin-top: 60upx;
position: relative;
}
2.引入阿里图标文件直接在线方式引入，H5下是可以的，但是在小程序下回报错，TM的
[Asm] 纯文本查看 复制代码 [url=home.php?mod=space&uid=476974]@import[/url] url("//at.alicdn.com/t/font_1337773_robb7hmlk9o.css");
复制地址到浏览器打开得到文件，直接复制到style中i，或者下载图标文件，因为就一点枫瑞就直接复制了
[Asm] 纯文本查看 复制代码 @font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
/* IE9 */
src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuandian:before {
content: "\e64d";
}
.icon-dingweiweizhi:before {
content: "\e619";
}
3.写头部位置图标
[Asm] 纯文本查看 复制代码 .set-2::before {
content: "\e619";/* 必须存在如果没有图标就留空 */
color: #c6c6c6;/* 设置颜色 */
position: absolute;/* 定位 */
left: -108upx;/* 移动到左边 */
font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
font-size: 54upx;/* 图标大小 */
font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
4.中间的横线[Asm] 纯文本查看 复制代码 .set-2::after {
content: '';/* 必须存在如果没有图标就留空 */
top: 24%;/* 定位 距离*/
border-left: #c6c6c6 1px solid;/* 横线颜色 */
left: -82upx;/* 定位 距离*/
height: 90%;/* 高度 */
position: absolute;/* 定位 */
}
5.设置末尾最后一个的时候删除横线
[Asm] 纯文本查看 复制代码 .set-2:last-child::after {
display: none;
}
相关源码下载：码云：https://gitee.com/fengruiblog/steps/tree/master
垃圾盘：链接: https://pan.baidu.com/s/1oES5jLY97A_qsjYZQuoKcw 提取码: uip2
| 
发表于 2019-8-19 09:05
|
发表于 2019-8-19 10:44
