@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; }