2024.4.24

/* ==================
初始化
==================== */
body {
background-color: #f1f1f1;
font-size: 28upx;
color: #333333;
font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
box-sizing: border-box;
}

.round {
border-radius: 5000upx;
}

.radius {
border-radius: 6upx;
}

/* ==================
图片
==================== */

image {
max-width: 100%;
display: inline-block;
position: relative;
z-index: 0;
}

image.loading::before {
content: "";
background-color: #f5f5f5;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
}

image.loading::after {
content: "\e7f1";
font-family: "cuIcon";
position: absolute;
top: 0;
left: 0;
width: 32upx;
height: 32upx;
line-height: 32upx;
right: 0;
bottom: 0;
z-index: -1;
font-size: 32upx;
margin: auto;
color: #ccc;
-webkit-animation: cuIcon-spin 2s infinite linear;
animation: cuIcon-spin 2s infinite linear;
display: block;
}

.response {
width: 100%;
}

/* ==================
开关
==================== */

switch,
checkbox,
radio {
position: relative;
}

switch::after,
switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #ffffff !important;
top: 0%;
left: 0upx;
font-size: 26upx;
line-height: 26px;
width: 50%;
text-align: center;
pointer-events: none;
transform: scale(0, 0);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
bottom: 0;
height: 26px;
margin: auto;
}

switch::before {
content: "\e646";
right: 0;
transform: scale(1, 1);
left: auto;
}

switch[checked]::after,
switch.checked::after {
transform: scale(1, 1);
}

switch[checked]::before,
switch.checked::before {
transform: scale(0, 0);
}

/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #ffffff !important;
top: 50%;
margin-top: -8px;
right: 5px;
font-size: 32upx;
line-height: 16px;
pointer-events: none;
transform: scale(1, 1);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
}

radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
margin: 0;
width: 24px;
height: 24px;
}

checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}

/* #endif */

switch[checked]::before {
transform: scale(0, 0);
}

switch .wx-switch-input,
switch .uni-switch-input {
border: none;
padding: 0 24px;
width: 48px;
height: 26px;
margin: 0;
border-radius: 100upx;
}

switch .wx-switch-input:not([class*="bg-"]),
switch .uni-switch-input:not([class*="bg-"]) {
background: #8799a3 !important;
}

switch .wx-switch-input::after,
switch .uni-switch-input::after {
margin: auto;
width: 26px;
height: 26px;
border-radius: 100upx;
left: 0upx;
top: 0upx;
bottom: 0upx;
position: absolute;
transform: scale(0.9, 0.9);
transition: all 0.1s ease-in-out 0s;
}

switch .wx-switch-input.wx-switch-input-checked::after,
switch .uni-switch-input.uni-switch-input-checked::after {
margin: auto;
left: 22px;
box-shadow: none;
transform: scale(0.9, 0.9);
}

radio-group {
display: inline-block;
}

 

switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before,
switch.radius .uni-switch-input::after,
switch.radius .uni-switch-input,
switch.radius .uni-switch-input::before {
border-radius: 10upx;
}

switch .wx-switch-input::before,
radio.radio::before,
checkbox .wx-checkbox-input::before,
radio .wx-radio-input::before,
switch .uni-switch-input::before,
radio.radio::before,
checkbox .uni-checkbox-input::before,
radio .uni-radio-input::before {
display: none;
}