业务线B/C端业务组件总结

/**
* 业务线组件总结
* */
/* B端组件的总结
1、组件cssBase的总结
1像素底部边框 */
@mixin border - 1px - b($background: $gray - lightest) {
content: '';
display: block;
200 %;
height: 1px;
background: $background;
-webkit - transform: scale(0.5);
transform: scale(0.5);
-webkit - transform - origin: 0 1px;
transform - origin: 0 1px; // 属性允许您改变被转换元素的位置 x,y,z
position: absolute;
left: 0;
bottom: 0;
z - index: 10;
}

/*
*css_base_cssBase &_扩展
*/
.css_base {
&_cssBase {
box - shadow: h - shadow v - shadow blur spread color inset; // 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色
position: relative;
@include border - 1px - b();
}
}

/*
* cssThemeB
* @desc 主题包括{bg,color,font-size}
* 学习要点----为了方便字体的扩展,封装成单独的对象
*/
let themeConfig= {
bg: [ {
class: 'bg-toast',
name: '遮罩层背景色'
}

],
color:[ {
class: 'color-title',
name: '主标题色'
}

],
font-color:[ {
class: 'font-sz',
name: '主标题色'
}

]
}

/*
* cssIconB 图标进行转化字体方式引用---base64---可以转化、支持多种格式
*/
# iconfonts

本文件夹用来处理图标字体相关,

## svg转字体库

使用icommon网站,进行图标转化
网址:https://icomoon.io

转出的字体库包括eot、svg、ttf、woff、json文件

## 字体库使用

字体库使用dataUrl的形式嵌入到iconfonts.css中。

字体文件转base64网址(https://www.motobit.com/util/base64-decoder-encoder.asp)

## 字体库更新

文件夹中包含selection.json文件,可以放入icomoon中,还原当前字体文件
/*
* 基础组件技术总结
*/
原文地址:https://www.cnblogs.com/yayaxuping/p/10267879.html