zd_wechatApp/static/scss/colorui.css

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;
}