dm-wechat-mini/app.wxss
2025-03-05 19:45:27 +08:00

395 lines
9.3 KiB
Plaintext

page{
font-size:32rpx;
line-height: 1;
--main-font-color:#000000;
--main-bgclolor:#F5F5F5;
--main-color:#FEC400;
--main-hover-color:#fcce39;
--safe-bottom:constant(safe-area-inset-bottom);
--safe-bottom:env(safe-area-inset-bottom);
color:var(--main-font-color);
background-color:var(--main-bgclolor);
overflow: hidden;
min-height: 100vh;
box-sizing: border-box;
}
button{
border-radius: 24rpx;
box-sizing: border-box;
}
button label{
display: inline-block;
margin-left: 10rpx;
}
button .icon,button label{
vertical-align: middle;
}
button:not([size=mini]){
width:auto!important;
padding:30rpx 25rpx;
font-size: 36rpx;
}
button:not([size=mini]) .icon{
width:32rpx;height:32rpx;
}
button[type=primary]{
background-color:var(--main-color)!important;
color:var(--main-font-color)!important;
}
button[disabled]{
opacity: .7;
}
button[type=primary]:not([disabled]).button-hover{
background-color: var(--main-hover-color);
color:var(--main-font-color);
}
button[plain]{
border: 1rpx solid rgba(255, 195, 0, 0.5);
color: #FFC300;
}
button[type=default]{
color:var(--main-font-color);
font-size:32rpx;
line-height: 1;
}
button[type=default].button-hover{
color:#666;
}
button[type=primary][plain]{
border-color: var(--main-color);
color:var(--main-color);
padding:28rpx 25rpx;
}
button[loading][type=primary] {
background-color:var(--main-color);
color: hsla(0,0%,100%,.6);
}
radio-group{
line-height: 34rpx;
}
radio-group radio{
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
radio-group label{
display: inline-block;
vertical-align: middle;
}
radio-group radio+label{
margin-left:10rpx;
}
radio-group label+label{
margin-left:20rpx;
}
radio{
width: 17px;
height: 17px;
position: relative;
}
radio .wx-radio-input{
border-radius: 50%;
border-color:var(--main-color);
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;left:0;
}
radio .wx-radio-input.wx-radio-input-checked{
background-color:transparent;
border-color: var(--main-color);
}
radio .wx-radio-input.wx-radio-input-checked::after{
content: '';
position: absolute;
width: 11px;
height:11px;
left:2px;top:2px;
border-radius: 50%;
background: var(--main-color);
transform: none;
-webkit-transform:none;
}
checkbox .wx-checkbox-input{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
page-container .content{
border-radius: 24rpx 24rpx 0 0;
background-color: #F5F5F5;
min-height: 200rpx;
/* padding:20rpx; */
}
.page-container{
background-color: #fff;
border-radius: 20rpx;
padding:30rpx;
margin:20rpx;
}
.page-container.shadow,.cells.shadow{
box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
}
.tags{
display: flex;
gap: 10rpx;
}
.tags .tag{
font-size:20rpx;
padding:6rpx 10rpx;
color: #888888;
border: 0.5px solid rgba(153, 153, 153, 0.5);
border-radius: 6rpx;
}
.tags .tag.yellow{
color: #FFC300;
border-color:#FFC300;
}
.spliter{
border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
}
.spliter.dashed{
border-bottom: 1rpx dashed rgba(153, 153, 153, 0.2);
}
.money,.money-promation,.money-normal,.money-disable{
font-size: 36rpx;
font-weight: 500;
}
.money::before,.money-promation::before,.money-normal::before,.money-disable::before{
content: "¥ ";
font-size: 80%;
}
.money.minus::before{
content: '- ¥';
}
.money{
color:#EB0000;
}
.money-promation{
color:#FF8400;
}
.money-yellow{
color:var(--main-color);
}
.money-blue{
color:#1A4DEB;
}
.money-promation::before{
content: "-¥ ";
}
.money-normal{
color:unset;
}
.money-disable{
color:#888888;
text-decoration: line-through;
font-size: 28rpx;
font-weight:normal;
}
.bottom-bar{
padding:24rpx;
position:fixed;
bottom:0;
left:0;right:0;
background-color: #fff;
border-top: 0.5px solid rgba(153, 153, 153, 0.2);
padding-bottom:calc(constant(safe-area-inset-bottom) + 24rpx);
padding-bottom:calc(env(safe-area-inset-bottom) + 24rpx);
}
.custom-scroll-view{
height:100vh;
display: flex;
flex-direction: column;
}
.custom-scroll-view .main{
flex:1;
overflow: auto;
}
.bottom-bar-v2{
padding:24rpx;
background-color: #fff;
border-top: 0.5px solid rgba(153, 153, 153, 0.2);
padding-bottom:calc(constant(safe-area-inset-bottom) + 24rpx);
padding-bottom:calc(env(safe-area-inset-bottom) + 24rpx);
}
.cells{
margin:20rpx;
border-radius: 24rpx;
background-color: #fff;
overflow: hidden;
}
.cells .cell{
display: flex;
align-items: center;
padding:0 40rpx;
font-size: 30rpx;
position: relative;
}
.cells .cell.cell-active{
background-color:rgba(0,0,0,.1);
}
.cells .cell::after{
content: '';
border-bottom: 1.2rpx solid rgba(153, 153, 153, 0.1);
position: absolute;
bottom:0;
left:40rpx;
right:40rpx;
}
.cells .cell:last-child::after,.cells .cell.no-border::after{
border:0;
}
.cells .cell-hd{
margin-right:20rpx;
}
.cells .cell-hd.not-empty::before{
content: '*';
color: #EB0000
}
.cells .cell-hd .icon{
width:40rpx;height:40rpx;
vertical-align: middle;
}
.cells .cell-bd{
flex:1;
display: flex;
align-items: center;
position:relative;
min-height: 116rpx;
}
.cells .cell-bd .error{
color:red;
position: absolute;
left:0;bottom:10rpx;
font-size: 24rpx;
}
.cells .cell-bd input{
height:100rpx;
width:100%;
}
.cells picker{flex:1}
.cells .cell-ft{
display: flex;
align-items: center;
}
.cells .cell-ft,.right-arrow{
position: relative;
color:#999;
}
.cells.cells-access .cell-ft,.right-arrow{
padding-right: 40rpx;
}
.cells.cells-access .cell-ft::after,.cells .cell.cell-access .cell-ft::after,.right-arrow::after{
content:" ";
width:24rpx;height:48rpx;
-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;
color:var(--weui-FG-2);
-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);position:absolute;top:50%;right:0;margin-top:-24rpx
}
.tab-bar{
display: flex;
justify-content: space-between;
background-color: #fff;
font-size: 34rpx;
}
.tab-bar .item-container{
flex:1;
text-align: center;
}
.tab-bar .item{
position: relative;
padding:40rpx 0;
color: #555555;
transition-duration: .4s;
display: inline-block;
}
.tab-bar .item::before{
opacity: 0;
content: "";
height:8rpx;
width:100%;
position: absolute;
bottom:0;
background-color:var(--main-color);
transition-duration: .4s;
}
.tab-bar .current .item{
color: var(--main-font-color);
font-weight: 500;
}
.tab-bar .current .item::before{
opacity: 1;
}
navigator button{
vertical-align: middle;
}
.list-empty{
text-align: center;
padding:60rpx 0 30rpx 0;
}
.list-empty .icon{
width:132rpx;height:132rpx;
}
.list-empty .title{
font-size: 30rpx;
font-weight: 500;
}
.list-empty .sub-title{
font-size: 26rpx;
color: #A1A1A1;
margin-top:24rpx;
}
.scroll-view-dispatch{
height:100rpx;
}
.page-dispatch{
height:40rpx;
width:100%;
}
.navigator-hover{
background-color: transparent;
opacity: 1;
}
list-view{
display: block;
}
.weui-loading{
font-size:16px;width:1em;height:1em;display:inline-block;vertical-align:middle;
background:transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
background-size:100%
}