.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; border-top: 1rpx solid #ccc; text-align: center; height: 100rpx; font-size: 24rpx; color: #666; } .foot-item .btn { line-height: 1.2; background: transparent; font-size: 24rpx; padding: 0; color: #666; } .foot-item .btn::after { border: 0; } .foot-item .iconfont { color: #333; font-size: 42rpx; display: inline-block; } .foot-item .iconfont.active { color: #ff5344!important; } .foot-item .cart-num { position: absolute; right: -16rpx; top: -4rpx; width: 36rpx; height: 36rpx; background: #f43530; border-radius: 36rpx; color: #fff; font-size: 22rpx; display: flex; justify-content: center; align-items: center; } ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } .topImg { width: 100%; vertical-align: top; } .com-tit { font-size: 32rpx; color: #1a1d21; padding-bottom: 20rpx; } .title { font-size: 45rpx; color: #1a1d21; padding: 15rpx 0; } .desc { font-size: 24rpx; color: #b0b2b5; } .userinfo { margin-top: 30rpx; } .avatar { width: 66rpx; height: 66rpx; border-radius: 50%; margin-right: 24rpx; } .p { color: #666; font-size: 26rpx; line-height: 1.8; margin-top: 20rpx; } .list-box { display: flex; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .wxParse-p image { max-width: 100%!important; } .list-tit { color: #333; font-size: 28rpx; } /* 视频 */ .media-box { position: relative; } .btn_view { position: absolute; left: 50%; top: 50%; z-index: 100; transform: translate(-50%, -50%); } .btn_view image { width: 120rpx; height: 120rpx; background: rgba(0, 0, 0, 0.1); border-radius: 50%; animation: playScale 2s ease-in-out infinite; } .video-wrap, .swiper-video { width: 100%; /* height: 100%; */ vertical-align: top; } .end-play { position: relative; z-index: 1000; background: #000; text-align: center; padding: 20rpx 0; } .end-play .btn { display: inline-block; padding: 5rpx 30rpx; background-color: #f6f6f6; border-radius: 20rpx; font-size: 24rpx; } @keyframes playScale { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } } .canvas-img { position: absolute; top: -20000rpx; } .nav-btn { position: relative; left: 0; display: flex; justify-content: center; align-items: center; width: 31px; height: 31px; line-height: 31px; padding: 0; min-width: 31px; max-width: 31px; text-align: center; border-radius: 50%; min-height: initial; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.05); color: #000; } .nav-btn .img { width: 22px; height: 22px; } /* 全屏视频 */ .livepage { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-bottom: 24px; box-sizing: border-box; width: 100%; height: 100vh; overflow: hidden; } .livepage1 { position: relative; width: 100%; height: 100%; z-index: 0; } .livepage1 video { width: 100%; height: 100%; } .livepage2 { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-bottom: 24px; box-sizing: border-box; width: 100%; height: 100%; } .operation { position: absolute; right: 17px; bottom: 24px; z-index: 10; } .operation .item { width: 42px; height: 42px; background-image: linear-gradient(180deg, #8385F3 0%, #6467F0 100%); border-radius: 50%; margin-bottom: 23px; overflow: hidden; } .operation .item .iconfont { font-size: 24px; color: #fff; } .operation .item.operation--mode-filter-black { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px); border-radius: 50%; overflow: hidden; } .operation button.item::after { content: none; } .store { padding: 0 16px; position: absolute; z-index: 2; left: 0; right: 0; bottom: 30px; } .store-list { border-radius: 16px; overflow: hidden; position: relative; bottom: -999px; } .store-list.fadeIn { bottom: 0; animation: fadeInStoreList 0.2s 1 forwards; } .store__mask { position: fixed; top: 0; left: 0; right: 0; height: 100%; } .mode-filter-black { background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px); border-radius: inherit; } .store-list__inner { position: relative; z-index: 5002; padding: 16px 12px; box-sizing: border-box; } .store-list__header { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 4px; font-weight: 500; } .store-list__title { font-size: 15px; color: #ffffff; text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.1); } .store-list__body { margin-top: 4px; overflow: hidden; padding: 2px 5px 0 0; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .store-list__page__inner { position: relative; width: calc(100% + 20px); box-sizing: border-box; -webkit-mask-image: -webkit-gradient(linear, left bottom, left 96%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 04))); } .store-list__item { margin-bottom: 12px; background: #ffffff; border-radius: 8px; } .store-list__item:last-child { margin-bottom: 0; } .store-list__item__inner { display: flex; justify-content: flex-start; align-items: stretch; padding: 8px; } .store-list__item__header { position: relative; margin-right: 9px; font-size: 0; } .store-list__item__avatar { width: 64px; height: 64px; border-radius: 2px; box-sizing: border-box; } .store-list__item__index { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); border-radius: 2px 0px 8px 0px; text-align: center; padding: 0 2px; min-width: 14px; line-height: 12px; font-size: 10px; color: #ffffff; text-align: center; } .store-list__item__page { height: initial; } .store-list__item__title { font-size: 15px; color: rgba(0, 0, 0, 0.7); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; line-height: 19.6px; margin-bottom: 5px; } .store-list__item__price { opacity: 0.9; font-size: 14px; color: #fa9d3b; } .store-list__item__price-before { color: #B2B2B2; text-decoration: line-through; } .store-list__empty { text-align: center; height: 287px; line-height: 140px; color: #fff; font-size: 14px; } .operation--mode-filter-black .icon-xinaixin.active { color: #ff5344!important; }