|
|
@@ -2001,6 +2001,7 @@
|
|
|
.ezy-xuexi-page{
|
|
|
width: 100%;height: 100vh;background-color: #fff;display: flex;flex-direction: column;
|
|
|
.xuexi-page-body{padding:72rpx 0 100rpx;overflow-y: auto;}
|
|
|
+
|
|
|
// 切换单元
|
|
|
/* .change-dy-box{
|
|
|
width: 100%;position: relative;display: flex;margin-bottom: 12rpx;
|
|
|
@@ -2097,11 +2098,10 @@
|
|
|
.xx-item-list{
|
|
|
.xx-item-title{text-align: center;margin: 32rpx 0;font-size: 32rpx;color: #444;}
|
|
|
.item-dy-box{
|
|
|
- display: flex;align-items: center;justify-content: center;color: #fff;margin-bottom: 24rpx;
|
|
|
+ display: flex;align-items: center;justify-content: center;color: #fff;margin-bottom: 24rpx;transition: 0.3s;
|
|
|
.dy-left-box{
|
|
|
width: 174rpx;height: 127rpx;@include ezy-no-repeat-cover;font-size: 64rpx;
|
|
|
display: flex;align-items: center;box-sizing: border-box;padding:0 24rpx;
|
|
|
- transition: 0.3s;
|
|
|
background-image: url("@/static/images/xuexi/xx-ml-left.png");
|
|
|
}
|
|
|
.dy-left-box::after{
|
|
|
@@ -2109,21 +2109,55 @@
|
|
|
background-image: url("@/static/images/xuexi/xx-ml-jt.png");display: block;
|
|
|
}
|
|
|
.dy-right-box{
|
|
|
- width: 518rpx;height: 127rpx;@include ezy-no-repeat-cover;
|
|
|
+ width: 518rpx;height: 127rpx;@include ezy-no-repeat-cover;transition: 0.3s;
|
|
|
display: flex;align-items: flex-start;flex-direction: column;justify-content: center;
|
|
|
box-sizing: border-box;padding:0 24rpx;font-size: 28rpx;
|
|
|
background-image: url("@/static/images/xuexi/xx-ml-right.png");
|
|
|
+ .right-content{width: 100%;height: 90rpx;overflow: hidden;}
|
|
|
.dy-name{font-size: 34rpx;margin-bottom: 6rpx;}
|
|
|
}
|
|
|
}
|
|
|
.item-dy-box:active{
|
|
|
- transform: translateY(12rpx);
|
|
|
- // transform:scale(0.98);
|
|
|
+ // transform: translateY(12rpx);
|
|
|
+ transform:scale(0.98);
|
|
|
}
|
|
|
.item-dy-box.item-fixed{
|
|
|
position: fixed;left: 50%;transform: translate(-50%);
|
|
|
top: calc(120rpx + var(--status-bar-height));
|
|
|
}
|
|
|
+ /* 动画类 */
|
|
|
+ .item-dy-box.item-active {
|
|
|
+ animation: scalePulse 1s ease-in-out;
|
|
|
+ .right-content{
|
|
|
+ animation: opacityPulse 1s ease-in-out;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 定义放大动画 */
|
|
|
+ @keyframes scalePulse {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 定义显隐动画 */
|
|
|
+ @keyframes opacityPulse {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 90% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.xx-item-box{
|
|
|
width: 691rpx;height: 172rpx;
|
|
|
display: flex;align-items: center;justify-content: space-between;color: #4b4b4b;;
|
|
|
@@ -2153,7 +2187,12 @@
|
|
|
background-image: url("@/static/images/login/login-btn-bj.png");
|
|
|
}
|
|
|
.xx-xw-text{text-align: center;font-size: 32rpx;color: #666;margin: 32rpx auto;}
|
|
|
-
|
|
|
+ // 回到顶部
|
|
|
+ .go-top-btn{
|
|
|
+ width: 77rpx;height: 77rpx;@include ezy-no-repeat-cover;
|
|
|
+ background-image: url("@/static/images/xuexi/go-top-btn.png");
|
|
|
+ position: fixed;z-index: 9;bottom: 300rpx;right:10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 单元目录
|
tanxue