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.
131 lines
3.0 KiB
131 lines
3.0 KiB
@import './mixin/flex.scss'; // flex(主轴,交叉轴,方向,换行,多轴线对齐) / flex-self(对齐,(布满||固定),顺序)
|
|
@import './mixin/text-overflow.scss'; // 文本格式化超出省略号 参数：宽度,单行/多行
|
|
@import './mixin/position-absolute.scss'; // 绝对定位 参数：上,右,下,左
|
|
@import './mixin/triangle.scss'; // 画三角形 参数：宽度,朝向,颜色
|
|
@import './mixin/hr.scss'; // 添加分割线 参数：位置,间隔
|
|
@import './mixin/price-before.scss'; // 价格¥前加
|
|
/*colorui css */
|
|
@import "static/colorui/main.css";
|
|
@import "static/colorui/icon.css";
|
|
/*uview-ui css */
|
|
// @import "uview-ui/index.scss";
|
|
|
|
page {
|
|
min-height: 100%;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
/*flex布局(colorui里面也有相关基础样式)*/
|
|
/* x水平排列*/
|
|
.x-f {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x两端且水平居中*/
|
|
.x-bc {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x平分且水平居中*/
|
|
.x-ac {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x水平靠上对齐*/
|
|
.x-start {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/*x水平靠下对齐*/
|
|
.x-end {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/*上下左右居中*/
|
|
.x-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*y竖直靠左*/
|
|
.y-start {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/*y竖直靠右*/
|
|
.y-end {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/*y竖直居中*/
|
|
.y-f {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* y竖直两端*/
|
|
.y-b {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/*y竖直两端居中*/
|
|
.y-bc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
//常用flex公共代码
|
|
.flex_row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
// flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.flex_col{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
// flex-flow: column nowrap; //部分环境不支持简写
|
|
justify-content: center; //主轴上的对齐方式
|
|
align-items: center; //交叉轴上如何对齐
|
|
}
|
|
.flex_col.flex_wrap{flex-wrap: wrap;}
|
|
.flex_row.flex_wrap{flex-wrap: wrap;}
|
|
//覆盖主轴属性
|
|
.flex_between{justify-content: space-between;}
|
|
.flex_around{justify-content: space-around;}
|
|
.flex_start{justify-content: flex-start;}
|
|
.flex_end{justify-content: flex-end;}
|
|
//覆盖交叉轴属性
|
|
.flex_between_y{align-items: space-between;}
|
|
.flex_around_y{align-items: space-around;}
|
|
.flex_start_y{align-items: flex-start;}
|
|
.flex_end_y{align-items: flex-end;}
|
|
|
|
.text-maxline-one {
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
}
|