.page { padding-bottom: 130rpx; } /** * 顶部导航内容 */ .top-nav-left-icon { top: 28px; z-index: 11; } .top-nav-left-icon { left: auto; margin-left: 20rpx; } .top-nav-left-icon .icon { background: rgb(255 255 255 / 70%); width: 25px; height: 25px; line-height: 25px; display: block; float: left; text-align: center; padding: 3px; } .top-nav { position: absolute; bottom: 0; width: calc(100% - 40rpx); /* #ifdef H5 || APP */ bottom: 6px; padding-bottom: 5px; /* #endif */ } .top-nav-content { margin: 0 auto; width: 310rpx; margin-left: calc(50% - 170rpx); } .top-nav-content text { font-size: 30rpx; /* #ifdef H5 || APP */ font-size: 14px; /* #endif */ } .top-nav-content text:not(:last-child) { margin-right: 30rpx; } .top-nav-content .nav-active { font-weight: 500; padding-bottom: 2rpx; border-style: solid; border-width: 0 0 2px 0; } /** * 顶部更多导航 */ .nav-more-view { position: fixed; z-index: 20; top: 62px; left: 20rpx; } .nav-more-view .triangle { width: 0; height: 0; border-width: 0 5px 5px 5px; border-style: solid; border-color: transparent transparent rgb(0 0 0 / 0.7) transparent; top: -5px; left: calc(20rpx + 42px); } .nav-more-view .content { background: rgb(0 0 0 / 0.7); } .nav-more-view .content .item { font-size: 12px; } .nav-more-view .content .item:not(:last-child) { border-bottom: 1px solid #585858; } /** * 相册 */ .goods-photo .swiper, .goods-photo .swiper-item { height: 55vh !important; display: block; } /** * 购买操作导航 */ .goods-buy-nav .btn-items .btn { height: 70rpx; line-height: 70rpx; padding: 0 10rpx; margin-right: 15rpx; position: relative; } .goods-buy-nav .image { width: 40rpx; height: 40rpx; margin: 10rpx 0 5rpx 0; } .goods-buy-nav .dis-block { margin-top: -10rpx; } .goods-buy-nav .badge-icon { position: absolute; top: 2rpx; left: calc(50% + 25rpx); z-index: 1; } .goods-buy-nav-btn-number-0 .btn, .goods-buy-nav-btn-number-1 .btn { width: calc(100% - 15rpx) !important; } .goods-buy-nav-btn-number-2 .btn { width: calc(50% - 15rpx) !important; } .goods-buy-nav-btn-number-3 .btn { width: calc(33.33% - 15rpx) !important; } .goods-buy-nav-btn-number-4 .btn { width: calc(25% - 15rpx) !important; } .goods-buy-nav-btn-number-5 .btn { width: calc(20% - 15rpx) !important; } .goods-buy-nav-btn-number-6 .btn { width: calc(16.66% - 15rpx) !important; } .goods-buy-nav-btn-number-7 .btn { width: calc(14.28% - 15rpx) !important; } .goods-buy-nav-btn-number-8 .btn { width: calc(12.5% - 15rpx) !important; } .goods-buy-nav-btn-number-9 .btn { width: calc(11.11% - 15rpx) !important; } .goods-buy-nav-btn-number-10 .btn { width: calc(10% - 15rpx) !important; } /** * 商品基础 */ .goods-base-content .goods-title-content { position: relative; min-height: 86rpx; } .goods-base-content .goods-title-content .goods-title { font-size: 30rpx; line-height: 40rpx; font-weight: bold; width: calc(100% - 200rpx); } .goods-base-content image { width: 40rpx; height: 40rpx; } .goods-base-content .collect { width: 76rpx; } /** * 视频 */ .goods-video { width: 100%; top: 0; left: 0; z-index: 1; } .goods-video video { width: 100%; height: 55vh !important; } .goods-video-submit { left: 50rpx; top: auto; bottom: 60rpx; z-index: 2; } .goods-video-submit image { width: 80rpx; height: 80rpx !important; } /** * 基础价格信息 */ .goods-base-price, .price-content, .goods-base-right-opt { min-height: 145rpx; } .price-content { width: calc(100% - 200rpx); } .goods-base-right-opt { width: 200rpx; } .price-content, .goods-base-right-opt { box-sizing: border-box; position: relative; height: 100%; } .goods-base-right-opt image { width: 40rpx; height: 40rpx; } .goods-base-right-opt .collect { width: 76rpx; } .price-content .price-icon { padding: 0px 8rpx; color: #fff; border: 1px solid #FF5722; background: #FF5722; font-size: 24rpx; } .price-content .sales-price { font-size: 42rpx; } .price-content .item:not(:last-child) { margin-bottom: 10rpx; } /** * app独立内容 */ .goods-detail-app .content-items view { padding: 15rpx 10rpx; line-height: 44rpx; font-size: 32rpx; } /** * 价格信息与秒杀结合 */ .countdown-content { width: 38%; } .countdown-content .time-title { font-size: 38rpx; margin-bottom: 10rpx; } .goods-base-price-countdown { background: #e84742 !important; } .goods-base-price-countdown .price-content { background: #f9534e; background-repeat: no-repeat; background-size: 100% 100%; width: 60%; min-height: 164rpx; } .goods-base-price-countdown .price-content .price-icon { border-color: #fff; color: #fff; background: transparent; } .goods-base-price-countdown .price-content .sales-price, .goods-base-price-countdown .price-content .sales-price-unit, .goods-base-price-countdown .price-content .points-price-value, .goods-base-price-countdown .price-content .points-price-unit { color: #fff !important; } .goods-base-price-countdown .price-content .original-price, .goods-base-price-countdown .price-content .unit{ color: #ffcece !important; } .price-content .price-icon.seckill { position: absolute; right: 20rpx; bottom: 20rpx; margin-right: 0; } /* * 商品参数 */ .parameters-base .content-item .item { color: #666; } .goods-parameters .content-item .item { padding: 8rpx 10rpx; width: calc(50% - 20rpx); } .goods-parameters .content-item .item .name { margin-right: 10rpx; } .goods-parameters .content-item .item:nth-child(2n-1) { float: left; } .goods-parameters .content-item .item:nth-child(2n) { float: right; } /** * 商品参数弹窗 */ .popup-params-container { max-height: 80vh; overflow-y: scroll; overflow-x: hidden; } .popup-params-container .item .name { width: 220rpx; } .popup-params-container .item .value { width: calc(100% - 240rpx); } /* * 标题icon */ .goods-title-icon-item { background: #666; color: #fff; padding: 0 8rpx; line-height: 26rpx; font-weight: 400; } /* * 面板 */ .goods-panel-container { background: #fffbfc; color: #d2354c; } .goods-panel-container view { padding: 15rpx 0; } .goods-panel-container view:not(:first-child) { border-top: 1px dashed #fff1f2; } /** * 购买记录 - 插件 */ .plugins-salerecords-tips, .plugins-salerecords-tips-top-left, .plugins-salerecords-tips-top-right, .plugins-salerecords-tips-bottom-left, .plugins-salerecords-tips-bottom-right, .plugins-salerecords-tips-top-center, .plugins-salerecords-tips-bottom-center { position: fixed; left: calc(50% - 170rpx); top: 50%; background: rgb(0 0 0 / 60%); border-radius: 60rpx; padding: 8rpx 20rpx; color: #fff; z-index: 50; -webkit-box-shadow: 0 8px 10px rgb(0 0 0 / 20%); -moz-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 10px rgb(0 0 0 / 20%); } .plugins-salerecords-tips image, .plugins-salerecords-tips-top-left image, .plugins-salerecords-tips-top-right image, .plugins-salerecords-tips-bottom-left image, .plugins-salerecords-tips-bottom-right image, .plugins-salerecords-tips-top-center image, .plugins-salerecords-tips-bottom-center image { width: 50rpx; height: 50rpx; border-radius: 50%; } .plugins-salerecords-tips-top-left { left: 5%; top: 13%; } .plugins-salerecords-tips-top-right { right: 5%; top: 13%; left: auto; } .plugins-salerecords-tips-top-center { top: 13%; } /* #ifdef MP-ALIPAY */ .plugins-salerecords-tips-top-left { top: 5%; } .plugins-salerecords-tips-top-right { top: 5%; } .plugins-salerecords-tips-top-center { top: 5%; } /* #endif */ .plugins-salerecords-tips-bottom-left { left: 5%; bottom: 10%; top: auto; } .plugins-salerecords-tips-bottom-right { right: 5%; bottom: 10%; left: auto; top: auto; } .plugins-salerecords-tips-bottom-center { bottom: 10%; top: auto; } /* * 优惠劵 - 插件 */ .coupon-padding { padding: 2rpx; } .mini-coupon { position: relative; display: inline-block; height: 40rpx; line-height: 40rpx; border-radius: 4rpx; padding: 0 16rpx; } .mini-coupon::before, .mini-coupon::after { content: ''; width: 14rpx; height: 14rpx; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); } .mini-coupon::before { left: -8rpx; } .mini-coupon::after { right: -8rpx; } .mini-coupon-br::before, .mini-coupon-br::after { border: 1px solid #FE5500; } .coupon-srcoll { white-space: nowrap; overflow-x: auto; } .coupon-srcoll::-webkit-scrollbar { width: 0; height: 0; display: none; } .received-coupon { background: #FFEBE0; border: 2rpx solid #FE5500; color: #FE5500; } .not-received-coupon { background: #FE5500; border: 2rpx solid #FE5500; color: #fff; } .received-coupon .divider-l::before { background: red; } .not-received-coupon .divider-l::before { background: #fff; } .plugins-coupon-container-view .item-title { min-width: 70rpx; } .plugins-coupon-container-view .item:not(:last-child) { margin-right: 10rpx; } .plugins-coupon-container { max-height: 50vh; overflow-y: scroll; overflow-x: hidden; margin-top: 20rpx; } .plugins-coupon-container .v-left { padding: 20rpx 10rpx 20rpx 20rpx; } .plugins-coupon-container .item:not(:last-child) { margin-bottom: 20rpx; } .plugins-coupon-container .item, .plugins-coupon-container .v-right, .plugins-coupon-container .v-right .circle { height: 175rpx; } .plugins-coupon-container .v-left .base .price { font-size: 46rpx; } /** * 标签 - 插件 */ .plugins-label navigator:not(:last-child) { margin-right: 20rpx; } .plugins-label navigator { margin-bottom: 20rpx; } .plugins-label-top-left, .plugins-label-top-center, .plugins-label-top-right { top: calc(var(--status-bar-height) + 130rpx); } .plugins-label-text { padding: 20rpx 20rpx 0 20rpx; } .plugins-label-bottom-left, .plugins-label-bottom-center, .plugins-label-bottom-right { bottom: 0; } /** * 智能工具 - 插件 */ .plugins-intellectstools-base-bottom-container .notice-content { padding: 10rpx 20rpx; background: #fff1f0; border-color: #ffe2e0; color: #dd514c; } .plugins-intellectstools-content-top-container { background: #daeeff; color: #2b6e8f; border: 1px solid #c9e9ff; } .plugins-intellectstools-content-top-container .panel-content .item:first-child { padding-top: 0 !important; } .plugins-intellectstools-content-top-container .panel-title, .plugins-intellectstools-content-top-container .panel-content .item:not(:last-child) { border-bottom: 1px solid #c8e4fb !important; } /** * 门店 - 插件 */ .plugins-realstore-popup { max-height: 80vh; overflow-y: scroll; overflow-x: hidden; margin-top: 20rpx; } /** * 商品服务 - 插件 */ .plugins-goodsservice-view-container .item image { width: 32rpx; height: 32rpx !important; } .plugins-goodsservice-container .item image { width: 70rpx; height: 70rpx !important; } .plugins-goodsservice-container .item .left { width: 80rpx; } .plugins-goodsservice-container .item .right { width: calc(100% - 90rpx); }