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_head{ display: flex; align-items: center; padding-top: 20rpx; .content_img{ width: 180rpx; height: 180rpx; margin-left: 55rpx; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out infinite; } .content_text{ font-size: 32rpx; color: #333333; font-weight: 500; margin-left: 40rpx; } } .content_menu{ display: flex; align-items: center; justify-content: space-between; margin: 20rpx 20rpx 0rpx 20rpx; background: #FFFFFF; border-radius: 16rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); .content_menu_item{ width: 25%; padding: 30rpx 0; .content_menu_item_img{ margin: 0 auto; width: 77rpx; height: 77rpx; display: block; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out i } .content_menu_item_title{ font-size: 28rpx; color: #000000; text-align: center; margin-top: 15rpx; } } } .content_help{ margin: 20rpx 20rpx 0rpx 20rpx; background: #FFFFFF; border-radius: 16rpx; padding:20rpx 20rpx 0rpx 20rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); .content_search{ display: flex; align-items: center; background-color: #F6F6F6; height: 40px; border-radius: 50rpx; font-size: 28rpx; color: #000000; justify-content: space-between; .content_search_img{ width: 6%; height: 6%; margin-right: 13rpx; display: block; margin-left: 23rpx; } .content_search_input{ width: 94%; height: 100%; font-size: 28rpx; display: flex; align-items: center; } } .content_x{ color: #000000; font-size: 28rpx; margin-top: 27rpx; font-weight: 500; } .class_scroll{ white-space: nowrap; height: 90rpx; position: relative; background-color: #FFFFFF; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; position: sticky; top: 0; z-index: 999; margin-top: 10rpx; margin-bottom: 20rpx; .class_scroll_ul{ width: 100%; overflow: hidden; height: 90rpx; .class_item{ padding: 0rpx 20rpx; height: 50rpx; display: inline-block; line-height: 50rpx; font-size: 24rpx; color: #999999; margin-top: 15rpx; background: #F6F6F6; border: 1px solid #F6F6F6; border-radius: 50rpx; margin-right: 20rpx; } .class_item_active{ background-color: #FCF0F2; border-radius: 50rpx; padding: 0rpx 20rpx; color: #FF0000; font-weight: 500; border: 1px solid #FF0000; } } } .content_list{ display: flex; align-items: center; justify-content: space-between; border-top: 1rpx solid #D9D9D9; padding: 30rpx 0; .content_l{ font-size: 28rpx; color: #333333; } .content_r{ position: relative; margin-right: 20rpx; } .content_r::after { content: ''; position: absolute; top: 50%; left: 100%; transform: translate3d(0, -50%, 0) rotate(45deg); width: 13rpx; height: 13rpx; border-top: 3rpx solid #999999; border-right: 3rpx solid #999999; } } } } .footer{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; background: #FFFFFF; font-size: 30rpx; padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-between; align-items: center; padding-top: 20rpx; padding-left: 20rpx; padding-right: 20rpx; border-top: 1rpx solid #efefef; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; .footer_tel{ width: 100rpx; .footer_telimg{ margin: 0 auto; width: 42rpx; height: 42rpx; display: block; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out i } .footer_tel_text{ color: #666666; font-size: 20rpx; text-align: center; margin-top: 5rpx; } } .footer_btn{ width: 553rpx; height: 80rpx; text-align: center; line-height: 80rpx; border-radius: 43rpx; border: 1px solid #FD3F3F; color: #FD3F3F; font-size: 28rpx; font-weight: 500; background-color: #FFFFFF; .footer_btn_text{ color: #999999; font-size: 24rpx; } } } } @keyframes scaleDr{ 0% { transform: scale(0.98); } 25% { transform: scale(1.05); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } }