.huaban{width:100%;height:100vh;overflow:hidden;background-color:#000}li{list-style-type:none}ul{padding-left:10px}h1{position:fixed;left:15px;top:5px;width:250px;height:60px;color:#ff5e83;font-size:26px;line-height:60px;text-align:center}.canvas-box{left:280px;display:block;cursor:pointer;background-color:#fff;border:1px solid #ccc}.canvas-box,.container{position:fixed;top:10px}.container{width:250px;height:60px}.container h2{height:60px;font-size:22px;color:#ff377e;line-height:60px;border-bottom:1px solid #000}.container h2,.container h3{width:100%;text-align:center;font-weight:400}.container h3{height:30px;font-size:18px;color:#41b1ff;line-height:30px}.type{width:100%;margin-top:30px}.type:after{content:"";display:block;clear:both}.type li{float:left;width:90px;height:45px;margin:0 auto;background-color:#20be18;color:#fff;font-size:18px;line-height:45px;text-align:center;border-radius:5px;cursor:pointer;transition:all .7s}.type .typeactive,.type li:hover{background-color:#fff;color:#20be18}.type li:nth-child(odd){margin-left:15px}.type li:nth-child(2n){margin-left:25px}.style{width:100%;height:40px;margin-top:10px}.style li{float:left;width:90px;height:45px;background-color:#ffbc00;color:#fff;font-size:18px;line-height:45px;text-align:center;border-radius:5px;cursor:pointer;transition:all .7s}.style .styleactive,.style li:hover{color:#ffa800;background-color:#fff;box-shadow:0 0 10px rgba(255,232,95,.77)}.style li:first-child{margin-left:25px}.style li:nth-child(2){margin-left:20px}.bian{position:absolute;left:100px;top:0;width:90px;height:auto;transition:transform .3s;border-radius:5px;background-color:#ec494e;overflow:hidden;transform:scale(0);opacity:0}.bian span{display:block;width:40px;height:45px;font-size:16px}.bian input,.bian span{float:left;text-align:center;line-height:40px;color:#fff;transition:all .7s}.bian input{width:45px;height:35px;margin-top:5px;border:1px solid #fff;box-sizing:border-box;font-size:18px;background:#ec494e;border-radius:3px;box-shadow:inset 0 0 0 4px #fff}.back,.create,.cut{margin-left:25px}.back,.clear,.copy,.create,.cut{float:left;width:90px;height:45px;margin-bottom:15px;background-color:#5bd219;color:#fff;font-size:18px;line-height:45px;text-align:center;border-radius:5px;cursor:pointer}.clear,.copy{margin-left:20px}.save{position:relative;color:#fff;width:252px;height:83px;background:url(../../src/assets/images/button5.png);background-size:100% 100%;background-repeat:no-repeat;font-size:20px;font-weight:700;cursor:pointer;text-align:center;line-height:83px;margin:300px 0 0 20px}.save img{width:45px;position:absolute;left:-10px;bottom:10px}.shezhi{transition:all .7s}.shezhistyle{background:#fff;color:#5bd219}.create{position:relative}.xinjian{position:absolute;left:0;top:0;width:200px;height:165px;border-radius:5px;background-color:#ec494e;box-shadow:0 0 15px rgba(236,73,78,.76);cursor:default;display:none}.xinjian:hover{color:#fff}.xinjian_before{position:absolute;right:0;top:0;width:20px;height:20px;color:#fff;line-height:16px;text-indent:-1px;font-size:30px;border:1px solid #fff;transform:rotate(45deg);border-radius:50%;cursor:pointer}.xinjian h6{width:100%;height:50px;color:#fff;line-height:50px;text-align:center;font-size:20px;font-weight:400}#ding{width:60px;height:30px;font-size:14px;border-radius:3px;color:#fff;background-color:#0078ff;border:0;outline:none;cursor:pointer;box-shadow:0 0 10px rgba(0,120,255,.5)}.xinjian_height,.xinjian_width{float:left;width:85px;height:40px;margin-left:10px;border-radius:5px;margin-bottom:20px;background-color:#ffbc00}.xinjian_height:hover,.xinjian_width:hover{background-color:#fff;color:#000}.xinjian_height span,.xinjian_width span{float:left;width:30px;height:100%;font-size:16px;text-align:center;line-height:40px}.xinjian_height input,.xinjian_width input{float:left;margin-top:5px;width:50px;height:30px;text-align:center;line-height:30px;font-size:14px;border:1px solid #ffbc00;box-sizing:border-box}.box{float:left;width:90px;height:auto;background-color:#ec494e;overflow:hidden;border-radius:5px;transition:all .7s;margin-left:25px}.linewidth{margin-left:20px}.box:hover{background-color:#fff}.box span{display:block;width:40px;height:45px;font-size:16px}.box input,.box span{float:left;text-align:center;line-height:40px;color:#fff;transition:all .3s}.box input{width:45px;height:35px;margin-top:5px;border:1px solid #fff;box-sizing:border-box;font-size:18px;background:#ec494e;border-radius:3px;box-shadow:inset 0 0 0 4px #fff}.box2 span{width:55px}.box2 input{width:140px}.space{float:left;width:100%;height:0;border-bottom:1px solid #666;margin:20px 0}.right_box{position:fixed;right:10px;width:500px;height:70px;top:10px}.right_box .title{font-weight:700;font-size:20px;color:#fff;margin:0 0 20px 0}::-webkit-scrollbar{display:none}.right_bottom{height:915px;max-height:915px;overflow-y:scroll;background:#4b4b4b;border-radius:5px;padding:0 20px}.right_box .item{padding:20px 0;border-bottom:1px solid #666;display:flex;align-items:flex-start;color:#fff;font-size:16px}.right_box .item span{width:35px;margin-right:20px}.right_box .item div div{display:flex;align-items:center;margin-bottom:20px}.right_box .item div div:last-child{margin:0}.right_box .item div input{width:20px;height:20px;margin:0 10px 0 0}.right_box .btns{display:flex;align-items:center;justify-content:flex-end;margin-top:20px}.right_box .btns a{text-decoration:none;width:150px;height:45px;line-height:45px;text-align:center;background:#20be18;border-radius:5px;color:#fff;font-size:20px}