83 lines
3.3 KiB
Plaintext
83 lines
3.3 KiB
Plaintext
/* 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)
|
|
} |