/* ColorUi for uniApp v2.1.6 | by 文晓港 2019-05-31 10:44:24 仅供学习交流,如作它用所承受的法律责任一概与作者无关 *使用ColorUi开发扩展与插件时,请注明基于ColorUi开发 (QQ交流群:240787041) */ /* ================== main 初始化 ==================== */ /* #ifdef APP-ANDROID */ .my-body { background-color: #f1f1f1; font-size: 28rpx; color: #333333; font-family: Helvetica Neue, Helvetica, sans-serif; } .my-view, .my-scroll-view, .my-swiper, .my-button, .my-input, .my-textarea, .my-label, .my-navigator, .my-image { box-sizing: border-box; } /* #endif */ /* #ifndef APP-ANDROID */ body { background-color: #f1f1f1; font-size: 28rpx; color: #333333; font-family: Helvetica Neue, Helvetica, sans-serif; } view, scroll-view, swiper, button, input, textarea, label, navigator, image { box-sizing: border-box; } /* #endif */ .round { border-radius: 5000rpx; } .radius { border-radius: 6rpx; } /* ================== 图片 ==================== */ /* #ifndef APP-ANDROID */ image { max-width: 100%; display: inline-block; position: relative; z-index: 0; } image.loading::before { content: ""; background-color: #f5f5f5; display: block; position: absolute; width: 100%; height: 100%; z-index: -2; } image.loading::after { content: "\e7f1"; font-family: "cuIcon"; position: absolute; top: 0; left: 0; width: 32rpx; height: 32rpx; line-height: 32rpx; right: 0; bottom: 0; z-index: -1; font-size: 32rpx; margin: auto; color: #ccc; -webkit-animation: cuIcon-spin 2s infinite linear; animation: cuIcon-spin 2s infinite linear; display: block; } /* #endif */ .response { width: 100%; } /* ================== 开关 ==================== */ /* #ifndef APP-ANDROID */ switch, checkbox, radio { position: relative; } switch::after, switch::before { font-family: "cuIcon"; content: "\e645"; position: absolute; color: #ffffff !important; top: 0%; left: 0rpx; font-size: 26rpx; line-height: 26px; width: 50%; text-align: center; pointer-events: none; transform: scale(0, 0); transition: all 0.3s ease-in-out 0s; z-index: 9; bottom: 0; height: 26px; margin: auto; } switch::before { content: "\e646"; right: 0; transform: scale(1, 1); left: auto; } switch[checked]::after, switch.checked::after { transform: scale(1, 1); } switch[checked]::before, switch.checked::before { transform: scale(0, 0); } /* #endif */ /* #ifndef APP-ANDROID */ radio::before, checkbox::before { font-family: "cuIcon"; content: "\e645"; position: absolute; color: #ffffff !important; top: 50%; margin-top: -8px; right: 5px; font-size: 32rpx; line-height: 16px; pointer-events: none; transform: scale(1, 1); transition: all 0.3s ease-in-out 0s; z-index: 9; } radio .wx-radio-input, checkbox .wx-checkbox-input, radio .uni-radio-input, checkbox .uni-checkbox-input { margin: 0; width: 24px; height: 24px; } checkbox.round .wx-checkbox-input, checkbox.round .uni-checkbox-input { border-radius: 100rpx; } /* #endif */ /* #ifndef APP-ANDROID */ switch[checked]::before { transform: scale(0, 0); } switch .wx-switch-input, switch .uni-switch-input { border: none; padding: 0 24px; width: 48px; height: 26px; margin: 0; border-radius: 100rpx; } switch .wx-switch-input:not([class*="bg-"]), switch .uni-switch-input:not([class*="bg-"]) { background: #8799a3 !important; } switch .wx-switch-input::after, switch .uni-switch-input::after { margin: auto; width: 26px; height: 26px; border-radius: 100rpx; left: 0rpx; top: 0rpx; bottom: 0rpx; position: absolute; transform: scale(0.9, 0.9); transition: all 0.1s ease-in-out 0s; } switch .wx-switch-input.wx-switch-input-checked::after, switch .uni-switch-input.uni-switch-input-checked::after { margin: auto; left: 22px; box-shadow: none; transform: scale(0.9, 0.9); } radio-group { display: inline-block; } switch.radius .wx-switch-input::after, switch.radius .wx-switch-input, switch.radius .wx-switch-input::before, switch.radius .uni-switch-input::after, switch.radius .uni-switch-input, switch.radius .uni-switch-input::before { border-radius: 10rpx; } switch .wx-switch-input::before, radio.radio::before, checkbox .wx-checkbox-input::before, radio .wx-radio-input::before, switch .uni-switch-input::before, radio.radio::before, checkbox .uni-checkbox-input::before, radio .uni-radio-input::before { display: none; } radio.radio[checked]::after, radio.radio .uni-radio-input-checked::after { content: ""; background-color: transparent; display: block; position: absolute; width: 8px; height: 8px; z-index: 999; top: 0rpx; left: 0rpx; right: 0; bottom: 0; margin: auto; border-radius: 200rpx; /* #ifndef MP */ border: 7px solid #ffffff !important; /* #endif */ /* #ifdef MP */ border: 8px solid #ffffff !important; /* #endif */ } /* #endif */ /* #ifndef APP-ANDROID */ .switch-sex::after { content: "\e71c"; } .switch-sex::before { content: "\e71a"; } .switch-sex .wx-switch-input, .switch-sex .uni-switch-input { background: #e54d42 !important; border-color: #e54d42 !important; } .switch-sex.checked .uni-switch-input { background: #0081ff !important; border-color: #0081ff !important; } .switch-sex[checked] .wx-switch-input{ background: #0081ff !important; border-color: #0081ff !important; } switch.red[checked] .wx-switch-input.wx-switch-input-checked, checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input, switch.red.checked .uni-switch-input.uni-switch-input-checked, checkbox.red.checked .uni-checkbox-input, radio.red.checked .uni-radio-input { background-color: #e54d42 !important; border-color: #e54d42 !important; color: #ffffff !important; } switch.orange[checked] .wx-switch-input, checkbox.orange[checked] .wx-checkbox-input, radio.orange[checked] .wx-radio-input, switch.orange.checked .uni-switch-input, checkbox.orange.checked .uni-checkbox-input, radio.orange.checked .uni-radio-input { background-color: #f37b1d !important; border-color: #f37b1d !important; color: #ffffff !important; } switch.yellow[checked] .wx-switch-input, checkbox.yellow[checked] .wx-checkbox-input, radio.yellow[checked] .wx-radio-input, switch.yellow.checked .uni-switch-input, checkbox.yellow.checked .uni-checkbox-input, radio.yellow.checked .uni-radio-input { background-color: #fbbd08 !important; border-color: #fbbd08 !important; color: #333333 !important; } switch.olive[checked] .wx-switch-input, checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input, switch.olive.checked .uni-switch-input, checkbox.olive.checked .uni-checkbox-input, radio.olive.checked .uni-radio-input { background-color: #8dc63f !important; border-color: #8dc63f !important; color: #ffffff !important; } 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, switch.green.checked .uni-switch-input, switch.checked .uni-switch-input, checkbox.green.checked .uni-checkbox-input, checkbox.checked .uni-checkbox-input, radio.green.checked .uni-radio-input, radio.checked .uni-radio-input { background-color: #39b54a !important; border-color: #39b54a !important; color: #ffffff !important; border-color: #39B54A !important; } switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input, switch.cyan.checked .uni-switch-input, checkbox.cyan.checked .uni-checkbox-input, radio.cyan.checked .uni-radio-input { background-color: #1cbbb4 !important; border-color: #1cbbb4 !important; color: #ffffff !important; } switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input, switch.blue.checked .uni-switch-input, checkbox.blue.checked .uni-checkbox-input, radio.blue.checked .uni-radio-input { background-color: #0081ff !important; border-color: #0081ff !important; color: #ffffff !important; } switch.purple[checked] .wx-switch-input, checkbox.purple[checked] .wx-checkbox-input, radio.purple[checked] .wx-radio-input, switch.purple.checked .uni-switch-input, checkbox.purple.checked .uni-checkbox-input, radio.purple.checked .uni-radio-input { background-color: #6739b6 !important; border-color: #6739b6 !important; color: #ffffff !important; } switch.mauve[checked] .wx-switch-input, checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input, switch.mauve.checked .uni-switch-input, checkbox.mauve.checked .uni-checkbox-input, radio.mauve.checked .uni-radio-input { background-color: #9c26b0 !important; border-color: #9c26b0 !important; color: #ffffff !important; } switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input, switch.pink.checked .uni-switch-input, checkbox.pink.checked .uni-checkbox-input, radio.pink.checked .uni-radio-input { background-color: #e03997 !important; border-color: #e03997 !important; color: #ffffff !important; } switch.brown[checked] .wx-switch-input, checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input, switch.brown.checked .uni-switch-input, checkbox.brown.checked .uni-checkbox-input, radio.brown.checked .uni-radio-input { background-color: #a5673f !important; border-color: #a5673f !important; color: #ffffff !important; } switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input, switch.grey.checked .uni-switch-input, checkbox.grey.checked .uni-checkbox-input, radio.grey.checked .uni-radio-input { background-color: #8799a3 !important; border-color: #8799a3 !important; color: #ffffff !important; } switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input, switch.gray.checked .uni-switch-input, checkbox.gray.checked .uni-checkbox-input, radio.gray.checked .uni-radio-input { background-color: #f0f0f0 !important; border-color: #f0f0f0 !important; color: #333333 !important; } switch.black[checked] .wx-switch-input, checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input, switch.black.checked .uni-switch-input, checkbox.black.checked .uni-checkbox-input, radio.black.checked .uni-radio-input { background-color: #333333 !important; border-color: #333333 !important; color: #ffffff !important; } switch.white[checked] .wx-switch-input, checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input, switch.white.checked .uni-switch-input, checkbox.white.checked .uni-checkbox-input, radio.white.checked .uni-radio-input { background-color: #ffffff !important; border-color: #ffffff !important; color: #333333 !important; } /* #endif */ /* ================== 边框 ==================== */ /* -- 实线 -- */ .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; } /* #ifndef APP-ANDROID */ .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 { /* #ifndef APP-ANDROID */ content: " "; /* #endif */ width: 200%; height: 200%; position: absolute; top: 0; left: 0; /* #ifndef APP-ANDROID */ border-radius: inherit; /* #endif */ transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; } .solid::after { border: 1rpx solid rgba(0, 0, 0, 0.1); } .solid-top::after { border-top: 1rpx solid rgba(0, 0, 0, 0.1); } .solid-right::after { border-right: 1rpx solid rgba(0, 0, 0, 0.1); } .solid-bottom::after { border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); } .solid-left::after { border-left: 1rpx solid rgba(0, 0, 0, 0.1); } .solids::after { border: 8rpx solid #eee; } .solids-top::after { border-top: 8rpx solid #eee; } .solids-right::after { border-right: 8rpx solid #eee; } .solids-bottom::after { border-bottom: 8rpx solid #eee; } .solids-left::after { border-left: 8rpx solid #eee; } /* -- 虚线 -- */ .dashed::after { border: 1rpx dashed #ddd; } .dashed-top::after { border-top: 1rpx dashed #ddd; } .dashed-right::after { border-right: 1rpx dashed #ddd; } .dashed-bottom::after { border-bottom: 1rpx dashed #ddd; } .dashed-left::after { border-left: 1rpx dashed #ddd; } /* #endif */ /* -- 阴影 -- */ /* #ifndef APP-ANDROID */ .shadow[class*='white'] { --ShadowSize: 0 1rpx 6rpx; } /* #endif */ .shadow-lg { --ShadowSize: 0rpx 40rpx 100rpx 0rpx; } .shadow-warp { position: relative; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); } /* #ifndef APP-ANDROID */ .shadow-warp:before, .shadow-warp:after { position: absolute; content: ""; top: 20rpx; bottom: 30rpx; left: 20rpx; width: 50%; box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2); transform: rotate(-3deg); z-index: -1; } .shadow-warp:after { right: 20rpx; left: auto; transform: rotate(3deg); } /* #endif */ .shadow-blur { position: relative; } /* #ifndef APP-ANDROID */ .shadow-blur::before { content: ""; display: block; background: inherit; border-radius: inherit; filter: blur(10rpx); position: absolute; width: 100%; height: 100%; top: 10rpx; left: 10rpx; z-index: -1; opacity: 0.4; transform-origin: 0 0; transform: scale(1, 1); } /* #endif */ /* ================== 按钮 ==================== */ .cu-btn { position: relative; border: 0rpx; /* #ifndef APP-ANDROID */ display: inline-flex; margin-left: initial; margin-right: initial; text-decoration: none; align-items: center; justify-content: center; /* #endif */ box-sizing: border-box; padding: 0 30rpx; font-size: 28rpx; height: 64rpx; line-height: 1; text-align: center; overflow: visible; transform: translate(0rpx, 0rpx); } /* #ifndef APP-ANDROID */ .cu-btn::after { display: none; } .cu-btn:not([class*="bg-"]) { background-color: #f0f0f0; } .cu-btn[class*="line"] { background-color: transparent; } .cu-btn[class*="line"]::after { content: " "; display: block; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1rpx solid currentColor; transform: scale(0.5); transform-origin: 0 0; box-sizing: border-box; border-radius: 12rpx; z-index: 1; pointer-events: none; } .cu-btn.round[class*="line"]::after { border-radius: 1000rpx; } .cu-btn[class*="lines"]::after { border: 6rpx solid currentColor; } .cu-btn[class*="bg-"]::after { display: none; } /* #endif */ .cu-btn.sm { padding: 0 20rpx; font-size: 20rpx; height: 48rpx; } .cu-btn.lg { padding: 0 40rpx; font-size: 32rpx; height: 80rpx; } .cu-btn.cuIcon.sm { width: 48rpx; height: 48rpx; } .cu-btn.cuIcon { width: 64rpx; height: 64rpx; border-radius: 500rpx; padding: 0; } /* button.cuIcon.lg { width: 80rpx; height: 80rpx; } */ /* #ifndef APP-ANDROID */ .cu-btn.shadow-blur::before { top: 4rpx; left: 4rpx; filter: blur(6rpx); opacity: 0.6; } /* #endif */ .cu-btn.button-hover { transform: translate(1rpx, 1rpx); } /* #ifndef APP-ANDROID */ .block { display: block; } /* #endif */ .cu-btn.block { display: flex; } /* #ifndef APP-ANDROID */ .cu-btn[disabled] { opacity: 0.6; color: #ffffff; } /* #endif */ /* ================== 徽章 ==================== */ .cu-tag { font-size: 24rpx; position: relative; /* #ifndef APP-ANDROID */ vertical-align: middle; display: inline-flex; /* #endif */ align-items: center; justify-content: center; box-sizing: border-box; padding: 0rpx 16rpx; height: 48rpx; font-family: Helvetica Neue, Helvetica, sans-serif; white-space: nowrap; } /* #ifndef APP-ANDROID */ .cu-tag:not([class*="bg"]):not([class*="line"]) { background-color: #f1f1f1; } .cu-tag[class*="line-"]::after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1rpx solid currentColor; transform: scale(0.5); transform-origin: 0 0; box-sizing: border-box; border-radius: inherit; z-index: 1; pointer-events: none; } .cu-tag.radius[class*="line"]::after { border-radius: 12rpx; } .cu-tag.round[class*="line"]::after { border-radius: 1000rpx; } .cu-tag[class*="line-"]::after { border-radius: 0; } /* #endif */ .cu-tag+.cu-tag { margin-left: 10rpx; } .cu-tag.sm { font-size: 20rpx; padding: 0rpx 12rpx; height: 32rpx; } /* #ifndef APP-ANDROID */ .cu-capsule { display: inline-flex; vertical-align: middle; } /* #endif */ .cu-capsule+.cu-capsule { margin-left: 10rpx; } .cu-capsule .cu-tag { margin: 0; } /* #ifndef APP-ANDROID */ .cu-capsule .cu-tag[class*="line-"]:last-child::after { border-left: 0rpx solid transparent; } .cu-capsule .cu-tag[class*="line-"]:first-child::after { border-right: 0rpx solid transparent; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-capsule.radius .cu-tag:first-child { border-top-left-radius: 6rpx; border-bottom-left-radius: 6rpx; } .cu-capsule.radius .cu-tag:last-child::after{ border-top-right-radius: 12rpx; border-bottom-right-radius: 12rpx; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-capsule.radius .cu-tag[class*="line-"] { border-top-right-radius: 12rpx; border-bottom-right-radius: 12rpx; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-capsule.round .cu-tag:first-child { border-top-left-radius: 200rpx; border-bottom-left-radius: 200rpx; text-indent: 4rpx; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-capsule.round .cu-tag:last-child::after, .cu-capsule.round .cu-tag:last-child { border-top-right-radius: 200rpx; border-bottom-right-radius: 200rpx; text-indent: -4rpx; } /* #endif */ .cu-tag.badge { border-radius: 200rpx; position: absolute; top: -10rpx; right: -10rpx; font-size: 20rpx; padding: 0rpx 10rpx; height: 28rpx; color: #ffffff; } /* #ifndef APP-ANDROID */ .cu-tag.badge:not([class*="bg-"]) { background-color: #dd514c; } .cu-tag:empty:not([class*="cuIcon-"]) { padding: 0rpx; width: 16rpx; height: 16rpx; top: -4rpx; right: -4rpx; } .cu-tag[class*="cuIcon-"] { width: 32rpx; height: 32rpx; top: -4rpx; right: -4rpx; } /* #endif */ /* ================== 头像 ==================== */ .cu-avatar { margin: 0; padding: 0; /* #ifndef APP-ANDROID */ display: inline-flex; font-size: 1.5em; vertical-align: middle; font-variant: small-caps; background-size: cover; background-position: center; /* #endif */ text-align: center; justify-content: center; align-items: center; background-color: #ccc; color: #ffffff; white-space: nowrap; position: relative; width: 64rpx; height: 64rpx; } .cu-avatar.sm { width: 48rpx; height: 48rpx; /* #ifndef APP-ANDROID */ font-size: 1em; /* #endif */ } .cu-avatar.lg { width: 96rpx; height: 96rpx; /* #ifndef APP-ANDROID */ font-size: 2em; /* #endif */ } .cu-avatar.xl { width: 128rpx; height: 128rpx; /* #ifndef APP-ANDROID */ font-size: 2.5em; /* #endif */ } .cu-avatar .avatar-text { /* #ifndef APP-ANDROID */ font-size: 0.4em; /* #endif */ } .cu-avatar-group { padding: 0 10rpx 0 40rpx; /* #ifndef APP-ANDROID */ direction: rtl; unicode-bidi: bidi-override; display: inline-block; /* #endif */ } .cu-avatar-group .cu-avatar { margin-left: -30rpx; border: 4rpx solid #f1f1f1; /* #ifndef APP-ANDROID */ vertical-align: middle; /* #endif */ } .cu-avatar-group .cu-avatar.sm { margin-left: -20rpx; border: 1rpx solid #f1f1f1; } /* ================== 进度条 ==================== */ .cu-progress { overflow: hidden; height: 28rpx; background-color: #ebeef5; /* #ifndef APP-ANDROID */ display: inline-flex; /* #endif */ align-items: center; width: 100%; } /* #ifndef APP-ANDROID */ .cu-progress+view, .cu-progress+text { line-height: 1; } /* #endif */ .cu-progress.xs { height: 10rpx; } .cu-progress.sm { height: 20rpx; } /* #ifndef APP-ANDROID */ .cu-progress view { width: 0; height: 100%; align-items: center; display: flex; justify-items: flex-end; justify-content: space-around; font-size: 20rpx; color: #ffffff; transition: width 0.6s ease; } .cu-progress text { align-items: center; display: flex; font-size: 20rpx; color: #333333; text-indent: 10rpx; } /* #endif */ .cu-progress.text-progress { padding-right: 60rpx; } /* #ifndef APP-ANDROID */ .cu-progress.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: 72rpx 72rpx; } .cu-progress.active view { animation: progress-stripes 2s linear infinite; } @keyframes progress-stripes { from { background-position: 72rpx 0; } to { background-position: 0 0; } } /* #endif */ /* ================== 加载 ==================== */ .cu-load { /* #ifndef APP-ANDROID */ display: block; /* #endif */ line-height: 3em; text-align: center; } /* #ifndef APP-ANDROID */ .cu-load::before { font-family: "cuIcon"; display: inline-block; margin-right: 6rpx; } .cu-load.loading::before { content: "\e67a"; animation: cuIcon-spin 2s infinite linear; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-load.loading::after { content: "加载中..."; } .cu-load.over::before { content: "\e64a"; } .cu-load.over::after { content: "没有更多了"; } .cu-load.erro::before { content: "\e658"; } .cu-load.erro::after { content: "加载失败"; } .cu-load.load-cuIcon::before { font-size: 32rpx; } .cu-load.load-cuIcon::after { display: none; } /* #endif */ .cu-load.load-cuIcon.over { display: none; } .cu-load.load-modal { position: fixed; top: 0; right: 0; bottom: 140rpx; left: 0; margin: auto; width: 260rpx; height: 260rpx; background-color: #ffffff; border-radius: 10rpx; box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5); display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 28rpx; z-index: 9999; line-height: 2.4em; } /* #ifndef APP-ANDROID */ .cu-load.load-modal [class*="cuIcon-"] { font-size: 60rpx; } .cu-load.load-modal image { width: 70rpx; height: 70rpx; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-load.load-modal::after { position: absolute; background-color: #ffffff; border-radius: 50%; content: ""; animation: cuIcon-spin 1s infinite linear; width: 200rpx; height: 200rpx; font-size: 10px; border-top: 6rpx solid rgba(0, 0, 0, 0.05); border-right: 6rpx solid rgba(0, 0, 0, 0.05); border-bottom: 6rpx solid rgba(0, 0, 0, 0.05); border-left: 6rpx solid #f37b1d; z-index: -1; } /* #endif */ .load-progress { pointer-events: none; top: 0; position: fixed; width: 100%; left: 0; z-index: 2000; } .load-progress.hide { display: none; } .load-progress .load-progress-bar { position: relative; width: 100%; height: 4rpx; overflow: hidden; /* #ifndef APP-ANDROID */ transition: all 200ms ease 0s; /* #endif */ } .load-progress .load-progress-spinner { position: absolute; top: 10rpx; right: 10rpx; z-index: 2000; /* #ifndef APP-ANDROID */ display: block; /* #endif */ } /* #ifndef APP-ANDROID */ .load-progress .load-progress-spinner::after { border-radius: 50%; display: block; content: ""; width: 24rpx; height: 24rpx; box-sizing: border-box; border: solid 4rpx transparent; -webkit-box-sizing: border-box; border-top-color: inherit; border-left-color: inherit; -webkit-animation: load-progress-spinner 0.4s linear infinite; animation: load-progress-spinner 0.4s linear infinite; } /* #endif */ /* #ifndef APP-ANDROID */ @-webkit-keyframes load-progress-spinner { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load-progress-spinner { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* #endif */ /* ================== 列表 ==================== */ /* #ifndef APP-ANDROID */ .grayscale { filter: grayscale(1); } /* #endif */ .cu-list+.cu-list { margin-top: 30rpx } .cu-list>.cu-item { /* #ifndef APP-ANDROID */ transition: all .6s ease-in-out 0s; /* #endif */ transform: translateX(0rpx) } .cu-list>.cu-item.move-cur { transform: translateX(-260rpx) } .cu-list>.cu-item .move { position: absolute; right: 0; display: flex; width: 260rpx; height: 100%; transform: translateX(100%) } /* #ifndef APP-ANDROID */ .cu-list>.cu-item .move view { display: flex; flex: 1; justify-content: center; align-items: center } /* #endif */ .cu-list.menu-avatar { overflow: hidden; } .cu-list.menu-avatar>.cu-item { position: relative; display: flex; padding-right: 10rpx; height: 140rpx; background-color: #ffffff; justify-content: flex-end; align-items: center } .cu-list.menu-avatar>.cu-item>.cu-avatar { position: absolute; left: 30rpx } .cu-list.menu-avatar>.cu-item .flex .text-cut { max-width: 510rpx } .cu-list.menu-avatar>.cu-item .content { position: absolute; left: 146rpx; /* #ifndef APP-ANDROID */ width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx); /* #endif */ line-height: 1.6em; } /* #ifndef APP-ANDROID */ .cu-list.menu-avatar>.cu-item .content.flex-sub { width: calc(100% - 96rpx - 60rpx - 20rpx); } /* #endif */ /* #ifndef APP-ANDROID */ .cu-list.menu-avatar>.cu-item .content>view:first-child { font-size: 30rpx; display: flex; align-items: center } /* #endif */ .cu-list.menu-avatar>.cu-item .content .cu-tag.sm { /* #ifndef APP-ANDROID */ display: inline-block; /* #endif */ margin-left: 10rpx; height: 28rpx; font-size: 16rpx; line-height: 32rpx } .cu-list.menu-avatar>.cu-item .action { width: 100rpx; text-align: center } /* #ifndef APP-ANDROID */ .cu-list.menu-avatar>.cu-item .action view+view { margin-top: 10rpx } /* #endif */ .cu-list.menu-avatar.comment>.cu-item .content { position: relative; left: 0; width: auto; flex: 1; } .cu-list.menu-avatar.comment>.cu-item { padding: 30rpx 30rpx 30rpx 120rpx; height: auto } .cu-list.menu-avatar.comment .cu-avatar { align-self: flex-start } .cu-list.menu>.cu-item { position: relative; display: flex; padding: 0 30rpx; min-height: 100rpx; background-color: #ffffff; justify-content: space-between; align-items: center } /* #ifndef APP-ANDROID */ .cu-list.menu>.cu-item:last-child:after { border: none } /* #endif */ /* #ifndef APP-ANDROID */ .cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height: 200%; border-bottom: 1rpx solid #ddd; border-radius: inherit; content: " "; transform: scale(.5); transform-origin: 0 0; pointer-events: none } /* #endif */ .cu-list.menu>.cu-item.grayscale { background-color: #f5f5f5 } .cu-list.menu>.cu-item.cur { background-color: #fcf7e9 } .cu-list.menu>.cu-item.arrow { padding-right: 90rpx } /* #ifndef APP-ANDROID */ .cu-list.menu>.cu-item.arrow:before { position: absolute; top: 0; right: 30rpx; bottom: 0; display: block; content: "\e6a3"; margin: auto; width: 30rpx; height: 30rpx; color: #8799a3; text-align: center; font-size: 34rpx; font-family: cuIcon; line-height: 30rpx } /* #endif */ /* #ifndef APP-ANDROID */ .cu-list.menu>.cu-item button.content { padding: 0; background-color: transparent; justify-content: flex-start } .cu-list.menu>.cu-item button.content:after { display: none } /* #endif */ .cu-list.menu>.cu-item .cu-avatar-group .cu-avatar { border-color: #ffffff } /* #ifndef APP-ANDROID */ .cu-list.menu>.cu-item .content>view:first-child { display: flex; align-items: center } .cu-list.menu>.cu-item .content>text[class*=cuIcon] { display: inline-block; margin-right: 10rpx; width: 1.6em; text-align: center } .cu-list.menu>.cu-item .content>image { display: inline-block; margin-right: 10rpx; width: 1.6em; height: 1.6em; vertical-align: middle } /* #endif */ .cu-list.menu>.cu-item .content { font-size: 30rpx; line-height: 1.6em; flex: 1 } .cu-list.menu>.cu-item .content .cu-tag.sm { /* #ifndef APP-ANDROID */ display: inline-block; /* #endif */ margin-left: 10rpx; height: 28rpx; font-size: 16rpx; line-height: 32rpx } .cu-list.menu>.cu-item .action .cu-tag:empty { right: 10rpx } .cu-list.menu { /* #ifndef APP-ANDROID */ display: block; /* #endif */ overflow: hidden } /* #ifndef APP-ANDROID */ .cu-list.menu.sm-border>.cu-item:after { left: 30rpx; width: calc(200% - 120rpx) } /* #endif */ .cu-list.grid>.cu-item { position: relative; display: flex; padding: 20rpx 0 30rpx; transition-duration: 0s; flex-direction: column } /* #ifndef APP-ANDROID */ .cu-list.grid>.cu-item:after { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height: 200%; border-right: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); border-radius: inherit; content: " "; transform: scale(.5); transform-origin: 0 0; pointer-events: none } /* #endif */ /* #ifndef APP-ANDROID */ .cu-list.grid>.cu-item text { display: block; margin-top: 10rpx; color: #888; font-size: 26rpx; line-height: 40rpx } .cu-list.grid>.cu-item [class*=cuIcon] { position: relative; display: block; margin-top: 20rpx; width: 100%; font-size: 48rpx } /* #endif */ .cu-list.grid>.cu-item .cu-tag { right: auto; left: 50%; margin-left: 20rpx } .cu-list.grid { background-color: #ffffff; text-align: center } .cu-list.grid.no-border>.cu-item { padding-top: 10rpx; padding-bottom: 20rpx } /* #ifndef APP-ANDROID */ .cu-list.grid.no-border>.cu-item:after { border: none } /* #endif */ .cu-list.grid.no-border { padding: 20rpx 10rpx } /* #ifndef APP-ANDROID */ .cu-list.grid.col-3>.cu-item:nth-child(3n):after, .cu-list.grid.col-4>.cu-item:nth-child(4n):after, .cu-list.grid.col-5>.cu-item:nth-child(5n):after { border-right-width: 0 } /* #endif */ .cu-list.card-menu { overflow: hidden; margin-right: 30rpx; margin-left: 30rpx; border-radius: 20rpx } /* ================== 操作条 ==================== */ .cu-bar { display: flex; position: relative; align-items: center; min-height: 100rpx; justify-content: space-between; } .cu-bar .action { display: flex; align-items: center; height: 100%; justify-content: center; /* #ifndef APP-ANDROID */ max-width: 100%; /* #endif */ } .cu-bar .action.border-title { position: relative; top: -10rpx; } /* #ifndef APP-ANDROID */ .cu-bar .action.border-title text[class*="bg-"]:last-child { position: absolute; bottom: -0.5rem; min-width: 2rem; height: 6rpx; left: 0; } /* #endif */ .cu-bar .action.sub-title { position: relative; /* #ifndef APP-ANDROID */ top: -0.2rem; /* #endif */ } /* #ifndef APP-ANDROID */ .cu-bar .action.sub-title text { position: relative; z-index: 1; } .cu-bar .action.sub-title text[class*="bg-"]:last-child { position: absolute; display: inline-block; bottom: -0.2rem; border-radius: 6rpx; width: 100%; height: 0.6rem; left: 0.6rem; opacity: 0.3; z-index: 0; } .cu-bar .action.sub-title text[class*="text-"]:last-child { position: absolute; display: inline-block; bottom: -0.7rem; left: 0.5rem; opacity: 0.2; z-index: 0; text-align: right; font-weight: 900; font-size: 36rpx; } .cu-bar.justify-center .action.border-title text:last-child, .cu-bar.justify-center .action.sub-title text:last-child { left: 0; right: 0; margin: auto; text-align: center; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-bar .action:first-child { margin-left: 30rpx; font-size: 30rpx; } .cu-bar .action text.text-cut { text-align: left; width: 100%; } .cu-bar .cu-avatar:first-child { margin-left: 20rpx; } .cu-bar .action:first-child>text[class*="cuIcon-"] { margin-left: -0.3em; margin-right: 0.3em; } .cu-bar .action:last-child { margin-right: 30rpx; } .cu-bar .action>text[class*="cuIcon-"], .cu-bar .action>view[class*="cuIcon-"] { font-size: 36rpx; } .cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] { margin-left: 0.5em; } /* #endif */ .cu-bar .content { position: absolute; text-align: center; /* #ifndef APP-ANDROID */ width: calc(100% - 340rpx); cursor: none; /* #endif */ left: 0; right: 0; bottom: 0; top: 0; margin: auto; height: 60rpx; font-size: 32rpx; line-height: 60rpx; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .cu-bar.ios .content { bottom: 7px; height: 30px; font-size: 32rpx; line-height: 30px; } .cu-bar.btn-group { justify-content: space-around; } /* .cu-bar.btn-group button { padding: 20rpx 32rpx; } .cu-bar.btn-group button { flex: 1; margin: 0 20rpx; max-width: 50%; } */ .cu-bar .search-form { background-color: #f5f5f5; line-height: 64rpx; height: 64rpx; font-size: 24rpx; color: #333333; flex: 1; display: flex; align-items: center; margin: 0 30rpx; } .cu-bar .search-form+.action { margin-right: 30rpx; } /* #ifndef APP-ANDROID */ .cu-bar .search-form input { flex: 1; padding-right: 30rpx; height: 64rpx; line-height: 64rpx; font-size: 26rpx; background-color: transparent; } .cu-bar .search-form [class*="cuIcon-"] { margin: 0 0.5em 0 0.8em; } .cu-bar .search-form [class*="cuIcon-"]::before { top: 0rpx; } /* #endif */ .cu-bar.fixed, .nav.fixed { position: fixed; width: 100%; top: 0; z-index: 1024; box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); } .cu-bar.foot { position: fixed; width: 100%; bottom: 0; z-index: 1024; box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1); } .cu-bar.tabbar { padding: 0; /* #ifndef APP-ANDROID */ height: calc(100rpx + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); /* #endif */ } .cu-tabbar-height { min-height: 100rpx; /* #ifndef APP-ANDROID */ height: calc(100rpx + env(safe-area-inset-bottom) / 2); /* #endif */ } .cu-bar.tabbar.shadow { box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1); } .cu-bar.tabbar .action { font-size: 22rpx; position: relative; flex: 1; text-align: center; padding: 0; /* #ifndef APP-ANDROID */ display: block; overflow: initial; background-color: inherit; /* #endif */ height: auto; line-height: 1; margin: 0; } .cu-bar.tabbar.shop .action { width: 140rpx; flex: initial; } .cu-bar.tabbar .action.add-action { position: relative; z-index: 2; padding-top: 50rpx; } /* #ifndef APP-ANDROID */ .cu-bar.tabbar .action.add-action [class*="cuIcon-"] { position: absolute; width: 70rpx; z-index: 2; height: 70rpx; border-radius: 50%; line-height: 70rpx; font-size: 50rpx; top: -35rpx; left: 0; right: 0; margin: auto; padding: 0; } .cu-bar.tabbar .action.add-action::after { position: absolute; width: 100rpx; height: 100rpx; top: -50rpx; left: 0; right: 0; margin: auto; box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08); border-radius: 50rpx; background-color: inherit; content: ""; z-index: 0; } .cu-bar.tabbar .action.add-action::before { position: absolute; width: 100rpx; height: 30rpx; bottom: 30rpx; left: 0; right: 0; margin: auto; background-color: inherit; content: ""; z-index: 1; } /* #endif */ .cu-bar.tabbar .btn-group { flex: 1; display: flex; justify-content: space-around; align-items: center; padding: 0 10rpx; } /* #ifndef APP-ANDROID */ .cu-bar.tabbar button.action::after { border: 0; } .cu-bar.tabbar .action [class*="cuIcon-"] { width: 100rpx; position: relative; display: block; height: auto; margin: 0 auto 10rpx; text-align: center; font-size: 40rpx; } /* #endif */ .cu-bar.tabbar .action .cuIcon-cu-image { margin: 0 auto; } /* #ifndef APP-ANDROID */ .cu-bar.tabbar .action .cuIcon-cu-image image { width: 50rpx; height: 50rpx; display: inline-block; } /* #endif */ .cu-bar.tabbar .submit { align-items: center; display: flex; justify-content: center; text-align: center; position: relative; flex: 2; align-self: stretch; } /* #ifndef APP-ANDROID */ .cu-bar.tabbar .submit:last-child { flex: 2.6; } .cu-bar.tabbar .submit+.submit { flex: 2; } .cu-bar.tabbar.border .action::before { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; transform: scale(0.5); transform-origin: 0 0; border-right: 1rpx solid rgba(0, 0, 0, 0.1); z-index: 3; } .cu-bar.tabbar.border .action:last-child:before { display: none; } /* #endif */ .cu-bar.input { padding-right: 20rpx; background-color: #ffffff; } /* #ifndef APP-ANDROID */ .cu-bar.input input { overflow: initial; line-height: 64rpx; height: 64rpx; min-height: 64rpx; flex: 1; font-size: 30rpx; margin: 0 20rpx; } /* #endif */ .cu-bar.input .action { margin-left: 20rpx; } /* #ifndef APP-ANDROID */ .cu-bar.input .action [class*="cuIcon-"] { font-size: 48rpx; } .cu-bar.input input+.action { margin-right: 20rpx; margin-left: 0rpx; } .cu-bar.input .action:first-child [class*="cuIcon-"] { margin-left: 0rpx; } /* #endif */ .cu-custom { /* #ifndef APP-ANDROID */ display: block; /* #endif */ position: relative; } /* #ifndef APP-ANDROID */ .cu-custom .cu-bar .content { width: calc(100% - 440rpx); } /* #endif */ /* #ifdef MP-ALIPAY */ .cu-custom .cu-bar .action .cuIcon-back { opacity: 0; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-custom .cu-bar .content image { height: 60rpx; width: 240rpx; } /* #endif */ .cu-custom .cu-bar { min-height: 0px; /* #ifdef MP-WEIXIN */ padding-right: 220rpx; /* #endif */ /* #ifdef MP-ALIPAY */ padding-right: 150rpx; /* #endif */ box-shadow: 0rpx 0rpx 0rpx; z-index: 9999; } .cu-custom .cu-bar .border-custom { position: relative; background: rgba(0, 0, 0, 0.15); border-radius: 1000rpx; height: 30px; } /* #ifndef APP-ANDROID */ .cu-custom .cu-bar .border-custom::after { width: 200%; height: 200%; position: absolute; top: 0; left: 0; border-radius: inherit; content: " "; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; border: 1rpx solid #ffffff; opacity: 0.5; } .cu-custom .cu-bar .border-custom::before { content: " "; width: 1rpx; height: 110%; position: absolute; top: 22.5%; left: 0; right: 0; margin: auto; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; opacity: 0.6; background-color: #ffffff; } .cu-custom .cu-bar .border-custom text { display: block; flex: 1; margin: auto !important; text-align: center; font-size: 34rpx; } /* #endif */ /* ================== 导航栏 ==================== */ .nav { white-space: nowrap; } /* #ifdef WEB */ ::-webkit-scrollbar { display: none; } /* #endif */ .nav .cu-item { height: 90rpx; /* #ifndef APP-ANDROID */ display: inline-block; /* #endif */ line-height: 90rpx; margin: 0 10rpx; padding: 0 20rpx; } .nav .cu-item.cur { border-bottom: 4rpx solid; } /* ================== 时间轴 ==================== */ .cu-timeline { /* #ifndef APP-ANDROID */ display: block; /* #endif */ background-color: #ffffff; } .cu-timeline .cu-time { width: 120rpx; text-align: center; padding: 20rpx 0; font-size: 26rpx; color: #888; /* #ifndef APP-ANDROID */ display: block; /* #endif */ } .cu-timeline>.cu-item { padding: 30rpx 30rpx 30rpx 120rpx; position: relative; /* #ifndef APP-ANDROID */ display: block; /* #endif */ z-index: 0; } /* #ifndef APP-ANDROID */ .cu-timeline>.cu-item:not([class*="text-"]) { color: #ccc; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-timeline>.cu-item::after { display: block; content: ""; position: absolute; width: 1rpx; background-color: #ddd; left: 60rpx; height: 100%; top: 0; z-index: 8; } .cu-timeline>.cu-item::before { font-family: "cuIcon"; display: block; position: absolute; top: 36rpx; z-index: 9; background-color: #ffffff; width: 50rpx; height: 50rpx; text-align: center; border: none; line-height: 50rpx; left: 36rpx; } .cu-timeline>.cu-item:not([class*="cuIcon-"])::before { content: "\e763"; } .cu-timeline>.cu-item[class*="cuIcon-"]::before { background-color: #ffffff; width: 50rpx; height: 50rpx; text-align: center; border: none; line-height: 50rpx; left: 36rpx; } /* #endif */ .cu-timeline>.cu-item>.content { padding: 30rpx; border-radius: 6rpx; /* #ifndef APP-ANDROID */ display: block; /* #endif */ line-height: 1.6; } /* #ifndef APP-ANDROID */ .cu-timeline>.cu-item>.content:not([class*="bg-"]) { background-color: #f1f1f1; color: #333333; } /* #endif */ .cu-timeline>.cu-item>.content+.content { margin-top: 20rpx; } /* ================== 聊天 ==================== */ .cu-chat { display: flex; flex-direction: column; } .cu-chat .cu-item { display: flex; padding: 30rpx 30rpx 70rpx; position: relative; } .cu-chat .cu-item>.cu-avatar { width: 80rpx; height: 80rpx; } .cu-chat .cu-item>.main { /* #ifndef APP-ANDROID */ max-width: calc(100% - 260rpx); /* #endif */ margin: 0 40rpx; display: flex; align-items: center; } /* #ifndef APP-ANDROID */ .cu-chat .cu-item>image { height: 320rpx; } /* #endif */ .cu-chat .cu-item>.main .content { padding: 20rpx; border-radius: 6rpx; /* #ifndef APP-ANDROID */ display: inline-flex; max-width: 100%; /* #endif */ align-items: center; font-size: 30rpx; position: relative; min-height: 80rpx; line-height: 40rpx; text-align: left; } /* #ifndef APP-ANDROID */ .cu-chat .cu-item>.main .content:not([class*="bg-"]) { background-color: #ffffff; color: #333333; } /* #endif */ .cu-chat .cu-item .date { position: absolute; font-size: 24rpx; color: #8799a3; /* #ifndef APP-ANDROID */ width: calc(100% - 320rpx); /* #endif */ bottom: 20rpx; left: 160rpx; } .cu-chat .cu-item .action { padding: 0 30rpx; display: flex; align-items: center; } /* #ifndef APP-ANDROID */ .cu-chat .cu-item>.main .content::after { top: 27rpx; transform: rotate(45deg); position: absolute; z-index: 100; display: inline-block; background-color: inherit; right: initial; content: ""; overflow: hidden; width: 24rpx; height: 24rpx; left: -12rpx; } .cu-chat .cu-item.self>.main .content::after { left: auto; right: -12rpx; } .cu-chat .cu-item>.main .content::before { top: 30rpx; transform: rotate(45deg); position: absolute; z-index: -1; /* #ifndef APP-ANDROID */ display: inline-block; background-color: inherit; right: initial; content: ""; filter: blur(5rpx); /* #endif */ overflow: hidden; width: 24rpx; height: 24rpx; left: -12rpx; opacity: 0.3; } .cu-chat .cu-item>.main .content:not([class*="bg-"])::before { background-color: #333333; opacity: 0.1; } .cu-chat .cu-item.self>.main .content::before { left: auto; right: -12rpx; } /* #endif */ .cu-chat .cu-item.self { justify-content: flex-end; text-align: right; } .cu-chat .cu-info { /* #ifndef APP-ANDROID */ display: inline-block; /* #endif */ margin: 20rpx auto; font-size: 24rpx; padding: 8rpx 12rpx; background-color: rgba(0, 0, 0, 0.2); border-radius: 6rpx; color: #ffffff; max-width: 400rpx; line-height: 1.4; } /* ================== 卡片 ==================== */ .cu-card { /* #ifndef APP-ANDROID */ display: block; /* #endif */ overflow: hidden; } .cu-card>.cu-item { /* #ifndef APP-ANDROID */ display: block; /* #endif */ background-color: #ffffff; overflow: hidden; border-radius: 10rpx; margin: 30rpx; } /* #ifndef APP-ANDROID */ .cu-card>.cu-item.shadow-blur { overflow: initial; } /* #endif */ .cu-card.no-card>.cu-item { margin: 0rpx; border-radius: 0rpx; } .cu-card .grid.grid-square { margin-bottom: -20rpx; } .cu-card.case .image { position: relative; } /* #ifndef APP-ANDROID */ .cu-card.case .image image { width: 100%; } /* #endif */ .cu-card.case .image .cu-tag { position: absolute; right: 0; top: 0; } .cu-card.case .image .cu-bar { position: absolute; bottom: 0; width: 100%; background-color: transparent; padding: 0rpx 30rpx; } .cu-card.case.no-card .image { margin: 30rpx 30rpx 0; overflow: hidden; border-radius: 10rpx; } /* #ifndef APP-ANDROID */ .cu-card.dynamic { display: block; } /* #endif */ .cu-card.dynamic>.cu-item { /* #ifndef APP-ANDROID */ display: block; /* #endif */ background-color: #ffffff; overflow: hidden; } .cu-card.dynamic>.cu-item>.text-content { padding: 0 30rpx 0; /* #ifndef APP-ANDROID */ max-height: 6.4em; /* #endif */ overflow: hidden; font-size: 30rpx; margin-bottom: 20rpx; } .cu-card.dynamic>.cu-item .square-img { width: 100%; height: 200rpx; border-radius: 6rpx; } .cu-card.dynamic>.cu-item .only-img { width: 100%; height: 320rpx; border-radius: 6rpx; } /* #ifndef APP-ANDROID */ card.dynamic>.cu-item .comment { padding: 20rpx; background-color: #f1f1f1; margin: 0 30rpx 30rpx; border-radius: 6rpx; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-card.article { display: block; } /* #endif */ .cu-card.article>.cu-item { padding-bottom: 30rpx; } .cu-card.article>.cu-item .title { font-size: 30rpx; /* #ifndef APP-ANDROID */ font-weight: 900; /* #endif */ color: #333333; line-height: 100rpx; padding: 0 30rpx; } .cu-card.article>.cu-item .content { display: flex; padding: 0 30rpx; } /* #ifndef APP-ANDROID */ .cu-card.article>.cu-item .content>image { width: 240rpx; height: 6.4em; margin-right: 20rpx; border-radius: 6rpx; } /* #endif */ .cu-card.article>.cu-item .content .desc { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .cu-card.article>.cu-item .content .text-content { font-size: 28rpx; color: #888; /* #ifndef APP-ANDROID */ height: 4.8em; /* #endif */ overflow: hidden; } /* ================== 表单 ==================== */ .cu-form-group { background-color: #ffffff; padding: 1rpx 30rpx; display: flex; align-items: center; min-height: 100rpx; justify-content: space-between; } .cu-form-group+.cu-form-group { border-top: 1rpx solid #eee; } .cu-form-group .title { /* #ifndef APP-ANDROID */ text-align: justify; /* #endif */ padding-right: 30rpx; font-size: 30rpx; position: relative; height: 60rpx; line-height: 60rpx; } .cu-form-group.align-start .title { margin-top: 32rpx; /* #ifndef APP-ANDROID */ height: 1em; line-height: 1em; /* #endif */ } /* #ifndef APP-ANDROID */ .cu-form-group input { flex: 1; font-size: 30rpx; color: #555; padding-right: 20rpx; } .cu-form-group>text[class*="cuIcon-"] { font-size: 36rpx; padding: 0; box-sizing: border-box; } .cu-form-group textarea { margin: 32rpx 0 30rpx; height: 4.6em; width: 100%; line-height: 1.2em; flex: 1; font-size: 28rpx; padding: 0; } .cu-form-group picker { flex: 1; padding-right: 40rpx; overflow: hidden; position: relative; } .cu-form-group picker .picker { line-height: 100rpx; font-size: 28rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; text-align: right; } .cu-form-group picker::after { font-family: cuIcon; /* #ifndef APP-ANDROID */ display: block; /* #endif */ content: "\e6a3"; position: absolute; font-size: 34rpx; color: #8799a3; line-height: 100rpx; width: 60rpx; text-align: center; top: 0; bottom: 0; right: -20rpx; margin: auto; } .cu-form-group textarea[disabled], .cu-form-group textarea[disabled] .placeholder { color: transparent; } /* #endif */ .uni-form-item{ margin-bottom: 22px; } .uni-form-item .title{ display: flex; flex-direction: row; width: 20%; justify-content: flex-start; font-size: 14px; color: #606266; align-items: center; text-align: left; } .uni-form-item .uni-input{ font-size: 14px; border: 1px solid #dcdfe6; border-radius: 4px; padding-left: 10px; height: 35px; width: 80%; } .uni-form-item .uni-icon{ padding: 0 5px; } .uni-form-item .my-blur{ border: 1px solid #dcdfe6; } .uni-form-item .my-focus{ border: 1px solid #2979ff; } .uni-form-item .group-item{ margin-right: 25px; } .uni-form-item .group-item .my-radio{ transform: scale(0.8) } .uni-form-item .group-item .my-text{ display: flex; align-items: center; font-size: 14px; } /* ================== 模态窗口 ==================== */ .cu-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1110; opacity: 0; text-align: center; transform: scale(1.185); background: rgba(0, 0, 0, 0.6); /* #ifndef APP-ANDROID */ transition: all 0.3s ease-in-out 0s; -ms-transform: scale(1.185); backface-visibility: hidden; perspective: 2000rpx; outline: 0; /* #endif */ pointer-events: none; } /* #ifndef APP-ANDROID */ .cu-modal::before { content: "\200B"; display: inline-block; vertical-align: middle; height: 100%; } /* #endif */ .cu-modal.show { opacity: 1; /* #ifndef APP-ANDROID */ transition-duration: 0.3s; -ms-transform: scale(1); transform: scale(1); overflow-x: hidden; overflow-y: auto; pointer-events: auto; /* #endif */ } .cu-dialog { position: relative; /* #ifndef APP-ANDROID */ display: inline-block; vertical-align: middle; /* #endif */ margin-left: auto; margin-right: auto; width: 680rpx; /* #ifndef APP */ max-width: 100%; /* #endif */ background-color: #f8f8f8; border-radius: 10rpx; overflow: hidden; } /* #ifndef APP-ANDROID */ .cu-modal.bottom-modal::before { vertical-align: bottom; } /* #endif */ .cu-modal.bottom-modal .cu-dialog { width: 100%; border-radius: 0; } .cu-modal.bottom-modal { margin-bottom: -1000rpx; } .cu-modal.bottom-modal.show { margin-bottom: 0; } .cu-modal.drawer-modal { transform: scale(1); display: flex; } .cu-modal.drawer-modal .cu-dialog { height: 100%; min-width: 200rpx; border-radius: 0; /* #ifndef APP-ANDROID */ margin: initial; /* #endif */ transition-duration: 0.3s; } .cu-modal.drawer-modal.justify-start .cu-dialog { transform: translateX(-100%); } .cu-modal.drawer-modal.justify-end .cu-dialog { transform: translateX(100%); } .cu-modal.drawer-modal.show .cu-dialog { transform: translateX(0%); } /* #ifndef APP-ANDROID */ .cu-modal .cu-dialog>.cu-bar:first-child .action{ min-width: 100rpx; margin-right: 0; min-height: 100rpx; } /* #endif */ /* ================== 轮播 ==================== */ .screen-swiper { min-height: 375rpx; } /* #ifdef APP-ANDROID */ .screen-swiper .my-image, .screen-swiper .my-image, .swiper-item .my-image, .swiper-item .my-image { width: 100%; height: 100%; margin: 0; pointer-events: none; } /* #endif */ /* #ifndef APP-ANDROID */ swiper .a-swiper-dot { display: inline-block; width: 16rpx; height: 16rpx; background: rgba(0, 0, 0, .3); border-radius: 50%; vertical-align: middle; } swiper[class*="-dot"] .wx-swiper-dots, swiper[class*="-dot"] .a-swiper-dots, swiper[class*="-dot"] .uni-swiper-dots { display: flex; align-items: center; width: 100%; justify-content: center; } swiper.square-dot .wx-swiper-dot, swiper.square-dot .a-swiper-dot, swiper.square-dot .uni-swiper-dot { background-color: #ffffff; opacity: 0.4; width: 10rpx; height: 10rpx; border-radius: 20rpx; margin: 0 8rpx !important; } swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active, swiper.square-dot .a-swiper-dot.a-swiper-dot-active, swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active { opacity: 1; width: 30rpx; } swiper.round-dot .wx-swiper-dot, swiper.round-dot .a-swiper-dot, swiper.round-dot .uni-swiper-dot { width: 10rpx; height: 10rpx; position: relative; margin: 4rpx 8rpx !important; } swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after, swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after, swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after { content: ""; position: absolute; width: 10rpx; height: 10rpx; top: 0rpx; left: 0rpx; right: 0; bottom: 0; margin: auto; background-color: #ffffff; border-radius: 20rpx; } swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active, swiper.round-dot .a-swiper-dot.a-swiper-dot-active, swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active { width: 18rpx; height: 18rpx; } .screen-swiper image, .screen-swiper image, .swiper-item image, .swiper-item image { width: 100%; display: block; height: 100%; margin: 0; pointer-events: none; } /* #endif */ .card-swiper { height: 420rpx !important; } /* #ifndef APP-ANDROID */ .card-swiper swiper-item { width: 610rpx !important; left: 70rpx; box-sizing: border-box; padding: 40rpx 0rpx 70rpx; overflow: initial; } .card-swiper swiper-item .swiper-item { width: 100%; display: block; height: 100%; border-radius: 10rpx; transform: scale(0.9); /* #ifndef APP-ANDROID */ transition: all 0.2s ease-in 0s; /* #endif */ overflow: hidden; } .card-swiper swiper-item.cur .swiper-item { transform: none; /* #ifndef APP-ANDROID */ transition: all 0.2s ease-in 0s; /* #endif */ } /* #endif */ .tower-swiper { height: 420rpx; position: relative; max-width: 750rpx; overflow: hidden; } .tower-swiper .tower-item { position: absolute; width: 300rpx; height: 380rpx; top: 0; bottom: 0; left: 50%; margin: auto; /* #ifndef APP-ANDROID */ transition: all 0.2s ease-in 0s; /* #endif */ opacity: 1; } .tower-swiper .tower-item.none { opacity: 0; } .tower-swiper .tower-item .swiper-item { width: 100%; height: 100%; border-radius: 6rpx; overflow: hidden; } /* ================== 步骤条 ==================== */ .cu-steps { display: flex; } /* #ifndef APP-ANDROID */ scroll-view.cu-steps { display: block; white-space: nowrap; } scroll-view.cu-steps .cu-item { display: inline-block; } /* #endif */ .cu-steps .cu-item { flex: 1; text-align: center; position: relative; min-width: 100rpx; } /* #ifndef APP-ANDROID */ .cu-steps .cu-item:not([class*="text-"]) { color: #8799a3; } /* #endif */ /* #ifndef APP-ANDROID */ .cu-steps .cu-item [class*="cuIcon-"]{ display: block; font-size: 40rpx; line-height: 80rpx; } /* #endif */ .cu-steps .cu-item .num { /* #ifndef APP-ANDROID */ display: block; /* #endif */ font-size: 40rpx; line-height: 80rpx; } /* #ifndef APP-ANDROID */ .cu-steps .cu-item::before, .cu-steps .cu-item::after, .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after { display: block; width: calc(100% - 80rpx); left: calc(0px - (100% - 80rpx) / 2); content: ""; position: absolute; height: 0px; border-bottom: 1px solid #ccc; top: 40rpx; z-index: 0; } .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after { content: "\e6a3"; font-family: 'cuIcon'; height: 30rpx; border-bottom-width: 0px; line-height: 30rpx; top: 0; bottom: 0; margin: auto; color: #ccc; } .cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after { bottom: 40rpx; /* #ifndef APP-ANDROID */ top: initial; /* #endif */ } .cu-steps .cu-item::after { /* #ifdef WEB */ border-bottom: 1px solid currentColor; /* #endif */ width: 0px; /* #ifndef APP-ANDROID */ transition: all 0.3s ease-in-out 0s; /* #endif */ } /* #ifndef APP-ANDROID */ .cu-steps .cu-item[class*="text-"]::after { width: calc(100% - 80rpx); /* #ifdef WEB */ color: currentColor; /* #endif */ } /* #endif */ .cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after { display: none; } /* #endif */ .cu-steps .cu-item .num { width: 40rpx; height: 40rpx; /* #ifndef APP-ANDROID */ border-radius: 50%; /* #endif */ line-height: 40rpx; margin: 20rpx auto; font-size: 24rpx; /* #ifdef WEB */ border: 1px solid currentColor; /* #endif */ position: relative; overflow: hidden; } /* #ifndef APP-ANDROID */ .cu-steps .cu-item[class*="text-"] .num { background-color: currentColor; } .cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* #ifndef APP-ANDROID */ transition: all 0.3s ease-in-out 0s; content: attr(data-index); /* #endif */ transform: translateY(0rpx); } /* #endif */ /* #ifndef APP-ANDROID */ .cu-steps .cu-item .num::after { transform: translateY(40rpx); color: #ffffff; transition: all 0.3s ease-in-out 0s; } .cu-steps .cu-item[class*="text-"] .num::before { transform: translateY(-40rpx); color: #ffffff; } .cu-steps .cu-item[class*="text-"] .num::after { content: "\e645"; font-family: 'cuIcon'; color: #ffffff; transform: translateY(0rpx); } .cu-steps .cu-item[class*="text-"] .num.err::after { content: "\e646"; } /* #endif */ /* ================== 布局 ==================== */ /* -- 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; */ align-self: 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 { overflow: hidden; } .grid.grid-square .cu-tag { position: absolute; right: 0; top: 0; border-bottom-left-radius: 6rpx; padding: 6rpx 12rpx; height: auto; background-color: rgba(0, 0, 0, 0.5); } /* #ifndef APP-ANDROID */ .grid.grid-square>.my-view>.my-text[class*="cuIcon-"] { font-size: 52rpx; position: absolute; color: #8799a3; margin: auto; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* #endif */ .grid.grid-square>.my-view { margin-right: 20rpx; margin-bottom: 20rpx; border-radius: 6rpx; position: relative; overflow: hidden; } .grid.grid-square>.my-view.bg-img .my-image { width: 100%; height: 100%; position: absolute; } .grid.col-1.grid-square>.my-view { padding-bottom: 100%; height: 0; margin-right: 0; } /* #ifndef APP-ANDROID */ .grid.col-2.grid-square>.my-view { padding-bottom: calc((100% - 20rpx)/2); height: 0; width: calc((100% - 20rpx)/2); } .grid.col-3.grid-square>.my-view { padding-bottom: calc((100% - 40rpx)/3); height: 0; width: calc((100% - 40rpx)/3); } .grid.col-4.grid-square>.my-view { padding-bottom: calc((100% - 60rpx)/4); height: 0; width: calc((100% - 60rpx)/4); } .grid.col-5.grid-square>.my-view { padding-bottom: calc((100% - 80rpx)/5); height: 0; width: calc((100% - 80rpx)/5); } .grid.col-2.grid-square>.my-view:nth-child(2n), .grid.col-3.grid-square>.my-view:nth-child(3n), .grid.col-4.grid-square>.my-view:nth-child(4n), .grid.col-5.grid-square>.my-view:nth-child(5n) { margin-right: 0; } /* #endif */ .grid.col-1>.my-view { width: 100%; } .grid.col-2>.my-view { width: 50%; } .grid.col-3>.my-view { width: 33.33%; } .grid.col-4>.my-view { width: 25%; } .grid.col-5>.my-view { width: 20%; } /* -- 内外边距 -- */ .margin-0 { margin: 0; } .margin-xs { margin: 10rpx; } .margin-sm { margin: 20rpx; } .margin { margin: 30rpx; } .margin-lg { margin: 40rpx; } .margin-xl { margin: 50rpx; } .margin-top-xs { margin-top: 10rpx; } .margin-top-sm { margin-top: 20rpx; } .margin-top { margin-top: 30rpx; } .margin-top-lg { margin-top: 40rpx; } .margin-top-xl { margin-top: 50rpx; } .margin-right-xs { margin-right: 10rpx; } .margin-right-sm { margin-right: 20rpx; } .margin-right { margin-right: 30rpx; } .margin-right-lg { margin-right: 40rpx; } .margin-right-xl { margin-right: 50rpx; } .margin-bottom-xs { margin-bottom: 10rpx; } .margin-bottom-sm { margin-bottom: 20rpx; } .margin-bottom { margin-bottom: 30rpx; } .margin-bottom-lg { margin-bottom: 40rpx; } .margin-bottom-xl { margin-bottom: 50rpx; } .margin-left-xs { margin-left: 10rpx; } .margin-left-sm { margin-left: 20rpx; } .margin-left { margin-left: 30rpx; } .margin-left-lg { margin-left: 40rpx; } .margin-left-xl { margin-left: 50rpx; } .margin-lr-xs { margin-left: 10rpx; margin-right: 10rpx; } .margin-lr-sm { margin-left: 20rpx; margin-right: 20rpx; } .margin-lr { margin-left: 30rpx; margin-right: 30rpx; } .margin-lr-lg { margin-left: 40rpx; margin-right: 40rpx; } .margin-lr-xl { margin-left: 50rpx; margin-right: 50rpx; } .margin-tb-xs { margin-top: 10rpx; margin-bottom: 10rpx; } .margin-tb-sm { margin-top: 20rpx; margin-bottom: 20rpx; } .margin-tb { margin-top: 30rpx; margin-bottom: 30rpx; } .margin-tb-lg { margin-top: 40rpx; margin-bottom: 40rpx; } .margin-tb-xl { margin-top: 50rpx; margin-bottom: 50rpx; } .padding-0 { padding: 0; } .padding-xs { padding: 10rpx; } .padding-sm { padding: 20rpx; } .padding { padding: 30rpx; } .padding-lg { padding: 40rpx; } .padding-xl { padding: 50rpx; } .padding-top-xs { padding-top: 10rpx; } .padding-top-sm { padding-top: 20rpx; } .padding-top { padding-top: 30rpx; } .padding-top-lg { padding-top: 40rpx; } .padding-top-xl { padding-top: 50rpx; } .padding-right-xs { padding-right: 10rpx; } .padding-right-sm { padding-right: 20rpx; } .padding-right { padding-right: 30rpx; } .padding-right-lg { padding-right: 40rpx; } .padding-right-xl { padding-right: 50rpx; } .padding-bottom-xs { padding-bottom: 10rpx; } .padding-bottom-sm { padding-bottom: 20rpx; } .padding-bottom { padding-bottom: 30rpx; } .padding-bottom-lg { padding-bottom: 40rpx; } .padding-bottom-xl { padding-bottom: 50rpx; } .padding-left-xs { padding-left: 10rpx; } .padding-left-sm { padding-left: 20rpx; } .padding-left { padding-left: 30rpx; } .padding-left-lg { padding-left: 40rpx; } .padding-left-xl { padding-left: 50rpx; } .padding-lr-xs { padding-left: 10rpx; padding-right: 10rpx; } .padding-lr-sm { padding-left: 20rpx; padding-right: 20rpx; } .padding-lr { padding-left: 30rpx; padding-right: 30rpx; } .padding-lr-lg { padding-left: 40rpx; padding-right: 40rpx; } .padding-lr-xl { padding-left: 50rpx; padding-right: 50rpx; } .padding-tb-xs { padding-top: 10rpx; padding-bottom: 10rpx; } .padding-tb-sm { padding-top: 20rpx; padding-bottom: 20rpx; } .padding-tb { padding-top: 30rpx; padding-bottom: 30rpx; } .padding-tb-lg { padding-top: 40rpx; padding-bottom: 40rpx; } .padding-tb-xl { padding-top: 50rpx; padding-bottom: 50rpx; } /* -- 浮动 -- */ /* #ifndef APP-ANDROID */ .cf::after, .cf::before { content: " "; display: table; } .cf::after { clear: both; } .fl { float: left; } .fr { float: right; } /* #endif */ /* ================== 背景 ==================== */ /* #ifndef APP-ANDROID */ .line-red::after, .lines-red::after { border-color: #e54d42; } .line-orange::after, .lines-orange::after { border-color: #f37b1d; } .line-yellow::after, .lines-yellow::after { border-color: #fbbd08; } .line-olive::after, .lines-olive::after { border-color: #8dc63f; } .line-green::after, .lines-green::after { border-color: #39b54a; } .line-cyan::after, .lines-cyan::after { border-color: #1cbbb4; } .line-blue::after, .lines-blue::after { border-color: #0081ff; } .line-purple::after, .lines-purple::after { border-color: #6739b6; } .line-mauve::after, .lines-mauve::after { border-color: #9c26b0; } .line-pink::after, .lines-pink::after { border-color: #e03997; } .line-brown::after, .lines-brown::after { border-color: #a5673f; } .line-grey::after, .lines-grey::after { border-color: #8799a3; } .line-gray::after, .lines-gray::after { border-color: #aaaaaa; } .line-black::after, .lines-black::after { border-color: #333333; } .line-white::after, .lines-white::after { border-color: #ffffff; } /* #endif */ .bg-red { background-color: #e54d42; color: #ffffff; } .bg-orange { background-color: #f37b1d; color: #ffffff; } .bg-yellow { background-color: #fbbd08; color: #333333; } .bg-olive { background-color: #8dc63f; color: #ffffff; } .bg-green { background-color: #39b54a; color: #ffffff; } .bg-cyan { background-color: #1cbbb4; color: #ffffff; } .bg-blue { background-color: #0081ff; color: #ffffff; } .bg-purple { background-color: #6739b6; color: #ffffff; } .bg-mauve { background-color: #9c26b0; color: #ffffff; } .bg-pink { background-color: #e03997; color: #ffffff; } .bg-brown { background-color: #a5673f; color: #ffffff; } .bg-grey { background-color: #8799a3; color: #ffffff; } .bg-gray { background-color: #f0f0f0; color: #333333; } .bg-black { background-color: #333333; color: #ffffff; } .bg-white { background-color: #ffffff; color: #666666; } .bg-shadeTop { background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); color: #ffffff; } .bg-shadeBottom { background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); color: #ffffff; } .bg-red.light { color: #e54d42; background-color: #fadbd9; } .bg-orange.light { color: #f37b1d; background-color: #fde6d2; } .bg-yellow.light { color: #fbbd08; /* background-color: #fef2ced2; */ background-color: rgba(254, 242, 206, 0.82); } .bg-olive.light { color: #8dc63f; background-color: #e8f4d9; } .bg-green.light { color: #39b54a; /* background-color: #d7f0dbff; */ background-color: rgba(215, 240, 219, 1); } .bg-cyan.light { color: #1cbbb4; background-color: #d2f1f0; } .bg-blue.light { color: #0081ff; background-color: #cce6ff; } .bg-purple.light { color: #6739b6; background-color: #e1d7f0; } .bg-mauve.light { color: #9c26b0; background-color: #ebd4ef; } .bg-pink.light { color: #e03997; background-color: #f9d7ea; } .bg-brown.light { color: #a5673f; background-color: #ede1d9; } .bg-grey.light { color: #8799a3; background-color: #e7ebed; } /* #ifndef APP-ANDROID */ .bg-gradual-red { background-image: linear-gradient(45deg, #f43f3b, #ec008c); color: #ffffff; } .bg-gradual-orange { background-image: linear-gradient(45deg, #ff9700, #ed1c24); color: #ffffff; } .bg-gradual-green { background-image: linear-gradient(45deg, #39b54a, #8dc63f); color: #ffffff; } .bg-gradual-purple { background-image: linear-gradient(45deg, #9000ff, #5e00ff); color: #ffffff; } .bg-gradual-pink { background-image: linear-gradient(45deg, #ec008c, #6739b6); color: #ffffff; } .bg-gradual-blue { background-image: linear-gradient(45deg, #0081ff, #1cbbb4); color: #ffffff; } .shadow[class*="-red"] { box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2); } .shadow[class*="-orange"] { box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2); } .shadow[class*="-yellow"] { box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2); } .shadow[class*="-olive"] { box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2); } .shadow[class*="-green"] { box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2); } .shadow[class*="-cyan"] { box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2); } .shadow[class*="-blue"] { box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2); } .shadow[class*="-purple"] { box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2); } .shadow[class*="-mauve"] { box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2); } .shadow[class*="-pink"] { box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2); } .shadow[class*="-brown"] { box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2); } .shadow[class*="-grey"] { box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2); } .shadow[class*="-gray"] { box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2); } .shadow[class*="-black"] { box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2); } .shadow[class*="-white"] { box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2); } .text-shadow[class*="-red"] { text-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2); } .text-shadow[class*="-orange"] { text-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2); } .text-shadow[class*="-yellow"] { text-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2); } .text-shadow[class*="-olive"] { text-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2); } .text-shadow[class*="-green"] { text-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2); } .text-shadow[class*="-cyan"] { text-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2); } .text-shadow[class*="-blue"] { text-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2); } .text-shadow[class*="-purple"] { text-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2); } .text-shadow[class*="-mauve"] { text-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2); } .text-shadow[class*="-pink"] { text-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2); } .text-shadow[class*="-brown"] { text-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2); } .text-shadow[class*="-grey"] { text-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2); } .text-shadow[class*="-gray"] { text-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2); } .text-shadow[class*="-black"] { text-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2); } /* #endif */ /* #ifndef APP-ANDROID */ .bg-img { background-position: center; background-size: cover; background-repeat: no-repeat; } /* #endif */ .bg-mask { background-color: #333333; position: relative; } /* #ifndef APP-ANDROID */ .bg-mask::after { display: block; content: ""; border-radius: inherit; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; right: 0; bottom: 0; top: 0; } /* #endif */ .bg-video { position: relative; } /* #ifndef APP-ANDROID */ .bg-mask view, .bg-mask cover-view { z-index: 5; 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; } /* #endif */ /* ================== 文本 ==================== */ .text-xs { font-size: 20rpx; } .text-sm { font-size: 24rpx; } .text-df { font-size: 28rpx; } .text-lg { font-size: 32rpx; } .text-xl { font-size: 36rpx; } .text-xxl { font-size: 44rpx; } .text-sl { font-size: 80rpx; } .text-xsl { font-size: 120rpx; } /* #ifndef APP-ANDROID */ .text-Abc { text-transform: Capitalize; } .text-ABC { text-transform: Uppercase; } .text-abc { text-transform: Lowercase; } .text-price::before { /* #ifndef APP-ANDROID */ font-size: 80%; content: "¥"; /* #endif */ margin-right: 4rpx; } /* #endif */ .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; } .text-orange, .line-orange, .lines-orange { color: #f37b1d; } .text-yellow, .line-yellow, .lines-yellow { color: #fbbd08; } .text-olive, .line-olive, .lines-olive { color: #8dc63f; } .text-green, .line-green, .lines-green { color: #39b54a; } .text-cyan, .line-cyan, .lines-cyan { color: #1cbbb4; } .text-blue, .line-blue, .lines-blue { color: #0081ff; } .text-purple, .line-purple, .lines-purple { color: #6739b6; } .text-mauve, .line-mauve, .lines-mauve { color: #9c26b0; } .text-pink, .line-pink, .lines-pink { color: #e03997; } .text-brown, .line-brown, .lines-brown { color: #a5673f; } .text-grey, .line-grey, .lines-grey { color: #8799a3; } .text-gray, .line-gray, .lines-gray { color: #aaaaaa; } .text-black, .line-black, .lines-black { color: #333333; } .text-white, .line-white, .lines-white { color: #ffffff; } /* ================== icon 初始化 ==================== */ /* #ifndef APP-ANDROID */ @keyframes cuIcon-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .cuIconfont-spin { -webkit-animation: cuIcon-spin 2s infinite linear; animation: cuIcon-spin 2s infinite linear; display: inline-block; } .cuIconfont-pulse { -webkit-animation: cuIcon-spin 1s infinite steps(8); animation: cuIcon-spin 1s infinite steps(8); display: inline-block; } [class*="cuIcon-"] { font-family: "cuIcon"; font-size: inherit; font-style: normal; } /* #endif */ /* #ifndef APP-ANDROID */ .cuIcon-appreciate:before { content: "\e644"; } .cuIcon-check:before { content: "\e645"; } .cuIcon-close:before { content: "\e646"; } .cuIcon-edit:before { content: "\e649"; } .cuIcon-emoji:before { content: "\e64a"; } .cuIcon-favorfill:before { content: "\e64b"; } .cuIcon-favor:before { content: "\e64c"; } .cuIcon-loading:before { content: "\e64f"; } .cuIcon-locationfill:before { content: "\e650"; } .cuIcon-location:before { content: "\e651"; } .cuIcon-phone:before { content: "\e652"; } .cuIcon-roundcheckfill:before { content: "\e656"; } .cuIcon-roundcheck:before { content: "\e657"; } .cuIcon-roundclosefill:before { content: "\e658"; } .cuIcon-roundclose:before { content: "\e659"; } .cuIcon-roundrightfill:before { content: "\e65a"; } .cuIcon-roundright:before { content: "\e65b"; } .cuIcon-search:before { content: "\e65c"; } .cuIcon-taxi:before { content: "\e65d"; } .cuIcon-timefill:before { content: "\e65e"; } .cuIcon-time:before { content: "\e65f"; } .cuIcon-unfold:before { content: "\e661"; } .cuIcon-warnfill:before { content: "\e662"; } .cuIcon-warn:before { content: "\e663"; } .cuIcon-camerafill:before { content: "\e664"; } .cuIcon-camera:before { content: "\e665"; } .cuIcon-commentfill:before { content: "\e666"; } .cuIcon-comment:before { content: "\e667"; } .cuIcon-likefill:before { content: "\e668"; } .cuIcon-like:before { content: "\e669"; } .cuIcon-notificationfill:before { content: "\e66a"; } .cuIcon-notification:before { content: "\e66b"; } .cuIcon-order:before { content: "\e66c"; } .cuIcon-samefill:before { content: "\e66d"; } .cuIcon-same:before { content: "\e66e"; } .cuIcon-deliver:before { content: "\e671"; } .cuIcon-evaluate:before { content: "\e672"; } .cuIcon-pay:before { content: "\e673"; } .cuIcon-send:before { content: "\e675"; } .cuIcon-shop:before { content: "\e676"; } .cuIcon-ticket:before { content: "\e677"; } .cuIcon-back:before { content: "\e679"; } .cuIcon-cascades:before { content: "\e67c"; } .cuIcon-discover:before { content: "\e67e"; } .cuIcon-list:before { content: "\e682"; } .cuIcon-more:before { content: "\e684"; } .cuIcon-scan:before { content: "\e689"; } .cuIcon-settings:before { content: "\e68a"; } .cuIcon-questionfill:before { content: "\e690"; } .cuIcon-question:before { content: "\e691"; } .cuIcon-shopfill:before { content: "\e697"; } .cuIcon-form:before { content: "\e699"; } .cuIcon-pic:before { content: "\e69b"; } .cuIcon-filter:before { content: "\e69c"; } .cuIcon-footprint:before { content: "\e69d"; } .cuIcon-top:before { content: "\e69e"; } .cuIcon-pulldown:before { content: "\e69f"; } .cuIcon-pullup:before { content: "\e6a0"; } .cuIcon-right:before { content: "\e6a3"; } .cuIcon-refresh:before { content: "\e6a4"; } .cuIcon-moreandroid:before { content: "\e6a5"; } .cuIcon-deletefill:before { content: "\e6a6"; } .cuIcon-refund:before { content: "\e6ac"; } .cuIcon-cart:before { content: "\e6af"; } .cuIcon-qrcode:before { content: "\e6b0"; } .cuIcon-remind:before { content: "\e6b2"; } .cuIcon-delete:before { content: "\e6b4"; } .cuIcon-profile:before { content: "\e6b7"; } .cuIcon-home:before { content: "\e6b8"; } .cuIcon-cartfill:before { content: "\e6b9"; } .cuIcon-discoverfill:before { content: "\e6ba"; } .cuIcon-homefill:before { content: "\e6bb"; } .cuIcon-message:before { content: "\e6bc"; } .cuIcon-addressbook:before { content: "\e6bd"; } .cuIcon-link:before { content: "\e6bf"; } .cuIcon-lock:before { content: "\e6c0"; } .cuIcon-unlock:before { content: "\e6c2"; } .cuIcon-vip:before { content: "\e6c3"; } .cuIcon-weibo:before { content: "\e6c4"; } .cuIcon-activity:before { content: "\e6c5"; } .cuIcon-friendaddfill:before { content: "\e6c9"; } .cuIcon-friendadd:before { content: "\e6ca"; } .cuIcon-friendfamous:before { content: "\e6cb"; } .cuIcon-friend:before { content: "\e6cc"; } .cuIcon-goods:before { content: "\e6cd"; } .cuIcon-selection:before { content: "\e6ce"; } .cuIcon-explore:before { content: "\e6d2"; } .cuIcon-present:before { content: "\e6d3"; } .cuIcon-squarecheckfill:before { content: "\e6d4"; } .cuIcon-square:before { content: "\e6d5"; } .cuIcon-squarecheck:before { content: "\e6d6"; } .cuIcon-round:before { content: "\e6d7"; } .cuIcon-roundaddfill:before { content: "\e6d8"; } .cuIcon-roundadd:before { content: "\e6d9"; } .cuIcon-add:before { content: "\e6da"; } .cuIcon-notificationforbidfill:before { content: "\e6db"; } .cuIcon-explorefill:before { content: "\e6dd"; } .cuIcon-fold:before { content: "\e6de"; } .cuIcon-game:before { content: "\e6df"; } .cuIcon-redpacket:before { content: "\e6e0"; } .cuIcon-selectionfill:before { content: "\e6e1"; } .cuIcon-similar:before { content: "\e6e2"; } .cuIcon-appreciatefill:before { content: "\e6e3"; } .cuIcon-infofill:before { content: "\e6e4"; } .cuIcon-info:before { content: "\e6e5"; } .cuIcon-forwardfill:before { content: "\e6ea"; } .cuIcon-forward:before { content: "\e6eb"; } .cuIcon-rechargefill:before { content: "\e6ec"; } .cuIcon-recharge:before { content: "\e6ed"; } .cuIcon-vipcard:before { content: "\e6ee"; } .cuIcon-voice:before { content: "\e6ef"; } .cuIcon-voicefill:before { content: "\e6f0"; } .cuIcon-friendfavor:before { content: "\e6f1"; } .cuIcon-wifi:before { content: "\e6f2"; } .cuIcon-share:before { content: "\e6f3"; } .cuIcon-wefill:before { content: "\e6f4"; } .cuIcon-we:before { content: "\e6f5"; } .cuIcon-lightauto:before { content: "\e6f6"; } .cuIcon-lightforbid:before { content: "\e6f7"; } .cuIcon-lightfill:before { content: "\e6f8"; } .cuIcon-camerarotate:before { content: "\e6f9"; } .cuIcon-light:before { content: "\e6fa"; } .cuIcon-barcode:before { content: "\e6fb"; } .cuIcon-flashlightclose:before { content: "\e6fc"; } .cuIcon-flashlightopen:before { content: "\e6fd"; } .cuIcon-searchlist:before { content: "\e6fe"; } .cuIcon-service:before { content: "\e6ff"; } .cuIcon-sort:before { content: "\e700"; } .cuIcon-down:before { content: "\e703"; } .cuIcon-mobile:before { content: "\e704"; } .cuIcon-mobilefill:before { content: "\e705"; } .cuIcon-copy:before { content: "\e706"; } .cuIcon-countdownfill:before { content: "\e707"; } .cuIcon-countdown:before { content: "\e708"; } .cuIcon-noticefill:before { content: "\e709"; } .cuIcon-notice:before { content: "\e70a"; } .cuIcon-upstagefill:before { content: "\e70e"; } .cuIcon-upstage:before { content: "\e70f"; } .cuIcon-babyfill:before { content: "\e710"; } .cuIcon-baby:before { content: "\e711"; } .cuIcon-brandfill:before { content: "\e712"; } .cuIcon-brand:before { content: "\e713"; } .cuIcon-choicenessfill:before { content: "\e714"; } .cuIcon-choiceness:before { content: "\e715"; } .cuIcon-clothesfill:before { content: "\e716"; } .cuIcon-clothes:before { content: "\e717"; } .cuIcon-creativefill:before { content: "\e718"; } .cuIcon-creative:before { content: "\e719"; } .cuIcon-female:before { content: "\e71a"; } .cuIcon-keyboard:before { content: "\e71b"; } .cuIcon-male:before { content: "\e71c"; } .cuIcon-newfill:before { content: "\e71d"; } .cuIcon-new:before { content: "\e71e"; } .cuIcon-pullleft:before { content: "\e71f"; } .cuIcon-pullright:before { content: "\e720"; } .cuIcon-rankfill:before { content: "\e721"; } .cuIcon-rank:before { content: "\e722"; } .cuIcon-bad:before { content: "\e723"; } .cuIcon-cameraadd:before { content: "\e724"; } .cuIcon-focus:before { content: "\e725"; } .cuIcon-friendfill:before { content: "\e726"; } .cuIcon-cameraaddfill:before { content: "\e727"; } .cuIcon-apps:before { content: "\e729"; } .cuIcon-paintfill:before { content: "\e72a"; } .cuIcon-paint:before { content: "\e72b"; } .cuIcon-picfill:before { content: "\e72c"; } .cuIcon-refresharrow:before { content: "\e72d"; } .cuIcon-colorlens:before { content: "\e6e6"; } .cuIcon-markfill:before { content: "\e730"; } .cuIcon-mark:before { content: "\e731"; } .cuIcon-presentfill:before { content: "\e732"; } .cuIcon-repeal:before { content: "\e733"; } .cuIcon-album:before { content: "\e734"; } .cuIcon-peoplefill:before { content: "\e735"; } .cuIcon-people:before { content: "\e736"; } .cuIcon-servicefill:before { content: "\e737"; } .cuIcon-repair:before { content: "\e738"; } .cuIcon-file:before { content: "\e739"; } .cuIcon-repairfill:before { content: "\e73a"; } .cuIcon-taoxiaopu:before { content: "\e73b"; } .cuIcon-weixin:before { content: "\e612"; } .cuIcon-attentionfill:before { content: "\e73c"; } .cuIcon-attention:before { content: "\e73d"; } .cuIcon-commandfill:before { content: "\e73e"; } .cuIcon-command:before { content: "\e73f"; } .cuIcon-communityfill:before { content: "\e740"; } .cuIcon-community:before { content: "\e741"; } .cuIcon-read:before { content: "\e742"; } .cuIcon-calendar:before { content: "\e74a"; } .cuIcon-cut:before { content: "\e74b"; } .cuIcon-magic:before { content: "\e74c"; } .cuIcon-backwardfill:before { content: "\e74d"; } .cuIcon-playfill:before { content: "\e74f"; } .cuIcon-stop:before { content: "\e750"; } .cuIcon-tagfill:before { content: "\e751"; } .cuIcon-tag:before { content: "\e752"; } .cuIcon-group:before { content: "\e753"; } .cuIcon-all:before { content: "\e755"; } .cuIcon-backdelete:before { content: "\e756"; } .cuIcon-hotfill:before { content: "\e757"; } .cuIcon-hot:before { content: "\e758"; } .cuIcon-post:before { content: "\e759"; } .cuIcon-radiobox:before { content: "\e75b"; } .cuIcon-rounddown:before { content: "\e75c"; } .cuIcon-upload:before { content: "\e75d"; } .cuIcon-writefill:before { content: "\e760"; } .cuIcon-write:before { content: "\e761"; } .cuIcon-radioboxfill:before { content: "\e763"; } .cuIcon-punch:before { content: "\e764"; } .cuIcon-shake:before { content: "\e765"; } .cuIcon-move:before { content: "\e768"; } .cuIcon-safe:before { content: "\e769"; } .cuIcon-activityfill:before { content: "\e775"; } .cuIcon-crownfill:before { content: "\e776"; } .cuIcon-crown:before { content: "\e777"; } .cuIcon-goodsfill:before { content: "\e778"; } .cuIcon-messagefill:before { content: "\e779"; } .cuIcon-profilefill:before { content: "\e77a"; } .cuIcon-sound:before { content: "\e77b"; } .cuIcon-sponsorfill:before { content: "\e77c"; } .cuIcon-sponsor:before { content: "\e77d"; } .cuIcon-upblock:before { content: "\e77e"; } .cuIcon-weblock:before { content: "\e77f"; } .cuIcon-weunblock:before { content: "\e780"; } .cuIcon-my:before { content: "\e78b"; } .cuIcon-myfill:before { content: "\e78c"; } .cuIcon-emojifill:before { content: "\e78d"; } .cuIcon-emojiflashfill:before { content: "\e78e"; } .cuIcon-flashbuyfill:before { content: "\e78f"; } .cuIcon-text:before { content: "\e791"; } .cuIcon-goodsfavor:before { content: "\e794"; } .cuIcon-musicfill:before { content: "\e795"; } .cuIcon-musicforbidfill:before { content: "\e796"; } .cuIcon-card:before { content: "\e624"; } .cuIcon-triangledownfill:before { content: "\e79b"; } .cuIcon-triangleupfill:before { content: "\e79c"; } .cuIcon-roundleftfill-copy:before { content: "\e79e"; } .cuIcon-font:before { content: "\e76a"; } .cuIcon-title:before { content: "\e82f"; } .cuIcon-recordfill:before { content: "\e7a4"; } .cuIcon-record:before { content: "\e7a6"; } .cuIcon-cardboardfill:before { content: "\e7a9"; } .cuIcon-cardboard:before { content: "\e7aa"; } .cuIcon-formfill:before { content: "\e7ab"; } .cuIcon-coin:before { content: "\e7ac"; } .cuIcon-cardboardforbid:before { content: "\e7af"; } .cuIcon-circlefill:before { content: "\e7b0"; } .cuIcon-circle:before { content: "\e7b1"; } .cuIcon-attentionforbid:before { content: "\e7b2"; } .cuIcon-attentionforbidfill:before { content: "\e7b3"; } .cuIcon-attentionfavorfill:before { content: "\e7b4"; } .cuIcon-attentionfavor:before { content: "\e7b5"; } .cuIcon-titles:before { content: "\e701"; } .cuIcon-icloading:before { content: "\e67a"; } .cuIcon-full:before { content: "\e7bc"; } .cuIcon-mail:before { content: "\e7bd"; } .cuIcon-peoplelist:before { content: "\e7be"; } .cuIcon-goodsnewfill:before { content: "\e7bf"; } .cuIcon-goodsnew:before { content: "\e7c0"; } .cuIcon-medalfill:before { content: "\e7c1"; } .cuIcon-medal:before { content: "\e7c2"; } .cuIcon-newsfill:before { content: "\e7c3"; } .cuIcon-newshotfill:before { content: "\e7c4"; } .cuIcon-newshot:before { content: "\e7c5"; } .cuIcon-news:before { content: "\e7c6"; } .cuIcon-videofill:before { content: "\e7c7"; } .cuIcon-video:before { content: "\e7c8"; } .cuIcon-exit:before { content: "\e7cb"; } .cuIcon-skinfill:before { content: "\e7cc"; } .cuIcon-skin:before { content: "\e7cd"; } .cuIcon-moneybagfill:before { content: "\e7ce"; } .cuIcon-usefullfill:before { content: "\e7cf"; } .cuIcon-usefull:before { content: "\e7d0"; } .cuIcon-moneybag:before { content: "\e7d1"; } .cuIcon-redpacket_fill:before { content: "\e7d3"; } .cuIcon-subscription:before { content: "\e7d4"; } .cuIcon-loading1:before { content: "\e633"; } .cuIcon-github:before { content: "\e692"; } .cuIcon-global:before { content: "\e7eb"; } .cuIcon-settingsfill:before { content: "\e6ab"; } .cuIcon-back_android:before { content: "\e7ed"; } .cuIcon-expressman:before { content: "\e7ef"; } .cuIcon-evaluate_fill:before { content: "\e7f0"; } .cuIcon-group_fill:before { content: "\e7f5"; } .cuIcon-play_forward_fill:before { content: "\e7f6"; } .cuIcon-deliver_fill:before { content: "\e7f7"; } .cuIcon-notice_forbid_fill:before { content: "\e7f8"; } .cuIcon-fork:before { content: "\e60c"; } .cuIcon-pick:before { content: "\e7fa"; } .cuIcon-wenzi:before { content: "\e6a7"; } .cuIcon-ellipse:before { content: "\e600"; } .cuIcon-qr_code:before { content: "\e61b"; } .cuIcon-dianhua:before { content: "\e64d"; } .cuIcon-cuIcon:before { content: "\e602"; } .cuIcon-loading2:before { content: "\e7f1"; } .cuIcon-btn:before { content: "\e601"; } /* #endif */