.diy-quick { height: 460px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .diy-quick .quick-menu { height: 460px; width: 80px; background: #f8f8f8; overflow-y: auto; } .diy-quick .quick-menu nav { height: 36px; line-height: 36px; text-align: center; font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; cursor: pointer; } .diy-quick .quick-menu nav.active { background: #fff; position: relative; color: #fd5454; border-left: 3px solid #fd5454; } .diy-quick .quick-menu nav .icon { font-size: 12px; vertical-align: top; } .diy-quick .quick-container { height: 460px; width: 224px; background: #fff; overflow-y: auto; } .diy-quick .quick-container .quick-adv { height: auto; } .diy-quick .quick-container .quick-adv img { width: 100%; height: auto; } .diy-quick .quick-container .quick-title { background: #f8f8f8; font-size: 14px; color: #666; padding: 4px 4px 4px 10px; border-left: 4px solid #efefef; position: relative; } .diy-quick .quick-container .quick-title .subtitle { font-size: 11px; line-height: 12px; padding-bottom: 2px; } .diy-quick .quick-container .quick-list { height: auto; overflow: hidden; } .diy-quick .quick-container .quick-list-empty { line-height: 150px; text-align: center; } .diy-quick .quick-container .quick-list .quick-item { height: auto; padding: 10px; 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; } .diy-quick .quick-container .quick-list .quick-item:before { content: ''; position: absolute; top: 0; left: 10px; right: 0; border-top: 1px solid #f0f0f0; -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); } .diy-quick .quick-container .quick-list .quick-item:first-child:before { display: none; } .diy-quick .quick-container .quick-list .quick-item .thumb, .diy-quick .quick-container .quick-list .quick-item .thumb img { height: 60px; width: 60px; } .diy-quick .quick-container .quick-list .quick-item .info { width: 100%; padding-left: 6px; line-height: 16px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 13px; } .diy-quick .quick-container .quick-list .quick-item .info .title { font-size: 12px; max-height: 36px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #333; } .diy-quick .quick-container .quick-list .quick-item .info .subtitle { font-size: 10px; color: #666; line-height: 14px; } .diy-quick .quick-container .quick-list .quick-item .info .sales { font-size: 9px; color: #999; line-height: 14px; } .diy-quick .quick-container .quick-list .quick-item .info .buyline { height: auto; line-height: 16px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .diy-quick .quick-container .quick-list .quick-item .info .buyline .price { color: #ff6500; font-size: 14px; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .diy-quick .quick-container .quick-list .quick-item .info .buyline .buy { color: #3190e8; } .diy-quick .quick-container .quick-list .quick-item .info .buyline { } .diy-quick-footer { height: 50px; background: #474749; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-shadow:0 0 4px rgba(0,0,0,0.1); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.1); -moz-box-shadow:0 0 4px rgba(0,0,0,0.1); } .diy-quick-footer .quick-cart { width: 72px; position: relative; } .diy-quick-footer .quick-cart .dot { background: #ff4f28; border-radius: 10px; color: #fff; font-size: 12px; height: 16px; line-height: 16px; margin-left: 2px; min-width: 16px; padding: 0 4px; position: absolute; top: -12px; right: 0; vertical-align: top; text-align: center; z-index: 11; } .diy-quick-footer .quick-cart .inner { height: 60px; width: 60px; border-radius: 60px; background: #3b96e9; border: 5px solid #4d4d4d; color: #fff; text-align: center; line-height: 52px; position: absolute; right: 0; bottom: 5.2px; 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); } .diy-quick-footer .quick-cart .inner .icon { font-size: 28px; } .diy-quick-footer .quick-info { width: 100%; padding: 6px 8px; line-height: 16px; font-size: 13px; color: #fff; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .diy-quick-footer .quick-info .price { font-size: 18px; line-height: 20px; } .diy-quick-footer .quick-submit { height: 50px; padding: 0 24px; line-height: 50px; background: #55db6c; color: #fff; display: inline-block; font-size: 16px; } /* 店招样式 */ .fui-shop .shop-info { overflow: hidden; position: relative; } .fui-shop .shop-info .inner { height: 60px; padding: 0 20px; position: absolute; left: 0; right: 0; bottom: 20px; display: flex; } .fui-shop .shop-info .inner .logo { height: 60px; width: 60px; } .fui-shop .shop-info .inner .logo img { height: 100%; width: 100%; } .fui-shop .shop-info .inner .logo.circle img { border-radius: 60px; } .fui-shop .shop-info .inner .logo.round img { border-radius: 10px; } .fui-shop .shop-info .inner .right { flex: 1; padding-left: 8px; line-height: 30px; } .fui-shop .shop-info .inner .name { color: #000; font-size: 16px; font-weight: bold; overflow: hidden; } .fui-shop .shop-info .inner .notice { font-size: 15px; overflow: hidden; } .fui-shop .shop-info .inner .notice .icon { color: #f19b59; } .fui-shop .shop-info .background { height: auto; min-height: 180px; width: 100%; vertical-align: middle; display: inline-block; } .fui-shop .shop-menu { display: flex; background: #fff; } .fui-shop .shop-menu .item { flex: 1; text-align: center; padding: 10px 0 6px; line-height: 24px; } .fui-shop .shop-menu .item .icon { color: #ff5555; font-size: 24px; } .fui-shop .shop-menu .item .text { height: 24px; width: 100%; font-size: 13px; color: #141414; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-shop.style2 { background: #f5f5f5; padding-bottom: 30px; } .fui-shop.style2 .shop-menu { padding: 10px 0 6px; margin: -20px 16px; border-radius: 10px; position: relative; z-index: 2; } .fui-shop.style2 .shop-info .inner, .fui-shop.style3 .shop-info .inner { height: 120px; bottom: 36px; line-height: 34px; display: block; } .fui-shop.style3 .shop-info .inner { bottom: 5px; } .fui-shop.style2 .shop-info .inner .right, .fui-shop.style3 .shop-info .inner .right { padding: 0; 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: 32px; line-height: 40px; } .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: 30px; } .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: 16px 0 16px; } /**/ .fui-goods-tab { margin-top: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-tab .menu { min-height:200px; width: 80px; background: #e6e6e6; } .fui-goods-tab .menu .nav { height: 44px; line-height: 44px; background: #e6e6e6; text-align: center; font-size: 14px; position: relative; cursor: pointer; } .fui-goods-tab .menu .nav:after { border-bottom: 1px solid #dadada; content: ""; position: absolute; left: 0; right: 0; bottom: 0; display: block; } .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: 2px; background: #ff5555; content: ""; position: absolute; top: 0; left: 0; bottom: 0; display: block; } .fui-goods-tab.style3 .menu .nav.active:before { height: 2px; width:20px; margin-left: -10px; background: #ff5555; content: ""; position: absolute; bottom: 0; left: 50%; display: block; } .fui-goods-tab .main { background: #fff; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-goods-tab .main .item-title { padding: 10px 10px 0; font-size: 14px; color: #999; } .fui-goods-tab .main .item { padding: 10px; 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: 10px; right: 10px; bottom: 0; } .fui-goods-tab .main .item:last-child:after { display: none; } .fui-goods-tab .main .item .thumb { height: 70px; width: 70px; background: #eee; } .fui-goods-tab .main .item .thumb img { height: 70px; width: 70px; display: block; } .fui-goods-tab .main .item .inner { padding-left: 8px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-goods-tab .main .item .inner .title { height: 32px; line-height: 16px; font-size: 14px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .fui-goods-tab .main .item .inner .subtitle { height: 22px; color: #9f9f9f; font-size: 13px; line-height:20px; 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: 20px; line-height: 20px; font-size: 10px; color: #cbcbcb; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-tab .main .item .inner .buyline .price { font-size: 10px; padding-right: 5px; color: #ff5555; } .fui-goods-tab .main .item .inner .buyline .sales { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-goods-tab .main .item .inner .buyline .buybtn { height: 20px; width: 20px; background: #ff5555; color: #fff; border-radius: 20px; text-align: center; line-height: 22px; font-size: 14px; font-weight: bold; } .empty-data { line-height: 40px; text-align: center; color: #999; } /*悬浮购物车*/ .cart-dot { height: 45px; width: 45px; border-radius: 45px; position: absolute; bottom: 20px; left: 16px; text-align: center; line-height: 45px; 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: 8px; width: 8px; border-radius: 8px; background: #ff0011; content: ""; top: 7px; right: 7px; position: absolute; z-index: 102; opacity: 0.7; } .cart-dot .icon { position: relative; z-index: 101; font-size: 24px; vertical-align: middle; color: #ffffff }