page { background: #e5e5e5; overflow-x: hidden; width: 100%; height: auto; } page .act { color: #007AFF; } .utop{ height: 50px; background-color: #FFFFFF; margin-bottom: -20px; } .rebate-border { border: 1rpx solid #ff6565; border-radius: 4rpx; font-size: 20rpx; display: inline-block; padding: 2rpx 4rpx; color: #ff6565; } .textDecoration { text-decoration: line-through; color: #999999; font-size: 20rpx; } .xcx-title { color: #FFFFFF; text-align: left; padding: 0 20rpx; } .xcx-title-store { font-size: 34rpx; font-weight: 600; max-width: 400rpx; } .xcx-title-icon { font-size: 21rpx; display: inline-block; padding-top: 5rpx; } /* ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } */ .por { position: relative; width: 229rpx; } .item-off { min-width: 185rpx; height: 54rpx; border-radius: 100rpx; background: #eee; color: #999; font-size: 24rpx; position: absolute; right: 0rpx; } .item-off .act { background: #999; color: #FFFFFF; border-radius: 100rpx; } .item-off view { padding: 0 8rpx; } .container { position: relative; overflow-x: hidden; top:-20px; } .head-bg { width: 150vw; height: 130rpx; border-radius: 0 0 50% 50%; background: $theme-color; position: absolute; left: 50%; /* top: 0; */ z-index: 0; margin-left: -75%; } .head-block { width: 100%; box-sizing: border-box; /* padding: 20rpx 20rpx 0; */ background: #fff; /* border-radius: 20rpx; */ position: relative; z-index: 1; margin: 0 auto; /* box-shadow: 0 10rpx 30rpx #eaeaea; */ height: 50px; } .store-title{ display:flex; flex-direction: row; justify-content: flex-start; align-items: center; height:50px; margin-left:10px; } .head-block .page-title-block { // height: 50rpx; } .head-block .icon-1 { color: $theme-color; display: block; flex: none; width: 50rpx; height: 50rpx; margin-right: 10rpx; font-size: 40rpx; } .head-block .page-title { font-size: 24rpx; font-weight: bold; color: #555; } .head-block .order-btn { flex: none; padding: 0 15rpx; border: 1rpx solid #efefef; font-size: 26rpx; height: 60rpx; line-height: 60rpx; color: #666; border-radius: 10rpx; margin-right: 10rpx; } .head-block .notice-block { font-size: 26rpx; margin-top: 10rpx; height: 40rpx; letter-spacing: 1rpx; color: #555; } .head-block .btn-block { height: 150rpx; } .head-block .btn-block .item { // width: 20%; flex: 1; padding: 0; } .head-block .btn-block .item .btn-icon { display: block; width: 48rpx; height: 48rpx; margin: 0 auto; } .head-block .btn-block .item .title { text-align: center; font-size: 24rpx; height: 33rpx; line-height: 33rpx; color: #999; margin-top: 13rpx; } .main-block { height: calc(100vh - 370rpx); height: calc(100vh - 370rpx - constant(safe-area-inset-bottom)); height: calc(100vh - 370rpx - env(safe-area-inset-bottom)); padding-right:10px; margin-top: 20rpx; } .main-block-quan { height: calc(100vh - 370rpx); height: calc(100vh - 370rpx - constant(safe-area-inset-bottom)); height: calc(100vh - 370rpx - env(safe-area-inset-bottom)); } .main-block .left-bar { flex: none; height: 100%; width: 110px; background-color: #F0F0F0!important; /* border-radius: 20rpx 20rpx 0 0; */ overflow: hidden; margin-right: 20rpx; display:flex; flex-direction: column; border-top-right-radius: 10px; } .main-block .left-bar .item { position: relative; overflow: hidden; height:50px; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; } .main-block .left-bar .item .left-rund { display: block; border-radius: 50%; background:#333; width:5px; height:5px; margin-left:10px; margin-right:10px; } .main-block .left-bar .item .name { color: #333; font-size: 28rpx; font-weight: 500; line-height: 40rpx; display:flex; width:80%; margin-left: 8px; } .main-block .left-bar .item.active { background-color: #a4907e; /* border:1px solid red; */ border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .main-block .left-bar .item .rund { position: absolute; display: block; width: 15rpx; height: 15rpx; background-color: #FFFFFF; position: absolute; right: 10rpx; bottom: 10rpx; border-radius: 50%; } .main-block .left-bar .item.active .name { color:#FFF; } .main-block .left-bar .item .num { display: inline-block; height: 40rpx; min-width: 40rpx; background-color: #ff6565; border-radius: 20rpx; font-size: 24rpx; font-weight: 500; text-align: center; color: #fff; line-height: 35rpx; position: absolute; right: 5rpx; top: 10rpx; } .main-block .right-bar { flex: none; width: 510rpx; height: auto; position: relative; border-radius: 20rpx 20rpx 0 0; overflow: hidden; padding-bottom: 60px; } .main-block .right-bar .content { width: 510rpx; height: 100%; } .main-block .right-bar .zhanwei { width: 100%; height: 100%; } .main-block .right-bar .top { background-color: #fff; padding: 0 20rpx; width: 100%; height: 100rpx; border-radius: 20rpx; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2; } .main-block .right-bar .top .active-cat { flex: auto; align-items: baseline; } .main-block .right-bar .top .active-cat .name { font-size: 28rpx; font-weight: bold; color: #555; } .main-block .right-bar .top .active-cat .desc { font-size: 24rpx; color: #888; margin-left: 15rpx; } .main-block .right-bar .top .search-btn { flex: none; font-size: 28rpx; color: #bbb; font-weight: 500; background-color: #eee; width: 160rpx; height: 60rpx; border-radius: 30rpx; } .main-block .right-bar .top .icon-4 { font-size: block; width: 30rpx; height: 30rpx; } /********************************************************************/ .main-block .right-bar .item { border-radius: 20rpx; background-color: #fff; padding: 10rpx 20rpx; margin-bottom: 20rpx; } // .main-block .right-bar .item.first { // padding-top: 100rpx; // } .main-block .right-bar .item .cat-block { height: 80rpx; align-items: baseline; line-height: 80rpx; } .main-block .right-bar .cat-block .name { font-size: 28rpx; font-weight: bold; color: #555; } .main-block .right-bar .cat-block .desc { font-size: 24rpx; color: #888; margin-left: 15rpx; } .main-block .right-bar .item .goods-item { padding: 20rpx 0; } .main-block .right-bar .item .goods-item .img { display: block; flex: none; width: 140rpx; height: 140rpx; border-radius: 20rpx; } .main-block .right-bar .item .goods-item .goods-info { padding-left: 20rpx; min-height: 140rpx; flex: auto; } .main-block .right-bar .item .goods-item .goods-info .name { font-size: 26rpx; line-height: 40rpx; color: #555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; } .main-block .right-bar .item .goods-item .goods-info .price { font-size: 30rpx; font-weight: 500; color: #ff6565; } .main-block .right-bar .item .goods-item .goods-info .price .vip-price { font-size: 20rpx; color: #ff6565; } .main-block .right-bar .item .goods-item .spec-btn { height: 60rpx; padding: 0 30rpx; border-radius: 30rpx; color: #fff; font-size: 26rpx; line-height: 60rpx; position: relative; display:flex; flex-direction: row; } .main-block .right-bar .item .goods-item .spec-btn .circle{ border-radius: 7px; width:86rpx; height:42rpx; background:#a07c5a; display:flex; justify-content: center; font-size: 12px; align-items: center; left: 15px; position: relative; } .main-block .right-bar .item .goods-item .spec-btn .spec-num-gg { display:flex; height: 15px; width: 15px; border-radius: 50%; background-color: #ff6565; color: #fff; font-size: 11px; position: absolute; right: -15rpx; top: -15rpx; justify-content: center; align-items: center; z-index: 5; } .main-block .right-bar .item .goods-item .spec-btn .spec-num { display:flex; height: 40rpx; width: 40rpx; border-radius: 50%; background-color: #ff6565; color: #fff; font-size: 11px; position: absolute; right: -15rpx; top: -15rpx; justify-content: center; align-items: center; } .main-block .right-bar .item .goods-item .goods-num-block { flex: none; margin-top: auto; height: 60rpx; } .main-block .right-bar .item .goods-item .goods-num-block .num-btn { flex: none; width: 42rpx; height: 42rpx; // border: 1rpx solid $theme-color; border-radius: 50%; position: relative; font-size: 42rpx; } // .main-block .right-bar .item .goods-item .goods-num-block .num-btn::before { // display: block; // content: ""; // width: 28rpx; // height: 6rpx; // border-radius: 3rpx; // background-color: $theme-color; // position: absolute; // left: 50%; // top: 50%; // margin: -3rpx 0 0 -14rpx; // } // .main-block .right-bar .item .goods-item .goods-num-block .num-btn-2 { // background: $theme-color; // } .main-block .right-bar .item .goods-item .goods-num-block .num-btn-2::before, .main-block .right-bar .item .goods-item .goods-num-block .num-btn-2::after { // display: block; // content: ""; // width: 28rpx; // height: 6rpx; // border-radius: 3rpx; // background-color: #fff; // position: absolute; // left: 50%; // top: 50%; // margin: -3rpx 0 0 -14rpx; } .main-block .right-bar .item .goods-item .goods-num-block .num-btn-2::after { // transform: rotate(90deg); } .main-block .right-bar .item .goods-item .goods-num-block .num { flex: none; min-width: 60rpx; text-align: center; font-size: 26rpx; font-weight: 500; color: #555; } button { display: block !important; background: none !important; height: auto !important; border: none !important; color: inherit !important; text-align: inherit; } button::after { border: none !important; } /* 弹窗 */ .mask { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top: 0; z-index: 999; } .pop-block { width: 660rpx; background: #fff; border-radius: 20rpx; overflow: hidden; position: relative; } .pop-block .title { font-size: 34rpx; color: #555; line-height: 50rpx; padding-top: 30rpx; text-align: center; font-weight: 500; margin-bottom: 20rpx; } .pop-block .content-block { max-height: 60vh; } .content-tel { padding: 20rpx 40rpx; } .content-tel-bor { border-bottom: 1rpx solid #F1F1F1; margin-left: 10rpx; } .content-tel-bor-input { font-size: 26rpx; } .pop-block .content { padding: 0 30rpx; } // //公告弹窗 .notice-pop .sub-btn { height: 80rpx; line-height: 80rpx; text-align: center; font-size: 32rpx; color: $theme-color; border-top: 1rpx solid #efefef; margin-top: 30rpx; } .notice-pop .content { font-size: 30rpx; line-height: 1.5; color: #555; text-align: center; } // 规格弹窗 .spec-pop .content .spec-cat-title { font-size: 32rpx; font-weight: 500; } .spec-pop .content .spec-list { padding: 10rpx 0 30rpx; flex-flow: row wrap; align-content: flex-start; } .spec-pop .content .spec-list .spec-item { font-size: 26rpx; padding: 10rpx 20rpx; border: 1rpx solid #eee; border-radius: 8rpx; margin-top: 15rpx; margin-right: 10rpx; } .spec-pop .content .spec-list .spec-item.active { background-color: $theme-color; border-color: $theme-color; color: #fff; } .spec-close-btn { display: block; width: 64rpx; height: 64rpx; margin-top: 40rpx; } .spec-pop .btm-block { padding: 20rpx 30rpx; background-color: #eee; } .spec-pop .btm-block .price { font-size: 40rpx; font-weight: bold; color: #ff6565; } .spec-pop .btm-block .unit { font-size: 26rpx; color: #666; } .spec-pop .choose-spec-list { font-size: 26rpx; color: #666; margin-left: 20rpx; margin-right: 20rpx; } .spec-pop .btm-block .add-car-btn { margin-left: auto; height: 60rpx; font-size: 28rpx; color: #fff; background-color: $theme-color; font-weight: bold; line-height: 60rpx; text-align: center; padding: 0 20rpx; border-radius: 30rpx; min-width: 200rpx; } .spec-pop .btm-block .goods-num-block { margin-left: auto; height: 60rpx; } .spec-pop .btm-block .goods-num-block .num-btn { flex: none; width: 42rpx; height: 42rpx; // border: 1rpx solid $theme-color; border-radius: 50%; position: relative; font-size: 42rpx; } .spec-pop .btm-block .goods-num-block .num { flex: none; min-width: 60rpx; text-align: center; font-size: 26rpx; font-weight: 500; color: #555; } //商品详情 .detail-pop { position: relative; } .detail-pop .goods-img { display: block; width: 660rpx; height: 660rpx; } .detail-pop .btm-block { padding: 10rpx 30rpx 20rpx; background-color: #eee; } .detail-pop .btm-block .goods-name { font-size: 40rpx; font-weight: 500; line-height: 1.4; margin-bottom: 10rpx; color: #555; } .detail-pop .btm-block .goods-desc { font-size: 26rpx; line-height: 1.4; color: #666; margin-bottom: 10rpx; } .detail-pop .btm-block .price { font-size: 40rpx; font-weight: bold; color: #ff6565; } .detail-pop .btm-block .unit { font-size: 26rpx; color: #666; } .detail-pop .btm-block .vip-price { font-size: 26rpx; color: #ff6565; margin-left: 15rpx; } .detail-pop .choose-spec-list { font-size: 26rpx; color: #666; margin-left: 20rpx; margin-right: 20rpx; } .detail-pop .btm-block .add-car-btn { margin-left: auto; height: 60rpx; font-size: 28rpx; color: #fff; background-color: $theme-color; font-weight: bold; line-height: 60rpx; text-align: center; padding: 0 20rpx; border-radius: 30rpx; } .detail-pop .btm-block .goods-num-block { margin-left: auto; } .detail-pop .btm-block .goods-num-block .num-btn { flex: none; width: 42rpx; height: 42rpx; // border: 1rpx solid $theme-color; border-radius: 50%; position: relative; font-size: 42rpx; } // .detail-pop .btm-block .goods-num-block .num-btn::before { // display: block; // content: ""; // width: 28rpx; // height: 6rpx; // border-radius: 3rpx; // background-color: $theme-color; // position: absolute; // left: 50%; // top: 50%; // margin: -3rpx 0 0 -14rpx; // } // .detail-pop .btm-block .goods-num-block .num-btn-2 { // background: $theme-color; // } .detail-pop .btm-block .goods-num-block .num-btn-2::before, .detail-pop .btm-block .goods-num-block .num-btn-2::after { // display: block; // content: ""; // width: 28rpx; // height: 6rpx; // border-radius: 3rpx; // background-color: #fff; // position: absolute; // left: 50%; // top: 50%; // margin: -3rpx 0 0 -14rpx; } .detail-pop .btm-block .goods-num-block .num-btn-2::after { // transform: rotate(90deg); } .detail-pop .btm-block .goods-num-block .num { flex: none; min-width: 60rpx; text-align: center; font-size: 26rpx; font-weight: 500; color: #555; } .detail-pop .detail-close-btn { display: block; width: 64rpx; height: 64rpx; position: absolute; right: 10rpx; top: 10rpx; z-index: 990; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; overflow: hidden; } // 成为会员 .get-phone-pop { width: 660rpx; background-color: #fff; border-radius: 14rpx; overflow: hidden; } .code-btn { flex: none; width: 170rpx; height: 60rpx; border-radius: 30rpx; background-color: #3387FF; text-align: center; line-height: 60rpx; color: #fff; font-size: 24rpx; } .get-phone-pop .content { // height: 180rpx; text-align: center; font-size: 35rpx; color: #000; // line-height: 60rpx; padding: 30rpx 0; } .get-phone-pop .btm-block { width: 100%; height: 115rpx; border-top: 2px solid #eef0ef; } .get-phone-pop .btm-block .btn { flex: none; width: 50%; height: 115rpx; box-sizing: border-box; text-align: center; line-height: 115rpx; color: #010101; font-weight: bold; padding: 0; margin: 0; border: none; border-radius: 0; background-color: #fff; font-size: 35rpx; } .get-phone-pop .btm-block .btn::after { padding: 0; border: none; border-radius: 0; } .get-phone-pop .btm-block .sub-btn { color: #626c90; border-left: 1px solid #eef0fe; } // .lingquan-block { width: 100%; height: 60rpx; background-color: #FCF5DD; padding: 13rpx 20rpx; box-sizing: border-box; position: fixed; left: 0; bottom: 100rpx; bottom: calc(100rpx + constant(safe-area-inset-bottom)); bottom: calc(100rpx + env(safe-area-inset-bottom)); } .lingquan-block .icon-10 { display: block; width: 28rpx; height: 28rpx; } .lingquan-block .lingquan-btn { border: 1rpx solid #FD6C00; border-radius: 4rpx; text-align: center; line-height: 32rpx; color: #FD6C00; font-size: 24rpx; padding: 0 15rpx; margin-left: 16rpx; } .lingquan-block .info { font-size: 24rpx; color: #333; padding: 0 16rpx; } .lingquan-block .arr-r { margin-left: auto; } // .coupon-content-block { width: 646rpx; height: 759rpx; position: relative; } .coupon-content-block .coupon-pop-bg { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .coupon-content-block .content { height: 100%; position: relative; z-index: 10; text-align: center; } .coupon-content-block .content .title { font-size: 50rpx; font-weight: bold; color: #793619; line-height: 68rpx; padding-top: 120rpx; } .coupon-content-block .content .money-block { // line-height: 120rpx; width: 50%; margin: 0 auto; } .coupon-content-block .content .money-block .unit { font-size: 50rpx; font-weight: bold; color: #FF1E2C; } .coupon-content-block .content .money-block .money { font-size: 50rpx; font-weight: bold; color: #FF1E2C; padding-top: 40rpx; } .coupon-content-block .content .type { display: inline-block; height: 44rpx; padding: 0 33rpx; border-radius: 22rpx; background-color: #FFECED; color: #FF1E2C; font-size: 24rpx; line-height: 44rpx; } .coupon-content-block .content .btn { width: 340rpx; height: 80rpx; opacity: 1; background: linear-gradient(270deg, #ffbb59 0%, #fff2ce 100%); border-radius: 40rpx; box-shadow: 0rpx 5rpx 1rpx 0rpx #be6d32; text-align: center; line-height: 80rpx; position: absolute; bottom: 138rpx; left: 50%; transform: translateX(-50%); font-size: 36rpx; font-weight: bold; color: #751300; } .many_rebate { color: red; text-align: right; } .share_commission { position: absolute; right: 0; top: 450rpx; border-top-left-radius: 40rpx; border-bottom-left-radius: 40rpx; z-index: 99; } .share_commission image { width: 100rpx; height: 126rpx; margin-right: 14rpx; margin-left: 20rpx; } .shopping{ width: 650rpx; margin: 0 auto; background: #fff; /* height: 400rpx; */ text-align: center; border-radius: 8rpx; } .shopping_title{ height: 100rpx; } .shopping_number{ width: 80%; margin: 0 auto; border: 1rpx solid #f1f1f1; height: 100rpx; } .shopping_line{ width: 2rpx; height: 50rpx; background-color: #f1f1ff; } .shopping_btn{ height: 120rpx; } .shopping_placeholder{ font-size: 26rpx; }