From ab3e978e94d845de2ab066a2d5db034937fa936d Mon Sep 17 00:00:00 2001 From: Gitshaoxiang <1026025056@qq.com> Date: Thu, 5 Mar 2020 18:43:58 +0800 Subject: [PATCH] fix easyloader example play video bug --- docs/assets/css/main-min.css | 1102 ++++++++++++++++++++- docs/assets/css/main.css | 1525 +++++++++++++++--------------- docs/index.html | 9 +- docs/zh_CN/core/m5stickt.md | 34 +- docs/zh_CN/module/nb-iot.md | 5 +- docs/zh_CN/module/nb-iot_plus.md | 36 +- 6 files changed, 1903 insertions(+), 808 deletions(-) diff --git a/docs/assets/css/main-min.css b/docs/assets/css/main-min.css index 3017a6c1..a625721d 100644 --- a/docs/assets/css/main-min.css +++ b/docs/assets/css/main-min.css @@ -1 +1,1101 @@ -:root{--theme-color:hsl(204,90%,45%)}a{text-decoration:none !important}img{z-index:51}.markdown-section{max-width:80%;margin-top:50px}.markdown-section a{color:var(--theme-color,#42b983)}.markdown-section iframe[src*="buttons.github.io"]{margin:0}body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section{max-width:100%;padding:0}body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section{max-width:100%;padding:0}body[data-page="zh_CN/arduino/arduino_home_page.md"] article.markdown-section{max-width:100%;padding:0}body[data-page="en/arduino/arduino_home_page.md"] article.markdown-section{max-width:100%;padding:0}.pic{width:30%}.video_size{width:50%}.uiflow_banner{position:relative}.row a{color:white;text-decoration:none}.row a:hover{color:white;text-decoration:none}.uiflow_p{height:100px}.item{width:150px;margin-right:10px;margin-top:10px;margin-bottom:10px;display:inline-block;position:relative;cursor:pointer;transition:box-shadow .3s;text-decoration:none;background-color:white}.related_links{position:fixed;top:35%;right:0;z-index:900;width:50px}.related_links a{display:block;width:50px;height:50px;text-decoration:none;transition:all .25s ease;float:right}.related_links a:first-child{border-top-left-radius:3px;background-color:#76c5f0}.related_links a:nth-child(2){background-color:#007cc2}.related_links a:nth-child(3){background-color:#dc214c}.related_links a:nth-child(4){border-bottom-left-radius:3px;background-color:#1f1a17}.related_links a:hover{width:90px}.related_links a img{position:relative;top:5px;left:5px;width:40px}.related_links a:nth-child(4) img{top:3.5px;left:3.5px;width:43px}.related_links div img{position:relative;top:10px;left:0;width:50px;transition:all .25s ease}.related_links div img:hover{transform:scale(1.05)}@media screen and (max-width:768px){.related_links{display:none}}.item-title{text-align:center;margin-top:10px;margin-bottom:10px}.item a{color:black;text-decoration:none}.item a:hover{text-decoration:none}.dropdown{display:inline-block;transition:all .25s ease;color:#343a40}.dropdown div{position:absolute;overflow:hidden;height:0;background-color:#fff;transition:all .25s ease;left:-50px;text-align:center;top:40px;z-index:1001;min-width:10rem}.dropdown:hover{box-shadow:0 2px 0 0 #007bff;color:#007bff}.dropdown:hover div{padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;list-style:none;background-clip:padding-box;height:max-content;box-shadow:0 12px 11px 0 #888}.dropdown div a:hover{color:#007bff !important}.dropdown div a:active{background-color:#ccc !important}.mask{position:absolute;top:0;left:0;width:150px;height:206px;background:rgba(0,0,0,0.7);color:#fff;opacity:0}.mask h3{text-align:center}.item a:hover .mask{opacity:1}.mask-btn1{position:relative;top:60px;left:30px}.mask-btn2{position:relative;top:87px;left:30px}.product_list div.btn-group-vertical{display:none}.product_list:hover div.btn-group-vertical{position:fixed;display:block;margin:0;z-index:9999}.item:hover{box-shadow:0 0 10px #6ab2ff}main>.content{margin:0}div.card-img-overlay{background-color:rgba(0,0,0,0.6)}div.card-img-overlay:hover{background-color:rgba(0,0,0,0.25);color:blue !important}.banner{width:100%;height:300px;background-color:#fffbff}.d-flex{z-index:50;position:fixed;top:0;right:0;left:0}.btn-toggle{display:none}.pc-navigation{position:fixed;top:20%;left:4%}.pc-navigation button{font-weight:bold;height:53px}.mb-navigation{display:none}.product_page{margin-left:110px;margin-top:100px}.search{display:none;position:fixed;z-index:1001;top:20px;left:20%;height:56px;line-height:0;padding:0 20px}.search input{border-radius:40px;border:0;outline:0;background:#eee;width:240px;height:38px;padding:0 0 0 20px}.search .search-btn{position:absolute;top:10px;right:40px;border-radius:100px;width:30px;height:30px}.search i{position:absolute;top:6px;right:7px;font-size:18px}body[data-page="index.md"] .search{display:inline-block}body[data-page="en/faq.md"] .search{display:inline-block}body[data-page="index.md"] .markdown-section{margin-top:25px}body[data-page="zh_CN/README.md"] .search{display:inline-block}body[data-page="zh_CN/faq.md"] .search{display:inline-block}body[data-page="zh_CN/README.md"] .markdown-section{margin-top:25px}@media screen and (max-width:768px){.dropdown{display:block}.d-flex{display:none !important}.d-flex.open{display:block !important;position:fixed;top:50px;right:0;width:50%;background-color:white;z-index:1000;left:inherit}.d-flex.open>h5{display:none}.d-flex.open nav a{display:block}.btn-toggle{display:block;position:fixed;right:0;top:0;width:100%;height:50px;z-index:1000;box-shadow:1px 0 10px 0 #888;background-color:white}.btn-toggle::before,.btn-toggle::after{content:"";position:absolute;transition:all .25s ease;width:30px;height:2px;background-color:gray}.btn-toggle::before{top:10px;right:10px;box-shadow:0 12px 0 gray}.btn-toggle::after{top:34px;right:10px}.btn-toggle.open::before{top:25px;right:10px;transform:rotate(45deg);box-shadow:none}.btn-toggle.open::after{top:25px;right:10px;transform:rotate(-45deg)}.markdown-section{max-width:100%;margin-top:50px;padding-left:45px;padding-right:45px}.banner div.card-img-overlay h4{font-size:1.3em;color:#fff;text-align:center}.banner{margin-left:8px;margin-right:0;width:130px}.item{width:130px;margin-left:5px;margin-right:5px;margin-top:10px;margin-bottom:10px;display:inline-block;position:relative;cursor:pointer;transition:box-shadow .3s;text-decoration:none}.uiflow_p{height:auto}.pc-navigation{display:none}.product_page{margin-left:0;margin-top:0}.mb-navigation{z-index:9999;position:fixed;top:0;left:0;right:50px;height:50px;color:#343a40;border-radius:0;background:white;line-height:inherit;display:block;box-shadow:-12px -1px 10px #888}.nav-content{position:fixed;top:50px;left:0;right:0;z-index:999}.search{position:fixed;z-index:1001;top:6px;left:-2px}.mask{display:none;width:130px;height:186px}.mask-btn1{position:relative;top:50px;left:23px}.mask-btn2{position:relative;top:75px;left:23px}.video_size{width:100%}}#loading{position:fixed;left:0;top:0;width:100%;height:100%;background:white;z-index:9999}.demo3{width:4px;height:4px;border-radius:2px;background:#007bff;position:absolute;animation:demo3 linear .8s infinite;-webkit-animation:demo3 linear .8s infinite}.demo3:nth-child(1){left:24px;top:2px;animation-delay:0s}.demo3:nth-child(2){left:40px;top:8px;animation-delay:.1s}.demo3:nth-child(3){left:47px;top:24px;animation-delay:.1s}.demo3:nth-child(4){left:40px;top:40px;animation-delay:.2s}.demo3:nth-child(5){left:24px;top:47px;animation-delay:.4s}.demo3:nth-child(6){left:8px;top:40px;animation-delay:.5s}.demo3:nth-child(7){left:2px;top:24px;animation-delay:.6s}.demo3:nth-child(8){left:8px;top:8px;animation-delay:.7s}@keyframes demo3{0%,40%,100%{transform:scale(1)}20%{transform:scale(3)}}@-webkit-keyframes demo3{0%,40%,100%{transform:scale(1)}20%{transform:scale(3)}}.loading-flex{position:absolute;top:45%;left:50%}@media screen and (max-width:768px){.loading-flex{position:absolute;top:45%;left:45%}.pic{width:50%}}.table_center tr{text-align:center}.table-wrapper{box-shadow:-7px 0 20px 0 #888}.fl-table{border-radius:5px;font-size:12px;font-weight:normal;border:0;border-collapse:collapse;width:100%;max-width:100%;white-space:nowrap;background-color:white}.fl-table td,.fl-table th{text-align:center !important;padding:18px}.fl-table td{border-right:1px solid #f8f8f8;font-size:12px}.fl-table thead th{color:#fff;background:#4fc3a1}.fl-table thead th:nth-child(odd){color:#fff;background:#324960}.fl-table tr:nth-child(even){background:#f8f8f8}@media screen and (max-width:768px){.fl-table{display:block !important;width:100%;overflow-x:auto}.fl-table thead,.fl-table tbody,.fl-table thead th{display:block}.fl-table thead th:last-child{border-bottom:0}.fl-table thead{float:left;display:block !important}.fl-table tbody{width:auto;position:relative;overflow-x:auto}.fl-table td,.fl-table th{padding:20px .625em .625em .625em;height:60px;vertical-align:middle;box-sizing:border-box;overflow-x:auto;overflow-y:auto;width:120px;font-size:13px;text-overflow:ellipsis}.fl-table thead th{text-align:left;border-bottom:1px solid #f7f7f9}.fl-table tbody tr{display:table-cell !important}.fl-table tbody tr:nth-child(odd){background:0}.fl-table tr:nth-child(even){background:transparent}.fl-table tr td:nth-child(odd){background:#f8f8f8;border-right:1px solid #e6e4e4}.fl-table tr td:nth-child(even){border-right:1px solid #e6e4e4}.fl-table tbody td{display:block;text-align:center}}mark{background-color:#888;color:white}.faq-class{border:1px solid #d9d9d9;margin-bottom:1.5%;background-color:#d9d9d9;padding:20px;border-radius:10px;height:auto}.faq-class h5{color:#666 !important;font-size:16px !important;position:relative;margin:0 !important}.search-tips{border:1px solid #d9d9d9;margin-bottom:1.5%;background-color:#d9d9d9;padding:20px;border-radius:10px;height:auto}.search-tips h5{color:#666 !important;font-size:16px !important;position:relative;margin:0 !important}.faq-item{border:1px solid #d9d9d9;margin-bottom:1.5%;background-color:#fff;padding:20px;border-radius:10px;height:auto}.faq-title{color:#666 !important;font-size:16px !important;position:relative;margin:0 !important;padding-right:30px !important}.faq-title::before{background-color:#007bff;content:"";width:20px;height:20px;border-radius:20px;position:absolute;right:0;top:0;bottom:0;margin:auto}.faq-button{height:0;margin:0 !important}.faq-button::after{background-color:white;content:"";width:12px;height:2px;position:absolute;top:0;right:4px;bottom:0;margin:auto;z-index:10}.faq-button::before{background-color:white;content:"";width:12px;height:2px;position:absolute;top:0;right:4px;bottom:0;margin:auto;transform:rotate(90deg);z-index:10}.faq-answer{border:0;outline:0;font-weight:400;max-height:0;overflow:auto;transition:max-height .35s ease}.faq-answer div{padding-top:30px;color:#666 !important}.faq-answer div span{display:block}.faq-item .faq-title.open+.faq-answer{max-height:600px}.faq-img{margin-top:20px;margin-bottom:20px;width:40%;display:inline-block}.cases-item{border:1px solid #d9d9d9;margin-bottom:1.5%;background-color:#fff;padding:20px;border-radius:10px;height:auto}.cases-title{color:#666 !important;font-size:16px !important;position:relative;margin:0 !important;padding-right:30px !important}.anchor-box{position:fixed;top:30%;left:25px;display:-webkit-flex;display:flex;flex-direction:column;z-index:50;width:max-content}.anchor-box img{width:30px;height:31px;margin-left:10px;margin-top:2px}.anchor-box svg{margin-left:10px;margin-top:2px}.anchor-box>a{display:-webkit-flex;display:flex;flex-direction:row;height:40px;width:180px;padding:2px 10px;text-decoration:none;outline:0;border:0;border-radius:25px;color:#fff !important;font-size:16px;line-height:1.2;transition:all .3s ease;background-color:#333;box-shadow:4px 4px 8px 0 #837878;-moz-box-shadow:4px 4px 8px 0 #837878;-webkit-box-shadow:4px 4px 8px 0 #837878;margin-top:12px}.anchor-box>a:hover{background-color:#007aff !important;box-shadow:4px 4px 8px 0 #aeaeae !important;-moz-box-shadow:4px 4px 8px 0 #aeaeae !important;-webkit-box-shadow:4px 4px 8px 0 #aeaeae !important}.anchor-box span{width:100px;text-align:center;margin-left:6px}.anchor-box svg{margin-left:12px;margin-top:4px}.anchor-active{background-color:#007aff !important;box-shadow:4px 4px 8px 0 #aeaeae !important;-moz-box-shadow:4px 4px 8px 0 #aeaeae !important;-webkit-box-shadow:4px 4px 8px 0 #aeaeae !important}.anchor-quiet{background-color:#333 !important;box-shadow:4px 4px 8px 0 #837878 !important;-moz-box-shadow:4px 4px 8px 0 #837878 !important;-webkit-box-shadow:4px 4px 8px 0 #837878 !important}@media screen and (max-width:1580px){.anchor-box{left:10px}}@media screen and (max-width:1445px){.anchor-box{left:-10px}}@media screen and (max-width:1260px){.anchor-box{left:-35px}}@media screen and (max-width:1000px){.anchor-box{left:-60px}}@media screen and (max-width:768px){.anchor-box{position:fixed;top:45%;left:auto;right:-120px;display:-webkit-flex;display:flex;flex-direction:column;z-index:9999}.anchor-active{float:left;transform:translateX(-100px) !important}.anchor-quiet{float:left;transform:translateX(0px) !important}}.easyloader-box{display:flex;flex-direction:row;width:80%}.easyloader-box>div{position:relative;width:50%;overflow:hidden}.easyloader-box img,video{width:100%}.easyloader-box p{margin-left:10px;color:white}.easyloader-mask{position:absolute;right:0;bottom:6px;height:100%;width:100%;background-color:black;opacity:.7;transition:all .3s;display:flex;flex-direction:column;justify-content:center}.video_play{bottom:-100%}.easyloader-btn{position:absolute;display:flex;flex-direction:row;justify-content:space-around;bottom:6%;width:100%}.easyloader-btn a{width:90px;text-align:center;padding:2px 10px;background-color:#007bff;color:white !important;border-radius:10px}.easyloader-btn a:hover{background-color:#45a9ff}@media screen and (max-width:768px){.easyloader-box{flex-direction:column;width:100%}.easyloader-box>div{width:100%}} +:root { + --theme-color: hsl(204,90%,45%) +} + +a { + text-decoration: none !important +} + +img { + z-index: 51 +} + +.markdown-section { + max-width: 80%; + margin-top: 50px +} + +.markdown-section a { + color: var(--theme-color,#42b983) +} + +.markdown-section iframe[src*="buttons.github.io"] { + margin: 0 +} + +body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section { + max-width: 100%; + padding: 0 +} + +body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section { + max-width: 100%; + padding: 0 +} + +body[data-page="zh_CN/arduino/arduino_home_page.md"] article.markdown-section { + max-width: 100%; + padding: 0 +} + +body[data-page="en/arduino/arduino_home_page.md"] article.markdown-section { + max-width: 100%; + padding: 0 +} + +.pic { + width: 30% +} + +.video_size { + width: 50% +} + +.uiflow_banner { + position: relative +} + +.row a { + color: white; + text-decoration: none +} + +.row a:hover { + color: white; + text-decoration: none +} + +.uiflow_p { + height: 100px +} + +.item { + width: 150px; + margin-right: 10px; + margin-top: 10px; + margin-bottom: 10px; + display: inline-block; + position: relative; + cursor: pointer; + transition: box-shadow .3s; + text-decoration: none; + background-color: white +} + +.related_links { + position: fixed; + top: 35%; + right: 0; + z-index: 900; + width: 50px +} + +.related_links a { + display: block; + width: 50px; + height: 50px; + text-decoration: none; + transition: all .25s ease; + float: right +} + +.related_links a:first-child { + border-top-left-radius: 3px; + background-color: #76c5f0 +} + +.related_links a:nth-child(2) { + background-color: #007cc2 +} + +.related_links a:nth-child(3) { + background-color: #dc214c +} + +.related_links a:nth-child(4) { + border-bottom-left-radius: 3px; + background-color: #1f1a17 +} + +.related_links a:hover { + width: 90px +} + +.related_links a img { + position: relative; + top: 5px; + left: 5px; + width: 40px +} + +.related_links a:nth-child(4) img { + top: 3.5px; + left: 3.5px; + width: 43px +} + +.related_links div img { + position: relative; + top: 10px; + left: 0; + width: 50px; + transition: all .25s ease +} + +.related_links div img:hover { + transform: scale(1.05) +} + +@media screen and (max-width:768px) { + .related_links { + display: none + } +} + +.item-title { + text-align: center; + margin-top: 10px; + margin-bottom: 10px +} + +.item a { + color: black; + text-decoration: none +} + +.item a:hover { + text-decoration: none +} + +.dropdown { + display: inline-block; + transition: all .25s ease; + color: #343a40 +} + +.dropdown div { + position: absolute; + overflow: hidden; + height: 0; + background-color: #fff; + transition: all .25s ease; + left: -50px; + text-align: center; + top: 40px; + z-index: 1001; + min-width: 10rem +} + +.dropdown:hover { + box-shadow: 0 2px 0 0 #007bff; + color: #007bff +} + +.dropdown:hover div { + padding: .5rem 0; + margin: .125rem 0 0; + font-size: 1rem; + color: #212529; + list-style: none; + background-clip: padding-box; + height: max-content; + box-shadow: 0 12px 11px 0 #888 +} + +.dropdown div a:hover { + color: #007bff !important +} + +.dropdown div a:active { + background-color: #ccc !important +} + +.mask { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 206px; + background: rgba(0,0,0,0.7); + color: #fff; + opacity: 0 +} + +.mask h3 { + text-align: center +} + +.item a:hover .mask { + opacity: 1 +} + +.mask-btn1 { + position: relative; + top: 60px; + left: 30px +} + +.mask-btn2 { + position: relative; + top: 87px; + left: 30px +} + +.product_list div.btn-group-vertical { + display: none +} + +.product_list:hover div.btn-group-vertical { + position: fixed; + display: block; + margin: 0; + z-index: 9999 +} + +.item:hover { + box-shadow: 0 0 10px #6ab2ff +} + +main>.content { + margin: 0 +} + +div.card-img-overlay { + background-color: rgba(0,0,0,0.6) +} + +div.card-img-overlay:hover { + background-color: rgba(0,0,0,0.25); + color: blue !important +} + +.banner { + width: 100%; + height: 300px; + background-color: #fffbff +} + +.d-flex { + z-index: 50; + position: fixed; + top: 0; + right: 0; + left: 0 +} + +.btn-toggle { + display: none +} + +.pc-navigation { + position: fixed; + top: 20%; + left: 4% +} + +.pc-navigation button { + font-weight: bold; + height: 53px +} + +.mb-navigation { + display: none +} + +.product_page { + margin-left: 110px; + margin-top: 100px +} + +.search { + display: none; + position: fixed; + z-index: 1001; + top: 20px; + left: 20%; + height: 56px; + line-height: 0; + padding: 0 20px +} + +.search input { + border-radius: 40px; + border: 0; + outline: 0; + background: #eee; + width: 240px; + height: 38px; + padding: 0 0 0 20px +} + +.search .search-btn { + position: absolute; + top: 10px; + right: 40px; + border-radius: 100px; + width: 30px; + height: 30px +} + +.search i { + position: absolute; + top: 6px; + right: 7px; + font-size: 18px +} + +body[data-page="index.md"] .search { + display: inline-block +} + +body[data-page="en/faq.md"] .search { + display: inline-block +} + +body[data-page="index.md"] .markdown-section { + margin-top: 25px +} + +body[data-page="zh_CN/README.md"] .search { + display: inline-block +} + +body[data-page="zh_CN/faq.md"] .search { + display: inline-block +} + +body[data-page="zh_CN/README.md"] .markdown-section { + margin-top: 25px +} + +@media screen and (max-width:768px) { + .dropdown { + display: block + } + + .d-flex { + display: none !important + } + + .d-flex.open { + display: block !important; + position: fixed; + top: 50px; + right: 0; + width: 50%; + background-color: white; + z-index: 1000; + left: inherit + } + + .d-flex.open>h5 { + display: none + } + + .d-flex.open nav a { + display: block + } + + .btn-toggle { + display: block; + position: fixed; + right: 0; + top: 0; + width: 100%; + height: 50px; + z-index: 1000; + box-shadow: 1px 0 10px 0 #888; + background-color: white + } + + .btn-toggle::before,.btn-toggle::after { + content: ""; + position: absolute; + transition: all .25s ease; + width: 30px; + height: 2px; + background-color: gray + } + + .btn-toggle::before { + top: 10px; + right: 10px; + box-shadow: 0 12px 0 gray + } + + .btn-toggle::after { + top: 34px; + right: 10px + } + + .btn-toggle.open::before { + top: 25px; + right: 10px; + transform: rotate(45deg); + box-shadow: none + } + + .btn-toggle.open::after { + top: 25px; + right: 10px; + transform: rotate(-45deg) + } + + .markdown-section { + max-width: 100%; + margin-top: 50px; + padding-left: 45px; + padding-right: 45px + } + + .banner div.card-img-overlay h4 { + font-size: 1.3em; + color: #fff; + text-align: center + } + + .banner { + margin-left: 8px; + margin-right: 0; + width: 130px + } + + .item { + width: 130px; + margin-left: 5px; + margin-right: 5px; + margin-top: 10px; + margin-bottom: 10px; + display: inline-block; + position: relative; + cursor: pointer; + transition: box-shadow .3s; + text-decoration: none + } + + .uiflow_p { + height: auto + } + + .pc-navigation { + display: none + } + + .product_page { + margin-left: 0; + margin-top: 0 + } + + .mb-navigation { + z-index: 9999; + position: fixed; + top: 0; + left: 0; + right: 50px; + height: 50px; + color: #343a40; + border-radius: 0; + background: white; + line-height: inherit; + display: block; + box-shadow: -12px -1px 10px #888 + } + + .nav-content { + position: fixed; + top: 50px; + left: 0; + right: 0; + z-index: 999 + } + + .search { + position: fixed; + z-index: 1001; + top: 6px; + left: -2px + } + + .mask { + display: none; + width: 130px; + height: 186px + } + + .mask-btn1 { + position: relative; + top: 50px; + left: 23px + } + + .mask-btn2 { + position: relative; + top: 75px; + left: 23px + } + + .video_size { + width: 100% + } +} + +#loading { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: white; + z-index: 9999 +} + +.demo3 { + width: 4px; + height: 4px; + border-radius: 2px; + background: #007bff; + position: absolute; + animation: demo3 linear .8s infinite; + -webkit-animation: demo3 linear .8s infinite +} + +.demo3:nth-child(1) { + left: 24px; + top: 2px; + animation-delay: 0s +} + +.demo3:nth-child(2) { + left: 40px; + top: 8px; + animation-delay: .1s +} + +.demo3:nth-child(3) { + left: 47px; + top: 24px; + animation-delay: .1s +} + +.demo3:nth-child(4) { + left: 40px; + top: 40px; + animation-delay: .2s +} + +.demo3:nth-child(5) { + left: 24px; + top: 47px; + animation-delay: .4s +} + +.demo3:nth-child(6) { + left: 8px; + top: 40px; + animation-delay: .5s +} + +.demo3:nth-child(7) { + left: 2px; + top: 24px; + animation-delay: .6s +} + +.demo3:nth-child(8) { + left: 8px; + top: 8px; + animation-delay: .7s +} + +@keyframes demo3 { + 0%,40%,100% { + transform: scale(1) + } + + 20% { + transform: scale(3) + } +} + +@-webkit-keyframes demo3 { + 0%,40%,100% { + transform: scale(1) + } + + 20% { + transform: scale(3) + } +} + +.loading-flex { + position: absolute; + top: 45%; + left: 50% +} + +@media screen and (max-width:768px) { + .loading-flex { + position: absolute; + top: 45%; + left: 45% + } + + .pic { + width: 50% + } +} + +.table_center tr { + text-align: center +} + +.table-wrapper { + box-shadow: -7px 0 20px 0 #888 +} + +.fl-table { + border-radius: 5px; + font-size: 12px; + font-weight: normal; + border: 0; + border-collapse: collapse; + width: 100%; + max-width: 100%; + white-space: nowrap; + background-color: white +} + +.fl-table td,.fl-table th { + text-align: center !important; + padding: 18px +} + +.fl-table td { + border-right: 1px solid #f8f8f8; + font-size: 12px +} + +.fl-table thead th { + color: #fff; + background: #4fc3a1 +} + +.fl-table thead th:nth-child(odd) { + color: #fff; + background: #324960 +} + +.fl-table tr:nth-child(even) { + background: #f8f8f8 +} + +@media screen and (max-width:768px) { + .fl-table { + display: block !important; + width: 100%; + overflow-x: auto + } + + .fl-table thead,.fl-table tbody,.fl-table thead th { + display: block + } + + .fl-table thead th:last-child { + border-bottom: 0 + } + + .fl-table thead { + float: left; + display: block !important + } + + .fl-table tbody { + width: auto; + position: relative; + overflow-x: auto + } + + .fl-table td,.fl-table th { + padding: 20px .625em .625em .625em; + height: 60px; + vertical-align: middle; + box-sizing: border-box; + overflow-x: auto; + overflow-y: auto; + width: 120px; + font-size: 13px; + text-overflow: ellipsis + } + + .fl-table thead th { + text-align: left; + border-bottom: 1px solid #f7f7f9 + } + + .fl-table tbody tr { + display: table-cell !important + } + + .fl-table tbody tr:nth-child(odd) { + background: 0 + } + + .fl-table tr:nth-child(even) { + background: transparent + } + + .fl-table tr td:nth-child(odd) { + background: #f8f8f8; + border-right: 1px solid #e6e4e4 + } + + .fl-table tr td:nth-child(even) { + border-right: 1px solid #e6e4e4 + } + + .fl-table tbody td { + display: block; + text-align: center + } +} + +mark { + background-color: #888; + color: white +} + +.faq-class { + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #d9d9d9; + padding: 20px; + border-radius: 10px; + height: auto +} + +.faq-class h5 { + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important +} + +.search-tips { + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #d9d9d9; + padding: 20px; + border-radius: 10px; + height: auto +} + +.search-tips h5 { + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important +} + +.faq-item { + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #fff; + padding: 20px; + border-radius: 10px; + height: auto +} + +.faq-title { + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important; + padding-right: 30px !important +} + +.faq-title::before { + background-color: #007bff; + content: ""; + width: 20px; + height: 20px; + border-radius: 20px; + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: auto +} + +.faq-button { + height: 0; + margin: 0 !important +} + +.faq-button::after { + background-color: white; + content: ""; + width: 12px; + height: 2px; + position: absolute; + top: 0; + right: 4px; + bottom: 0; + margin: auto; + z-index: 10 +} + +.faq-button::before { + background-color: white; + content: ""; + width: 12px; + height: 2px; + position: absolute; + top: 0; + right: 4px; + bottom: 0; + margin: auto; + transform: rotate(90deg); + z-index: 10 +} + +.faq-answer { + border: 0; + outline: 0; + font-weight: 400; + max-height: 0; + overflow: auto; + transition: max-height .35s ease +} + +.faq-answer div { + padding-top: 30px; + color: #666 !important +} + +.faq-answer div span { + display: block +} + +.faq-item .faq-title.open+.faq-answer { + max-height: 600px +} + +.faq-img { + margin-top: 20px; + margin-bottom: 20px; + width: 40%; + display: inline-block +} + +.cases-item { + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #fff; + padding: 20px; + border-radius: 10px; + height: auto +} + +.cases-title { + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important; + padding-right: 30px !important +} + +.anchor-box { + position: fixed; + top: 30%; + left: 25px; + display: -webkit-flex; + display: flex; + flex-direction: column; + z-index: 50; + width: max-content +} + +.anchor-box img { + width: 30px; + height: 31px; + margin-left: 10px; + margin-top: 2px +} + +.anchor-box svg { + margin-left: 10px; + margin-top: 2px +} + +.anchor-box>a { + display: -webkit-flex; + display: flex; + flex-direction: row; + height: 40px; + width: 180px; + padding: 2px 10px; + text-decoration: none; + outline: 0; + border: 0; + border-radius: 25px; + color: #fff !important; + font-size: 16px; + line-height: 1.2; + transition: all .3s ease; + background-color: #333; + box-shadow: 4px 4px 8px 0 #837878; + -moz-box-shadow: 4px 4px 8px 0 #837878; + -webkit-box-shadow: 4px 4px 8px 0 #837878; + margin-top: 12px +} + +.anchor-box>a:hover { + background-color: #007aff !important; + box-shadow: 4px 4px 8px 0 #aeaeae !important; + -moz-box-shadow: 4px 4px 8px 0 #aeaeae !important; + -webkit-box-shadow: 4px 4px 8px 0 #aeaeae !important +} + +.anchor-box span { + width: 100px; + text-align: center; + margin-left: 6px +} + +.anchor-box svg { + margin-left: 12px; + margin-top: 4px +} + +.anchor-active { + background-color: #007aff !important; + box-shadow: 4px 4px 8px 0 #aeaeae !important; + -moz-box-shadow: 4px 4px 8px 0 #aeaeae !important; + -webkit-box-shadow: 4px 4px 8px 0 #aeaeae !important +} + +.anchor-quiet { + background-color: #333 !important; + box-shadow: 4px 4px 8px 0 #837878 !important; + -moz-box-shadow: 4px 4px 8px 0 #837878 !important; + -webkit-box-shadow: 4px 4px 8px 0 #837878 !important +} + +@media screen and (max-width:1580px) { + .anchor-box { + left: 10px + } +} + +@media screen and (max-width:1445px) { + .anchor-box { + left: -10px + } +} + +@media screen and (max-width:1260px) { + .anchor-box { + left: -35px + } +} + +@media screen and (max-width:1000px) { + .anchor-box { + left: -60px + } +} + +@media screen and (max-width:768px) { + .anchor-box { + position: fixed; + top: 45%; + left: auto; + right: -120px; + display: -webkit-flex; + display: flex; + flex-direction: column; + z-index: 9999 + } + + .anchor-active { + float: left; + transform: translateX(-100px) !important + } + + .anchor-quiet { + float: left; + transform: translateX(0px) !important + } +} + +.easyloader-box { + display: flex; + flex-direction: row; + width: 80% +} + +.easyloader-box>div { + position: relative; + width: 50%; + overflow: hidden +} + +.easyloader-box img,video { + width: 100% +} + +.easyloader-box p { + margin: 0 15px; + color: white +} + +.easyloader-mask { + position: absolute; + right: 0; + bottom: 6px; + height: 100%; + width: 100%; + background-color: black; + opacity: .7; + transition: all .3s; + display: flex; + flex-direction: column; + justify-content: center +} + +.video_play { + bottom: -100% +} + +.easyloader-btn { + position: absolute; + display: flex; + flex-direction: row; + justify-content: space-around; + bottom: 6%; + width: 100% +} + +.easyloader-btn a { + width: 90px; + text-align: center; + padding: 2px 10px; + background-color: #007bff; + color: white !important; + border-radius: 10px +} + +.easyloader-btn a:hover { + background-color: #45a9ff +} + +@media screen and (max-width:768px) { + .easyloader-box { + flex-direction: column; + width: 100% + } + + .easyloader-box>div { + width: 100% + } +} diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css index 3fad48e6..7c08ba61 100755 --- a/docs/assets/css/main.css +++ b/docs/assets/css/main.css @@ -1,1128 +1,1101 @@ :root { - --theme-color: hsl(204, 90%, 45%); + --theme-color: hsl(204,90%,45%) } a { - text-decoration: none !important; + text-decoration: none !important } img { - - z-index: 51; + z-index: 51 } -/* .content { - background-color: #ececec;; -} */ - .markdown-section { - max-width: 80%; - margin-top: 50px; - /* padding-left:80px; - padding-right:0px; */ + max-width: 80%; + margin-top: 50px } .markdown-section a { - color: var(--theme-color, #42b983); + color: var(--theme-color,#42b983) } .markdown-section iframe[src*="buttons.github.io"] { - margin: 0; + margin: 0 } - body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section { - max-width: 100%; - padding: 0; + max-width: 100%; + padding: 0 } body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section { - max-width: 100%; - padding: 0; + max-width: 100%; + padding: 0 } - body[data-page="zh_CN/arduino/arduino_home_page.md"] article.markdown-section { - max-width: 100%; - padding: 0; + max-width: 100%; + padding: 0 } body[data-page="en/arduino/arduino_home_page.md"] article.markdown-section { - max-width: 100%; - padding: 0; + max-width: 100%; + padding: 0 } -.pic{ - width:30%; +.pic { + width: 30% } .video_size { - width: 50%; + width: 50% } -.uiflow_banner{ - position: relative; +.uiflow_banner { + position: relative } -.row a{ - color:white; - text-decoration:none; +.row a { + color: white; + text-decoration: none } -.row a:hover{ - color:white; - text-decoration:none; +.row a:hover { + color: white; + text-decoration: none } -.uiflow_p{ - height: 100px; +.uiflow_p { + height: 100px } .item { - width: 150px; - margin-right: 10px; - margin-top: 10px; - margin-bottom: 10px; - display: inline-block; - position: relative; - cursor: pointer; - transition: box-shadow 0.3s; - text-decoration: none; - background-color: white; + width: 150px; + margin-right: 10px; + margin-top: 10px; + margin-bottom: 10px; + display: inline-block; + position: relative; + cursor: pointer; + transition: box-shadow .3s; + text-decoration: none; + background-color: white } - - - .related_links { - - position: fixed; - top:35%; - right: 0px; - z-index: 900; - width: 50px; + position: fixed; + top: 35%; + right: 0; + z-index: 900; + width: 50px } - .related_links a { - display: block; - /* background-color: #555555; */ - width: 50px; - height: 50px; - text-decoration:none; - transition:all .25s ease; - float: right; + display: block; + width: 50px; + height: 50px; + text-decoration: none; + transition: all .25s ease; + float: right } - .related_links a:first-child { - border-top-left-radius: 3px; - background-color: #76c5f0; + border-top-left-radius: 3px; + background-color: #76c5f0 } .related_links a:nth-child(2) { - background-color: #007cc2; + background-color: #007cc2 } .related_links a:nth-child(3) { - background-color: #dc214c; + background-color: #dc214c } .related_links a:nth-child(4) { - border-bottom-left-radius: 3px; - background-color: #1f1a17; + border-bottom-left-radius: 3px; + background-color: #1f1a17 } - - .related_links a:hover { - width: 90px; + width: 90px } - .related_links a img { - position: relative; - top:5px; - left: 5px; - width: 40px; + position: relative; + top: 5px; + left: 5px; + width: 40px } -.related_links a:nth-child(4) img{ - top:3.5px; - left: 3.5px; - width: 43px; +.related_links a:nth-child(4) img { + top: 3.5px; + left: 3.5px; + width: 43px } - .related_links div img { - position: relative; - top:10px; - left: 0px; - width: 50px; - /* background-color:red ; */ - transition: all .25s ease; + position: relative; + top: 10px; + left: 0; + width: 50px; + transition: all .25s ease } .related_links div img:hover { - transform: scale(1.05); + transform: scale(1.05) } - - -@media screen and (max-width: 768px) { - .related_links { - display: none; - } +@media screen and (max-width:768px) { + .related_links { + display: none + } } .item-title { - text-align: center; - margin-top: 10px; - margin-bottom: 10px; + text-align: center; + margin-top: 10px; + margin-bottom: 10px } - .item a { - color: black; - text-decoration: none; + color: black; + text-decoration: none } .item a:hover { - text-decoration: none; + text-decoration: none } - -.dropdown{ - display: inline-block; - transition:all .25s ease; - color: #343a40; +.dropdown { + display: inline-block; + transition: all .25s ease; + color: #343a40 } -.dropdown div{ - position: absolute; - overflow: hidden; - height: 0px; - background-color: #fff; - transition:all .25s ease; - left: -50px; - text-align: center; - top: 40px; - z-index: 1001; - min-width: 10rem; - +.dropdown div { + position: absolute; + overflow: hidden; + height: 0; + background-color: #fff; + transition: all .25s ease; + left: -50px; + text-align: center; + top: 40px; + z-index: 1001; + min-width: 10rem } .dropdown:hover { - box-shadow: 0px 2px 0 0 #007bff; - color: #007bff; + box-shadow: 0 2px 0 0 #007bff; + color: #007bff } - -.dropdown:hover div{ - padding: .5rem 0; - margin: .125rem 0 0; - font-size: 1rem; - color: #212529; - list-style: none; - background-clip: padding-box; - height: max-content; - box-shadow: 0px 12px 11px 0px #888888; +.dropdown:hover div { + padding: .5rem 0; + margin: .125rem 0 0; + font-size: 1rem; + color: #212529; + list-style: none; + background-clip: padding-box; + height: max-content; + box-shadow: 0 12px 11px 0 #888 } - -.dropdown div a:hover{ - color:#007bff !important; +.dropdown div a:hover { + color: #007bff !important } -.dropdown div a:active{ - background-color:#cccccc !important; +.dropdown div a:active { + background-color: #ccc !important } - .mask { - position: absolute; - top: 0; - left: 0; - width: 150px; - height: 206px; - background: rgba(0, 0, 0, 0.7); - color: #ffffff; - opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 206px; + background: rgba(0,0,0,0.7); + color: #fff; + opacity: 0 } + .mask h3 { - text-align: center; + text-align: center } .item a:hover .mask { - opacity: 1; - + opacity: 1 } .mask-btn1 { - position:relative; - top:60px; - left:30px; + position: relative; + top: 60px; + left: 30px } .mask-btn2 { - position:relative; - top:87px; - left:30px; + position: relative; + top: 87px; + left: 30px } - .product_list div.btn-group-vertical { - display: none; + display: none } .product_list:hover div.btn-group-vertical { - position: fixed; - display: block; - margin: 0px; - z-index: 9999; + position: fixed; + display: block; + margin: 0; + z-index: 9999 } .item:hover { - box-shadow: 0px 0px 10px #6ab2ff; + box-shadow: 0 0 10px #6ab2ff } main>.content { - margin: 0px; + margin: 0 } div.card-img-overlay { - background-color: rgba(0, 0, 0, 0.6); + background-color: rgba(0,0,0,0.6) } div.card-img-overlay:hover { - background-color: rgba(0, 0, 0, 0.25); - color: blue !important; + background-color: rgba(0,0,0,0.25); + color: blue !important } - - .banner { - width: 100%; - height: 300px; - background-color: #fffbff; + width: 100%; + height: 300px; + background-color: #fffbff } - - .d-flex { - z-index: 50; - position: fixed; - top: 0; - right: 0; - left: 0; + z-index: 50; + position: fixed; + top: 0; + right: 0; + left: 0 } .btn-toggle { - display: none; + display: none } .pc-navigation { - position:fixed; - top:20%; - left:4%; + position: fixed; + top: 20%; + left: 4% } .pc-navigation button { - font-weight: bold; - height: 53px; + font-weight: bold; + height: 53px } - .mb-navigation { - display: none; + display: none } .product_page { - margin-left:110px; - margin-top:100px; + margin-left: 110px; + margin-top: 100px } -.search{ - display: none; +.search { + display: none; position: fixed; - z-index: 1001; - top: 20px; - left: 20%; + z-index: 1001; + top: 20px; + left: 20%; height: 56px; - line-height: 0px; - padding: 0 20px; -} -.search input{ + line-height: 0; + padding: 0 20px +} + +.search input { border-radius: 40px; border: 0; - outline: none; + outline: 0; background: #eee; width: 240px; - height: 38px; - padding: 0 0 0 20px; + height: 38px; + padding: 0 0 0 20px } - + .search .search-btn { - position: absolute; - top: 10px; - right: 40px; - border-radius: 100px; - width: 30px; - height: 30px; + position: absolute; + top: 10px; + right: 40px; + border-radius: 100px; + width: 30px; + height: 30px } + .search i { - position: absolute; - top: 6px; - right: 7px; - font-size: 18px; + position: absolute; + top: 6px; + right: 7px; + font-size: 18px } body[data-page="index.md"] .search { - display: inline-block; + display: inline-block } body[data-page="en/faq.md"] .search { - display: inline-block; + display: inline-block } -/* body[data-page="en/case.md"] .search { - display: inline-block; -} */ - body[data-page="index.md"] .markdown-section { - margin-top: 25px; + margin-top: 25px } body[data-page="zh_CN/README.md"] .search { - display: inline-block; + display: inline-block } body[data-page="zh_CN/faq.md"] .search { - display: inline-block; + display: inline-block } -/* body[data-page="zh_CN/case.md"] .search { - display: inline-block; -} */ - body[data-page="zh_CN/README.md"] .markdown-section { - margin-top: 25px; + margin-top: 25px } +@media screen and (max-width:768px) { + .dropdown { + display: block + } -@media screen and (max-width: 768px) { + .d-flex { + display: none !important + } - .dropdown{ - display: block; - } - .d-flex { - display: none !important; - } - .d-flex.open { - display: block !important; - position: fixed; - top: 50px; - right: 0; - width: 50%; - background-color: white; - z-index: 1000; - left: inherit; - } - .d-flex.open>h5 { - display: none; - } - .d-flex.open nav a { - display: block; - } - .btn-toggle { - display: block; - position: fixed; - right: 0; - top: 0; - width: 100%; - height: 50px; - z-index: 1000; - box-shadow: 1px 0px 10px 0px #888888; - background-color: white; - } - .btn-toggle::before, - .btn-toggle::after { - content: ""; - position: absolute; - transition: all .25s ease; - width: 30px; - height: 2px; - background-color: gray; - - } - .btn-toggle::before { - top: 10px; - right: 10px; - box-shadow: 0 12px 0 gray; - } - .btn-toggle::after { - top: 34px; - right: 10px; - } - .btn-toggle.open::before { - top: 25px; - right: 10px; - transform: rotate(45deg); - box-shadow: none; - } - .btn-toggle.open::after { - top: 25px; - right: 10px; - transform: rotate(-45deg); - } - .markdown-section { - max-width: 100%; - margin-top: 50px; - padding-left:45px; - padding-right:45px; - } - .banner div.card-img-overlay h4 { - font-size: 1.3em; - color: #fff; - text-align: center; - } - .banner { - margin-left: 8px; - margin-right: 0px; - width: 130px; - } - .item { - width: 130px; - margin-left: 5px; - margin-right: 5px; - margin-top: 10px; - margin-bottom: 10px; - display: inline-block; - position: relative; - cursor: pointer; - transition: box-shadow 0.3s; - text-decoration: none; - } - .uiflow_p{ - height: auto; - } - .pc-navigation { - display: none; - } - .product_page { - margin-left:0px; - margin-top:0px; - } - .mb-navigation { - z-index: 9999; - position: fixed; - top: 0px; - left: 0px; - right: 50px; - height: 50px; - color: #343a40; - border-radius: 0; - background: white; - line-height: inherit; - display: block; - box-shadow: -12px -1px 10px #888888; - } - .nav-content { - position: fixed; - top:50px; - left:0px; - right:0px; - z-index:999; - /* color: white; */ - } - .search { - position: fixed; - z-index: 1001; - top: 6px; - left: -2px; - } - .mask { - display: none; - width: 130px; - height: 186px; - } - .mask-btn1 { - position:relative; - top:50px; - left:23px; - } - - .mask-btn2 { - position:relative; - top:75px; - left:23px; - } - .video_size { - width: 100%; - } + .d-flex.open { + display: block !important; + position: fixed; + top: 50px; + right: 0; + width: 50%; + background-color: white; + z-index: 1000; + left: inherit + } + + .d-flex.open>h5 { + display: none + } + + .d-flex.open nav a { + display: block + } + + .btn-toggle { + display: block; + position: fixed; + right: 0; + top: 0; + width: 100%; + height: 50px; + z-index: 1000; + box-shadow: 1px 0 10px 0 #888; + background-color: white + } + + .btn-toggle::before,.btn-toggle::after { + content: ""; + position: absolute; + transition: all .25s ease; + width: 30px; + height: 2px; + background-color: gray + } + + .btn-toggle::before { + top: 10px; + right: 10px; + box-shadow: 0 12px 0 gray + } + + .btn-toggle::after { + top: 34px; + right: 10px + } + + .btn-toggle.open::before { + top: 25px; + right: 10px; + transform: rotate(45deg); + box-shadow: none + } + + .btn-toggle.open::after { + top: 25px; + right: 10px; + transform: rotate(-45deg) + } + + .markdown-section { + max-width: 100%; + margin-top: 50px; + padding-left: 45px; + padding-right: 45px + } + + .banner div.card-img-overlay h4 { + font-size: 1.3em; + color: #fff; + text-align: center + } + + .banner { + margin-left: 8px; + margin-right: 0; + width: 130px + } + + .item { + width: 130px; + margin-left: 5px; + margin-right: 5px; + margin-top: 10px; + margin-bottom: 10px; + display: inline-block; + position: relative; + cursor: pointer; + transition: box-shadow .3s; + text-decoration: none + } + + .uiflow_p { + height: auto + } + + .pc-navigation { + display: none + } + + .product_page { + margin-left: 0; + margin-top: 0 + } + + .mb-navigation { + z-index: 9999; + position: fixed; + top: 0; + left: 0; + right: 50px; + height: 50px; + color: #343a40; + border-radius: 0; + background: white; + line-height: inherit; + display: block; + box-shadow: -12px -1px 10px #888 + } + + .nav-content { + position: fixed; + top: 50px; + left: 0; + right: 0; + z-index: 999 + } + + .search { + position: fixed; + z-index: 1001; + top: 6px; + left: -2px + } + + .mask { + display: none; + width: 130px; + height: 186px + } + + .mask-btn1 { + position: relative; + top: 50px; + left: 23px + } + + .mask-btn2 { + position: relative; + top: 75px; + left: 23px + } + + .video_size { + width: 100% + } } #loading { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: white; - z-index: 9999; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: white; + z-index: 9999 } .demo3 { - width: 4px; - height: 4px; - border-radius: 2px; - background: #007bff; - position: absolute; - animation: demo3 linear 0.8s infinite; - -webkit-animation: demo3 linear 0.8s infinite; + width: 4px; + height: 4px; + border-radius: 2px; + background: #007bff; + position: absolute; + animation: demo3 linear .8s infinite; + -webkit-animation: demo3 linear .8s infinite } .demo3:nth-child(1) { - left: 24px; - top: 2px; - animation-delay: 0s; + left: 24px; + top: 2px; + animation-delay: 0s } .demo3:nth-child(2) { - left: 40px; - top: 8px; - animation-delay: 0.1s; + left: 40px; + top: 8px; + animation-delay: .1s } .demo3:nth-child(3) { - left: 47px; - top: 24px; - animation-delay: 0.1s; + left: 47px; + top: 24px; + animation-delay: .1s } .demo3:nth-child(4) { - left: 40px; - top: 40px; - animation-delay: 0.2s; + left: 40px; + top: 40px; + animation-delay: .2s } .demo3:nth-child(5) { - left: 24px; - top: 47px; - animation-delay: 0.4s; + left: 24px; + top: 47px; + animation-delay: .4s } .demo3:nth-child(6) { - left: 8px; - top: 40px; - animation-delay: 0.5s; + left: 8px; + top: 40px; + animation-delay: .5s } .demo3:nth-child(7) { - left: 2px; - top: 24px; - animation-delay: 0.6s; + left: 2px; + top: 24px; + animation-delay: .6s } .demo3:nth-child(8) { - left: 8px; - top: 8px; - animation-delay: 0.7s; + left: 8px; + top: 8px; + animation-delay: .7s } @keyframes demo3 { - 0%, - 40%, - 100% { - transform: scale(1); - } - 20% { - transform: scale(3); - } + 0%,40%,100% { + transform: scale(1) + } + + 20% { + transform: scale(3) + } } @-webkit-keyframes demo3 { - 0%, - 40%, - 100% { - transform: scale(1); - } - 20% { - transform: scale(3); - } + 0%,40%,100% { + transform: scale(1) + } + + 20% { + transform: scale(3) + } } .loading-flex { - position: absolute; - top: 45%; - left: 50%; + position: absolute; + top: 45%; + left: 50% } -@media screen and (max-width: 768px) { - .loading-flex { - position: absolute; - top: 45%; - left: 45%; - } - .pic{ - width:50%; - } +@media screen and (max-width:768px) { + .loading-flex { + position: absolute; + top: 45%; + left: 45% + } + + .pic { + width: 50% + } } - -.table_center tr{ - text-align:center; +.table_center tr { + text-align: center } - -/* Table Styles */ - -.table-wrapper{ - box-shadow: -7px 0px 20px 0px #888888; - +.table-wrapper { + box-shadow: -7px 0 20px 0 #888 } .fl-table { - border-radius: 5px; - font-size: 12px; - font-weight: normal; - border: none; - border-collapse: collapse; - width: 100%; - max-width: 100%; - white-space: nowrap; - background-color: white; + border-radius: 5px; + font-size: 12px; + font-weight: normal; + border: 0; + border-collapse: collapse; + width: 100%; + max-width: 100%; + white-space: nowrap; + background-color: white } -.fl-table td, .fl-table th { - text-align: center !important; - padding: 18px; +.fl-table td,.fl-table th { + text-align: center !important; + padding: 18px } .fl-table td { - border-right: 1px solid #f8f8f8; - font-size: 12px; + border-right: 1px solid #f8f8f8; + font-size: 12px } .fl-table thead th { - color: #ffffff; - background: #4FC3A1; + color: #fff; + background: #4fc3a1 } - .fl-table thead th:nth-child(odd) { - color: #ffffff; - background: #324960; + color: #fff; + background: #324960 } .fl-table tr:nth-child(even) { - background: #F8F8F8; + background: #f8f8f8 } -/* Responsive */ +@media screen and (max-width:768px) { + .fl-table { + display: block !important; + width: 100%; + overflow-x: auto + } -@media screen and (max-width: 768px) { - .fl-table { - display: block !important; - width: 100%; - overflow-x: auto; - } - .fl-table thead, .fl-table tbody, .fl-table thead th { - display: block; - } - .fl-table thead th:last-child{ - border-bottom: none; - } - .fl-table thead { - float: left; - display: block !important; - } - .fl-table tbody { - width: auto; - position: relative; - overflow-x: auto; - } - .fl-table td, .fl-table th { - padding: 20px .625em .625em .625em; - height: 60px; - vertical-align: middle; - box-sizing: border-box; - overflow-x: auto; - overflow-y: auto; - width: 120px; - font-size: 13px; - text-overflow: ellipsis; - } - - .fl-table thead th { - text-align: left; - border-bottom: 1px solid #f7f7f9; - } - .fl-table tbody tr { - display: table-cell !important; - } - .fl-table tbody tr:nth-child(odd) { - background: none; - } - .fl-table tr:nth-child(even) { - background: transparent; - } - .fl-table tr td:nth-child(odd) { - background: #F8F8F8; - border-right: 1px solid #E6E4E4; - } - .fl-table tr td:nth-child(even) { - border-right: 1px solid #E6E4E4; - } - .fl-table tbody td { - display: block; - text-align: center; - } + .fl-table thead,.fl-table tbody,.fl-table thead th { + display: block + } + + .fl-table thead th:last-child { + border-bottom: 0 + } + + .fl-table thead { + float: left; + display: block !important + } + + .fl-table tbody { + width: auto; + position: relative; + overflow-x: auto + } + + .fl-table td,.fl-table th { + padding: 20px .625em .625em .625em; + height: 60px; + vertical-align: middle; + box-sizing: border-box; + overflow-x: auto; + overflow-y: auto; + width: 120px; + font-size: 13px; + text-overflow: ellipsis + } + + .fl-table thead th { + text-align: left; + border-bottom: 1px solid #f7f7f9 + } + + .fl-table tbody tr { + display: table-cell !important + } + + .fl-table tbody tr:nth-child(odd) { + background: 0 + } + + .fl-table tr:nth-child(even) { + background: transparent + } + + .fl-table tr td:nth-child(odd) { + background: #f8f8f8; + border-right: 1px solid #e6e4e4 + } + + .fl-table tr td:nth-child(even) { + border-right: 1px solid #e6e4e4 + } + + .fl-table tbody td { + display: block; + text-align: center + } } mark { - background-color: #888888; - color:white; + background-color: #888; + color: white } - - - .faq-class { - border: 1px solid #d9d9d9; - margin-bottom: 1.5%; - background-color: #d9d9d9; - padding: 20px; - border-radius: 10px; - height: auto; + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #d9d9d9; + padding: 20px; + border-radius: 10px; + height: auto } .faq-class h5 { - color: #666 !important; - font-size: 16px !important; - position: relative; - margin: 0px !important; + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important } .search-tips { - border: 1px solid #d9d9d9; - margin-bottom: 1.5%; - background-color: #d9d9d9; - padding: 20px; - border-radius: 10px; - height: auto; + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #d9d9d9; + padding: 20px; + border-radius: 10px; + height: auto } .search-tips h5 { - color: #666 !important; - font-size: 16px !important; - position: relative; - margin: 0px !important; + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important } .faq-item { - border: 1px solid #d9d9d9; - margin-bottom: 1.5%; - background-color: #ffffff; - padding: 20px; - border-radius: 10px; - height: auto; + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #fff; + padding: 20px; + border-radius: 10px; + height: auto } - .faq-title { - color: #666 !important; - font-size: 16px !important; - position: relative; - margin: 0px !important; - padding-right: 30px !important; - /* width: 500px; */ - /* overflow-x: auto; */ + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important; + padding-right: 30px !important } - .faq-title::before { - background-color: #007bff; - content: ""; - width: 20px; - height: 20px; - border-radius: 20px; - position: absolute; - right: 0; - top: 0; - bottom: 0; - margin: auto; + background-color: #007bff; + content: ""; + width: 20px; + height: 20px; + border-radius: 20px; + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: auto } - .faq-button { - height: 0px; - margin: 0px !important; + height: 0; + margin: 0 !important } - .faq-button::after { - background-color: white; - content: ""; - width: 12px; - height: 2px; - position: absolute; - top: 0px; - right: 4px; - bottom: 0px; - margin: auto; - z-index: 10; + background-color: white; + content: ""; + width: 12px; + height: 2px; + position: absolute; + top: 0; + right: 4px; + bottom: 0; + margin: auto; + z-index: 10 } .faq-button::before { - background-color: white; - content: ""; - width: 12px; - height: 2px; - position: absolute; - top: 0px; - right: 4px; - bottom: 0px; - margin: auto; - transform: rotate(90deg); - z-index: 10; + background-color: white; + content: ""; + width: 12px; + height: 2px; + position: absolute; + top: 0; + right: 4px; + bottom: 0; + margin: auto; + transform: rotate(90deg); + z-index: 10 } .faq-answer { - border: 0; - outline: 0; - font-weight: 400; - max-height: 0px; - overflow: auto; - transition: max-height .35s ease; + border: 0; + outline: 0; + font-weight: 400; + max-height: 0; + overflow: auto; + transition: max-height .35s ease } .faq-answer div { - padding-top: 30px; - color: #666 !important; + padding-top: 30px; + color: #666 !important } .faq-answer div span { - display: block; + display: block } - -.faq-item .faq-title.open + .faq-answer{ - max-height: 600px; +.faq-item .faq-title.open+.faq-answer { + max-height: 600px } .faq-img { - margin-top: 20px; - margin-bottom: 20px; - width: 40%; - display: inline-block; + margin-top: 20px; + margin-bottom: 20px; + width: 40%; + display: inline-block } - - .cases-item { - border: 1px solid #d9d9d9; - margin-bottom: 1.5%; - background-color: #ffffff; - padding: 20px; - border-radius: 10px; - height: auto; + border: 1px solid #d9d9d9; + margin-bottom: 1.5%; + background-color: #fff; + padding: 20px; + border-radius: 10px; + height: auto } .cases-title { - color: #666 !important; - font-size: 16px !important; - position: relative; - margin: 0px !important; - padding-right: 30px !important; - /* width: 500px; */ - /* overflow-x: auto; */ + color: #666 !important; + font-size: 16px !important; + position: relative; + margin: 0 !important; + padding-right: 30px !important } - - .anchor-box { - position: fixed; - top: 30%; - left: 25px; - display: -webkit-flex; - display: flex; - flex-direction:column; - z-index: 50; - width: max-content; - + position: fixed; + top: 30%; + left: 25px; + display: -webkit-flex; + display: flex; + flex-direction: column; + z-index: 50; + width: max-content } - -.anchor-box img{ - - width: 30px; - height: 31px; - margin-left: 10px; - margin-top: 2px; -} - -.anchor-box svg{ - margin-left: 10px; - margin-top:2px; -} - -.anchor-box > a { - display: -webkit-flex; - display: flex; - flex-direction: row; - height: 40px; - width: 180px; - padding: 2px 10px; - text-decoration: none; - outline: none; - border: none; - border-radius: 25px; - color: #fff !important; - font-size: 16px; - line-height: 1.2; - transition: all .3s ease; - background-color: #333; - box-shadow: 4px 4px 8px 0px #837878; - -moz-box-shadow: 4px 4px 8px 0px #837878; - -webkit-box-shadow: 4px 4px 8px 0px #837878; - margin-top: 12px; -} - -.anchor-box > a:hover { - background-color: #007aff !important; - box-shadow: 4px 4px 8px 0px #aeaeae !important; - -moz-box-shadow: 4px 4px 8px 0px #aeaeae !important; - -webkit-box-shadow: 4px 4px 8px 0px #aeaeae !important; -} - - -.anchor-box span { - width: 100px; - text-align: center; - margin-left: 6px; +.anchor-box img { + width: 30px; + height: 31px; + margin-left: 10px; + margin-top: 2px } .anchor-box svg { - margin-left: 12px; - margin-top: 4px; + margin-left: 10px; + margin-top: 2px } + +.anchor-box>a { + display: -webkit-flex; + display: flex; + flex-direction: row; + height: 40px; + width: 180px; + padding: 2px 10px; + text-decoration: none; + outline: 0; + border: 0; + border-radius: 25px; + color: #fff !important; + font-size: 16px; + line-height: 1.2; + transition: all .3s ease; + background-color: #333; + box-shadow: 4px 4px 8px 0 #837878; + -moz-box-shadow: 4px 4px 8px 0 #837878; + -webkit-box-shadow: 4px 4px 8px 0 #837878; + margin-top: 12px +} + +.anchor-box>a:hover { + background-color: #007aff !important; + box-shadow: 4px 4px 8px 0 #aeaeae !important; + -moz-box-shadow: 4px 4px 8px 0 #aeaeae !important; + -webkit-box-shadow: 4px 4px 8px 0 #aeaeae !important +} + +.anchor-box span { + width: 100px; + text-align: center; + margin-left: 6px +} + +.anchor-box svg { + margin-left: 12px; + margin-top: 4px +} + .anchor-active { - background-color: #007aff !important; - box-shadow: 4px 4px 8px 0px #aeaeae !important; - -moz-box-shadow: 4px 4px 8px 0px #aeaeae !important; - -webkit-box-shadow: 4px 4px 8px 0px #aeaeae !important; + background-color: #007aff !important; + box-shadow: 4px 4px 8px 0 #aeaeae !important; + -moz-box-shadow: 4px 4px 8px 0 #aeaeae !important; + -webkit-box-shadow: 4px 4px 8px 0 #aeaeae !important } .anchor-quiet { - background-color: #333 !important; - box-shadow: 4px 4px 8px 0px #837878 !important; - -moz-box-shadow: 4px 4px 8px 0px #837878 !important; - -webkit-box-shadow: 4px 4px 8px 0px #837878 !important; + background-color: #333 !important; + box-shadow: 4px 4px 8px 0 #837878 !important; + -moz-box-shadow: 4px 4px 8px 0 #837878 !important; + -webkit-box-shadow: 4px 4px 8px 0 #837878 !important } - - - -@media screen and (max-width: 1580px) { - .anchor-box { - left: 10px; - } +@media screen and (max-width:1580px) { + .anchor-box { + left: 10px + } } - -@media screen and (max-width: 1445px) { - .anchor-box { - left: -10px; - } +@media screen and (max-width:1445px) { + .anchor-box { + left: -10px + } } -@media screen and (max-width: 1260px) { - .anchor-box { - left: -35px; - } +@media screen and (max-width:1260px) { + .anchor-box { + left: -35px + } } -@media screen and (max-width: 1000px) { - .anchor-box { - left: -60px; - } +@media screen and (max-width:1000px) { + .anchor-box { + left: -60px + } } +@media screen and (max-width:768px) { + .anchor-box { + position: fixed; + top: 45%; + left: auto; + right: -120px; + display: -webkit-flex; + display: flex; + flex-direction: column; + z-index: 9999 + } -@media screen and (max-width: 768px) { + .anchor-active { + float: left; + transform: translateX(-100px) !important + } - .anchor-box { - position: fixed; - top: 45%; - left: auto; - right: -120px; - display: -webkit-flex; - display: flex; - flex-direction:column; - z-index: 9999; - } - - .anchor-active { - float: left; - transform: translateX(-100px) !important; - } - - .anchor-quiet { - float: left; - transform: translateX(0px) !important; - } + .anchor-quiet { + float: left; + transform: translateX(0px) !important + } } - .easyloader-box { - display: flex; - flex-direction: row; - width: 80%; + display: flex; + flex-direction: row; + width: 80% } -.easyloader-box > div { - position: relative; - width: 50%; +.easyloader-box>div { + position: relative; + width: 50%; + overflow: hidden } -.easyloader-box img { - width: 100%; +.easyloader-box img,video { + width: 100% } .easyloader-box p { - margin-left: 10px; - color: white; + margin-left: 10px; + color: white } .easyloader-mask { - position: absolute; - right: 0px; - bottom: 0px; - height: 50%; - width: 100%; - background-color: black; - opacity: 0.7; + position: absolute; + right: 0; + bottom: 6px; + height: 100%; + width: 100%; + background-color: black; + opacity: .7; + transition: all .3s; + display: flex; + flex-direction: column; + justify-content: center +} + +.video_play { + bottom: -100% } .easyloader-btn { - position: absolute; - display: flex; - flex-direction: row; - justify-content: space-around; - bottom: 6%; - width: 100%; + position: absolute; + display: flex; + flex-direction: row; + justify-content: space-around; + bottom: 6%; + width: 100% } .easyloader-btn a { - width: 90px; - text-align: center; - padding: 2px 10px; - background-color: #007bff; - color: white !important; - border-radius: 10px; + width: 90px; + text-align: center; + padding: 2px 10px; + background-color: #007bff; + color: white !important; + border-radius: 10px } .easyloader-btn a:hover { - background-color: #45a9ff; -} \ No newline at end of file + background-color: #45a9ff +} + +@media screen and (max-width:768px) { + .easyloader-box { + flex-direction: column; + width: 100% + } + + .easyloader-box>div { + width: 100% + } +} diff --git a/docs/index.html b/docs/index.html index e7cc44fe..431ee559 100755 --- a/docs/index.html +++ b/docs/index.html @@ -380,12 +380,15 @@ $(".anchor-box").append(Part_A+""+Part_B); if (anchor_name == "EASYLOADER"){ if(("#example_video").length >0) - $("#play-btn").on("click",function(){ + $("#play-btn").on("click",function(ev){ + ev.stopPropagation(); $(".easyloader-mask").toggleClass('video_play'); $("#example_video")[0].play(); }) - $("#example_video").on("click",function(){ - $(".easyloader-mask").toggleClass('video_play'); + $("#example_video").on("click",function(ev){ + ev.preventDefault(); + $(".easyloader-mask").toggleClass('video_play'); + $("#example_video")[0].pause(); }) } } diff --git a/docs/zh_CN/core/m5stickt.md b/docs/zh_CN/core/m5stickt.md index a29f60ab..695e1b86 100644 --- a/docs/zh_CN/core/m5stickt.md +++ b/docs/zh_CN/core/m5stickt.md @@ -88,13 +88,29 @@ M5StickT仅支持WIN10&Linux&MAC(10.15以下）免驱，其余操作系统则需 ## EasyLoader - +>EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序，通过简单步骤将其烧录至主控，能够进行一系列的功能验证.**(目前EasyLoader仅适用于Windows操作系统)** - - ->1.EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序，通过简单步骤将其烧录至主控，能够进行一系列的功能验证.**(目前EasyLoader仅适用于Windows操作系统)** - ->2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录.(**为M5StickC烧录时，请将波特率设置在750000或115200**) +
+
+
+
+ Windows + +
+
+
+ +
+ + +

案例描述:

+

热成像操作说明：A键切换跟踪模式，B键切换显示模式，拨轮调整灵敏度.

+
+
+
## 管脚映射 @@ -173,13 +189,7 @@ M5StickT仅支持WIN10&Linux&MAC(10.15以下）免驱，其余操作系统则需 - [Lepton enigneering datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/application/flir-lepton-engineering-datasheet_en.pdf) - [Lepton software interface description](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/application/flir-lepton-software-interface-description-document_en.pdf) - -## 相关视频 - -