/**index.wxss**/ .page-wrap { height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx); height: calc(100vh - env(safe-area-inset-bottom) - 100rpx); } .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; } .swiper-wrap { margin-top: 20rpx; } .t-image__swiper { width: 100%; height: 300rpx; border-radius: 10rpx; } .row-class { background-color: yellow; } .home-swiper { height: 481rpx; } .t-image__swiper { height: 481rpx; } .cateimage { height: 50rpx; } .timg1 { width: 516rpx; height: 193rpx; } .timg2 { width: 217rpx; height: 291rpx; } .timgactive { width: 672rpx; height: 234rpx; } .timgcasourel { width: 750rpx; height: 1466rpx; transform: scale(1.3); transform-origin: center 74%; transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1); } .movefloatbtn { position: absolute; bottom: 16%; left: 50%; width: 275rpx; height: 62rpx; background-color: transparent; background-size: 100% 100%; border: 0; transform: translateX(-50%); image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ } .movecenter { position: absolute; bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0); .movebtn { background: rgba(0, 0, 0, 0); border: 0; color: #fff; } .t-icon-base { animation: movement 1s infinite; } @keyframes movement { 0% { transform: translate3d(0, -30%, 0); } 100% { transform: translate3d(0, 30%, 0); } } } .zoom { .movefloatbtn { top: 824rpx; } .movecenter { .t-icon-base { animation: movement2 0.4s forwards; } @keyframes movement2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } } .timgcasourel { object-fit: scale-down; transform: scale(1); } }