chore: 立即咨询改成查看详情， 咨询按钮去掉，样式调整
This commit is contained in:
@@ -1,2 +1,471 @@
|
||||
.single{background:#fff!important}.category-page-wrap{width:100vw;display:flex;flex-direction:column;background-color:#fff}.content-box{flex:1;height:0;display:flex}.content-box .tree-wrap{width:170rpx;height:100%;background-color:#f5f5f5}.content-box .right-flex-wrap{flex:1;width:0;height:100%;background:#f4f6fa;display:flex;flex-direction:column;-webkit-transform:translateX(0);transform:translateX(0)}.content-box .right-flex-wrap .content-wrap{display:flex;flex:1;height:0;width:100%}.content-box .right-flex-wrap .child-category-wrap{width:100%;height:100%}.tree-wrap .category-item-wrap{height:auto;background-color:#fff}.tree-wrap .category-item{line-height:1.5;padding:26rpx 28rpx;font-size:18rpx;text-align:center;box-sizing:border-box;position:relative;background-color:#f5f5f5}.tree-wrap .category-item view{color:#222;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}.tree-wrap .category-item.border-top{border-bottom-right-radius:12rpx}.tree-wrap .category-item.border-bottom{border-top-right-radius:12rpx}.tree-wrap .category-item.select{background:#fff;font-size:24rpx;color:#333;font-weight:700}.tree-wrap .category-item.select view{color:#333;font-weight:700}.tree-wrap .category-item.select::before{content:" ";width:8rpx;height:34rpx;background:var(--base-color);display:block;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.search-box{position:relative;padding:20rpx 30rpx;display:flex;align-items:center;background:#fff}.search-box .search-content{position:relative;height:100%;border-radius:40rpx;flex:1;background-color:#f5f5f5}.search-box .search-content input{box-sizing:border-box;display:block;height:100%;width:100%;padding:0 20rpx 0 40rpx;background:#f5f5f5;color:#333;border-radius:40rpx}.search-box .search-content .iconfont{position:absolute;top:50%;right:10rpx;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:32rpx;z-index:10;color:#89899a;width:80rpx;text-align:center}.cart-box{height:100rpx;width:100%;background:#fff;border-top:1px solid #f5f5f5;box-sizing:border-box;padding:0 30rpx;display:flex;align-items:center;justify-content:space-between}.cart-box .left-wrap{display:flex;align-items:center}.cart-box .cart-icon{width:70rpx;height:70rpx;position:relative}.cart-box .cart-icon .iconfont{color:var(--btn-text-color);width:inherit;height:inherit;background-color:var(--base-color);border-radius:50%;display:flex;align-items:center;justify-content:center}.cart-box .cart-icon .num{position:absolute;top:0;right:0;-webkit-transform:translate(60%);transform:translate(60%);display:inline-block;box-sizing:border-box;color:#fff;line-height:1.2;text-align:center;font-size:24rpx;padding:0 6rpx;min-width:30rpx;border-radius:16rpx;background-color:var(--price-color);border:2rpx solid #fff}.cart-box .price{margin-left:30rpx}.cart-box .price .title{color:#333}.cart-box .price .money,
|
||||
.cart-box .price .unit{font-weight:700;color:var(--price-color)}.cart-box .settlement-btn{margin:0 0 0 20rpx;width:200rpx;font-weight:700;border-radius:50rpx;height:70rpx;line-height:70rpx}.cart-point{width:26rpx;height:26rpx;position:fixed;z-index:1000;background:red;border-radius:50%;transition:all .05s}.category-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.category-empty image{width:380rpx}.category-empty .tips{font-size:26rpx;font-weight:500;color:#999;margin-top:50rpx}.end-tips{text-align:center;color:#999;font-size:24rpx;padding:20rpx 0;opacity:0}.category-template-4 .search-box .search-content input{background-color:#f1f1f1}.category-template-4 .cart-box{position:relative;z-index:2}.category-template-4 .template-four{position:relative;z-index:1}.category-template-4 .template-four .template-four-wrap{position:relative;z-index:1;padding-left:20rpx;padding-right:80rpx;padding-bottom:10rpx;display:flex;height:172rpx;align-items:baseline;box-sizing:border-box;box-shadow:0 4rpx 4rpx hsla(0,0%,48.2%,.1)}.category-template-4 .template-four .template-four-popup{display:flex;flex-direction:column;overflow:hidden}.category-template-4 .template-four .template-four-popup .title{line-height:1;margin-bottom:20rpx;font-weight:700}.category-template-4 .template-four .template-four-popup .template-four-scroll{display:flex;flex-wrap:wrap;align-items:baseline;align-content:baseline;padding:20rpx;white-space:nowrap;height:380rpx;box-sizing:border-box}.category-template-4 .template-four .template-four-popup .template-four-scroll .uni-scroll-view-content{flex-wrap:wrap;align-items:baseline;align-content:baseline}.category-template-4 .template-four .template-four-popup .template-four-scroll .item{display:flex;flex-direction:column;align-items:center;padding:4rpx 0;color:#666;margin-right:16rpx;border-radius:40rpx;margin-bottom:10rpx;width:calc((100% - 64rpx) / 5)}.category-template-4 .template-four .template-four-popup .template-four-scroll .item:nth-child(5n + 5){margin-right:0}.category-template-4 .template-four .template-four-popup .template-four-scroll .item .image-warp{margin-bottom:6rpx;padding:4rpx;display:flex;align-items:center;justify-content:center;border-radius:42rpx;border:4rpx solid transparent}.category-template-4 .template-four .template-four-popup .template-four-scroll .item image{width:84rpx;height:84rpx;border-radius:32rpx}.category-template-4 .template-four .template-four-popup .template-four-scroll .item .text{padding:2rpx 16rpx;border-radius:40rpx;font-size:24rpx}.category-template-4 .template-four .template-four-popup .template-four-scroll .item.selected .text{background-color:var(--base-color);color:var(--btn-text-color)}.category-template-4 .template-four .template-four-popup .pack-up{font-size:24rpx;color:#888;height:74rpx;display:flex;align-items:center;justify-content:center;border-top:2rpx solid #f2f2f2}.category-template-4 .template-four .template-four-popup .pack-up .iconfont{font-size:40rpx;margin-left:-4rpx}.category-template-4 .template-four .category-item-all{position:absolute;bottom:0;z-index:1;right:0;top:0;width:72rpx;line-height:1;background-color:#fff}.category-template-4 .template-four .category-item-all .category-item-all-wrap{position:absolute;bottom:0;right:0;top:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2}.category-template-4 .template-four .category-item-all .text{-webkit-writing-mode:tb-rl;writing-mode:tb-rl;margin-bottom:6rpx;letter-spacing:4rpx;font-size:24rpx;font-weight:700}.category-template-4 .template-four .category-item-all .img{width:20rpx;height:20rpx}.category-template-4 .template-four .category-item-all::after{content:"";position:absolute;left:0;width:10rpx;top:20%;bottom:20%}.category-template-4 .template-four .uni-scroll-view-content{display:flex}.category-template-4 .template-four .category-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:130rpx;flex-shrink:0;margin-right:20rpx;padding:4rpx 0}.category-template-4 .template-four .category-item:last-of-type{margin-right:0}.category-template-4 .template-four .category-item .image-warp{margin-bottom:6rpx;padding:4rpx;display:flex;align-items:center;justify-content:center;border-radius:42rpx;border:4rpx solid transparent}.category-template-4 .template-four .category-item image{width:84rpx;height:84rpx;border-radius:32rpx}.category-template-4 .template-four .category-item .text{font-size:24rpx}.category-template-4 .template-four .select .text{padding:8rpx 16rpx;border-radius:40rpx;color:#fff;font-size:24rpx;line-height:1}.category-template-4 .content-wrap .categoty-goods-wrap .goods-list{margin-top:30rpx}.category-template-4 .tree-wrap .category-item.select::before{border-top-right-radius:8rpx;border-bottom-right-radius:8rpx}
|
||||
.single {
|
||||
background: #fff !important
|
||||
}
|
||||
|
||||
.category-page-wrap {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.content-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.content-box .tree-wrap {
|
||||
width: 170rpx;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5
|
||||
}
|
||||
|
||||
.content-box .right-flex-wrap {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #f4f6fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
.content-box .right-flex-wrap .content-wrap {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.content-box .right-flex-wrap .child-category-wrap {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.tree-wrap .category-item-wrap {
|
||||
height: auto;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.tree-wrap .category-item {
|
||||
line-height: 1.5;
|
||||
padding: 26rpx 28rpx;
|
||||
font-size: 18rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: #f5f5f5
|
||||
}
|
||||
|
||||
.tree-wrap .category-item view {
|
||||
color: #222;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.border-top {
|
||||
border-bottom-right-radius: 12rpx
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.border-bottom {
|
||||
border-top-right-radius: 12rpx
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.select {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.select view {
|
||||
color: #333;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.select::before {
|
||||
content: " ";
|
||||
width: 8rpx;
|
||||
height: 34rpx;
|
||||
background: var(--base-color);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.search-box .search-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border-radius: 40rpx;
|
||||
flex: 1;
|
||||
background-color: #f5f5f5
|
||||
}
|
||||
|
||||
.search-box .search-content input {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 20rpx 0 40rpx;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
border-radius: 40rpx
|
||||
}
|
||||
|
||||
.search-box .search-content .iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10rpx;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
font-size: 32rpx;
|
||||
z-index: 10;
|
||||
color: #89899a;
|
||||
width: 80rpx;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.cart-box .left-wrap {
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.cart-box .cart-icon {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.cart-box .cart-icon .iconfont {
|
||||
color: var(--btn-text-color);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: var(--base-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.cart-box .cart-icon .num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-transform: translate(60%);
|
||||
transform: translate(60%);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 6rpx;
|
||||
min-width: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: var(--price-color);
|
||||
border: 2rpx solid #fff
|
||||
}
|
||||
|
||||
.cart-box .price {
|
||||
margin-left: 30rpx
|
||||
}
|
||||
|
||||
.cart-box .price .title {
|
||||
color: #333
|
||||
}
|
||||
|
||||
.cart-box .price .money,
|
||||
.cart-box .price .unit {
|
||||
font-weight: 700;
|
||||
color: var(--price-color)
|
||||
}
|
||||
|
||||
.cart-box .settlement-btn {
|
||||
margin: 0 0 0 20rpx;
|
||||
width: 200rpx;
|
||||
font-weight: 700;
|
||||
border-radius: 50rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx
|
||||
}
|
||||
|
||||
.cart-point {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
transition: all .05s
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.category-empty image {
|
||||
width: 380rpx
|
||||
}
|
||||
|
||||
.category-empty .tips {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: 50rpx
|
||||
}
|
||||
|
||||
.end-tips {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 20rpx 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.category-template-4 .search-box .search-content input {
|
||||
background-color: #f1f1f1
|
||||
}
|
||||
|
||||
.category-template-4 .cart-box {
|
||||
position: relative;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.category-template-4 .template-four {
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 80rpx;
|
||||
padding-bottom: 10rpx;
|
||||
display: flex;
|
||||
height: 172rpx;
|
||||
align-items: baseline;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 4rpx hsla(0, 0%, 48.2%, .1)
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .title {
|
||||
line-height: 1;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-content: baseline;
|
||||
padding: 20rpx;
|
||||
white-space: nowrap;
|
||||
height: 380rpx;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .uni-scroll-view-content {
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-content: baseline
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rpx 0;
|
||||
color: #666;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
width: calc((100% - 64rpx) / 5)
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item:nth-child(5n + 5) {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item .image-warp {
|
||||
margin-bottom: 6rpx;
|
||||
padding: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 42rpx;
|
||||
border: 4rpx solid transparent
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item image {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 32rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item .text {
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .template-four-scroll .item.selected .text {
|
||||
background-color: var(--base-color);
|
||||
color: var(--btn-text-color)
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .pack-up {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
height: 74rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 2rpx solid #f2f2f2
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .template-four-popup .pack-up .iconfont {
|
||||
font-size: 40rpx;
|
||||
margin-left: -4rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item-all {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 72rpx;
|
||||
line-height: 1;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item-all .category-item-all-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item-all .text {
|
||||
-webkit-writing-mode: tb-rl;
|
||||
writing-mode: tb-rl;
|
||||
margin-bottom: 6rpx;
|
||||
letter-spacing: 4rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item-all .img {
|
||||
width: 20rpx;
|
||||
height: 20rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item-all::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 10rpx;
|
||||
top: 20%;
|
||||
bottom: 20%
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .uni-scroll-view-content {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 130rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
padding: 4rpx 0
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item:last-of-type {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item .image-warp {
|
||||
margin-bottom: 6rpx;
|
||||
padding: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 42rpx;
|
||||
border: 4rpx solid transparent
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item image {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 32rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .category-item .text {
|
||||
font-size: 24rpx
|
||||
}
|
||||
|
||||
.category-template-4 .template-four .select .text {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
|
||||
margin-top: 30rpx
|
||||
}
|
||||
|
||||
.category-template-4 .tree-wrap .category-item.select::before {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx
|
||||
}
|
||||
Reference in New Issue
Block a user