SOURCE

console 命令行工具 X clear

                    
>
console
<input type="checkbox" id="switch"/>
<div class="content">
    <div class="card_box">
        <span class="capt1">智慧门店</span>
        <p class="pge1">智慧经营用伊智,智能覆盖服务每一个环节,让门店高度信息化,解决门店运营、管理等问题</p>
        <div class="feature">
            <svg id="star"  width="64px" height="64px" viewBox="0 0 64 64" >
                <style type="text/css">
                    .st0{
                        fill-rule:evenodd;
                        clip-rule:evenodd;
                        fill:#FFFFFF;
                        opacity: .4;
                    }
                </style>
                <path id="Path" class="st0" d="M32.5,40.9c-0.3,0-0.6,0-0.9-0.3L20.9,35l-10.7,5.7c-0.8,0.3-1.6,0.3-2.2-0.2
                    c-0.6-0.5-0.9-1.3-0.8-2.1l2-11.9l-8.6-8.4C0,17.6-0.2,16.8,0.2,16c0.3-0.8,0.9-1.3,1.7-1.4l11.9-1.7L19.1,2c0.8-1.4,3-1.4,3.8,0
                    l5.3,10.8l11.9,1.7c0.8,0.2,1.4,0.6,1.7,1.4s0,1.6-0.5,2.2l-8.6,8.4l2,11.9c0.2,0.8-0.2,1.6-0.8,2.1C33.4,40.7,32.9,40.9,32.5,40.9"
                    />
                </svg>
            <div class="feature_cnt">
                <span class="capt2">拓展新客,维护老客</span>
                <p class="pge2">全方位拓宽门店触达客户的渠道,进行精准维护</p>
            </div>
        </div>
    </div>

    <!-- <input type="checkbox" id="switch"/> -->

    <div class="trigger">
        <label for="switch">
            <div class="toggle"></div>
            <div class="names">
                <p class="light">Light</p>
                <p class="dark">Dark</p>
            </div>
        </label>
    </div>
    
</div>

<!-- <input type="checkbox" id="switch"/> -->

<script>
    var triggle = document.getElementsByClassName('names');

    triggle[0].onclick = function () {
        document.body.classList.toggle ("body_black");
    }
</script>
[type="checkbox"] {
    display: none;
}

body {
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.body_black {
    background-color: #121212;
}


.index_bar {
    display: flex;
    flex-direction: row;
    background: #E8E8E8;
    padding: 12px;
}
.index_bar span {
    width: 14px;
    height: 14px;
    margin: 0 4px;
    border-radius: 8px;
}
.index_bar span:nth-child(1){
    background: #FF6159;
}
.index_bar span:nth-child(2){
    background: #FFBD2E;
}
.index_bar span:nth-child(3){
    background: #29CA41;
}
.trigger{
    width: 60%;
    margin: 30px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

label, .toggle {
    height: 2.8rem;
    border-radius: 100px;
}
label {
    width: 240px;
    background-color: #F4F4F6;
    border-radius: 100px;
    position: relative;
    margin: 0 auto; 
    cursor: pointer;
}
.toggle {
    position: absolute;
    width: 50%;
    background-color: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,.15);
    transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.names {
    width: 100%;
    font-size: 14px;
    font-weight: bolder;
    margin:0 auto;
    position: absolute;
    display: flex;
    justify-content: space-around;
}

.light {
    color: #f75f1e;
}

.dark {
    opacity: .5;
}

.card_box {
    width: 76%;
    max-width: 350px;
    background-color: #FFFFFF;
    border: 1px solid #E8E8E8;
    box-shadow: 0 8px 14px 0 rgba(38,38,38,0.18);
    border-radius: 5px;
    padding: 24px;
    margin: 32px auto;
}

.capt1 {
    font-size: 20px;
    color: #262626;
}
.capt2 {
    color: #FFFFFF;
}
.pge1 {
    font-size: 15px;
    color: #525252;
}
.pge2{
    opacity: 0.8;
    font-size: 14px;
    color: #FFFFFF;
    margin: 4px 0 0 0;
}
.feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    background-image: radial-gradient(circle farthest-corner at 100% 100%, #ffc247, #f75f1e);
    border-radius: 5px;
}

#star {
    padding-top: 10px;
    overflow: visible;
}

@media screen and (max-width :420px) {
    .trigger{
        width: 100%;
        margin: 12px auto;
    } 
}



/* 切换深色模式样式 */


[type="checkbox"]:checked + .content label {
    background: #000000;
}

[type="checkbox"]:checked + .content .toggle {
    transform: translate(100%, 0);
    background: #525252;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,0.50);
}

[type="checkbox"]:checked + .content .light {
    color: #DBDBDB;
    opacity: .5;
}
[type="checkbox"]:checked + .content .dark {
    color: #d4a7ff;
    opacity: 1;
}

[type="checkbox"]:checked + .content .card_box {
    background: #262626;
    border: 1px solid #404040;
    box-shadow: 0 8px 14px 0 rgba(18,18,18,0.40);
    border-radius: 5px;
}
[type="checkbox"]:checked + .content .capt1 {
    color: #FFFFFF;
}
[type="checkbox"]:checked + .content .pge1 {
    color: #DBDBDB;
}
[type="checkbox"]:checked + .content .feature {
    background-image:radial-gradient(circle farthest-corner at 100% 100%, #d873e8, #4637d0);
    border-radius: 5px;
}