/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { position: fixed; width: 100vw; top: 0; z-index: 300; } .style1{ top: 50%!important; transform:translateY(-50%)!important; } .style2{display:block;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;} .nav-bottom{ position: fixed; width: 100%; height: 5px; color: #000; z-index: 300; } /* 标题要居中 */ .nav-title { position: absolute; text-align: center; max-width: 400px; /* overflow: hidden; */ text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; color: #fff; font-size: 32px; font-weight: bold; } .nav-capsule { position: absolute; display: flex; align-items: center; /*margin-left: 30px;*/ width: 180px; justify-content: space-between; height: 100%; z-index: 4; } .nav-buildStyle { display: flex; align-items: center; justify-content: space-between; height: 100%; background-color: initial!important; } .nav-buildCityStyle { display: flex; align-items: center; justify-content: space-between; height: 100%; /*background-color: #2ab4ff;*/ } .back-pre { width: 24px; height: 24px; border-top: 4px solid #fff; border-left: 4px solid #fff; transform: rotate(-45deg); margin-left: 30px; } .nav-padding { width: 100%; background-color: #000; position: relative; } .icon_xiala{ width: 16px; height: 10px; position: absolute; right: 0px; top: 50%; transform:translateY(-50%); } .icon-gengduo1{ transform: rotate(90deg); font-size: 20px; color: #fff; display: inline-block; } .icon-weizhibai1{ font-size: 26px; } .noticeBtnContainer{ position: absolute; left: 70px; } .noticeBtn{ width: 140px; height:60px; background:rgba(255,255,255,0.3); border-radius:30px; } .justContentCenter{ display:flex; justify-content:center; align-items:center; align-content: center; } .adver-name{ font-weight: 400; font-size: 30px; text-align: center; color: #212121; } .adver-head{ font-size: 0px; margin-right: 20px; position: relative; } .head-img{ width: 50px; height: 50px; border-radius: 50%; } .adver-online{ position: absolute; width: 32px; height: 32px; right: -5px; bottom: -2px; box-sizing: border-box; background: #75cf4a; border: 4px solid #fff; border-radius: 50%; } .adver-tag{ width: 120px; height: 36px; border-radius: 18px; background: #3e87f7; font-weight: 600; font-size: 22px; color: #fff; box-sizing: border-box; margin-left: 20px; justify-content: center; } .adver-status{ font-weight: 400; font-size: 28px; letter-spacing: 0.08px; text-align: left; color: rgba(0, 0, 0, 0.3); line-height: 28px; } /* 朋友页面头部样式 */ .friend-tab{ width: 750px; height: 100%; text-align: center; border-bottom: 1px solid #ededed; box-sizing: border-box; } .tab-area{ display: flex; align-items: center; justify-content: space-between; background: transparent; width: 300px; height: 100%; margin: auto; } .tab-item{ position: relative; font-family: "Verdana"; font-size: 30px; color: rgba(22, 23, 34,0.5); height: 100%; display: flex; align-items: center; } .tabActive{ font-weight: bold; font-size: 15px; text-align: left; color: #161722; } .tabActive:after{ position: absolute; bottom: 0; content: ' '; width: 100%; height: 4px; background-color: #161722; left: 0; }