/* components/navBar.wxss */
.nav-bar{
  transition-duration: .4s;
  overflow: hidden;
}
.nav-bar .title{
  font-size: 36rpx;
  font-weight: 600;
  color:#222222;
}
.nav-bar-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 34rpx;
}
.nav-bar-content .left{
  flex:1;
  display: flex;
  align-items: center;
  text-overflow: ellipsis;
  max-width: calc(100vw - 140rpx);
}
.nav-bar-content .left .btns{
  display: inline-flex;
  align-items: center;
  border-radius: 60rpx;
  vertical-align: middle;
}
.nav-bar-content .left .spliter{
  width:1.2rpx;height:36rpx;
  background-color:#D8D8D8;
}
/*单一一个返回或者加上 backTitle的时候*/
.nav-bar-content .back{
  font-size:40rpx;
}
.nav-bar-content .round{
  width:56rpx;height:56rpx;
  border:1.2px solid rgba(255, 255, 255,.6);
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-bar-content .back-title{
  font-size: 36rpx;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-bar-content .center{
  flex:1;
  text-align: center;
}
.nav-bar-content .right{flex:1;}


.nav-bar-content .back,.nav-bar-content .round .icon{
  width:1em;height:1em;
  -webkit-mask-position:0 0;
  mask-position:0 0;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100%;
  mask-size:100%;
  background-color:currentColor;
  -webkit-mask-image:var(--back-image);
  mask-image: var(--back-image); 
}
.nav-bar-content .round .icon{
  font-size: 40rpx;
  mask-image: var(--back-home);
  -webkit-mask-image: var(--back-home);
}

page{
  --back-image:url(data:image/svg+xml,%3Csvg%20t%3D%221743422723228%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2220325%22%20data-spm-anchor-id%3D%22a313x.search_index.0.i15.389b3a81Rr8Znb%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M395.21518%20513.604544l323.135538-312.373427c19.052938-18.416442%2019.052938-48.273447%200-66.660212-19.053961-18.416442-49.910737-18.416442-68.964698%200L291.75176%20480.290811c-19.052938%2018.416442-19.052938%2048.273447%200%2066.660212l357.633237%20345.688183c9.525957%209.207709%2022.01234%2013.796214%2034.497699%2013.796214%2012.485359%200%2024.971741-4.588505%2034.466999-13.82896%2019.052938-18.416442%2019.052938-48.242747%200-66.660212L395.21518%20513.604544z%22%20fill%3D%22%23272636%22%20p-id%3D%2220326%22%3E%3C/path%3E%3C/svg%3E);
  --back-home:url(data:image/svg+xml,%3Csvg%20t%3D%221743420332728%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2216725%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M946.5%20505L560.1%20118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4%200L77.5%20505c-12.3%2012.3-18.9%2028.6-18.8%2046%200.4%2035.2%2029.7%2063.3%2064.9%2063.3h42.5V940h691.8V614.3h43.4c17.1%200%2033.2-6.7%2045.3-18.8%2012.1-12.1%2018.7-28.2%2018.7-45.3%200-17-6.7-33.1-18.8-45.2zM568%20868H456V664h112v204z%20m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1%200-40%2017.9-40%2040v228H238.1V542.3h-96l370-369.7%2023.1%2023.1L882%20542.3h-96.1z%22%20p-id%3D%2216726%22%3E%3C/path%3E%3C/svg%3E)
}