Files
damai-wx/pages/home/index.wxss
MagicalKudzu 8079e6c819 首次提交
2025-12-12 10:35:12 +08:00

3188 lines
74 KiB
Plaintext

.banner-wrapper.h5-div {
margin-bottom: 18rpx;
padding: 0 18rpx;
position: relative
}
.banner-wrapper.h5-div .banner-swiper,
.banner-wrapper.h5-div .slide-image,
.banner-wrapper.h5-div .slide-img-wrap {
border-radius: 12rpx;
height: 140rpx;
overflow: hidden
}
.banner-wrapper.h5-div .slide-image {
background: #f2f2f2 50%;
background-size: cover;
width: 100%
}
.banner-wrapper.h5-div .fs-slide-image {
background-repeat: no-repeat;
background-size: 100%auto;
border-radius: 12rpx;
height: 160rpx;
overflow: hidden;
width: 100%
}
.banner-wrapper.h5-div .indicator {
bottom: 10rpx;
display: flex;
flex-direction: row;
position: absolute;
right: 30rpx
}
.banner-wrapper.h5-div .indicator .indicator-item {
background-color: hsla(0, 0%, 100%, .6);
border-radius: 50%;
height: 12rpx;
margin: 0 4rpx;
width: 12rpx
}
.banner-wrapper.h5-div .indicator .indicator-item-checked {
background-color: #fff
}
.search-bar-wrap {
align-items: center;
display: flex;
height: 88rpx;
justify-content: center
}
.search-bar-wrap .search-bar {
align-items: center;
background-image: linear-gradient(90deg, #fff, #fcfcfc);
border: 2rpx solid #ffcadb;
border-radius: 200rpx 200rpx 200rpx 20rpx;
box-shadow: 0 6rpx 10rpx 0 rgba(209, 193, 255, .2);
box-sizing: border-box;
display: flex;
height: 60rpx;
justify-content: space-between;
margin-left: 24rpx;
margin-right: 24rpx;
padding: 18rpx 24rpx;
width: 100%
}
.search-bar-wrap .search-bar .main {
color: #ff91b5;
flex: 2;
font-size: 28rpx;
letter-spacing: 0;
line-height: 24rpx;
min-height: 24rpx;
opacity: .8;
padding-left: 44rpx;
position: relative
}
.search-bar-wrap .search-bar .main::before {
background-image: url(//gw.alicdn.com/imgextra/i3/O1CN01jR1Dhh24795KO72kA_!!6000000007343-2-tps-64-64.png);
background-size: 32rpx 32rpx;
content: "";
height: 32rpx;
left: 0;
opacity: 1;
position: absolute;
top: -5rpx;
width: 32rpx
}
.search-bar-wrap .search-bar .action {
border-left: 1rpx solid #dcc4fa;
color: #000;
font-size: 28rpx;
line-height: 30rpx;
padding-left: 63rpx;
position: relative;
text-align: justify
}
.search-bar-wrap .search-bar .action::before {
background-image: url(//gw.alicdn.com/imgextra/i3/O1CN01P5Byox1FUvF04FZfl_!!6000000000491-2-tps-480-480.png);
background-size: 32rpx 32rpx;
content: "";
height: 32rpx;
left: 24.5rpx;
opacity: 1;
position: absolute;
top: -1rpx;
width: 32rpx
}
.show-slider-container.h5-div {
background-color: #fff;
border-radius: 12rpx;
margin: 0 18rpx 18rpx;
padding-bottom: 24rpx;
padding-left: 30rpx;
padding-top: 10rpx
}
.show-slider-container.h5-div .show-slider-header {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
padding-right: 24rpx
}
.show-slider-container.h5-div .show-slider-header .show-slider-tabs {
display: flex;
height: 76rpx;
width: 80%
}
.show-slider-container.h5-div .show-slider-header .bui-tab.tph {
color: #5f6672;
font-size: 30rpx;
font-weight: 400;
padding-left: 0
}
.show-slider-container.h5-div .show-slider-header .bui-tab+.bui-tab.tph {
padding-right: 10rpx
}
.show-slider-container.h5-div .show-slider-header .bui-tabs-mask.tph {
background: transparent
}
.show-slider-container.h5-div .show-slider-header .bui-tab-miniapp-active.tph {
color: #000;
font-weight: 600
}
.show-slider-container.h5-div .show-slider-header .bui-tab-miniapp-active-line.tph {
background-image: linear-gradient(270deg, #ffbeed, #ff70b8);
border-radius: 20rpx;
height: 8rpx;
transition-duration: 0ms
}
.show-slider-container.h5-div .show-slider-header .skip-all {
align-items: center;
color: #5f6672;
display: flex;
font-family: PingFangSC-Regular, sans-serif;
font-size: 24rpx;
justify-content: flex-end
}
.show-slider-container.h5-div .bui-tabpanel.tph {
display: flex !important
}
.show-slider-container.h5-div .show-card-container {
width: 152rpx
}
.show-slider-container.h5-div .show-card-container:last-child {
padding-right: 24rpx
}
.show-slider-container.h5-div .show-card-container .show-card-picture {
background: #cecece;
border-radius: 12rpx;
height: 204rpx;
margin-bottom: 14rpx;
overflow: hidden;
position: relative;
width: 152rpx
}
.show-slider-container.h5-div .show-card-container .show-card-picture .card-picture {
height: 100%;
width: 100%
}
.show-slider-container.h5-div .show-card-container .show-card-picture .fs-card-picture {
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank {
background-position: top;
background-repeat: no-repeat;
background-size: 100%;
height: 56rpx;
left: 9rpx;
position: absolute;
top: 0;
width: 44rpx
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-1 {
background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN01ScpYWo1lJ4hUInwmU_!!6000000004797-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-2 {
background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01xZ2TYW1z2UzFcGH5o_!!6000000006656-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-3 {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN014ifrsQ21wx2KdkOyy_!!6000000007050-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-4 {
background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN01WCPjQL1rjzfrcXvIW_!!6000000005668-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-5 {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01JH1L7S1CiFvIgdsIj_!!6000000000114-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-6 {
background-image: url(https://gw.alicdn.com/imgextra/i2/O1CN019DW7WL1PbT3ess2tu_!!6000000001859-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-7 {
background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01vReUXo1klBOP1uX7G_!!6000000004723-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-8 {
background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01zqw65h1qHleJgKzWA_!!6000000005471-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-9 {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01fqehhv1wj917ltNYJ_!!6000000006343-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .rank.order-10 {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01Y7GBTF1ZuNZNzLfsu_!!6000000003254-2-tps-66-83.png)
}
.show-slider-container.h5-div .show-card-container .show-card-picture .tag {
align-items: center;
background: #000;
border-radius: 6rpx;
color: #fff;
display: flex;
font-family: PingFangSC-Regular, sans-serif;
font-size: 18rpx;
font-weight: 400;
height: 26rpx;
opacity: .9;
padding: 2rpx 6rpx;
position: absolute;
right: 6rpx;
top: 6rpx
}
.show-slider-container.h5-div .show-card-container .show-card-picture .bottom-wrap {
background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
bottom: 0;
height: 96rpx;
left: 0;
position: absolute;
width: 100%
}
.show-slider-container.h5-div .show-card-container .show-card-picture .bottom-wrap .score {
bottom: 6rpx;
color: #fff;
display: flex;
font-size: 24rpx;
font-weight: 500;
left: 6rpx;
line-height: 24rpx;
position: absolute
}
.show-slider-container.h5-div .show-card-container .show-card-picture .bottom-wrap .score .unit {
color: #fff;
font-family: PingFangSC-Regular, sans-serif;
font-size: 20rpx;
font-weight: 400;
margin-left: 2rpx
}
.show-slider-container.h5-div .show-card-container .show-card-title {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #2e333e;
display: -webkit-box;
font-family: PingFangSC-Medium, sans-serif;
font-size: 24rpx;
font-weight: 500;
height: 68rpx;
line-height: 34rpx;
margin-bottom: 6rpx;
overflow: hidden;
text-overflow: ellipsis
}
.show-slider-container.h5-div .show-card-container .show-card-subtitle {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #9c9ca5;
display: -webkit-box;
font-family: PingFangSC-Regular, sans-serif;
font-size: 22rpx;
font-weight: 400;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis
}
.show-slider-container.h5-div .show-card-container .show-card-price {
align-items: center;
display: flex;
height: 60rpx;
overflow: hidden
}
.show-slider-container.h5-div .show-card-container .show-card-price .price {
align-items: baseline;
color: #ff4886;
display: flex;
font-size: 28rpx;
font-weight: 500;
margin-right: 3rpx
}
.show-slider-container.h5-div .show-card-container .show-card-price .price .unit {
font-family: PingFangSC-Medium, sans-serif;
font-size: 20rpx;
font-weight: 500;
margin-right: 2rpx
}
.show-slider-container.h5-div .show-card-container .show-card-price .price .count {
white-space: nowrap
}
.show-slider-container.h5-div .show-card-container .show-card-price .text {
color: #666;
font-family: PingFangSC-Regular, sans-serif;
font-size: 20rpx;
font-weight: 400;
margin-left: 4rpx
}
.show-slider-container.h5-div .show-card-container .show-card-price .undetermined {
color: var(--bui-color-red);
font-family: PingFangSC;
font-size: 24rpx;
font-weight: 500;
line-height: 24rpx;
margin-left: 0;
max-width: 154rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto
}
.show-slider-container.h5-div .show-card-container .show-card-price .bui-tag-group.tph,
.show-slider-container.h5-div .show-card-container .show-card-price .tag-item {
font-weight: 600;
margin-left: 2rpx
}
.show-slider-container.h5-div .show-card-container .show-card-price .tag-gradient-bg {
align-items: center;
background-image: linear-gradient(270deg, #ff7070, #ff72a2);
display: flex;
font-size: 16rpx;
height: 24rpx;
padding: 2rpx 3rpx 0
}
.show-slider-container.h5-div .show-card-container .show-card-price .tag-with-bg {
align-items: center;
background: #fff3f3;
border: 1rpx solid #ff8e92;
color: #ff4886;
display: flex;
font-size: 16rpx;
height: 24rpx;
padding: 2rpx 3rpx 0
}
.show-slider-container.h5-div .show-card-container .show-card-price .wednesday-tag {
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 24rpx;
margin-left: 4rpx;
width: 74rpx
}
.show-slider-container.h5-div .show-card-container+.show-card-container {
margin-left: 12rpx
}
.square-card {
align-items: center;
border-radius: 12rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-bottom: 18rpx;
padding: 0 18rpx
}
.square-card .square-card-item {
border-radius: 12rpx;
box-sizing: border-box;
height: 108rpx;
padding: 21rpx 14rpx;
width: 230rpx
}
.square-card .square-card-item:last-child {
margin-right: 0
}
.square-card .square-card-item .square-card-item-title {
color: #333;
font-size: 26rpx;
font-weight: 700;
height: 31rpx;
line-height: 31rpx;
margin-bottom: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%
}
.square-card .square-card-item .square-card-item-subtitle {
color: #9c9ca5;
font-size: 20rpx;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 130rpx
}
.filter-popup-sort {
background-color: #fff;
border-radius: 0 0 24rpx 24rpx;
padding: 10rpx 18rpx 18rpx
}
.filter-popup-sort .filter-popup-sort-item {
align-items: center;
color: #333;
display: flex;
font-size: 28rpx;
height: 92rpx
}
.filter-popup-sort .filter-popup-sort-item.selected {
color: #ff4886
}
.filter-popup-category {
background-color: #fff;
background-image: linear-gradient(0deg, #f5f5f5, #fff 50rpx, #fff 0, #fff);
display: flex;
flex-wrap: wrap
}
.filter-popup-category .cate-popup-item {
align-items: center;
box-sizing: border-box;
color: #333;
display: flex;
font-size: 28rpx;
height: 102rpx;
justify-content: space-between;
padding-left: 18rpx;
padding-right: 30rpx;
width: 50%
}
.filter-popup-category .cate-popup-item.selected {
color: #ff4886
}
.filter-popup-category .cate-popup-item .bui-svg-icon.tph {
font-size: 42rpx
}
.filter-popup-category .no-selected {
border: 2rpx solid #c8c8c8;
border-radius: 100%;
height: 32rpx;
margin-right: 2rpx;
width: 32rpx
}
.across-slider {
align-items: center;
background-color: #fff;
display: flex;
height: 78rpx
}
.across-slider .across-slider-item {
align-items: center;
background: #f5f5f5;
border-radius: 32rpx;
color: #999;
display: flex;
font-size: 24rpx;
font-weight: 500;
height: 56rpx;
justify-content: center;
margin-left: 16rpx;
padding-left: 24rpx;
padding-right: 24rpx;
white-space: nowrap
}
.across-slider .across-slider-item.selected {
background: #ffebf2;
color: #ff4886
}
.filter-popup-calendar .bui-calendar.tph {
background-image: linear-gradient(0deg, #f5f5f5, #fff 50rpx, #fff 0, #fff);
border-radius: 0
}
.filter-popup-calendar .cate-popup-item {
align-items: center;
box-sizing: border-box;
color: #333;
display: flex;
font-size: 28rpx;
font-weight: 400;
height: 102rpx;
justify-content: space-between;
padding-left: 18rpx;
padding-right: 30rpx;
width: 50%
}
.filter-popup-filter {
background-color: #fff;
background-image: linear-gradient(0deg, #f5f5f5, #fff 50rpx, #fff 0, #fff)
}
.filter-popup-filter .filter-popup-filter-item {
display: flex;
flex-direction: column;
height: 169rpx;
justify-content: center
}
.filter-popup-filter .filter-popup-filter-item .across-slider {
background-color: initial
}
.filter-popup-filter .title {
color: #333;
font-size: 26rpx;
font-weight: 500;
margin-bottom: 15rpx;
padding-left: 18rpx
}
.filter-popup-filter .across-slider .across-slider-item {
margin-left: 18rpx
}
.filter-popup {
display: flex;
flex-direction: column;
left: 0;
position: fixed;
width: 100%;
z-index: 1
}
.filter-popup .filter-popup-handle {
background-color: #fff;
border-bottom-left-radius: 24rpx;
border-bottom-right-radius: 24rpx;
display: flex;
flex-direction: column;
height: 132rpx;
overflow: hidden;
position: relative
}
.filter-popup .filter-popup-handle .filter-popup-handle-wrap {
display: flex;
height: 132rpx;
justify-content: space-between;
padding: 24rpx 18rpx
}
.filter-popup .filter-popup-handle .filter-popup-handle-wrap .filter-popup-handle-btn {
align-items: center;
background-color: #fff;
border-radius: 42rpx;
display: flex;
font-size: 30rpx;
font-weight: 500;
height: 84rpx;
justify-content: center
}
.filter-popup .filter-popup-handle .filter-popup-handle-wrap .filter-popup-handle-btn.reset {
border: 2rpx solid #b2b2b2;
width: 228rpx
}
.filter-popup .filter-popup-handle .filter-popup-handle-wrap .filter-popup-handle-btn.confirm {
background-image: linear-gradient(90deg, #ff86e0, #ff4886);
color: #fff;
width: 450rpx
}
.filter-header-left {
display: flex;
height: 100%
}
.filter-header-left .filter-header-item {
align-items: center;
display: flex;
padding-right: 42rpx
}
.filter-header-left .filter-header-item.selected {
color: #ff2869
}
.filter-header-right {
align-items: center;
color: #000;
display: flex;
font-size: 26rpx;
font-weight: 500;
height: 100%;
justify-content: flex-end;
width: 116rpx
}
.filter-header-right.selected {
color: #ff2869
}
.filter-header-item-icon {
align-items: center;
display: flex;
padding-top: 8rpx
}
.filter-header-item-icon .caretup-filled {
font-size: 32rpx
}
.filter-header-item-icon .caretup-filled.up {
transform: rotate(-90deg)
}
.filter-header-item-icon .caretup-filled.down {
transform: rotate(90deg)
}
.filter-title {
align-items: center;
background-image: linear-gradient(0deg, #fff, #f4f5f6);
color: #000;
display: flex;
font-size: 32rpx;
font-weight: 500;
height: 68rpx;
padding-left: 18rpx
}
.filter-mask {
background-color: rgba(0, 0, 0, .41);
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: -1
}
#filter-placeholader {
height: 0rpx;
width: 100%
}
.filter-wrap {
background-color: #fff;
position: sticky;
top: 0;
z-index: 999
}
.filter-wrap .filter-header {
color: #000;
display: flex;
font-size: 26rpx;
font-weight: 500;
height: 78rpx;
justify-content: space-between;
padding-left: 18rpx;
padding-right: 18rpx;
z-index: 1
}
.bui-multiline-ballarea.tph {
align-items: center;
background-color: var(--bui-html-background-color, var(--bui-color-bg-view));
border-radius: var(--bui-shape-radius-default);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--bui-spacing-lg)
}
.bui-multiline-ballarea-multi-line.tph {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 18rpx;
padding-bottom: 6rpx;
width: 100%
}
.bui-multiline-ballarea-multi-line:last-child.tph {
margin-bottom: 0
}
.vajra-position-container {
background-image: linear-gradient(180deg, #fef5f7, #f4f5f6 20%);
padding-bottom: 18rpx
}
.vajra-position-container .vajra-position {
background-image: linear-gradient(180deg, #fef5f7, #fff 20%);
margin: 0 18rpx !important;
padding: 30rpx 7rpx !important
}
.vajra-position-container .vajra-position.bui-ball-area.tph {
padding: 12rpx 0
}
.vajra-position-container .vajra-position .bui-ball-area-item-flag.tph {
border-radius: 9rpx 10rpx 10rpx 3rpx
}
.vajra-position-container .vajra-position .bui-ball-area-item.bui-ball-area-item-vertical .ball-area-item-circle.tph {
margin-bottom: 3rpx
}
.vajra-position-container .vajra-position .bui-ball-area-item.bui-ball-area-item-vertical .ball-area-item-text.tph {
color: #333;
line-height: 34rpx
}
.vajra-position-container .vajra-position .bui-ball-area-item.bui-ball-area-item-vertical .ball-area-item-img.tph {
border-radius: 0
}
.vajra-position-container .vajra-position .bui-image-img.tph {
border-radius: 0 !important
}
.want-guide-popup {
bottom: 12rpx;
left: 80rpx;
position: fixed;
transform: translateY(100rpx) scale3d(0, 0, 0);
width: 402rpx;
z-index: 1000
}
.want-guide-popup .content {
align-items: center;
background: linear-gradient(90deg, #f4e1ff, #fff2f5);
border: 1rpx solid hsla(0, 100%, 87%, .5);
border-radius: 16rpx;
display: flex;
max-height: 146rpx;
padding: 12rpx;
position: relative
}
.want-guide-popup.guide-show {
animation: easeShow 7s ease-in 1
}
.want-guide-popup.guide-hide {
display: none
}
.want-guide-popup .poster,
.want-guide-popup .poster-wrap {
height: 110rpx;
width: 82rpx
}
.want-guide-popup .poster {
border: 0 solid rgba(0, 0, 0, .1);
border-radius: 6rpx
}
.want-guide-popup .poster-wrap {
background: #f5f5f5;
border-radius: 6rpx;
margin: 0 12rpx 0 0
}
.want-guide-popup .tips {
color: #2e333e;
font-size: 28rpx;
font-weight: 500;
max-height: 82rpx;
overflow: hidden
}
.want-guide-popup .arrow {
border-left: 15rpx solid transparent;
border-right: 15rpx solid transparent;
border-top: 15rpx solid hsla(0, 100%, 87%, .5);
bottom: -14rpx;
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0
}
.want-guide-popup .arrow .arrow-border {
border-left: 14rpx solid transparent;
border-right: 14rpx solid transparent;
border-top: 14rpx solid #fae9fa;
display: block;
height: 0;
left: -14rpx;
position: absolute;
top: -16rpx;
width: 0
}
@keyframes easeShow {
0% {
opacity: 0;
transform: translateY(100%)
}
7% {
opacity: .4;
transform: translateY(0)
}
14% {
opacity: 1
}
10%,
30%,
50%,
70%,
90% {
animation-timing-function: cubic-bezier(.31, 0, .24, 1);
transform: translateY(10rpx)
}
20%,
40%,
60%,
80% {
animation-timing-function: cubic-bezier(.71, 0, .6, 1);
transform: translateY(-10rpx)
}
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90% {
opacity: 1
}
100% {
opacity: 0;
transform: translateY(0)
}
}
.newcomer-ticket {
max-height: 75vh;
position: relative
}
.newcomer-ticket .top-img {
display: block;
margin-bottom: -2rpx
}
.newcomer-ticket .newcomer-ticket-close-icon {
height: 46rpx;
position: absolute;
right: 30rpx;
top: 280rpx;
width: 46rpx
}
.newcomer-ticket .ticket-list {
padding-bottom: 170rpx
}
.newcomer-ticket .ticket-list .ticket-item {
align-items: center;
display: flex;
font-size: 32rpx;
justify-content: flex-start;
line-height: 32rpx;
margin: 24rpx;
padding: 48rpx 24rpx;
position: relative
}
.newcomer-ticket .ticket-list .ticket-item .price {
color: #ff4886;
font-size: 68rpx;
font-weight: 600;
line-height: 80rpx;
margin-right: 14rpx;
text-align: center;
width: 180rpx
}
.newcomer-ticket .ticket-list .ticket-item .price .symbol {
font-size: 50rpx;
margin-right: 4rpx
}
.newcomer-ticket .ticket-list .ticket-item .ticket-title {
line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all
}
.newcomer-ticket .ticket-list .ticket-item .ticket-tag {
font-size: 20rpx;
margin-bottom: 6rpx;
margin-right: 12rpx;
vertical-align: middle
}
.newcomer-ticket .ticket-list .ticket-item .ticket-type {
line-clamp: 2;
-webkit-box-orient: vertical;
color: #9c9ca5;
display: -webkit-box;
font-size: 24rpx;
margin-top: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all
}
.newcomer-ticket .ticket-list .ticket-item .ticket-icon {
bottom: 0rpx;
height: 130rpx;
position: absolute;
right: 0rpx;
width: 130rpx
}
.newcomer-ticket .ticket-detail-list {
padding-bottom: 120rpx
}
.newcomer-ticket .ticket-detail-list-item {
border-radius: var(--bui-shape-radius-card);
margin: 24rpx
}
.newcomer-ticket .ticket-detail-list-item .item-top {
align-items: center;
background-color: #fff;
border-radius: 18rpx 18rpx 0rpx 0rpx;
display: flex;
padding: 24rpx
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-price {
color: #ff4886;
font-size: 68rpx;
font-weight: 600;
margin-right: 14rpx;
text-align: center;
width: 180rpx
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-price .symbol {
font-size: 50rpx;
margin-right: 4rpx
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-content {
color: #2e333e;
flex: 1;
font-size: 32rpx
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-content-title {
line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-content .detail-tag {
margin-bottom: 4rpx;
margin-right: 12rpx;
vertical-align: middle
}
.newcomer-ticket .ticket-detail-list-item .item-top .detail-content .detail-type {
line-clamp: 2;
-webkit-box-orient: vertical;
color: #9c9ca5;
display: -webkit-box;
font-size: 24rpx;
margin-top: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all
}
.newcomer-ticket .ticket-detail-list-item .item-top .newcomer-ticket-detail-btn {
width: 102rpx
}
.newcomer-ticket .ticket-detail-list-item .item-line {
display: block
}
.newcomer-ticket .ticket-detail-list-item .item-bottom {
background-color: #fff;
border-radius: 0rpx 0rpx 18rpx 18rpx;
margin-top: -2rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .item-bottom-no-scroll {
column-gap: 18rpx;
display: flex;
margin-top: -2rpx;
padding: 24rpx 30rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .item-bottom-no-scroll .item-detail-item {
display: grid;
flex: 1;
height: 160rpx;
position: relative
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .item-bottom-scroll {
padding: 24rpx 0rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .item-bottom-scroll .item-scroll {
height: 160rpx;
position: relative;
width: 190rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .item-bottom-scroll .item-scroll:last-child {
margin-right: 0rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .ticket-item-content {
align-items: baseline;
color: #ff4886;
display: flex;
justify-content: center;
margin-top: 12rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .ticket-item-content-symbol {
font-size: 30rpx;
font-weight: 600;
margin-right: 4rpx
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .ticket-item-content-price-num {
font-size: 66rpx;
font-weight: 700
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .ticket-item-detail {
color: #ff4886;
font-size: 22rpx;
margin: 0rpx auto;
opacity: .5;
overflow: hidden;
padding: 14rpx 0rpx;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%
}
.newcomer-ticket .ticket-detail-list-item .item-bottom .ticket-item-status {
position: absolute;
right: 0rpx;
top: 0rpx
}
.newcomer-ticket .bottom-box {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01NfBn2T20B2ARrNqUt_!!6000000006810-2-tps-1125-323.png);
background-position: bottom;
background-size: 100%auto;
bottom: -2rpx;
box-sizing: border-box;
height: 215rpx;
position: absolute;
width: 100%
}
.newcomer-ticket .bottom-box .vouchers-popup-bottom-btn {
animation: newcomer-ticket-bottom-btn 1s ease-out infinite;
background: url(https://gw.alicdn.com/imgextra/i4/O1CN01FeOuSg1gUSeNkq4Ek_!!6000000004145-2-tps-750-135.png)100%/100%no-repeat;
border: 6rpx solid hsla(0, 0%, 100%, .26);
height: 90rpx;
margin: 86rpx auto 0rpx;
transform-origin: center;
width: 500rpx
}
@keyframes newcomer-ticket-bottom-btn {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
.newcomer-ticket-tips {
background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01eeyfGn1TPncBoKnHR_!!6000000002375-2-tps-1125-135.png);
background-position: top;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 90rpx;
position: relative;
width: 100%
}
.newcomer-ticket-tips-content {
padding-left: 150rpx !important
}
.newcomer-ticket-tips-content-top {
align-items: baseline;
color: #ff4886;
display: flex;
justify-content: flex-start;
margin-top: 20rpx !important
}
.newcomer-ticket-tips-content-top-symol {
font-size: 20rpx;
font-weight: 500;
line-height: 20rpx;
margin-right: 4rpx
}
.newcomer-ticket-tips-content-top-num {
font-size: 34rpx;
font-weight: 600;
line-height: 34rpx;
margin-right: 4rpx
}
.newcomer-ticket-tips-content-top-countdown,
.newcomer-ticket-tips-content-top-text {
font-size: 18rpx;
font-weight: 500;
line-height: 18rpx;
margin-right: 6rpx
}
.newcomer-ticket-tips-content-top-countdown {
color: #2e333e
}
.newcomer-ticket-tips-content-bottom {
color: #9c9ca5;
font-size: 18rpx;
font-weight: 500;
margin-top: 12rpx
}
.newcomer-ticket-tips .tip-red-icon {
animation: newcomer-ticket-tips-icon 2s ease-out infinite;
left: 26rpx;
position: absolute;
top: -26rpx
}
.newcomer-ticket-tips .tip-red-open-icon {
animation: newcomer-ticket-tips-arrow 1.5s ease-out infinite;
left: 50%;
position: absolute;
top: 6rpx;
transform: translateX(-50%)
}
@keyframes newcomer-ticket-tips-icon {
0% {
transform: translateY(5%)
}
50% {
transform: translateY(-5%)
}
100% {
transform: translateY(5%)
}
}
@keyframes newcomer-ticket-tips-arrow {
0% {
transform: translateY(-2rpx)
}
50% {
transform: translateY(4rpx)
}
100% {
transform: translateY(-2rpx)
}
}
.vouchers-popup-drawer .bui-drawer-content.tph {
background-color: initial
}
.project-recommend-container {
width: 100vw
}
.project-recommend-container .header-wrapper {
margin-bottom: -2rpx;
position: relative
}
.project-recommend-container .header-wrapper .header-img {
display: block;
height: 360rpx
}
.project-recommend-container .header-wrapper .close-btn {
height: 46rpx;
position: absolute;
right: 30rpx;
top: 280rpx;
width: 46rpx
}
.project-recommend-container .project-list-out-wrapper {
margin-bottom: -2rpx;
max-height: calc(85vh - 215rpx - 360rpx)
}
.project-recommend-container .project-list-out-wrapper .project-list-wrapper {
box-sizing: border-box;
height: 100%;
max-height: calc(85vh - 215rpx - 360rpx);
padding: 12rpx 24rpx 0;
scroll-behavior: smooth
}
.project-recommend-container .project-list-out-wrapper .project-list-wrapper :last-child {
margin-bottom: 0
}
.project-recommend-container .project-recommend-bottom-wrapper {
align-items: center;
background: url(//gw.alicdn.com/imgextra/i4/O1CN01NfBn2T20B2ARrNqUt_!!6000000006810-2-tps-1125-323.png)100%/100%no-repeat;
box-sizing: border-box;
display: flex;
height: 215rpx;
justify-content: center;
position: relative;
width: 100vw;
z-index: 10
}
.project-recommend-container .project-recommend-bottom-wrapper .project-more-btn {
animation: bottom-btn-heartbeat 1s ease-out infinite;
background: url(//gw.alicdn.com/imgextra/i1/O1CN016wxQtd1UfCYBvMOwk_!!6000000002544-2-tps-750-135.png)100%/100%no-repeat;
height: 90rpx;
position: absolute;
top: 85rpx;
width: 500rpx
}
.bui-progress.tph {
--fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
--trail-color: var(--bui-progress-trail-color, hsla(240, 5%, 63%, .2));
--stroke-width: var(--bui-progress-stroke-width, 16rpx);
--width: var(--bui-progress-width, 100%);
--border-radius: var(--bui-progress-border-radius, 200rpx);
font-family: var(--bui-font-family);
width: var(--width)
}
.bui-progress-inner.tph {
background-color: var(--trail-color);
display: inline-block;
overflow: hidden;
vertical-align: middle;
width: var(--width)
}
.bui-progress-bg.tph,
.bui-progress-inner.tph {
border-radius: var(--border-radius);
position: relative
}
.bui-progress-bg.tph {
background-color: var(--fill-color);
height: var(--stroke-width)
}
@keyframes bottom-btn-heartbeat {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
.show-news-container {
width: 100vw
}
.show-news-container .header-wrapper {
margin-bottom: -2rpx;
position: relative
}
.show-news-container .header-wrapper .header-img {
display: block;
height: 360rpx
}
.show-news-container .header-wrapper .close-btn {
height: 46rpx;
position: absolute;
right: 30rpx;
top: 280rpx;
width: 46rpx
}
.show-news-container .show-news-list-out-wrapper {
margin-bottom: -2rpx;
max-height: calc(90vh - 215rpx - 360rpx - 24rpx)
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper {
box-sizing: border-box;
height: 100%;
max-height: calc(90vh - 215rpx - 360rpx - 24rpx);
padding: 12rpx 24rpx 24rpx;
scroll-behavior: smooth
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper {
align-items: center;
background-color: #fff;
box-sizing: border-box;
display: flex;
flex-direction: row;
height: 92rpx;
margin-top: 18rpx;
padding: 6rpx 24rpx 6rpx 6rpx
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .artist-avatar {
border-radius: 8rpx;
height: 80rpx;
width: 80rpx
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .desc-wrapper {
margin-left: 18rpx;
width: calc(100% - 80rpx - 100rpx - 18rpx - 24rpx)
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .progress-wrapper {
margin-top: 6rpx;
position: relative
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .progress-wrapper .bui-progress-inner.tph.tph {
display: block
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .want-text {
color: #ff5d28;
font-size: 20rpx;
font-weight: 500;
left: 0;
line-height: 24rpx;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .title {
color: #471c0e;
font-size: 28rpx;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .want-see-btn {
font-size: 24rpx;
height: 48rpx;
line-height: 48rpx;
margin-left: 24rpx;
text-align: center;
width: 100rpx
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .wanted {
background: #fff;
border: 2rpx solid rgba(255, 175, 28, .5);
color: #ffaf1c
}
.show-news-container .show-news-list-out-wrapper .show-news-list-wrapper .show-item-wrapper .not-want {
background: linear-gradient(90deg, #ffc600 1%, #ffaf1c);
border: none;
color: #fff
}
.show-news-container .show-news-bottom-wrapper {
align-items: center;
background: url(//gw.alicdn.com/imgextra/i4/O1CN01NfBn2T20B2ARrNqUt_!!6000000006810-2-tps-1125-323.png)100%/100%no-repeat;
box-sizing: border-box;
display: flex;
height: 215rpx;
justify-content: center;
position: relative;
width: 100vw;
z-index: 10
}
.show-news-container .show-news-bottom-wrapper .more-btn {
animation: bottom-btn-heartbeat 1s ease-out infinite;
background: url(//gw.alicdn.com/imgextra/i2/O1CN01VhtfNz1oBhLw8WeNj_!!6000000005187-2-tps-750-135.png)100%/100%no-repeat;
height: 90rpx;
position: absolute;
top: 85rpx;
width: 500rpx
}
.show-news-container .show-news-bottom-wrapper .more-item-wrapper {
background-image: linear-gradient(270deg, #ffe2d2, #ffefe9);
border-radius: 12rpx;
display: inline-flex;
height: 48rpx;
left: 50%;
overflow: visible;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 524rpx
}
.show-news-container .show-news-bottom-wrapper .more-item-wrapper::after {
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-top: 20rpx solid #ffe9de;
bottom: -18rpx;
content: "";
height: 0;
left: calc(50% - 20rpx);
position: absolute;
transform: translateX(-50%);
width: 0
}
.show-news-container .show-news-bottom-wrapper .more-item-wrapper .header-img {
border-radius: 8rpx;
height: 40rpx;
margin-left: 4rpx;
margin-top: 4rpx;
width: 40rpx
}
.show-news-container .show-news-bottom-wrapper .more-item-wrapper .title {
color: #471c0e;
font-size: 24rpx;
font-weight: 600;
line-height: 48rpx;
margin-left: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 40rpx - 12rpx)
}
.popup-drawer .bui-drawer-content.tph {
background-color: initial
}
.project-qr-container {
display: flex;
flex-direction: column;
max-height: 75vh;
position: relative
}
.project-qr-container .header-img {
display: block
}
.project-qr-container .close-btn {
height: 46rpx;
position: absolute;
right: 30rpx;
top: 280rpx;
width: 46rpx
}
.project-qr-container .qrcode-pic {
bottom: 100rpx;
height: 400rpx;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 400rpx;
z-index: 10
}
.float-window-container {
bottom: 80rpx;
opacity: 1;
position: fixed;
right: 0;
transition: right .1s linear, opacity .1s linear;
z-index: 1000
}
.float-window-container.float-window-collapse {
opacity: .2;
right: -120rpx
}
.float-window-container .float-window-image {
height: 120rpx;
width: 150rpx
}
.poster {
border: 0.5rpx solid #f0f0f0;
position: relative
}
.poster,
.poster .fs-pic {
height: 132rpx;
width: 98rpx
}
.poster .fs-pic {
background-color: #ddd;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 6rpx;
overflow: hidden
}
.poster .category-tag {
background-color: rgba(0, 0, 0, .8);
border-radius: 4rpx;
font-size: 18rpx;
font-weight: 400;
max-width: 78rpx;
overflow: hidden;
padding: 6rpx;
right: 4rpx;
text-overflow: ellipsis;
top: 4rpx
}
.poster .category-tag,
.poster .marketing-tag {
color: #fff;
line-height: 1;
position: absolute;
white-space: nowrap;
z-index: 100
}
.poster .marketing-tag {
align-items: center;
background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
border-radius: 0 0 6rpx 6rpx;
bottom: 0;
box-sizing: border-box;
display: flex;
flex-direction: row;
font-family: PingFang SC, sans-serif;
font-size: 20rpx;
left: 0;
padding: 40rpx 10rpx 10rpx;
width: 98rpx
}
.poster .marketing-tag .marketing-tag-num {
font-size: 24rpx;
font-weight: 400;
margin-bottom: -3rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.poster .marketing-tag .zaoniao-icon {
height: 21rpx;
width: 64.4rpx
}
.broadcast-card {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center
}
.broadcast-card .left {
align-items: flex-start;
display: flex;
height: 132rpx;
justify-content: center;
width: 98rpx
}
.broadcast-card .left .pic-border {
align-items: center;
border: 4rpx solid #ffbc41;
border-radius: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 2rpx;
position: relative
}
.broadcast-card .left .pic-border .fs-artist-pic {
background-color: #ddd;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 100%;
height: 80rpx;
width: 80rpx
}
.broadcast-card .left .pic-border .artist-name {
background-image: linear-gradient(180deg, #ffcf5c, #ffbc41);
border: 2rpx solid #fff;
border-radius: 30rpx;
bottom: -14rpx;
box-sizing: border-box;
color: #2e333e;
font-size: 18rpx;
font-weight: 500;
height: 30rpx;
max-width: 120rpx;
overflow: hidden;
padding: 0 10rpx;
position: absolute;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: auto
}
.broadcast-card .right {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
height: 132rpx;
justify-content: space-between;
margin-left: 14rpx
}
.broadcast-card .right .card-title {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #2e333e;
display: -webkit-box;
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
overflow: hidden;
text-align: left;
text-overflow: ellipsis
}
.broadcast-card .right .want-see {
align-self: flex-start;
color: #2e333e;
display: flex;
font-family: PingFang SC, sans-serif;
font-size: 18rpx;
font-weight: 400;
line-height: 18rpx;
margin-top: 4rpx
}
.broadcast-card .right .want-see .want-see-num {
color: #ff4886;
font-weight: 500;
line-height: 20rpx
}
.broadcast-card .right .price-info {
align-items: flex-end;
display: flex;
flex-direction: row;
height: 40rpx;
max-width: 208rpx
}
.broadcast-card .right .price-info .symbol {
align-items: flex-end;
color: #ff4886;
display: flex;
font-family: PingFangSC-Medium, sans-serif;
font-size: 18rpx;
font-weight: 500;
line-height: 18rpx;
padding-bottom: 3rpx
}
.broadcast-card .right .price-info .num {
align-items: flex-end;
color: #ff4886;
display: flex;
flex-direction: row;
font-size: 26rpx;
font-weight: 500;
line-height: 26rpx
}
.broadcast-card .right .price-info .desc {
color: #ff4886;
flex: 1;
font-family: PingFangSC-Medium, sans-serif;
font-size: 20rpx;
font-weight: 500;
line-height: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto
}
.broadcast-card .right .price-info .qi {
align-items: flex-end;
color: #999;
display: flex;
font-size: 18rpx;
line-height: 18rpx;
margin-left: 2rpx;
padding-bottom: 3rpx
}
.broadcast-card .right .price-info .tag {
align-items: center;
background-image: linear-gradient(270deg, #ff7070, #ff72a2);
border-radius: 6rpx;
color: #fff;
display: flex;
font-family: PingFang SC, sans-serif;
font-size: 16rpx;
font-weight: 600;
height: 24rpx;
margin-left: 2rpx;
padding: 0 5rpx
}
.broadcast-card .right .hot-buy {
align-items: center;
align-self: flex-end;
background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01QUIBEg1m1xZ9deJL0_!!6000000004895-2-tps-86-48.png), linear-gradient(135deg, #ffaa7d, #ff4a6f 41%, #ff4e85);
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
border-radius: 16rpx 8rpx 8rpx 2rpx;
box-sizing: border-box;
color: #fff;
display: flex;
font-size: 18rpx;
height: 32rpx;
line-height: 1;
padding: 0 60rpx 0 8rpx
}
.broadcast-container {
border-radius: 12rpx;
display: flex;
justify-content: space-between;
margin: 0 18rpx 18rpx !important
}
.broadcast-wrapper {
display: inline-block
}
.broadcast-wrapper .card {
background-position: -75.5rpx 0, 50%;
background-repeat: no-repeat, no-repeat;
background-size: 284rpx, cover;
border: 0.5rpx solid #f0f0f0;
border-radius: 12rpx;
box-sizing: border-box;
height: 230rpx;
width: 350rpx
}
.broadcast-wrapper .card .card-header {
box-sizing: border-box;
color: #2e333e;
font-family: PingFang SC, sans-serif;
font-size: 28rpx;
font-weight: 400;
height: 76rpx;
line-height: 28rpx;
padding: 24rpx 18rpx
}
.broadcast-wrapper .card .card-header .bui-card-header-title.tph {
flex: 1;
height: 40rpx
}
.broadcast-wrapper .card .card-header .title-bg {
background-position: 18rpx;
background-position-x: 0;
background-repeat: no-repeat;
background-size: auto 28rpx;
box-sizing: border-box;
height: 100%
}
.broadcast-wrapper .card .card-header .subtitle-wrapper {
position: relative
}
.broadcast-wrapper .card .card-header .subtitle-wrapper .subtitle-arrow {
position: absolute;
right: 2rpx;
top: 4rpx
}
.broadcast-wrapper .card .card-header .subtitle-swiper {
height: 32rpx;
text-align: right;
width: 200rpx
}
.broadcast-wrapper .card .card-header .extra-btn {
background-color: #fff;
border: none;
border-radius: 200rpx;
color: #2e333e;
display: flex;
font-family: PingFang SC, sans-serif;
font-size: 20rpx;
font-weight: 400;
height: 32rpx;
line-height: 32rpx;
max-width: 152rpx;
overflow: hidden;
padding: 0 8rpx
}
.broadcast-wrapper .card .card-header .extra-btn .title {
flex: 1;
height: 32rpx;
line-height: 32rpx;
overflow: auto;
text-align: center
}
.broadcast-wrapper .card .card-header .short-size {
width: 132rpx
}
.broadcast-wrapper .card .card-header .pdr {
padding-right: 20rpx
}
.broadcast-wrapper .card .broadcast-swiper {
height: 156rpx
}
.broadcast-wrapper .card .card-content {
padding: 0 18rpx 24rpx
}
.broadcast-wrapper .card .card-content .poster-list {
display: flex;
flex-direction: row;
gap: 10rpx
}
.broadcast-wrapper .artist-cnt {
background-position: -76.5rpx -21rpx, 50%
}
@media (prefers-color-scheme:light) {
[data-color-mode="auto"][data-theme="dm"] {
--bui-color-blue: #48b1f1;
--bui-color-orange: #ff8f3f;
--bui-color-gray: #f5f5f5;
--bui-color-pink: #ff8e92;
--bui-color-neutral-2: #4d4d56;
--bui-color-neutral-3: #9c9ca5;
--bui-color-neutral-5: #f1f1f1;
--bui-color-bg-default: #f4f5f6;
--bui-color-powder-start: #ff72a2;
--bui-color-powder-end: #ff7070;
--bui-title-size-2: 40rpx;
--bui-title-size-3: 36rpx;
--bui-color-red: #ff4886;
--bui-color-fg-default: #2e333e;
--bui-color-fg-muted: #2e333e;
--bui-shape-radius-label: 8rpx
}
}
@media (prefers-color-scheme:dark) {
[data-color-mode="auto"][data-theme="dm"] {
--bui-color-neutral-5: #e5e5e5;
--bui-color-powder-start: #ff4886;
--bui-color-powder-end: #ffa662;
--bui-color-fg-default: #f0f6fc;
--bui-color-fg-muted: #8b949e;
--bui-color-fg-subtle: #484f58;
--bui-color-fg-disabled: #484f58;
--bui-color-bg-default: #010409;
--bui-color-bg-view: #161b22;
--bui-color-bg-popover: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-light-9: rgba(22, 27, 34, .9);
--bui-color-bg-alpha-light-7: rgba(22, 27, 34, .7);
--bui-color-bg-alpha-light-5: rgba(22, 27, 34, .5);
--bui-color-bg-alpha-light-3: rgba(22, 27, 34, .3);
--bui-color-bg-alpha-light-1: rgba(22, 27, 34, .1);
--bui-color-bg-alpha-dark-9: rgba(72, 79, 88, .9);
--bui-color-bg-alpha-dark-7: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-dark-5: rgba(72, 79, 88, .5);
--bui-color-bg-alpha-dark-3: rgba(72, 79, 88, .3);
--bui-color-bg-alpha-dark-1: rgba(72, 79, 88, .1);
--bui-color-border-default: #30363d
}
}
.bui-default-light.tph,
[data-color-mode="light"][data-theme="default"],
page,
xhs-page {
--bui-color-fg-vip-title: #582331;
--bui-color-fg-vip-subtitle: #874953;
--bui-color-fg-vip-info: #a67070;
--bui-color-fg-vip-disabled: #daaaa0;
--bui-color-bg-rank: #fef4da;
--bui-color-rank: #d7932c;
--bui-color-border-vip: hsla(16, 72%, 71%, .4);
--bui-color-border-rank: rgba(215, 147, 44, .4);
--bui-color-mystery-start: #f273ff;
--bui-color-mystery-end: #ca64ff;
--bui-color-vip-light-start: #ffecc7;
--bui-color-vip-light-end: #ffdbcf;
--bui-color-vip-dark-start: #f5ac6b;
--bui-color-vip-dark-end: #f7846d;
--bui-color-vip-diamond-start: #202a4d;
--bui-color-vip-diamond-end: #2b3858;
--bui-color-red: #ff335c;
--bui-color-red-light: #ffebef;
--bui-color-pink: #dd10f2;
--bui-color-pink-light: #fce7fe;
--bui-color-orange: #ff8533;
--bui-color-orange-light: #fff0e5;
--bui-color-green: #00d68f;
--bui-color-green-light: #dcf9f0;
--bui-color-purple: #8b52ff;
--bui-color-purple-light: #f2ebff;
--bui-color-blue: #148aff;
--bui-color-blue-light: #e1f0ff;
--bui-color-gray: #8896b1;
--bui-color-gray-light: #f3f5f8;
--bui-color-black: #000;
--bui-color-white: #fff;
--bui-color-vip: #ff866e;
--bui-color-neutral-0: var(--bui-color-black);
--bui-color-neutral-1: #2e333e;
--bui-color-neutral-2: #5f6672;
--bui-color-neutral-3: #959aa5;
--bui-color-neutral-4: #ced1d6;
--bui-color-neutral-5: #e9ebef;
--bui-color-neutral-6: #f5f6f8;
--bui-color-neutral-7: var(--bui-color-white);
--bui-font-weight-normal: 400;
--bui-font-weight-medium: 500;
--bui-font-weight-bold: 600;
--bui-color-primary: var(--bui-color-red);
--bui-color-primary-light: var(--bui-color-red-light);
--bui-color-info: var(--bui-color-blue);
--bui-color-info-light: var(--bui-color-blue-light);
--bui-color-success: var(--bui-color-green);
--bui-color-success-light: var(--bui-color-green-light);
--bui-color-warning: var(--bui-color-orange);
--bui-color-warning-light: var(--bui-color-orange-light);
--bui-color-danger: var(--bui-color-red);
--bui-color-danger-light: var(--bui-color-red-light);
--bui-title-size-1: 42rpx;
--bui-title-size-2: 36rpx;
--bui-title-size-3: 32rpx;
--bui-title-size-4: 30rpx;
--bui-text-size-1: 28rpx;
--bui-text-size-2: 26rpx;
--bui-text-size-3: 24rpx;
--bui-text-size-4: 22rpx;
--bui-text-size-5: 20rpx;
--bui-color-fg-default: var(--bui-color-neutral-1);
--bui-color-fg-muted: var(--bui-color-neutral-2);
--bui-color-fg-subtle: var(--bui-color-neutral-3);
--bui-color-fg-disabled: var(--bui-color-neutral-4);
--bui-color-bg-default: var(--bui-color-neutral-6);
--bui-color-bg-view: var(--bui-color-neutral-7);
--bui-color-bg-popover: var(--bui-color-neutral-7);
--bui-color-bg-alpha-light-9: hsla(0, 0%, 100%, .9);
--bui-color-bg-alpha-light-7: hsla(0, 0%, 100%, .7);
--bui-color-bg-alpha-light-5: hsla(0, 0%, 100%, .5);
--bui-color-bg-alpha-light-3: hsla(0, 0%, 100%, .3);
--bui-color-bg-alpha-light-1: hsla(0, 0%, 100%, .1);
--bui-color-bg-alpha-dark-9: rgba(0, 0, 0, .9);
--bui-color-bg-alpha-dark-7: rgba(0, 0, 0, .7);
--bui-color-bg-alpha-dark-5: rgba(0, 0, 0, .5);
--bui-color-bg-alpha-dark-3: rgba(0, 0, 0, .3);
--bui-color-bg-alpha-dark-1: rgba(0, 0, 0, .1);
--bui-color-border-default: var(--bui-color-neutral-5);
--bui-color-border-primary: rgba(255, 51, 92, .4);
--bui-color-border-info: rgba(20, 138, 255, .4);
--bui-color-border-success: rgba(0, 214, 143, .4);
--bui-color-border-warning: rgba(255, 133, 51, .4);
--bui-color-border-danger: rgba(255, 51, 92, .4);
--bui-color-border-gray: rgba(136, 150, 177, .4);
--bui-color-primary-start: #ef16b9;
--bui-color-primary-end: var(--bui-color-red);
--bui-color-secondary-start: #f32adf;
--bui-color-secondary-end: var(--bui-color-pink);
--bui-color-info-start: #33a7ff;
--bui-color-info-end: var(--bui-color-blue);
--bui-color-warning-start: #ffad33;
--bui-color-warning-end: var(--bui-color-orange);
--bui-color-success-start: #00ebac;
--bui-color-success-end: var(--bui-color-green);
--bui-color-danger-start: #ef16b9;
--bui-color-danger-end: var(--bui-color-red);
--bui-color-vip-start: #ffd4a6;
--bui-color-vip-end: #ffbeae;
--bui-shape-radius-popover: 36rpx;
--bui-shape-radius-drawer: 24rpx;
--bui-shape-radius-card: 18rpx;
--bui-shape-radius-default: 12rpx;
--bui-shape-radius-poster: 8rpx;
--bui-shape-radius-label: 6rpx;
--bui-spacing-xl: 30rpx;
--bui-spacing-lg: 24rpx;
--bui-spacing-md: 18rpx;
--bui-spacing-sm: 12rpx;
--bui-spacing-xs: 8rpx;
--bui-line-height: 1.5;
--bui-z-index-dropdown: 1000;
--bui-z-index-affix: 1100;
--bui-z-index-modal-backdrop: 1200;
--bui-z-index-modal: 1200;
--bui-z-index-popover: 1300;
--bui-z-index-tooltip: 1400;
--bui-z-index-toast: 1500;
--bui-font-family: "PingFang SC", "Chinese Quote", "Segoe UI", roboto, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", helvetica, arial, sans-serif
}
.bui-dark.tph,
[data-color-mode="dark"][data-theme="default"] {
--bui-color-fg-default: #f0f6fc;
--bui-color-fg-muted: #8b949e;
--bui-color-fg-subtle: #484f58;
--bui-color-fg-disabled: #484f58;
--bui-color-bg-default: #010409;
--bui-color-bg-view: #161b22;
--bui-color-bg-popover: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-light-9: rgba(22, 27, 34, .9);
--bui-color-bg-alpha-light-7: rgba(22, 27, 34, .7);
--bui-color-bg-alpha-light-5: rgba(22, 27, 34, .5);
--bui-color-bg-alpha-light-3: rgba(22, 27, 34, .3);
--bui-color-bg-alpha-light-1: rgba(22, 27, 34, .1);
--bui-color-bg-alpha-dark-9: rgba(72, 79, 88, .9);
--bui-color-bg-alpha-dark-7: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-dark-5: rgba(72, 79, 88, .5);
--bui-color-bg-alpha-dark-3: rgba(72, 79, 88, .3);
--bui-color-bg-alpha-dark-1: rgba(72, 79, 88, .1);
--bui-color-border-default: #30363d
}
.bui-dm-light.tph,
[data-color-mode="light"][data-theme="dm"] {
--bui-color-blue: #48b1f1;
--bui-color-orange: #ff8f3f;
--bui-color-gray: #f5f5f5;
--bui-color-pink: #ff8e92;
--bui-color-neutral-2: #4d4d56;
--bui-color-neutral-3: #9c9ca5;
--bui-color-neutral-5: #f1f1f1;
--bui-color-bg-default: #f4f5f6;
--bui-color-powder-start: #ff72a2;
--bui-color-powder-end: #ff7070;
--bui-title-size-2: 40rpx;
--bui-title-size-3: 36rpx;
--bui-color-red: #ff4886;
--bui-color-fg-default: #2e333e;
--bui-color-fg-muted: #2e333e;
--bui-shape-radius-label: 8rpx
}
.bui-dm-dark.tph,
[data-color-mode="dark"][data-theme="dm"] {
--bui-color-neutral-5: #e5e5e5;
--bui-color-powder-start: #ff4886;
--bui-color-powder-end: #ffa662;
--bui-color-fg-default: #f0f6fc;
--bui-color-fg-muted: #8b949e;
--bui-color-fg-subtle: #484f58;
--bui-color-fg-disabled: #484f58;
--bui-color-bg-default: #010409;
--bui-color-bg-view: #161b22;
--bui-color-bg-popover: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-light-9: rgba(22, 27, 34, .9);
--bui-color-bg-alpha-light-7: rgba(22, 27, 34, .7);
--bui-color-bg-alpha-light-5: rgba(22, 27, 34, .5);
--bui-color-bg-alpha-light-3: rgba(22, 27, 34, .3);
--bui-color-bg-alpha-light-1: rgba(22, 27, 34, .1);
--bui-color-bg-alpha-dark-9: rgba(72, 79, 88, .9);
--bui-color-bg-alpha-dark-7: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-dark-5: rgba(72, 79, 88, .5);
--bui-color-bg-alpha-dark-3: rgba(72, 79, 88, .3);
--bui-color-bg-alpha-dark-1: rgba(72, 79, 88, .1);
--bui-color-border-default: #30363d
}
@media (prefers-color-scheme:light) {
[data-color-mode="auto"] {
--bui-color-fg-vip-title: #582331;
--bui-color-fg-vip-subtitle: #874953;
--bui-color-fg-vip-info: #a67070;
--bui-color-fg-vip-disabled: #daaaa0;
--bui-color-bg-rank: #fef4da;
--bui-color-rank: #d7932c;
--bui-color-border-vip: hsla(16, 72%, 71%, .4);
--bui-color-border-rank: rgba(215, 147, 44, .4);
--bui-color-mystery-start: #f273ff;
--bui-color-mystery-end: #ca64ff;
--bui-color-vip-light-start: #ffecc7;
--bui-color-vip-light-end: #ffdbcf;
--bui-color-vip-dark-start: #f5ac6b;
--bui-color-vip-dark-end: #f7846d;
--bui-color-vip-diamond-start: #202a4d;
--bui-color-vip-diamond-end: #2b3858;
--bui-color-red: #ff335c;
--bui-color-red-light: #ffebef;
--bui-color-pink: #dd10f2;
--bui-color-pink-light: #fce7fe;
--bui-color-orange: #ff8533;
--bui-color-orange-light: #fff0e5;
--bui-color-green: #00d68f;
--bui-color-green-light: #dcf9f0;
--bui-color-purple: #8b52ff;
--bui-color-purple-light: #f2ebff;
--bui-color-blue: #148aff;
--bui-color-blue-light: #e1f0ff;
--bui-color-gray: #8896b1;
--bui-color-gray-light: #f3f5f8;
--bui-color-black: #000;
--bui-color-white: #fff;
--bui-color-vip: #ff866e;
--bui-color-neutral-0: var(--bui-color-black);
--bui-color-neutral-1: #2e333e;
--bui-color-neutral-2: #5f6672;
--bui-color-neutral-3: #959aa5;
--bui-color-neutral-4: #ced1d6;
--bui-color-neutral-5: #e9ebef;
--bui-color-neutral-6: #f5f6f8;
--bui-color-neutral-7: var(--bui-color-white);
--bui-font-weight-normal: 400;
--bui-font-weight-medium: 500;
--bui-font-weight-bold: 600;
--bui-color-primary: var(--bui-color-red);
--bui-color-primary-light: var(--bui-color-red-light);
--bui-color-info: var(--bui-color-blue);
--bui-color-info-light: var(--bui-color-blue-light);
--bui-color-success: var(--bui-color-green);
--bui-color-success-light: var(--bui-color-green-light);
--bui-color-warning: var(--bui-color-orange);
--bui-color-warning-light: var(--bui-color-orange-light);
--bui-color-danger: var(--bui-color-red);
--bui-color-danger-light: var(--bui-color-red-light);
--bui-title-size-1: 42rpx;
--bui-title-size-2: 36rpx;
--bui-title-size-3: 32rpx;
--bui-title-size-4: 30rpx;
--bui-text-size-1: 28rpx;
--bui-text-size-2: 26rpx;
--bui-text-size-3: 24rpx;
--bui-text-size-4: 22rpx;
--bui-text-size-5: 20rpx;
--bui-color-fg-default: var(--bui-color-neutral-1);
--bui-color-fg-muted: var(--bui-color-neutral-2);
--bui-color-fg-subtle: var(--bui-color-neutral-3);
--bui-color-fg-disabled: var(--bui-color-neutral-4);
--bui-color-bg-default: var(--bui-color-neutral-6);
--bui-color-bg-view: var(--bui-color-neutral-7);
--bui-color-bg-popover: var(--bui-color-neutral-7);
--bui-color-bg-alpha-light-9: hsla(0, 0%, 100%, .9);
--bui-color-bg-alpha-light-7: hsla(0, 0%, 100%, .7);
--bui-color-bg-alpha-light-5: hsla(0, 0%, 100%, .5);
--bui-color-bg-alpha-light-3: hsla(0, 0%, 100%, .3);
--bui-color-bg-alpha-light-1: hsla(0, 0%, 100%, .1);
--bui-color-bg-alpha-dark-9: rgba(0, 0, 0, .9);
--bui-color-bg-alpha-dark-7: rgba(0, 0, 0, .7);
--bui-color-bg-alpha-dark-5: rgba(0, 0, 0, .5);
--bui-color-bg-alpha-dark-3: rgba(0, 0, 0, .3);
--bui-color-bg-alpha-dark-1: rgba(0, 0, 0, .1);
--bui-color-border-default: var(--bui-color-neutral-5);
--bui-color-border-primary: rgba(255, 51, 92, .4);
--bui-color-border-info: rgba(20, 138, 255, .4);
--bui-color-border-success: rgba(0, 214, 143, .4);
--bui-color-border-warning: rgba(255, 133, 51, .4);
--bui-color-border-danger: rgba(255, 51, 92, .4);
--bui-color-border-gray: rgba(136, 150, 177, .4);
--bui-color-primary-start: #ef16b9;
--bui-color-primary-end: var(--bui-color-red);
--bui-color-secondary-start: #f32adf;
--bui-color-secondary-end: var(--bui-color-pink);
--bui-color-info-start: #33a7ff;
--bui-color-info-end: var(--bui-color-blue);
--bui-color-warning-start: #ffad33;
--bui-color-warning-end: var(--bui-color-orange);
--bui-color-success-start: #00ebac;
--bui-color-success-end: var(--bui-color-green);
--bui-color-danger-start: #ef16b9;
--bui-color-danger-end: var(--bui-color-red);
--bui-color-vip-start: #ffd4a6;
--bui-color-vip-end: #ffbeae;
--bui-shape-radius-popover: 36rpx;
--bui-shape-radius-drawer: 24rpx;
--bui-shape-radius-card: 18rpx;
--bui-shape-radius-default: 12rpx;
--bui-shape-radius-poster: 8rpx;
--bui-shape-radius-label: 6rpx;
--bui-spacing-xl: 30rpx;
--bui-spacing-lg: 24rpx;
--bui-spacing-md: 18rpx;
--bui-spacing-sm: 12rpx;
--bui-spacing-xs: 8rpx;
--bui-line-height: 1.5;
--bui-z-index-dropdown: 1000;
--bui-z-index-affix: 1100;
--bui-z-index-modal-backdrop: 1200;
--bui-z-index-modal: 1200;
--bui-z-index-popover: 1300;
--bui-z-index-tooltip: 1400;
--bui-z-index-toast: 1500;
--bui-font-family: "PingFang SC", "Chinese Quote", "Segoe UI", roboto, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", helvetica, arial, sans-serif
}
}
@media (prefers-color-scheme:dark) {
[data-color-mode="auto"] {
--bui-color-fg-default: #f0f6fc;
--bui-color-fg-muted: #8b949e;
--bui-color-fg-subtle: #484f58;
--bui-color-fg-disabled: #484f58;
--bui-color-bg-default: #010409;
--bui-color-bg-view: #161b22;
--bui-color-bg-popover: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-light-9: rgba(22, 27, 34, .9);
--bui-color-bg-alpha-light-7: rgba(22, 27, 34, .7);
--bui-color-bg-alpha-light-5: rgba(22, 27, 34, .5);
--bui-color-bg-alpha-light-3: rgba(22, 27, 34, .3);
--bui-color-bg-alpha-light-1: rgba(22, 27, 34, .1);
--bui-color-bg-alpha-dark-9: rgba(72, 79, 88, .9);
--bui-color-bg-alpha-dark-7: rgba(72, 79, 88, .7);
--bui-color-bg-alpha-dark-5: rgba(72, 79, 88, .5);
--bui-color-bg-alpha-dark-3: rgba(72, 79, 88, .3);
--bui-color-bg-alpha-dark-1: rgba(72, 79, 88, .1);
--bui-color-border-default: #30363d
}
}
[data-color-mode="light"],
page,
xhs-page {
color-scheme: light
}
[data-color-mode="dark"] {
color-scheme: dark
}
@media (prefers-color-scheme:light) {
[data-color-mode="auto"] {
color-scheme: light
}
}
@media (prefers-color-scheme:dark) {
[data-color-mode="auto"] {
color-scheme: dark
}
}
[data-color-mode] {
background-color: var(--bui-color-bg-default);
color: var(--bui-color-fg-default)
}
.h5-body,
.h5-button,
.h5-input,
.h5-select,
.h5-textarea {
color: inherit;
font-family: Chinese Quote, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 30rpx;
line-height: 1.5
}
.h5-button,
.h5-input,
.h5-select {
appearance: none;
outline: none
}
.h5-blockquote,
.h5-dd,
.h5-div,
.h5-dl,
.h5-dt,
.h5-fieldset,
.h5-form,
.h5-h1,
.h5-h2,
.h5-h3,
.h5-h4,
.h5-h5,
.h5-h6,
.h5-input,
.h5-legend,
.h5-li,
.h5-ol,
.h5-p,
.h5-td,
.h5-textarea,
.h5-th,
.h5-ul {
margin: 0;
padding: 0
}
.h5-a {
outline: 0
}
.h5-ol,
.h5-ul {
list-style-type: none
}
.h5-input {
line-height: normal
}
.h5-table {
border-collapse: collapse;
border-spacing: 0
}
.h5-fieldset,
.h5-img {
border: 0
}
.h5-li {
list-style: none
}
.h5-caption,
.h5-th {
text-align: left
}
.h5-q:after,
.h5-q:before {
content: ""
}
::-webkit-scrollbar {
display: none
}
.h5-body {
margin: 0;
min-height: 100vh;
padding: 0 0 var(--safe-area-inset-bottom, 68rpx);
user-select: none
}
.t-c {
text-align: center !important
}
.t-l {
text-align: left !important
}
.t-r {
text-align: right !important
}
.h5-a {
color: inherit;
text-decoration: none
}
.h5-h1,
.head1 {
font-size: 48rpx;
font-weight: 600;
line-height: 1.375
}
.h5-h2,
.head2 {
font-size: 40rpx;
font-weight: 600;
line-height: 1.45
}
.h5-h3,
.head3 {
font-size: 36rpx;
font-weight: 600;
line-height: 1.33
}
.h5-h4,
.head4 {
font-size: 32rpx;
font-weight: 500;
line-height: 1.375
}
.body1 {
font-size: 30rpx
}
.body2 {
font-size: 28rpx
}
.secondary1 {
font-size: 26rpx
}
.secondary2 {
font-size: 24rpx
}
.secondary3 {
font-size: 22rpx
}
.fn-show {
display: block !important
}
.fn-hide {
display: none !important
}
.fn-visible {
visibility: visible !important
}
.fn-hidden {
visibility: hidden !important
}
.fn-left {
float: left
}
.fn-right {
float: right
}
.d-block {
display: block !important
}
.d-none {
display: none !important
}
.d-inline {
display: inline !important
}
.d-inline-block {
display: inline-block !important
}
.d-flex {
display: flex !important
}
.bui-flex-center.tph {
align-items: center;
display: flex;
justify-content: center
}
.img-fluid {
height: auto;
max-width: 100%
}
.default-avatar {
background-image: url(https://gw.alicdn.com/tfs/TB1Q2zRXuL2gK0jSZFmXXc7iXXa-120-120.png)
}
.tpp-btn {
background-color: initial;
background-image: linear-gradient(90deg, var(--bui-color-primary-start, #ef16b9)0, var(--bui-color-primary-end, #ff335c) 100%);
background-image: linear-gradient(45deg, var(--bui-color-primary-start, #ef16b9)0, var(--bui-color-primary-end, #ff335c) 100%);
border: 0;
border-radius: 240rpx;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 24rpx;
height: 56rpx;
line-height: 56rpx;
padding: 0 26rpx;
text-align: center;
user-select: none;
vertical-align: middle
}
.tpp-btn-primary {
background-image: linear-gradient(90deg, var(--bui-color-primary-start)0, var(--bui-color-primary-end) 100%);
background-image: linear-gradient(45deg, var(--bui-color-primary-start)0, var(--bui-color-primary-end) 100%)
}
.tpp-btn-info {
background-image: linear-gradient(90deg, var(--bui-color-info-start)0, var(--bui-color-info-end) 100%);
background-image: linear-gradient(45deg, var(--bui-color-info-start)0, var(--bui-color-info-end) 100%)
}
.tpp-btn-warning {
background-image: linear-gradient(90deg, var(--bui-color-warning-start)0, var(--bui-color-warning-end) 100%);
background-image: linear-gradient(45deg, var(--bui-color-warning-start)0, var(--bui-color-warning-end) 100%)
}
.tpp-btn-outline,
.tpp-btn-outline-info,
.tpp-btn-outline-primary,
.tpp-btn-outline-warning {
background-image: none;
padding: 0 24rpx
}
.tpp-btn-outline {
border: 2rpx solid #959aa5;
color: #959aa5
}
.tpp-btn-outline-primary {
border: 2rpx solid var(--bui-color-primary);
color: var(--bui-color-primary)
}
.tpp-btn-outline-warning {
border: 2rpx solid var(--bui-color-warning);
color: var(--bui-color-warning)
}
.tpp-btn-outline-info {
border: 2rpx solid var(--bui-color-info);
color: var(--bui-color-info)
}
.tpp-btn-block {
border-radius: 0;
display: block;
font-size: 34rpx;
height: 110rpx;
line-height: 110rpx;
width: 100%
}
.tpp-btn.disabled,
.tpp-btn:disabled {
background-color: #c8c8c8;
background-image: none;
pointer-events: none
}
.tpp-btn-outline-info.disabled,
.tpp-btn-outline-info:disabled,
.tpp-btn-outline-primary.disabled,
.tpp-btn-outline-primary:disabled,
.tpp-btn-outline.disabled,
.tpp-btn-outline:disabled {
background-color: initial;
background-image: none;
border: 2rpx solid #c8c8c8;
color: #c8c8c8;
pointer-events: none
}
.tpp-lbl {
align-items: center;
background-color: #f8f8fb;
border-radius: 6rpx;
box-sizing: border-box;
color: #000;
display: inline-flex;
font-size: 20rpx;
font-style: normal;
font-weight: 400;
height: 30rpx;
justify-content: center;
line-height: 30rpx;
padding: 0 6rpx;
position: relative;
user-select: none;
white-space: nowrap
}
.tpp-lbl-primary {
background-color: var(--bui-color-primary)
}
.tpp-lbl-info {
background-color: var(--bui-color-info)
}
.tpp-lbl-warning {
background-color: var(--bui-color-warning)
}
.tpp-lbl-success {
background-color: var(--bui-color-success)
}
.tpp-lbl-outline {
background-color: initial;
border: 2rpx solid #959aa5;
border-radius: 6rpx;
color: #959aa5
}
.tpp-lbl-outline-primary {
background-color: initial;
border: 2rpx solid var(--bui-color-border-primary);
border-radius: 6rpx;
color: var(--bui-color-primary)
}
.tpp-lbl-outline-info {
background-color: initial;
border: 2rpx solid var(--bui-color-border-info);
border-radius: 6rpx;
color: var(--bui-color-info)
}
.tpp-lbl-outline-warning {
background-color: initial;
border: 2rpx solid var(--bui-color-border-warning);
border-radius: 6rpx;
color: var(--bui-color-warning)
}
.tpp-lbl-outline-success {
background-color: initial;
border: 2rpx solid var(--bui-color-border-success);
border-radius: 6rpx;
color: var(--bui-color-success)
}
.tpp-i {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 32rpx;
position: relative;
width: 32rpx
}
.bui-icon.tph {
fill: currentColor;
height: 28rpx;
width: 28rpx
}
.tpp-spinner {
animation: rotation .5s linear infinite;
border: 4rpx solid var(--bui-color-primary);
border-bottom: 4rpx solid transparent;
border-radius: 100%;
height: 40rpx;
width: 40rpx
}
.a-cp-loading-indicator,
.a-cp-loading-item,
.tpp-spinner {
display: inline-block
}
.a-cp-loading-item {
animation: ACPAULoadingScaleColorBoth .766s ease-in-out infinite alternate;
height: 20rpx;
opacity: 0;
position: relative;
transform: scale(0);
width: 20rpx
}
.a-cp-loading-item:before {
background-color: #108ee9;
border-radius: 2rpx 4rpx 4rpx 6rpx;
content: " ";
height: 38.26rpx;
left: 50%;
margin-left: -12.76rpx;
margin-top: -19.12rpx;
position: absolute;
top: 50%;
transform: skew(-.46rad) scale(.5);
transform-origin: center center;
width: 25.5rpx
}
.a-cp-loading-item:nth-child(1) {
animation-delay: -2.2s
}
.a-cp-loading-item:nth-child(2) {
animation-delay: -1.966s
}
.a-cp-loading-item:nth-child(3) {
animation-delay: -1.666s
}
@keyframes ACPAULoadingScaleColorBoth {
0% {
opacity: 0;
transform: scale(0)
}
35% {
opacity: .001;
transform: scale(.12)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes rotation {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
.home-container {
background-color: var(--bui-color-bg-default);
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
width: 100%
}
.home-container .error-list {
box-sizing: border-box;
padding-bottom: calc(100vh - 600rpx);
width: 100%
}
.home-container .error-page {
height: calc(100vh - 384rpx);
width: 100%
}
.home-scroll-wrap {
flex: 1;
overflow: hidden;
position: relative
}
.home-floor-wrap {
background-image: url(//gw.alicdn.com/imgextra/i4/O1CN010rz1sf1e9jMcCcZ1o_!!6000000003829-0-tps-750-594.jpg);
background-repeat: no-repeat;
background-size: 100%auto
}
.home-content-wrap {
background-color: #f4f5f6
}
.gradient-wrap {
background-image: linear-gradient(180deg, #fff, #f4f5f6);
height: 48rpx
}
.show-list {
background-image: linear-gradient(180deg, #fff, #f4f5f6 100rpx, #f4f5f6 0, #f4f5f6);
box-sizing: border-box;
min-height: 100vh;
padding: 18rpx 18rpx 100rpx;
position: relative;
width: 100%
}
.show-list.error {
background-color: #fff
}
.show-list .no-data {
color: #4d4d56;
font-size: 24rpx;
line-height: 32rpx;
padding: 18rpx 0 80rpx;
text-align: center
}
.show-list .no-data.current-city-nodata {
padding: 60rpx 24rpx 80rpx
}
.show-list .no-data.all-city {
padding: 18rpx 0
}
.show-list .nearby-city-title {
font-size: 32rpx;
font-weight: 500;
line-height: 32rpx;
padding: 0 0 24rpx
}
.show-list .show-list-loading {
align-items: center;
bottom: 0;
color: #4d4d56;
display: flex;
font-size: 24rpx;
height: 100rpx;
justify-content: center;
left: 0;
padding: 0 0 30rpx;
position: absolute;
width: 100%
}
.home-header-wrap {
background-color: #fff;
background-image: url(//gw.alicdn.com/imgextra/i4/O1CN010rz1sf1e9jMcCcZ1o_!!6000000003829-0-tps-750-594.jpg);
background-repeat: no-repeat;
background-size: 100%auto;
width: 100%
}
.home-header-wrap .home-title-bar {
align-items: center;
display: flex;
justify-content: space-between;
margin-left: 24rpx
}
.home-header-wrap .home-title-bar .home-logo {
height: 60rpx;
width: 155rpx
}
.home-header-wrap .home-title-bar .fav-tip-wrapper {
align-items: center;
background-image: linear-gradient(270deg, #74a5ff, #ff63a1);
border-radius: 24rpx 16rpx 16rpx 24rpx;
color: #fff;
display: flex;
font-size: 20rpx;
font-weight: 500;
height: 48rpx;
padding: 0 6rpx 0 16rpx;
position: relative;
white-space: nowrap
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .dot {
align-self: center;
background: #fff;
border-radius: 50%;
height: 8rpx;
margin-right: 4rpx;
width: 8rpx
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .dot:first-child {
margin-left: 2rpx
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .dot:last-child {
margin-right: 2rpx
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .dot.large {
height: 12rpx;
width: 12rpx
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .triangle {
border: 12rpx solid transparent;
border-left-color: #74a5ff;
height: 0;
position: absolute;
right: -20rpx;
width: 0
}
.home-header-wrap .home-title-bar .fav-tip-wrapper .close-icon {
color: #fff;
font-size: 24rpx;
margin-left: 8rpx
}
.home-skeleton {
left: 0;
padding: 0 24rpx !important;
position: fixed;
top: 188rpx
}
.home-skeleton .skeleton-wave {
animation: wave-animation 1.4s ease infinite;
background: linear-gradient(90deg, hsla(0, 0%, 75%, .2) 25%, hsla(0, 0%, 51%, .24) 37%, hsla(0, 0%, 75%, .2) 63%);
background-size: 400% 100%;
border-radius: 8rpx;
height: 40rpx
}
@keyframes wave-animation {
0% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
.home-skeleton .sl-search {
height: 60rpx;
margin-bottom: 20rpx;
width: 702rpx
}
.home-skeleton .sl-vajra-position {
background-color: #fff;
border-radius: 12rpx;
box-sizing: border-box;
column-gap: 60rpx;
display: flex;
flex-wrap: wrap;
height: 310rpx;
margin-bottom: 20rpx;
padding: 30rpx;
row-gap: 20rpx;
width: 702rpx
}
.home-skeleton .sl-vajra-position-item {
display: flex;
flex-direction: column;
width: 80rpx
}
.home-skeleton .sl-vajra-position-item-img {
height: 80rpx;
margin-bottom: 10rpx;
width: 100%
}
.home-skeleton .sl-vajra-position-item-text {
height: 24rpx;
width: 100%
}
.home-skeleton .sl-broadcast {
display: flex;
gap: 14rpx;
height: 220rpx;
margin-bottom: 20rpx;
overflow: hidden;
width: 702rpx
}
.home-skeleton .sl-broadcast-item {
height: 100%;
width: 354rpx
}
.home-skeleton .sl-square-card {
display: flex;
gap: 14rpx;
height: 108rpx;
margin-bottom: 20rpx;
overflow: hidden;
width: 702rpx
}
.home-skeleton .sl-square-card-item {
height: 100%;
width: 226rpx
}
.home-skeleton .sl-show-slider-box {
background-color: #fff;
border-radius: 12rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
padding: 10rpx 0 24rpx 30rpx;
position: relative;
width: 702rpx
}
.home-skeleton .sl-show-slider-tab {
align-items: center;
display: flex;
height: 76rpx;
margin-bottom: 14rpx;
width: 702rpx
}
.home-skeleton .sl-show-slider-tab-item {
height: 52rpx;
margin-right: 20rpx;
width: 120rpx
}
.home-skeleton .sl-show-slider-tab-item-last {
margin-right: 0;
position: absolute;
right: 30rpx
}
.home-skeleton .sl-show-slider {
display: flex;
gap: 14rpx;
overflow: hidden;
width: 672rpx
}
.home-skeleton .sl-show-slider-item {
flex-shrink: 0;
height: 100%;
width: 152rpx
}
.home-skeleton .sl-show-slider-poster {
height: 204rpx;
margin-bottom: 14rpx;
width: 100%
}
.home-skeleton .sl-show-slider-time {
height: 28rpx;
margin-bottom: 14rpx;
width: 100%
}
.home-skeleton .sl-title {
height: 52rpx;
margin-bottom: 30rpx;
width: 200rpx
}
.home-skeleton .sl-show {
height: 262rpx;
width: 100%
}