|
@@ -1,502 +1,524 @@
|
|
|
- page {
|
|
|
- color: #303133;
|
|
|
- font-size: 32rpx;
|
|
|
- background: rgba(245, 247, 250, 1);
|
|
|
- /* height: 100%; */
|
|
|
- width: 100%;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
|
|
|
- }
|
|
|
+page {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 32rpx;
|
|
|
+ background: rgba(245, 247, 250, 1);
|
|
|
+ /* height: 100%; */
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
|
|
|
+}
|
|
|
|
|
|
- .nodeBer {
|
|
|
- border: none!important;
|
|
|
- }
|
|
|
+.nodeBer {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
|
|
|
- view, text {
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .dept_name{
|
|
|
- color: #969799 !important;
|
|
|
- font-size: 0.24rem;
|
|
|
- }
|
|
|
- .blue {
|
|
|
- color: #26A2FF!important;
|
|
|
- }
|
|
|
+view,
|
|
|
+text {
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
|
|
|
- .red {
|
|
|
- color: #F56C6C!important;
|
|
|
- }
|
|
|
- .yellowText{
|
|
|
- color: #E6A23C!important;
|
|
|
- font-size: 0.24rem;
|
|
|
- padding: 0 0.24rem;
|
|
|
- }
|
|
|
- .yellow {
|
|
|
- color: #E6A23C!important;
|
|
|
- }
|
|
|
+.dept_name {
|
|
|
+ color: #969799 !important;
|
|
|
+ font-size: 0.24rem;
|
|
|
+}
|
|
|
|
|
|
- .yellow2 {
|
|
|
- color: #fc0!important;
|
|
|
- }
|
|
|
+.blue {
|
|
|
+ color: #26A2FF !important;
|
|
|
+}
|
|
|
|
|
|
- .green {
|
|
|
- color: #67C23A!important;
|
|
|
- }
|
|
|
+.red {
|
|
|
+ color: #F56C6C !important;
|
|
|
+}
|
|
|
|
|
|
- .fontColorZ {
|
|
|
- color: #303133!important;
|
|
|
- }
|
|
|
+.yellow {
|
|
|
+ color: #FFC910 !important;
|
|
|
+}
|
|
|
|
|
|
- .fontColorF {
|
|
|
- color: #606266 !important;
|
|
|
- }
|
|
|
+.orange {
|
|
|
+ color: #FF9600 !important;
|
|
|
+}
|
|
|
|
|
|
- .fontColorX {
|
|
|
- color: #969799 !important;
|
|
|
- }
|
|
|
+.green {
|
|
|
+ color: #67C23A !important;
|
|
|
+}
|
|
|
|
|
|
- .fontColorT {
|
|
|
- color: #C0C4CC!important;
|
|
|
- }
|
|
|
+.cyan {
|
|
|
+ color: #00C4CB !important;
|
|
|
+}
|
|
|
|
|
|
- /* 搜索框 */
|
|
|
+.black {
|
|
|
+ color: #141c28 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.orangeText {
|
|
|
+ color: #E6A23C !important;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ padding: 0 0.24rem;
|
|
|
+}
|
|
|
+.fontColorA {
|
|
|
+ color: #303133 !important;
|
|
|
+}
|
|
|
|
|
|
- .search {
|
|
|
- background-color: #f1f1f1;
|
|
|
- border-radius: 10rpx;
|
|
|
- width: 90%;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 6rpx 10rpx;
|
|
|
- }
|
|
|
+.fontColorB {
|
|
|
+ color: #606266 !important;
|
|
|
+}
|
|
|
|
|
|
- .search input {
|
|
|
- background-color: #f1f1f1;
|
|
|
- font-size: 32rpx !important;
|
|
|
- }
|
|
|
+.fontColorC {
|
|
|
+ color: #89919F !important;
|
|
|
+}
|
|
|
|
|
|
- .search image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
+.fontColorD {
|
|
|
+ color: #BFC7D5 !important;
|
|
|
+}
|
|
|
|
|
|
- /* 弹窗相关 */
|
|
|
+/* 搜索框 */
|
|
|
|
|
|
- .data-tier {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
+.search {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search input {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ font-size: 32rpx !important;
|
|
|
+}
|
|
|
+
|
|
|
+.search image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗相关 */
|
|
|
+
|
|
|
+.data-tier {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.animationBox {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 3;
|
|
|
+ transform: translate(0, -100%);
|
|
|
+}
|
|
|
|
|
|
- .animationBox {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- overflow: hidden;
|
|
|
- z-index: 3;
|
|
|
- transform: translate(0, -100%);
|
|
|
- }
|
|
|
/* 禁止滚动背景穿透 */
|
|
|
- .container__mask {
|
|
|
- overflow: hidden;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
- .tab {
|
|
|
- background: #fff;
|
|
|
- text-align: center;
|
|
|
- z-index: 4;
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
+.container__mask {
|
|
|
+ overflow: hidden;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
|
|
|
- .tab view {
|
|
|
- width: 25%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+.tab {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 4;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
|
|
|
- .tab view text {
|
|
|
- position: relative;
|
|
|
- padding: 20rpx 0;
|
|
|
- /* width: 120%; */
|
|
|
- white-space: nowrap
|
|
|
- }
|
|
|
+.tab view {
|
|
|
+ width: 25%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
|
|
|
- .tab text::after {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: -20rpx;
|
|
|
- margin-top: -0.1rem;
|
|
|
- border: 0.06rem solid;
|
|
|
- border-color: transparent transparent #C0C4CC #C0C4CC;
|
|
|
- -webkit-transform: rotate(-45deg);
|
|
|
- transform: rotate(-45deg);
|
|
|
- opacity: .8;
|
|
|
- content: '';
|
|
|
- }
|
|
|
+.tab view text {
|
|
|
+ position: relative;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ /* width: 120%; */
|
|
|
+ white-space: nowrap
|
|
|
+}
|
|
|
|
|
|
- .tab .activeView {
|
|
|
- color: #26a2ff;
|
|
|
- }
|
|
|
+.tab text::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: -20rpx;
|
|
|
+ margin-top: -0.1rem;
|
|
|
+ border: 0.06rem solid;
|
|
|
+ border-color: transparent transparent #C0C4CC #C0C4CC;
|
|
|
+ -webkit-transform: rotate(-45deg);
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ opacity: .8;
|
|
|
+ content: '';
|
|
|
+}
|
|
|
|
|
|
- .tab .activeView::after {
|
|
|
- margin-top: -0.02rem;
|
|
|
- -webkit-transform: rotate(135deg);
|
|
|
- transform: rotate(135deg);
|
|
|
- border-color: transparent transparent #26a2ff #26a2ff;
|
|
|
- }
|
|
|
+.tab .activeView {
|
|
|
+ color: #26a2ff;
|
|
|
+}
|
|
|
|
|
|
- .windows {
|
|
|
- position: fixed;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- right: 0px;
|
|
|
- bottom: 0px;
|
|
|
- background: rgba(0, 0, 0, 0.4);
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
+.tab .activeView::after {
|
|
|
+ margin-top: -0.02rem;
|
|
|
+ -webkit-transform: rotate(135deg);
|
|
|
+ transform: rotate(135deg);
|
|
|
+ border-color: transparent transparent #26a2ff #26a2ff;
|
|
|
+}
|
|
|
|
|
|
- .meng {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, .5);
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 80rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.windows {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
|
|
|
- .delVal {
|
|
|
- height: 40rpx;
|
|
|
- width: 40rpx;
|
|
|
- border-radius: 100%;
|
|
|
- background-color: #909399;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- /* line-height: 40rpx; */
|
|
|
- line-height: 34rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- }
|
|
|
+.meng {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, .5);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
|
|
|
- /* 弹窗过程 */
|
|
|
-
|
|
|
- .pop-up {
|
|
|
- position: fixed;
|
|
|
- right: 10rpx;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: #fff;
|
|
|
- text-align: center;
|
|
|
- bottom: 50%;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 100rpx;
|
|
|
- box-shadow: 0 0 0.12rem rgba(0, 0, 0, .15);
|
|
|
- }
|
|
|
+.delVal {
|
|
|
+ height: 40rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ background-color: #909399;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ /* line-height: 40rpx; */
|
|
|
+ line-height: 34rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗过程 */
|
|
|
+
|
|
|
+.pop-up {
|
|
|
+ position: fixed;
|
|
|
+ right: 10rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 100rpx;
|
|
|
+ box-shadow: 0 0 0.12rem rgba(0, 0, 0, .15);
|
|
|
+}
|
|
|
|
|
|
- .showPop {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
+.showPop {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
}
|
|
|
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0%);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0%);
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- /* 带字体背景颜色 */
|
|
|
+/* 带字体背景颜色 */
|
|
|
|
|
|
- .redBox {
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(245,108,108,.1);
|
|
|
- color: #F56C6C;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.redBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(245, 108, 108, .1);
|
|
|
+ color: #F56C6C;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .greenBox {
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(103,194,58,.1);
|
|
|
- color: #67C23A;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.greenBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(103, 194, 58, .1);
|
|
|
+ color: #67C23A;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .yellowBox2{
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(255,204,0,.1);
|
|
|
- color: #fc0;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.yellowBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(255, 204, 0, .1);
|
|
|
+ color: #FFC910;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .yellowBox {
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(230,162,60,.1);
|
|
|
- color: #E6A23C;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.orangeBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(230, 162, 60, .1);
|
|
|
+ color: #FF9600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .blueBox {
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(38,162,255,.1);
|
|
|
- color: #26A2FF;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.blueBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(38, 162, 255, .1);
|
|
|
+ color: #26A2FF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .textBox {
|
|
|
- border-radius: 6rpx;
|
|
|
- background: rgba(48,49,51,.1);
|
|
|
- color: #303133;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- }
|
|
|
+.textBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(48, 49, 51, .1);
|
|
|
+ color: #303133;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+}
|
|
|
|
|
|
- .margin-bottom {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
+.margin-bottom {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
|
|
|
- .margin-top {
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
+.margin-top {
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
|
|
|
- .defBtn {
|
|
|
- background: #26A2FF;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+.defBtn {
|
|
|
+ background: #26A2FF;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- .border-bottom {
|
|
|
- border-bottom: 1px solid #f1f1f1;
|
|
|
- }
|
|
|
+.border-bottom {
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
+}
|
|
|
|
|
|
- .text-right {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+.text-right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
|
|
|
- .text-left {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+.text-left {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
|
|
|
- .noDatas {
|
|
|
- text-align: center;
|
|
|
- padding: 16rpx 0;
|
|
|
- color: #909399
|
|
|
- }
|
|
|
+.noDatas {
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ color: #909399
|
|
|
+}
|
|
|
|
|
|
- .radio_ {
|
|
|
- width: 40rpx !important;
|
|
|
- height: 40rpx !important;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 50% !important;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
- margin: 0 20rpx 0 24rpx;
|
|
|
- }
|
|
|
+.radio_ {
|
|
|
+ width: 40rpx !important;
|
|
|
+ height: 40rpx !important;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 50% !important;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 20rpx 0 24rpx;
|
|
|
+}
|
|
|
|
|
|
- .active .radio_ {
|
|
|
- border: 1px solid #26A2FF;
|
|
|
- }
|
|
|
+.active .radio_ {
|
|
|
+ border: 1px solid #26A2FF;
|
|
|
+}
|
|
|
|
|
|
- .active .radio_::before {
|
|
|
- content: '';
|
|
|
- width: 20rpx !important;
|
|
|
- height: 20rpx !important;
|
|
|
- border-radius: 50% !important;
|
|
|
- background: #26A2FF;
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-top: -10rpx;
|
|
|
- margin-left: -9.5rpx;
|
|
|
- }
|
|
|
+.active .radio_::before {
|
|
|
+ content: '';
|
|
|
+ width: 20rpx !important;
|
|
|
+ height: 20rpx !important;
|
|
|
+ border-radius: 50% !important;
|
|
|
+ background: #26A2FF;
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -10rpx;
|
|
|
+ margin-left: -9.5rpx;
|
|
|
+}
|
|
|
|
|
|
- /* 盒子模型 */
|
|
|
+/* 盒子模型 */
|
|
|
|
|
|
- .flex-box {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
+.flex-box {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
|
|
|
- /*盒子模型,竖向自适应,垂直排列 */
|
|
|
+/*盒子模型,竖向自适应,垂直排列 */
|
|
|
|
|
|
- .flex-box-v {
|
|
|
- display: -webkit-box;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-flex-flow: column;
|
|
|
- flex-flow: column !important;
|
|
|
- }
|
|
|
+.flex-box-v {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-flex-flow: column;
|
|
|
+ flex-flow: column !important;
|
|
|
+}
|
|
|
|
|
|
- .flex-box-ce{
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-align: center;
|
|
|
- }
|
|
|
+.flex-box-ce {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+}
|
|
|
|
|
|
- /* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
|
|
|
+/* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
|
|
|
|
|
|
- .flex-d-center {
|
|
|
- justify-content: space-between;
|
|
|
- -webkit-justify-content: space-between;
|
|
|
- }
|
|
|
+.flex-d-center {
|
|
|
+ justify-content: space-between;
|
|
|
+ -webkit-justify-content: space-between;
|
|
|
+}
|
|
|
|
|
|
- /* 水平等列排版(子元素两边有缝隙自己适应) */
|
|
|
+/* 水平等列排版(子元素两边有缝隙自己适应) */
|
|
|
|
|
|
- .flex-dv-center {
|
|
|
- justify-content: space-around;
|
|
|
- -webkit-justify-content: space-around;
|
|
|
- }
|
|
|
+.flex-dv-center {
|
|
|
+ justify-content: space-around;
|
|
|
+ -webkit-justify-content: space-around;
|
|
|
+}
|
|
|
|
|
|
- /*通过一起使用 box-align 和 box-pack 属性,对 view 框的子元素进行居中,目前没有浏览器支持box-align 和 box-pack 属性,所以需要加上浏览器内核-webkit,-moz等的简写 */
|
|
|
-
|
|
|
- .flex-center-center {
|
|
|
- justify-content: center;
|
|
|
- -webkit-justify-content: center;
|
|
|
- -moz-justify-content: center;
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
- -webkit-box-align: center;
|
|
|
- -moz-align-items: center;
|
|
|
- -moz-box-pack: center;
|
|
|
- -moz-box-align: center;
|
|
|
- }
|
|
|
+/*通过一起使用 box-align 和 box-pack 属性,对 view 框的子元素进行居中,目前没有浏览器支持box-align 和 box-pack 属性,所以需要加上浏览器内核-webkit,-moz等的简写 */
|
|
|
+
|
|
|
+.flex-center-center {
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ -moz-justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -moz-align-items: center;
|
|
|
+ -moz-box-pack: center;
|
|
|
+ -moz-box-align: center;
|
|
|
+}
|
|
|
|
|
|
- /*对view中的子元素进行居中,并且位于容器的中间位置 水平居中 */
|
|
|
+/*对view中的子元素进行居中,并且位于容器的中间位置 水平居中 */
|
|
|
|
|
|
- .flex-v-zhu, .flex-h-zhu {
|
|
|
- justify-content: center;
|
|
|
- -webkit-justify-content: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
- }
|
|
|
+.flex-v-zhu,
|
|
|
+.flex-h-zhu {
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+}
|
|
|
|
|
|
- /*对view中的子元素进行居中,并且位于容器的中间位置 垂直居中 */
|
|
|
+/*对view中的子元素进行居中,并且位于容器的中间位置 垂直居中 */
|
|
|
|
|
|
- .flex-v-ce, .flex-h-ce {
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-align: center;
|
|
|
- }
|
|
|
+.flex-v-ce,
|
|
|
+.flex-h-ce {
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+}
|
|
|
|
|
|
- /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
|
|
|
+/*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
|
|
|
|
|
|
- .flex-1 {
|
|
|
- -webkit-box-flex: 1;
|
|
|
- -moz-box-flex: 1;
|
|
|
- -webkit-flex: 1;
|
|
|
- -ms-flex: 1;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+.flex-1 {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -moz-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
|
|
|
- .flex-2 {
|
|
|
- -webkit-box-flex: 2;
|
|
|
- box-flex: 2;
|
|
|
- -moz-box-flex: 2;
|
|
|
- -webkit-flex: 2;
|
|
|
- -ms-flex: 2;
|
|
|
- flex: 2;
|
|
|
- }
|
|
|
+.flex-2 {
|
|
|
+ -webkit-box-flex: 2;
|
|
|
+ box-flex: 2;
|
|
|
+ -moz-box-flex: 2;
|
|
|
+ -webkit-flex: 2;
|
|
|
+ -ms-flex: 2;
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
|
|
|
- .flex-3 {
|
|
|
- -webkit-box-flex: 3;
|
|
|
- box-flex: 3;
|
|
|
- -moz-box-flex: 3;
|
|
|
- -webkit-flex: 3;
|
|
|
- -ms-flex: 3;
|
|
|
- flex: 3;
|
|
|
- }
|
|
|
+.flex-3 {
|
|
|
+ -webkit-box-flex: 3;
|
|
|
+ box-flex: 3;
|
|
|
+ -moz-box-flex: 3;
|
|
|
+ -webkit-flex: 3;
|
|
|
+ -ms-flex: 3;
|
|
|
+ flex: 3;
|
|
|
+}
|
|
|
|
|
|
- .flex-4 {
|
|
|
- -webkit-box-flex: 4;
|
|
|
- box-flex: 4;
|
|
|
- -moz-box-flex: 4;
|
|
|
- -webkit-flex: 4;
|
|
|
- -ms-flex: 4;
|
|
|
- flex: 4;
|
|
|
- }
|
|
|
+.flex-4 {
|
|
|
+ -webkit-box-flex: 4;
|
|
|
+ box-flex: 4;
|
|
|
+ -moz-box-flex: 4;
|
|
|
+ -webkit-flex: 4;
|
|
|
+ -ms-flex: 4;
|
|
|
+ flex: 4;
|
|
|
+}
|
|
|
|
|
|
- .flex-5 {
|
|
|
- -webkit-box-flex: 5;
|
|
|
- box-flex: 5;
|
|
|
- -moz-box-flex: 5;
|
|
|
- -webkit-flex: 5;
|
|
|
- -ms-flex: 5;
|
|
|
- flex: 5;
|
|
|
- }
|
|
|
+.flex-5 {
|
|
|
+ -webkit-box-flex: 5;
|
|
|
+ box-flex: 5;
|
|
|
+ -moz-box-flex: 5;
|
|
|
+ -webkit-flex: 5;
|
|
|
+ -ms-flex: 5;
|
|
|
+ flex: 5;
|
|
|
+}
|
|
|
|
|
|
- .flex-direction-row-reverse {
|
|
|
- flex-direction: row-reverse;
|
|
|
- -webkit-flex-direction: row-reverse;
|
|
|
- }
|
|
|
+.flex-direction-row-reverse {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ -webkit-flex-direction: row-reverse;
|
|
|
+}
|
|
|
|
|
|
- /*超出部分用....表示的公用样式 */
|
|
|
- .font-flex-word {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
-.clamp2{
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
+/*超出部分用....表示的公用样式 */
|
|
|
+.font-flex-word {
|
|
|
overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
-.clamp3{
|
|
|
+
|
|
|
+.clamp2 {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.clamp3 {
|
|
|
overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
|
|
|
- /* 内容超出部分自动换行 */
|
|
|
|
|
|
- .flex-d-wrap {
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
+/* 内容超出部分自动换行 */
|
|
|
|
|
|
- /* 内容超出部分不换行 */
|
|
|
+.flex-d-wrap {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
|
|
|
- .flex-no-wrap {
|
|
|
- flex-wrap: nowrap;
|
|
|
- }
|
|
|
+/* 内容超出部分不换行 */
|
|
|
|
|
|
- /* 从右边开始排列 */
|
|
|
+.flex-no-wrap {
|
|
|
+ flex-wrap: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 从右边开始排列 */
|
|
|
|
|
|
- .flex-box-end {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+.flex-box-end {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|