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; } /* ================== 开关 ==================== */ 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; } radio.radio[checked]::after, radio.radio .uni-radio-input-checked::after { content: ""; background-color: transparent; display: block; position: absolute; width: 8px; height: 8px; z-index: 999; top: 0upx; left: 0upx; right: 0; bottom: 0; margin: auto; border-radius: 200upx; /* #ifndef MP */ border: 7px solid #ffffff !important; /* #endif */ /* #ifdef MP */ border: 8px solid #ffffff !important; /* #endif */ } .switch-sex::after { content: "\e71c"; } .switch-sex::before { content: "\e71a"; } .switch-sex .wx-switch-input, .switch-sex .uni-switch-input { background: #e54d42 !important; border-color: #e54d42 !important; } .switch-sex[checked] .wx-switch-input, .switch-sex.checked .uni-switch-input { background: #0081ff !important; border-color: #0081ff !important; } switch.red[checked] .wx-switch-input.wx-switch-input-checked, checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input, switch.red.checked .uni-switch-input.uni-switch-input-checked, checkbox.red.checked .uni-checkbox-input, radio.red.checked .uni-radio-input { background-color: #e54d42 !important; border-color: #e54d42 !important; color: #ffffff !important; } switch.orange[checked] .wx-switch-input, checkbox.orange[checked] .wx-checkbox-input, radio.orange[checked] .wx-radio-input, switch.orange.checked .uni-switch-input, checkbox.orange.checked .uni-checkbox-input, radio.orange.checked .uni-radio-input { background-color: #f37b1d !important; border-color: #f37b1d !important; color: #ffffff !important; } switch.yellow[checked] .wx-switch-input, checkbox.yellow[checked] .wx-checkbox-input, radio.yellow[checked] .wx-radio-input, switch.yellow.checked .uni-switch-input, checkbox.yellow.checked .uni-checkbox-input, radio.yellow.checked .uni-radio-input { background-color: #fbbd08 !important; border-color: #fbbd08 !important; color: #333333 !important; } switch.olive[checked] .wx-switch-input, checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input, switch.olive.checked .uni-switch-input, checkbox.olive.checked .uni-checkbox-input, radio.olive.checked .uni-radio-input { background-color: #8dc63f !important; border-color: #8dc63f !important; color: #ffffff !important; } switch.green[checked] .wx-switch-input, switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input, radio[checked] .wx-radio-input, switch.green.checked .uni-switch-input, switch.checked .uni-switch-input, checkbox.green.checked .uni-checkbox-input, checkbox.checked .uni-checkbox-input, radio.green.checked .uni-radio-input, radio.checked .uni-radio-input { background-color: #39b54a !important; border-color: #39b54a !important; color: #ffffff !important; border-color: #39B54A !important; } switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input, switch.cyan.checked .uni-switch-input, checkbox.cyan.checked .uni-checkbox-input, radio.cyan.checked .uni-radio-input { background-color: #1cbbb4 !important; border-color: #1cbbb4 !important; color: #ffffff !important; } switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input, switch.blue.checked .uni-switch-input, checkbox.blue.checked .uni-checkbox-input, radio.blue.checked .uni-radio-input { background-color: #0081ff !important; border-color: #0081ff !important; color: #ffffff !important; } switch.purple[checked] .wx-switch-input, checkbox.purple[checked] .wx-checkbox-input, radio.purple[checked] .wx-radio-input, switch.purple.checked .uni-switch-input, checkbox.purple.checked .uni-checkbox-input, radio.purple.checked .uni-radio-input { background-color: #6739b6 !important; border-color: #6739b6 !important; color: #ffffff !important; } switch.mauve[checked] .wx-switch-input, checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input, switch.mauve.checked .uni-switch-input, checkbox.mauve.checked .uni-checkbox-input, radio.mauve.checked .uni-radio-input { background-color: #9c26b0 !important; border-color: #9c26b0 !important; color: #ffffff !important; } switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input, switch.pink.checked .uni-switch-input, checkbox.pink.checked .uni-checkbox-input, radio.pink.checked .uni-radio-input { background-color: #e03997 !important; border-color: #e03997 !important; color: #ffffff !important; } switch.brown[checked] .wx-switch-input, checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input, switch.brown.checked .uni-switch-input, checkbox.brown.checked .uni-checkbox-input, radio.brown.checked .uni-radio-input { background-color: #a5673f !important; border-color: #a5673f !important; color: #ffffff !important; } switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input, switch.grey.checked .uni-switch-input, checkbox.grey.checked .uni-checkbox-input, radio.grey.checked .uni-radio-input { background-color: #8799a3 !important; border-color: #8799a3 !important; color: #ffffff !important; } switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input, switch.gray.checked .uni-switch-input, checkbox.gray.checked .uni-checkbox-input, radio.gray.checked .uni-radio-input { background-color: #f0f0f0 !important; border-color: #f0f0f0 !important; color: #333333 !important; } switch.black[checked] .wx-switch-input, checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input, switch.black.checked .uni-switch-input, checkbox.black.checked .uni-checkbox-input, radio.black.checked .uni-radio-input { background-color: #333333 !important; border-color: #333333 !important; color: #ffffff !important; } switch.white[checked] .wx-switch-input, checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input, switch.white.checked .uni-switch-input, checkbox.white.checked .uni-checkbox-input, radio.white.checked .uni-radio-input { background-color: #ffffff !important; border-color: #ffffff !important; color: #333333 !important; } /* ================== 布局 ==================== */ /* -- flex弹性布局 -- */ .flex { display: flex; } .basis-xs { flex-basis: 20%; } .basis-sm { flex-basis: 40%; } .basis-df { flex-basis: 50%; } .basis-lg { flex-basis: 60%; } .basis-xl { flex-basis: 80%; } .flex-sub { flex: 1; } .flex-twice { flex: 2; } .flex-treble { flex: 3; } .flex-direction { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-center { align-self: flex-center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .align-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; }