wx-open-subscribe 消息订阅（在vue里面使用）
留意wx-open-subscribe这个开放标签和里面的事件就行开放标签里面只能写普通页面，不能绑定数据，绑定了也会失效不起作用的。<template><div class="notificationSettings"><div><van-cell center title="医院信息通知"><template #right-icon>
·
留意wx-open-subscribe这个开放标签和里面的事件就行
开放标签里面只能写普通页面，不能绑定数据，绑定了也会失效不起作用的。
<template>
<div class="notificationSettings">
<div>
<van-cell center title="医院信息通知">
<template #right-icon>
<div v-if="!checked1 && !checked2">
<wx-open-subscribe
@success="success"
@error="subError"
:template="subTemplateId"
id="subscribe-btn"
>
<script type="text/wxtag-template" slot="style">
<style>
.cb-item_label .kg {
position: absolute;
color: #fff;
left: 6px;
}
.cb-item_animated-marker,
.cb-item_animated-marker *,
.cb-item_animated-marker *::before,
.cb-item_animated-marker *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_animated-marker {
position: relative;
display: block;
min-width: 200px;
width: 100%;
max-width: 280px;
--cb_text-color: #333;
--cb_bg-color: #f6f8f9;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
--cb_marker-bg-color: #fff;
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_animated-marker {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_animated-marker .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 10px 10px 20px;
cursor: pointer;
font-size: 18px;
line-height: 24px;
color: #333;
color: var(--cb_text-color);
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_animated-marker .cb-item_label-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.cb-item_animated-marker .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 30px;
height: 30px;
margin-left: 25px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_marker_short-line,
.cb-item_marker_long-line {
position: absolute;
overflow: hidden;
height: 3px;
background-color: transparent;
-webkit-transform-origin: left;
transform-origin: left;
}
.cb-item_marker_short-line {
top: 11px;
left: 6px;
width: 10px;
-webkit-transform: rotate(44.5deg);
transform: rotate(44.5deg);
}
.cb-item_marker_long-line {
top: 19px;
left: 12px;
width: 17px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cb-item_marker_short-line::before,
.cb-item_marker_long-line::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox with Animated Marker :checked State */
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label {
color: #fff;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker {
border-color: transparent;
}
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cb-item_marker_long-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
} /* Checkbox with Animated Marker :disabled State */
.cb-item_animated-marker .cb-item_input:disabled + .cb-item_label {
cursor: default;
color: #ccc;
color: var(--cb_border-color);
} /* Checkbox with Animated Marker :disabled:checked State */
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label {
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
}
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
border-color: #ccc;
border-color: var(--cb_border-color);
}
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
background-color: #ccc;
background-color: var(--cb_border-color);
} /* END Checkbox with Animated Marker */ /* Checkbox On/Off Toggler */
.cb-item_toggler,
.cb-item_toggler *,
.cb-item_toggler *::before,
.cb-item_toggler *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_toggler {
position: relative;
display: inline-block;
--cb_text-color: #333;
--cb_marker-bg-color: #fff;
--cb_marker-bg-color_checked: #05c096;
--cb_marker-bg-color_disabled: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_toggler .cb-item_label {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 50px;
width: auto;
cursor: pointer;
font-size: 18px;
line-height: 18px;
color: #333;
color: var(--cb_text-color);
background-color: transparent;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_toggler .cb-item_label {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
.cb-item_toggler .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 16px;
height: 16px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_toggler .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: toggler-unswitch 0.4s ease-out;
animation: toggler-unswitch 0.4s ease-out;
}
.cb-item_label-off,
.cb-item_label-on {
position: absolute;
top: -1px;
right: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cb-item_label-off {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.cb-item_label-on {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
} /* Checkbox On/Off Toggler :checked State */
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_marker,
.cb-item_toggler
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
background-color: #05c096;
background-color: var(--cb_marker-bg-color_checked);
}
.cb-item_toggler
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
-webkit-animation: toggler-switch 0.4s ease-out;
animation: toggler-switch 0.4s ease-out;
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-off {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-on {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
} /* Checkbox On/Off Toggler :disabled State */
.cb-item_toggler .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_toggler .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #ccc;
background-color: var(--cb_marker-bg-color_disabled);
-webkit-box-shadow: none;
box-shadow: none;
} /* Checkbox On/Off Toggler Animation */
@-webkit-keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox On/Off Toggler */ /* Checkbox Switcher Style #1 */
.cb-item_ios-style,
.cb-item_ios-style *,
.cb-item_ios-style *::before,
.cb-item_ios-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_ios-style {
position: relative;
display: inline-block;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_ios-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50px;
height: 30px;
cursor: pointer;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_ios-style .cb-item_marker {
display: block;
width: 26px;
height: 26px;
background-color: #fff;
background-color: var(--cb_bg-color);
border-radius: 50%;
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
-webkit-transform: translateX(1px);
transform: translateX(1px);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox Switcher Style #1 :checked State */
.cb-item_ios-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
}
.cb-item_ios-style .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(22px);
transform: translateX(22px);
} /* Checkbox Switcher Style #1 :disabled State */
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
background-color: #ccc;
background-color: var(--cb_border-color);
}
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
} /* Checkbox Switcher Style #1 :disabled:checked State */
.cb-item_ios-style .cb-item_input:disabled:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_ios-style
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
} /* END Checkbox Switcher Style #1 */ /* Checkbox Switcher Style #2 */
.cb-item_android-style,
.cb-item_android-style *,
.cb-item_android-style *::before,
.cb-item_android-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_android-style {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_android-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_android-style .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-animation: android-style-unswitch 0.25s linear forwards;
animation: android-style-unswitch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :checked State */
.cb-item_android-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_android-style .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-animation: android-style-switch 0.25s linear forwards;
animation: android-style-switch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :disabled State */
.cb-item_android-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_android-style
.cb-item_input:disabled
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
} /* Checkbox Switcher Style #2 Animation */
@-webkit-keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@-webkit-keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
}
@keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
} /* END Checkbox Switcher Style #2 */ /* Checkbox Switcher Style #3 */
.cb-item_bar,
.cb-item_bar *,
.cb-item_bar *::before,
.cb-item_bar *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_bar {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_bar .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 10px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_bar .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Switcher Style #3 :checked State */
.cb-item_bar .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_bar .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(20px);
transform: translateX(20px);
} /* Checkbox Switcher Style #3 :disabled State */
.cb-item_bar .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_bar .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15),
0 3px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 2px rgba(0, 0, 0, 0.15);
} /* END Checkbox Switcher Style #3 */ /* Checkbox Switcher Style #4 */
.cb-item_wave,
.cb-item_wave *,
.cb-item_wave *::before,
.cb-item_wave *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_wave {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_wave .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_wave .cb-item_marker {
position: relative;
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-transform: translateX(4px);
transform: translateX(4px);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_wave .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: wave-unswitch 0.4s ease-out;
animation: wave-unswitch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :checked State */
.cb-item_wave .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_wave .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(28px);
transform: translateX(28px);
}
.cb-item_wave .cb-item_input:checked + .cb-item_label .cb-item_marker::before {
-webkit-animation: wave-switch 0.4s ease-out;
animation: wave-switch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :disabled State */
.cb-item_wave .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
} /* Checkbox Switcher Style #4 Animation */
@-webkit-keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox Switcher Style #4 */ /* Checkbox Classic */
.cb-item_classic,
.cb-item_classic *,
.cb-item_classic *::before,
.cb-item_classic *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 18px;
height: 18px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic .cb-item_marker::before {
content: '';
position: absolute;
top: 7px;
left: 3px;
opacity: 0;
display: block;
width: 11px;
height: 7px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic :hover State */
.cb-item_classic .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic .cb-item_input:hover + .cb-item_label .cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic :checked State */
.cb-item_classic .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic :disabled State */
.cb-item_classic .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
} /* Checkbox Classic :disabled:checked State */
.cb-item_classic
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
} /* END Checkbox Classic */ /* Checkbox Classic Rounded */
.cb-item_classic-rnd,
.cb-item_classic-rnd *,
.cb-item_classic-rnd *::before,
.cb-item_classic-rnd *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic-rnd {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic-rnd .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic-rnd .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic-rnd .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic-rnd .cb-item_marker::before {
content: '';
position: absolute;
top: 9px;
left: 4px;
opacity: 0;
display: block;
width: 12px;
height: 8px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic Rounded :hover State */
.cb-item_classic-rnd .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic Rounded :checked State */
.cb-item_classic-rnd .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic-rnd
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic Rounded :disabled State */
.cb-item_classic-rnd .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic-rnd .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
}
.cb-item_classic-rnd
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
}
</style>
</script>
<script type="text/wxtag-template">
<div class="cb-item_ios-style">
<input type="checkbox" id="cb-item_ios-style-2" class="cb-item_input" />
<label for="cb-item_ios-style-2" class="cb-item_label">
<span class="kg">开</span>
<span class="cb-item_marker"></span>
</label>
</div>
</script>
</wx-open-subscribe>
</div>
<div v-if="!checked1 && checked2">
<wx-open-subscribe
@success="success"
@error="subError"
:template="subTemplateId"
id="subscribe-btn"
>
<script type="text/wxtag-template" slot="style">
<style>
.cb-item_label .kg {
position: absolute;
color: #fff;
left: 6px;
}
.cb-item_animated-marker,
.cb-item_animated-marker *,
.cb-item_animated-marker *::before,
.cb-item_animated-marker *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_animated-marker {
position: relative;
display: block;
min-width: 200px;
width: 100%;
max-width: 280px;
--cb_text-color: #333;
--cb_bg-color: #f6f8f9;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
--cb_marker-bg-color: #fff;
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_animated-marker {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_animated-marker .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 10px 10px 20px;
cursor: pointer;
font-size: 18px;
line-height: 24px;
color: #333;
color: var(--cb_text-color);
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_animated-marker .cb-item_label-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.cb-item_animated-marker .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 30px;
height: 30px;
margin-left: 25px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_marker_short-line,
.cb-item_marker_long-line {
position: absolute;
overflow: hidden;
height: 3px;
background-color: transparent;
-webkit-transform-origin: left;
transform-origin: left;
}
.cb-item_marker_short-line {
top: 11px;
left: 6px;
width: 10px;
-webkit-transform: rotate(44.5deg);
transform: rotate(44.5deg);
}
.cb-item_marker_long-line {
top: 19px;
left: 12px;
width: 17px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cb-item_marker_short-line::before,
.cb-item_marker_long-line::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox with Animated Marker :checked State */
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label {
color: #fff;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker {
border-color: transparent;
}
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cb-item_marker_long-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
} /* Checkbox with Animated Marker :disabled State */
.cb-item_animated-marker .cb-item_input:disabled + .cb-item_label {
cursor: default;
color: #ccc;
color: var(--cb_border-color);
} /* Checkbox with Animated Marker :disabled:checked State */
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label {
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
}
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
border-color: #ccc;
border-color: var(--cb_border-color);
}
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
background-color: #ccc;
background-color: var(--cb_border-color);
} /* END Checkbox with Animated Marker */ /* Checkbox On/Off Toggler */
.cb-item_toggler,
.cb-item_toggler *,
.cb-item_toggler *::before,
.cb-item_toggler *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_toggler {
position: relative;
display: inline-block;
--cb_text-color: #333;
--cb_marker-bg-color: #fff;
--cb_marker-bg-color_checked: #05c096;
--cb_marker-bg-color_disabled: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_toggler .cb-item_label {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 50px;
width: auto;
cursor: pointer;
font-size: 18px;
line-height: 18px;
color: #333;
color: var(--cb_text-color);
background-color: transparent;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_toggler .cb-item_label {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
.cb-item_toggler .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 16px;
height: 16px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_toggler .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: toggler-unswitch 0.4s ease-out;
animation: toggler-unswitch 0.4s ease-out;
}
.cb-item_label-off,
.cb-item_label-on {
position: absolute;
top: -1px;
right: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cb-item_label-off {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.cb-item_label-on {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
} /* Checkbox On/Off Toggler :checked State */
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_marker,
.cb-item_toggler
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
background-color: #05c096;
background-color: var(--cb_marker-bg-color_checked);
}
.cb-item_toggler
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
-webkit-animation: toggler-switch 0.4s ease-out;
animation: toggler-switch 0.4s ease-out;
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-off {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-on {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
} /* Checkbox On/Off Toggler :disabled State */
.cb-item_toggler .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_toggler .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #ccc;
background-color: var(--cb_marker-bg-color_disabled);
-webkit-box-shadow: none;
box-shadow: none;
} /* Checkbox On/Off Toggler Animation */
@-webkit-keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox On/Off Toggler */ /* Checkbox Switcher Style #1 */
.cb-item_ios-style,
.cb-item_ios-style *,
.cb-item_ios-style *::before,
.cb-item_ios-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_ios-style {
position: relative;
display: inline-block;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_ios-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50px;
height: 30px;
cursor: pointer;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_ios-style .cb-item_marker {
display: block;
width: 26px;
height: 26px;
background-color: #fff;
background-color: var(--cb_bg-color);
border-radius: 50%;
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
-webkit-transform: translateX(1px);
transform: translateX(1px);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox Switcher Style #1 :checked State */
.cb-item_ios-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
}
.cb-item_ios-style .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(22px);
transform: translateX(22px);
} /* Checkbox Switcher Style #1 :disabled State */
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
background-color: #ccc;
background-color: var(--cb_border-color);
}
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
} /* Checkbox Switcher Style #1 :disabled:checked State */
.cb-item_ios-style .cb-item_input:disabled:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_ios-style
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
} /* END Checkbox Switcher Style #1 */ /* Checkbox Switcher Style #2 */
.cb-item_android-style,
.cb-item_android-style *,
.cb-item_android-style *::before,
.cb-item_android-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_android-style {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_android-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_android-style .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-animation: android-style-unswitch 0.25s linear forwards;
animation: android-style-unswitch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :checked State */
.cb-item_android-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_android-style .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-animation: android-style-switch 0.25s linear forwards;
animation: android-style-switch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :disabled State */
.cb-item_android-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_android-style
.cb-item_input:disabled
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
} /* Checkbox Switcher Style #2 Animation */
@-webkit-keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@-webkit-keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
}
@keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
} /* END Checkbox Switcher Style #2 */ /* Checkbox Switcher Style #3 */
.cb-item_bar,
.cb-item_bar *,
.cb-item_bar *::before,
.cb-item_bar *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_bar {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_bar .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 10px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_bar .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Switcher Style #3 :checked State */
.cb-item_bar .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_bar .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(20px);
transform: translateX(20px);
} /* Checkbox Switcher Style #3 :disabled State */
.cb-item_bar .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_bar .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15),
0 3px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 2px rgba(0, 0, 0, 0.15);
} /* END Checkbox Switcher Style #3 */ /* Checkbox Switcher Style #4 */
.cb-item_wave,
.cb-item_wave *,
.cb-item_wave *::before,
.cb-item_wave *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_wave {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_wave .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_wave .cb-item_marker {
position: relative;
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-transform: translateX(4px);
transform: translateX(4px);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_wave .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: wave-unswitch 0.4s ease-out;
animation: wave-unswitch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :checked State */
.cb-item_wave .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_wave .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(28px);
transform: translateX(28px);
}
.cb-item_wave .cb-item_input:checked + .cb-item_label .cb-item_marker::before {
-webkit-animation: wave-switch 0.4s ease-out;
animation: wave-switch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :disabled State */
.cb-item_wave .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
} /* Checkbox Switcher Style #4 Animation */
@-webkit-keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox Switcher Style #4 */ /* Checkbox Classic */
.cb-item_classic,
.cb-item_classic *,
.cb-item_classic *::before,
.cb-item_classic *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 18px;
height: 18px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic .cb-item_marker::before {
content: '';
position: absolute;
top: 7px;
left: 3px;
opacity: 0;
display: block;
width: 11px;
height: 7px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic :hover State */
.cb-item_classic .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic .cb-item_input:hover + .cb-item_label .cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic :checked State */
.cb-item_classic .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic :disabled State */
.cb-item_classic .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
} /* Checkbox Classic :disabled:checked State */
.cb-item_classic
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
} /* END Checkbox Classic */ /* Checkbox Classic Rounded */
.cb-item_classic-rnd,
.cb-item_classic-rnd *,
.cb-item_classic-rnd *::before,
.cb-item_classic-rnd *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic-rnd {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic-rnd .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic-rnd .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic-rnd .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic-rnd .cb-item_marker::before {
content: '';
position: absolute;
top: 9px;
left: 4px;
opacity: 0;
display: block;
width: 12px;
height: 8px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic Rounded :hover State */
.cb-item_classic-rnd .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic Rounded :checked State */
.cb-item_classic-rnd .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic-rnd
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic Rounded :disabled State */
.cb-item_classic-rnd .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic-rnd .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
}
.cb-item_classic-rnd
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
}
</style>
</script>
<script type="text/wxtag-template">
<div class="cb-item_ios-style">
<input type="checkbox" id="cb-item_ios-style-2" class="cb-item_input" />
<label for="cb-item_ios-style-2" class="cb-item_label">
<span class="kg">开</span>
<span class="cb-item_marker"></span>
</label>
</div>
</script>
</wx-open-subscribe>
</div>
<!-- <van-switch
v-if="!weiXin"
:value="checked1"
@input="onInputOne"
size="24"
/> -->
<div v-if="checked1" class="cb-item_ios-style">
<input
type="checkbox"
id="cb-item_ios-style-2"
class="cb-item_input"
@click="onInputOne"
:checked="checked1"
/>
<label for="cb-item_ios-style-2" class="cb-item_label">
<span class="kg">开</span>
<span class="cb-item_marker"></span>
</label>
</div>
</template>
</van-cell>
<div @click="help" style="padding: 10px;">
<span style="color:red">*注</span>
<span> 如打开开关无效，请查看公众号设置情况。点击获取</span>
<span style="color:#40BB90">帮助</span>
</div>
</div>
<van-dialog v-model="isok" :title="title">
<video
v-if="isok"
id="video"
:src="url"
controls="controls"
width="100%"
autoplay
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
>
您的浏览器不支持 video 标签。
</video>
</van-dialog>
</div>
</template>
<script>
import { getWeChatSignature } from '@/services/wxSev'
import {
getSubscribeSituation,
updateSubscribeSituation,
getHelpList,
} from '@/services/famousPhysician'
import to from '@/utils/to'
import { isWeiXin } from '@/utils/common'
import storage from '@/utils/storage'
export default {
components: {},
data() {
return {
//logoBg: require('@/assets/img/famousPhysician/logoBg.png'),
userInfo: {},
checked1: false,
checked2: false,
url: '',
title: '',
isok: false,
weiXin: false,
subTemplateId: ['qiGbeTbXPjiAJX12nLCWToVInmKwe1PPp7NS8ySzJbk'],
}
},
created() {
this.wxInit()
},
async mounted() {
await this.$nextTick()
this.weiXin = isWeiXin()
const userInfo = storage.get('userInfo')
this.userInfo = userInfo || {}
let toast = this.$toast.loading({
overlay: true,
duration: 0,
})
this.getSubscribeSituationFn()
this.getHelpListFn()
toast.clear()
console.log('是否微信：', this.weiXin)
},
methods: {
// 我这里判断是必须把复数模板全部订阅
success(e) {
console.log('success:', e)
let subscribeDetails = JSON.parse(e.detail.subscribeDetails) // 全部的模板
for (let i in this.subTemplateId) {
let subKey = subscribeDetails[this.subTemplateId[i]] // 获取每个模板的状态
let status = JSON.parse(subKey)
console.log('success:状态：', status.status)
switch (status.status) {
case 'reject':
this.$toast(`用户拒绝订阅消息`)
this.checked1 = false
this.updateSubscribeSituationFn(false, status.status) // 拒绝
break
case 'cancel':
this.checked1 = false
this.$toast(`用户取消订阅消息`)
break
case 'filter':
this.checked1 = false
this.$toast(`第${i}条消息应该标题同名被后台过滤`)
break
default:
this.checked1 = true
this.updateSubscribeSituationFn(true) // 允许
break
}
}
},
//备用
onSuccess(e) {
if (e.detail.errMsg == 'subscribe:ok') {
let status = JSON.parse(e.detail.subscribeDetails)
if (JSON.parse(status['模板消息ID']).status == 'accept') {
//Toast.success('订阅成功')
} else {
// Toast.fail('订阅失败')
}
} else {
//Toast.fail('订阅失败')
}
},
lightUp() {
let input = document.getElementById('cb-item_ios-style-2')
input.checked = this.checked1
console.log('执行2：', input)
},
subError(e) {
console.log('订阅失败：', e)
//this.$toast(e.detail.errMsg + e.detail.errCode)
this.$dialog
.alert({
title: '订阅失败',
message: `请查看帮助视频，开启消息通知。错误码：${e.detail.errCode}，提示：${e.detail.errMsg}`,
})
.then(() => {
this.checked1 = false
})
this.checked1 = false
//this.$router.push('/notificationSettings')
},
async onInputOne(e) {
console.log(e.target.checked)
this.updateSubscribeSituationFn(e.target.checked)
//this.updateSubscribeSituationFn(checked)
},
async onInputTwo(checked) {
this.checked2 = checked
},
async getSubscribeSituationFn() {
let pam = {
appid: this.$appId,
openid: storage.get('wxInfo').openid,
authType: '12',
}
const [err, res] = await to(getSubscribeSituation(pam))
if (err) return this.$toast(err.errorMsg)
//"obj": true,//是否需要弹出订阅设置页面 true 需要 false 不需要
//"busObj": 0 //当前用户设置订订阅情况 0 关闭订阅 1 已订阅
const { busObj, obj } = res
this.checked1 = busObj == 1 ? true : false
console.log(111, res)
},
async updateSubscribeSituationFn(checked, status = null) {
if (status == 'reject') {
this.$dialog
.alert({
title: '订阅失败',
message: `您拒收了消息通知，请查看帮助视频开启通知设置`,
})
.then(() => {
this.checked1 = false
this.checked2 = false
})
}
let pam = {
appid: this.$appId,
openid: storage.get('wxInfo').openid,
isSubscribe: checked ? 1 : 0, //是否已经订阅医院推送消息 0 否 1 是
}
let toast = this.$toast.loading({
overlay: true,
duration: 0,
})
const [err, res] = await to(updateSubscribeSituation(pam))
if (err) return this.$toast(err.errorMsg)
this.checked1 = checked
this.checked2 = checked ? false : true
toast.clear()
console.log(222, res)
console.log('最终开关状态：', this.checked1, this.checked2)
},
async getHelpListFn() {
let hospitalId = this.$hospitalId
const [err, res] = await to(getHelpList(hospitalId, 0))
if (err) return this.$toast(err.errorMsg)
console.log(3333, res)
if (res.list && res.list.length) {
this.url = res.list[0].url
this.title = res.list[0].title
}
},
help() {
if (this.url == '') {
this.$toast('暂无帮助')
} else {
this.isok = true
}
},
toBinding() {
this.$router.push({
path: `/binding-card/card-manage`,
query: {},
})
},
// 微信SDK
async wxInit() {
let url = window.location.href.split('#')[0]
let params = {
hospitalUuid: this.$hospitalUuid,
url,
}
let toast = this.$toast.loading({
duration: 0,
forbidClick: true,
})
const [err, res] = await to(getWeChatSignature(params))
toast.clear()
if (err) return this.$toast(err.errorMsg)
// console.log('签名--->', err, res)
const { nocestr, signature, timestamp } = res
wx.config({
debug: false,
appId: this.$appId,
timestamp,
nonceStr: nocestr,
signature,
jsApiList: ['chooseImage', 'previewImage', 'checkJsApi'],
openTagList: ['wx-open-subscribe'],
})
wx.ready(() => {
//this.isReady = true;
console.log('sdk加载ok--->')
})
wx.error((res) => {
console.log('sdk加载失败--->', res)
// this.$toast('失败', res)
//this.isReady = false;
})
},
},
}
</script>
<style lang="scss" scoped>
.notificationSettings {
.cb-item_label .kg {
position: absolute;
color: #fff;
left: 6px;
}
.cb-item_animated-marker,
.cb-item_animated-marker *,
.cb-item_animated-marker *::before,
.cb-item_animated-marker *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_animated-marker {
position: relative;
display: block;
min-width: 200px;
width: 100%;
max-width: 280px;
--cb_text-color: #333;
--cb_bg-color: #f6f8f9;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
--cb_marker-bg-color: #fff;
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_animated-marker {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_animated-marker .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 10px 10px 20px;
cursor: pointer;
font-size: 18px;
line-height: 24px;
color: #333;
color: var(--cb_text-color);
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_animated-marker .cb-item_label-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.cb-item_animated-marker .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 30px;
height: 30px;
margin-left: 25px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_marker_short-line,
.cb-item_marker_long-line {
position: absolute;
overflow: hidden;
height: 3px;
background-color: transparent;
-webkit-transform-origin: left;
transform-origin: left;
}
.cb-item_marker_short-line {
top: 11px;
left: 6px;
width: 10px;
-webkit-transform: rotate(44.5deg);
transform: rotate(44.5deg);
}
.cb-item_marker_long-line {
top: 19px;
left: 12px;
width: 17px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cb-item_marker_short-line::before,
.cb-item_marker_long-line::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox with Animated Marker :checked State */
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label {
color: #fff;
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker {
border-color: transparent;
}
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cb-item_marker_long-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_short-line::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
} /* Checkbox with Animated Marker :disabled State */
.cb-item_animated-marker .cb-item_input:disabled + .cb-item_label {
cursor: default;
color: #ccc;
color: var(--cb_border-color);
} /* Checkbox with Animated Marker :disabled:checked State */
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label {
background-color: #f6f8f9;
background-color: var(--cb_bg-color);
}
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
border-color: #ccc;
border-color: var(--cb_border-color);
}
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_short-line::before,
.cb-item_animated-marker
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker_long-line::before {
background-color: #ccc;
background-color: var(--cb_border-color);
} /* END Checkbox with Animated Marker */ /* Checkbox On/Off Toggler */
.cb-item_toggler,
.cb-item_toggler *,
.cb-item_toggler *::before,
.cb-item_toggler *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_toggler {
position: relative;
display: inline-block;
--cb_text-color: #333;
--cb_marker-bg-color: #fff;
--cb_marker-bg-color_checked: #05c096;
--cb_marker-bg-color_disabled: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_toggler .cb-item_label {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 50px;
width: auto;
cursor: pointer;
font-size: 18px;
line-height: 18px;
color: #333;
color: var(--cb_text-color);
background-color: transparent;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
@supports (
(max-width: -webkit-max-content) or (max-width: -moz-max-content) or
(max-width: max-content)
) {
.cb-item_toggler .cb-item_label {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
.cb-item_toggler .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 16px;
height: 16px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_toggler .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: toggler-unswitch 0.4s ease-out;
animation: toggler-unswitch 0.4s ease-out;
}
.cb-item_label-off,
.cb-item_label-on {
position: absolute;
top: -1px;
right: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cb-item_label-off {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.cb-item_label-on {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
} /* Checkbox On/Off Toggler :checked State */
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_marker,
.cb-item_toggler
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
background-color: #05c096;
background-color: var(--cb_marker-bg-color_checked);
}
.cb-item_toggler
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
-webkit-animation: toggler-switch 0.4s ease-out;
animation: toggler-switch 0.4s ease-out;
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-off {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.cb-item_toggler .cb-item_input:checked + .cb-item_label .cb-item_label-on {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
} /* Checkbox On/Off Toggler :disabled State */
.cb-item_toggler .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_toggler .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #ccc;
background-color: var(--cb_marker-bg-color_disabled);
-webkit-box-shadow: none;
box-shadow: none;
} /* Checkbox On/Off Toggler Animation */
@-webkit-keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 0 #05c096;
box-shadow: 0 0 0 0 #05c096;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 5px 15px #05c096;
box-shadow: 0 0 5px 15px #05c096;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes toggler-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 0 #ccc;
box-shadow: 0 0 0 0 #ccc;
-webkit-box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 0 0 var(--cb_marker-bg-color_disabled);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 5px 15px #ccc;
box-shadow: 0 0 5px 15px #ccc;
-webkit-box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
box-shadow: 0 0 5px 15px var(--cb_marker-bg-color_disabled);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox On/Off Toggler */ /* Checkbox Switcher Style #1 */
.cb-item_ios-style,
.cb-item_ios-style *,
.cb-item_ios-style *::before,
.cb-item_ios-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_ios-style {
position: relative;
display: inline-block;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_border-color: #ccc;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_ios-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50px;
height: 30px;
cursor: pointer;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #ccc;
border-color: var(--cb_border-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_ios-style .cb-item_marker {
display: block;
width: 26px;
height: 26px;
background-color: #fff;
background-color: var(--cb_bg-color);
border-radius: 50%;
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
-webkit-transform: translateX(1px);
transform: translateX(1px);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
} /* Checkbox Switcher Style #1 :checked State */
.cb-item_ios-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
}
.cb-item_ios-style .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(22px);
transform: translateX(22px);
} /* Checkbox Switcher Style #1 :disabled State */
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
background-color: #ccc;
background-color: var(--cb_border-color);
}
.cb-item_ios-style .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.07);
} /* Checkbox Switcher Style #1 :disabled:checked State */
.cb-item_ios-style .cb-item_input:disabled:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_ios-style
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.07);
} /* END Checkbox Switcher Style #1 */ /* Checkbox Switcher Style #2 */
.cb-item_android-style,
.cb-item_android-style *,
.cb-item_android-style *::before,
.cb-item_android-style *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_android-style {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_android-style .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_android-style .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-animation: android-style-unswitch 0.25s linear forwards;
animation: android-style-unswitch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :checked State */
.cb-item_android-style .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_android-style
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker {
-webkit-animation: android-style-switch 0.25s linear forwards;
animation: android-style-switch 0.25s linear forwards;
} /* Checkbox Switcher Style #2 :disabled State */
.cb-item_android-style .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_android-style
.cb-item_input:disabled
+ .cb-item_label
.cb-item_marker {
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1),
0 3px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
} /* Checkbox Switcher Style #2 Animation */
@-webkit-keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@keyframes android-style-switch {
0% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
100% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
}
@-webkit-keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
}
@keyframes android-style-unswitch {
0% {
-webkit-transform: scaleX(1) translateX(28px);
transform: scaleX(1) translateX(28px);
}
25% {
-webkit-transform: scaleX(1.5) translateX(14px);
transform: scaleX(1.5) translateX(14px);
}
50% {
-webkit-transform: scaleX(1.5) translateX(7px);
transform: scaleX(1.5) translateX(7px);
}
100% {
-webkit-transform: scaleX(1) translateX(4px);
transform: scaleX(1) translateX(4px);
}
} /* END Checkbox Switcher Style #2 */ /* Checkbox Switcher Style #3 */
.cb-item_bar,
.cb-item_bar *,
.cb-item_bar *::before,
.cb-item_bar *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_bar {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_bar .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 10px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_bar .cb-item_marker {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25),
0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25);
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Switcher Style #3 :checked State */
.cb-item_bar .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_bar .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(20px);
transform: translateX(20px);
} /* Checkbox Switcher Style #3 :disabled State */
.cb-item_bar .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
}
.cb-item_bar .cb-item_input:disabled + .cb-item_label .cb-item_marker {
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15),
0 3px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 2px rgba(0, 0, 0, 0.15);
} /* END Checkbox Switcher Style #3 */ /* Checkbox Switcher Style #4 */
.cb-item_wave,
.cb-item_wave *,
.cb-item_wave *::before,
.cb-item_wave *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_wave {
position: relative;
display: inline-block;
--cb_bg-color: #ccc;
--cb_bg-color_checked: #05c096;
--cb_marker-bg-color: #fff;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_wave .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 55px;
height: 30px;
cursor: pointer;
background-color: #ccc;
background-color: var(--cb_bg-color);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_wave .cb-item_marker {
position: relative;
display: block;
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_marker-bg-color);
border-radius: 50%;
-webkit-transform: translateX(4px);
transform: translateX(4px);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.cb-item_wave .cb-item_marker::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
border-radius: 50%;
-webkit-animation: wave-unswitch 0.4s ease-out;
animation: wave-unswitch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :checked State */
.cb-item_wave .cb-item_input:checked + .cb-item_label {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
}
.cb-item_wave .cb-item_input:checked + .cb-item_label .cb-item_marker {
-webkit-transform: translateX(28px);
transform: translateX(28px);
}
.cb-item_wave
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
-webkit-animation: wave-switch 0.4s ease-out;
animation: wave-switch 0.4s ease-out;
} /* Checkbox Switcher Style #4 :disabled State */
.cb-item_wave .cb-item_input:disabled + .cb-item_label {
opacity: 0.5;
cursor: default;
} /* Checkbox Switcher Style #4 Animation */
@-webkit-keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-switch {
0% {
opacity: 0; /* Removes flash bug in Safari */
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.1;
-webkit-box-shadow: 0 0 0 5px #05c096;
box-shadow: 0 0 0 5px #05c096;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
box-shadow: 0 0 0 5px var(--cb_bg-color_checked);
}
99% {
opacity: 0.1;
-webkit-box-shadow: 0 0 2px 20px #05c096;
box-shadow: 0 0 2px 20px #05c096;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
box-shadow: 0 0 2px 20px var(--cb_bg-color_checked);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-webkit-keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@keyframes wave-unswitch {
0% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
1% {
opacity: 0.15;
-webkit-box-shadow: 0 0 0 5px #ccc;
box-shadow: 0 0 0 5px #ccc;
-webkit-box-shadow: 0 0 0 5px var(--cb_bg-color);
box-shadow: 0 0 0 5px var(--cb_bg-color);
}
99% {
opacity: 0.15;
-webkit-box-shadow: 0 0 2px 20px #ccc;
box-shadow: 0 0 2px 20px #ccc;
-webkit-box-shadow: 0 0 2px 20px var(--cb_bg-color);
box-shadow: 0 0 2px 20px var(--cb_bg-color);
}
100% {
opacity: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
} /* END Checkbox Switcher Style #4 */ /* Checkbox Classic */
.cb-item_classic,
.cb-item_classic *,
.cb-item_classic *::before,
.cb-item_classic *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 18px;
height: 18px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic .cb-item_marker::before {
content: '';
position: absolute;
top: 7px;
left: 3px;
opacity: 0;
display: block;
width: 11px;
height: 7px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic :hover State */
.cb-item_classic .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic :checked State */
.cb-item_classic .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic :disabled State */
.cb-item_classic .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic .cb-item_input:disabled + .cb-item_label .cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
} /* Checkbox Classic :disabled:checked State */
.cb-item_classic
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
} /* END Checkbox Classic */ /* Checkbox Classic Rounded */
.cb-item_classic-rnd,
.cb-item_classic-rnd *,
.cb-item_classic-rnd *::before,
.cb-item_classic-rnd *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cb-item_classic-rnd {
position: relative;
display: block;
--cb_text-color: #333;
--cb_bg-color: #fff;
--cb_bg-color_checked: #05c096;
--cb_bg-color_disabled: #eee;
--cb_border-color: #aaa;
}
.cb-item_input {
position: absolute;
opacity: 0;
z-index: -1;
}
.cb-item_classic-rnd .cb-item_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.cb-item_classic-rnd .cb-item_label-content {
padding-left: 15px;
color: #333;
color: var(--cb_text-color);
}
.cb-item_classic-rnd .cb-item_marker {
position: relative;
display: inline-block; /* Needs for IE10 */
width: 22px;
height: 22px;
background-color: #fff;
background-color: var(--cb_bg-color);
border: 1px solid;
border-color: #aaa;
border-color: var(--cb_border-color);
border-radius: 50%;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.cb-item_classic-rnd .cb-item_marker::before {
content: '';
position: absolute;
top: 9px;
left: 4px;
opacity: 0;
display: block;
width: 12px;
height: 8px;
background-color: transparent;
border-bottom: 2px solid;
border-left: 2px solid;
border-color: #fff;
border-color: var(--cb_bg-color);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-65%) rotate(-45deg);
transform: translateY(-65%) rotate(-45deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
} /* Checkbox Classic Rounded :hover State */
.cb-item_classic-rnd .cb-item_input:hover + .cb-item_label .cb-item_marker {
border-color: #333;
border-color: var(--cb_text-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0.25;
border-color: #333;
border-color: var(--cb_text-color);
} /* Checkbox Classic Rounded :checked State */
.cb-item_classic-rnd .cb-item_input:checked + .cb-item_label .cb-item_marker {
background-color: #05c096;
background-color: var(--cb_bg-color_checked);
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
}
.cb-item_classic-rnd
.cb-item_input:checked:hover
+ .cb-item_label
.cb-item_marker::before {
border-color: #fff;
border-color: var(--cb_bg-color);
} /* Checkbox Classic Rounded :disabled State */
.cb-item_classic-rnd .cb-item_input:disabled + .cb-item_label {
cursor: default;
}
.cb-item_classic-rnd
.cb-item_input:disabled
+ .cb-item_label
.cb-item_marker {
background-color: #eee;
background-color: var(--cb_bg-color_disabled);
border-color: #aaa;
border-color: var(--cb_border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.cb-item_classic-rnd
.cb-item_input:disabled:hover
+ .cb-item_label
.cb-item_marker::before {
opacity: 0;
} /* Checkbox Classic Rounded :disabled:checked State */
.cb-item_classic-rnd
.cb-item_input:disabled:checked
+ .cb-item_label
.cb-item_marker::before {
opacity: 1;
border-color: #333;
border-color: var(--cb_text-color);
} /* END Checkbox Classic Rounded */
}
</style>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献13条内容
所有评论(0)