59 lines
1.5 KiB
SCSS
59 lines
1.5 KiB
SCSS
@use '@/assets/bundle.scss';
|
|
|
|
// 顶部二级菜单
|
|
.top-cats {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
// 遮罩
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background: linear-gradient(to left, white, rgba(white, 0));
|
|
right: 15%;
|
|
width: 80rpx;
|
|
height: 100%;
|
|
}
|
|
.scroll-x {
|
|
// white-space: nowrap;
|
|
width: 85%;
|
|
// background: red;
|
|
|
|
.scroll-area {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.scroll-item {
|
|
// display: inline-block;
|
|
flex: none;
|
|
font-size: 28rpx;
|
|
padding: 20rpx;
|
|
}
|
|
.scroll-item-placeholder {
|
|
flex: none;
|
|
width: 80rpx;
|
|
height: 50rpx;
|
|
}
|
|
.cat-active {
|
|
color: #4EB331;
|
|
border: 1rpx solid #4EB331;
|
|
padding: 4rpx 10rpx;
|
|
background: rgb(234, 240, 227);
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.btn-up-down {
|
|
width: 15%;
|
|
height: 79rpx;
|
|
// @include svg_icon(arraw-up, 9a9a9a);
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANRJREFUWEft1MENwjAMBVB7AlZhhLJJOcRnRuGcHOgmdARWYQKjSI0UFUKSn0Mvzr35L1+1mQ4+fHA+GcAasAasgaEGvPdzXGQisqALDQZs4Y8t+IoiIEAKV9V3BDDziYggRDcgD2fmKQJUdUURXYB9uIi8IsB7f0YRzYBSePr5UEQToBY+gqgCWsNRxF9AbziCKALQ8F7ET8BoeA/iCxBCmFT1GZdMnPM0auiqzaeDmS/OuTW/q9TAnYiW0fC8CSKaReS2f0h1CtCXt35nAGvAGrAGPjJjsyGUY8cAAAAAAElFTkSuQmCC");
|
|
background-size: 20rpx;
|
|
@extend %bg-no-repeat-center;
|
|
transform: rotateX(180deg);
|
|
transition: all .5s;
|
|
}
|
|
.arrow-active {
|
|
transform: rotateX(0);
|
|
}
|
|
} |