|
@@ -636,7 +636,7 @@
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 10px 0;
|
|
|
- transition: all 0.5s;
|
|
|
+ transition: all 0.3s;
|
|
|
.rightItem {
|
|
|
width: 54px;
|
|
|
height: 54px;
|
|
@@ -670,10 +670,10 @@
|
|
|
}
|
|
|
.rightTips {
|
|
|
position: absolute;
|
|
|
- right: -500%;
|
|
|
+ right: 24px;
|
|
|
top: 50;
|
|
|
transform: translateX(-50%);
|
|
|
- background: rgba(19, 20, 21, 1);
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
border-radius: 6px;
|
|
|
width: 88px;
|
|
|
height: 34px;
|
|
@@ -683,13 +683,12 @@
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
- transition: all 0.8s;
|
|
|
+ // transition: all 0.8s;
|
|
|
z-index: 1;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
&:hover {
|
|
|
.rightTips {
|
|
|
- right: 24px;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
@@ -710,8 +709,14 @@
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
}
|
|
|
+.rightColumnZ {
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
.rightColumnHide {
|
|
|
- transform: translate(76px,-50%);
|
|
|
+ transform: translate(80px,-50%);
|
|
|
+ .rightTips {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
.rightHideIcon {
|
|
|
width: 30px;
|
|
@@ -719,13 +724,22 @@
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
- transform: translateY(60px,-50%);
|
|
|
+ transform: translate(60px,-50%);
|
|
|
z-index: 10;
|
|
|
cursor: pointer;
|
|
|
- transition: all 0.5s;
|
|
|
+ // transition: all 0.5s;
|
|
|
}
|
|
|
.rightIconShow {
|
|
|
- transform: translate(0,-50%);
|
|
|
+ animation:rightIn 0.3s ease 0.3s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+}
|
|
|
+@keyframes rightIn {
|
|
|
+ 0% {
|
|
|
+ transform: translate(60px,-50%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate(0,-50%);
|
|
|
+ }
|
|
|
}
|
|
|
.bottomColumn {
|
|
|
position: fixed;
|
|
@@ -750,7 +764,7 @@
|
|
|
top: -40px;
|
|
|
transform: translateX(-50%);
|
|
|
opacity: 0;
|
|
|
- background: rgba(19, 20, 21, 1);
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
border-radius: 6px;
|
|
|
width: 88px;
|
|
|
height: 34px;
|