1、html语义化
(1)、让人更容易读懂（增加代码可读性） (2)、让搜索引擎更容易读懂(SEO)
// 无语义
<div>标题</div>
<div>
<div>一段文字</div>
<div>
<div>列表1</div>
<div>列表2</div>
</div>
</div>
// 有语义
<h1>标题</h1>
<div>
<p>一段文字</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>
2、块状元素和内联元素和内联块状元素
块状元素 display：block/table，div、h1、h2、table、ul、ol、p，独占一行，宽高、行高、内边距、外边距都可以控制，宽度默认是容器的100%
内联块状元素 display: inline-block, img、input等，和相邻元素在同一行，但是中间会有间隙，宽高、行高、内边距、外边距都可以控制，默认宽度是本身内容的宽度
内联元素 diaplay：inline， a、span、i等，和相邻行内元素在同一行，但是中间会有间隙，宽高无效，水平方向padding和margin有效，垂直方向无效。默认宽度是它本身内容的宽度
3、盒模型（谷歌浏览器默认是w3c盒模型）
我们常会用box-sizing：border-box 宽度包括content+padding+border，这种叫IE盒模型怪异盒模型不是谷歌默认盒模型
w3c盒模型 元素样式属性width是这个元素content的宽度 contentWidth
IE盒模型 元素样式属性的width是这个元素总体的宽度 contentWidth+padding+border
标准盒模型（content-box）一开始是 W3C 标准，那时候就只有这一种模式，还没有 box-sizing 属性。IE 觉得怪异盒模型（border-box）好，导致和其他浏览器表现不一致。 先不说哪种模型好，但 IE 没有遵守标准，给开发者带来困扰，这个是不对的。
后来 W3C 可能觉得 IE 这个模型还是不错的，追加了 box-sizing 属性，让开发者自行选择喜欢的模型。
对我来说，我还是倾向于使用 content-box，可以少写一个 box-sizing: border-box。我的 padding 有时候会充当 margin 用，用来 hack margin 会重叠的问题。
当然也看设计稿，设计稿给一个块应用了向内的边框，我懒得算，或者这个块是自适应的，我就会用 border-box。
有如下的 HTML 和 CSS 样式，问两个块橙色区域宽高分别为多少？
<style>
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.content-box {
box-sizing: content-box;这种模式是w3c盒模型，谷歌浏览器默认是w3c盒模型
}
.border-box {
box-sizing: border-box;//这种模式是IE盒模型的效果含boder
}
</style>
<div class="box content-box"></div> 14px width+padding
<div class="box border-box"></div> 8px width-border
offsetWidth = contentWidth+padding+border
4、margin
margin纵向重叠：相邻的元素的margin-top和margin-bottom会发生重叠，空白的内容<p></p>也会重叠
margin-top和margin-left为负值自身向上向左移动，margin-right为负值右边的元素项左移动，margin-bottom为负值下面的元素向上移动
5、BFC
block format context 块级格式化上下文 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的条件 （1）、float不是none （2）、position是absolute或者fixed （3）、overflow不是visible （4）、display是flex、inline-block
BFC常见应用
清除浮动
// img浮动以后会脱离文档流，不会把container充开，给container添加BFC，img就会在container内部
<style>
.container{
padding: 10px;
}
.bfc{
overflow: hidden;
}
.img{
float: left;
width: 100px;
height: auto;
}
</style>
<body>
<div class="container bfc">
<img class="img" src='./2.jpg'>
<p class="bfc">经济纠纷</p>
</div>
</body>
布局
三栏布局，两边两栏固定，中间栏随着缩放宽度可调节 （flex布局，圣杯布局，双飞翼布局, float, margin,padding）
// flex布局
<style>
.container{
display: flex;
}
.middle{
flex: 1;
background: pink;
height: 100%;
}
.left{
order:-1;
flex: 0 0 200px;
width: 200px;
height: 50%;
background: green;
}
.right{
flex: 0 0 150px;
width: 150px;
height: 50%;
background: green;
}
</style>
<body>
<div class="container">
<div class="middle">
middle
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
// 圣杯布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
font-size: 20px;
line-height: 200%;
}
p{
font-size: 16px;
}
.container{
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.column{
float: left;
}
.center{
width: 100%;
background: pink;
}
.left{
width: 200px;
background: yellowgreen ;
margin-left: -100%;
position: relative;
right: 200px;
}
.right{
width: 150px;
margin-right: -150px;
background:green;
}
</style>
</head>
<body>
<div class='header'>header</div>
<div class="container">
<div class = 'column center'>center</div>
<div class = 'column left'>left</div>
<div class = 'column right'>right</div>
</div>
<div class='footer'>footer</div>
</body>
</html>
clearfix
<style>
.wrap{
margin:10px;
background: pink;
}
.col{
float: left;
}
/*在wrapdiv里面添加一个伪元素*/
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
<body>
<div class="wrap clearfix">
<div class = 'col'>
123
</div>
<div class = 'col'>456</div>
</div>
</body>
flex
容器属性
flex-direction
justify-content 水平
align-items
子元素属性
flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self 水平对齐
6、定位
relative相对自身定位，对外界不会有影响 absolute依据父元素里最近一层定位元素定位，定位元素包括有relative、absolute、fixed属性的元素、body
position: sticky粘性定位 粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 例如 div写成的表格头部固定 左侧列固定
.table {
.row {
&:first-child { // class是row的元素中的第一个
position: sticky;
top: 0;
z-index: 10;
}
}
居中对齐
水平居中 inline元素 text-align：center block元素 margin：auto absolute元素：left：50% + margin-left负值（已知元素的宽度）
垂直居中 inline元素 line-height的值等于height的值 absolute元素 top：50% + margin-top负值或者top:50%+translateY（-50%）或者left、top、right、bottom都为0+margin：auto translate相对于自己
7、line-height的继承
（1）、写具体数值，如30px，则继承该值 （2）、写比例，如2/1.5，则继承该比例 （3）、写百分比，如200%，则继承计算出来的值
<head>
<title></title>
<style type="text/css">
body{
font-size: 20px;
line-height: 200%;
}
.p{
font-size: 16px;
}
</style>
</head>
<body>
<p>我我我我我我哦我的行高是40px</p>
</body>
8、响应式
rem是一个长度单位 （1）px，绝对长度单位，最常用 （2）em，相对长度单位，相对于父元素，不常用 （3）rem，相对长度单位，相对于根元素，常用于响应式布局
<head>
<title></title>
<style type="text/css">
html{
font-size: 50px;
}
body{
font-size: 40px;
}
p{
font-size: 1rem;
}
</style>
</head>
<body>
<p style="width:10rem">我的字体只相对于html根元素，我50px</p>
</body>
响应式布局常用的方案 media-query根据不同的屏幕宽度设置跟元素font-size+rem基础根元素的相对单位
<style>
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以iphone5的宽度（320px）比例设置font-size */
html{
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width:413px) {
/* iphone6/7/8/x */
html{
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大宽度 */
html{
font-size: 110px;
}
}
body{
font-size: 0.16rem;
}
</style>
网页视口尺寸
window.screen.height //屏幕的高度 手机或电脑显示屏幕的高度 包括浏览器头部地址和底部操作栏
window.innerHeight //网页视口高度 网页去掉浏览器头尾 vh网页视口高度的1/100，vw网页视口宽度的1/100，用vw，vh也可以做响应式布局
document.body.clientHeight // body的高度，可以很短也可以很长
做大屏
屏幕大小 19201080 1440900
浏览器有头部 所以我们的浏览器看到的只有1920900多 这是不准的 按照设计稿19201080做出来的高度会超出屏幕 不过在mobile模式1920*1080会正好还原设计稿
用rem vh vm 或 scale都各有利弊，没有完美的，尺寸特别不同的大屏 要为每个大屏做个设计写一份代码
大屏最后两侧最后一个模块side-item 为列表 可以用div写列表
.side-item {
flex: 1;
height: 100%
overflow: hidden
内部div
height: 100%
overflow: scroll
}
window.requestAnimationFrame()
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
const element = document.getElementById('some-element-you-want-to-animate');
let start;
function step(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
//这里使用`Math.min()`确保元素刚好停在200px的位置。
element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
if (elapsed < 2000) { // 在两秒后停止动画
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
页面切换时响应事件
addEventListener第三个参数 默认是false
捕获（true）：从启动事件的元素节点开始，`逐层往下`传递（类似向下捕获东西）
冒泡（false）：`逐层向上`依序被触发（类似浮起来的气泡）
// .vue文件
created() {
this.search();
document.addEventListener('visibilitychange', this.reflaseRiskList);
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.reflaseRiskList);
},
页面窗口大小改变时改变某个元素的宽高
// .vue文件
created() {
this.queryAppList();
this.resize();
window.addEventListener('resize', this.resize);
},
beforeDestroy() {
window.removeEventListener('resize', this.resize);
},
methods: {
resize() {
const self = this;
this.$nextTick(function () {
const boxCardHeight = self.$refs.boxCard.$el.clientHeight;
const boxCardWidth = self.$refs.boxCard.$el.clientWidth;
self.$refs.treeWrap.style.width = boxCardWidth - 10 + 'px';
self.$refs.treeWrap.style.height = boxCardHeight - 70 + 'px';
});
}
}
改变引入局部组件的样式，引入组件在当前组件中
写在scope样式中
当前class /deep/要改变组建的class
// 如改变sc-select的样式 可以再sc-select上写一个class
<sc-select
class="route-select"
popper-class="route-select"
v-model="routeInfo.id"
@change="selectRoute"
>
<sc-option
v-for="route in routeList"
:key="route.id"
:label="route.name"
:value="route.id"
>
</sc-option>
</sc-select>
<style lang="scss" scoped>
当前样式 /deep/要改变组建的样式 注意：/deep/ 后面有空格
.route-select /deep/ .sc-input--small .sc-input__inner{
font-family: 'YouSheBiaoTiHei';
font-style: normal;
font-weight: 400;
font-size: 0.24rem;
// line-height: 0.6rem;
letter-spacing: 0.05em;
color: #00FEFE;
cursor: pointer;
border: 0;
}
.route-select /deep/.sc-icon-arrow-up:before {
content: url('~@GW/assets/images/arrow-down.png');
color: #fff;
}
.route-select /deep/.sc-select__caret {
font-size: 30px;
}
.path-list {
width: 3.43rem;
height: 0.44rem;
padding-left: 0.62rem !important;
background: url('~@GW/assets/images/select-path-bg.png') no-repeat center/contain;
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
/deep/ .sc-select{
width: 2.8rem;
height: 0.24rem;
.sc-input__inner {
color: rgba(0, 254, 254, 1);
}
}
}
</style>
<style lang="scss">
.route-select.sc-popper {
.sc-select-dropdown__item {
font-family: 'YouSheBiaoTiHei';
font-size: 0.2rem;
font-weight: 400;
}
}
</style>
改变全局组建样式 如select的选择框是挂在body上的，而非当前组件内部
<style lang="scss">
.sc-popper {
background: linear-gradient(180deg, rgba(1, 38, 79, 0) 0%, rgba(1, 38, 79, 0.6) 33.33%, rgba(1, 38, 79, 0.6) 70.83%, rgba(1, 38, 79, 0) 100%) !important;
.sc-select-dropdown__list {
background: transparent !important;
}
}
.sc-select-dropdown__item {
background: transparent !important;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.sc-select-dropdown__item:hover{
background: linear-gradient(90deg, rgba(105, 192, 255, 0) -2.4%, rgba(105, 192, 255, 0.4) 49.33%, rgba(105, 192, 255, 0) 100%) !important;
}
.sc-select-dropdown__item.selected{
background: linear-gradient(90deg, rgba(105, 192, 255, 0) -2.4%, rgba(105, 192, 255, 0.4) 49.33%, rgba(105, 192, 255, 0) 100%) !important;
color: rgba(0, 254, 254, 1) !important;
}
.sc-select-dropdown .popper__arrow {
display: none !important;
}
// popper-class input select tooltip datapicker timepick tooltip popover 等有悬浮框的都用这个,不用scope
<sc-tooltip popper-class="tool-tip" content="配置为0，立刻下发绿波方案，在锁定时间内持续运行； 配置为非0，配置时间后线路首路口协调相位运行绿灯，且线路执行绿波方案。" placement="top">
<i class="tip-icon sc-icon-question"></i>
</sc-tooltip>
<style lang="scss">
.tool-tip {
color: #fff !important;
background: rgba(43, 104, 197, 0.5) !important;
border: 0.02rem solid rgba(0, 254, 254, 1) !important;
border-radius: 0;
.popper__arrow {
border-bottom-color:rgba(0, 254, 254, 1) !important;
border-top-color:rgba(0, 254, 254, 1) !important;
}
}
</style>
scss 中 &为外层元素自己
// class="sc-select-dropdown sc-popper custom-select"
.custom-select{
background: linear-gradient(180deg, rgba(1, 38, 79, 0) 0%, rgba(1, 38, 79, 0.6) 33.33%, rgba(1, 38, 79, 0.6) 70.83%, rgba(1, 38, 79, 0) 100%) !important;
&.sc-popper { // custom-select和sc-popper 同级 生效
// & .sc-popper custom-select是sc-popper 父级 不生效
// & .sc-select-dropdown__list生效
.sc-select-dropdown__list {
backdrop-filter: blur(3px);
background: transparent !important;
}
el-table高度自适应
设置父元素高度100%，再在el-table上设置height="100%" table的高度可以写px也可以rem
<div class="temporary-plan-table">
<sc-table
ref="phaseTable"
:data="phase_timing_paras"
row-key="num_phase"
height="100%"
class="drag-table"
header-row-class-name="temporary-plan-table-header-row"
row-class-name="temporary-plan-table-row"
>
el-table宽度自适应 min-width做宽度自适应
min-width='100'
表格序号列 width 写死 其他min-width都写上自适应
gap: row-gap column-gap;
flex布局和grid布局都可以用gap，否则gap不生效
.grid-container { gap: 20px 50px; }
设置网格布局中行之间的间隙大小
设置网格布局中列之间的间隙大小
Positon absolute 如果父层级 或父父层级有overflow hidden 里面的元素如果超出就看不到了，如果没有设置overflow hidden 子元素超出也会展示 如果设置了overflow auto 超出会展示滚动条
边框渐变 Border-image
四个拐角的大小由border固定 不会改变 其他上 左 下 右框中间的部分拉伸
原图大小是81X81px slice npx 就在原图上截取npx大小 然后通过放大占满整个拐角 其他没截到的部分 用于填边框中间拉伸 如果n大于原图大小 取原图大小
<div
class="router-child-item"
>
<div class="router-child-item-name">test</div>
</div>
.router-child-item {
display: flex;
align-items: center;
height: 0.4rem;
box-sizing: border-box;
padding-left: 0.36rem;
border: 1px solid transparent;
background: linear-gradient(
90deg,
rgba(0, 87, 255, 0) 0%,
rgba(0, 87, 255, 0.2) 49.64%,
rgba(0, 87, 255, 0) 100%
);
font-family: 'Noto Sans SC';
font-style: normal;
font-weight: 400;
font-size: 0.14rem;
cursor: pointer;
&.active,
&:hover {
background: linear-gradient(
90deg,
rgba(0, 87, 255, 0) 0%,
rgba(0, 87, 255, 0.5) 49.64%,
rgba(0, 87, 255, 0) 100%
);
border-image: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 0) 49.78%,
#ffffff 100%
)
1;
}
&-name {
background: linear-gradient(
180deg,
#ffffff 0.87%,
#ffffff 35.68%,
#0057ff 127.27%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
}
.factory {
position: absolute;
left: 0.1rem;
display: inline-block;
padding: 0 0.08rem;
border: 0.01rem solid transparent;
border-radius: 0.05rem;
background: rgba(0, 194, 255, 0.2);
border: 0.02rem solid;
border-image: linear-gradient(
180deg,
rgba(0, 194, 255, 0) 0%,
#00c2ff 49.73%,
rgba(0, 194, 255, 0) 100%
)
1;
height: 0.2rem;
line-height: 0.16rem;
.name {
font-family: Noto Sans SC;
font-size: 0.14rem;
text-align: center;
background: linear-gradient(180deg, #fff 0%, #00c2ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
背景渐变,多个背景图片
background: linear-gradient(90deg, rgba(57, 184, 255, 0) 0%, rgba(69, 188, 255, 0.5) 47.86%, rgba(57, 184, 255, 0) 100%);
background-image:
linear-gradient(90deg, #00FEFE),
linear-gradient(90deg, #002450),
linear-gradient(90deg, #00FEFE);
background-position: calc(0.5rem - 1px) 0, 0 1px, calc(0.5rem - 1px) 100%;
background-size: calc(100% - 0.5rem + 1px) 1px, 100% calc(100% - 2px), calc(100% - 0.5rem + 1px) 1px;
background-repeat: no-repeat;
border-right: 1px solid #00FEFE;
linear-gradient
文字渐变
background-image: linear-gradient(180deg, #FFFFFF 30.95%, #00C2FF 69.05%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
毛玻璃效果
backdrop-filter: blur(3px);
linear-gradient 画出来的充当image
tooltip和popover
tooltip和popover class不-样
Tooltip 背景不透明
popover class 背景改写了 透明
也可以自己写div 根据鼠标的移动改写div的位置
边框渐变
.os-card {
width: 100%;
height: 100%;
min-height: 200px;
border-radius: 0.08rem;
display: flex;
flex-direction: column;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to bottom, #031f5c, #031f5c),
linear-gradient(to bottom, #10a9ff, rgba(16, 169, 255, 0.2));
组件最外层最好不写margin，可以在父组件内部写padding
一个组件最外层不写margin 可以在父组件内些padding 方便调节位置 如果设置了padding后里面超出的内容不好处理，可以改成设置margin
大屏的左右两侧的模块 一个模块不固定宽度或高度 让其可以自适应
不固定宽度 flex：1 其余固定 一行其中一个写flex：1自适应 其他写固定宽度flex 0 0 4.12rem 如果flex 0 0 4.12rem不管用 可以用calc（100% - xxrem）
大用百分比 小用rem 大的 百分比-rem
布局细节
图片切下来有margin，和在设计稿上量出来的距离周边元素margin不一样，注意调整
Overflow-y auto 滚动条出来时会占有宽度 会导致宽度有问题 原来的宽度适当留出滚动条的位置
stylus
<style scoped lang="stylus">
size(width, height = width) //size是自己定义的
width width
height height
.example
size 0.5rem
.sc-cascader-menu
border-right 1px solid
border-image linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(105, 192, 255, 0.6) 50%, rgba(255, 255, 255, 0) 99%) 2 2 2 2 // 2 2 2 2要在一行 换行可能不生效
iconfont
Iconfont
/Users/mahong/workspace/tccs-pro/src/common/assets/iconfont/demo_index.html
iconfont.css font-family: "iconfont";
icosfont
/Users/mahong/workspace/tccs-pro/src/common/styles/fonts/icosfont/demo_index.html
// fonts.css
/* 自定义字体 */
@font-face {
font-family: 'icosfont';
src: url('icosfont/iconfont.woff2?t=1621823197382') format('woff2'),
url('icosfont/iconfont.woff?t=1621823197382') format('woff'),
url('icosfont/iconfont.ttf?t=1621823197382') format('truetype');
}
.icosfont {
font-family: 'icosfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
import '@/common/styles/fonts/fonts.css'
rem
// 根据分辨率自适应
function font() {
const width = document.documentElement.clientWidth;
if (width > 1920) {
document.documentElement.style.fontSize = '100px'
} else if (width <= 1920 && width > 1440) {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 19.2 + 'px'
} else if (width <= 1440) {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 14.4 + 'px'
}
}
font()
window.onresize = font
给背景设置大小 屏幕改变背景不会变形
.card-content {
position: absolute;
width: 100%;
height: 100%;
background-image: url('~@SM/assets/images-ningbo/equip-monitor-bg.png'), url('~@SM/assets/images-ningbo/equip-monitor-icon.png');
background-repeat: no-repeat,no-repeat;
background-position: center top,center 0.7rem;
background-size: 7.11rem 3.96rem, 2.97rem 2.92rem;
> div{
height: 100%;
width: 100%;
}
修改element-ui组件样式
看一下组件文档 有些样式是通过属性展示的 比如斑马纹
.sc-table__row.sc-table__row--striped td {
background: rgba(0, 87, 255, 0.1);
}
.sc-table {
background: none !important;
&::before {
display: none;
}
.cell {
font-family: "Noto Sans SC";
font-style: normal;
font-weight: 400;
text-align: center;
color: #ffffff;
}
thead tr {
background: rgba(0, 87, 255, 0.2) !important;
th {
background: none;
&.is-leaf {
border-bottom: none;
}
.cell {
font-size: 0.16rem;
}
}
}
.sc-table__body-wrapper ::-webkit-scrollbar-corner {
background: none;
}
.sc-table__body {
.sc-table__row {
background: none;
td {
border-bottom: 1px solid rgba(0, 78, 165, 1) !important;
}
.cell {
font-size: 0.14rem;
}
&.current-row > td {
background-color: #0057ff4d !important;
}
}
.sc-table__row.sc-table__row--striped td {
background: rgba(0, 87, 255, 0.1);
}
}
tbody tr:hover > td,
.sc-table__fixed-body-wrapper tbody tr:hover > td,
.sc-table__row.hover-row > td {
background-color: #0057ff4d !important;
}
.sc-table__fixed::before {
display: none;
}
.sc-table__body-wrapper .sc-table__empty-block {
flex-direction: column;
gap: 0.24rem;
&::before {
content: "";
display: block;
width: 2.4rem;
height: 2.4rem;
background: url("/os-assets/componentsImages/empty.png") no-repeat
center/contain;
}
.sc-table__empty-text {
font-family: "Noto Sans SC";
font-style: normal;
font-weight: 400;
font-size: 0.18rem;
line-height: 0.22rem;
color: rgba(255, 255, 255, 0.6);
}
}
}
step组件
process 样式往上提
普通一套 process进行中的一套
&.sc-steps {
.step-icon {
width: 0.16rem !important;
height: 0.16rem !important;
background: url('~@SM/assets/images-ningbo/step-normal.png') center/ 0.16rem 0.16rem;
border: 0 !important;
box-shadow: none;
}
.sc-step__line {
top: 0.12rem !important;
background: transparent !important;
height: 0px !important;
border-top: 1px dashed #256efd !important;
.sc-step__line-inner {
border-color: transparent !important;
}
}
.sc-step__title {
font-family: "Noto Sans SC" !important;
font-size: 0.16rem !important;
color: rgba(255, 255, 255, 0.8) !important;
}
.is-process {
.step-icon {
width: 0.16rem !important;
height: 0.16rem !important;
background: url('~@SM/assets/images-ningbo/step-process.png') center/ 0.16rem 0.16rem;
border: 0 !important;
box-shadow: none;
}
&.sc-step__title {
background: linear-gradient(180deg, #FFF 0%, #FFA826 100%) !important;
background-clip: text !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
}
}
更改sc-input的高度 要改sc-input__inner
/deep/ .sc-input-number {
width: 1.04rem;
height: 0.43rem;
border-radius: 0.06rem;
background: rgba(0, 87, 255, 0.2);
.sc-input-number__decrease, .sc-input-number__increase {
display: none;
}
.sc-input__inner {
width: 0.83rem;
height: 0.43rem;
border-radius: 0.06rem;
background: rgba(0, 87, 255, 0.2);
padding: 0.02rem 0.14rem 0.02rem 0.02rem;
font-family: 'D-DIN-PRO';
font-size: 0.36rem;
font-weight: 600;
text-align: center;
color: rgba(255, 255, 255, 1);
border:0;
}
}
Cascader
级联 v-model 可以是数组 也可以选中的id emitPath 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
CascaderPanel 可以拿出来单独用
Cascader中可以用slot改交互
vh
vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
hsla
background-color: hsla(240,50%,50%,0.4);
解释：
H色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。S饱和度，取值范围 0%~100%。值越大，越鲜艳。L亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。A透明度，取值范围 0~1。
H 的值该设置多少，我们来看一下色盘：
animation
默认播放结束会回到初始状态
箭头移动效果
@keyframes moveToLeft {
from {
background: url('~@/assets/images/plan/roadBgUp.png'), #eefff2;
background-size: auto 0.61rem;
background-repeat: repeat no-repeat; // x轴repeat
background-position: 7120px center; // 开始位置1000 2000 都行 120s走完速度会慢一些
}
to {
background: url('~@/assets/images/plan/roadBgUp.png'), #eefff2;
background-size: auto 0.61rem;
background-repeat: repeat no-repeat;
background-position: 0 center;
}
}
.up-road-wrap {
animation: moveToLeft 120s linear infinite; // 无限循环 加上x轴repeat的效果 看起来就是一直滚动
}
transition
他们虽然都可以做出动画效果，但是transition主要做简单的过渡效果，而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。
transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画，过渡只有一组（两个：开始-结束）关键帧。
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画（设置多个关键帧）。
详细解析：
/* 应用于1个属性 */
/* 属性值 | 持续时间 */
transition: margin-right 4s;
/* 属性值 | 持续时间 | 延迟 */
transition: margin-right 4s 1s;
/* 属性值 | 持续时间 | 持续时间 | 动画效果 */
transition: margin-right 4s ease-in-out;
/* 属性值 | 持续时间 | 动画效果 | 延迟 */
transition: margin-right 4s ease-in-out 1s;
/* 同时应用2个属性*/
transition: margin-right 4s, color 1s;
/* 应用于所有属性 | 持续时间 | 动画效果 */
transition: all 0.5s ease-out;
/* 全局变量 */
transition: inherit;
transition: initial;
transition: unset;
left: 0;
transition: all 0.3s ease-in;
&.hidden {
left: -4.8rem;
}
animation-属性：
/* 持续时间 | 动画效果 | 延迟 | 重复次数 | 方向 | 过渡方式 | 是否暂停 | 动画名 */
animation: 3s ease-in 1s 2 reverse both paused xxx; /* 持续时间 | 动画效果 | 延迟 | 动画名
*/ animation: 3s linear 1s xxx; /* 持续时间 | 动画名 */ animation: 3s xxx;
例子用上面的animation
v-popover:isPopover
在for循环中写 v-popover:isPopover 不生效
<div
v-show="transitionalType"
v-popover:isPopover
@click="changeVisible"
class="transition-name underline">
{{ transitionalType | transitionalTypeFilter }}
</div>
<sc-popover
v-model="visible"
:visible-arrow="false"
manual
ref="isPopover"
placement="top"
width="1.56rem"
popper-class="signal-plan-transitional-plan">
<div class="content">
<div class="date">{{ transitionalInfo.date_time }}</div>
<div class="operation">{{ transitionalInfo.operation }}</div>
<div class="item">
<span class="label">来源：</span>
<span class="value">{{ transitionalInfo.source }}</span>
</div>
<div class="item">
<span class="label">用户：</span>
<span class="value">{{ transitionalInfo.user }}</span>
</div>
</div>
</sc-popover>
