<template> <div class="div_a_b"> <div class="div_a"> <div>课堂评价div> <div>评价对象div> <div>评分类型div> <div>评价频率div> <div>评价权重div> <div>分类排序div> <div>家长评价div> <div>学生评价div> <div>是否启用div> div> <div class="div_b"> <div> <input type="checkbox" > div> <div> <select> <option>老师option> <option>学生option> <option>老师option> select> div> <div> <input type="checkbox" class="switch"> div> <div> <input type="checkbox" class="switch"> div> <div> <input type="checkbox" class="switch"> div> <div> <input type="checkbox" class="switch"> div> <div> <input type="checkbox" class="switch"> div> div> div>template><script> export default { name: 'CommentSetting', }script><style scoped> .div_a_b { margin-left: 100px; display: flex; flex-direction:row; } .div_a { display: flex; flex-direction: column; } .div_b { margin-left: 100px; display: flex; flex-direction: column; } input[type='checkbox'].switch{ outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 40px; height: 20px; background: #ccc; border-radius: 10px; transition: border-color .3s, background-color .3s; } input[type='checkbox'].switch::after { content: ''; display: inline-block; width: 1rem; height:1rem; border-radius: 50%; background: #fff; box-shadow: 0 0 2px, #999; transition:.4s; top: 2px; position: absolute; left: 2px; } input[type='checkbox'].switch:checked { background: rgb(19, 206, 102); } /* 当input[type=checkbox]被选中时:伪元素显示下面样式 位置发生变化 */ input[type='checkbox'].switch:checked::after { content: ''; position: absolute; left: 55%; top: 2px; }style>
美丽的开关
原创
©著作权归作者所有:来自51CTO博客作者东方佑的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 好看的开关按钮
用css模拟实现一个好看的开关按钮动效。
css 开关按钮 动效设计 交互设计 ux/ui -
在Unity中制作一个可开关的灯
在Unity中制作一个可开关的灯
UI 开关按钮 Unity -
美丽的夜晚
美丽的夜晚
生物 -
PrettyTable | 美丽的表格
美丽的表格工具。
服务器 ip地址 python -
美丽的三沙
2012年7月24日,在美丽的西沙群岛永兴岛,中国最年轻的地级市、海南省三沙市宣布成立。美的不像样
中国 美的 西沙群岛 海南省 永兴岛 -
美丽的数学
作为个工科生,辞藻比较匮乏,加上好久不写文章,不知道怎么表达数学在心中的神 ...
加密算法 排列组合 段长度 空间复杂度 时间复杂度