|
|
@@ -0,0 +1,2953 @@
|
|
|
+/*
|
|
|
+ Color UI v2.0.2 | by 文晓港
|
|
|
+ 仅供学习交流，如作它用所承受的法律责任一概与作者无关
|
|
|
+ （QQ交流群：240787041）
|
|
|
+ 文档：http://www.color-ui.com/
|
|
|
+*/
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 初始化
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+page {
|
|
|
+ background: #f1f1f1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1;
|
|
|
+ font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form,
|
|
|
+form-group, info, bar, progress-bar, input, textarea, label, navigator, list,
|
|
|
+item, chat, image {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 布局
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+/* -- flex弹性布局 -- */
|
|
|
+
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.basis-xs {
|
|
|
+ flex-basis: 20%;
|
|
|
+}
|
|
|
+
|
|
|
+.basis-sm {
|
|
|
+ flex-basis: 40%;
|
|
|
+}
|
|
|
+
|
|
|
+.basis-df {
|
|
|
+ flex-basis: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.basis-lg {
|
|
|
+ flex-basis: 60%;
|
|
|
+}
|
|
|
+
|
|
|
+.basis-xl {
|
|
|
+ flex-basis: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-sub {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-twice {
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-treble {
|
|
|
+ flex: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-direction {
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-wrap {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.align-start {
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.align-end {
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.align-center {
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.align-stretch {
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.self-start {
|
|
|
+ align-self: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.self-center {
|
|
|
+ align-self: flex-center;
|
|
|
+}
|
|
|
+
|
|
|
+.self-end {
|
|
|
+ align-self: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.self-stretch {
|
|
|
+ align-self: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.align-stretch {
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-start {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-end {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-center {
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-between {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-around {
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+/* grid布局 */
|
|
|
+
|
|
|
+.grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.grid-square {
|
|
|
+ margin-bottom: -10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.grid-square tag {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ border-bottom-left-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.grid-square view> icon, .grid.grid-square item> icon {
|
|
|
+ font-size: 26px;
|
|
|
+ position: absolute;
|
|
|
+ color: #aaa;
|
|
|
+ margin: auto;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.grid-square view, .grid.grid-square item {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-1.grid-square view, .grid.col-1.grid-square item {
|
|
|
+ padding-bottom: 100%;
|
|
|
+ height: 0;
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-2.grid-square view, .grid.col-2.grid-square item {
|
|
|
+ padding-bottom: calc((100% - 10px)/2);
|
|
|
+ height: 0;
|
|
|
+ width: calc((100% - 10px)/2);
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-2.grid-square view:nth-child(2n),
|
|
|
+.grid.col-2.grid-square item:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-3.grid-square view, .grid.col-3.grid-square item {
|
|
|
+ padding-bottom: calc((100% - 20px)/3);
|
|
|
+ height: 0;
|
|
|
+ width: calc((100% - 20px)/3);
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-3.grid-square view:nth-child(3n),
|
|
|
+.grid.col-3.grid-square item:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-4.grid-square view, .grid.col-4.grid-square item {
|
|
|
+ padding-bottom: calc((100% - 30px)/4);
|
|
|
+ height: 0;
|
|
|
+ width: calc((100% - 30px)/4);
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-4.grid-square view:nth-child(4n),
|
|
|
+.grid.col-4.grid-square item:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-5.grid-square view, .grid.col-5.grid-square item {
|
|
|
+ padding-bottom: calc((100% - 40px)/5);
|
|
|
+ height: 0;
|
|
|
+ width: calc((100% - 40px)/5);
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-1>item, .grid.col-1>view {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-2>item, .grid.col-2>view {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-3>item, .grid.col-3>view {
|
|
|
+ width: 33.33%;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-4>item, .grid.col-4>view {
|
|
|
+ width: 25%;
|
|
|
+}
|
|
|
+
|
|
|
+.grid.col-5>item, .grid.col-5>view {
|
|
|
+ width: 20%;
|
|
|
+}
|
|
|
+
|
|
|
+/* -- 内外边距 -- */
|
|
|
+
|
|
|
+.margin-0 {
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-xs {
|
|
|
+ margin: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-sm {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin {
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lg {
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-xl {
|
|
|
+ margin: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top-xs {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top-sm {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top-lg {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-top-xl {
|
|
|
+ margin-top: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right-xs {
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right-sm {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right {
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right-lg {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right-xl {
|
|
|
+ margin-right: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-bottom-xs {
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-bottom-sm {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-bottom {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-bottom-lg {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-bottom-xl {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-left-xs {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-left-sm {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-left {
|
|
|
+ margin-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-left-lg {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-left-xl {
|
|
|
+ margin-left: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lr-xs {
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lr-sm {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lr {
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lr-lg {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-lr-xl {
|
|
|
+ margin-left: 25px;
|
|
|
+ margin-right: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-tb-xs {
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-tb-sm {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-tb {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-tb-lg {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-tb-xl {
|
|
|
+ margin-top: 25px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-0 {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-xs {
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-sm {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding {
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lg {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-xl {
|
|
|
+ padding: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-top-xs {
|
|
|
+ padding-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-top-sm {
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-top {
|
|
|
+ padding-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-top-lg {
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-top-xl {
|
|
|
+ padding-top: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-right-xs {
|
|
|
+ padding-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-right-sm {
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-right {
|
|
|
+ padding-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-right-lg {
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-right-xl {
|
|
|
+ padding-right: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-bottom-xs {
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-bottom-sm {
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-bottom {
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-bottom-lg {
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-bottom-xl {
|
|
|
+ padding-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-left-xs {
|
|
|
+ padding-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-left-sm {
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-left {
|
|
|
+ padding-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-left-lg {
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-left-xl {
|
|
|
+ padding-left: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lr-xs {
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lr-sm {
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lr {
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lr-lg {
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-lr-xl {
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-right: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-tb-xs {
|
|
|
+ padding-top: 5px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-tb-sm {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-tb {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-tb-lg {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.padding-tb-xl {
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+/* -- 浮动 -- */
|
|
|
+
|
|
|
+.cf::after, .cf::before {
|
|
|
+ content: " ";
|
|
|
+ display: table;
|
|
|
+}
|
|
|
+
|
|
|
+.cf::after {
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+.fl {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.fr {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 图片
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+image {
|
|
|
+ max-width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
+image.loading::before {
|
|
|
+ content: "";
|
|
|
+ background: #f5f5f5;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -2;
|
|
|
+}
|
|
|
+
|
|
|
+image.loading::after {
|
|
|
+ content: "\e7f1";
|
|
|
+ font-family: "iconfont";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: auto;
|
|
|
+ color: #ccc;
|
|
|
+ -webkit-animation: icon-spin 2s infinite linear;
|
|
|
+ animation: icon-spin 2s infinite linear;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+image.response {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 开关
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+switch, checkbox, radio {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+switch::after {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ content: "\e645";
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -8px;
|
|
|
+ left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: scale(0, 0);
|
|
|
+ transition: all 0.3s ease-in-out 0s;
|
|
|
+}
|
|
|
+
|
|
|
+switch[checked]::after {
|
|
|
+ transform: scale(1, 1);
|
|
|
+}
|
|
|
+
|
|
|
+switch::before {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ content: "\e646";
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -8px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: scale(1, 1);
|
|
|
+ transition: all 0.3s ease-in-out 0s;
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+
|
|
|
+radio::before, checkbox::before {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ content: "\e645";
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -8px;
|
|
|
+ right: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: scale(1, 1);
|
|
|
+ transition: all 0.3s ease-in-out 0s;
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+
|
|
|
+switch[checked]::before {
|
|
|
+ transform: scale(0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+switch .wx-switch-input {
|
|
|
+ background: #aaa !important;
|
|
|
+ border-color: #aaa;
|
|
|
+ padding: 0 30px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+radio-group {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+radio .wx-radio-input, checkbox .wx-checkbox-input {
|
|
|
+ margin: 0;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+checkbox.round .wx-checkbox-input {
|
|
|
+ border-radius: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+switch .wx-switch-input-checked::after {
|
|
|
+ margin-left: 10px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
|
|
|
+switch.radius .wx-switch-input::before {
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+switch .wx-switch-input::before, radio.radio::before,
|
|
|
+checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+radio.radio[checked]::after {
|
|
|
+ content: "";
|
|
|
+ background: transparent;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ z-index: 999;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ border-radius: 100px;
|
|
|
+ border: 8px solid #fff;
|
|
|
+}
|
|
|
+
|
|
|
+switch.sm, checkbox.sm, radio.sm {
|
|
|
+ transform: scale(0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.switch-sex::after {
|
|
|
+ content: "\e71c";
|
|
|
+}
|
|
|
+
|
|
|
+.switch-sex::before {
|
|
|
+ content: "\e71a";
|
|
|
+}
|
|
|
+
|
|
|
+.switch-sex .wx-switch-input {
|
|
|
+ background: #e54d42 !important;
|
|
|
+ border-color: #e54d42;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-sex[checked] .wx-switch-input {
|
|
|
+ background: #0081ff !important;
|
|
|
+ border-color: #0081ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 背景
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
|
|
|
+checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
|
|
|
+ border-color: #e54d42 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-orange::after, .lines-orange::after,
|
|
|
+switch.orange[checked] .wx-switch-input,
|
|
|
+checkbox.orange[checked] .wx-checkbox-input,
|
|
|
+radio.orange[checked] .wx-radio-input {
|
|
|
+ border-color: #f37b1d !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-yellow::after, .lines-yellow::after,
|
|
|
+switch.yellow[checked] .wx-switch-input,
|
|
|
+checkbox.yellow[checked] .wx-checkbox-input,
|
|
|
+radio.yellow[checked] .wx-radio-input {
|
|
|
+ border-color: #fbbd08 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
|
|
|
+checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
|
|
|
+ border-color: #8dc63f !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
|
|
|
+checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
|
|
|
+radio.green[checked] .wx-radio-input {
|
|
|
+ border-color: #39b54a !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
|
|
|
+checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
|
|
|
+ border-color: #1cbbb4 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
|
|
|
+checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
|
|
|
+ border-color: #0081ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-purple::after, .lines-purple::after,
|
|
|
+switch.purple[checked] .wx-switch-input,
|
|
|
+checkbox.purple[checked] .wx-checkbox-input,
|
|
|
+radio.purple[checked] .wx-radio-input {
|
|
|
+ border-color: #6739b6 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
|
|
|
+checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
|
|
|
+ border-color: #9c26b0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
|
|
|
+checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
|
|
|
+ border-color: #e03997 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
|
|
|
+checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
|
|
|
+ border-color: #a5673f !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
|
|
|
+checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
|
|
|
+ border-color: #8799a3 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
|
|
|
+checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
|
|
|
+ border-color: #aaa !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
|
|
|
+checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
|
|
|
+ border-color: #333 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
|
|
|
+checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
|
|
|
+ border-color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-red, switch.red[checked] .wx-switch-input,
|
|
|
+checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
|
|
|
+ background-color: #e54d42 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-orange, switch.orange[checked] .wx-switch-input,
|
|
|
+checkbox.orange[checked] .wx-checkbox-input,
|
|
|
+radio.orange[checked] .wx-radio-input {
|
|
|
+ background-color: #f37b1d !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-yellow, switch.yellow[checked] .wx-switch-input,
|
|
|
+checkbox.yellow[checked] .wx-checkbox-input,
|
|
|
+radio.yellow[checked] .wx-radio-input {
|
|
|
+ background-color: #fbbd08 !important;
|
|
|
+ color: #333 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-olive, switch.olive[checked] .wx-switch-input,
|
|
|
+checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
|
|
|
+ background-color: #8dc63f !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-green, switch.green[checked] .wx-switch-input,
|
|
|
+switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
|
|
|
+checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
|
|
|
+radio[checked] .wx-radio-input {
|
|
|
+ background-color: #39b54a !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-cyan, switch.cyan[checked] .wx-switch-input,
|
|
|
+checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
|
|
|
+ background-color: #1cbbb4 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-blue, switch.blue[checked] .wx-switch-input,
|
|
|
+checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
|
|
|
+ background-color: #0081ff !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-purple, switch.purple[checked] .wx-switch-input,
|
|
|
+checkbox.purple[checked] .wx-checkbox-input,
|
|
|
+radio.purple[checked] .wx-radio-input {
|
|
|
+ background-color: #6739b6 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mauve, switch.mauve[checked] .wx-switch-input,
|
|
|
+checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
|
|
|
+ background-color: #9c26b0 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-pink, switch.pink[checked] .wx-switch-input,
|
|
|
+checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
|
|
|
+ background-color: #e03997 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-brown, switch.brown[checked] .wx-switch-input,
|
|
|
+checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
|
|
|
+ background-color: #a5673f !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-grey, switch.grey[checked] .wx-switch-input,
|
|
|
+checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
|
|
|
+ background-color: #8799a3 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-gray, switch.gray[checked] .wx-switch-input,
|
|
|
+checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
|
|
|
+ background-color: #f0f0f0 !important;
|
|
|
+ color: #666 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-black, switch.black[checked] .wx-switch-input,
|
|
|
+checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
|
|
|
+ background-color: #333 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-white, switch.white[checked] .wx-switch-input,
|
|
|
+checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
|
|
|
+ background-color: #fff !important;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-shadeTop {
|
|
|
+ background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-shadeBottom {
|
|
|
+ background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.none-bg, .line-white, .lines-white {
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-red.light {
|
|
|
+ color: #e54d42 !important;
|
|
|
+ background: #fadbd9 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-orange.light {
|
|
|
+ color: #f37b1d !important;
|
|
|
+ background: #fde6d2 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-yellow.light {
|
|
|
+ color: #fbbd08 !important;
|
|
|
+ background: #fef2ce !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-olive.light {
|
|
|
+ color: #8dc63f !important;
|
|
|
+ background: #e8f4d9 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-green.light {
|
|
|
+ color: #39b54a !important;
|
|
|
+ background: #d7f0db !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-cyan.light {
|
|
|
+ color: #1cbbb4 !important;
|
|
|
+ background: #d2f1f0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-blue.light {
|
|
|
+ color: #0081ff !important;
|
|
|
+ background: #cce6ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-purple.light {
|
|
|
+ color: #6739b6 !important;
|
|
|
+ background: #e1d7f0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mauve.light {
|
|
|
+ color: #9c26b0 !important;
|
|
|
+ background: #ebd4ef !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-pink.light {
|
|
|
+ color: #e03997 !important;
|
|
|
+ background: #f9d7ea !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-brown.light {
|
|
|
+ color: #a5673f !important;
|
|
|
+ background: #ede1d9 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-grey.light {
|
|
|
+ color: #8799a3 !important;
|
|
|
+ background: #e7ebed !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-gray.light {
|
|
|
+ color: #666 !important;
|
|
|
+ background: #fadbd9 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-gray.light {
|
|
|
+ color: #888 !important;
|
|
|
+ background: #f1f1f1 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-red {
|
|
|
+ background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-orange {
|
|
|
+ background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-green {
|
|
|
+ background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-purple {
|
|
|
+ background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-pink {
|
|
|
+ background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gradual-blue {
|
|
|
+ background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-red"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-orange"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(217, 109, 26, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-yellow"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-olive"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-green"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-cyan"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-blue"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-purple"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-mauve"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-pink"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-brown"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-grey"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-gray"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow[class*="-black"] {
|
|
|
+ box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-img {
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mask {
|
|
|
+ background-color: #333;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mask::after {
|
|
|
+ content: "";
|
|
|
+ border-radius: inherit;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mask view, .bg-mask cover-view {
|
|
|
+ z-index: 5;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-mask>cover-view {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.bg-video {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-video video {
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 文本
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+.text-xs {
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-sm {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-df {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-lg {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-xl {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-xxl {
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-sl {
|
|
|
+ font-size: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-xsl {
|
|
|
+ font-size: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-Abc {
|
|
|
+ text-transform: Capitalize;
|
|
|
+}
|
|
|
+
|
|
|
+.text-ABC {
|
|
|
+ text-transform: Uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.text-abc {
|
|
|
+ text-transform: Lowercase;
|
|
|
+}
|
|
|
+
|
|
|
+.text-price::before {
|
|
|
+ content: "¥";
|
|
|
+ font-size: 80%;
|
|
|
+ margin-right: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-cut {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.text-bold {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.text-center {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.text-content {
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+.text-left {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.text-right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.text-red, .line-red, .lines-red {
|
|
|
+ color: #e54d42 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-orange, .line-orange, .lines-orange {
|
|
|
+ color: #f37b1d !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-yellow, .line-yellow, .lines-yellow {
|
|
|
+ color: #fbbd08 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-olive, .line-olive, .lines-olive {
|
|
|
+ color: #8dc63f !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-green, .line-green, .lines-green {
|
|
|
+ color: #39b54a !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-cyan, .line-cyan, .lines-cyan {
|
|
|
+ color: #1cbbb4 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-blue, .line-blue, .lines-blue {
|
|
|
+ color: #0081ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-purple, .line-purple, .lines-purple {
|
|
|
+ color: #6739b6 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-mauve, .line-mauve, .lines-mauve {
|
|
|
+ color: #9c26b0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-pink, .line-pink, .lines-pink {
|
|
|
+ color: #e03997 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-brown, .line-brown, .lines-brown {
|
|
|
+ color: #a5673f !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-grey, .line-grey, .lines-grey {
|
|
|
+ color: #8799a3 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-gray, .line-gray, .lines-gray {
|
|
|
+ color: #aaa !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-black, .line-black, .lines-black {
|
|
|
+ color: #333 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-white, .line-white, .lines-white {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 边框
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+/* -- 实线 -- */
|
|
|
+
|
|
|
+.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
|
|
|
+.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
|
|
|
+.dashed-right, .dashed-bottom, .dashed-left {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
|
|
|
+.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
|
|
|
+.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
|
|
|
+.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
|
|
|
+ content: " ";
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ border-radius: inherit;
|
|
|
+ transform: scale(0.5);
|
|
|
+ transform-origin: 0 0;
|
|
|
+ pointer-events: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.solid::after {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.solid-top::after {
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.solid-right::after {
|
|
|
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.solid-bottom::after {
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.solid-left::after {
|
|
|
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.solids::after {
|
|
|
+ border: 4rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.solids-top::after {
|
|
|
+ border-top: 4rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.solids-right::after {
|
|
|
+ border-right: 4rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.solids-bottom::after {
|
|
|
+ border-bottom: 4rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.solids-left::after {
|
|
|
+ border-left: 4rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+/* -- 虚线 -- */
|
|
|
+
|
|
|
+.dashed::after {
|
|
|
+ border: 1px dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.dashed-top::after {
|
|
|
+ border-top: 1px dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.dashed-right::after {
|
|
|
+ border-right: 1px dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.dashed-bottom::after {
|
|
|
+ border-bottom: 1px dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.dashed-left::after {
|
|
|
+ border-left: 1px dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+/* -- 阴影 -- */
|
|
|
+
|
|
|
+.shadow {
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-lg {
|
|
|
+ box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-warp {
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-warp:before, .shadow-warp:after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ top: 10px;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 10px;
|
|
|
+ width: 50%;
|
|
|
+ box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ transform: rotate(-3deg);
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-warp:after {
|
|
|
+ right: 10px;
|
|
|
+ left: auto;
|
|
|
+ transform: rotate(3deg);
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-blur {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.shadow-blur::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ background: inherit;
|
|
|
+ filter: blur(5px);
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ z-index: -1;
|
|
|
+ opacity: 0.4;
|
|
|
+ transform-origin: 0 0;
|
|
|
+ border-radius: inherit;
|
|
|
+ transform: scale(1, 1);
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 按钮
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+.round, button.icon {
|
|
|
+ border-radius: 5000px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.radius {
|
|
|
+ border-radius: 3px !important;
|
|
|
+}
|
|
|
+
|
|
|
+button {
|
|
|
+ position: relative;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 15px 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: visible;
|
|
|
+ color: #666;
|
|
|
+ background-color: #fff !important;
|
|
|
+ margin-left: initial;
|
|
|
+ transform: translate(0px, 0px);
|
|
|
+ margin-right: initial;
|
|
|
+}
|
|
|
+
|
|
|
+button::after, tag[class*="line-"]::after {
|
|
|
+ content: " ";
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ border: 1rpx solid rgba(0, 0, 0, 0.2);
|
|
|
+ transform: scale(0.5);
|
|
|
+ transform-origin: 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: inherit;
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+button[class*="line"]::after, tag.radius[class*="line"]::after {
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+button.round[class*="line"]::after, tag.round[class*="line"]::after {
|
|
|
+ border-radius: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+button[class*="lines"]::after {
|
|
|
+ border: 3px solid rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+button[class*="bg-"]::after {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+button.sm {
|
|
|
+ padding: 7px 10px 5px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+button.lg {
|
|
|
+ padding: 16px 20px 14px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+button.icon.sm {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+button.icon {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+button.icon.lg {
|
|
|
+ width: 41px;
|
|
|
+ height: 41px;
|
|
|
+}
|
|
|
+
|
|
|
+button.shadow-blur::before {
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ filter: blur(3px);
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
+button.button-hover {
|
|
|
+ transform: translate(1px, 1px);
|
|
|
+}
|
|
|
+
|
|
|
+.block {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+button.block {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+button[disabled] {
|
|
|
+ opacity: 0.6;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 徽章
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+tag {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ vertical-align: middle;
|
|
|
+ position: relative;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 6px 7px 5px;
|
|
|
+ line-height: 1;
|
|
|
+ background: #fff;
|
|
|
+ font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+tag[class*="line-"]::after {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+
|
|
|
+tag+tag {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+tag.sm {
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 5px 6px 3px;
|
|
|
+}
|
|
|
+
|
|
|
+capsule {
|
|
|
+ display: inline-flex;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+capsule + capsule {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+capsule tag {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+capsule tag[class*="line-"]:last-child::after {
|
|
|
+ border-left: 0px solid transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+capsule tag[class*="line-"]:first-child::after {
|
|
|
+ border-right: 0px solid transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+capsule.radius tag:first-child {
|
|
|
+ border-top-left-radius: 3px;
|
|
|
+ border-bottom-left-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {
|
|
|
+ border-top-right-radius: 6px;
|
|
|
+ border-bottom-right-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+capsule.round tag:first-child {
|
|
|
+ border-top-left-radius: 100px;
|
|
|
+ border-bottom-left-radius: 100px;
|
|
|
+ text-indent: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+capsule.round tag:last-child::after, capsule.round tag:last-child {
|
|
|
+ border-top-right-radius: 100px;
|
|
|
+ border-bottom-right-radius: 100px;
|
|
|
+ text-indent: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+tag.badge {
|
|
|
+ background: #dd514c;
|
|
|
+ border-radius: 100px;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -5px;
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 3px 5px 2px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+tag:empty {
|
|
|
+ padding: 4px;
|
|
|
+ top: -2px;
|
|
|
+ right: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 头像
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+avatar {
|
|
|
+ font-variant: small-caps;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ background: #ccc;
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ position: relative;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+avatar text {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ transform-origin: 0 center;
|
|
|
+ transform: scale(0.75) translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+avatar.sm {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+avatar > icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ transform-origin: 0 center;
|
|
|
+ transform: scale(1.2) translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+avatar.sm > icon {
|
|
|
+ transform: scale(0.75) translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+avatar.lg > icon {
|
|
|
+ transform: scale(1.75) translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+avatar.xl > icon {
|
|
|
+ transform: scale(2.2) translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+avatar.lg {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+avatar.xl {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+}
|
|
|
+
|
|
|
+avatar-group {
|
|
|
+ direction: rtl;
|
|
|
+ unicode-bidi: bidi-override;
|
|
|
+ padding: 0 5px 0 20px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+avatar-group avatar {
|
|
|
+ margin-left: -15px;
|
|
|
+ border: 2px solid #f1f1f1;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+avatar-group avatar.sm {
|
|
|
+ margin-left: -10px;
|
|
|
+ border: 1px solid #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 进度条
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+progress-bar {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 14px;
|
|
|
+ background-color: #ebeef5;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar+view, progress-bar+text {
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar.xs {
|
|
|
+ height: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar.sm {
|
|
|
+ height: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar view {
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-items: flex-end;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #fff;
|
|
|
+ background: #0081ff;
|
|
|
+ transition: width 0.6s ease;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar text {
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #666;
|
|
|
+ text-indent: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar.text-progress {
|
|
|
+ padding-right: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar.striped view {
|
|
|
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
|
+ background-size: 36px 36px;
|
|
|
+}
|
|
|
+
|
|
|
+progress-bar.active view {
|
|
|
+ animation: progress-bar-stripes 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes progress-bar-stripes {
|
|
|
+ from {
|
|
|
+ background-position: 36px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ background-position: 0 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 加载
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+load {
|
|
|
+ display: block;
|
|
|
+ line-height: 3em;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+load::before {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+load.loading::before {
|
|
|
+ content: "\e67a";
|
|
|
+ animation: icon-spin 2s infinite linear;
|
|
|
+}
|
|
|
+
|
|
|
+load.loading::after {
|
|
|
+ content: "加载中...";
|
|
|
+}
|
|
|
+
|
|
|
+load.over::before {
|
|
|
+ content: "\e64a";
|
|
|
+}
|
|
|
+
|
|
|
+load.over::after {
|
|
|
+ content: "没有更多了";
|
|
|
+}
|
|
|
+
|
|
|
+load.erro::before {
|
|
|
+ content: "\e658";
|
|
|
+}
|
|
|
+
|
|
|
+load.erro::after {
|
|
|
+ content: "加载失败";
|
|
|
+}
|
|
|
+
|
|
|
+load.load-icon::before {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+load.load-icon::after {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+load.load-icon.over {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 列表
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+.grayscale {
|
|
|
+ filter: grayscale(1);
|
|
|
+}
|
|
|
+
|
|
|
+list.menu {
|
|
|
+ padding: 0 15px;
|
|
|
+ background: #fff;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu.no-padding {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu+list.menu {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+list+list {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item {
|
|
|
+ position: relative;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ min-height: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item.cur {
|
|
|
+ background-color: #fcf7e9;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item:last-child {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu.no-padding>item {
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar.no-padding>item {
|
|
|
+ padding-left: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar.no-padding>item avatar {
|
|
|
+ left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu.no-padding>item.arrow {
|
|
|
+ padding-right: 33px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item .content {
|
|
|
+ line-height: 1.6em;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item button.content {
|
|
|
+ padding: 0;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item button.content::after {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
|
|
|
+list.menu>item .content>icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 1.4em;
|
|
|
+ height: 1.6em;
|
|
|
+ vertical-align: middle;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item .action {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+list>item.grayscale {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item .action tag:empty {
|
|
|
+ right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item.arrow {
|
|
|
+ padding-right: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item.arrow::after {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ display: block;
|
|
|
+ content: "\e6a3";
|
|
|
+ position: absolute;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #aaa;
|
|
|
+ line-height: 15px;
|
|
|
+ height: 15px;
|
|
|
+ width: 15px;
|
|
|
+ text-align: center;
|
|
|
+ top: 1px;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu.no-padding>item.arrow::after {
|
|
|
+ right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item avatar-group avatar {
|
|
|
+ border-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+list.card-menu {
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar>item>avatar {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar>item {
|
|
|
+ padding-left: 55px;
|
|
|
+ height: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu>item .content tag.sm {
|
|
|
+ font-size: 8px;
|
|
|
+ line-height: 80%;
|
|
|
+ padding: 4px 3px 2px;
|
|
|
+ margin-top: -3px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid {
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid>item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-right: 1rpx solid #eee;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid>item icon {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid>item text {
|
|
|
+ display: block;
|
|
|
+ color: #888;
|
|
|
+ margin-top: 5px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid>item tag {
|
|
|
+ left: 50%;
|
|
|
+ right: auto;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid.col-3>item:nth-child(3n) {
|
|
|
+ border-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid.col-4>item:nth-child(4n) {
|
|
|
+ border-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid.col-5>item:nth-child(5n) {
|
|
|
+ border-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid.no-border {
|
|
|
+ padding: 10px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+list.grid.no-border>item {
|
|
|
+ border: none !important;
|
|
|
+ padding-top: 5px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar.comment > item {
|
|
|
+ height: auto;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ padding-left: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+list.menu-avatar.comment avatar {
|
|
|
+ align-self: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 操作条
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+bar {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ height: 50px;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action:first-child {
|
|
|
+ margin-left: 15px;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action:first-child text {
|
|
|
+ display: inline-block;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: left;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+bar avatar:first-child {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action:first-child >icon[class*="icon"] {
|
|
|
+ margin-left: -0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action:last-child {
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action>icon[class*="icon"] {
|
|
|
+ font-size: 18px;
|
|
|
+ height: 100%;
|
|
|
+ width: 1.4em;
|
|
|
+}
|
|
|
+
|
|
|
+bar .action>icon[class*="icon"]+icon[class*="icon"] {
|
|
|
+ margin-left: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+bar .content {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ width: 400rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 8px;
|
|
|
+ margin: auto;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: none;
|
|
|
+ pointer-events: none;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+bar.btn-group {
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+bar.btn-group button {
|
|
|
+ padding: 10px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.btn-group button {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 10px;
|
|
|
+ max-width: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form {
|
|
|
+ background: #f5f5f5;
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form +.action {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form +.action text+icon {
|
|
|
+ margin-right: -0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form input {
|
|
|
+ flex: 1;
|
|
|
+ padding-right: 10px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form [class*="icon"] {
|
|
|
+ width: 2em;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form.round [class*="icon"] {
|
|
|
+ margin-left: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+bar .serach-form [class*="icon"]::before {
|
|
|
+ top: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.fixed, .nav.fixed {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1024;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+bar.foot {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1024;
|
|
|
+ box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .action {
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: block;
|
|
|
+ height: auto !important;
|
|
|
+ line-height: 1;
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop [class*="icon"] {
|
|
|
+ width: 50px !important;
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ height: auto !important;
|
|
|
+ margin: 0 auto 5px !important;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit {
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ flex: 2;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit:last-child {
|
|
|
+ flex: 2.6;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit+.submit {
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit button {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit:last-child button {
|
|
|
+ margin-left: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .submit+.submit button {
|
|
|
+ margin-left: 0px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.shop .action::after {
|
|
|
+ content: " ";
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transform: scale(0.5);
|
|
|
+ transform-origin: 0 0;
|
|
|
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+bar.input {
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.input input {
|
|
|
+ overflow: initial;
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ min-height: 32px;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.input .action {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.input .action [class*="icon"] {
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.input input+.action {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+bar.input .action:first-child [class*="icon"] {
|
|
|
+ margin-left: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+custom {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+custom bar {
|
|
|
+ padding-right: 110px;
|
|
|
+ box-shadow: 0px 0px 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 导航栏
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+.nav {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.nav item {
|
|
|
+ height: 45px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 45px;
|
|
|
+ margin: 0 5px;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav item.cur {
|
|
|
+ border-bottom: 2px solid;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 时间轴
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+timeline {
|
|
|
+ display: block;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+timeline time {
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #888;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item {
|
|
|
+ padding: 15px 15px 15px 60px;
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ color: #ccc;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 1rpx;
|
|
|
+ background: #ddd;
|
|
|
+ left: 30px;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 8;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item::before {
|
|
|
+ font-family: "iconfont";
|
|
|
+ content: "\e763";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ z-index: 9;
|
|
|
+ background: #fff;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ border: none;
|
|
|
+ line-height: 25px;
|
|
|
+ left: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item[class*="icon"]::before {
|
|
|
+ background: #fff;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ border: none;
|
|
|
+ line-height: 25px;
|
|
|
+ left: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item>.content {
|
|
|
+ background: #f1f1f1;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: block;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+timeline>item>.content+.content {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 聊天
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+chat {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+chat item {
|
|
|
+ display: flex;
|
|
|
+ padding: 15px 15px 35px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+chat item>avatar {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+chat item>.main {
|
|
|
+ max-width: calc(100% - 130px);
|
|
|
+ margin: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+chat item>image {
|
|
|
+ height: 160px;
|
|
|
+}
|
|
|
+
|
|
|
+chat item>.main .content {
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: inline-flex;
|
|
|
+ max-width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ color: #666;
|
|
|
+ font-size: 15px;
|
|
|
+ position: relative;
|
|
|
+ min-height: 40px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+chat item .date {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #aaa;
|
|
|
+ width: calc(100% - 160px);
|
|
|
+ bottom: 10px;
|
|
|
+ left: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+chat item .action {
|
|
|
+ padding: 0 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+chat item>.main .content::after {
|
|
|
+ content: "";
|
|
|
+ top: 12px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-bottom: 8px solid transparent;
|
|
|
+ border-top: 8px solid transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ border-right-color: #fff;
|
|
|
+ border-left: 8px solid #333;
|
|
|
+ border-right: 0 dotted;
|
|
|
+ border-left-color: #fff;
|
|
|
+ left: -7px;
|
|
|
+ right: initial;
|
|
|
+}
|
|
|
+
|
|
|
+chat item.self {
|
|
|
+ justify-content: flex-end;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+chat item.self>.main .content::after {
|
|
|
+ left: auto;
|
|
|
+ right: -7px;
|
|
|
+ border-right: 8px solid #fff;
|
|
|
+ border-left: 0 dotted;
|
|
|
+}
|
|
|
+
|
|
|
+chat item.self>.main .bg-green.content::after {
|
|
|
+ border-right-color: #39b50a;
|
|
|
+}
|
|
|
+
|
|
|
+chat info {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px auto;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 6px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #fff;
|
|
|
+ max-width: 400rpx;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 卡片
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+card {
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+card > item {
|
|
|
+ display: block;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+card > item.shadow-blur {
|
|
|
+ overflow: initial;
|
|
|
+}
|
|
|
+
|
|
|
+card.no-card > item {
|
|
|
+ margin: 0px;
|
|
|
+ border-radius: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+card.case .image {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+card.case .image image {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+card.case .image tag {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+card.case .image bar {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0px 15px;
|
|
|
+ word-wrap: normal;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+card.case.no-card .image {
|
|
|
+ margin: 15px 15px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+card.dynamic {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+card.dynamic>item {
|
|
|
+ display: block;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+card.dynamic>item > .text-content {
|
|
|
+ padding: 0 15px 0;
|
|
|
+ max-height: 6.4em;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+card.dynamic>item .square-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+card.dynamic>item .only-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+/* card.dynamic>item .comment {
|
|
|
+ padding: 10px;
|
|
|
+ background: #f1f1f1;
|
|
|
+ margin: 0 15px 15px;
|
|
|
+ border-radius: 3px;
|
|
|
+} */
|
|
|
+
|
|
|
+card.article {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item {
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item .title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 900;
|
|
|
+ word-wrap: normal;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #333;
|
|
|
+ line-height: 50px;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item .content {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item .content > image {
|
|
|
+ width: 120px;
|
|
|
+ height: 6.4em;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item .content .desc {
|
|
|
+ flex: 1;
|
|
|
+ width: 500rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+card.article>item .content .text-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888;
|
|
|
+ height: 4.8em;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 表单
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+form-group {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 100rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+form-group + form-group {
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+form-group .title {
|
|
|
+ text-align: justify;
|
|
|
+ padding-right: 15px;
|
|
|
+ font-size: 15px;
|
|
|
+ position: relative;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+form-group.top {
|
|
|
+ align-items: baseline;
|
|
|
+}
|
|
|
+
|
|
|
+form-group input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #555;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+form-group > icon[class*="icon-"] {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+form-group textarea, form-group textarea textarea {
|
|
|
+ margin: 16px 0 15px;
|
|
|
+ height: 4.8em;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 1.2em;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: content-box;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+
|
|
|
+form-group textarea::after {
|
|
|
+ content: "测试文字";
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+form-group .grid-square {
|
|
|
+ margin: 15px 0 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+form-group picker {
|
|
|
+ flex: 1;
|
|
|
+ padding-right: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+form-group picker .picker {
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+form-group picker::after {
|
|
|
+ font-family: iconfont !important;
|
|
|
+ display: block;
|
|
|
+ content: "\e6a3";
|
|
|
+ position: absolute;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #aaa;
|
|
|
+ line-height: 50px;
|
|
|
+ width: 30px;
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: -10px;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+form-group textarea[disabled], form-group textarea[disabled] .placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 模态窗口
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+modal-box {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1110;
|
|
|
+ opacity: 0;
|
|
|
+ outline: 0;
|
|
|
+ text-align: center;
|
|
|
+ -ms-transform: scale(1.185);
|
|
|
+ transform: scale(1.185);
|
|
|
+ backface-visibility: hidden;
|
|
|
+ perspective: 1000px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ transition: all 0.6s ease-in-out 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box::before {
|
|
|
+ content: "\200B";
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box.show {
|
|
|
+ opacity: 1;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+ -ms-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+
|
|
|
+dialog {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ width: 680rpx;
|
|
|
+ max-width: 100%;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box.bottom-modal::before {
|
|
|
+ vertical-align: bottom;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box.bottom-modal dialog {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box.bottom-modal {
|
|
|
+ margin-bottom: -500px;
|
|
|
+}
|
|
|
+
|
|
|
+modal-box.bottom-modal.show {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================
|
|
|
+ 轮播
|
|
|
+ ==================== */
|
|
|
+
|
|
|
+swiper.square-dot .wx-swiper-dot {
|
|
|
+ background: #fff;
|
|
|
+ opacity: 0.4;
|
|
|
+ width: 5px !important;
|
|
|
+ height: 5px !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+ transition: all 0.3s ease-in-out 0s !important;
|
|
|
+}
|
|
|
+
|
|
|
+swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
|
|
|
+ opacity: 1;
|
|
|
+ width: 15px !important;
|
|
|
+}
|
|
|
+
|
|
|
+swiper.round-dot .wx-swiper-dot {
|
|
|
+ /* background: #39b54a; */
|
|
|
+ width: 5px !important;
|
|
|
+ height: 5px !important;
|
|
|
+ top: -2px !important;
|
|
|
+ transition: all 0.3s ease-in-out 0s !important;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
|
|
|
+ width: 9px !important;
|
|
|
+ height: 9px !important;
|
|
|
+ top: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.screen-swiper {
|
|
|
+ min-height: 375rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.screen-swiper image {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card-swiper {
|
|
|
+ height: 420rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.card-swiper swiper-item {
|
|
|
+ width: 610rpx !important;
|
|
|
+ left: 70rpx !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 0px 35px;
|
|
|
+ overflow: initial !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card-swiper swiper-item .bg-img {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ transform: scale(0.9);
|
|
|
+ transition: all 0.2s ease-in 0s;
|
|
|
+}
|
|
|
+
|
|
|
+.card-swiper swiper-item.cur .bg-img {
|
|
|
+ transform: none;
|
|
|
+ transition: all 0.2s ease-in 0s;
|
|
|
+}
|
|
|
+
|
|
|
+.tower-swiper {
|
|
|
+ height: 420rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.tower-swiper .tower-item {
|
|
|
+ position: absolute;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 380rpx;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left:50%;
|
|
|
+ margin: auto;
|
|
|
+ transition: all 0.3s ease-in 0s;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+.tower-swiper .tower-item.none {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tower-swiper .tower-item .bg-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
dever
