<!DOCTYPE html> <html lang="<!--constStr@language-->"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><!--Title--></title> <link rel="shortcut icon" href="<!--base_path-->favicon.ico" type="image/x-icon"> <!--https://p.sfx.ms/images/favicon.ico--> <style> /* 通用样式 */ /* 用于消除默认自带样式 */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: #333; font-family: "Segoe UI", Tahoma, Arial, sans-serif; overflow: hidden; } a { text-decoration: none; } ul { list-style: none; } input[type="radio"] { margin: 0; outline: none; } /* 兼容样式 */ body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } /* 自定义样式 */ .container { margin-left: auto; margin-right: auto; max-width: 1100px; } .pull-left { float: left; } .pull-right { float: right; } /* 字体外部引用 */ @font-face { font-family: 'iconfont'; /* project id 1634400 */ src: url('//at.alicdn.com/t/font_1634400_9yg8f5s278.eot'); src: url('//at.alicdn.com/t/font_1634400_9yg8f5s278.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1634400_9yg8f5s278.woff2') format('woff2'), url('//at.alicdn.com/t/font_1634400_9yg8f5s278.woff') format('woff'), url('//at.alicdn.com/t/font_1634400_9yg8f5s278.ttf') format('truetype'), url('//at.alicdn.com/t/font_1634400_9yg8f5s278.svg#iconfont') format('svg'); } .iconfont { font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } /* header */ header { width: 100%; /*height: 88px;*/ line-height: 48px; font-size: 16px; background-color: #0078D4; } header nav { margin: 0 auto; padding: 0 10px; height: 48px; color: #FFF; box-sizing: border-box; } header nav a { color: #FFF; font-weight: 600; } header nav .lang .language { outline: none; } header .control { height: 40px; line-height: 40px; background-color: #f4f4f4; } header .control .control-item { padding-left: 10px; padding-right: 10px; } /* main */ main { position: relative; height: 100%; } main .scroll { overflow-y: scroll; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } main .main-item-list { padding-left: 32px; padding-right: 32px; height: 32px; line-height: 32px; font-size: 12px; box-sizing: border-box; } main .main-title h1 { margin: 0; padding: 32px; font-size: 20px; font-weight: 100; } main .main-items:hover { background-color: #F4F4F4; } main .main-items:hover .main-items-radio { display: inline-block!important; } main .main-item-list .inner-container { display: flex; justify-content: flex-start; width: 100%; height: 32px; border-bottom: 1px solid #FFF; box-sizing: border-box; } main .main-item-list .inner-container > div { padding-left: 12px; padding-right: 8px; box-sizing: border-box; } main .main-item-list .main-item-title { border-bottom: 1px solid #EAEAEA; } main .main-item-list .main-items-radio-box { width: 48px; height: 32px; line-height: 40px; text-align: center; } main .main-item-list .main-items-radio-box .main-items-radio { display: none; width: 18px; height: 18px; } main .main-item-list .main-items-radio-box .main-items-radio[currstatus=true] { display: block; } main .main-item-list .main-items-icon { min-width: 38px; height: 32px; line-height: 32px; text-align: center; } main .main-item-title .main-items-icon { height: 32px!important; line-height: 9px!important; } main .main-item-title .main-items-icon:hover, main .main-item-list .main-items-displayName:hover, main .main-item-list .main-items-dateModified:hover, main .main-item-list .main-items-size:hover { background-color: #EAEAEA; } main .main-item-list .main-items-icon .iconfont { font-size: 20px; } main .main-item-list .main-items-icon img { display: inline-block; width: 20px; height: 20px; } main .main-items { display: flex; justify-content: flex-start; border-bottom: 1px solid #F4F4F4; box-sizing: border-box; } main .main-item-list .main-items-displayName, main .main-item-list .main-items-fileName { width: 520px; } main .main-item-list .main-items-dateModified, main .main-item-list .main-items-dateTime { width: 250px; } main .main-item-list .main-items-size, main .main-item-list .main-items-fileSize { width: 180px; } main .main-item-list .main-items-radio-box, main .main-item-list .main-items-icon, main .main-item-list .main-items-fileName, main .main-item-list .main-items-dateTime, main .main-item-list .main-items-fileSize { padding: 11px 8px 11px 12px; height: 42px; line-height: 22px; font-family: "Microsoft Yahei UI", Verdana, Simsun, "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; /*overflow: hidden;*/ } main .main-item-list .main-items-fileName a { color: inherit; } main .main-item-list .main-items-fileName a:hover { text-decoration: underline; } .main-title-path a{vertical-align: middle;} .more-disk{ vertical-align: middle; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; } .more-disk div{ list-style:none; position:absolute; display:none;background:#ffffff;border-radius:5px;margin:0 0 0 -10px;/*padding:0 7px;*/color:#205D67;z-index:1; box-shadow: 0 0.5em 3em rgba(161,177,204,.4); } .more-disk:hover div{display:block} .more-disk div li{line-height:normal;padding: 3px 10px;} .more-disk div li a{text-decoration: none; color:rgba(0,0,0,.3);} .more-disk div li a:hover{color:rgba(0,0,0,.87);} .more-disk div li a[now]{color:rgba(0,0,0,1);} </style> </head> <body> <header> <nav class="container"> <div class="title pull-left"> <a href="<!--base_path-->"><!--Sitename--></a> </div> <div class="pull-right"> <!--LoginStart--> <a class="pull-left" onclick="/*login();*/"><!--constStr@Login--></a> <!--LoginEnd--> <!--AdminStart--> <a class="pull-left" onclick="logout();"><!--constStr@Logout--></a> <!--AdminEnd--> | <div class="pull-right lang"> <select name="language" id="language" class="language" onchange="changelanguage(this.options[this.options.selectedIndex].value)"> <option value="">Language</option> <!--SelectLanguageStart--> <option value="<!--SelectLanguageKey-->" <!--SelectLanguageSelected-->><!--SelectLanguageValue--></option> <!--SelectLanguageEnd--> </select> </div> </div> </nav> <!--AdminStart--> <div class="control"> <div class="container"> <div class="control-item"> <button class="control-items"> <i class="iconfont control-items-icon"></i> <span class="control-items-content"><!--constStr@Create--></span> </button> </div> </div> </div> <!--AdminEnd--> </header> <main> <!--ListStart--> <div class="scroll"> <div class="container"> <div class="main-title"> <h1 class="main-title-path"> <!--MultiDiskAreaStart--> <div class="more-disk"> <span><!--DiskNameNow--></span> <div> <!--MultiDisksStart--> <li><a href="<!--MultiDisksUrl-->" <!--MultiDisksNow-->><!--MultiDisksName--></a></li> <!--MultiDisksEnd--> </div> </div> > <!--MultiDiskAreaEnd--> <a href="<!--base_disk_path-->/"><!--constStr@Home--></a> <!--PathArrayStart--> > <a href="<!--PathArrayLink-->"><!--PathArrayName--></a> <!--PathArrayEnd--> </h1> </div> <!--IsFileStart--> <div class="main-item-list"> <div class="main-items main-item-title"> <div class="inner-container"> <div> <div style="margin: 24px"> <textarea id="url" title="url" rows="1" style="width: 100%; margin-top: 2px;" readonly><!--FileEncodeUrl--></textarea> <a href="<!--FileUrl-->"><ion-icon name="download" style="line-height: 16px;vertical-align: middle;"></ion-icon> <!--constStr@Download--></a> </div> </div> <div> <!--IsimgFileStart--> <img src="<!--FileDownUrl-->" alt="<!--FileName-->" onload="if (this.offsetWidth>document.getElementById('url').offsetWidth) this.style.width='100%';" /> <!--IsimgFileEnd--> <!--IsvideoFileStart--> <div id="video-a0"></div> <!--IsvideoFileEnd--> </div> </div> </div> </div> <!--IsFileEnd--> <!--IsFolderStart--> <div class="main-item-list"> <div class="main-items main-item-title"> <div class="inner-container"> <!--AdminStart--> <div class="main-items-radio-box"> <!-- <input class="main-items-radio main-items-check-all" type="radio" name="" id=""> --> </div> <!--AdminEnd--> <div class="main-items-icon"> <i class="iconfont"></i> </div> <div class="main-items-displayName"><!--constStr@File--></div> <div class="main-items-dateModified"><!--constStr@EditTime--></div> <div class="main-items-size"><!--constStr@Size--></div> </div> </div> <!--FolderListStart--> <div class="main-items"> <!--AdminStart--> <div class="main-items-radio-box"> <input class="main-items-radio" type="radio" checked name="file" id=""> </div> <!--AdminEnd--> <div class="main-items-icon"> <img src="https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/folder.svg" alt="folder icon"> </div> <div class="main-items-fileName"> <a href="<!--FileEncodeReplaceUrl-->/"><!--FileEncodeReplaceName--></a> </div> <div class="main-items-dateTime" ><!--lastModifiedDateTime--></div> <div class="main-items-fileSize" ><!--size--></div> </div> <!--FolderListEnd--> <!--FileListStart--> <div class="main-items"> <!--AdminStart--> <div class="main-items-radio-box"> <input class="main-items-radio" type="radio" checked name="file" id=""> </div> <!--AdminEnd--> <div class="main-items-icon"> <i class="iconfont"></i> </div> <div class="main-items-fileName"> <a href="<!--FileEncodeReplaceUrl-->?preview" target="_blank"><!--FileEncodeReplaceName--></a> </div> <div class="main-items-dateTime" ><!--lastModifiedDateTime--></div> <div class="main-items-fileSize" ><!--size--></div> </div> <!--FileListEnd--> </div> <!--IsFolderEnd--> </div> </div> <!--ListEnd--> </main> <footer> <!-- OneDrive程序 --> </footer> <div id="mask" class="mask" style="display:none;"></div> <!--LoginStart--> <div id="login_div" class="operatediv" style="display:none"> <div style="margin:50px"> <a onclick="operatediv_close('login')" class="operatediv_close"><!--constStr@Close--></a> <center> <form action="<!--IsPreview?-->admin" method="post"> <input id="login_input" name="password1" type="password" placeholder="<!--constStr@InputPassword-->"> <input type="submit" value="<!--constStr@Login-->"> </form> </center> </div> </div> <!--LoginEnd--> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script> window.onload = function () { // 获取所有radios元素 var allRadios = document.getElementsByClassName("main-items-radio"); RegisterRadioClick(allRadios); } // 为所有radio注册点击事件 function RegisterRadioClick(radios) { if (radios != null) { var radio; for (var i = 0; i < radios.length ; i++) { // 获取单个radio元素 radio = radios[i]; // 为每个radio元素设置当前状态为:False //radio.setAttribute("currStatus", "false"); // 页面刚加载后,取消因缓存的checked属性 radio.checked = false; // 为页面中每个radio元素注册点击事件 radio.onclick = function() { // 获取当前点击对象的自定义属性 var currStatus = this.getAttribute("currStatus"); AllRadioCurrentStatus2False(radios); if (currStatus === "true") { AllRadioCurrentStatus2False(radios); this.setAttribute("currStatus", false); this.checked = false; } else { this.setAttribute("currStatus", true); this.checked = true; } } } } } // 把页面里所有radio元素自定义属性变成为false // 不然会出现需要点击两次才会被选中 function AllRadioCurrentStatus2False(radios) { for (var i = 0; i < radios.length; i++) { radios[i].setAttribute("currStatus", false); } } function changelanguage(str) { if (str=='Language') str = ''; document.cookie='language='+str+'; path=/'; location.href = location.href; } <!--ListStart--> /*var root = '<!--base_disk_path-->'; function path_format(path) { path = '/' + path + '/'; while (path.indexOf('//') !== -1) { path = path.replace('//', '/') } return path } document.querySelectorAll('.main-title-path').forEach(function (e) { var path = e.innerText; if (path.substr(path.length-1)=='/') path = path.substr(0, path.length-1); var paths = path.split('/'); e.innerHTML = '<a href="' + root + '"><!--constStr@Home--></a> > '; if (paths <= 2) return; for (var i = 1; i < paths.length - 1; i++) { var to = path_format(root + paths.slice(0, i + 1).join('/')); e.innerHTML += '<a href="' + to + '">' + paths[i] + '</a> > ' } e.innerHTML += paths[paths.length - 1]; e.innerHTML = e.innerHTML.replace(/\s\/\s$/, '') });*/ <!--IsFileStart--> var $url = document.getElementById('url'); if ($url) { $url.innerHTML = location.protocol + '//' + location.host + $url.innerHTML; $url.style.height = $url.scrollHeight + 'px'; } <!--IsvideoFileStart--> function loadResources(type, src, callback) { let script = document.createElement(type); let loaded = false; if (typeof callback === 'function') { script.onload = script.onreadystatechange = () => { if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) { script.onload = script.onreadystatechange = null; loaded = true; callback(); } } } if (type === 'link') { script.href = src; script.rel = 'stylesheet'; } else { script.src = src; } document.getElementsByTagName('head')[0].appendChild(script); } function addVideos(videos) { let host = 'https://s0.pstatp.com/cdn/expire-1-M'; let unloadedResourceCount = 4; let callback = (() => { return () => { if (!--unloadedResourceCount) { createDplayers(videos); } }; })(unloadedResourceCount, videos); loadResources( 'link', host + '/dplayer/1.25.0/DPlayer.min.css', callback ); loadResources( 'script', host + '/dplayer/1.25.0/DPlayer.min.js', callback ); loadResources( 'script', host + '/hls.js/0.12.4/hls.light.min.js', callback ); loadResources( 'script', host + '/flv.js/1.5.0/flv.min.js', callback ); } function createDplayers(videos) { for (i = 0; i < videos.length; i++) { console.log(videos[i]); new DPlayer({ container: document.getElementById('video-a' + i), screenshot: true, video: { url: videos[i] } }); } } addVideos(['<!--FileDownUrl-->']); <!--IsvideoFileEnd--> <!--IsFileEnd--> <!--ListEnd--> <!--AdminStart--> function logout() { document.cookie = "admin=; path=/"; location.href = location.href; } <!--AdminEnd--> <!--LoginStart--> function login() { document.getElementById('mask').style.display=''; //document.getElementById('mask').style.width=document.documentElement.scrollWidth+'px'; document.getElementById('mask').style.height=document.documentElement.scrollHeight<window.innerHeight?window.innerHeight:document.documentElement.scrollHeight+'px'; document.getElementById('login_div').style.display=''; document.getElementById('login_div').style.left=(document.body.clientWidth-document.getElementById('login_div').offsetWidth)/2 +'px'; document.getElementById('login_div').style.top=(window.innerHeight-document.getElementById('login_div').offsetHeight)/2+document.body.scrollTop +'px'; document.getElementById('login_input').focus(); } <!--LoginEnd--> </script> </body> </html>