You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
8.3 KiB
458 lines
8.3 KiB
/** |
|
* Author: wangshuai |
|
* Create Time: 2018-03-09 15:38 |
|
* Description: flex 弹性盒子 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html |
|
*/ |
|
|
|
/** |
|
Flex Direction 决定主轴的方向（即项目的排列方向） |
|
*/ |
|
//主轴为水平方向，起点在左端。 |
|
.flex-row { |
|
flex-direction: row; |
|
} |
|
|
|
//主轴为水平方向，起点在右端。 |
|
.flex-row-reverse { |
|
flex-direction: row-reverse; |
|
} |
|
|
|
//主轴为垂直方向，起点在上沿。 |
|
.flex-col { |
|
flex-direction: column; |
|
} |
|
|
|
//主轴为垂直方向，起点在下沿。 |
|
.flex-col-reverse { |
|
flex-direction: column-reverse; |
|
} |
|
|
|
/** |
|
Flex Wrapping 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 |
|
item是否折行 |
|
*/ |
|
//（默认）：不换行。 |
|
.flex-no-wrap { |
|
flex-wrap: nowrap; |
|
} |
|
|
|
//换行，第一行在上方。 |
|
.flex-wrap { |
|
flex-wrap: wrap; |
|
} |
|
|
|
//换行，第一行在下方。 |
|
.flex-wrap-reverse { |
|
flex-wrap: wrap-reverse; |
|
} |
|
|
|
/** |
|
Align Items 定义项目在交叉轴上如何对齐 |
|
*/ |
|
// （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 |
|
.items-stretch { |
|
align-items: stretch; |
|
} |
|
|
|
// 交叉轴的起点对齐。 |
|
.items-start { |
|
align-items: flex-start !important; |
|
} |
|
|
|
// 交叉轴的中点对齐。 |
|
.items-center { |
|
align-items: center !important; |
|
} |
|
|
|
// 交叉轴的终点对齐。 |
|
.items-end { |
|
align-items: flex-end !important; |
|
} |
|
|
|
// 项目的第一行文字的基线对齐。 |
|
.items-baseline { |
|
align-items: baseline !important; |
|
} |
|
|
|
/** |
|
Align Content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 |
|
*/ |
|
//与交叉轴的起点对齐。 |
|
.content-start { |
|
align-content: flex-start; |
|
} |
|
|
|
//与交叉轴的中点对齐。 |
|
.content-center { |
|
align-content: center; |
|
} |
|
|
|
//与交叉轴的终点对齐。 |
|
.content-end { |
|
align-content: flex-end; |
|
} |
|
|
|
//与交叉轴两端对齐，轴线之间的间隔平均分布。 |
|
.content-between { |
|
align-content: space-between; |
|
} |
|
|
|
//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 |
|
.content-around { |
|
align-content: space-around; |
|
} |
|
|
|
/** |
|
Align Self ?属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */ |
|
.self-auto { |
|
align-self: auto; |
|
} |
|
|
|
.self-start { |
|
align-self: flex-start; |
|
} |
|
|
|
.self-center { |
|
align-self: center; |
|
} |
|
|
|
.self-end { |
|
align-self: flex-end; |
|
} |
|
|
|
.self-stretch { |
|
align-self: stretch; |
|
} |
|
|
|
/** |
|
Justify Content 定义了项目在主轴上的对齐方式；box 属性 控制flex 内部item的对齐方式 类似 text-align。 |
|
默认水平内容布局 |
|
内容对齐 |
|
*/ |
|
//（默认值）：左对齐 |
|
.justify-start { |
|
justify-content: flex-start; |
|
} |
|
|
|
//居中 |
|
.justify-center { |
|
justify-content: center; |
|
} |
|
|
|
//右对齐 |
|
.justify-end { |
|
justify-content: flex-end; |
|
} |
|
|
|
//两端对齐，项目之间的间隔都相等 |
|
.justify-between { |
|
justify-content: space-between; |
|
} |
|
|
|
//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 |
|
.justify-around { |
|
justify-content: space-around; |
|
} |
|
|
|
/** |
|
Flex, Grow, & Shrink 待确定 |
|
*/ |
|
.flex-initial { |
|
flex: initial; |
|
} |
|
|
|
// 响应式弹性盒子 |
|
.flex-1, |
|
.layout-box-responsive { |
|
flex: 1; |
|
} |
|
|
|
.flex-auto { |
|
flex: auto; |
|
} |
|
|
|
.flex-none { |
|
flex: none; |
|
} |
|
|
|
.flex-grow { |
|
flex-grow: 1; |
|
} |
|
|
|
.flex-shrink { |
|
flex-shrink: 1; |
|
} |
|
|
|
.flex-no-grow { |
|
flex-grow: 0; |
|
} |
|
|
|
.flex-no-shrink { |
|
flex-shrink: 0; |
|
} |
|
|
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
// 特性封装 |
|
|
|
// 给要自动伸缩的flex-item |
|
.layout-box-responsive { |
|
flex: 1 !important; |
|
overflow: hidden !important; |
|
word-wrap: break-word !important; |
|
white-space: normal !important; |
|
} |
|
|
|
//垂直内容布局 |
|
/*垂直居中 // 交叉轴的起点对齐。加display-flex 同级元素*/ |
|
.layout-items-center { |
|
align-items: center !important; |
|
} |
|
|
|
// 横向的弹性盒子 |
|
.layout-box-horizontal { |
|
width: 100%; |
|
display: flex; |
|
align-items: stretch; |
|
box-sizing: border-box; |
|
|
|
> .layout-box-responsive { |
|
width: 0; |
|
} |
|
|
|
> div { |
|
line-height: 1; |
|
} |
|
} |
|
|
|
// 竖向的弹性盒子 |
|
.layout-box-vertical, |
|
.flex-block-height { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: stretch; |
|
box-sizing: border-box; |
|
|
|
> .layout-box-responsive { |
|
//height: 0; |
|
} |
|
|
|
> div { |
|
line-height: 1; |
|
} |
|
} |
|
|
|
//智慧屏标题 |
|
.zhp-title { |
|
height: 110px; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
width: 100vw; |
|
position: relative; |
|
} |
|
|
|
//智慧屏标题 |
|
.zhp-title-text { |
|
margin-top: 4px; |
|
color: #ffffff; |
|
font-size: 40px; |
|
} |
|
|
|
//card列表父布局 |
|
.zhp-item-bg { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 24px; |
|
flex-wrap: wrap; |
|
} |
|
|
|
//智慧屏背景 |
|
.base-bg { |
|
flex-direction: column; |
|
position: relative; |
|
background-image: url("@/assets/imgs/show/bg_timing.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
height: 100vh; |
|
width: 100vw; |
|
//智慧右侧图片 |
|
.rightImg { |
|
width: 48px; |
|
height: 48px; |
|
position: absolute; |
|
right: 24px; |
|
} |
|
|
|
//智慧屏返回键 |
|
.leftImg { |
|
width: 48px; |
|
height: 48px; |
|
position: absolute; |
|
left: 24px; |
|
} |
|
|
|
.bottom-s-c { |
|
left: 24px; |
|
right: 24px; |
|
position: absolute; |
|
bottom: 0; |
|
flex-wrap: wrap; |
|
display: flex; |
|
justify-content: space-between; |
|
padding-top: 30px; |
|
padding-bottom: 30px; |
|
background-color: rgba($color: #0A101A, $alpha: 0.7); |
|
|
|
.bottom-s { |
|
margin-left: 20px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
color: #ffffff; |
|
font-size: 40px; |
|
font-weight: 400; |
|
width: 326px; |
|
height: 110px; |
|
background-image: url("@/assets/imgs/show/bg_btn_blue.png"); |
|
} |
|
|
|
.bottom-c { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
color: #ffffff; |
|
font-size: 40px; |
|
font-weight: 400; |
|
width: 326px; |
|
height: 110px; |
|
background-image: url("@/assets/imgs/show/bg_btn_gray.png"); |
|
} |
|
} |
|
|
|
// 横向的弹性盒子 |
|
.zhp-horizontal { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
} |
|
|
|
.zhp-vertical { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.zhp-img-30 { |
|
width: 30px; |
|
height: 30px; |
|
} |
|
|
|
.zhp-img-60 { |
|
width: 60px; |
|
height: 60px; |
|
} |
|
|
|
.zhp-img-66 { |
|
width: 66px; |
|
height: 66px; |
|
} |
|
.zhp-text-24-white-alpha40 { |
|
color: rgba($color:#ffffff,$alpha:0.4); |
|
font-size: 24px; |
|
font-weight: 400; |
|
} |
|
.zhp-text-28-white { |
|
color: #fff; |
|
font-size: 28px; |
|
font-weight: 400; |
|
} |
|
|
|
.zhp-text-30-white { |
|
color: #fff; |
|
font-size: 30px; |
|
font-weight: 400; |
|
} |
|
|
|
.zhp-text-32-white { |
|
color: #fff; |
|
font-size: 32px; |
|
font-weight: 400; |
|
} |
|
.zhp-text-34-white-alpha50 { |
|
color: rgba($color:#ffffff,$alpha:0.5); |
|
font-size: 34px; |
|
font-weight: 400; |
|
} |
|
.rightImg { |
|
position: absolute; |
|
width: 48px; |
|
height: 48px; |
|
text-align: right; |
|
right: 36px; |
|
} |
|
|
|
.base-card-content-unSelectBg { |
|
width: 672px; |
|
margin-bottom: 12px; |
|
height: 126px; |
|
background-image: url(@/assets/imgs/show/bg_item_timing_unselect.png); |
|
background-size: contain; |
|
background-repeat: no-repeat; |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
} |
|
|
|
.base-card-content-selectBg { |
|
position: relative; |
|
margin-bottom: 12px; |
|
background-size: contain; |
|
width: 672px; |
|
height: 126px; |
|
background-image: url(@/assets/imgs/show/bg_item_timing_select.png); |
|
background-repeat: no-repeat; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.show-img { |
|
width: 100vw; |
|
} |
|
.margin-left-2 { |
|
margin-left: 2px; |
|
} |
|
|
|
.margin-left-4 { |
|
margin-left: 4px; |
|
} |
|
|
|
.margin-left-8 { |
|
margin-left: 8px; |
|
} |
|
|
|
.margin-left-10 { |
|
margin-left: 10px; |
|
} |
|
|
|
.margin-left-16 { |
|
margin-left: 16px; |
|
} |
|
|
|
.margin-left-20 { |
|
margin-left: 20px; |
|
} |
|
|
|
.margin-left-30 { |
|
margin-left: 30px; |
|
} |
|
|
|
.margin-left-42 { |
|
margin-left: 42px; |
|
} |
|
|
|
.margin-top-30 { |
|
margin-top: 30px; |
|
} |
|
}
|
|
|