|
|
@@ -46,7 +46,7 @@
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- width: 102px;
|
|
|
+ width: 95px;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(48deg, #43B2FF 0%, #159AF7 100%);
|
|
|
border: 2Px solid #fff;
|
|
|
@@ -67,8 +67,8 @@
|
|
|
|
|
|
.types {
|
|
|
position: relative;
|
|
|
- top: 2px;
|
|
|
- width: 102px;
|
|
|
+ top: 2Px;
|
|
|
+ width: 95px;
|
|
|
height: calc(100% - 4Px);
|
|
|
padding: 4px 0;
|
|
|
overflow-x: hidden;
|
|
|
@@ -84,43 +84,22 @@
|
|
|
|
|
|
.type {
|
|
|
position: relative;
|
|
|
- padding: 4px 14px;
|
|
|
+ padding: 4px 12px;
|
|
|
|
|
|
&.typeActive {
|
|
|
.typeImg {
|
|
|
- border-color: #f4b482;
|
|
|
- border-width: 3px;
|
|
|
- box-shadow: 0px 0 4px 2px #fff;
|
|
|
+ border-color: #99FFD0;
|
|
|
animation: scaleBtn 1s ease-in-out;
|
|
|
}
|
|
|
-
|
|
|
- .typeIndex {
|
|
|
- display: block;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .typeIndex {
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- right: -6px;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: rgba(184, 219, 251, 1);
|
|
|
- border: 2px solid #fff;
|
|
|
- border-radius: 2px;
|
|
|
- transform: rotate(45deg);
|
|
|
- z-index: 2;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
.typeImg {
|
|
|
- background-color: #000;
|
|
|
- border: 2px solid #fff;
|
|
|
- border-radius: 18px;
|
|
|
- height: 75px;
|
|
|
+ padding: 6px;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ border-radius: 6px;
|
|
|
+ height: 95px;
|
|
|
transition: .3s;
|
|
|
- overflow: hidden;
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.8);
|
|
|
@@ -132,22 +111,21 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
+ box-shadow: 2px 1Px 1px rgba(255, 255, 255, 1);
|
|
|
+ filter: drop-shadow(1px 6px 6px rgba(0, 0, 0, 0.5));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
flex: 1;
|
|
|
- // width: calc(100% - 98px);
|
|
|
position: relative;
|
|
|
+ padding-right: 12px;
|
|
|
height: 100%;
|
|
|
|
|
|
:global {
|
|
|
.van-search {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
padding: 6px 9px;
|
|
|
- width: calc(100% - 12px);
|
|
|
+ width: 100%;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
@@ -155,11 +133,11 @@
|
|
|
|
|
|
.musicContent {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - var(--van-search-input-height) - 12px - 1Px);
|
|
|
- margin-top: calc(var(--van-search-input-height) + 12px);
|
|
|
- padding: 6px 24px 12px 12px;
|
|
|
+ height: calc(100% - var(--van-search-input-height) - 12px - 2Px);
|
|
|
+ padding: 6px 12px 12px 12px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
+
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 0;
|
|
|
display: none;
|
|
|
@@ -174,18 +152,9 @@
|
|
|
border-radius: 9px;
|
|
|
margin-bottom: 6px;
|
|
|
background-color: #fff;
|
|
|
- padding: 5px;
|
|
|
+ padding: 4px;
|
|
|
transition: all .3s;
|
|
|
|
|
|
- // &::after {
|
|
|
- // content: '';
|
|
|
- // position: absolute;
|
|
|
- // right: -24px;
|
|
|
- // border: 10px solid transparent;
|
|
|
- // border-right-color: #fff;
|
|
|
- // opacity: 0;
|
|
|
- // }
|
|
|
-
|
|
|
&.disableNotic {
|
|
|
:global {
|
|
|
.van-notice-bar__content {
|
|
|
@@ -200,32 +169,25 @@
|
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #BFE1FF 100%);
|
|
|
transform: scale(1.05);
|
|
|
box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
|
|
|
-
|
|
|
- // &::after {
|
|
|
- // animation: displayIcon 0.1s forwards;
|
|
|
- // animation-delay: .2s;
|
|
|
- // }
|
|
|
}
|
|
|
|
|
|
.musicAvtor {
|
|
|
display: block;
|
|
|
- width: 47px;
|
|
|
- height: 47px;
|
|
|
- border-radius: 18px;
|
|
|
+ width: 8.2vw;
|
|
|
+ height: 8.2vw;
|
|
|
+ border-radius: 8Px;
|
|
|
object-fit: cover;
|
|
|
flex-shrink: 0;
|
|
|
- margin-right: 9px;
|
|
|
+ margin-right: 1vw;
|
|
|
}
|
|
|
|
|
|
.musicInfo {
|
|
|
flex: 1;
|
|
|
|
|
|
.musicName {
|
|
|
- font-size: 15px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
- line-height: 20px;
|
|
|
-
|
|
|
+ margin-bottom: 3px;
|
|
|
}
|
|
|
|
|
|
.noticeBar {
|
