@import './utils/iconfont.acss'; 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; } .white{ color: #fff!important; } .blue { color: #26A2FF!important; } .red { color: #F56C6C!important; } .yellow { color: #ffcc00!important; } .orange { color: #FF9600!important; } .green { color: #49d3a7!important; } .fontColorA { color: #303133!important; } .fontColorB { color: #606266 !important; } .fontColorC { color: #89919F !important; } .fontColorD { color: #BFC7D5!important; } /* 搜索框 */ .search { background-color: #f7f8fa; border-radius: 10rpx; width: 90%; margin: 0 auto; padding: 6rpx 10rpx; } .search input { background-color: #f7f8fa; 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%); } /* 禁止滚动背景穿透 */ .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; } .tab view { width: 25%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab view text { position: relative; padding: 24rpx 0; /* width: 120%; */ 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 .activeView { color: #26a2ff; } .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.4); z-index: 999; } .meng { position: fixed; bottom: 0; background-color: rgba(0, 0, 0, .5); left: 0; right: 0; top: 80rpx; overflow: hidden; } .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); } .showdown{ animation: showdown 0.2s linear both; } .showPop { animation: showLayer 0.2s linear both; } @keyframes showdown { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @keyframes showLayer { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } /* 带字体背景颜色 */ .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: #49d3a7; font-size: 28rpx; padding: 0 6rpx; } .yellowBox{ border-radius: 6rpx; background: rgba(255,204,0,.1); color: #fc0; font-size: 28rpx; padding: 0 6rpx; } .orangeBox{ border-radius: 6rpx; background: rgba(230,162,60,.1); color: #f0a020; 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; } .margin-bottom { margin-bottom: 20rpx; } .margin-top { margin-top: 20rpx; } .defBtn { background: #26A2FF; color: #fff; } .border-bottom { border-bottom: 1px solid #f1f1f1; } .text-right { text-align: right; } .text-left { text-align: left; } .noDatas { text-align: center; padding: 16rpx 0; color: #909399; font-size: 0.3rem; } .tabs{ position: relative; } .tabs::after{ position: absolute; content: " "; height: 0.06rem; width: 1.4rem; background-color: #26A2FF; left: 50%; margin-left: -0.7rem; bottom: 0; } .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_::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-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-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-v-zhu, .flex-h-zhu { justify-content: center; -webkit-justify-content: center; -webkit-box-pack: center; } /*对view中的子元素进行居中,并且位于容器的中间位置 垂直居中 */ .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; }