|
@@ -1,184 +1,352 @@
|
|
|
- page{
|
|
|
- color: #333;
|
|
|
- font-size: 28rpx;
|
|
|
- background:rgba(245,247,250,1);
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- view,text{
|
|
|
- line-height:40rpx;
|
|
|
- }
|
|
|
- .blue{
|
|
|
- color: #26A2FF;
|
|
|
+ page {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 28rpx;
|
|
|
+ background: rgba(245, 247, 250, 1);
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ view, text {
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #26A2FF!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #F56C6C!important;
|
|
|
}
|
|
|
- .red{
|
|
|
+
|
|
|
+ .yellow {
|
|
|
+ color: #E6A23C!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #67C23A!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontColorZ {
|
|
|
+ color: #303133!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontColorF {
|
|
|
+ color: #909399 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontColorT {
|
|
|
+ color: #C0C4CC!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 搜索框 */
|
|
|
+
|
|
|
+ .search {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search input {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ font-size: 28rpx !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%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 4;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab view {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ width: 25%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab view text {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab text::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: -20rpx;
|
|
|
+ margin-top: -0.1rem;
|
|
|
+ border: 0.06rem solid;
|
|
|
+ border-color: transparent transparent #dcdee0 #dcdee0;
|
|
|
+ -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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .windows {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 弹窗过程 */
|
|
|
+
|
|
|
+ .showPop {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 带字体背景颜色 */
|
|
|
+
|
|
|
+ .redBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(245, 108, 108, 0.1);
|
|
|
color: #F56C6C;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .greenBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(103, 194, 58, 0.1);
|
|
|
+ color: #67C23A;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
}
|
|
|
- .yellow{
|
|
|
+
|
|
|
+ .yellowBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(230, 162, 60, 0.1);
|
|
|
color: #E6A23C;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
}
|
|
|
- .green{
|
|
|
- color: #67C23A;
|
|
|
+
|
|
|
+ .blueBox {
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: rgba(238, 162, 255, 0.1);
|
|
|
+ color: #26A2FF;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
}
|
|
|
- .fontColorZ{
|
|
|
- color: #303133;
|
|
|
+
|
|
|
+ .margin-bottom {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .margin-top {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .defBtn {
|
|
|
+ background: #26A2FF;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-bottom {
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-left {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 盒子模型 */
|
|
|
+
|
|
|
+ .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-d-center {
|
|
|
+ justify-content: space-between;
|
|
|
+ -webkit-justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 水平等列排版(子元素两边有缝隙自己适应) */
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box水平;flex-box-v垂直) */
|
|
|
+
|
|
|
+ .flex-v-zhu, .flex-h-zhu {
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*对view中的子元素进行居中,并且位于容器的中间位置(flex-box垂直;flex-box-v水平) */
|
|
|
+
|
|
|
+ .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-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-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-direction-row-reverse {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ -webkit-flex-direction: row-reverse;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*超出部分用....表示的公用样式 */
|
|
|
+
|
|
|
+ .font-flex-word {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 内容超出部分自动换行 */
|
|
|
+
|
|
|
+ .flex-d-wrap {
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
- .fontColorF{
|
|
|
- color: #909399;
|
|
|
- }
|
|
|
- .fontColorT{
|
|
|
- color: #C0C4CC;
|
|
|
- }
|
|
|
-
|
|
|
- .margin-bottom{
|
|
|
- margin-bottom: 28rpx;
|
|
|
- }
|
|
|
- .margin-top{
|
|
|
- margin-top: 28rpx;
|
|
|
- }
|
|
|
- .defBtn{
|
|
|
- background: #26A2FF;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-/* 盒子模型 */
|
|
|
-.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-d-center {
|
|
|
- justify-content: space-between;
|
|
|
- -webkit-justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-/* 水平等列排版(子元素两边有缝隙自己适应) */
|
|
|
-.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;
|
|
|
-}
|
|
|
-
|
|
|
-/*对view中的子元素进行居中,并且位于容器的中间位置(flex-box水平;flex-box-v垂直) */
|
|
|
-.flex-v-zhu,
|
|
|
-.flex-h-zhu {
|
|
|
- justify-content: center;
|
|
|
- -webkit-justify-content: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
-}
|
|
|
-
|
|
|
-/*对view中的子元素进行居中,并且位于容器的中间位置(flex-box垂直;flex-box-v水平) */
|
|
|
-.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-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-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-direction-row-reverse {
|
|
|
- flex-direction: row-reverse;
|
|
|
- -webkit-flex-direction: row-reverse;
|
|
|
-}
|
|
|
-
|
|
|
-/*超出部分用....表示的公用样式 */
|
|
|
-.font-flex-word {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-/* 内容超出部分自动换行 */
|
|
|
-.flex-d-wrap {
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-
|
|
|
-/* 内容超出部分不换行 */
|
|
|
-.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-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;
|
|
|
+ }
|