.page {
  --height: 44px; /* 4*2+32 */
  --right: 97px; /* 10+87 */
  --navBarExtendHeight: 4px;
  box-sizing: border-box;
}
.page-group{
  
  background-color: rgba(00, 00, 00, 1);
  width: 100%;
  
  position: absolute;
  top: 50rpx;
  left: 0;
  z-index: 23;
  
}
.group{
  
  background-color: rgba(77, 158, 233, 1);
  width: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  
}
 .filter {
    background: #4d9ee986;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 899;
    width: 100%;
    height: calc(var(--height) + var(--navBarExtendHeight));
    backdrop-filter: blur(40rpx) ; 
    overflow: hidden;
}
.filter .ios {
  --height: 90px;
  box-sizing: border-box; /* 8*2+32 */
}
.filter .android {
  --height: 48px;
  box-sizing: border-box; /* 8*2+32 */
}
.filter .devtools {
  --height: 42px; 
  box-sizing: border-box;/* 5*2+32 */
}

.navbar {
 
 position:relative;
 opacity: 1;
 
}

.navbar .android {
  --height: 48px;
  box-sizing: border-box; /* 8*2+32 */
}
.navbar .devtools {
  --height: 42px; 
  box-sizing: border-box;/* 5*2+32 */
}
.navbar-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  height: var(--height);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: 100%;
  padding-bottom: var(--navBarExtendHeight);
  box-sizing: border-box;
}
.navbar-inner .navbar-left {
  position: relative;
  width: var(--right);
  height: 32px;
  /*  padding-left: 10px; */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.navbar-buttons {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 15px;
  border: 1rpx solid rgba(204, 204, 204, 0.6);
  position: relative;
  box-sizing: border-box;
}
.navbar-buttons.android {
  border: 1rpx solid rgba(234, 234, 234, 0.6);
  box-sizing: border-box;
}
.navbar-buttons::after {
  position: absolute;
  content: '';
  width: 1rpx;
  height: 18.4px;
  background: rgba(204, 204, 204, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.navbar-buttons.android::after {
  background: rgba(234, 234, 234, 0.6);
}
.navbar-button {
  width: 50%;
  height: 100%;
  display: flex;
  font-size: 12px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 2em;
}

.navbar-inner .navbar-left .navbar-btn_goback:active,
.navbar-inner .navbar-left .navbar-btn_gohome:active {
  opacity: 1;
}
.navbar-inner .navbar-center {
  font-size: 34rpx;
  line-height: 34rpx;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20rpx;
}
.navbar-inner .navbar-center {
  margin-top: -2px;
}
.navbar-inner .navbar-loading {
  font-size: 0;
}
.navbar-inner .navbar-loading .navbar-loading {
  margin-left: 0;
}
.navbar-inner .navbar-right {
  margin-right: 10px;
}
.navbar-placeholder {
  height: var(--height);
  background: #f8f8f8;
  position: relative;
  z-index: 50;
}

.navbar-search {
  width: 520rpx;
  display: flex;
  align-content: center;
  align-items: center;
  height: 60rpx;
  border-radius: 30rpx;
  position: relative;
  background: #f6f6f6;
}

.navbar-search-input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  color: #999;
  font-size: 15px;
  line-height: 15px;
}
.navbar-inner .navbar-left .navbar-btn_goback {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
}
.navbar-inner .navbar-left .navbar-btn_goback.white {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.navbar-inner .navbar-left .navbar-btn_gohome {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  background-size: 22px 22px;
}
.navbar-inner .navbar-left .navbar-btn_gohome.white {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  background-size: 22px 22px;
}
.navbar-search-icon {
  position: absolute;
  left: 20rpx;
  margin-left: rpx;
  margin-right: 12rpx;
  width: 28px;

  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-img-icon {
  position: absolute;
  left: 20rpx;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  filter: drop-shadow(0 0rpx 5rpx rgba(0,0,0,0.3));
  align-items: center;
  justify-content: center;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOXRSTlMADAMGvy4ioAj0MujU0IzemoNOPigZ7+O4tKqVY1VFQjbaxXZaFfr3rkvsyqSQe3FoOh0SDtZuEH8l89QcAAADU0lEQVRYw7WX55LqMAyFj9MIJZTQQ91AqLu0pfn9X+wOkCIbJ8DO3O8XIJBlSUcKSEGz3E21uz5VKqd1t7pxGzo+QK9fjSIXWPm1kY33aO6MGVcw88+Hd36++eKpVK6vXGj9Es/ka5eZDHPBX9ItIJVpm79BsZ8W/pW/SVlX1q7K3ybH8ISd4x/gPXnQqvwjvuVb1PiHlKX8848RatEocgWtktH1vK5xyiutBZKALn+m0zeP2t36aw7KDn/CSMTVV1iXGigX9/mQLUKCypPwakzRpye5JSNlXblsGUCFtVBXotmWf1+HGrsnTRkLN85cJL9EKlK7be5u18rA1DCfU0q3VNVnUgAmMqjPOeUWbFkeW0dkIWquB+i+LFXg/RAchkaLvq/6uSYyYUJPzseYite38YoOp+wEHc+2eE1XLJmYFA8xb2ZxIUbUGVoBY0FjXB8VfqFm3OIEH47Uxo7jVFbzGc+XegUo2QmthC9h7/T6gySk1fb1JSpok9MntxJuibkGysUO1UcObRMH/iPkCScMaAeY0SQeUAfxMDGa4fd6JXJFkkrTQoRHruBErxLz77cqBFbXEVHIJ0k04gGXMKRqiWjUVXn0EZ7WauDO0Tro+g9Z5omKaFX387iRamEo2uOY4XjvfvOEKiKWDboJo8B/IjFV7v6boyMQkFbgQ0QMTNUq3MEM81HsMWDcfPjftuIDYtwRCMtQfnvo66gLL0AsgGG12nFKxlYjGpgKipjHQ7EcCQkIdgFCmgXNPmogsH4gOIhTNIqmiZcrrawkzyNIDF1ExM14+8h2lDtbG8hitKcHRITVP13k5jeSqH+nDCKTRWx150RsB/pwQMKsm9IV2rzKwpdF2n3CWPTtpHeH4vn5+9ZngLVpiUU+tIV1F2HRHRlXa73oRF8vxik/09EeZ98U67CfcYlJbNMNOtbCi2lmAEogP8WvSZLNFjVYD6/HzI3C83sQ+tTkjNJmKeUMgbK4r1T8SHtZRCdDwNNeO1jYkGDe42a5mjeGEvqA1FXsLXaLoeUiFY+cf4ECvZz1dEFr3WNQ089nOChMwpZfnZHKaMOQxrJwvLeSsUcGmp7+b9a+DeD2hOFvmEPo5dWPhT+iu5Y2npj4M7YFranhP/APIKuEh5ZCRwQAAAAASUVORK5CYII=');


  background-repeat: no-repeat;
  background-size: contain;
}
.navbar-img-plus {
  position: absolute;
  margin-top: 14rpx;
  left: 92rpx;
  width: 168rpx;
  height: 32rpx;
  display: flex;
  filter: drop-shadow(0 0rpx 5rpx rgba(0,0,0,0.3));
  align-items: center;
  justify-content: center;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVMAAABBCAMAAABb/LdiAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAgEC/7yAQYN+fj89wMFCvp7wr3QAABlFJREFUeNrcmdly2zAMRQHupEQJ//+17ai1bxOKNhe1UXqeMhkHEo8vwSXUiAae+kj4q9elM30f9AMaJguw1MUmB0w15IGiNjwfRD1AkF/QJCKfClk+UNTMCqWRunDmcqda5lFXO3VyEKiZfTimUb6DU8s1VKNTWuTAUytmNKZKvoVTJTW41SkjqJZfoj4/ctEv8MXMD3/PaeAayXCNeLXTooTHjxUY3wFof4Ek806zV6dONdWI9Rmo3sz9ZwZi39zHXDauzakedKpkzqndWBsRbnWKFu77nJZ9RXWuUVhzuM2pDDpdxp06xXuQg06nK4r9Q6fYG5nnQ3TRdzAceF/VSyx9gGXMaV7jIqDPqZcDk69zKn2QOn3vj79OY4u+Nf1OrU9aQLdTfP/G3trpIs/224OWPqfM2sgZvt1pRoXF3dipg5cevDQ7rWN2VpVjhK5NDUi9r9NtKKbOzDrVyVs6gQVO1QM+WORPgtaJn2zqJ9evUSUtTtNQTKM0Oc2rnBDiWh8UPz4j3ejtJk7DSEyV1J3C526kYCniWcupZSM9REt0D6dWfpGoh6x+s5w7VaylRLNyVFKf+36RRgI7ors49biQGkEX9d2WtJyQMI42pwcqSgPHVcR9nEbsTS9w6tZl9k4TTg8aWkBE6RGnGYeaqlOrHrgGpwExnXWKwmAZdwp8kCqGLdGU0xVTqeo04YK5wSm43KnZvaUZp2CTCsERTTrFtlBXnQacNb/QaUgbXm/aaZIaKxGwQ/2UobDi1CKmX+Z0X9GarnC6SRWTp++lEFRVcboipo1O+R2q3SkCOuu0eib1mYOAZdopgsoVpztubhqdyju42aldbW1bErmCeutUCzrKr/oqQjOX49q6nCKouuIUj/oCpyXSVx1OyxiZqAge/FNQLsfV5xRPOHeKK5H/xWl+7OsdfcRywA3VjFMENZ86TSjb6lSdYm7i1IXj6GmLyugBadIpgrqWTosrkZF1H09BZ67i361iDMb6aRQTM52BHqDmnCKo+5lTi6qDTsuldqN/Ccsc5bhwtFw+/+etuGE8c7oiplNOtTzZ6SXfwWm1ZhFUe+J0R9EZp756+gNZT+Nv4/TxEV86dYjpjFNnGu6T1JVjB/5HOWe63DYMA+HyPqzr/Z+202Sma2tFhUA1jOrsX4mJ+ZkGF+DhoNUoNFkbhEzR5UJMaTuokulK3R7A9Eop6qeL+aPETK35UPw3pstz5vdTmF65HsWKmW1U+28Xq9CkZgos/xXTSpW0Q1kdF27b3IAb3oapJRs1lCm+Ufc+4xTLHT5+A9OMuPM2TA3ZKAVTmNcqbDs/LbSSKBVqKd6KaQDSKh9rHECcsG3drpC9FVNHm7zGMvXvx3TaNir1jmS6fHVaw+OFE80ypghVEzMNyKRVTKMnGzWWacFi2kh/mvCAx2lGVzRMVzIyg5l6xJ2RTOvWrPXhoVcxXSiBGsx0QdwZyvSBaZmYwooEBdOYqQ6tZBpWrL9L2q6IO0OZbifrUSCeFEwrnZHUMY2Gzk/0tY0Y20OZWlSMmCkm7ipnaqkOrWHKW8ay7WYKxz6QKaBNR0zh2Z2cKe3BUzG1biOtYf/SvepSKwLm6T4UMVNDv1YF01AaOxq7mVrTEB8ZbSvImGaUjA6ZJjQTMZ2pDi1mikDKyraTqRmfR0XMQUdMYdsnIVMHGyVnyoGU5cJdmS4owx0yxW5yGdOJEigZUw6kvuwZ19jBNDloUG5qQAzjFikAqGcR0+BRh1Yw5UDqTeSDI97cco5y8OSHCQsibsRTLBrxuehPwaNHOVMOpHmKx6M3pxsy9Ug9P7SwTa9oZzvXLReKRCKmKRM4aHcc52GHMz0JHAn2s3Luk/YzuOlnGj3q0ELxUHTIa48NlgOOMUzPCMApzbx8E/bm3fUzrbBRYsX6au+5rxwb1nAnpp8dyDxdr5S3+957e0D+vA7dAauE9ouZqI5i+gUB92p3Zk//AoyC+HMWwd0d7Eh95Tf4ZRira5nq9UwrLqWxHudll3Y55U4c+yDzdK7kyFjxgFLlpqwkmGu5iM+1ucKcr2ca3MtUH+XzWU40Yq6Tk91WmMD0rF7vrmbanJoefYOCTYCz38+0/HXzYOpLaCzr/JJcjynceD/Rg26FZgXJXKgk6n16/mzT3KYUfgMiLs6L5j6d2gAAAABJRU5ErkJggg==');
  overflow: visible;
  background-repeat: no-repeat;
  background-size: contain;
}

.navbar-img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  border-radius: 16px;
  position: relative;
  
}