wpfw_ewei_shopv2/plugin/quick/static/css/web.css
2023-02-14 19:57:32 +08:00

615 lines
14 KiB
CSS

.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
}