page{ background-color: #f6f6f6; } .main{ background: url(https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png) #f6f6f6; background-repeat: no-repeat; background-size: 100%; .head{ position: fixed; z-index: 100; width: 100%; top: 0; left: 0; padding-bottom: 10px; display: flex; align-items: center; .head_cont{ position: relative; .head_back{ display: flex; align-items: center; background: rgba(255,255,255,.6); border: 1rpx solid rgba(0,0,0,.1); border-radius: 50rpx; margin-left: 10px; position: absolute; z-index: 2; .head_back_img{ display: block; width: 16px; height: 16px; margin-left: 7px; } } .head_title{ position: absolute; z-index: 1; font-size: 30rpx; color: '#000000'; display: flex; align-items: center; font-weight: 500; justify-content: center; } } } .head_show{ background-color: #FFFFFF; border-bottom: 1rpx solid #f6f6f6; } .content{ .content_greetings{ margin: 38rpx 50rpx; display: flex; justify-content: space-between; .content_greetings_l{ .content_greetings_img{ width: 317rpx; height: 64rpx; display: block; margin-top: 10rpx; } .content_greetings_btn{ margin-top: 32rpx; width: 226rpx; height: 69rpx; background: #4B5CBA; box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(35,56,172,0.6), inset 0rpx -4rpx 4rpx 0rpx rgba(35,56,172,0.6), 4rpx 4rpx 20rpx 0rpx #95A6FF; border-radius: 35rpx; display: flex; align-items: center; justify-content: center; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out infinite; .content_greetings_btnimg{ width: 28rpx; height: 28rpx; margin-right: 10rpx; } .content_greetings_text{ font-size: 30rpx; color: #FFFFFF; } } } .content_greetings_r{ width: 210rpx; height: 210rpx; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out infinite; } } .content_hot{ margin: -30rpx 20rpx 20rpx 20rpx; padding: 0rpx 30rpx 30rpx 30rpx; background-color: #FFFFFF; border-radius: 16rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); position: relative; .content_hot_title{ font-size: 30rpx; font-weight: 500; color: #000; padding:30rpx 0; } .content_hot_danmu{ width: 100%; height: 200rpx; position: relative; flex: 1; overflow: hidden; .content_hot_danmu_li{ padding: 6rpx 20rpx; border-radius: 30rpx; border: 1rpx solid #D9D9D9; font-size: 28rpx; color: #707070; // display: inline-block; position: absolute; white-space: nowrap; animation: danmu-scroll linear infinite; background-color: #FFFFFF; .content_hot_danmu_liimg{ width: 28rpx; height: 28rpx; border-radius: 50rpx; margin-right: 10rpx; vertical-align: middle; display: inline-block; } .content_hot_danmu_li_text{ display: inline-block; vertical-align: middle; } } } } .content_list{ margin: 30rpx 20rpx 20rpx 20rpx; padding: 25rpx 40rpx 25rpx 40rpx; background-color: #FFFFFF; border-radius: 16rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); display: flex; align-items: center; justify-content: space-between; .content_list_img{ width: 100rpx; height: 100rpx; border-radius: 50rpx; } .content_list_script{ width: 500rpx; .content_list_title{ font-size: 28rpx; font-weight: 500; color: #333333 } .content_list_desc{ margin-top: 8rpx; color: #999999; font-size: 26rpx; } } } } } @keyframes scaleDr{ 0% { transform: scale(0.98); } 25% { transform: scale(1.05); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } } @keyframes danmu-scroll { from { transform: translateX(300%); } to { transform: translateX(-100%); } }