yanxiang_h5/unpackage/dist/dev/mp-weixin/common/main.wxss

@charset "UTF-8";
/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */
/*每个页面公共css */
@charset "UTF-8";
/***********
常用样式库 v1
包含颜色、亮度、宽高、flex、gird、margin、padding、圆角、字体、动画
***********/
/***********颜色:背景、文本***********/
.bg-red {
  background-color: #ff0000;
  color: #fff;
}
.txt-red {
  color: #ff0000;
}
.bg-orange {
  background-color: #f37b1d;
  color: #fff;
}
.txt-orange {
  color: #f37b1d;
}
.bg-yellow {
  background-color: #fbbd08;
  color: #fff;
}
.txt-yellow {
  color: #fbbd08;
}
.bg-olive {
  background-color: #8dc63f;
  color: #fff;
}
.txt-olive {
  color: #8dc63f;
}
.bg-green {
  background-color: #39b54a;
  color: #fff;
}
.txt-green {
  color: #39b54a;
}
.bg-cyan {
  background-color: #1cbbb4;
  color: #fff;
}
.txt-cyan {
  color: #1cbbb4;
}
.bg-blue {
  background-color: #0081ff;
  color: #fff;
}
.txt-blue {
  color: #0081ff;
}
.bg-purple {
  background-color: #6739b6;
  color: #fff;
}
.txt-purple {
  color: #6739b6;
}
.bg-mauve {
  background-color: #9c26b0;
  color: #fff;
}
.txt-mauve {
  color: #9c26b0;
}
.bg-pink {
  background-color: #e03997;
  color: #fff;
}
.txt-pink {
  color: #e03997;
}
.bg-brown {
  background-color: #a5673f;
  color: #fff;
}
.txt-brown {
  color: #a5673f;
}
.bg-grey {
  background-color: #8799a3;
  color: #fff;
}
.txt-grey {
  color: #8799a3;
}
.bg-black {
  background-color: #333333;
  color: #fff;
}
.txt-black {
  color: #333333;
}
.bg-darkGray {
  background-color: #666666;
  color: #fff;
}
.txt-darkGray {
  color: #666666;
}
.bg-gray {
  background-color: #aaaaaa;
  color: #000;
}
.txt-gray {
  color: #aaaaaa;
}
.bg-ghostWhite {
  background-color: #f1f1f1;
  color: #000;
}
.txt-ghostWhite {
  color: #f1f1f1;
}
.bg-white {
  background-color: #ffffff;
  color: #000;
}
.txt-white {
  color: #ffffff;
}
.txt-2hide{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
}
/***********宽度***********/
.wid-1 {
  width: 1%;
}
.wid-2 {
  width: 2%;
}
.wid-3 {
  width: 3%;
}
.wid-4 {
  width: 4%;
}
.wid-5 {
  width: 5%;
}
.wid-10 {
  width: 10%;
}
.wid-20 {
  width: 20%;
}
.wid-30 {
  width: 30%;
}
.wid-40 {
  width: 40%;
}
.wid-50 {
  width: 50%;
}
.wid-60 {
  width: 60%;
}
.wid-70 {
  width: 70%;
}
.wid-80 {
  width: 80%;
}
.wid-90 {
  width: 90%;
}
.wid-100 {
  width: 100%;
}
/***********高度***********/
.hei-100 {
  height: 100%;
}
.hei-50 {
  height: 50%;
}
.wh-100 {
  height: 100%;
  width: 100%;
}
/***********margin***********/
.mt-10 {
  margin-top: 10rpx;
}
.mt-20 {
  margin-top: 20rpx;
}
.mt-30 {
  margin-top: 30rpx;
}
.mt-40 {
  margin-top: 40rpx;
}
.mt-50 {
  margin-top: 50rpx;
}
.mt-60 {
  margin-top: 60rpx;
}
.mt-70 {
  margin-top: 70rpx;
}
.mt-80 {
  margin-top: 80rpx;
}
.mt-90 {
  margin-top: 90rpx;
}
.mt-100 {
  margin-top: 100rpx;
}
/***********padding***********/
.pd-5 {
  padding: 5rpx;
}
.pd-10 {
  padding: 10rpx;
}
.pd-15 {
  padding: 15rpx;
}
.pd-20 {
  padding: 20rpx;
}
.pd-30 {
  padding: 30rpx;
}
.pd-40 {
  padding: 40rpx;
}
/***********圆角***********/
.round-5 {
  border-radius: 5rpx;
}
.round-10 {
  border-radius: 10rpx;
}
.round-15 {
  border-radius: 15rpx;
}
.round-20 {
  border-radius: 20rpx;
}
.round-50 {
  border-radius: 50%;
}
/***********Flex布局***********/
.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
}
.y-center {
  align-items: center;
}
.x-center {
  justify-content: center;
}
.flex-center {
  align-items: center;
  justify-content: center;
}
.flex-start {
  justify-content: flex-start;
}
.flex-end {
  justify-content: flex-end;
}
.flex-between {
  justify-content: space-between;
}
.flex-around {
  justify-content: space-around;
}
.flex-wrap {
  flex-wrap: wrap;
}
/***********grid***********/
.grid {
  display: grid;
  flex-wrap: wrap;
}
.grid.col-1 > view {
  width: 100%;
}
.grid.col-2 > view {
  width: 50%;
}
.grid.col-3 > view {
  width: 33.33333%;
}
.grid.col-4 > view {
  width: 25%;
}
.grid.col-5 > view {
  width: 20%;
}
/***********文本***********/
.txt-sm {
  font-size: 22rpx;
}
.txt-df {
  font-size: 28rpx;
}
.txt-lg {
  font-size: 32rpx;
}
.txt-xl {
  font-size: 36rpx;
}
.txt-xxl {
  font-size: 42rpx;
}
.txt-sl {
  font-size: 56rpx;
}
.txt-sxl {
  font-size: 88rpx;
}
.txt-left {
  text-align: left;
}
.txt-right {
  text-align: right;
}
.txt-center {
  text-align: center;
}
.txt-bold {
  font-weight: 800;
}
.txt-space-3 {
  letter-spacing: 3rpx;
}
.txt-Abc {
  text-transform: Capitalize;
}
.txt-ABC {
  text-transform: Uppercase;
}
.txt-abc {
  text-transform: Lowercase;
}
.txtHide {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/***********animation***********/
[class*=ani-] {
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.ani-fade {
  -webkit-animation: fade;
          animation: fade;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.ani-scale-up {
  -webkit-animation: scale-up;
          animation: scale-up;
}
.ani-scale-down {
  -webkit-animation: scale-down;
          animation: scale-down;
}
.ani-slide-top {
  -webkit-animation: slide-top;
          animation: slide-top;
}
.ani-slide-bottom {
  -webkit-animation: slide-bottom;
          animation: slide-bottom;
}
.ani-slide-left {
  -webkit-animation: slide-left;
          animation: slide-left;
}
.ani-slide-right {
  -webkit-animation: slide-right;
          animation: slide-right;
}
.ani-shake {
  -webkit-animation: shake;
          animation: shake;
}
@-webkit-keyframes fade {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@-webkit-keyframes scale-up {
0% {
    opacity: 0;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes scale-up {
0% {
    opacity: 0;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@-webkit-keyframes scale-down {
0% {
    opacity: 0;
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes scale-down {
0% {
    opacity: 0;
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@-webkit-keyframes slide-top {
0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@keyframes slide-top {
0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@-webkit-keyframes slide-bottom {
0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@keyframes slide-bottom {
0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@-webkit-keyframes shake {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
10% {
    -webkit-transform: translateX(-9px);
            transform: translateX(-9px);
}
20% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
}
30% {
    -webkit-transform: translateX(-7px);
            transform: translateX(-7px);
}
40% {
    -webkit-transform: translateX(6px);
            transform: translateX(6px);
}
50% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
}
60% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
}
70% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
}
80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
}
90% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px);
}
}
@keyframes shake {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
10% {
    -webkit-transform: translateX(-9px);
            transform: translateX(-9px);
}
20% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
}
30% {
    -webkit-transform: translateX(-7px);
            transform: translateX(-7px);
}
40% {
    -webkit-transform: translateX(6px);
            transform: translateX(6px);
}
50% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
}
60% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
}
70% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
}
80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
}
90% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px);
}
}
@-webkit-keyframes slide-left {
0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@keyframes slide-left {
0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@-webkit-keyframes slide-right {
0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@keyframes slide-right {
0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
/***********辅助交互***********/
.btnClick {
  position: relative;
}
.btnClick:active {
  -webkit-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
}
.pageShow {
  opacity: 1;
  z-index: 999;
}
.pageHide {
  opacity: 0;
  z-index: -999;
}
.shadow {
  position: relative;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.u-line-1 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical !important;
}
.u-line-2 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical !important;
}
.u-line-3 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical !important;
}
.u-line-4 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical !important;
}
.u-line-5 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical !important;
}
.u-border {
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
}
.u-border-top {
  border-top-width: 0.5px !important;
  border-color: #dadbde !important;
  border-top-style: solid;
}
.u-border-left {
  border-left-width: 0.5px !important;
  border-color: #dadbde !important;
  border-left-style: solid;
}
.u-border-right {
  border-right-width: 0.5px !important;
  border-color: #dadbde !important;
  border-right-style: solid;
}
.u-border-bottom {
  border-bottom-width: 0.5px !important;
  border-color: #dadbde !important;
  border-bottom-style: solid;
}
.u-border-top-bottom {
  border-top-width: 0.5px !important;
  border-bottom-width: 0.5px !important;
  border-color: #dadbde !important;
  border-top-style: solid;
  border-bottom-style: solid;
}
.u-reset-button {
  padding: 0;
  background-color: transparent;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.u-reset-button::after {
  border: none;
}
.u-hover-class {
  opacity: 0.7;
}
.u-primary-light {
  color: #ecf5ff;
}
.u-warning-light {
  color: #fdf6ec;
}
.u-success-light {
  color: #f5fff0;
}
.u-error-light {
  color: #fef0f0;
}
.u-info-light {
  color: #f4f4f5;
}
.u-primary-light-bg {
  background-color: #ecf5ff;
}
.u-warning-light-bg {
  background-color: #fdf6ec;
}
.u-success-light-bg {
  background-color: #f5fff0;
}
.u-error-light-bg {
  background-color: #fef0f0;
}
.u-info-light-bg {
  background-color: #f4f4f5;
}
.u-primary-dark {
  color: #eb5a10;
}
.u-warning-dark {
  color: #f1a532;
}
.u-success-dark {
  color: #53c21d;
}
.u-error-dark {
  color: #e45656;
}
.u-info-dark {
  color: #767a82;
}
.u-primary-dark-bg {
  background-color: #eb5a10;
}
.u-warning-dark-bg {
  background-color: #f1a532;
}
.u-success-dark-bg {
  background-color: #53c21d;
}
.u-error-dark-bg {
  background-color: #e45656;
}
.u-info-dark-bg {
  background-color: #767a82;
}
.u-primary-disabled {
  color: rgba(235, 90, 16, 0.6);
}
.u-warning-disabled {
  color: #f9d39b;
}
.u-success-disabled {
  color: #a9e08f;
}
.u-error-disabled {
  color: #f7b2b2;
}
.u-info-disabled {
  color: #c4c6c9;
}
.u-primary {
  color: #eb5a10;
}
.u-warning {
  color: #f9ae3d;
}
.u-success {
  color: #5ac725;
}
.u-error {
  color: #f56c6c;
}
.u-info {
  color: #909399;
}
.u-primary-bg {
  background-color: #eb5a10;
}
.u-warning-bg {
  background-color: #f9ae3d;
}
.u-success-bg {
  background-color: #5ac725;
}
.u-error-bg {
  background-color: #f56c6c;
}
.u-info-bg {
  background-color: #909399;
}
.u-main-color {
  color: #303133;
}
.u-content-color {
  color: #606266;
}
.u-tips-color {
  color: #909193;
}
.u-light-color {
  color: #c0c4cc;
}
.u-safe-area-inset-top {
  padding-top: 0;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.u-safe-area-inset-right {
  padding-right: 0;
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}
.u-safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.u-safe-area-inset-left {
  padding-left: 0;
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
}
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
.u-block {
  padding: 14px;
}
.u-block__section {
  margin-bottom: 10px;
}
.u-block__title {
  margin-top: 10px;
  font-size: 15px;
  color: #606266;
  margin-bottom: 10px;
}
.u-block__flex {
  display: flex;
}
.u-cell-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}
.u-page {
  padding: 15px 15px 40px 15px;
}
.u-demo-block {
  flex: 1;
  margin-bottom: 23px;
}
.u-demo-block__content {
  display: flex;
  flex-direction: column;
}
.u-demo-block__title {
  font-size: 14px;
  color: #8f9ca2;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
}
.pageCon {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 276rpx);
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 28rpx;
}
page {
  background-color: #f6f6f6;
}