first commit
This commit is contained in:
59
src/components/goodCmp/topCats/top-cats.scss
Normal file
59
src/components/goodCmp/topCats/top-cats.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user