view, scroll-view, swiper, button, input, textarea, label, navigator, image { box-sizing: border-box; } .round { border-radius: 5000rpx; } .radius { border-radius: 6rpx; } /* ==================图片==================== */ 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: "wlIcon"; 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: wlIcon-spin 2s infinite linear; animation: wlIcon-spin 2s infinite linear; display: block; } .response { width: 100%; } /* ==================开关==================== */ switch, checkbox, radio { position: relative; } switch::after, switch::before { font-family: "wlIcon"; content: "\e66c"; position: absolute; color: #ffffff !important; top: 0%; left: 0rpx; font-size: 26rpx; line-height: 26px; width: 50%; text-align: center; pointer-events: none; -webkit-transform: scale(0, 0); transform: scale(0, 0); transition: all 0.3s ease-in-out 0s; z-index: 9; bottom: 0; height: 26px; margin: auto; } switch::before { content: "\e66b"; right: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); left: auto; } switch[checked]::after, switch.checked::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } switch[checked]::before, switch.checked::before { -webkit-transform: scale(0, 0); transform: scale(0, 0); } radio::before, checkbox::before { font-family: "wlIcon"; content: "\e66c"; position: absolute; color: #ffffff !important; top: 50%; margin-top: -8px; right: 5px; font-size: 32rpx; line-height: 16px; pointer-events: none; -webkit-transform: scale(1, 1); 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; } switch[checked]::before { -webkit-transform: scale(0, 0); 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; -webkit-transform: scale(0.9, 0.9); 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; -webkit-transform: scale(0.9, 0.9); 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; border: 8px solid #ffffff !important; } .switch-sex::after { content: "\e60f"; } .switch-sex::before { content: "\e6b9"; } .switch-sex .wx-switch-input, .switch-sex .uni-switch-input { background: #007aff !important; border-color: #007aff !important; } .switch-sex .wx-switch-input:not([class*="bg-"]), .switch-sex .uni-switch-input:not([class*="bg-"]) { background: #00adef !important; border-color: #00adef !important; } .switch-sex[checked] .wx-switch-input, .switch-sex.checked .uni-switch-input { background: #ff243a !important; border-color: #ff243a !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: #f85d1b !important; border-color: #f85d1b !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; } /* ==================边框==================== */ /* -- 实线 -- */ .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; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; box-sizing: border-box; } .solid::after { border: 1rpx solid rgba(0, 0, 0, 0.15); } .solid-top::after { border-top: 1rpx solid rgba(0, 0, 0, 0.15); } .solid-right::after { border-right: 1rpx solid rgba(0, 0, 0, 0.15); } .solid-bottom::after { border-bottom: 1rpx solid rgba(0, 0, 0, 0.15); } .solid-left::after { border-left: 1rpx solid rgba(0, 0, 0, 0.15); } .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; } /* -- 阴影 -- */ .shadow[class*='white'] { --ShadowSize: 0 1rpx 6rpx; } .shadow-lg { --ShadowSize: 0rpx 40rpx 100rpx 0rpx; } .shadow-warp { position: relative; box-shadow: 0 0 10rpx rgba(0, 0, 0, .05); } .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.1); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); z-index: -1; } .shadow-warp:after { right: 20rpx; left: auto; -webkit-transform: rotate(3deg); transform: rotate(3deg); } .shadow-blur { position: relative; } .shadow-blur::before { content: ""; display: block; background: inherit; -webkit-filter: blur(10rpx); filter: blur(10rpx); position: absolute; width: 100%; height: 100%; top: 10rpx; left: 10rpx; z-index: -1; opacity: 0.4; -webkit-transform-origin: 0 0; transform-origin: 0 0; border-radius: inherit; -webkit-transform: scale(1, 1); transform: scale(1, 1); } /* ==================按钮==================== */ .cu-btn { position: relative; border: 0rpx; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 30rpx; font-size: 28rpx; height: 64rpx; line-height: 1; text-align: center; text-decoration: none; overflow: visible; margin-left: initial; -webkit-transform: translate(0rpx, 0rpx); transform: translate(0rpx, 0rpx); margin-right: initial; } .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; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; 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; } .cu-btn.sm { padding: 0 20rpx; font-size: 20rpx; height: 48rpx; } .cu-btn.lg { padding: 0 40rpx; font-size: 32rpx; height: 80rpx; } .cu-btn.wlIcon.sm { width: 48rpx; height: 48rpx; } .cu-btn.wlIcon { width: 64rpx; height: 64rpx; border-radius: 500rpx; padding: 0; } button.wlIcon.lg { width: 80rpx; height: 80rpx; } .cu-btn.shadow-blur::before { top: 4rpx; left: 4rpx; -webkit-filter: blur(6rpx); filter: blur(6rpx); opacity: 0.6; } .cu-btn.button-hover { -webkit-transform: translate(1rpx, 1rpx); transform: translate(1rpx, 1rpx); } .block { display: block; } .cu-btn.block { display: flex; } .cu-btn[disabled] { opacity: 0.6; color: #ffffff; } /* ==================徽章==================== */ .cu-tag { font-size: 24rpx; vertical-align: middle; position: relative; display: inline-flex; 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; } .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; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; 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; } .cu-tag+.cu-tag { margin-left: 10rpx; } .cu-tag.sm { font-size: 20rpx; padding: 0rpx 12rpx; height: 32rpx; } .cu-capsule { display: inline-flex; vertical-align: middle; } .cu-capsule+.cu-capsule { margin-left: 10rpx; } .cu-capsule .cu-tag { margin: 0; } .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; } .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, .cu-capsule.radius .cu-tag[class*="line-"] { border-top-right-radius: 12rpx; border-bottom-right-radius: 12rpx; } .cu-capsule.round .cu-tag:first-child { border-top-left-radius: 200rpx; border-bottom-left-radius: 200rpx; text-indent: 4rpx; } .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; } .cu-tag.badge { border-radius: 1000rpx; position: absolute; top: -10rpx; right: -10rpx; font-size: 20rpx; padding: 0rpx 10rpx; height: 30rpx; line-height: 30rpx; color: #ffffff; } .cu-tag.badge:not([class*="bg-"]) { background-color: #f43530; } .cu-tag:empty:not([class*="wlIcon-"]) { padding: 0rpx; width: 16rpx; height: 16rpx; top: -4rpx; right: -4rpx; } .cu-tag[class*="wlIcon-"] { width: 32rpx; height: 32rpx; top: -4rpx; right: -4rpx; } /* ==================头像==================== */ .cu-avatar { font-variant: small-caps; margin: 0; padding: 0; display: inline-flex; text-align: center; justify-content: center; align-items: center; /* background-color: #ccc; */ color: #ffffff; white-space: nowrap; position: relative; width: 64rpx; height: 64rpx; background-size: cover; background-position: center; vertical-align: middle; font-size: 1.5em; } .cu-avatar.sm { width: 48rpx; height: 48rpx; font-size: 1em; } .cu-avatar.lg { width: 96rpx; height: 96rpx; font-size: 2em; } .cu-avatar.xl { width: 128rpx; height: 128rpx; font-size: 2.5em; } .cu-avatar .avatar-text { font-size: 0.4em; } .cu-avatar-group { direction: rtl; unicode-bidi: bidi-override; padding: 0 10rpx 0 40rpx; display: inline-block; } .cu-avatar-group .cu-avatar { margin-left: -30rpx; border: 4rpx solid #f1f1f1; vertical-align: middle; } .cu-avatar-group .cu-avatar.sm { margin-left: -20rpx; border: 1rpx solid #f1f1f1; } /* ==================进度条==================== */ .cu-progress { overflow: hidden; height: 28rpx; background-color: #ebeef5; display: inline-flex; align-items: center; width: 100%; } .cu-progress+view, .cu-progress+text { line-height: 1; } .cu-progress.xs { height: 10rpx; } .cu-progress.sm { height: 20rpx; } .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; } .cu-progress.text-progress { padding-right: 60rpx; } .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 { -webkit-animation: progress-stripes 2s linear infinite; animation: progress-stripes 2s linear infinite; } @-webkit-keyframes progress-stripes { from { background-position: 72rpx 0; } to { background-position: 0 0; } } @keyframes progress-stripes { from { background-position: 72rpx 0; } to { background-position: 0 0; } } /* ==================加载==================== */ .cu-load { display: block; line-height: 3em; text-align: center; } .cu-load::before { font-family: "wlIcon"; display: inline-block; margin-right: 6rpx; } .cu-load.loading::before { content: "\e721"; -webkit-animation: wlIcon-spin 2s infinite linear; animation: wlIcon-spin 2s infinite linear; } .cu-load.loading::after { content: "加载中..."; } .cu-load.over::before { content: "\e65d"; } .cu-load.over::after { content: "没有更多了"; } .cu-load.erro::before { content: "\e660"; } .cu-load.erro::after { content: "加载失败"; } .cu-load.load-wlIcon::before { font-size: 32rpx; } .cu-load.load-wlIcon::after { display: none; } .cu-load.load-wlIcon.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; } .cu-load.load-modal [class*="wlIcon-"] { font-size: 60rpx; } .cu-load.load-modal image { width: 70rpx; height: 70rpx; } .cu-load.load-modal::after { content: ""; position: absolute; background-color: #ffffff; border-radius: 50%; 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; -webkit-animation: wlIcon-spin 1s infinite linear; animation: wlIcon-spin 1s infinite linear; z-index: -1; } .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; transition: all 200ms ease 0s; } .load-progress .load-progress-spinner { position: absolute; top: 10rpx; right: 10rpx; z-index: 2000; display: block; } .load-progress .load-progress-spinner::after { content: ""; display: block; width: 24rpx; height: 24rpx; box-sizing: border-box; border: solid 4rpx transparent; border-top-color: inherit; border-left-color: inherit; border-radius: 50%; -webkit-animation: load-progress-spinner 0.4s linear infinite; animation: load-progress-spinner 0.4s linear infinite; } @-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); } } /* ==================列表==================== */ .grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); } .cu-list+.cu-list { margin-top: 30rpx } .cu-list>.cu-item { transition: all .6s ease-in-out 0s; -webkit-transform: translateX(0rpx); transform: translateX(0rpx) } .cu-list>.cu-item.move-cur { -webkit-transform: translateX(-260rpx); transform: translateX(-260rpx) } .cu-list>.cu-item .move { position: absolute; right: 0; display: flex; width: 260rpx; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%) } .cu-list>.cu-item .move view { display: flex; flex: 1; justify-content: center; align-items: center } .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; width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx); line-height: 1.6em; } .cu-list.menu-avatar>.cu-item .content.flex-sub { width: calc(100% - 96rpx - 60rpx - 20rpx); } .cu-list.menu-avatar>.cu-item .content>view:first-child { font-size: 30rpx; display: flex; align-items: center } .cu-list.menu-avatar>.cu-item .content .cu-tag.sm { display: inline-block; margin-left: 10rpx; height: 28rpx; font-size: 16rpx; line-height: 32rpx } .cu-list.menu-avatar>.cu-item .action { width: 100rpx; text-align: center } .cu-list.menu-avatar>.cu-item .action view+view { margin-top: 10rpx } .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 } .cu-list.menu>.cu-item:last-child:after { border: none } .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: " "; -webkit-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none } .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 } .cu-list.menu>.cu-item.arrow:before { position: absolute; top: 0; right: 30rpx; bottom: 0; display: block; margin: auto; width: 30rpx; height: 30rpx; color: #8799a3; content: "\e645"; text-align: center; font-size: 34rpx; font-family: wlIcon; line-height: 30rpx } .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 } .cu-list.menu>.cu-item .cu-avatar-group .cu-avatar { border-color: #ffffff } .cu-list.menu>.cu-item .content>view:first-child { display: flex; align-items: center } .cu-list.menu>.cu-item .content>text[class*=wlIcon] { 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 } .cu-list.menu>.cu-item .content { font-size: 30rpx; line-height: 1.6em; flex: 1 } .cu-list.menu>.cu-item .content .cu-tag.sm { display: inline-block; 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 { display: block; overflow: hidden } .cu-list.menu.sm-border>.cu-item:after { left: 30rpx; width: calc(200% - 120rpx) } .cu-list.grid>.cu-item { position: relative; display: flex; padding: 20rpx 0 30rpx; transition-duration: 0s; flex-direction: column } .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: " "; -webkit-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none } /* .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*=wlIcon] {position: relative;display: block;margin-top: 20rpx;width: 100%;font-size: 48rpx}*/ .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 } .cu-list.grid.no-border>.cu-item:after { border: none } .cu-list.grid.no-border { padding: 20rpx 10rpx } .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 } .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; max-width: 100%; } .cu-bar .action.border-title { position: relative; top: -10rpx; } .cu-bar .action.border-title text[class*="bg-"]:last-child { position: absolute; bottom: -0.5rem; min-width: 2rem; height: 6rpx; left: 0; } .cu-bar .action.sub-title { position: relative; top: -0.2rem; } .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; } .cu-bar .action:first-child { margin-left: 25rpx; font-size: 30rpx; } .cu-bar .action:first-child>text[class*="wlIcon-"] { margin-left: -0.3em; margin-right: 0.3em; } .cu-bar .action:last-child { margin-right: 25rpx; position: relative; } .cu-bar .action>text[class*="wlIcon-"], .cu-bar .action>view[class*="wlIcon-"] { font-size: 40rpx; } .cu-bar .action>text[class*="wlIcon-"]+text[class*="wlIcon-"] { margin-left: 0.6em; } .cu-bar .action text.text-cut { text-align: left; width: 100%; } .cu-bar .cu-avatar:first-child { margin-left: 20rpx; } .cu-bar .content { position: absolute; text-align: center; width: calc(100% - 340rpx); left: 0; right: 0; bottom: 0; top: 0; margin: auto; font-size: 32rpx; height: 64rpx; line-height: 64rpx; cursor: none; /* 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: #f9f9f9; line-height: 64rpx; height: 64rpx; font-size: 24rpx; color: #333333; flex: 1; display: flex; align-items: center; margin: 0 25rpx; } .cu-bar .search-form+.action { margin-right: 25rpx; } .cu-bar .search-form input { flex: 1; padding-right: 25rpx; height: 64rpx; line-height: 64rpx; font-size: 26rpx; background-color: transparent; } .cu-bar .search-form [class*="wlIcon-"] { margin: 0 0.5em 0 0.8em; } .cu-bar .search-form [class*="wlIcon-"]::before { top: 0rpx; } .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; height: calc(100rpx + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); } .cu-tabbar-height { min-height: 100rpx; height: calc(100rpx + env(safe-area-inset-bottom) / 2); } .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; display: block; height: auto; line-height: 1; margin: 0; background-color: inherit; overflow: initial; } .cu-bar.tabbar.shop .action { width: 140rpx; flex: initial; } .cu-bar.tabbar .action.add-action { position: relative; z-index: 2; padding-top: 50rpx; } .cu-bar.tabbar .action.add-action [class*="wlIcon-"] { 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 { content: ""; 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; z-index: 0; } .cu-bar.tabbar .action.add-action::before { content: ""; position: absolute; width: 100rpx; height: 30rpx; bottom: 30rpx; left: 0; right: 0; margin: auto; background-color: inherit; z-index: 1; } .cu-bar.tabbar .btn-group { flex: 1; display: flex; justify-content: space-around; align-items: center; padding: 0 10rpx; } .cu-bar.tabbar button.action::after { border: 0; } .cu-bar.tabbar .action [class*="wlIcon-"] { width: 100rpx; position: relative; display: block; height: auto; margin: 0 auto 10rpx; text-align: center; font-size: 40rpx; } .cu-bar.tabbar .action .wlIcon-cu-image { margin: 0 auto; } .cu-bar.tabbar .action .wlIcon-cu-image image { width: 50rpx; height: 50rpx; display: inline-block; } .cu-bar.tabbar .submit { align-items: center; display: flex; justify-content: center; text-align: center; position: relative; flex: 2; align-self: stretch; } .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; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; 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; } .cu-bar.input { padding-right: 20rpx; background-color: #ffffff; } .cu-bar.input input { overflow: initial; line-height: 64rpx; height: 64rpx; min-height: 64rpx; flex: 1; font-size: 30rpx; margin: 0 20rpx; } .cu-bar.input .action { margin-left: 20rpx; } .cu-bar.input .action [class*="wlIcon-"] { font-size: 48rpx; } .cu-bar.input input+.action { margin-right: 20rpx; margin-left: 0rpx; } .cu-bar.input .action:first-child [class*="wlIcon-"] { margin-left: 0rpx; } .cu-custom { display: block; position: relative; } .cu-custom .cu-bar .content { width: calc(100% - 440rpx); } .cu-custom .cu-bar .content image { height: 60rpx; width: 240rpx; } .cu-custom .cu-bar { min-height: 0px; padding-right: 200rpx; 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; } .cu-custom .cu-bar .border-custom::after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border-radius: inherit; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; 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; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; 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; } /* ==================导航栏==================== */ .nav { white-space: nowrap; } ::-webkit-scrollbar { display: none; } .nav .cu-item { height: 90rpx; display: inline-block; line-height: 90rpx; margin: 0 10rpx; padding: 0 20rpx; } .nav .cu-item.cur { border-bottom: 4rpx solid; } /* ==================时间轴==================== */ .cu-timeline { display: block; background-color: #ffffff; } .cu-timeline .cu-time { width: 120rpx; text-align: center; padding: 20rpx 0; font-size: 26rpx; color: #888; display: block; } .cu-timeline>.cu-item { padding: 30rpx 30rpx 30rpx 120rpx; position: relative; display: block; z-index: 0; } .cu-timeline>.cu-item:not([class*="text-"]) { color: #ccc; } .cu-timeline>.cu-item::after { content: ""; display: block; position: absolute; width: 1rpx; background-color: #ddd; left: 60rpx; height: 100%; top: 0; z-index: 8; } .cu-timeline>.cu-item::before { font-family: "wlIcon"; 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*="wlIcon-"])::before { content: "\e763"; } .cu-timeline>.cu-item[class*="wlIcon-"]::before { background-color: #ffffff; width: 50rpx; height: 50rpx; text-align: center; border: none; line-height: 50rpx; left: 36rpx; } .cu-timeline>.cu-item>.content { padding: 30rpx; border-radius: 6rpx; display: block; line-height: 1.6; } .cu-timeline>.cu-item>.content:not([class*="bg-"]) { background-color: #f1f1f1; color: #333333; } .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 { max-width: calc(100% - 260rpx); margin: 0 40rpx; display: flex; align-items: center; } .cu-chat .cu-item>image { height: 320rpx; } .cu-chat .cu-item>.main .content { padding: 20rpx; border-radius: 6rpx; display: inline-flex; max-width: 100%; align-items: center; font-size: 30rpx; position: relative; min-height: 80rpx; line-height: 40rpx; text-align: left; } .cu-chat .cu-item>.main .content:not([class*="bg-"]) { background-color: #ffffff; color: #333333; } .cu-chat .cu-item .date { position: absolute; font-size: 24rpx; color: #8799a3; width: calc(100% - 320rpx); bottom: 20rpx; left: 160rpx; } .cu-chat .cu-item .action { padding: 0 30rpx; display: flex; align-items: center; } .cu-chat .cu-item>.main .content::after { content: ""; top: 27rpx; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; z-index: 100; display: inline-block; overflow: hidden; width: 24rpx; height: 24rpx; left: -10rpx; right: initial; background-color: inherit; border-radius: 2rpx; } .cu-chat .cu-item.self>.main .content::after { left: auto; right: -10rpx; } /*.cu-chat .cu-item>.main .content::before {content: "";top: 30rpx;transform: rotate(45deg);position: absolute;z-index: -1;display: inline-block;overflow: hidden;width: 24rpx;height: 24rpx;left: -12rpx;right: initial;background-color: inherit;filter: blur(5rpx);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; } .cu-chat .cu-item.self { justify-content: flex-end; text-align: right; } .cu-chat .cu-info { display: inline-block; 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 { display: block; overflow: hidden; } .cu-card>.cu-item { display: block; background-color: #ffffff; overflow: hidden; border-radius: 10rpx; margin: 30rpx; } .cu-card>.cu-item.shadow-blur { overflow: initial; } .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; } .cu-card.case .image image { width: 100%; } .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; } .cu-card.dynamic { display: block; } .cu-card.dynamic>.cu-item { display: block; background-color: #ffffff; overflow: hidden; } .cu-card.dynamic>.cu-item>.text-content { padding: 0 30rpx 0; max-height: 6.4em; 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; } /* card.dynamic>.cu-item .comment {padding: 20rpx;background-color: #f1f1f1;margin: 0 30rpx 30rpx;border-radius: 6rpx;} */ .cu-card.article { display: block; } .cu-card.article>.cu-item { padding-bottom: 30rpx; } .cu-card.article>.cu-item .title { font-size: 30rpx; font-weight: 900; color: #333333; line-height: 100rpx; padding: 0 30rpx; } .cu-card.article>.cu-item .content { display: flex; padding: 0 30rpx; } .cu-card.article>.cu-item .content>image { width: 240rpx; height: 6.4em; margin-right: 20rpx; border-radius: 6rpx; } .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; height: 4.8em; 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 { text-align: justify; padding-right: 30rpx; font-size: 30rpx; position: relative; height: 60rpx; line-height: 60rpx; } .cu-form-group input { flex: 1; font-size: 30rpx; color: #555; padding-right: 20rpx; } .cu-form-group>text[class*="wlIcon-"] { 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.align-start .title { height: 1em; margin-top: 32rpx; line-height: 1em; } .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: wlIcon; display: block; content: "\e645"; 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; } /* ==================模态窗口==================== */ .cu-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1110; opacity: 0; outline: 0; text-align: center; -webkit-transform: scale(1.185); transform: scale(1.185); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 2000rpx; perspective: 2000rpx; background: rgba(0, 0, 0, 0.6); transition: all 0.3s ease-in-out 0s; pointer-events: none; } .cu-modal::before { content: "\200B"; display: inline-block; height: 100%; vertical-align: middle; } .cu-modal.show { opacity: 1; transition-duration: 0.3s; -webkit-transform: scale(1); transform: scale(1); overflow-x: hidden; overflow-y: auto; pointer-events: auto; } .cu-dialog { position: relative; display: inline-block; vertical-align: middle; margin-left: auto; margin-right: auto; width: 680rpx; max-width: 100%; background-color: #f8f8f8; border-radius: 10rpx; overflow: hidden; } .cu-modal.bottom-modal { margin-bottom: -1000rpx; } .cu-modal.bottom-modal.show { margin-bottom: 0; } .cu-modal.bottom-modal::before { vertical-align: bottom; } .cu-modal.bottom-modal .cu-dialog { width: 100%; border-radius: 0; } .cu-modal.top-modal { margin-top: -1000rpx; background: transparent; } .cu-modal.top-modal.show { margin-top: 0; } .cu-modal.top-modal::before { vertical-align: top; } .cu-modal.top-modal .cu-dialog { width: 100%; border-radius: 0 0 25rpx 25rpx; background: rgba(60, 60, 60, 0.9); } .cu-modal.drawer-modal { -webkit-transform: scale(1); transform: scale(1); display: flex; } .cu-modal.drawer-modal .cu-dialog { height: 100%; min-width: 200rpx; border-radius: 0; margin: initial; transition-duration: 0.3s; } .cu-modal.drawer-modal.justify-start .cu-dialog { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .cu-modal.drawer-modal.justify-end .cu-dialog { -webkit-transform: translateX(100%); transform: translateX(100%); } .cu-modal.drawer-modal.show .cu-dialog { -webkit-transform: translateX(0%); transform: translateX(0%); } .cu-modal .cu-dialog>.cu-bar:first-child .action { min-width: 100rpx; margin-right: 0; min-height: 100rpx; } /* ==================轮播==================== */ 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 { min-height: 375rpx; } .screen-swiper image, .screen-swiper video, .swiper-item image, .swiper-item video { width: 100%; display: block; height: 100%; margin: 0; pointer-events: none; } .card-swiper { height: 420rpx !important; } .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; -webkit-transform: scale(0.9); transform: scale(0.9); transition: all 0.2s ease-in 0s; overflow: hidden; } .card-swiper swiper-item.cur .swiper-item { -webkit-transform: none; transform: none; transition: all 0.2s ease-in 0s; } .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; transition: all 0.2s ease-in 0s; 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; } scroll-view.cu-steps { display: block; white-space: nowrap; } scroll-view.cu-steps .cu-item { display: inline-block; } .cu-steps .cu-item { flex: 1; text-align: center; position: relative; min-width: 100rpx; } .cu-steps .cu-item:not([class*="text-"]) { color: #8799a3; } .cu-steps .cu-item [class*="wlIcon-"], .cu-steps .cu-item .num { display: block; font-size: 40rpx; line-height: 80rpx; } .cu-steps .cu-item::before, .cu-steps .cu-item::after, .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after { content: ""; display: block; position: absolute; height: 0px; width: calc(100% - 80rpx); border-bottom: 1px solid #ccc; left: calc(0px - (100% - 80rpx) / 2); top: 40rpx; z-index: 0; } .cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after { content: "\e645"; font-family: 'wlIcon'; 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; top: initial; } .cu-steps .cu-item::after { border-bottom: 1px solid currentColor; width: 0px; transition: all 0.3s ease-in-out 0s; } .cu-steps .cu-item[class*="text-"]::after { width: calc(100% - 80rpx); color: currentColor; } .cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after { display: none; } .cu-steps .cu-item .num { width: 40rpx; height: 40rpx; border-radius: 50%; line-height: 40rpx; margin: 20rpx auto; font-size: 24rpx; border: 1px solid currentColor; position: relative; overflow: hidden; } .cu-steps .cu-item[class*="text-"] .num { background-color: currentColor; } .cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after { content: attr(data-index); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: all 0.3s ease-in-out 0s; -webkit-transform: translateY(0rpx); transform: translateY(0rpx); } .cu-steps .cu-item[class*="text-"] .num::before { -webkit-transform: translateY(-40rpx); transform: translateY(-40rpx); color: #ffffff; } .cu-steps .cu-item .num::after { -webkit-transform: translateY(40rpx); transform: translateY(40rpx); color: #ffffff; transition: all 0.3s ease-in-out 0s; } .cu-steps .cu-item[class*="text-"] .num::after { content: "\e66c"; font-family: 'wlIcon'; color: #ffffff; -webkit-transform: translateY(0rpx); transform: translateY(0rpx); } .cu-steps .cu-item[class*="text-"] .num.err::after { content: "\e66b"; } /* ==================布局==================== */ /* -- 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; } .align-content-between { align-content: space-between } .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 { 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); } .grid.grid-square>view>text[class*="wlIcon-"] { font-size: 52rpx; position: absolute; color: #777; margin: auto; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .grid.grid-square>view { margin-right: 20rpx; margin-bottom: 20rpx; border-radius: 6rpx; position: relative; overflow: hidden; } .grid.grid-square>view.bg-img image { width: 100%; height: 100%; position: absolute; } .grid.col-1.grid-square>view { padding-bottom: 100%; height: 0; margin-right: 0; } .grid.col-2.grid-square>view { padding-bottom: calc((100% - 20rpx)/2); height: 0; width: calc((100% - 20rpx)/2); } .grid.col-3.grid-square>view { padding-bottom: calc((100% - 40rpx)/3); height: 0; width: calc((100% - 40rpx)/3); } .grid.col-4.grid-square>view { padding-bottom: calc((100% - 60rpx)/4); height: 0; width: calc((100% - 60rpx)/4); } .grid.col-5.grid-square>view { padding-bottom: calc((100% - 80rpx)/5); height: 0; width: calc((100% - 80rpx)/5); } .grid.col-2.grid-square>view:nth-child(2n), .grid.col-3.grid-square>view:nth-child(3n), .grid.col-4.grid-square>view:nth-child(4n), .grid.col-5.grid-square>view:nth-child(5n) { margin-right: 0; } .grid.col-1>view { width: 100%; } .grid.col-2>view { width: 50%; } .grid.col-3>view { width: 33.33%; } .grid.col-4>view { width: 25%; } .grid.col-5>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-s { margin-top: 6rpx; } .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; } /* -- 浮动 -- */ .cf::after, .cf::before { content: " "; display: table; } .cf::after { clear: both; } .fl { float: left; } .fr { float: right; } /* ==================背景==================== */ .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; } .bg-red { background-color: #F43F3B; color: #ffffff; } .bg-orange { background-color: #fe6600; 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: #333333; } .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; } .bg-olive.light { color: #8dc63f; background-color: #e8f4d9; } .bg-green.light { color: #39b54a; background-color: #d7f0dbff; } .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; } .bg-gradual-red { background-image: linear-gradient(45deg, #f43f3b, #ec008c); color: #ffffff; } .bg-gradual-orange { background-image: linear-gradient(45deg, #ff5200, #fe6600); 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); } .bg-img { background-size: cover; background-position: center; background-repeat: no-repeat; } .bg-mask { background-color: #333333; position: relative; } .bg-mask::after { content: ""; border-radius: inherit; width: 100%; height: 100%; display: block; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .bg-mask view, .bg-mask cover-view { z-index: 5; position: relative; } .bg-video { position: relative; } .bg-video video { display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; top: 0; z-index: 0; pointer-events: none; } /* ==================文本==================== */ .text-xs { font-size: 22rpx; } .text-sm { font-size: 26rpx; } .text-df { font-size: 28rpx; } .text-30 { font-size: 30rpx; } .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; } .text-Abc { text-transform: Capitalize; } .text-ABC { text-transform: Uppercase; } .text-abc { text-transform: Lowercase; } .text-price::before { content: "¥"; font-size: 80%; margin-right: 4rpx; } .text-cut { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .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: #ff2b00; } .text-orange, .line-orange, .lines-orange { color: #fe6600; } .text-yellow, .line-yellow, .lines-yellow { color: #FF6A0C; } .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: #F840B1; } .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; } page, page { background: #F7F7F7; font-size: 28rpx; color: #222222; } image{will-change: transform} /* 全局图片加速 */ /* image{will-change: transform;} */ /* APP 磨砂玻璃状态栏高度 */ /* 绝对定位的视图需要考虑 tabBar 遮挡的问题,bottom 应该加上 tabBar 的高度 */ .fixedView { position: fixed; bottom: 0px; } .safeAreaBottom { height: 100rpx; height: calc(env(safe-area-inset-bottom) + 100rpx); width: 100%; } [class*="wlIcon-"] { font-family: "wlIcon"; font-size: inherit; font-style: normal; } .cu-dialog { background-color: #ffffff; } .cu-modal { z-index: 990; } .cu-modal.bottom-modal .cu-dialog { border-radius: 20rpx 20rpx 0 0; } .cu-modal.wanl-share .cu-dialog{ background-color: transparent; border-radius: 0; } .margin-bj { margin: 25rpx; } .margin-top-bj { margin-top: 25rpx; } .margin-right-bj { margin-right: 25rpx; } .margin-bottom-bj { margin-bottom: 25rpx; } .margin-left-bj { margin-left: 25rpx; } .margin-lr-bj { margin-left: 25rpx; margin-right: 25rpx; } .margin-tb-bj { margin-top: 25rpx; margin-bottom: 25rpx; } .padding-bj { padding: 25rpx; } .padding-top-bj { padding-top: 25rpx; } .padding-right-bj { padding-right: 25rpx; } .padding-left-bj { padding-left: 25rpx; } .padding-lr-bj { padding-left: 25rpx; padding-right: 25rpx; } .padding-tb-bj { padding-top: 25rpx; padding-bottom: 25rpx; } .padding-bottom-bj { padding-bottom: 25rpx; } .text-min { font-size: 24rpx; } .text-wl { font-size: 26rpx; } .text-bold1 { font-weight: 100; } .text-bold2 { font-weight: 200; } .text-bold4 { font-weight: 400; } .text-bold5 { font-weight: 500; } .text-bold6 { font-weight: 600; } .text-bold7 { font-weight: 700; } .text-bold8 { font-weight: 800; } .text-dec { text-decoration: line-through; } .text-cut-2 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .radius-bock { border-radius: 18rpx; overflow: hidden; } .bg-gradual-yellow { background-image: linear-gradient(to left, #ff9700, #ffca00); color: white; } .bg-transparent{ background-color: transparent !important; } .bg-white { color: #222222; } .bg-nav { background-color: #f9f9f9; } .bg-bgcolor { background-color: #F7F7F7; } .wanl-black { color: black; } /* 标准黑 */ .wanl-pip { color: #222222; } /* 灰色 */ .wanl-gray { color: #828282; } /* 深灰 */ .wanl-gray-dark { color: #666666; } /* 浅灰 */ .wanl-gray-light { color: #999999; } .wanl-orange { color: #fe6600; } .wanl-red { color: #ff243a; } /* 字体渐变 - 红色 */ .wanl-text-red { background-image: -webkit-linear-gradient(right, #f43f3b, #ec008c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 黄色 */ .wanl-text-yellow { background-image: -webkit-linear-gradient(right, #ff9700, #ffca00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 橙色 */ .wanl-text-orange { background-image: -webkit-linear-gradient(right, #ff9700, #ed1c24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 紫罗兰 */ .wanl-text-violet { background-image: -webkit-linear-gradient(right, #709cff, #9000ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 蓝色 */ .wanl-text-blue { background-image: -webkit-linear-gradient(right, #0081ff, #1cbbb4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 浅蓝色 */ .wanl-text-light-blue { background-image: -webkit-linear-gradient(right, #55c9fc, #0c79ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 粉色 */ .wanl-text-pink { background-image: -webkit-linear-gradient(right, #ec008c, #6739b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 绿色 */ .wanl-text-green { background-image: -webkit-linear-gradient(right, #39b54a, #8dc63f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 紫色 */ .wanl-text-purple { background-image: -webkit-linear-gradient(right, #9000ff, #5e00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 白灰 */ .wanl-text-white { background-image: -webkit-linear-gradient(top, #ffffff, #cccccc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cu-custom .cu-tag.badge { top: 10rpx; right: -15rpx; } .cu-custom .cu-bar { background-size: 100%; } .cu-custom .bar-bg { background-size: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .cu-custom .search-swiper { width: 100%; height: 100%; } .cu-bar .search-form { font-size: 28rpx; } .cu-bar .action:first-child>text[class*="wlIcon-"] { margin-left: 0; margin-right: -0.1em; } .placeholder { color: #999; font-size: 28rpx; } /* 万联渐变背景色*/ /* 橘红色 */ .wanl-bg-redorange { background: #ff3d33; background-image: linear-gradient(90deg, #ff6333 0, #fe6600 97%); color: white; } .wanl-bg-redorange-light { background-image: linear-gradient(90deg, #ffc0ae 0, #ffa7b0 97%); color: white; } /* 橙色 */ .wanl-bg-orange { color: white; background-image: linear-gradient(-90deg, #ff4950 0, #ff8123 100%); } /* 粉色 */ .wanl-bg-pink { color: white; background-image: linear-gradient(-90deg, #fa3b26 3%, #ff4d8a 96%); } /* 蓝色 */ .wanl-bg-blue { color: white; background-image: linear-gradient(-90deg, #2676fa 0, #23d7ff 100%); } /* 蓝色 */ .wanl-bg-nav { background-color: #f8f8f8; color: #000000; } /* 吸顶容器 */ .wanl-sticky-box { display: flex; position: -webkit-sticky; position: sticky; top: 0px; z-index: 1025; flex-direction: row; } .wanl-sticky-box .bg-white { background-color: rgba(255, 255, 255, .9); } /* 数字框 */ .wanl-numberBox { width: 200rpx; height: 58rpx; border-radius: 100rpx; padding: 8rpx 6rpx 6rpx 6rpx; display: flex; align-items: center; justify-content: space-between; } .wanl-numberBox text { background-color: #f2f2f2; padding: 8rpx; font-size: 30rpx; } .wanl-numberBox.solid:after { border: 1px solid #dddddd; } /* 优惠券 */ .wanl-ticket { display: flex; align-items: center; margin-right: 18rpx; } .wanl-ticket .ticket-price { height: 60rpx; line-height: 60rpx; position: relative; background: #ff5700; color: white; /* border-radius: 3rpx 0 0 3rpx; */ padding-left: 12rpx; padding-right: 10rpx; font-weight: bold; } .wanl-ticket .ticket-title { font-size: 20rpx; display: flex; align-items: center; color: #ff5700; height: 60rpx; position: relative; background-color: #fff; border-radius: 0 6rpx 6rpx 0; border: #ff5700 solid 1px; border-left: 0; padding: 0 8rpx; } .wanl-ticket .ticket-price:before { content: ""; width: 18rpx; height: 16rpx; background-color: #F7F7F7; position: absolute; top: 50%; left: -10rpx; margin-top: -8rpx; border-radius: 50%; z-index: 1; } .position-relative{ position: relative; } /* 弹出层 */ .wanl-modal { position: relative; min-height: 500rpx; max-height: 1200rpx; padding-bottom: 128rpx; padding-bottom: calc(118rpx + env(safe-area-inset-bottom)); } .wanl-modal .head { display: flex; position: relative; align-items: center; } .wanl-modal .head .content { display: flex; justify-content: center; width: 100%; } .wanl-modal .head .close { position: absolute; right: 25rpx; } .wanl-modal .listbox { text-align: left; } .wanl-modal .listbox .name { position: relative; padding-left: 60rpx; color: #333; } .wanl-modal .listbox .name>text[class*="wlIcon-"] { position: absolute; top: 5rpx; left: 5rpx; color: #ff243a; } .wanl-modal .listbox .description { padding: 20rpx 0 40rpx 60rpx; } .wanl-modal .scroll-y { text-align: left; width: 100%; height: 800rpx; padding: 25rpx; padding-top: 0; } .wanl-modal .scroll-y .table { display: flex; justify-content: space-between; width: 100%; } .wanl-modal .scroll-y .table .name { width: 23%; padding: 25rpx 0; } .wanl-modal .scroll-y .table .value { width: 75%; padding: 25rpx 0; } .wanl-modal .foot { position: absolute; padding-top: 25rpx; bottom: 0; width: 100%; height: 128rpx; height: calc(118rpx + env(safe-area-inset-bottom)); } .wanl-modal .foot .cu-btn { padding: 0; width: 50%; height: 78rpx; } .wanl-modal .foot .cu-btn.complete { width: 100%; } /* 规格 */ .wanl-modal.option .head { text-align: left; } .wanl-modal.option .head .close { top: 25rpx; line-height: 45rpx; } .wanl-modal.option .head .cu-avatar { width: 200rpx; height: 220rpx; } .wanl-modal.option .opt .tag { display: flex; flex-wrap: wrap; } .wanl-modal.option .opt .tag .cu-tag { margin-right: 25rpx; margin-top: 20rpx; padding: 0px 25rpx; height: 65rpx; background-color: #f6f6f6; border-radius: 12rpx; color: #222222; } .wanl-modal.option .opt .tag .cu-tag.active { color: #eb5d2a; background-color: #fdf9f9; } .wanl-modal.option .opt .tag .cu-tag.active:after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1rpx solid currentColor; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 25rpx; z-index: 1; pointer-events: none; } .wanl-modal.option .opt .tag .cu-tag.disabled { color: #bbb; background-color: #f9f9f9; } .wanl-modal.option .opt .tag .cu-tag.noactive { color: #cacaca; background-color: #efefef; } .wanl-modal.option .opt .tag .cu-tag+.cu-tag { margin-left: 0; } .wanl-modal.option .number { display: flex; justify-content: space-between; align-items: center; } /* 菜单 */ .wanl-modal-menu { padding: 0 25rpx; box-sizing: border-box; padding-top: 18rpx; } /* grid 1-2-2布局 */ .grid.col-1-2-2>view { width: 50%; } .grid.col-1-2-2>view:nth-child(1) { width: 100%; } /* grid 1-1_2布局 */ .grid.col-1-1_2>view { width: 50%; } .grid.col-1-1_2>view:nth-child(1) { width: 100%; } .grid.col-1-1_2>view:nth-child(2) { width: 50%; } .grid.col-1-1_2>view:nth-child(3), .grid.col-1-1_2>view:nth-child(4) { width: 25%; } /* grid 2-1_2布局 */ .grid.col-2-1_2>view { width: 50%; } .grid.col-2-1_2>view:nth-child(1), .grid.col-2-1_2>view:nth-child(2), .grid.col-2-1_2>view:nth-child(3) { width: 50%; } .grid.col-2-1_2>view:nth-child(4), .grid.col-2-1_2>view:nth-child(5) { width: 25%; } /* grid 2-2_1布局 */ .grid.col-2-2_1>view { width: 50%; } .grid.col-2-2_1>view:nth-child(1), .grid.col-2-2_1>view:nth-child(2) { width: 50%; } .grid.col-2-2_1>view:nth-child(3), .grid.col-2-2_1>view:nth-child(4) { width: 25%; } /* grid 2-2-1_2布局 */ .grid.col-2-2-1_2>view { width: 50%; } .grid.col-2-2-1_2>view:nth-child(1), .grid.col-2-2-1_2>view:nth-child(2), .grid.col-2-2-1_2>view:nth-child(3), .grid.col-2-2-1_2>view:nth-child(4), .grid.col-2-2-1_2>view:nth-child(5) { width: 50%; } .grid.col-2-2-1_2>view:nth-child(6), .grid.col-2-2-1_2>view:nth-child(7) { width: 25%; } /* grid 2-4布局 */ .grid.col-2-4>view { width: 50%; } .grid.col-2-4>view:nth-child(3), .grid.col-2-4>view:nth-child(4), .grid.col-2-4>view:nth-child(5), .grid.col-2-4>view:nth-child(6) { width: 25%; } /* grid 2-2-4布局 */ .grid.col-2-2-4>view { width: 50%; } .grid.col-2-2-4>view:nth-child(5), .grid.col-2-2-4>view:nth-child(6), .grid.col-2-2-4>view:nth-child(7), .grid.col-2-2-4>view:nth-child(8) { width: 25%; } /* 万联标签 */ .wanl-tag { display: flex; align-items: center; } .wanl-tag .triangle { width: 0; height: 0; border-top: 18rpx solid transparent; border-bottom: 18rpx solid transparent; border-right: 18rpx solid #ffdb00; } .wanl-tag .content { background-color: #ffdb00; border-radius: 0 6rpx 6rpx 0; height: 36rpx; line-height: 36rpx; vertical-align: inherit; font-size: 24rpx; padding-right: 16rpx; padding-left: 8rpx; color: #5c1d10; } /* 左右圆角 */ .round-left { border-radius: 5000rpx 0 0 5000rpx; } .round-right { border-radius: 0 5000rpx 5000rpx 0; } .cu-bar .action.transparent:first-child { margin-left: 18rpx; font-size: 40rpx; } .cu-bar .action.transparent:last-child { margin-right: 18rpx; font-size: 40rpx; } .cu-tag:empty:not([class*="wlIcon-"]) { z-index: 2; } .wanl-list .drawer .scroll { width: 100%; height: 100%; padding-bottom: 116rpx; padding-bottom: calc(116rpx + env(safe-area-inset-bottom)); padding-top: 15rpx; padding-top: calc(5rpx + env(safe-area-inset-top)); } .wanl-list .drawer .scroll .title { color: #666666; font-size: 24rpx; padding: 25rpx 20rpx; display: flex; align-items: center; justify-content: space-between; } .wanl-list .drawer .scroll .from { display: flex; padding: 0 20rpx 25rpx 20rpx; } .wanl-list .drawer .scroll .from>text { padding: 0 25rpx; line-height: 60rpx; color: #f1f1f1; } .wanl-list .drawer .scroll .from>input { background: #f8f8f8; font-size: 24rpx; color: #999; height: 60rpx; text-align: center; border-radius: 999rpx; } .wanl-list .drawer .scroll .list { display: grid; grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */ grid-gap: 16rpx; /* grid-column-gap 和 grid-row-gap的简写 */ grid-auto-flow: row; font-size: 25rpx; color: #666666; padding: 0 16rpx 25rpx 16rpx; } .wanl-list .drawer .scroll .list>text { display: flex; align-items: center; justify-content: center; background: #f8f8f8; border-radius: 5rpx; min-height: 70rpx; position: relative; overflow: hidden; } .wanl-list .drawer .scroll .list .active { background: #feeae1; color: #ff4f00; } .wanl-list .drawer .scroll .list .active::before { font-family: "wlIcon"; content: "\e6db"; position: absolute; right: -1px; top: -1px; font-size: 30rpx; } .wanl-list .drawer .footer { position: fixed; bottom: 0; background: #fff; display: flex; justify-content: flex-end; padding: 20rpx 26rpx 0 0; width: 100%; height: 116rpx; height: calc(116rpx + env(safe-area-inset-bottom)); } .wanl-list .drawer .footer .cu-btn { height: 76rpx; padding: 0 50rpx; } /* 底部导航 */ .wanlian.cu-bar.tabbar { background-color: #f8f8f8; padding: 0; height: calc(100rpx + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); z-index: 2; } .wanlian.cu-bar.tabbar .action .badge { top: -8rpx; right: 0; background-color: #fe6600; } .wanlian.cu-bar.tabbar.shop .action { width: 106rpx; } .wanlian.cu-bar.tabbar .btn-group { justify-content: center; } .wanlian.cu-bar.tabbar .btn-group .cu-btn { padding: 0; width: 190rpx; height: 78rpx; } /* ==================直播==================== */ .wan-live {} /* 商品详情页 直播图标 */ .wan-live .tag { display: flex; align-items: center; border-radius: 18rpx; position: absolute; right: 25rpx; font-size: 20rpx; flex-wrap: wrap; background-color: rgba(0, 0, 0, 0.2); padding-bottom: 8rpx; } .wan-live .live { width: 100%; height: 52rpx; display: flex; align-items: center; justify-content: center; } .wanLive-icon { width: 7%; height: 70%; position: relative; --color: #ff8d40; background-color: var(--color); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-animation: wanLive 0.6s 0.2s infinite ease-in-out; animation: wanLive 0.6s 0.2s infinite ease-in-out; } .wanLive-icon::after { right: 200%; -webkit-animation: wanLive 0.6s 0.4s infinite ease-in-out; animation: wanLive 0.6s 0.4s infinite ease-in-out; } .wanLive-icon::before { left: 200%; -webkit-animation: wanLive 0.6s 0s infinite ease-in-out; animation: wanLive 0.6s 0s infinite ease-in-out; } .wanLive-icon::after, .wanLive-icon::before { width: 100%; height: 100%; content: ''; position: absolute; bottom: 0; background-color: var(--color); -webkit-transform-origin: bottom; transform-origin: bottom; } @-webkit-keyframes wanLive { 0%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } } @keyframes wanLive { 0%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } } /* ==================自定义页面==================== */ .wanl-page { width: 100%; overflow: hidden; } /* ==================商品列表==================== */ /* 全局样式 */ .wanl-product .content { display: flex; flex: 1; flex-wrap: wrap; align-content: space-between; } .wanl-product .content>view { width: 100%; } .wanl-product .content .goods-tag { margin-top: 4rpx; margin-bottom: 10rpx; } /* 普通布局 */ .wanl-product .product_list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .wanl-product .product_list .item { border-radius: 16rpx; background-color: #fff; overflow: hidden; } .wanl-product .product_list .item .img-wrap, .wanl-product .product_list .item image { height: 250rpx; width: 250rpx; } /* 瀑布流布局 */ .wanl-product .product_warter .warter { border-radius: 16rpx !important; background-color: #ffffff; overflow: hidden; } .wanl-product .product_warter .warter .image { border-radius: 16rpx 16rpx 0 0 !important; width: 100%; overflow: hidden; } .wanl-product .product_warter .warter .img-wrap { margin-bottom: -4px; } /* 一列布局 */ .wanl-product [class*='col-1-'] .item image, .wanl-product [class*='col-1-'] .item .img-wrap { border-radius: 16rpx; } .wanl-product .product_list.col-1-10 { margin: 0 10rpx; padding-top: 10rpx; } .wanl-product .product_list.col-1-10 .item { display: flex; width: 100%; margin-bottom: 10rpx; } .wanl-product .product_list.col-1-15 { margin: 0 15rpx; padding-top: 15rpx; } .wanl-product .product_list.col-1-15 .item { display: flex; width: 100%; margin-bottom: 15rpx; } .wanl-product .product_list.col-1-20 { margin: 0 20rpx; padding-top: 20rpx; } .wanl-product .product_list.col-1-20 .item { display: flex; width: 100%; margin-bottom: 20rpx; } .wanl-product .product_list.col-1-25 { margin: 0 25rpx; padding-top: 25rpx; } .wanl-product .product_list.col-1-25 .item { display: flex; width: 100%; margin-bottom: 25rpx; } .wanl-product .product_list.col-1-30 { margin: 0 30rpx; padding-top: 30rpx; } .wanl-product .product_list.col-1-30 .item { display: flex; width: 100%; margin-bottom: 30rpx; } /* 瀑布流 二列布局 */ .wanl-product .product_warter.col-2-10 { margin: 0 10rpx; padding-top: 10rpx; } .wanl-product .product_warter.col-2-10 .warter { margin-bottom: 10rpx; } .wanl-product .product_warter.col-2-10 .warter.right { margin-left: 5rpx; } .wanl-product .product_warter.col-2-10 .warter.left { margin-right: 5rpx; } .wanl-product .product_warter.col-2-15 { margin: 0 15rpx; padding-top: 15rpx; } .wanl-product .product_warter.col-2-15 .warter { margin-bottom: 15rpx; } .wanl-product .product_warter.col-2-15 .warter.right { margin-left: 7.5rpx; } .wanl-product .product_warter.col-2-15 .warter.left { margin-right: 7.5rpx; } .wanl-product .product_warter.col-2-20 { margin: 0 20rpx; padding-top: 20rpx; } .wanl-product .product_warter.col-2-20 .warter { margin-bottom: 20rpx; } .wanl-product .product_warter.col-2-20 .warter.right { margin-left: 10rpx; } .wanl-product .product_warter.col-2-20 .warter.left { margin-right: 10rpx; } .wanl-product .product_warter.col-2-25 { margin: 0 25rpx; padding-top: 25rpx; } .wanl-product .product_warter.col-2-25 .warter { margin-bottom: 25rpx; } .wanl-product .product_warter.col-2-25 .warter.right { margin-left: 12.5rpx; } .wanl-product .product_warter.col-2-25 .warter.left { margin-right: 12.5rpx; } .wanl-product .product_warter.col-2-30 { margin: 0 30rpx; padding-top: 30rpx; } .wanl-product .product_warter.col-2-30 .warter { margin-bottom: 30rpx; } .wanl-product .product_warter.col-2-30 .warter.right { margin-left: 15rpx; } .wanl-product .product_warter.col-2-30 .warter.left { margin-right: 15rpx; } /* 二列布局 */ .wanl-product .product_list[class*='col-2-'] .item image, .wanl-product .product_list[class*='col-2-'] .item .img-wrap { width: 100%; height: 400rpx; } .wanl-product .product_list[class*='col-2-'] .comment { display: none; } .wanl-product .product_list[class*='col-2-'] .content { height: 200rpx; } .wanl-product .product_list.col-2-10 { margin: 0 10rpx; padding-top: 10rpx; } .wanl-product .product_list.col-2-10:after { content: ''; width: calc((100% - 10rpx) / 2); } .wanl-product .product_list.col-2-10 .item { width: calc((100% - 10rpx) / 2); margin-bottom: 10rpx; } .wanl-product .product_list.col-2-15 { margin: 0 15rpx; padding-top: 15rpx; } .wanl-product .product_list.col-2-15:after { content: ''; width: calc((100% - 15rpx) / 2); } .wanl-product .product_list.col-2-15 .item { width: calc((100% - 15rpx) / 2); margin-bottom: 15rpx; } .wanl-product .product_list.col-2-20 { margin: 0 20rpx; padding-top: 20rpx; } .wanl-product .product_list.col-2-20:after { content: ''; width: calc((100% - 20rpx) / 2); } .wanl-product .product_list.col-2-20 .item { width: calc((100% - 20rpx) / 2); margin-bottom: 20rpx; } .wanl-product .product_list.col-2-25 { margin: 0 25rpx; padding-top: 25rpx; } .wanl-product .product_list.col-2-25:after { content: ''; width: calc((100% - 25rpx) / 2); } .wanl-product .product_list.col-2-25 .item { width: calc((100% - 25rpx) / 2); margin-bottom: 25rpx; } .wanl-product .product_list.col-2-30 { margin: 0 30rpx; padding-top: 30rpx; } .wanl-product .product_list.col-2-30:after { content: ''; width: calc((100% - 30rpx) / 2); } .wanl-product .product_list.col-2-30 .item { width: calc((100% - 30rpx) / 2); margin-bottom: 30rpx; } /* 三列布局 */ .wanl-product [class*='col-3-'] .item image, .wanl-product [class*='col-3-'] .item .img-wrap { width: 100%; } .wanl-product .product_list.col-3-10 { margin: 0 10rpx; padding-top: 10rpx; } .wanl-product .product_list.col-3-10:after { content: ''; width: calc((100% - 20rpx) / 3); } .wanl-product .product_list.col-3-10 .item { width: calc((100% - 20rpx) / 3); margin-bottom: 10rpx; } .wanl-product .product_list.col-3-15 { margin: 0 15rpx; padding-top: 15rpx; } .wanl-product .product_list.col-3-15:after { content: ''; width: calc((100% - 30rpx) / 3); } .wanl-product .product_list.col-3-15 .item { width: calc((100% - 30rpx) / 3); margin-bottom: 15rpx; } .wanl-product .product_list.col-3-20 { margin: 0 20rpx; padding-top: 20rpx; } .wanl-product .product_list.col-3-20:after { content: ''; width: calc((100% - 40rpx) / 3); } .wanl-product .product_list.col-3-20 .item { width: calc((100% - 40rpx) / 3); margin-bottom: 20rpx; } .wanl-product .product_list.col-3-25 { margin: 0 25rpx; padding-top: 25rpx; } .wanl-product .product_list.col-3-25:after { content: ''; width: calc((100% - 50rpx) / 3); } .wanl-product .product_list.col-3-25 .item { width: calc((100% - 50rpx) / 3); margin-bottom: 25rpx; } .wanl-product .product_list.col-3-30 { margin: 0 30rpx; padding-top: 30rpx; } .wanl-product .product_list.col-3-30:after { content: ''; width: calc((100% - 60rpx) / 3); } .wanl-product .product_list.col-3-30 .item { width: calc((100% - 60rpx) / 3); margin-bottom: 30rpx; } /* ==================评论页==================== */ .wanl-comment .subject .goods { display: flex; align-items: center; width: 100%; } .wanl-comment .subject .goods .cu-avatar { width: 130rpx; height: 130rpx; margin-right: 20rpx; } .wanl-comment .subject .goods .content { width: calc(100% - 150rpx); } .wanl-comment .subject .comment { display: flex; align-items: center; justify-items: center; } .wanl-comment .subject .comment .comment-title { width: 160rpx; color: #666666; } .wanl-comment .subject .comment .comment-operate { display: flex; } .wanl-comment .subject .comment .comment-operate .item { display: flex; align-items: center; justify-items: center; width: 150rpx; color: #c3c2ca; } .wanl-comment .subject .comment .comment-operate .item text { margin-right: 15rpx; font-size: 35rpx; } .wanl-comment .subject .comment .comment-operate .item.action { color: #ff4e02; font-weight: 500; } .wanl-comment .subject .comment .comment-operate .item.action .wlIcon-haoping:before { content: "\e6e7"; } .wanl-comment .subject .comment .comment-operate .item.action .wlIcon-chaping:before { content: "\e6e6"; } .wanl-comment .subject .describe { background-color: #fafafa; } .wanl-comment .subject .describe textarea { margin: 0; } .wanl-comment .subject .upload {} .wanl-comment .operate .score { display: flex; align-items: center; margin-top: 25rpx; } .wanl-comment .operate .score .title { width: 150rpx; } /* ==================消息通知==================== */ .wanl-notice { position: relative; } .wanl-notice .tool { display: flex; align-items: center; padding-bottom: 190rpx; margin-left: 25rpx; padding-top: 6rpx; } .wanl-notice .tool .cu-tag { width: 40rpx; height: 40rpx; font-size: 25rpx; background-color: rgba(0, 0, 0, .05); } .wanl-notice .mode { position: absolute; width: 100%; bottom: -60rpx; } .wanl-notice .mode .shadow-warp { box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 10rpx; } .wanl-notice .mode .flex { background-color: white; border-radius: 25rpx; justify-content: space-between; align-items: center; padding: 25rpx 70rpx; } .wanl-notice .mode .flex>view { position: relative; } .wanl-notice .mode .flex>view .cu-tag.badge { top: 0; right: 0; height: 32rpx; } .wanl-notice .mode .flex>view .cu-tag.badge:not([class*="bg-"]) { background-color: red; } .wanl-notice .mode .flex text { display: block; width: 100rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 48rpx; color: white; background-color: red; border-radius: 5000rpx; margin-bottom: 10rpx; } .wanl-notice .mode .flex .logistics text { background-image: linear-gradient(to right, #0081ff, #56ade0) } .wanl-notice .mode .flex .notice text { background-image: linear-gradient(to right, #ff9700, #f9ec50); } .wanl-notice .mode .flex .Interaction text { background-image: linear-gradient(to right, #3edc53, #8dc63f) } /* 消息列表 */ .wanl-msg { padding-top: 66rpx; background-color: white; } .wanl-msg .cu-list.menu-avatar>.cu-item>.cu-avatar { left: 25rpx; } .wanl-msg .cu-list.menu-avatar>.cu-item .content { left: 145rpx; } .wanl-msg .cu-list.menu-avatar>.cu-item .action .cu-tag { border-radius: 1000rpx; font-size: 24rpx; padding: 0px 11rpx; height: 35rpx; line-height: 35rpx; } .wanl-msg .cu-avatar { background-color: transparent; } /* ==================物流通知==================== */ /* 列表 */ .wanl-logistics-list .item .title { display: flex; justify-content: space-between; align-items: center; } .wanl-logistics-list .item .action { background-color: #f7f7f7; display: flex; overflow: hidden; border-radius: 10rpx; } .wanl-logistics-list .item .action image { width: 150rpx; height: 150rpx; } .wanl-logistics-list .item .action .padding-xs { width: calc(100% - 150rpx); } /* 详情 */ /* ==================产品详情==================== */ /* 价格-普通 */ .wanl-goods .price { display: flex; justify-content: space-between; } .wanl-goods .price .text-xxl { font-size: 52rpx; } .wanl-goods .price .follow { text-align: center; } .wanl-goods .price .follow text { display: block; } .wanl-goods .price .follow text[class*="wlIcon-"] { font-size: 36rpx; } /* 价格-拼团 */ .wanl-goods .price-pintuan{ background-image: linear-gradient(90deg, #ff5f00 0, #ff243a 97%); } .wanl-goods .price-pintuan .price { padding-bottom: 20rpx; } .wanl-goods .price-pintuan .price .cu-capsule { vertical-align: 0.25em; } .wanl-goods .price-pintuan .price .cu-capsule .cu-tag[class*="line-"]:after { border-width: 3rpx; } /* 价格-抢购 */ .wanl-goods .price-rush .price { padding-top: 20rpx; padding-bottom: 20rpx; } .wanl-goods .price-rush .price .title { display: flex; } .wanl-goods .price-rush .price .amount { margin: 0 6rpx; color: #ffdb00; } /* 标题 */ .wanl-goods .title { display: flex; position: relative; } .wanl-goods .title .name { width: 80%; } .wanl-goods .title .share .button { position: absolute; top: 6rpx; right: 0; background-color: #f4f4f4; border-radius: 500rpx 0 0 500rpx; padding: 7rpx 12rpx; display: flex; align-items: center; white-space: nowrap; } /* 物流 */ .wanl-goods .block { display: flex; justify-content: space-between; align-items: center; } .wanl-goods .block .margin-right-xs { margin-right: 5rpx; } /* 营销 */ .wanl-goods .promotion .item { display: flex; position: relative; padding: 20rpx 25rpx; } .wanl-goods .promotion .item:after { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height: 200%; border-bottom: 0.5px solid #ddd; border-radius: inherit; content: " "; -webkit-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; } .wanl-goods .promotion .item:last-child:after { border: none; } .wanl-goods .promotion .item .label { height: 24px; line-height: 24px; width: 80rpx; } .wanl-goods .promotion .item .conten { width: 80%; } .wanl-goods .promotion .item .conten .promotion-header { padding-top: 6rpx; margin-bottom: 16rpx; height: 36rpx; display: flex; align-items: center; white-space: nowrap; } .wanl-goods .promotion .item .conten .promotion-header:last-child { margin-bottom: 10rpx; } .wanl-goods .promotion .item .conten .promotion-header .cu-tag { font-size: 22rpx; padding: 0px 8rpx; color: #ff243a; } .wanl-goods .promotion .item .bnt-quan { display: block; vertical-align: top; position: absolute; right: 25rpx; top: 26rpx; } /* 活动 */ .wanl-goods .partake .item { display: flex; justify-content: space-between; align-items: center; } .wanl-goods .partake .item .info { display: flex; align-items: center; } /* 选择 */ .wanl-goods .choice {} .wanl-goods .choice .commodity { display: flex; justify-content: space-between; align-items: flex-start; } .wanl-goods .choice .commodity .opt { display: flex; } .wanl-goods .choice .commodity .opt .title { width: 80rpx; flex-shrink: 0; } .wanl-goods .choice .commodity .opt .option {} .wanl-goods .choice .commodity .opt .option .selected { display: flex; } .wanl-goods .choice .commodity .opt .option .option-list .cu-tag { background-color: #f7f7f7; color: #999; border-radius: 12rpx; height: 60rpx; margin-right: 15rpx; margin-top: 25rpx; padding: 0px 20rpx; font-size: 24rpx; } .wanl-goods .choice .commodity .opt .option .option-list .cu-tag+.cu-tag { margin-left: 0; } /* 评价 */ .wanl-goods .comment {} .wanl-goods .comment .head { display: flex; justify-content: space-between; } .wanl-goods .comment .label .cu-tag { background-color: #fff5ef; margin-right: 18rpx; margin-top: 25rpx; height: 60rpx; line-height: 60rpx; padding: 0 22rpx; color: #272727; font-size: 26rpx; } .wanl-goods .comment .label .cu-tag+.cu-tag { margin-left: 0; } .wanl-goods .comment .user { margin-bottom: 25rpx; } .wanl-goods .comment .user .userinfo { display: flex; justify-content: space-between; align-items: center; } .wanl-goods .comment .user .userinfo .avatar { display: flex; align-items: center; } .wanl-goods .comment .user .grid.col-1>view { width: 50%; } .wanl-goods .comment .user .details { margin: 20rpx 0; } .wanl-goods .comment .more { display: flex; justify-content: center; align-items: center; } /* 店铺 */ .wanl-goods .shop .shopinfo { display: flex; align-items: center; position: relative; } .wanl-goods .shop .shopinfo .cu-avatar {} .wanl-goods .shop .shopinfo .shopname { position: absolute; left: 116rpx; } .wanl-goods .shop .shopinfo .bnt { position: absolute; right: 0; } .wanl-goods .shop .shopinfo .bnt .cu-btn { padding: 0 16rpx; font-size: 24rpx; height: 54rpx; } .wanl-goods .shop .quality { display: flex; justify-content: space-between; align-items: center; } .wanl-goods .shop .quality .cu-tag { vertical-align: baseline; font-size: 20rpx; padding: 0 6rpx; height: 30rpx; } .wanl-goods .shop .quality text { margin: 0 15rpx; } .wanl-goods .shop .quality .cu-tag.gao { background-color: #feebe2; color: #ff6601; } /* 店铺推荐 */ .wanl-goods .shop-recom .head { display: flex; justify-content: space-between; } .wanl-goods .shop-recom .recommend { display: flex; justify-content: space-between; flex-wrap: wrap; } .wanl-goods .shop-recom .recommend:after { content: ''; width: 32%; border: 1px solid transparent; } .wanl-goods .shop-recom .recommend .item { width: 32%; margin-top: 25rpx; } .wanl-goods .shop-recom .recommend .item image { height: 220rpx; overflow: hidden; border-radius: 8rpx; } .wanl-goods-content { width: 100%; overflow: hidden; } /* 评论页 */ .wanl-goods-comment .head .cu-tag { height: 60rpx; background-color: #ffeee3; color: #383736; padding: 0 25rpx; margin: 25rpx 15rpx 0 0; } .wanl-goods-comment .head .cu-tag.active { background-color: #fe6600; color: white; } .wanl-goods-comment .list { margin-bottom: 25rpx; background-color: white; padding-bottom: 0; } .wanl-goods-comment .list .userinfo { display: flex; justify-content: space-between; align-items: center; } .wanl-goods-comment .list .userinfo .avatar { display: flex; align-items: center; } .wanl-goods-comment .list .grid.col-1>view { width: 450rpx; } .wanl-goods-comment .list .details { margin: 20rpx 0; } .wanl-goods-comment .list .goods { background-color: #f5f5f5; display: flex; align-items: center; } .wanl-goods-comment .list .goods .cu-avatar { width: 120rpx; height: 120rpx; } .wanl-goods-comment .list .goods .content { width: calc(100% - 145rpx); } /* ==================搜索页面==================== */ .wanl-search .history>view { margin-bottom: 50rpx; } .wanl-search .history .title { display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx; margin-bottom: 10rpx; } .wanl-search .list { display: flex; flex-wrap: wrap; } .wanl-search .list>view { background: #f8f8f8; color: #666666; margin: 20rpx 20rpx 0 0; padding: 10rpx 25rpx; border-radius: 9999rpx; position: relative; } .wanl-search .cu-list.menu>.cu-item { min-height: 86rpx; } /* ==================搜索列表==================== */ .wanl-list .headtop { height: 80rpx; } .wanl-list .headtop .cue { position: fixed; width: 100%; -webkit-animation-name: fluctuate; animation-name: fluctuate; -webkit-animation-duration: .2s; animation-duration: .2s; z-index: 1000; } .wanl-list .bar { padding: 0 40rpx; display: flex; align-items: center; justify-content: space-between; min-height: 80rpx; font-size: 28rpx; background-color: #f7f7f7; } .wanl-list .bar .item { color: #555; display: flex; justify-content: center; align-items: center; } .wanl-list .bar .item.current { color: #ff4f00; } .wanl-list .bar .item .box { display: flex; flex-direction: column; height: 42rpx; line-height: 1; } .wanl-list .bar .item .box text[class*="wlIcon-"] { color: #cccccc; margin: 0 10rpx; font-weight: bold; font-size: 22rpx; } .wanl-list .bar .item .box text[class*="wlIcon-"].active { color: #ff4f00; } .wanl-list .menus { height: 80rpx; background-color: white; display: flex; align-items: center; } /* ==================聊天窗口==================== */ .wanl-chat .chatfoot { position: fixed; width: 100%; bottom: 0; z-index: 1024; } /* ==================订单列表==================== */ .wanl-order-list { height: 100%; } .wanl-order-list .list-scroll-content { height: 100%; } .wanl-order-list .uni-swiper-item { height: auto; } /* 菜单 */ .wanl-order-list .navbar { display: flex; height: 60rpx; color: #3d4144; font-size: 26rpx; z-index: 10; } .wanl-order-list .navbar .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; position: relative; } .wanl-order-list .navbar .nav-item.current { color: #ff4f00; } .wanl-order-list .navbar .nav-item.current:after { content: ""; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 40%; height: 0; border-bottom: 2px solid #ff4f00; } /* 商品 */ .wanl-order-list .order-item { display: flex; flex-direction: column; padding-left: 25rpx; background: #fff; margin: 0 18rpx; margin-top: 25rpx; } .wanl-order-list .order-item .head { display: flex; align-items: center; justify-content: space-between; height: 80rpx; } .wanl-order-list .order-item .goods-box { display: flex; padding-top: 25rpx; } .wanl-order-list .order-item .goods-box .content { flex: 1; display: flex; } .wanl-order-list .order-item .goods-box .content .describe { flex: 1; } .wanl-order-list .order-item .goods-box .content .parameter { width: 140rpx; text-align: right; } .wanl-order-list .order-item .price-box { display: flex; justify-content: flex-end; align-items: baseline; padding: 28rpx; padding-top: 50rpx; } .wanl-order-list .order-item .action-box { display: flex; justify-content: flex-end; align-items: center; position: relative; } .wanl-order-list .order-item .action-box .cu-btn { padding: 0 30rpx; font-size: 24rpx; height: 60rpx; } /* ================== 优惠券 ==================== */ .wanl-coupon .item { height: 210rpx; position: relative; overflow: hidden; display: flex; } /* 样式开始 */ .wanl-coupon .item.reduction .colour { color: #ff4f00; } .wanl-coupon .item.reduction .tagstyle { background-color: #fff0e6; color: #ff4f00; } .wanl-coupon .item.reduction .cu-btn { color: #ffffff; background-color: #ff4f00; } .wanl-coupon .item.reduction .cu-btn.line-colour { color: #ff4f00; background-color: transparent; } .wanl-coupon .item.discount .colour { color: #39b54a; } .wanl-coupon .item.discount .tagstyle { background-color: #e9ffec; color: #39b54a; } .wanl-coupon .item.discount .cu-btn { color: #ffffff; background-color: #39b54a; } .wanl-coupon .item.discount .cu-btn.line-colour { color: #39b54a; background-color: transparent; } .wanl-coupon .item.shipping .colour { color: #0081ff; } .wanl-coupon .item.shipping .tagstyle { background-color: #e1f0ff; color: #0081ff; } .wanl-coupon .item.shipping .cu-btn { color: #ffffff; background-color: #0081ff; } .wanl-coupon .item.shipping .cu-btn.line-colour { color: #0081ff; background-color: transparent; } .wanl-coupon .item.vip .colour { color: #f5a623; } .wanl-coupon .item.vip .tagstyle { background-color: #fff7e9; color: #f5a623; } .wanl-coupon .item.vip .cu-btn { color: #ffffff; background-color: #f5a623; } .wanl-coupon .item.vip .cu-btn.line-colour { color: #f5a623; background-color: transparent; } /* 样式结束 */ .wanl-coupon .item .coupon-bg { width: 100%; height: 210rpx; position: absolute; left: 0; top: 0; z-index: 1; } .wanl-coupon .item .coupon-sign { height: 110rpx; width: 110rpx; position: absolute; z-index: 99; top: -30rpx; right: 30rpx; } .wanl-coupon .item .item-left { width: 218rpx; height: 210rpx; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-shrink: 0; } .wanl-coupon .item .item-left .price { font-size: 52rpx; font-weight: bold; } .wanl-coupon .item .item-left .prices { font-size: 50rpx; font-weight: bold; } .wanl-coupon .item .item-left .discount { font-size: 22rpx; } .wanl-coupon .item .item-left .cu-tag { margin-top: 8rpx; } .wanl-coupon .item .item-right { display: flex; flex-wrap: wrap; flex: 1; height: 210rpx; z-index: 2; overflow: hidden; align-content: space-between; } .wanl-coupon .item .item-right .shop { display: flex; width: 100%; justify-content: space-between; } .wanl-coupon .item .item-right .shop .name { flex: 1; } .wanl-coupon .item .item-right .title { display: flex; align-items: center; width: 100%; } .wanl-coupon .item .item-right .content { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .wanl-coupon .item .item-right .cu-btn.sm { padding: 0 25rpx; font-size: 24rpx; height: 60rpx; } /* ==================订单列表==================== */ .wanl-order .address .cu-avatar { width: 82rpx; height: 82rpx; font-size: 1.6em; } .wanl-order .address.cu-list.menu-avatar>.cu-item>.cu-avatar { left: 25rpx; } .wanl-order .address.cu-list.menu-avatar>.cu-item .content { left: 130rpx; width: calc(100% - 200rpx); } .wanl-order .address.cu-list.menu-avatar>.cu-item .action { width: 40rpx; } .wanl-order .lists .shopname { margin: 20rpx 25rpx 30rpx 25rpx; } .wanl-order .lists .cu-list.menu-avatar>.cu-item { padding-right: 25rpx; height: 160rpx; align-items: flex-start; } .wanl-order .lists .cu-list.menu-avatar>.cu-item:after, .wanl-order .lists .cu-list.menu>.cu-item:after { border-bottom: 0; } .wanl-order .lists .cu-list.menu-avatar>.cu-item .content { position: absolute; left: 186rpx; width: calc(100% - 350rpx); line-height: 1.2em; } .wanl-order .lists .cu-list.menu-avatar>.cu-item .content>view:first-child { font-size: 26rpx; } .wanl-order .lists .cu-list.menu-avatar>.cu-item>.cu-avatar { position: absolute; left: 25rpx; width: 140rpx; height: 140rpx; } .wanl-order .lists .cu-list.menu-avatar>.cu-item .action { width: 180rpx; text-align: right; } /* 操作 */ .wanl-order form .cu-form-group+.cu-form-group { border-top: 0 } .wanl-order form .cu-form-group { padding: 0 25rpx; } .wanl-order form .cu-form-group .title { font-size: 26rpx; height: 52rpx; line-height: 52rpx; padding-right: 25rpx; } .wanl-order form .cu-form-group:first-child { margin-top: 25rpx; } .wanl-order form .cu-form-group { min-height: 76rpx; } .wanl-order form .cu-form-group picker:after { line-height: 76rpx; font-size: 30rpx; color: #333333; } .wanl-order form .cu-form-group picker .picker { line-height: 76rpx; font-size: 26rpx; } .wanl-order form .wanl-numberBox { width: 180rpx; height: 54rpx; padding: 6rpx; } .wanl-order form .wanl-numberBox text { padding: 8rpx; font-size: 30rpx; } /* 文本行高度 */ .wanl-order form .cu-form-group.align-start .title { margin-top: 14rpx; } .wanl-order form .cu-form-group textarea { font-size: 26rpx; margin: 24rpx 0 0 0; height: 3.5em; } .wanl-order .wanlian.cu-bar.tabbar { background-color: white; justify-content: flex-end; } .wanl-order .wanlian.cu-bar.tabbar .cu-btn { font-size: 28rpx; height: 76rpx; } /* ==================sku组件==================== */ .wanl_sku { background-color: #fafafa; color: #9c9c9c; margin-top: 10rpx; padding: 4rpx 8rpx; border-radius: 6rpx; display: inline-flex; } /* ==================支付页面==================== */ .wanl-pay .price-box { background-color: #fff; height: 300rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 80rpx; color: #666666; } .wanl-pay .list-box { margin-top: 20rpx; background-color: #fff; padding-left: 60rpx; } .wanl-pay .list-box .item { height: 120rpx; padding: 20rpx 0; display: flex; justify-content: space-between; align-items: center; padding-right: 60rpx; font-size: 30rpx; position: relative; } .wanl-pay .list-box .item .wlIcon-balance-pay { color: #fe8e2e; } .wanl-pay .list-box .item .wlIcon-alipay-pay { color: #06a0f8; } .wanl-pay .list-box .item .wlIcon-jssdk-pay { color: #26af41; } .wanl-pay .list-box .item .wlIcon-wechat-pay { color: #26af41; } .wanl-pay .list-box .item .wlIcon-baidu-pay { color: #e84330; } .wanl-pay .list-box .item>text[class*="wlIcon-"] { width: 100rpx; font-size: 52rpx; } .wanl-pay .list-box .item .action { flex: 1; display: flex; flex-direction: column; font-size: 24rpx; color: #999999; } .wanl-pay .list-box .item .action .title { font-size: 32rpx; margin-bottom: 4rpx; } .wanl-pay .mix-btn { display: flex; align-items: center; justify-content: center; width: 630rpx; height: 80rpx; margin: 80rpx auto 30rpx; font-size: 16px; color: #fff; border-radius: 10rpx; } .wanl-pay .footer { position: fixed; width: 100%; bottom: 0; color: #eaeaea; z-index: 1; height: 140rpx; height: calc(140rpx + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); } /* ==================客服服务==================== */ .wanl-service { display: flex; justify-content: space-around; align-items: center; align-content: center; text-align: center; height: 280rpx; } .wanl-service .cu-avatar.lg { width: 100rpx; height: 100rpx; font-size: 50rpx; } .wanl-you-like { background-size: 239rpx; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 50rpx; margin-top: 20rpx; } .wanl-poster__main .image ._img { -webkit-touch-callout: default; } /* CSS动画 */ [class*=animation-] { -webkit-animation-duration: .35s; animation-duration: .35s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animation-fade { -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-timing-function: linear; animation-timing-function: linear } .animation-scale-up { -webkit-animation-name: scale-up; animation-name: scale-up } .animation-scale-down { -webkit-animation-name: scale-down; animation-name: scale-down } .animation-slide-top { -webkit-animation-name: slide-top; animation-name: slide-top } .animation-slide-bottom { -webkit-animation-name: slide-bottom; animation-name: slide-bottom } .animation-slide-left { -webkit-animation-name: slide-left; animation-name: slide-left } .animation-slide-right { -webkit-animation-name: slide-right; animation-name: slide-right } .animation-shake { -webkit-animation-name: shake; animation-name: shake } .animation-reverse { animation-direction: reverse } .wlIconfont-spin { -webkit-animation: wlIcon-spin 2s infinite linear; animation: wlIcon-spin 2s infinite linear; display: inline-block; } .wlIconfont-pulse { -webkit-animation: wlIcon-spin 1s infinite steps(8); animation: wlIcon-spin 1s infinite steps(8); display: inline-block; } @-webkit-keyframes wlIcon-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes wlIcon-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes fluctuate { 0% { opacity: 0.5; -webkit-transform: translateY(-50rpx); transform: translateY(-50rpx); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fluctuate { 0% { opacity: 0.5; -webkit-transform: translateY(-50rpx); transform: translateY(-50rpx); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes fade { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fade { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes scale-up { 0% { opacity: 0; -webkit-transform: scale(.2); transform: scale(.2) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes scale-up { 0% { opacity: 0; -webkit-transform: scale(.2); transform: scale(.2) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes scale-down { 0% { opacity: 0; -webkit-transform: scale(1.8); transform: scale(1.8) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes scale-down { 0% { opacity: 0; -webkit-transform: scale(1.8); transform: scale(1.8) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes slide-top { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slide-top { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes slide-bottom { 0% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slide-bottom { 0% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 10% { -webkit-transform: translateX(-9px); transform: translateX(-9px) } 20% { -webkit-transform: translateX(8px); transform: translateX(8px) } 30% { -webkit-transform: translateX(-7px); transform: translateX(-7px) } 40% { -webkit-transform: translateX(6px); transform: translateX(6px) } 50% { -webkit-transform: translateX(-5px); transform: translateX(-5px) } 60% { -webkit-transform: translateX(4px); transform: translateX(4px) } 70% { -webkit-transform: translateX(-3px); transform: translateX(-3px) } 80% { -webkit-transform: translateX(2px); transform: translateX(2px) } 90% { -webkit-transform: translateX(-1px); transform: translateX(-1px) } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 10% { -webkit-transform: translateX(-9px); transform: translateX(-9px) } 20% { -webkit-transform: translateX(8px); transform: translateX(8px) } 30% { -webkit-transform: translateX(-7px); transform: translateX(-7px) } 40% { -webkit-transform: translateX(6px); transform: translateX(6px) } 50% { -webkit-transform: translateX(-5px); transform: translateX(-5px) } 60% { -webkit-transform: translateX(4px); transform: translateX(4px) } 70% { -webkit-transform: translateX(-3px); transform: translateX(-3px) } 80% { -webkit-transform: translateX(2px); transform: translateX(2px) } 90% { -webkit-transform: translateX(-1px); transform: translateX(-1px) } } @-webkit-keyframes slide-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slide-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @-webkit-keyframes slide-right { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slide-right { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @font-face { font-family: "wlIcon"; src: url('//at.alicdn.com/t/c/font_1394144_fesvc3fixit.ttf?t=1693791549607') format('truetype'); } .wlIcon { font-family: "wlIcon" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wlIcon-xiazai:before { content: "\e718"; } .wlIcon-zhuye:before { content: "\e83a"; } .wlIcon-shoushouzhang:before { content: "\e71c"; } .wlIcon-jiazai2:before { content: "\e71f"; } .wlIcon-biaoqing3:before { content: "\e746"; } .wlIcon-shangpin2:before { content: "\e722"; } .wlIcon-yhq:before { content: "\e714"; } .wlIcon-dingdan:before { content: "\e715"; } .wlIcon-kjhf:before { content: "\e717"; } .wlIcon-tup:before { content: "\e719"; } .wlIcon-lishi:before { content: "\e71b"; } .wlIcon-huidaodingbu:before { content: "\e70c"; } .wlIcon-shanchu:before { content: "\e713"; } .wlIcon-fangxiang4:before { content: "\e695"; } .wlIcon-groups:before { content: "\e70b"; } .wlIcon-fangxiang2:before { content: "\e694"; } .wlIcon-shoucangxuanzhong:before { content: "\e652"; } .wlIcon-shoucang:before { content: "\e653"; } .wlIcon-xuanzhuan:before { content: "\e68f"; } .wlIcon-xinxi:before { content: "\e648"; } .wlIcon-zan:before { content: "\e649"; } .wlIcon-jinrudianpu:before { content: "\e64a"; } .wlIcon-dianzan:before { content: "\e64b"; } .wlIcon-shengbo:before { content: "\e63c"; } .wlIcon-wentifankui:before { content: "\e643"; } .wlIcon-youhuiquan:before { content: "\e635"; } .wlIcon-gongnengjianyi:before { content: "\e637"; } .wlIcon-huanyipi:before { content: "\e638"; } .wlIcon-guanzhudianpu:before { content: "\e630"; } .wlIcon-yiguanzhu:before { content: "\e631"; } .wlIcon-huiyuanqia:before { content: "\e634"; } .wlIcon-chanpincanshu:before { content: "\e627"; } .wlIcon-goumai:before { content: "\e628"; } .wlIcon-baocundaozhuomian:before { content: "\e62e"; } .wlIcon-fenlei:before { content: "\e61f"; } .wlIcon-chiping:before { content: "\e623"; } .wlIcon-diyu:before { content: "\e620"; } .wlIcon-gaoyu:before { content: "\e622"; } .wlIcon-sousuo:before { content: "\e61e"; } .wlIcon-paixing:before { content: "\e659"; } .wlIcon-guanyuwo:before { content: "\e65a"; } .wlIcon-liebiaomoshi2:before { content: "\e656"; } .wlIcon-wodexuanzhong:before { content: "\e654"; } .wlIcon-shanchu1:before { content: "\e65b"; } .wlIcon-zanxuanzhong:before { content: "\e65c"; } .wlIcon-biaoqing1:before { content: "\e65d"; } .wlIcon-tishi:before { content: "\e65e"; } .wlIcon-cuowu:before { content: "\e660"; } .wlIcon-jifen1:before { content: "\e661"; } .wlIcon-zuji:before { content: "\e662"; } .wlIcon-jindianzi:before { content: "\e663"; } .wlIcon-shangpin:before { content: "\e626"; } .wlIcon-tupian:before { content: "\e62c"; } .wlIcon-shangchuan:before { content: "\e642"; } .wlIcon-pintuan2:before { content: "\e710"; } .wlIcon-youhuiquan-:before { content: "\e61b"; } .wlIcon-coupon:before { content: "\e61d"; } .wlIcon-youhuiquanbao:before { content: "\e70a"; } .wlIcon-pintuan3:before { content: "\e60e"; } .wlIcon-pintuan5:before { content: "\e632"; } .wlIcon-fuzhi:before { content: "\e712"; } .wlIcon-jiazai1:before { content: "\e711"; } .wlIcon-zhuyidapx:before { content: "\e70f"; } .wlIcon-dingdan1:before { content: "\e70e"; } .wlIcon-jinbitixian:before { content: "\e704"; } .wlIcon-yue1:before { content: "\e705"; } .wlIcon-zhanghuyue:before { content: "\e706"; } .wlIcon-zanwuchongzhijilu:before { content: "\e766"; } .wlIcon-chongzhichenggong:before { content: "\e707"; } .wlIcon-tixianjilu:before { content: "\e708"; } .wlIcon-yinhangka:before { content: "\e709"; } .wlIcon-apple-pay:before { content: "\e702"; } .wlIcon-baidu-pay:before { content: "\e703"; } .wlIcon-xuanze-danxuan:before { content: "\e6ff"; } .wlIcon-yueduliang:before { content: "\e701"; } .wlIcon-guijihuifang:before { content: "\e6f2"; } .wlIcon-icon_zhibo-mian:before { content: "\e700"; } .wlIcon-dianzan1:before { content: "\e6f9"; } .wlIcon-dianzan11:before { content: "\e6fd"; } .wlIcon-pinglun:before { content: "\e6fe"; } .wlIcon-zhibo:before { content: "\e6fa"; } .wlIcon-zhibozhong-0:before { content: "\e6fc"; } .wlIcon-weixiao:before { content: "\e745"; } .wlIcon-zan1:before { content: "\e870"; } .wlIcon-guanzhu4:before { content: "\e6fb"; } .wlIcon-xuanzeanniudian:before { content: "\e605"; } .wlIcon-xuanze:before { content: "\e6f8"; } .wlIcon-bangzhu3:before { content: "\e6f6"; } .wlIcon-icon-service:before { content: "\e617"; } .wlIcon-jiage:before { content: "\e6f1"; } .wlIcon-jingjiachenggong:before { content: "\e6f3"; } .wlIcon-shouhoufuwu-zidongpingjia:before { content: "\e604"; } .wlIcon-pingjiazongjie:before { content: "\e6f4"; } .wlIcon-baojiadan:before { content: "\e6f5"; } .wlIcon-youhuiquantuangou:before { content: "\e6ee"; } .wlIcon-icon_pinglun:before { content: "\e6ed"; } .wlIcon-mianxing-rili:before { content: "\e6f0"; } .wlIcon-jifen2:before { content: "\e616"; } .wlIcon-shibai:before { content: "\e87c"; } .wlIcon-pintuantuangouchenggong:before { content: "\e6eb"; } .wlIcon-pintu:before { content: "\e6ec"; } .wlIcon-pintuanzhuanqu:before { content: "\e6ee"; } .wlIcon-shezhi1:before { content: "\e6ef"; } .wlIcon-yiqipin:before { content: "\e61a"; } .wlIcon-qiye:before { content: "\e6e9"; } .wlIcon-qijiandian:before { content: "\e97f"; } .wlIcon-gerendian:before { content: "\e6ea"; } .wlIcon-chaping:before { content: "\e6e3"; } .wlIcon-haoping:before { content: "\e6e5"; } .wlIcon-zhongchaping:before { content: "\e6e6"; } .wlIcon-haoping1:before { content: "\e6e7"; } .wlIcon-tupian1:before { content: "\e6e2"; } .wlIcon-zhifeiji:before { content: "\e6e1"; } .wlIcon-fasong:before { content: "\e614"; } .wlIcon-fuwuxing:before { content: "\e6e8"; } .wlIcon-jubao:before { content: "\e6df"; } .wlIcon-caidanguanli_:before { content: "\e6e4"; } .wlIcon-guanbi1:before { content: "\e6db"; } .wlIcon-huatong01:before { content: "\e6de"; } .wlIcon-icon-test:before { content: "\e6e0"; } .wlIcon-biaoqing2:before { content: "\e6dc"; } .wlIcon-emoji_icon:before { content: "\e6dd"; } .wlIcon-yuyinyou:before { content: "\e6d9"; } .wlIcon-yuyinzuo:before { content: "\e6da"; } .wlIcon-pingjiapaizhao:before { content: "\e6d2"; } .wlIcon-yuanquanjiahao:before { content: "\e6d6"; } .wlIcon-wuuiconxiangjifangda:before { content: "\e6d7"; } .wlIcon-zhinengyuyinjiaohu:before { content: "\e6d8"; } .wlIcon-jianpanqiehuan:before { content: "\e7db"; } .wlIcon-yuyin:before { content: "\e606"; } .wlIcon-miao:before { content: "\e6cd"; } .wlIcon-kuaizhaobeifenyuhuifu:before { content: "\e6cb"; } .wlIcon-fabu:before { content: "\e6c9"; } .wlIcon-fuwuqi:before { content: "\e612"; } .wlIcon-fuwuqi1:before { content: "\e613"; } .wlIcon-categoryTitle:before { content: "\e6c6"; } .wlIcon-bofang:before { content: "\e6c4"; } .wlIcon-banner:before { content: "\e6c0"; } .wlIcon-image:before { content: "\e611"; } .wlIcon-notice:before { content: "\e6bf"; } .wlIcon-seckill:before { content: "\e60c"; } .wlIcon-menu:before { content: "\e6be"; } .wlIcon-article:before { content: "\e6d0"; } .wlIcon-video:before { content: "\e6d1"; } .wlIcon-activity:before { content: "\e6d3"; } .wlIcon-navicon-hd:before { content: "\e6d4"; } .wlIcon-goods:before { content: "\e6d5"; } .wlIcon-shangpin1:before { content: "\e75f"; } .wlIcon-likes:before { content: "\e6ce"; } .wlIcon-bargain:before { content: "\e6cf"; } .wlIcon-empty:before { content: "\e6bd"; } .wlIcon-search:before { content: "\e6c1"; } .wlIcon-division:before { content: "\e6c5"; } .wlIcon-classify:before { content: "\e6c8"; } .wlIcon-dianchifull:before { content: "\e60a"; } .wlIcon-WIFI:before { content: "\e71d"; } .wlIcon-xinhao:before { content: "\e609"; } .wlIcon-dianhua:before { content: "\e6bc"; } .wlIcon-tubiao309:before { content: "\e6ba"; } .wlIcon-huiyuanzhongxin:before { content: "\e779"; } .wlIcon-qiandao:before { content: "\e785"; } .wlIcon-bangzhu1:before { content: "\e840"; } .wlIcon-miaosha:before { content: "\e6bb"; } .wlIcon-bangzhu2:before { content: "\e607"; } .wlIcon-saoyisao-copy:before { content: "\e602"; } .wlIcon-leimu:before { content: "\e610"; } .wlIcon-jiazai:before { content: "\e721"; } .wlIcon-nan:before { content: "\e6b9"; } .wlIcon-nv:before { content: "\e60f"; } .wlIcon-Xiaomi:before { content: "\e6b8"; } .wlIcon-WeChat:before { content: "\e608"; } .wlIcon-WeiBo:before { content: "\e6b6"; } .wlIcon-QQ:before { content: "\e60b"; } .wlIcon-yue:before { content: "\e6b7"; } .wlIcon-balance-pay:before { content: "\e980"; } .wlIcon-alipay-pay:before { content: "\e981"; } .wlIcon-wechat-pay:before { content: "\e982"; } .wlIcon-zhifubaozhifu:before { content: "\e603"; } .wlIcon-jssdk-pay:before { content: "\e6b5"; } .wlIcon-weizhi1:before { content: "\e601"; } .wlIcon-baobei:before { content: "\e693"; } .wlIcon-guanzhu:before { content: "\e6b3"; } .wlIcon-zuji1:before { content: "\e6b4"; } .wlIcon-guanzhu3:before { content: "\e6f7"; } .wlIcon-listing-jf:before { content: "\e6c7"; } .wlIcon-liebiao:before { content: "\e6b2"; } .wlIcon-shaixuan:before { content: "\e881"; } .wlIcon-lajitong:before { content: "\e6cc"; } .wlIcon-huomiao2:before { content: "\e615"; } .wlIcon-dot:before { content: "\e6a9"; } .wlIcon-lei:before { content: "\e60d"; } .wlIcon-toutiao:before { content: "\e600"; } .wlIcon-headlines:before { content: "\e94a"; } .wlIcon-xiaoxizhongxin:before { content: "\e6b1"; } .wlIcon-shiyongbangzhu1:before { content: "\e824"; } .wlIcon-qingkong:before { content: "\e946"; } .wlIcon-shezhi:before { content: "\e6c3"; } .wlIcon-guanfang:before { content: "\e668"; } .wlIcon-gerenguanzhu:before { content: "\e667"; } .wlIcon-yiguanzhu1:before { content: "\e6b0"; } .wlIcon-fenxiangcopy:before { content: "\e6ae"; } .wlIcon-weizhi:before { content: "\e6af"; } .wlIcon-gouwuche:before { content: "\e6ac"; } .wlIcon-kefu:before { content: "\e6ad"; } .wlIcon-tishi1:before { content: "\e6ab"; } .wlIcon-wuliuqiache2:before { content: "\e821"; } .wlIcon-liuyan-fill:before { content: "\e6aa"; } .wlIcon-tongzhi:before { content: "\e6ca"; } .wlIcon-dianpu1:before { content: "\e6a7"; } .wlIcon-dianpu2:before { content: "\e6a8"; } .wlIcon-jian:before { content: "\e6a5"; } .wlIcon-tianjia:before { content: "\e6a6"; } .wlIcon-wancheng:before { content: "\e6a3"; } .wlIcon-ok:before { content: "\e6c2"; } .wlIcon-yunshuzhong:before { content: "\e70d"; } .wlIcon-paisongtixing:before { content: "\e6a4"; } .wlIcon-cainixihuan:before { content: "\e6a2"; } .wlIcon-fenxiao:before { content: "\e698"; } .wlIcon-kanjia:before { content: "\e69a"; } .wlIcon-unie737:before { content: "\e69e"; } .wlIcon-qianbao:before { content: "\e69f"; } .wlIcon-dizhi:before { content: "\e6a0"; } .wlIcon-pintuan:before { content: "\e6a1"; } .wlIcon-daifukuan:before { content: "\e655"; } .wlIcon-daishouhuo:before { content: "\e699"; } .wlIcon-daifahuo:before { content: "\e618"; } .wlIcon-gerenerweima:before { content: "\e69b"; } .wlIcon-shouhou:before { content: "\e69c"; } .wlIcon-daipinglun:before { content: "\e69d"; } .wlIcon-xinlang:before { content: "\e619"; } .wlIcon-weixin:before { content: "\e63a"; } .wlIcon-erweima:before { content: "\e658"; } .wlIcon-qianbao-:before { content: "\e657"; } .wlIcon-tuikuan:before { content: "\e665"; } .wlIcon-tuikuan1:before { content: "\e666"; } .wlIcon-31yuyinxuanzhong:before { content: "\e669"; } .wlIcon-31yuyin:before { content: "\e66a"; } .wlIcon-31guanbi:before { content: "\e66b"; } .wlIcon-31xuanze:before { content: "\e66c"; } .wlIcon-31xuanzhong:before { content: "\e66d"; } .wlIcon-31yiguanzhudianpu:before { content: "\e66e"; } .wlIcon-31dianpu:before { content: "\e66f"; } .wlIcon-31fenxiang:before { content: "\e670"; } .wlIcon-31zhuanfa:before { content: "\e671"; } .wlIcon-31daifahuo:before { content: "\e672"; } .wlIcon-31daifukuan:before { content: "\e673"; } .wlIcon-31daishouhuo:before { content: "\e674"; } .wlIcon-31daipingjia:before { content: "\e675"; } .wlIcon-tuikuantuihuo:before { content: "\e676"; } .wlIcon-31huiyuanqia:before { content: "\e677"; } .wlIcon-31youhuiquan:before { content: "\e678"; } .wlIcon-31hongbao:before { content: "\e679"; } .wlIcon-31gouwuchexuanzhong:before { content: "\e67a"; } .wlIcon-31gouwuche:before { content: "\e67b"; } .wlIcon-31guanzhuxuanzhong:before { content: "\e67c"; } .wlIcon-31guanzhu:before { content: "\e67d"; } .wlIcon-31shouyexuanzhong:before { content: "\e67e"; } .wlIcon-31shouye:before { content: "\e67f"; } .wlIcon-31wodexuanzhong:before { content: "\e680"; } .wlIcon-31wode:before { content: "\e681"; } .wlIcon-jiangjia:before { content: "\e682"; } .wlIcon-liwuhuodong:before { content: "\e683"; } .wlIcon-31jiancai:before { content: "\e684"; } .wlIcon-liebiaomoshi:before { content: "\e685"; } .wlIcon-zhongtumoshi:before { content: "\e686"; } .wlIcon-chakan:before { content: "\e687"; } .wlIcon-guanbi:before { content: "\e688"; } .wlIcon-guanzhu2:before { content: "\e689"; } .wlIcon-huore:before { content: "\e68a"; } .wlIcon-laba:before { content: "\e68b"; } .wlIcon-lingdang:before { content: "\e68c"; } .wlIcon-31paishexuanzhong:before { content: "\e68d"; } .wlIcon-31paishe:before { content: "\e68e"; } .wlIcon-31guanzhu1xuanzhong:before { content: "\e690"; } .wlIcon-fanhuigengduo:before { content: "\e949"; } .wlIcon-31guanzhu1:before { content: "\e691"; } .wlIcon-31huidaodingbu:before { content: "\e692"; } .wlIcon-31tishi:before { content: "\e696"; } .wlIcon-31haoyou:before { content: "\e697"; } .wlIcon-saoyisao:before { content: "\e61c"; } .wlIcon-jiang:before { content: "\e947"; } .wlIcon-sheng:before { content: "\e948"; } .wlIcon-fenxiang:before { content: "\e621"; } .wlIcon-fenlei1:before { content: "\e624"; } .wlIcon-sousuo1:before { content: "\e625"; } .wlIcon-dianpu:before { content: "\e629"; } .wlIcon-guanzhuxuanzhong:before { content: "\e62a"; } .wlIcon-guanzhu1:before { content: "\e62b"; } .wlIcon-wo:before { content: "\e62d"; } .wlIcon-biaoqing:before { content: "\e62f"; } .wlIcon-shijian:before { content: "\e633"; } .wlIcon-xiugaioryijian:before { content: "\e636"; } .wlIcon-pengyouquan:before { content: "\e639"; } .wlIcon-lianjie:before { content: "\e63b"; } .wlIcon-fanhui8:before { content: "\e63d"; } .wlIcon-fanhui7:before { content: "\e63e"; } .wlIcon-fanhui6:before { content: "\e63f"; } .wlIcon-fanhui5:before { content: "\e640"; } .wlIcon-gengduo:before { content: "\e641"; } .wlIcon-fanhui1:before { content: "\e644"; } .wlIcon-fanhui2:before { content: "\e645"; } .wlIcon-fanhui3:before { content: "\e646"; } .wlIcon-fanhui4:before { content: "\e647"; } .wlIcon-sanjiao2:before { content: "\e64c"; } .wlIcon-sanjiao1:before { content: "\e64d"; } .wlIcon-sanjiao4:before { content: "\e64e"; } .wlIcon-sanjiao3:before { content: "\e64f"; } .wlIcon-jifen:before { content: "\e650"; } .wlIcon-shanchu2:before { content: "\e651"; } .wlIcon-bangzhu:before { content: "\e65f"; } .wlIcon-hongbao:before { content: "\e664"; }