.fui-page-group { background: #000; } .fui-tag-danger { padding: 0.05rem 0.15rem; margin-right: 0.1rem; } .fui-tag-danger.red { background: #ed5565; } .fui-page-group.scale-in .fui-page { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; transform: scale(0.85) translate(0, -1rem); } .fui-page-group.scale-out .fui-page { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; transform: scale(1) translate(0, 0); } .option-picker { border-top: 2px solid #ff5555; } .option-picker .fui-navbar .confirmbtn { background: #ff5555; } .spec-item.btn-danger { background: #ff5555; } .fui-mask, .fui-mask-m { background: rgba(0,0,0,0.5); } a { color: inherit; } .fui-swipe-page { bottom: 0; } .fui-header-right .icon { font-size: 1.1rem; color: #888; margin-right: 0.2rem; } .fui-header-right .icon.light { color: #ff5555; } .fui-fullHigh-item.container { padding: 0; } .quick-list { height: auto; overflow: hidden; } .quick-list-empty { line-height: 150px; text-align: center; font-size: 0.7rem; color: #666; display: none; } .quick-list-title { background: #f8f8f8; font-size: 0.75rem; color: #666; padding: 0.2rem 0.2rem 0.2rem 0.5rem; position: relative; } .quick-list-title .subtitle { font-size: 0.65rem; line-height: 0.7rem; padding-bottom: 0.1rem; display: none; } .quick-list-title:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 0.2rem solid #efefef; } .quick-list .quick-item { height: auto; padding: 0.5rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } .quick-list .quick-item:before { content: ''; position: absolute; top: 0; left: 0.5rem; right: 0; border-top: 1px solid #ddd; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .quick-list .quick-item:first-child:before { display: none; } .quick-list .quick-item .thumb { height: 3rem; width: 3rem; background: #f4f4f4; border: 0; } .quick-list .quick-item .thumb img { height: 3rem; width: 3rem; border: 0; } .quick-list .quick-item .info { width: 100%; padding-left: 0.3rem; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 0.65rem; } .quick-list .quick-item .info .title { font-size: 0.65rem; height: 1.6rem; line-height: 0.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .quick-list .quick-item .info .subtitle { font-size: 0.55rem; color: #666; display: none; } .quick-list .quick-item .info .sales { font-size: 0.6rem; line-height: 0.85rem; height: 0.85rem; color: #888; } .quick-list .quick-item .info .buyline { height: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 0.8rem; } .quick-list .quick-item .info .buyline .price { color: #ff5555; font-size: 0.8rem; line-height: 0.8rem; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .quick-list .quick-item .info .buyline .buy { color: #ff5555; position: relative; z-index: 10; height: 1rem; margin-top: -0.2rem; } .quick-list .quick-item .info .buyline .buy .icon { font-size: 1.2rem; vertical-align: middle; } .fui-footer.quick { background: #474749; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; z-index: 30; } .fui-footer.quick .quick-cart { width: 3.6rem; position: relative; } .fui-footer.quick .quick-cart.an { animation: cartan 0.5s; } @keyframes cartan { 0% { transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform:scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); } 25% { transform:scale(1.1); -ms-transform: scale(1.1); -webkit-transform:scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); } 50% { transform:scale(0.9); -ms-transform: scale(0.9); -webkit-transform:scale(0.9); -o-transform: scale(0.9); -moz-transform: scale(0.9); } 100% { transform:scale(1); -ms-transform: scale(1); -webkit-transform:scale(1); -o-transform: scale(1); -moz-transform: scale(1); } } .fui-footer.quick .quick-cart .dot { background: #eb0101; border-radius: 0.5rem; color: #fff; font-size: 0.6rem; height: 0.8rem; line-height: 0.8rem; margin-left: 0.1rem; min-width: 0.8rem; padding: 0 0.2rem; position: absolute; top: -0.6rem; right: 0; vertical-align: top; text-align: center; z-index: 11; display: none; } .fui-footer.quick .quick-cart .inner { height: 3rem; width: 3rem; border-radius: 3rem; background: #ff5555; border: 0.25rem solid #4d4d4d; color: #fff; text-align: center; line-height: 2.6rem; position: absolute; right: 0; bottom: 0.26rem; z-index: 10; box-shadow: 0 0 4px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3); } .fui-footer.quick .quick-cart .inner .icon { font-size: 1.4rem; } .fui-footer.quick .quick-cart.empty .inner { background: #404040; color: #67676b; } .fui-footer.quick .quick-info { width: 100%; padding: 0.3rem 0.4rem; line-height: 0.8rem; font-size: 0.65rem; color: #fff; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-footer.quick .quick-info .price { font-size: 0.9rem; line-height: 1rem; } .fui-footer.quick .quick-submit { height: 2.5rem; padding: 0 1.2rem; line-height: 2.5rem; background: #ff9d55; color: #fff; margin: 0 !important; display: inline-block; } .fui-footer.quick .quick-submit.disabled { background: #5c5c5f; } .fui-footer.cart { z-index: 20; height: auto; max-height: 18.5rem; bottom: 2.5rem; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-property: -webkit-transform; transition-property: transform; } .fui-footer.cart.in { -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fui-footer.cart.out { -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .fui-footer.cart .title { height: 2rem; line-height: 2rem; background: #ececee; padding: 0 0.7rem 0 1.2rem; font-size: 0.8rem; color: #444; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .fui-footer.cart .title:before { content: ""; border-left: 0.15rem solid #ff5555; left: 0.7rem; top: 0.65rem; bottom: 0.65rem; position: absolute; } .fui-footer.cart .title .text { font-size: 0.75rem; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-footer.cart .title .right { color: #777; font-size: 0.7rem; } .fui-footer.cart .title .right .icon { vertical-align: middle; } .fui-footer.cart .inner { height: auto; max-height: 15rem; overflow-y: auto; -webkit-overflow-scrolling : touch; } .fui-footer.cart .inner .item { font-size: 0.75rem; padding: 0.55rem; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .fui-footer.cart .inner .item:before { content: ""; position: absolute; left: 0.5rem; top: 0; right: 0.5rem; height: 0; border-top: 1px solid #d9d9d9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-footer.cart .inner .item:first-child:before { border: 0; } .fui-footer.cart .inner .item .text { line-height: 0.85rem; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-footer.cart .inner .item .text p:first-child { max-height: 1.7rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fui-footer.cart .inner .item .text .spec { padding-top: 0.1rem; font-size: 0.6rem; color: #b2b2b2; } .fui-footer.cart .inner .item .sale { background: #ff461d; color: #fff; font-size: 0.6rem; padding: 0 0.2rem; border-radius: 0.15rem; } .fui-footer.cart .inner .item .price { color: #ff461d; font-size: 0.7rem; padding: 0 0.5rem; } .fui-footer.cart .tip { height: 1.4rem; background: #f8f8f8; font-size: 0.65rem; line-height: 1.4rem; text-align: center; color: #444; position: relative; } .fui-footer.cart .tip:before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid #efefef; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fly-dot { height: 1.1rem; width: 1.1rem; background: #ff5555; display: block; z-index: 999; border-radius: 1.1rem; } .mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 15; display: none; } .mask.high { z-index: 40; } /* 数量选择器 */ .quick-num { height: 1.1rem; width: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .quick-num.open .minus { -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } .quick-num.open .num { -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; opacity: 1; } .quick-num.close .minus { animation: closeminus 0.2s; animation-fill-mode : forwards; } .quick-num.close .num { -moz-transition-duration: 100ms; -webkit-transition-duration: 100ms; transition-duration: 100ms; opacity: 0; } @keyframes closeminus { 20% { -webkit-transform: translate3d(50%, 0, 0) rotate(0deg); transform: translate3d(50%, 0, 0) rotate(0deg); opacity: 1; } 50% { -webkit-transform: translate3d(100%, 0, 0) rotate(30deg); transform: translate3d(100%, 0, 0) rotate(30deg); opacity: 0.5; } 70% { -webkit-transform: translate3d(150%, 0, 0) rotate(60deg); transform: translate3d(150%, 0, 0) rotate(60deg); opacity: 0.3; } 80% { -webkit-transform: translate3d(200%, 0, 0) rotate(90deg); transform: translate3d(200%, 0, 0) rotate(90deg); opacity: 0.2; } 100% { opacity: 0; } } .quick-num .minus, .quick-num .plus { height: 1.2rem; width: 1.2rem; line-height: 1.1rem; font-size: 1.2rem; text-align: center; border-radius: 2rem; } .quick-num .minus { color: #ff5555; border: 1px solid #ff5555; -webkit-transform: translate3d(200%, 0, 0) rotate(90deg); transform: translate3d(200%, 0, 0) rotate(90deg); -webkit-transition-property: -webkit-transform; transition-property: transform; background: #fff; opacity: 0; position: relative; z-index: 8; } .quick-num .minus:before { content: "\e6d7"; line-height: 1.1rem; font-size: 0.85rem; margin-top: -1px; display: block; } .quick-num .minus.disabled { color: #dadada; border-color: #dadada; } .quick-num .plus { background: #ff5555; color: #fff; position: relative; z-index: 11; } .quick-num .plus:before { content: "\e662"; line-height: 1.2rem; font-size: 0.9rem; margin-top: -1px; display: block; } .quick-num .plus.disabled { background: #dadada; } .quick-num .num { height: 1.2rem; line-height: 1.2rem; font-size: 0.85rem; min-width: 1.2rem; padding: 0 0.2rem; text-align: center; color: #777; opacity: 0; } .fui-fullHigh-item.menu { width: 6rem; } .fui-fullHigh-item.menu nav { position: relative; height: 2rem; line-height: 2rem; } /* 左侧菜单 数量 */ .menu .dot { height: 0.6rem; min-width: 0.6rem; font-size: 0.5rem; background: #ff461d; line-height: 0.6rem; border-radius: 0.6rem; display: block; color: #fff; position: absolute; top: 0.2rem; right: 0.3rem; font-style: normal; } /* 规格弹出层 */ .alert-spec { min-height: 11rem; width: 14rem; background: #fff; position: relative; top: 50%; left: 50%; margin: -6rem 0 0 -7rem; border-radius: 0.2rem; z-index: 45; overflow: hidden; display: none; } .alert-spec .head { padding: 0.4rem 0.8rem; text-align: center; position: relative; background: #fbfbfb; color: #333; } .alert-spec .head .icon-close { position: absolute; top: 0.3rem; right: 0.3rem; color: #aaa; font-size: 1rem; } .alert-spec .body { height: 8rem; padding: 0.2rem 0.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .alert-spec .body .spec { font-size: 0.7rem; line-height: 1.2rem; color: #979797; } .alert-spec .body .specs { height: auto; overflow: hidden; } .alert-spec .body .specs .item { font-size: 0.65rem; color: #666; padding: 0.1rem 0.5rem; border: 1px solid #999; display: inline-block; border-radius: 1rem; margin: 0.15rem; position: relative; } .alert-spec .body .specs .item.active { border-color: #0095ff; color: #0095ff; } .alert-spec .foot { background: #fbfbfb; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .alert-spec .foot .price { width: 100%; padding: 0 0.4rem; font-size: 0.85rem; color: #ff5a00; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .alert-spec .foot .price span { color: #666; font-size: 0.65rem; } .alert-spec .foot .btn-ok { background: #0096ff; color: #fff; border: 0; height: 1.8rem; line-height: 1.7rem; } /* 模板2样式 */ .fui-shop .shop-info { height: auto; overflow: hidden; position: relative; } .fui-shop .shop-info .inner { height: 3rem; padding: 0 1rem; position: absolute; left: 0; right: 0; bottom: 1rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-shop .shop-info .inner .logo { height: 3rem; width: 3rem; } .fui-shop .shop-info .inner .logo img { height: 100%; width: 100%; } .fui-shop .shop-info .inner .logo.circle img { border-radius: 3rem; } .fui-shop .shop-info .inner .logo.round img { border-radius: 0.5rem; } .fui-shop .shop-info .inner .right { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 1%; padding-left: 0.4rem; line-height: 1.5rem; } .fui-shop .shop-info .inner .name { height: 1.5rem; color: #000; font-size: 0.8rem; font-weight: bold; } .fui-shop .shop-info .inner .notice { height: 1.5rem; padding: 0.25rem 0; line-height: 1rem; font-size: 0.75rem; } .fui-shop .shop-info .inner .notice .icon { color: #f19b59; height: 1rem; width: 1rem; display: inline-block; vertical-align: middle; } .fui-shop .shop-info .inner .notice .text { height: 1rem; display: inline-block; vertical-align: middle; max-width: 90%; overflow: hidden; } .fui-shop .shop-info .inner .notice .text li { height: 1rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-shop .shop-info .background { height: auto; min-height: 4rem; width: 100%; vertical-align: middle; display: inline-block; } .fui-shop .shop-menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background: #fff; } .fui-shop .shop-menu .item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; padding: 0.5rem 0 0.3rem; line-height: 1.2rem; } .fui-shop .shop-menu .item .icon { color: #ff5555; font-size: 1.2rem; } .fui-shop .shop-menu .item .text { font-size: 0.65rem; color: #141414; } .fui-shop.style2 { background: #f5f5f5; padding-bottom: 1.8rem; } .fui-shop.style2 .shop-menu { padding: 0.5rem 0 0.3rem; margin: -1rem 0.8rem; border-radius: 0.5rem; position: relative; z-index: 2; } .fui-shop.style2 .shop-info .inner, .fui-shop.style3 .shop-info .inner { height: 6rem; bottom: 1.8rem; line-height: 1.7rem; display: block; } .fui-shop.style3 .shop-info .inner { bottom: 0.5rem; } .fui-shop.style2 .shop-info .inner .right, .fui-shop.style3 .shop-info .inner .right { padding: 0; width: 100%; line-height: inherit; } .fui-shop.style2 .shop-info .inner .logo, .fui-shop.style3 .shop-info .inner .logo { margin: auto; } .fui-shop.style2 .shop-info .inner .name, .fui-shop.style3 .shop-info .inner .name { text-align: center; } .fui-shop.style3 .shop-info .inner .name { height: 1.6rem; line-height: 2rem; } .fui-shop.style2 .shop-info .inner .notice, .fui-shop.style3 .shop-info .inner .notice { text-align: center; } .fui-shop.style3 .shop-info .inner .notice { /*line-height: 1.5rem;*/ } .fui-shop.style2 .shop-info .inner .notice .icon, .fui-shop.style3 .shop-info .inner .notice .icon { color: inherit; } .fui-shop.style3 .shop-menu .item { padding: 0.8rem 0 0.8rem; } .fui-goods-tab { margin-top: 0.5rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .fui-goods-tab .menu { min-height: 10rem; width: 4.2rem; padding-bottom: 7rem; background: #e6e6e6; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; } .fui-goods-tab .menu .nav { height: 2.4rem; line-height: 2.4rem; background: #e6e6e6; text-align: center; font-size: 0.75rem; position: relative; } .fui-goods-tab .menu .nav:after { border-bottom: 1px solid #dadada; content: ""; position: absolute; left: 0; right: 0; bottom: 0; } .fui-goods-tab .menu .nav.active { background: #fff; color: #ff5555; } .fui-goods-tab.style2 .menu .nav:after, .fui-goods-tab.style3 .menu .nav:after { display: none; } .fui-goods-tab.style2 .menu .nav.active:before { width: 0.1rem; background: #ff5555; content: ""; position: absolute; top: 0; left: 0; bottom: 0; } .fui-goods-tab.style3 .menu .nav.active:before { height: 0.1rem; width: 1rem; margin-left: -0.5rem; background: #ff5555; content: ""; position: absolute; bottom: 0; left: 50%; } .fui-goods-tab .main { background: #fff; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .fui-goods-tab .main .item-title { padding: 0.5rem 0.5rem 0; font-size: 0.7rem; color: #999; } .fui-goods-tab .main .item { padding: 0.5rem; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-tab .main .item:after { border-bottom: 1px solid #efefef; content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; } .fui-goods-tab .main .item:last-child:after { display: none; } .fui-goods-tab .main .item .thumb { height: 4rem; width: 4rem; background: #eee; } .fui-goods-tab .main .item .thumb img { height: 4rem; width: 4rem; display: block; } .fui-goods-tab .main .item .inner { padding-left: 0.4rem; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-goods-tab .main .item .inner .title { height: 1.8rem; line-height: 0.9rem; font-size: 0.75rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fui-goods-tab .main .item .inner .subtitle { height: 1rem; margin-bottom: 0.2rem; color: #9f9f9f; font-size: 0.7rem; line-height: 1rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .fui-goods-tab .main .item .inner .buyline { height: 1rem; line-height: 1rem; font-size: 0.6rem; color: #cbcbcb; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-tab .main .item .inner .buyline .price { font-size: 0.8rem; padding-right: 0.5rem; color: #ff5555; } .fui-goods-tab .main .item .inner .buyline .sales { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.1rem; } .fui-goods-tab .main .item .inner .buyline .buybtn { margin-left: auto; height: 1.2rem; width: 1.2rem; background: #ff5555; color: #fff; border-radius: 1.2rem; text-align: center; line-height: 1.3rem; font-size: 0.75rem; font-weight: bold; margin-top: -0.2rem; } .empty-data { padding-bottom: 0.5rem; line-height: 2rem; text-align: center; font-size: 0.7rem; color: #999; } /*悬浮购物车*/ .cart-dot { height: 2.5rem; width: 2.5rem; border-radius: 2.5rem; position: fixed; bottom: 3.5rem; left: 0.8rem; text-align: center; line-height: 2.5rem; overflow: hidden; z-index: 99; } .cart-dot:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ff5555; opacity: 0.8; z-index: 100; } .cart-dot:after { height: 0.4rem; width: 0.4rem; border-radius: 0.4rem; background: #ff0011; content: ""; top: 0.45rem; right: 0.4rem; position: absolute; z-index: 102; opacity: 0.7; } .cart-dot .icon { position: relative; z-index: 101; font-size: 1.4rem; vertical-align: middle; color: #ffffff } .cart-dot.empty:after { display: none; }