page{ height: 100%; width: 100%; } .wraper{ height: 100%; position: fixed; z-index: 999; width: 100%; top: 0; left: 0; background: #fff; } .main_title{ background-color: #fff; width: 100%; height: 128rpx; position: fixed; top: 0; z-index: 9; } .main_title text{ line-height: 96rpx; font-size: 64rpx; font-weight: 400; margin-left: 32rpx; } .main_title_hide{ top: -128rpx; transition: top 0.5s; } .main_title_show{ top: 0; transition: top 0.5s; } .search,.search_input { width: 100%; height: 88rpx; background-color: #fff; display: flex; align-items: center; top: 0; left: 0; } .search { justify-content: space-around; } .search_input { justify-content: space-around; } .search view, .search_input view { height: 64rpx; line-height: 64rpx; background-color: #F5F5F5; border-radius: 16rpx; text-align: center; display: flex; align-items: center; margin: 0 32rpx; } .search view { width: 100%; justify-content: center; align-items: center; } .search image { display: block; width: 6%; height: 53%; margin-right: 10rpx; } .search_input view { padding-left: 24rpx; text-align: left; flex: 1; margin: 0 28rpx 0 32rpx; } .search icon,.search_input icon { display: inline-block; margin: 8rpx 12rpx 0; font-size: 24rpx; } .search text { font-size: 30rpx; color: #9B9B9B; } .search_input text { display: inline-block; height: 60rpx; line-height: 60rpx; font-size: 30rpx; color: #0873DE; margin-right: 32rpx; } .search_input input { font-size: 28rpx; width: 90%; } .scrollWraper{ flex: 1; position: relative; } /*.contain { margin-top: 40px; }*/ .chat,.chat_groups,.chat_lists{ position: relative; width: 100%; height: 90rpx; display: flex; align-items: center; } .chat,.chat_groups { border-bottom: 0.5px solid #E5E5E5; } .chat image { width: 6%; height: 50%; margin:0 26rpx 0 20rpx; } .chat .em-msgNum { position: absolute; right: 20rpx; height: 34rpx; border-radius: 20rpx; min-width: 30rpx; background: #f04134; color: #fff; line-height: 40rpx; text-align: center; padding: 0px 4rpx 4rpx 4rpx; } .chat_groups image { width: 8%; height: 54%; margin:0 20rpx 0 16rpx; } .chat_lists image { width: 12%; height: 100%; margin-right: 4rpx; } .chat text,.chat_groups text,.chat_lists text { font-size: 28rpx; } .numbers { width: 100%; height: 100rpx; } .nbr_header { height: 2rpx; background-color: #D4D4D4; line-height: 40rpx; padding-left: 32rpx; } .nbr_body { width: 70%; height: 100rpx; display: inline-block; font-size: 32rpx; line-height: 100rpx; margin-right: 0; float: left; } .mask { background-color: black; opacity: 0.4; position: absolute; top: 40rpx; left: 0; right: 0; bottom: 0; } .delete { width: 60rpx; height: 70rpx; float: right; margin-top: 12rpx; } .delete image { width: 32rpx; height: 4rpx; } .info { margin-top: 10rpx; width: 12%; height: 80rpx; display: inline-block; float: left; } .info image { width: 68%; height: 70%; display: inline-block; margin: 12rpx auto auto 12rpx; } .otherItem{ height: 108rpx; display: flex; align-items: center; border-bottom: 0.5px solid #E5E5E5; margin:0 32rpx; position: relative; } .otherItem image{ width: 72rpx; height: 72rpx; margin: 0 22rpx 0 0; } .otherItem text{ font-size: 34rpx; color: #000; } .otherItem .line{ position: absolute; bottom: 0; width: 100%; height:.5px; } .content{ box-sizing: border-box; } .location{ width: 100%; } .location_top{ height: 76rpx; line-height: 76rpx; background: #f4f4f4; color: #606660; font-size: 28rpx; padding: 0 20rpx; } .location_bottom{ height: 140rpx; line-height: 140rpx; color: #d91f16; font-size: 28rpx; border-top: 0.5px #E5E5E5 solid; border-bottom: 0.5px #E5E5E5 solid; padding: 0 20rpx; align-items: center; display: -webkit-flex; } .address_top{ height: 80rpx; line-height: 70rpx; background: #FAFAFA; color: #9B9B9B; font-size: 17px; padding: 10rpx 32rpx; } .address_bottom{ height: 108rpx; line-height: 108rpx; background: #fff; color: #000000; font-size: 34rpx; border-bottom: 0.5px #E5E5E5 solid; margin: 0 32rpx; display: flex; align-items: center; } .address_bottom image{ width: 72rpx; height: 72rpx; margin-right: 24rpx; } .address_bottom text{ overflow: hidden; text-overflow: ellipsis; flex: 1; } .location_img{ width: 48rpx; height: 48rpx; position: absolute; right: 20rpx; top: 125rpx; } .add_city{ width: 228rpx; height: 60rpx; line-height: 60rpx; text-align: center; border: 0.5px solid #E5E5E5; color: #000000; margin-right: 20rpx; } .add_citying{ width: 228rpx; height: 60rpx; line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07; margin-right: 20rpx; } .orientation{ white-space:normal; display: inline-block; width: 45rpx; height:50rpx; font-size: 28rpx; font-weight: bold; color: rgb(88, 87, 87); text-align: center; } .orientation_region{ padding: 10rpx 0px; width: 28rpx; font-size: 20rpx; position: fixed; top: 50%; right: 0; transform:translate(0,-50%); border-radius: 10px } .orientation_city{ height: 24rpx; width: 24rpx; line-height: 24rpx; font-size: 18rpx; color: #000; text-align: center; } .active{ color: #fff; background-color: #0873DE; border-radius: 50%; } .list-fixed{ position: fixed; width: 100%; z-index: 999; height: 56rpx; line-height: 56rpx; background: #EBEBEB; color: #999999; font-size: 28rpx; padding: 0 20rpx; top: 128rpx; } .fixed-title{ color:#2cc1d1; } .goTop{ top: 0; transition: top 0.5s; padding-bottom: 104rpx!important; } .goTopX{ top: 0rpx; transition: top 0.5s; padding-bottom: 140rpx!important; } .goback{ top: 128rpx; transition: top 0.5s; } .fixedTitleTop{ top: 0; } .tap_mask{ width: 100%; overflow: hidden; } .btnWraper{ align-items: center; justify-content: center; display: flex; flex-direction: column; } .button{ width: 80%; height: 80rpx; background: green; border-radius: 40rpx; right: 0; left: 0; color: #fff; font-size: 16px; margin: 10rpx; } .red{ background: red; }