react实现一个手机闹钟列表app效果代码
代码语言:html
所属分类:布局界面
代码描述:react实现一个手机闹钟列表app效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Josefin Sans", sans-serif !important; } .background { width: 100vw; height: 100vh; background: #f75050; display: flex; justify-content: center; align-items: center; } .app { width: 23vw; background: white; border-radius: 3vw; box-shadow: 0px 0px 16px 1px #00000030; position: relative; display: flex; flex-direction: column; justify-content: flex-start; } .app_header { height: 5vw; width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 1.5vw 2vw; } .app_header .bar { background: #d0d0d0; height: 0.5vw; width: 5vw; border-radius: 5vw; margin-right: 0.3vw; } .app_header .dot { display: inline-block; background: #d0d0d0; height: 0.5vw; width: 0.5vw; border-radius: 50%; } .alarms { width: 100%; padding: 0 2vw; flex-grow: 1; } .alarms label { color: gray; font-size: 0.9vw; font-weight: 300; display: inline-block; margin-bottom: 1vw; } .alarm_list li { list-style: none; padding: 0.7vw 0; border-bottom: 0.05vw solid whitesmoke; } .alarm_list .title { font-size: 1vw; font-weight: 400; color: gray; } .alarm_list .time { font-size: 2.2vw; color: gray; font-weight: 500; line-height: 1.3; } .alarm_list .days { font-size: 0.9vw; font-weight: 200; color: gray; } .off_style .title { color: #cccccc; } .off_style .time { color: #cccccc; } .off_style .days { color: #cccccc; } .time_row { display: flex; justify-content: space-between; align-items: center; } button { background: none; outline: none; border: none; } .switch { display: inline-block; } .switch:hover { cursor: pointer; } .switch .line { position: relative; display: inline-block; width: 2.8vw; height: 1vw; background: #efefef; border-radius: 5vw; } .switch .circle { display: inline-block; width: 1.4vw; height: 1.4vw; background: #ffffff; border-radius: 50%; position: absolute; top: -0.3vw; box-shadow: 1px 1px 4px gainsboro; animation: switchOff 0.4s forwards; } .switch .on { background: #565656; animation: switchOn 0.4s forwards; } @keyframes switchOn { 0% { right: 50%; } 100% { right: 0%; } } @keyframes switchOff { 0% { left: 50%; } 100% { left: 0%; } } .tabs_row { display: flex; justify-content: space-between; padding: 2vw; margin-top: 8vw; } .tabs_row .tab { list-style: none; position: relative; width: 30%; text-align: center; } .tabs_row .tab::after { content: ""; position: absolute; bottom: -0.5vw; left: 0; background: #efefef; height: 0.2vw; width: 100%; border-radius: 5vw; } .tabs_row .tab_name { color: #e0e0e0; font-size: 1vw; font-weight: 300; } .tabs_row .active::after { background: gray; } .tabs_row .active .tab_name { color: gray; } </style> </head> <body > <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script> <script > function _defineProperty(obj, key, value) {if (key in obj) {Object..........完整代码请登录后点击上方下载按钮下载查看
网友评论0