├── .idea
    ├── encodings.xml
    ├── jsLibraryMappings.xml
    ├── misc.xml
    ├── modules.xml
    ├── vcs.xml
    ├── watcherTasks.xml
    ├── weiyun.iml
    └── workspace.xml
├── 1.png
├── 3.png
├── 4.png
├── README.md
├── css
    ├── Main.css
    └── Main.less
├── img
    ├── Cancel.png
    ├── File-type.png
    ├── Item-more.png
    ├── Ok.png
    ├── Updown.png
    ├── baidulogo.gif
    ├── baiduyun.jpg
    ├── btn-4.png
    ├── btn.png
    ├── btn_icon.gif
    ├── btn_icon_17d92fd.gif
    ├── button.png
    ├── checkbox.png
    ├── down2.png
    ├── easyicon.png
    ├── edit.png
    ├── file-type2.png
    ├── frame-icon.png
    ├── haschild.png
    ├── list-icon2.png
    ├── list-switch.png
    ├── listIcon.png
    ├── lixian.png
    ├── mask.png
    ├── navigator.png
    ├── property_icon.png
    ├── searchBg.jpg
    ├── small-folder.png
    ├── up1.png
    └── uploadCreate.png
├── index.html
├── js
    ├── DataManage.js
    ├── controlDOM.js
    ├── dataTohtmlTamplate.js
    ├── index.js
    └── randomData.js
└── 思路.md


/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding">
4 |     <file url="PROJECT" charset="UTF-8" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/jsLibraryMappings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptLibraryMappings">
4 |     <includedPredefinedLibrary name="ECMAScript 6" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="JavaScriptSettings">
 4 |     <option name="languageLevel" value="ES6" />
 5 |   </component>
 6 |   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
 7 |     <OptionsSetting value="true" id="Add" />
 8 |     <OptionsSetting value="true" id="Remove" />
 9 |     <OptionsSetting value="true" id="Checkout" />
10 |     <OptionsSetting value="true" id="Update" />
11 |     <OptionsSetting value="true" id="Status" />
12 |     <OptionsSetting value="true" id="Edit" />
13 |     <ConfirmationsSetting value="0" id="Add" />
14 |     <ConfirmationsSetting value="0" id="Remove" />
15 |   </component>
16 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/weiyun.iml" filepath="$PROJECT_DIR$/.idea/weiyun.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/watcherTasks.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ProjectTasksOptions">
 4 |     <TaskOptions isEnabled="true">
 5 |       <option name="arguments" value="--no-color $FileName$" />
 6 |       <option name="checkSyntaxErrors" value="true" />
 7 |       <option name="description" value="Compiles .less files into .css files" />
 8 |       <option name="exitCodeBehavior" value="ERROR" />
 9 |       <option name="fileExtension" value="less" />
10 |       <option name="immediateSync" value="true" />
11 |       <option name="name" value="Less" />
12 |       <option name="output" value="$FileNameWithoutExtension$.css" />
13 |       <option name="outputFilters">
14 |         <array>
15 |           <FilterInfo>
16 |             <option name="description" value="lessc error format" />
17 |             <option name="name" value="lessc" />
18 |             <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
19 |           </FilterInfo>
20 |         </array>
21 |       </option>
22 |       <option name="outputFromStdout" value="true" />
23 |       <option name="program" value="/usr/local/bin/lessc" />
24 |       <option name="scopeName" value="Project Files" />
25 |       <option name="trackOnlyRoot" value="false" />
26 |       <option name="workingDir" value="$FileDir$" />
27 |       <envs />
28 |     </TaskOptions>
29 |     <TaskOptions isEnabled="true">
30 |       <option name="arguments" value="--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$" />
31 |       <option name="checkSyntaxErrors" value="true" />
32 |       <option name="description" value="Transpiles ECMAScript 6 code to ECMAScript 5" />
33 |       <option name="exitCodeBehavior" value="ERROR" />
34 |       <option name="fileExtension" value="js" />
35 |       <option name="immediateSync" value="true" />
36 |       <option name="name" value="Babel" />
37 |       <option name="output" value="$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map" />
38 |       <option name="outputFilters">
39 |         <array />
40 |       </option>
41 |       <option name="outputFromStdout" value="false" />
42 |       <option name="program" value="/usr/local/bin/babel" />
43 |       <option name="scopeName" value="Project Files" />
44 |       <option name="trackOnlyRoot" value="true" />
45 |       <option name="workingDir" value="$FileDir$" />
46 |       <envs />
47 |     </TaskOptions>
48 |     <TaskOptions isEnabled="true">
49 |       <option name="arguments" value="--no-color $FileName$" />
50 |       <option name="checkSyntaxErrors" value="true" />
51 |       <option name="description" value="Compiles .less files into .css files" />
52 |       <option name="exitCodeBehavior" value="ALWAYS" />
53 |       <option name="fileExtension" value="less" />
54 |       <option name="immediateSync" value="true" />
55 |       <option name="name" value="Less" />
56 |       <option name="output" value="$FileNameWithoutExtension$.css" />
57 |       <option name="outputFilters">
58 |         <array>
59 |           <FilterInfo>
60 |             <option name="description" value="lessc error format" />
61 |             <option name="name" value="lessc" />
62 |             <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
63 |           </FilterInfo>
64 |         </array>
65 |       </option>
66 |       <option name="outputFromStdout" value="true" />
67 |       <option name="program" value="/usr/local/bin/lessc" />
68 |       <option name="scopeName" value="Project Files" />
69 |       <option name="trackOnlyRoot" value="false" />
70 |       <option name="workingDir" value="$FileDir$" />
71 |       <envs />
72 |     </TaskOptions>
73 |   </component>
74 | </project>


--------------------------------------------------------------------------------
/.idea/weiyun.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/1.png


--------------------------------------------------------------------------------
/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/3.png


--------------------------------------------------------------------------------
/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/4.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #仿百度云
 2 | ![](1.png)
 3 | ![](3.png)
 4 | ![](4.png)
 5 | 
 6 | 
 7 | 断断续续的写 花了9天时间敲出来的百度云模仿
 8 | - 自己写的一个创建随机文件的函数RandomData 在打开网页的同时随机产生数据
 9 | - 然后用ECMA6的特性写了一个HTML模板,渲染数据到网页上
10 | - 将各个数据分了类,并且添加了各自的监听事件事件
11 | - 有两种布局模式 **列表** 和 **缩略图** 模式
12 | - 三种排序 **文件名** 、**文件大小** 、 **修改日期**
13 | - 有 **新建文件夹** 、 **修改文件名称** 、**模拟滚动条**、**画框选取** 等功能
14 | -  回收站功能 现在还在处理bug
15 | - 因为写这个项目,自己封装了一个处理Json数据的函数库,准备封装一个Jq插件
16 | 
17 | ---
18 | 
19 | 


--------------------------------------------------------------------------------
/css/Main.css:
--------------------------------------------------------------------------------
   1 | html,
   2 | body,
   3 | div,
   4 | ul {
   5 |   margin: 0;
   6 | }
   7 | a {
   8 |   text-decoration: none;
   9 | }
  10 | html,
  11 | body {
  12 |   width: 100%;
  13 |   height: 100%;
  14 |   font: 12px/1.5 "Microsoft YaHei", "Microsoft JhengHei", "黑体";
  15 | }
  16 | li {
  17 |   list-style: none;
  18 | }
  19 | .f-icon {
  20 |   background-image: url("../img/frame-icon.png");
  21 |   background-repeat: no-repeat;
  22 | }
  23 | .Boutton-ico {
  24 |   margin-right: 4px;
  25 |   width: 22px;
  26 |   height: 22px;
  27 |   background: url("../img/navigator.png") no-repeat;
  28 | }
  29 | .Boutton-ico2 {
  30 |   margin-right: 4px;
  31 |   width: 33px;
  32 |   height: 24px;
  33 |   background: url("../img/btn-4.png") no-repeat;
  34 | }
  35 | #Out-border {
  36 |   position: absolute;
  37 |   left: 0;
  38 |   top: 0;
  39 |   width: 100%;
  40 |   height: 100%;
  41 |   min-width: 1200px;
  42 |   overflow: hidden;
  43 | }
  44 | #Top-banner {
  45 |   float: left;
  46 |   width: 100%;
  47 |   background-color: #252525;
  48 |   height: 50px;
  49 | }
  50 | #Top-banner a {
  51 |   color: white;
  52 | }
  53 | #Top-banner #Logo {
  54 |   float: left;
  55 |   margin-left: 10px;
  56 |   margin-top: 5px;
  57 |   height: 36px;
  58 |   width: 113px;
  59 |   background-position: 0 0;
  60 |   display: inline;
  61 | }
  62 | #Top-banner #Page-Button {
  63 |   padding: 0 0 3px 25px;
  64 |   height: 45px;
  65 |   float: left;
  66 |   width: 400px;
  67 |   padding-bottom: 0 !important;
  68 |   display: block;
  69 | }
  70 | .Page-Button {
  71 |   float: left;
  72 |   display: inline-block;
  73 |   width: 90px;
  74 |   height: 50px;
  75 |   margin-left: 5px;
  76 |   font: 18px "Microsoft YaHei", "Microsoft JhengHei", "黑体";
  77 |   text-align: center;
  78 |   line-height: 48px;
  79 | }
  80 | .Page-Button-unActive {
  81 |   color: #d8d8d8;
  82 | }
  83 | .Page-Button-Active {
  84 |   background-color: #0f0f0f;
  85 |   font-weight: bold;
  86 |   color: #FFF;
  87 | }
  88 | .Page-down,
  89 | .Page-up {
  90 |   float: left;
  91 |   display: inline-block;
  92 |   width: 90px;
  93 |   height: 50px;
  94 | }
  95 | .Page-down em,
  96 | .Page-up em {
  97 |   float: right;
  98 |   display: inline-block;
  99 |   margin-right: 9px;
 100 |   margin-top: 18px;
 101 |   height: 12px;
 102 |   width: 12px;
 103 |   font-size: 0;
 104 | }
 105 | .Page-down em {
 106 |   background-position: -89px -55px !important;
 107 | }
 108 | .Page-up em {
 109 |   background-position: -89px -45px !important;
 110 | }
 111 | .separate {
 112 |   float: left;
 113 |   display: inline-block;
 114 |   margin: 0;
 115 |   height: 48px;
 116 |   width: 2px;
 117 |   background: #2a2b2d;
 118 | }
 119 | #User-information {
 120 |   display: inline-block;
 121 |   float: right;
 122 |   width: 600px;
 123 |   height: 48px;
 124 |   line-height: 48px;
 125 | }
 126 | #User-information ul {
 127 |   display: block;
 128 |   float: left;
 129 |   width: 100%;
 130 |   height: 100%;
 131 | }
 132 | #User-information ul li {
 133 |   display: inline-block;
 134 |   float: left;
 135 |   width: 60px;
 136 |   height: 48px;
 137 |   color: #FFFFFF;
 138 |   margin-right: 10px;
 139 |   text-align: center;
 140 | }
 141 | #User-information ul #Storage {
 142 |   width: 173px;
 143 | }
 144 | #User-information ul #Storage .progress {
 145 |   display: inline-block;
 146 |   width: 130px;
 147 |   height: 22px;
 148 | }
 149 | #User-information ul #Storage .progress .pro-con {
 150 |   display: block;
 151 |   width: 130px;
 152 |   height: 20px;
 153 |   margin-top: 5px;
 154 |   background: white;
 155 |   border: 1px solid brown;
 156 |   border-radius: 2px;
 157 | }
 158 | #User-information ul #Storage .progress .pro-con .bar {
 159 |   display: inline-block;
 160 |   background: springgreen;
 161 |   float: left;
 162 |   height: 20px;
 163 |   width: 93.8434%;
 164 |   color: gray;
 165 |   line-height: 20px;
 166 | }
 167 | #User-information ul #Storage a {
 168 |   display: inline-block;
 169 |   width: 35px;
 170 |   color: #d8d8d8;
 171 |   margin-right: 2px;
 172 | }
 173 | #User-information ul #User-name {
 174 |   color: #fff;
 175 | }
 176 | #User-information ul #vip-center {
 177 |   display: block;
 178 |   width: 100%;
 179 |   margin-top: 13px;
 180 |   height: 22px;
 181 |   -webkit-border-radius: 5px;
 182 |   -moz-border-radius: 5px;
 183 |   border-radius: 5px;
 184 |   background: red;
 185 |   color: #fff;
 186 |   font: 12px/1.5 "SimSun";
 187 |   text-align: center;
 188 |   line-height: 22px;
 189 | }
 190 | #User-information ul #Download-App {
 191 |   width: 100px;
 192 | }
 193 | #Right-banner {
 194 |   display: inline-block;
 195 |   float: left;
 196 |   width: 210px;
 197 |   min-height: 100%;
 198 |   font-size: 14px;
 199 |   background-color: #f0f0f0;
 200 |   border-right: #c6c8cc 1px solid;
 201 | }
 202 | #Right-banner #Item-list {
 203 |   float: left;
 204 |   width: 210px;
 205 |   height: 296px;
 206 | }
 207 | #Right-banner #Item-list li {
 208 |   width: 210px;
 209 |   margin-top: 10px;
 210 |   margin-left: -40px;
 211 |   height: 32px;
 212 |   line-height: 32px;
 213 |   border-top: 1px solid #F0F0F0;
 214 |   border-bottom: 1px solid #F0F0F0;
 215 | }
 216 | #Right-banner #Item-list .active {
 217 |   background: #E2E2E2;
 218 |   border-top: 1px solid #F2F2F2;
 219 |   border-bottom: 1px solid #F2F2F2;
 220 | }
 221 | #Right-banner #Item-list .active a span {
 222 |   background-position-x: -23px !important;
 223 | }
 224 | #Right-banner #Item-list span {
 225 |   margin-right: 10px;
 226 | }
 227 | #Right-banner #Item-list a {
 228 |   margin-left: 40px;
 229 |   color: #666;
 230 | }
 231 | #Right-banner #Item-list a span {
 232 |   display: inline-block;
 233 |   vertical-align: middle;
 234 | }
 235 | #Right-banner #Item-list li:nth-child(1) a span {
 236 |   background-position: 0 0;
 237 | }
 238 | #Right-banner #Item-list li:nth-child(2) a span {
 239 |   background-position: 0 -22px;
 240 | }
 241 | #Right-banner #Item-list li:nth-child(3) a span {
 242 |   background-position: 0 -44px;
 243 | }
 244 | #Right-banner #Item-list li:nth-child(4) a span {
 245 |   background-position: 0 -89px;
 246 | }
 247 | #Right-banner #Item-list li:nth-child(5) a span {
 248 |   background-position: 0 -201px;
 249 | }
 250 | #Right-banner #Item-list li:nth-child(6) a span {
 251 |   background-position: 0 -66px;
 252 | }
 253 | #Right-banner #Item-list li:nth-child(7) a span {
 254 |   background-position: 0 -177px;
 255 | }
 256 | #Right-banner #Item-list li:nth-child(1):hover {
 257 |   background: #E2E2E2;
 258 |   border-top: 1px solid #F2F2F2;
 259 |   border-bottom: 1px solid #F2F2F2;
 260 | }
 261 | #Right-banner #Item-list li:nth-child(1):hover a span {
 262 |   background-position: -23px 0;
 263 | }
 264 | #Right-banner #Item-list li:nth-child(2):hover {
 265 |   background: #E2E2E2;
 266 |   border-top: 1px solid #F2F2F2;
 267 |   border-bottom: 1px solid #F2F2F2;
 268 | }
 269 | #Right-banner #Item-list li:nth-child(2):hover a span {
 270 |   background-position: -23px -22px;
 271 | }
 272 | #Right-banner #Item-list li:nth-child(3):hover {
 273 |   background: #E2E2E2;
 274 |   border-top: 1px solid #F2F2F2;
 275 |   border-bottom: 1px solid #F2F2F2;
 276 | }
 277 | #Right-banner #Item-list li:nth-child(3):hover a span {
 278 |   background-position: -23px -44px;
 279 | }
 280 | #Right-banner #Item-list li:nth-child(4):hover {
 281 |   background: #E2E2E2;
 282 |   border-top: 1px solid #F2F2F2;
 283 |   border-bottom: 1px solid #F2F2F2;
 284 | }
 285 | #Right-banner #Item-list li:nth-child(4):hover a span {
 286 |   background-position: -23px -89px;
 287 | }
 288 | #Right-banner #Item-list li:nth-child(5):hover {
 289 |   background: #E2E2E2;
 290 |   border-top: 1px solid #F2F2F2;
 291 |   border-bottom: 1px solid #F2F2F2;
 292 | }
 293 | #Right-banner #Item-list li:nth-child(5):hover a span {
 294 |   background-position: -23px -201px;
 295 | }
 296 | #Right-banner #Item-list li:nth-child(6):hover {
 297 |   background: #E2E2E2;
 298 |   border-top: 1px solid #F2F2F2;
 299 |   border-bottom: 1px solid #F2F2F2;
 300 | }
 301 | #Right-banner #Item-list li:nth-child(6):hover a span {
 302 |   background-position: -23px -66px;
 303 | }
 304 | #Right-banner #Item-list li:nth-child(7):hover {
 305 |   background: #E2E2E2;
 306 |   border-top: 1px solid #F2F2F2;
 307 |   border-bottom: 1px solid #F2F2F2;
 308 | }
 309 | #Right-banner #Item-list li:nth-child(7):hover a span {
 310 |   background-position: -23px -177px;
 311 | }
 312 | #Right-banner #Item-More {
 313 |   float: left;
 314 |   width: 210px;
 315 |   height: 90px;
 316 | }
 317 | #Right-banner #Item-More .Boutton-ico3 {
 318 |   display: inline-block;
 319 |   width: 20px;
 320 |   height: 20px;
 321 | }
 322 | #Right-banner #Item-More span {
 323 |   margin-right: 10px;
 324 | }
 325 | #Right-banner #Item-More .Item-Sperate {
 326 |   width: 210px;
 327 |   height: 0;
 328 |   margin: 0px 0 5px 0;
 329 |   border-top: #dce1e6 1px solid;
 330 |   border-bottom: #f7f9fb 1px solid;
 331 | }
 332 | #Right-banner #Item-More a {
 333 |   color: #666;
 334 | }
 335 | #Right-banner #Item-More a span {
 336 |   display: inline-block;
 337 |   vertical-align: middle;
 338 | }
 339 | #Right-banner #Item-More li {
 340 |   width: 210px;
 341 |   margin-top: 10px;
 342 |   margin-left: -40px;
 343 |   height: 32px;
 344 |   line-height: 32px;
 345 |   border-top: 1px solid #F0F0F0;
 346 |   border-bottom: 1px solid #F0F0F0;
 347 | }
 348 | #Right-banner #Item-More li a {
 349 |   margin-left: 40px;
 350 |   position: relative;
 351 |   bottom: 5px;
 352 | }
 353 | #Right-banner #Item-More li:nth-child(1) a span:nth-child(1) {
 354 |   background: url("../img/Item-more.png");
 355 |   background-position: 0 0;
 356 | }
 357 | #Right-banner #Item-More li:nth-child(2) {
 358 |   border-top: 1px solid #F0F0F0;
 359 |   border-bottom: 1px solid #F0F0F0;
 360 | }
 361 | #Right-banner #Item-More li:nth-child(2) a span:nth-child(1) {
 362 |   background: url("../img/Item-more.png");
 363 |   background-position: -2px -22px;
 364 | }
 365 | #Right-banner #Item-More li:nth-child(2):hover {
 366 |   background: #E2E2E2;
 367 |   border-top: 1px solid #F2F2F2;
 368 |   border-bottom: 1px solid #F2F2F2;
 369 | }
 370 | #Right-banner #Item-More li:nth-child(2):hover a span:nth-child(1) {
 371 |   background: url("../img/Item-more.png");
 372 |   background-position: 20px -22px !important;
 373 | }
 374 | #Right-banner #Item-More .active {
 375 |   background: #E2E2E2;
 376 |   border-top: 1px solid #F2F2F2;
 377 |   border-bottom: 1px solid #F2F2F2;
 378 | }
 379 | #Right-banner #Item-More .active a span:nth-child(1) {
 380 |   background: url("../img/Item-more.png");
 381 |   background-position: 20px -22px !important;
 382 | }
 383 | #Right-banner #Device {
 384 |   float: left;
 385 |   margin-top: 10px;
 386 |   margin-left: 25px;
 387 |   width: 225px;
 388 |   height: 50px;
 389 | }
 390 | #Right-banner #Device a {
 391 |   display: inline-block;
 392 |   font-size: 12px;
 393 |   width: 46px;
 394 |   height: 42px;
 395 |   margin-left: -4px;
 396 |   color: #666;
 397 |   text-align: center;
 398 | }
 399 | #Right-banner #Device a span {
 400 |   display: inline-block;
 401 |   text-align: center;
 402 | }
 403 | #Right-banner #Device a span:nth-child(1) {
 404 |   display: inline-block;
 405 |   margin-left: 6px;
 406 | }
 407 | #Right-banner #Device a:nth-child(1) span {
 408 |   background-position: 0 -73px;
 409 | }
 410 | #Right-banner #Device a:nth-child(2) span {
 411 |   background-position: -70px -73px;
 412 | }
 413 | #Right-banner #Device a:nth-child(3) span {
 414 |   background-position: 0 0;
 415 | }
 416 | #Right-banner #Device a:nth-child(4) span {
 417 |   background-position: -206px -73px;
 418 | }
 419 | #Main-border {
 420 |   margin-top: -18px;
 421 |   margin-left: 210px;
 422 |   position: relative;
 423 |   box-shadow: -1px 0 3px #aaa;
 424 |   min-width: 990px;
 425 |   min-height: 100%;
 426 |   font-size: 12px;
 427 | }
 428 | #Main-border #Tools-bar {
 429 |   position: relative;
 430 |   left: 1px;
 431 |   height: 50px;
 432 |   padding-left: 10px;
 433 |   line-height: 50px;
 434 |   border-bottom: 1px solid #d2d2d2;
 435 |   background: #F7F7F7 left -53px repeat-x;
 436 | }
 437 | #Main-border #Tools-bar span {
 438 |   display: inline-block;
 439 |   margin-left: 10px;
 440 |   height: 28px;
 441 |   line-height: 28px;
 442 | }
 443 | #Main-border #Tools-bar #Tools {
 444 |   position: absolute;
 445 |   top: 0px;
 446 |   padding-top: 11px;
 447 |   line-height: normal;
 448 | }
 449 | #Main-border #Tools-bar #Tools .Upload {
 450 |   float: left;
 451 |   width: 106px;
 452 |   color: #fff;
 453 |   -webkit-border-radius: 3px;
 454 |   -moz-border-radius: 3px;
 455 |   border-radius: 3px;
 456 |   background: url("../img/button.png") no-repeat right -645px;
 457 | }
 458 | #Main-border #Tools-bar #Tools .Upload span {
 459 |   background: url("../img/uploadCreate.png");
 460 |   display: inline-block;
 461 |   margin-right: 10px;
 462 |   margin-left: 18px;
 463 |   vertical-align: middle;
 464 |   height: 24px;
 465 |   width: 20px;
 466 | }
 467 | #Main-border #Tools-bar #Tools .Upload:hover {
 468 |   background: url("../img/button.png") no-repeat right -682px;
 469 | }
 470 | #Main-border #Tools-bar #Tools .Upload:hover span {
 471 |   background: url("../img/uploadCreate.png");
 472 | }
 473 | #Main-border #Tools-bar #Tools .NewFolder {
 474 |   float: left;
 475 |   width: 114px;
 476 |   border-right: 2px solid #c6c8cc;
 477 |   color: #666;
 478 |   -webkit-border-radius: 3px;
 479 |   -moz-border-radius: 3px;
 480 |   border-radius: 3px;
 481 |   background: url("../img/button.png") no-repeat 0 -144px;
 482 | }
 483 | #Main-border #Tools-bar #Tools .NewFolder span {
 484 |   background: url("../img/uploadCreate.png") -150px 0;
 485 |   display: inline-block;
 486 |   margin-right: 10px;
 487 |   margin-left: 18px;
 488 |   vertical-align: middle;
 489 |   height: 24px;
 490 |   width: 20px;
 491 | }
 492 | #Main-border #Tools-bar #Tools .NewFolder:hover {
 493 |   background: url("../img/button.png") no-repeat 0 -180px;
 494 | }
 495 | #Main-border #Tools-bar #Tools .NewFolder:hover span {
 496 |   background: url("../img/uploadCreate.png") -180px 0;
 497 | }
 498 | #Main-border #Tools-bar #Tools .Lixian {
 499 |   float: left;
 500 |   width: 114px;
 501 |   border-right: 2px solid #c6c8cc;
 502 |   color: #666;
 503 |   -webkit-border-radius: 3px;
 504 |   -moz-border-radius: 3px;
 505 |   border-radius: 3px;
 506 |   background: url("../img/button.png") no-repeat 0 -144px;
 507 | }
 508 | #Main-border #Tools-bar #Tools .Lixian span {
 509 |   background: url("../img/lixian.png");
 510 |   display: inline-block;
 511 |   margin-right: 10px;
 512 |   margin-left: 18px;
 513 |   margin-bottom: 1px;
 514 |   vertical-align: middle;
 515 |   height: 24px;
 516 |   width: 20px;
 517 | }
 518 | #Main-border #Tools-bar #Tools .Lixian:hover {
 519 |   background: url("../img/button.png") no-repeat 0 -180px;
 520 | }
 521 | #Main-border #Tools-bar #Tools .Lixian:hover span {
 522 |   background: url("../img/lixian.png") -30px 0;
 523 | }
 524 | #Main-border #Tools-bar #Tools .Mydevice {
 525 |   float: left;
 526 |   width: 114px;
 527 |   border-left: 2px solid #c6c8cc;
 528 |   color: #666;
 529 |   -webkit-border-radius: 3px;
 530 |   -moz-border-radius: 3px;
 531 |   border-radius: 3px;
 532 |   background: url("../img/button.png") no-repeat;
 533 |   background-position-y: -260px;
 534 |   background-position-x: -83px;
 535 | }
 536 | #Main-border #Tools-bar #Tools .Mydevice span {
 537 |   background: url("../img/lixian.png") -60px 0;
 538 |   display: inline-block;
 539 |   margin-right: 10px;
 540 |   margin-left: 18px;
 541 |   margin-bottom: 1px;
 542 |   vertical-align: middle;
 543 |   height: 24px;
 544 |   width: 20px;
 545 | }
 546 | #Main-border #Tools-bar #Tools .Mydevice:hover {
 547 |   background: url("../img/button.png") no-repeat;
 548 |   background-position-y: -296px;
 549 |   background-position-x: -83px;
 550 | }
 551 | #Main-border #Tools-bar #Tools .Mydevice:hover span {
 552 |   background: url("../img/lixian.png") -90px 0px;
 553 | }
 554 | #Main-border #Tools-bar .list-gird-switch {
 555 |   margin: 8px 0 0 0;
 556 |   float: right;
 557 |   height: 29px;
 558 |   width: 92px;
 559 | }
 560 | #Main-border #Tools-bar .list-gird-switch .list-switch {
 561 |   height: 29px;
 562 |   width: 32px;
 563 |   float: left;
 564 |   background: url("../img/list-switch.png") no-repeat 0 0;
 565 | }
 566 | #Main-border #Tools-bar .list-gird-switch .gird-switch {
 567 |   height: 29px;
 568 |   width: 32px;
 569 |   float: left;
 570 |   background: url("../img/list-switch.png") no-repeat;
 571 | }
 572 | #Main-border #Tools-bar .list-switch-on .list-switch {
 573 |   background: url("../img/list-switch.png") no-repeat 0 0;
 574 | }
 575 | #Main-border #Tools-bar .list-switch-on .gird-switch {
 576 |   background: url("../img/list-switch.png") no-repeat;
 577 |   background-position: right 0;
 578 | }
 579 | #Main-border #Tools-bar .list-switch-on .gird-switch:hover {
 580 |   background-position: right -70px;
 581 | }
 582 | #Main-border #Tools-bar .gird-switch-on .list-switch {
 583 |   background: url("../img/list-switch.png") no-repeat 0 -35px;
 584 | }
 585 | #Main-border #Tools-bar .gird-switch-on .list-switch:hover {
 586 |   background-position: 0 -70px;
 587 | }
 588 | #Main-border #Tools-bar .gird-switch-on .gird-switch {
 589 |   background: url("../img/list-switch.png") no-repeat;
 590 |   background-position: right -35px;
 591 | }
 592 | #Main-border #Tools-bar .g-button-drop-down {
 593 |   vertical-align: top;
 594 |   margin: 0 5px;
 595 |   display: inline-block;
 596 | }
 597 | #Main-border .Nav-title {
 598 |   display: block;
 599 |   position: relative;
 600 |   left: 1px;
 601 |   margin: 10px 0 10px 0;
 602 |   padding: 0px 27px;
 603 |   background-color: #FFF;
 604 |   height: 20px;
 605 | }
 606 | #Main-border .Nav-title ul {
 607 |   float: left;
 608 |   margin-left: -40px;
 609 | }
 610 | #Main-border .Nav-title ul li {
 611 |   display: inline-block;
 612 |   float: left;
 613 |   margin-right: 5px;
 614 | }
 615 | #Main-border .Notin .inDrectory-list {
 616 |   display: none;
 617 | }
 618 | #Main-border .Notin .Back-to-main .Blue {
 619 |   color: #80848C;
 620 | }
 621 | #Main-border .InaDrec .inDrectory-list {
 622 |   display: inline-block;
 623 | }
 624 | #Main-border .InaDrec .Blue {
 625 |   color: dodgerblue;
 626 |   cursor: pointer;
 627 | }
 628 | #Main-border .InaDrec .Blue:hover {
 629 |   text-decoration: underline;
 630 | }
 631 | #Main-border .InaDrec .Gray {
 632 |   color: #a4a4a4;
 633 | }
 634 | #Main-border #Operation-bar {
 635 |   position: relative;
 636 |   height: 44px;
 637 |   left: 25px;
 638 |   color: #666;
 639 |   -webkit-border-radius: 3px;
 640 |   -moz-border-radius: 3px;
 641 |   border-radius: 3px;
 642 |   border: 1px solid #d2d2d2;
 643 |   line-height: 44px;
 644 |   border-right: none;
 645 |   background: #F7F7F7;
 646 | }
 647 | #Main-border #Operation-bar .list-gird-switch {
 648 |   margin: 8px 0 0 0;
 649 |   float: right;
 650 |   height: 29px;
 651 |   width: 92px;
 652 | }
 653 | #Main-border #Operation-bar .list-gird-switch .list-switch {
 654 |   height: 29px;
 655 |   width: 32px;
 656 |   float: left;
 657 |   background: url("../img/list-switch.png") no-repeat 0 0;
 658 | }
 659 | #Main-border #Operation-bar .list-gird-switch .gird-switch {
 660 |   height: 29px;
 661 |   width: 32px;
 662 |   float: left;
 663 |   background: url("../img/list-switch.png") no-repeat;
 664 | }
 665 | #Main-border #Operation-bar .list-switch-on .list-switch {
 666 |   background: url("../img/list-switch.png") no-repeat 0 0;
 667 | }
 668 | #Main-border #Operation-bar .list-switch-on .gird-switch {
 669 |   background: url("../img/list-switch.png") no-repeat;
 670 |   background-position: right 0;
 671 | }
 672 | #Main-border #Operation-bar .list-switch-on .gird-switch:hover {
 673 |   background-position: right -70px;
 674 | }
 675 | #Main-border #Operation-bar .gird-switch-on .list-switch {
 676 |   background: url("../img/list-switch.png") no-repeat 0 -35px;
 677 | }
 678 | #Main-border #Operation-bar .gird-switch-on .list-switch:hover {
 679 |   background-position: 0 -70px;
 680 | }
 681 | #Main-border #Operation-bar .gird-switch-on .gird-switch {
 682 |   background: url("../img/list-switch.png") no-repeat;
 683 |   background-position: right -35px;
 684 | }
 685 | #Main-border .ChoosedItem {
 686 |   background-color: #F7F7F7;
 687 | }
 688 | #Main-border .ChoosedItem .TextMassage {
 689 |   display: inline-block;
 690 |   margin: 0;
 691 | }
 692 | #Main-border .ChoosedItem .TextMassage span {
 693 |   display: inline-block;
 694 | }
 695 | #Main-border .ChoosedItem .Item-Operate {
 696 |   display: inline-block;
 697 |   margin-left: 10px;
 698 |   border-radius: 3px;
 699 |   border-right: 2px solid rgba(178, 178, 178, 0.57);
 700 |   background: url('../img/button.png') no-repeat 5px -143px;
 701 |   padding: 5px;
 702 |   vertical-align: middle;
 703 |   white-space: nowrap;
 704 |   font-size: 12px;
 705 |   text-align: center;
 706 |   color: #666;
 707 |   width: 78px;
 708 |   height: 20px;
 709 |   line-height: 20px;
 710 | }
 711 | #Main-border .ChoosedItem .Item-Operate span:nth-child(1) {
 712 |   display: inline-block;
 713 |   vertical-align: middle;
 714 |   width: 20px;
 715 |   margin-right: 5px;
 716 |   height: 24px;
 717 |   background: url(../img/lixian.png ) -180px 0 no-repeat;
 718 | }
 719 | #Main-border .ChoosedItem .Item-Operate span:nth-child(2) {
 720 |   vertical-align: middle;
 721 |   display: inline-block;
 722 |   width: 20px;
 723 |   height: 20px;
 724 | }
 725 | #Main-border .ChoosedItem .B-Share span:nth-child(1) {
 726 |   background: url(../img/lixian.png ) -180px 0 no-repeat;
 727 | }
 728 | #Main-border .ChoosedItem .B-Share:hover span:nth-child(1) {
 729 |   background: url(../img/lixian.png ) -240px 0 no-repeat;
 730 | }
 731 | #Main-border .ChoosedItem .B-Download span:nth-child(1) {
 732 |   background: url(../img/uploadCreate.png ) -60px 0 no-repeat;
 733 | }
 734 | #Main-border .ChoosedItem .B-Download:hover span:nth-child(1) {
 735 |   background: url(../img/uploadCreate.png ) -120px 0 no-repeat;
 736 | }
 737 | #Main-border .ChoosedItem .B-Delete span:nth-child(1) {
 738 |   background: url(../img/uploadCreate.png ) -210px 0 no-repeat;
 739 | }
 740 | #Main-border .ChoosedItem .B-Delete:hover span:nth-child(1) {
 741 |   background: url(../img/uploadCreate.png ) -270px 0 no-repeat;
 742 | }
 743 | #Main-border .ChoosedItem .B-Push span:nth-child(1) {
 744 |   background: url(../img/lixian.png ) -120px 0 no-repeat;
 745 | }
 746 | #Main-border .ChoosedItem .B-Push:hover span:nth-child(1) {
 747 |   background: url(../img/lixian.png ) -150px 0 no-repeat;
 748 | }
 749 | #Main-border .ChoosedItem .Item-type {
 750 |   display: none;
 751 | }
 752 | #Main-border .UchoosedItemGird .TextMassage {
 753 |   display: none;
 754 |   margin: 0;
 755 | }
 756 | #Main-border .UchoosedItemGird .Item-Operate {
 757 |   display: none;
 758 | }
 759 | #Main-border .UchoosedItemGird .Item-type {
 760 |   display: none;
 761 | }
 762 | #Main-border .UchoosedItemList .TextMassage {
 763 |   display: none;
 764 | }
 765 | #Main-border .UchoosedItemList .Item-Operate {
 766 |   display: none;
 767 | }
 768 | #Main-border .UchoosedItemList .Item-type {
 769 |   margin-left: -3px;
 770 |   display: inline-block;
 771 |   width: 25%;
 772 |   height: 100%;
 773 |   border-right: #dce1e6 1px solid;
 774 |   border-left: #f4f6f8 1px solid;
 775 |   text-align: center;
 776 | }
 777 | #Main-border .UchoosedItemList .Item-type .Updown {
 778 |   display: none;
 779 | }
 780 | #Main-border .UchoosedItemList .Item-type:hover {
 781 |   background: #E8F5FD;
 782 | }
 783 | #Main-border .UchoosedItemList .Item-type:hover .Down {
 784 |   display: inline-block;
 785 |   background: url(../img/Updown.png) no-repeat -50px -45px;
 786 |   height: 10px;
 787 |   width: 9px;
 788 |   vertical-align: middle;
 789 |   margin-left: 4px;
 790 | }
 791 | #Main-border .UchoosedItemList .Item-type:hover .Up {
 792 |   display: inline-block;
 793 |   background: url(../img/Updown.png) no-repeat -60px -45px;
 794 |   height: 10px;
 795 |   width: 9px;
 796 |   vertical-align: middle;
 797 |   margin-left: 4px;
 798 | }
 799 | #Main-border #View {
 800 |   position: relative;
 801 |   left: 25px;
 802 |   min-width: 900px;
 803 |   overflow-y: hidden;
 804 | }
 805 | #Main-border .Gird-view dl {
 806 |   position: absolute;
 807 |   left: 0;
 808 |   top: 0;
 809 |   width: 100%;
 810 |   margin: 0;
 811 | }
 812 | #Main-border .Gird-view dl dd {
 813 |   margin: 0;
 814 |   display: inline-block;
 815 | }
 816 | #Main-border .Gird-view dl dd .Ob {
 817 |   width: 182px;
 818 |   height: 122px;
 819 |   float: left;
 820 |   margin: 4px 4px 0 0;
 821 |   text-align: center;
 822 | }
 823 | #Main-border .Gird-view dl dd .Ob .File-Title {
 824 |   float: left;
 825 |   width: 100%;
 826 | }
 827 | #Main-border .Gird-view dl dd .Ob .Uedit .EditArea {
 828 |   float: left;
 829 |   width: 100px;
 830 |   margin-left: 30px;
 831 |   display: inline-block;
 832 | }
 833 | #Main-border .Gird-view dl dd .Ob .Uedit .EditArea input {
 834 |   display: none;
 835 | }
 836 | #Main-border .Gird-view dl dd .Ob .Uedit .EditArea span {
 837 |   display: inline-block;
 838 | }
 839 | #Main-border .Gird-view dl dd .Ob .Uedit .EditOp {
 840 |   float: left;
 841 |   display: inline-block;
 842 |   width: 30px;
 843 |   margin-left: 20px;
 844 | }
 845 | #Main-border .Gird-view dl dd .Ob .Uedit .EditOp span:nth-child(1) {
 846 |   display: none;
 847 | }
 848 | #Main-border .Gird-view dl dd .Ob .Uedit .EditOp span:nth-child(2) {
 849 |   display: none;
 850 | }
 851 | #Main-border .Gird-view dl dd .Ob .Uedit .EditOp span:nth-child(3) {
 852 |   display: none;
 853 | }
 854 | #Main-border .Gird-view dl dd .Ob .Uedit:hover .EditOp {
 855 |   float: left;
 856 |   display: inline-block;
 857 |   width: 30px;
 858 |   margin-left: 20px;
 859 | }
 860 | #Main-border .Gird-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(1) {
 861 |   display: inline-block;
 862 |   width: 24px;
 863 |   height: 24px;
 864 |   margin-top: -5px;
 865 |   background: url("../img/edit.png");
 866 | }
 867 | #Main-border .Gird-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(2) {
 868 |   display: none;
 869 | }
 870 | #Main-border .Gird-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(3) {
 871 |   display: none;
 872 | }
 873 | #Main-border .Gird-view dl dd .Ob .Editing .EditArea {
 874 |   float: left;
 875 |   width: 110px;
 876 |   display: inline-block;
 877 | }
 878 | #Main-border .Gird-view dl dd .Ob .Editing .EditArea input {
 879 |   display: inline-block;
 880 |   float: left;
 881 |   width: 60px;
 882 | }
 883 | #Main-border .Gird-view dl dd .Ob .Editing .EditArea .Name {
 884 |   display: none;
 885 | }
 886 | #Main-border .Gird-view dl dd .Ob .Editing .EditArea .Type {
 887 |   display: inline-block;
 888 |   float: left;
 889 | }
 890 | #Main-border .Gird-view dl dd .Ob .Editing .EditOp {
 891 |   float: left;
 892 |   width: 60px;
 893 |   margin-left: 0;
 894 |   display: inline-block;
 895 | }
 896 | #Main-border .Gird-view dl dd .Ob .Editing .EditOp .EditButon {
 897 |   display: none;
 898 | }
 899 | #Main-border .Gird-view dl dd .Ob .Editing .EditOp span:nth-child(2) {
 900 |   display: inline-block;
 901 |   float: left;
 902 |   width: 24px;
 903 |   height: 24px;
 904 |   margin-right: 0px;
 905 |   background: url(../img/btn.png);
 906 |   background-position-x: -6px;
 907 |   background-position-y: 26px;
 908 | }
 909 | #Main-border .Gird-view dl dd .Ob .Editing .EditOp span:nth-child(3) {
 910 |   display: inline-block;
 911 |   width: 24px;
 912 |   height: 24px;
 913 |   margin-right: 0px;
 914 |   background: url(../img/btn.png);
 915 |   background-position-x: -33px;
 916 |   background-position-y: 26px;
 917 | }
 918 | #Main-border .Gird-view dl dd .Ob .File-more {
 919 |   display: none;
 920 | }
 921 | #Main-border .Gird-view dl .Unclick .Ob div {
 922 |   position: relative;
 923 |   margin: 0 auto;
 924 |   width: 90px;
 925 |   height: 92px;
 926 |   border: 2px solid transparent;
 927 |   overflow: hidden;
 928 | }
 929 | #Main-border .Gird-view dl .Unclick .Ob div span {
 930 |   display: none;
 931 |   background: url("../img/checkbox.png") 6px -36px no-repeat;
 932 |   position: absolute;
 933 |   top: -8px;
 934 |   left: -8px;
 935 |   height: 30px;
 936 |   width: 30px;
 937 | }
 938 | #Main-border .Gird-view dl .Unclick:hover .Ob div {
 939 |   position: relative;
 940 |   margin: 0 auto;
 941 |   width: 90px;
 942 |   height: 92px;
 943 |   border: 2px solid #2e80dc;
 944 |   overflow: hidden;
 945 | }
 946 | #Main-border .Gird-view dl .Unclick:hover .Ob div span {
 947 |   display: inline-block;
 948 |   background: url("../img/checkbox.png") 6px -36px no-repeat;
 949 |   position: absolute;
 950 |   top: -8px;
 951 |   left: -8px;
 952 |   height: 30px;
 953 |   width: 30px;
 954 | }
 955 | #Main-border .Gird-view dl .Clicked .Ob div {
 956 |   position: relative;
 957 |   margin: 0 auto;
 958 |   width: 90px;
 959 |   height: 92px;
 960 |   border: 2px solid #2e80dc;
 961 |   overflow: hidden;
 962 | }
 963 | #Main-border .Gird-view dl .Clicked .Ob div span {
 964 |   background: url(../img/checkbox.png) -30px -36px no-repeat;
 965 |   position: absolute;
 966 |   top: -8px;
 967 |   left: -8px;
 968 |   height: 30px;
 969 |   width: 30px;
 970 | }
 971 | #Main-border .Gird-view dl .Drec {
 972 |   background: url(../img/File-type.png) 16px -77px no-repeat;
 973 | }
 974 | #Main-border .Gird-view dl .avi,
 975 | #Main-border .Gird-view dl .doc,
 976 | #Main-border .Gird-view dl .eps,
 977 | #Main-border .Gird-view dl .ppt,
 978 | #Main-border .Gird-view dl .css,
 979 | #Main-border .Gird-view dl .mp3,
 980 | #Main-border .Gird-view dl .HTML,
 981 | #Main-border .Gird-view dl .pdf,
 982 | #Main-border .Gird-view dl .txt,
 983 | #Main-border .Gird-view dl .docx,
 984 | #Main-border .Gird-view dl .dll,
 985 | #Main-border .Gird-view dl .jpg,
 986 | #Main-border .Gird-view dl .zip,
 987 | #Main-border .Gird-view dl .psd,
 988 | #Main-border .Gird-view dl .wav,
 989 | #Main-border .Gird-view dl .xls {
 990 |   background: url(../img/file-type2.png) no-repeat;
 991 | }
 992 | #Main-border .Gird-view dl .doc {
 993 |   width: 45px;
 994 |   height: 57px;
 995 |   background-position: 20px -140px;
 996 | }
 997 | #Main-border .Gird-view dl .eps {
 998 |   width: 45px;
 999 |   height: 57px;
1000 |   background-position: 20px -297px;
1001 | }
1002 | #Main-border .Gird-view dl .ppt {
1003 |   width: 45px;
1004 |   height: 57px;
1005 |   background-position: 20px -454px;
1006 | }
1007 | #Main-border .Gird-view dl .css {
1008 |   width: 45px;
1009 |   height: 57px;
1010 |   background-position: 20px -611px;
1011 | }
1012 | #Main-border .Gird-view dl .avi {
1013 |   width: 45px;
1014 |   height: 60px;
1015 |   background-position: 20px 20px;
1016 | }
1017 | #Main-border .Gird-view dl .mp3 {
1018 |   width: 45px;
1019 |   height: 57px;
1020 |   background-position: 20px -768px;
1021 | }
1022 | #Main-border .Gird-view dl .HTML {
1023 |   width: 45px;
1024 |   height: 57px;
1025 |   background-position: 20px -925px;
1026 | }
1027 | #Main-border .Gird-view dl .pdf {
1028 |   width: 45px;
1029 |   height: 57px;
1030 |   background-position: 20px -1082px;
1031 | }
1032 | #Main-border .Gird-view dl .txt {
1033 |   width: 45px;
1034 |   height: 57px;
1035 |   background-position: 20px -1239px;
1036 | }
1037 | #Main-border .Gird-view dl .docx {
1038 |   width: 45px;
1039 |   height: 57px;
1040 |   background-position: 20px -1396px;
1041 | }
1042 | #Main-border .Gird-view dl .dll {
1043 |   width: 45px;
1044 |   height: 57px;
1045 |   background-position: 20px -1553px;
1046 | }
1047 | #Main-border .Gird-view dl .jpg {
1048 |   width: 45px;
1049 |   height: 57px;
1050 |   background-position: 20px -1710px;
1051 | }
1052 | #Main-border .Gird-view dl .zip {
1053 |   width: 45px;
1054 |   height: 57px;
1055 |   background-position: 20px -1867px;
1056 | }
1057 | #Main-border .Gird-view dl .psd {
1058 |   width: 45px;
1059 |   height: 57px;
1060 |   background-position: 20px -2024px;
1061 | }
1062 | #Main-border .Gird-view dl .wav {
1063 |   width: 45px;
1064 |   height: 57px;
1065 |   background-position: 20px -2181px;
1066 | }
1067 | #Main-border .Gird-view dl .xls {
1068 |   width: 45px;
1069 |   height: 57px;
1070 |   background-position: 20px -2338px;
1071 | }
1072 | #Main-border .List-view dl {
1073 |   position: absolute;
1074 |   left: 0;
1075 |   top: 0;
1076 |   width: 100%;
1077 |   margin: 0;
1078 | }
1079 | #Main-border .List-view dl dd {
1080 |   margin: 0;
1081 |   width: 100%;
1082 |   height: 40px;
1083 |   display: block;
1084 |   border-bottom: 1px #d4d7dc solid;
1085 | }
1086 | #Main-border .List-view dl dd .Ob {
1087 |   margin-top: 12px;
1088 |   display: block;
1089 |   float: left;
1090 |   width: 100%;
1091 |   height: 23px;
1092 | }
1093 | #Main-border .List-view dl dd .Ob .Haschild {
1094 |   display: inline-block;
1095 |   float: left;
1096 |   margin-left: 50px;
1097 |   width: 16px;
1098 |   height: 16px;
1099 |   background: url("../img/haschild.png") no-repeat;
1100 | }
1101 | #Main-border .List-view dl dd .Ob .File-Title {
1102 |   margin-left: 10px;
1103 |   display: inline-block;
1104 |   float: left;
1105 |   width: 25%;
1106 | }
1107 | #Main-border .List-view dl dd .Ob .Uedit .EditArea {
1108 |   float: left;
1109 |   width: 60%;
1110 |   display: inline-block;
1111 | }
1112 | #Main-border .List-view dl dd .Ob .Uedit .EditArea input {
1113 |   display: none;
1114 | }
1115 | #Main-border .List-view dl dd .Ob .Uedit .EditArea span {
1116 |   display: inline-block;
1117 | }
1118 | #Main-border .List-view dl dd .Ob .Uedit .EditOp {
1119 |   float: left;
1120 |   display: inline-block;
1121 |   width: 40%;
1122 | }
1123 | #Main-border .List-view dl dd .Ob .Uedit .EditOp span:nth-child(1) {
1124 |   display: none;
1125 | }
1126 | #Main-border .List-view dl dd .Ob .Uedit .EditOp span:nth-child(2) {
1127 |   display: none;
1128 | }
1129 | #Main-border .List-view dl dd .Ob .Uedit .EditOp span:nth-child(3) {
1130 |   display: none;
1131 | }
1132 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditArea {
1133 |   float: left;
1134 |   width: 60%;
1135 |   display: inline-block;
1136 | }
1137 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditArea input {
1138 |   display: none;
1139 | }
1140 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditArea span {
1141 |   display: inline-block;
1142 | }
1143 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditOp {
1144 |   float: left;
1145 |   display: inline-block;
1146 |   width: 40%;
1147 | }
1148 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(1) {
1149 |   display: inline-block;
1150 |   width: 24px;
1151 |   height: 24px;
1152 |   margin-top: -5px;
1153 |   background: url("../img/edit.png");
1154 | }
1155 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(2) {
1156 |   display: none;
1157 | }
1158 | #Main-border .List-view dl dd .Ob .Uedit:hover .EditOp span:nth-child(3) {
1159 |   display: none;
1160 | }
1161 | #Main-border .List-view dl dd .Ob .Editing .EditArea {
1162 |   float: left;
1163 |   width: 50%;
1164 |   display: inline-block;
1165 | }
1166 | #Main-border .List-view dl dd .Ob .Editing .EditArea input {
1167 |   display: inline-block;
1168 |   width: 70px;
1169 | }
1170 | #Main-border .List-view dl dd .Ob .Editing .EditArea .Name {
1171 |   display: none;
1172 | }
1173 | #Main-border .List-view dl dd .Ob .Editing .EditOp {
1174 |   float: left;
1175 |   width: 40%;
1176 |   display: inline-block;
1177 | }
1178 | #Main-border .List-view dl dd .Ob .Editing .EditOp .EditButon {
1179 |   display: none;
1180 | }
1181 | #Main-border .List-view dl dd .Ob .Editing .EditOp span:nth-child(2) {
1182 |   display: inline-block;
1183 |   float: left;
1184 |   width: 30px;
1185 |   height: 30px;
1186 |   margin-right: 10px;
1187 |   background: url(../img/btn.png);
1188 |   background-position-x: -2px;
1189 |   background-position-y: 26px;
1190 | }
1191 | #Main-border .List-view dl dd .Ob .Editing .EditOp span:nth-child(3) {
1192 |   display: inline-block;
1193 |   width: 30px;
1194 |   height: 30px;
1195 |   margin-right: 10px;
1196 |   background: url(../img/btn.png);
1197 |   background-position-x: -31px;
1198 |   background-position-y: 26px;
1199 | }
1200 | #Main-border .List-view dl dd .Ob .File-more {
1201 |   margin-left: 20px;
1202 |   display: inline-block;
1203 |   float: left;
1204 |   color: #a4a4a4;
1205 |   width: 20%;
1206 | }
1207 | #Main-border .List-view dl .Unclick:hover {
1208 |   background: #F0F8FD;
1209 | }
1210 | #Main-border .List-view dl .Unclick:hover .Ob div span {
1211 |   display: inline-block;
1212 |   background: url(../img/checkbox.png) 1px -41px no-repeat;
1213 | }
1214 | #Main-border .List-view dl .Unclick .Ob div {
1215 |   display: inline-block;
1216 |   float: left;
1217 |   width: 50px;
1218 |   height: 23px;
1219 | }
1220 | #Main-border .List-view dl .Unclick .Ob div span {
1221 |   display: none;
1222 |   background: url(../img/checkbox.png) 1px -41px no-repeat;
1223 |   float: left;
1224 |   height: 20px;
1225 |   width: 20px;
1226 | }
1227 | #Main-border .List-view dl .Clicked {
1228 |   background: #F0F8FD;
1229 | }
1230 | #Main-border .List-view dl .Clicked .Ob div {
1231 |   display: inline-block;
1232 |   float: left;
1233 |   position: relative;
1234 |   margin: 0 auto;
1235 |   width: 50px;
1236 |   height: 23px;
1237 | }
1238 | #Main-border .List-view dl .Clicked .Ob div span {
1239 |   background: url(../img/checkbox.png) -35px -41px no-repeat;
1240 |   float: left;
1241 |   height: 20px;
1242 |   width: 20px;
1243 | }
1244 | #Main-border .List-view dl .Drec {
1245 |   background: url(../img/listIcon.png) 32px -30px no-repeat;
1246 | }
1247 | #Main-border .List-view dl .avi,
1248 | #Main-border .List-view dl .doc,
1249 | #Main-border .List-view dl .eps,
1250 | #Main-border .List-view dl .ppt,
1251 | #Main-border .List-view dl .css,
1252 | #Main-border .List-view dl .mp3,
1253 | #Main-border .List-view dl .HTML,
1254 | #Main-border .List-view dl .pdf,
1255 | #Main-border .List-view dl .txt,
1256 | #Main-border .List-view dl .docx,
1257 | #Main-border .List-view dl .dll,
1258 | #Main-border .List-view dl .jpg,
1259 | #Main-border .List-view dl .zip,
1260 | #Main-border .List-view dl .psd,
1261 | #Main-border .List-view dl .wav,
1262 | #Main-border .List-view dl .xls {
1263 |   background: url(../img/list-icon2.png) no-repeat;
1264 | }
1265 | #Main-border .List-view dl .doc {
1266 |   background-position: 32px -31px;
1267 | }
1268 | #Main-border .List-view dl .eps {
1269 |   background-position: 32px -61px;
1270 | }
1271 | #Main-border .List-view dl .ppt {
1272 |   background-position: 32px -91px;
1273 | }
1274 | #Main-border .List-view dl .css {
1275 |   background-position: 32px -121px;
1276 | }
1277 | #Main-border .List-view dl .avi {
1278 |   background-position: 32px 0;
1279 | }
1280 | #Main-border .List-view dl .mp3 {
1281 |   background-position: 32px -151px;
1282 | }
1283 | #Main-border .List-view dl .HTML {
1284 |   background-position: 32px -181px;
1285 | }
1286 | #Main-border .List-view dl .pdf {
1287 |   background-position: 32px -211px;
1288 | }
1289 | #Main-border .List-view dl .txt {
1290 |   background-position: 32px -241px;
1291 | }
1292 | #Main-border .List-view dl .docx {
1293 |   background-position: 32px -271px;
1294 | }
1295 | #Main-border .List-view dl .dll {
1296 |   background-position: 32px -301px;
1297 | }
1298 | #Main-border .List-view dl .jpg {
1299 |   background-position: 32px -331px;
1300 | }
1301 | #Main-border .List-view dl .zip {
1302 |   background-position: 32px -361px;
1303 | }
1304 | #Main-border .List-view dl .psd {
1305 |   background-position: 32px -391px;
1306 | }
1307 | #Main-border .List-view dl .wav {
1308 |   background-position: 32px -421px;
1309 | }
1310 | #Main-border .List-view dl .xls {
1311 |   background-position: 32px -451px;
1312 | }
1313 | #Main-border #Scrollbar {
1314 |   display: none;
1315 |   position: absolute;
1316 |   right: 0;
1317 |   top: 150px;
1318 |   background: #fff;
1319 |   width: 20px;
1320 |   height: 500px;
1321 | }
1322 | #Main-border #Scrollbar span {
1323 |   display: none;
1324 |   position: absolute;
1325 |   background: #bbbdc1;
1326 |   width: 18px;
1327 |   height: 10px;
1328 |   border: 1px solid #bbbdc1;
1329 |   border-radius: 6px;
1330 | }
1331 | #Main-border #Scrollbar span:hover {
1332 |   display: none;
1333 |   position: absolute;
1334 |   background: #cdf5fd;
1335 |   width: 18px;
1336 |   height: 10px;
1337 |   border: 1px solid #bbbdc1;
1338 |   border-radius: 6px;
1339 | }
1340 | #Mask {
1341 |   position: absolute;
1342 |   left: 0;
1343 |   top: 0;
1344 |   width: 100%;
1345 |   height: 100%;
1346 |   display: none;
1347 |   z-index: 100;
1348 | }
1349 | #Confirm {
1350 |   position: absolute;
1351 |   left: 50%;
1352 |   top: 50%;
1353 |   margin-left: -250px;
1354 |   margin-top: -125px;
1355 |   width: 500px;
1356 |   height: 250px;
1357 |   border: 5px solid #999999;
1358 |   background-color: #FFFFFF;
1359 |   z-index: 100;
1360 | }
1361 | #Confirm h3 {
1362 |   margin: 0;
1363 |   padding: 10px 0 10px 0;
1364 |   background-color: #F6F6F6;
1365 | }
1366 | #Confirm .Areyousure {
1367 |   text-align: center;
1368 |   padding-top: 44px;
1369 |   width: 500px;
1370 |   height: 20%;
1371 | }
1372 | #Confirm #Confirm-Button {
1373 |   width: 500px;
1374 |   margin-top: 50px;
1375 |   height: 20%;
1376 |   text-align: center;
1377 | }
1378 | #Confirm #Confirm-Button .Cb {
1379 |   display: inline-block;
1380 |   margin-left: 10px;
1381 |   width: 120px;
1382 |   height: 30px;
1383 |   border: 1px solid #80848C;
1384 |   border-radius: 2px;
1385 |   font-size: 20px;
1386 | }
1387 | #Confirm #Confirm-Button .CB-Ac {
1388 |   background-color: #008AF5;
1389 |   color: #fff;
1390 | }
1391 | #Confirm #Confirm-Button .CB-Ua {
1392 |   background-color: #d0d2d6;
1393 |   color: #000;
1394 | }
1395 | #Confirm2 {
1396 |   position: absolute;
1397 |   left: 50%;
1398 |   top: 50%;
1399 |   margin-left: -250px;
1400 |   margin-top: -125px;
1401 |   width: 500px;
1402 |   height: 250px;
1403 |   border: 5px solid #999999;
1404 |   background-color: #FFFFFF;
1405 |   z-index: 100;
1406 |   display: none;
1407 | }
1408 | #Confirm2 h3 {
1409 |   margin: 0;
1410 |   padding: 10px 0 10px 0;
1411 |   background-color: #F6F6F6;
1412 | }
1413 | #Confirm2 .Areyousure {
1414 |   text-align: center;
1415 |   padding-top: 44px;
1416 |   width: 500px;
1417 |   height: 20%;
1418 | }
1419 | #Confirm2 #Confirm-Button2 {
1420 |   width: 500px;
1421 |   margin-top: 50px;
1422 |   height: 20%;
1423 |   text-align: center;
1424 | }
1425 | #Confirm2 #Confirm-Button2 .Cb {
1426 |   display: inline-block;
1427 |   margin-left: 10px;
1428 |   width: 120px;
1429 |   height: 30px;
1430 |   border: 1px solid #80848C;
1431 |   border-radius: 2px;
1432 |   font-size: 20px;
1433 | }
1434 | #Confirm2 #Confirm-Button2 .CB-Ac {
1435 |   background-color: #008AF5;
1436 |   color: #fff;
1437 | }
1438 | #Confirm2 #Confirm-Button2 .CB-Ua {
1439 |   background-color: #d0d2d6;
1440 |   color: #000;
1441 | }
1442 | #SelectTab {
1443 |   width: 0px;
1444 |   height: 0px;
1445 |   background: #cdf5fd;
1446 |   position: absolute;
1447 |   left: 0;
1448 |   top: 0;
1449 |   border: 1px solid #000;
1450 |   z-index: 100;
1451 |   opacity: 0.5;
1452 | }
1453 | .tabShow {
1454 |   display: inline-block;
1455 | }
1456 | .tabHide {
1457 |   display: none;
1458 | }
1459 | #rightMenu {
1460 |   position: absolute;
1461 |   width: 150px;
1462 |   height: 120px;
1463 |   z-index: 100;
1464 |   left: 0;
1465 |   top: 0;
1466 |   background: #FFFFFF;
1467 |   border: 1px solid #BABABA;
1468 |   display: none;
1469 |   cursor: pointer;
1470 | }
1471 | #rightMenu #R-Operation {
1472 |   display: inline-block;
1473 |   width: 100%;
1474 |   height: 60%;
1475 | }
1476 | #rightMenu #R-Operation .R-Operation-list {
1477 |   width: 100%;
1478 |   height: 33%;
1479 |   text-align: center;
1480 |   vertical-align: middle;
1481 |   line-height: 19px;
1482 | }
1483 | #rightMenu #R-Operation .R-Operation-list:hover {
1484 |   background-color: #00B4CC;
1485 | }
1486 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) #R-LorG {
1487 |   width: 80px;
1488 |   position: relative;
1489 |   left: 150px;
1490 |   top: -20px;
1491 |   background-color: #fff;
1492 |   border: 1px solid #80848C;
1493 |   padding: 0;
1494 |   display: none;
1495 | }
1496 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) #R-LorG li:hover {
1497 |   background-color: #00B4CC;
1498 | }
1499 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) .List-view-span li:nth-child(1) span {
1500 |   display: inline-block;
1501 |   width: 5px;
1502 |   height: 5px;
1503 |   margin-right: 2px;
1504 |   background-color: #f5a843;
1505 |   border-radius: 10px ;
1506 | }
1507 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) .List-view-span li:nth-child(2) span {
1508 |   display: none;
1509 |   height: 5px;
1510 |   margin-right: 2px;
1511 |   background-color: #f5a843;
1512 |   border-radius: 10px ;
1513 | }
1514 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) .Gird-view-span li:nth-child(1) span {
1515 |   display: none;
1516 |   height: 5px;
1517 |   margin-right: 2px;
1518 |   background-color: #f5a843;
1519 |   border-radius: 10px ;
1520 | }
1521 | #rightMenu #R-Operation .R-Operation-list:nth-child(1) .Gird-view-span li:nth-child(2) span {
1522 |   display: inline-block;
1523 |   width: 5px;
1524 |   height: 5px;
1525 |   margin-right: 2px;
1526 |   background-color: #f5a843;
1527 |   border-radius: 10px ;
1528 | }
1529 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) #R-UporDown {
1530 |   width: 80px;
1531 |   position: relative;
1532 |   left: -82px;
1533 |   top: -15px;
1534 |   background-color: #fff;
1535 |   border: 1px solid #80848C;
1536 |   padding: 0;
1537 |   display: none;
1538 | }
1539 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) #R-UporDown li:hover {
1540 |   background-color: #00B4CC;
1541 | }
1542 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .nameD li:nth-child(1) span {
1543 |   display: inline-block;
1544 |   height: 5px;
1545 |   margin-right: 2px;
1546 |   background-color: #f5a843;
1547 |   border-radius: 10px ;
1548 | }
1549 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .nameD li:nth-child(2) span {
1550 |   display: none;
1551 | }
1552 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .nameD li:nth-child(3) span {
1553 |   display: none;
1554 | }
1555 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .capD li:nth-child(1) span {
1556 |   display: none;
1557 | }
1558 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .capD li:nth-child(2) span {
1559 |   display: inline-block;
1560 |   height: 5px;
1561 |   margin-right: 2px;
1562 |   background-color: #f5a843;
1563 |   border-radius: 10px ;
1564 | }
1565 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .capD li:nth-child(3) span {
1566 |   display: none;
1567 | }
1568 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .TimeD li:nth-child(1) span {
1569 |   display: none;
1570 | }
1571 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .TimeD li:nth-child(2) span {
1572 |   display: none;
1573 | }
1574 | #rightMenu #R-Operation .R-Operation-list:nth-child(2) .TimeD li:nth-child(3) span {
1575 |   display: inline-block;
1576 |   height: 5px;
1577 |   margin-right: 2px;
1578 |   background-color: #f5a843;
1579 |   border-radius: 10px ;
1580 | }
1581 | #rightMenu #R-Operation .Trigle1,
1582 | #rightMenu #R-Operation .Trigle2 {
1583 |   display: inline-block;
1584 |   position: relative;
1585 |   margin-right: 5px;
1586 |   width: 0;
1587 |   height: 0;
1588 |   border-top: 5px solid transparent;
1589 |   border-left: 10px solid black;
1590 |   border-bottom: 5px solid transparent;
1591 | }
1592 | #rightMenu #R-Operation .Trigle2 {
1593 |   left: 60px;
1594 | }
1595 | #rightMenu #R-Operation .Trigle1 {
1596 |   left: 48px;
1597 | }
1598 | #rightMenu #R-Tool {
1599 |   border-top: 1px solid #c6c8cc ;
1600 |   display: inline-block;
1601 |   width: 100%;
1602 |   height: 40%;
1603 | }
1604 | #rightMenu #R-Tool .R-Tool-list {
1605 |   margin-top: 0;
1606 |   text-align: center;
1607 |   line-height: 19px;
1608 |   width: 100%;
1609 |   height: 49%;
1610 | }
1611 | #rightMenu #R-Tool span {
1612 |   display: inline-block;
1613 |   float: left;
1614 | }
1615 | #rightMenu #R-Tool .Folder {
1616 |   display: inline-block;
1617 |   margin-left: 25px;
1618 |   width: 20px;
1619 |   height: 15px;
1620 |   background: url("../img/small-folder.png") 0px -41px;
1621 | }
1622 | 


--------------------------------------------------------------------------------
/css/Main.less:
--------------------------------------------------------------------------------
   1 | html, body, div, ul {
   2 |   margin: 0;
   3 | }
   4 | 
   5 | a {
   6 |   text-decoration: none;
   7 | }
   8 | 
   9 | html, body {
  10 |   width: 100%;
  11 |   height: 100%;
  12 |   font: 12px/1.5 "Microsoft YaHei", "Microsoft JhengHei", "黑体";
  13 | }
  14 | 
  15 | li {
  16 |   list-style: none;
  17 | }
  18 | 
  19 | @Button-height: 50px;
  20 | 
  21 | .f-icon {
  22 |   background-image: url("../img/frame-icon.png");
  23 |   background-repeat: no-repeat;
  24 | }
  25 | 
  26 | .Boutton-ico {
  27 |   margin-right: 4px;
  28 |   width: 22px;
  29 |   height: 22px;
  30 |   background: url("../img/navigator.png") no-repeat;
  31 | }
  32 | 
  33 | .Boutton-ico2 {
  34 |   margin-right: 4px;
  35 |   width: 33px;
  36 |   height: 24px;
  37 |   background: url("../img/btn-4.png") no-repeat;
  38 | }
  39 | 
  40 | #Out-border {
  41 |   position: absolute;
  42 |   left: 0;
  43 |   top: 0;
  44 |   width: 100%;
  45 |   height: 100%;
  46 |   min-width: 1200px;
  47 |   overflow: hidden;
  48 | }
  49 | 
  50 | #Top-banner {
  51 |   float: left;
  52 |   width: 100%;
  53 |   background-color: #252525;
  54 |   height: @Button-height;
  55 |   a {
  56 |     color: white;
  57 |   }
  58 |   #Logo {
  59 |     float: left;
  60 |     margin-left: 10px;
  61 |     margin-top: 5px;
  62 |     height: 36px;
  63 |     width: 113px;
  64 |     background-position: 0 0;
  65 |     display: inline;
  66 |   }
  67 | 
  68 |   #Page-Button {
  69 |     padding: 0 0 3px 25px;
  70 |     height: 45px;
  71 |     float: left;
  72 |     width: 400px;
  73 |     padding-bottom: 0 !important;
  74 |     display: block;
  75 | 
  76 |   }
  77 | 
  78 | }
  79 | 
  80 | .Page-Button {
  81 |   float: left;
  82 |   display: inline-block;
  83 |   width: 90px;
  84 |   height: @Button-height;
  85 |   margin-left: 5px;
  86 |   font: 18px "Microsoft YaHei", "Microsoft JhengHei", "黑体";
  87 |   text-align: center;
  88 |   line-height: 48px;
  89 | }
  90 | 
  91 | .Page-Button-unActive {
  92 |   color: #d8d8d8;
  93 | }
  94 | 
  95 | .Page-Button-Active {
  96 |   background-color: #0f0f0f;
  97 |   font-weight: bold;
  98 |   color: #FFF;
  99 | }
 100 | 
 101 | .Page-down, .Page-up {
 102 |   float: left;
 103 |   display: inline-block;
 104 |   width: 90px;
 105 |   height: @Button-height;
 106 |   em {
 107 |     float: right;
 108 |     display: inline-block;
 109 |     margin-right: 9px;
 110 |     margin-top: 18px;
 111 |     height: 12px;
 112 |     width: 12px;
 113 |     font-size: 0;
 114 | 
 115 |   }
 116 | }
 117 | 
 118 | .Page-down {
 119 |   em {
 120 |     background-position: -89px -55px !important;
 121 |   }
 122 | }
 123 | 
 124 | .Page-up {
 125 |   em {
 126 |     background-position: -89px -45px !important;
 127 |   }
 128 | }
 129 | 
 130 | .separate {
 131 |   float: left;
 132 |   display: inline-block;
 133 |   margin: 0;
 134 |   height: 48px;
 135 |   width: 2px;
 136 |   background: #2a2b2d;
 137 | }
 138 | 
 139 | #User-information {
 140 |   display: inline-block;
 141 |   float: right;
 142 |   width: 600px;
 143 |   height: 48px;
 144 |   line-height: 48px;
 145 |   ul {
 146 |     display: block;
 147 |     float: left;
 148 |     width: 100%;
 149 |     height: 100%;
 150 |     li {
 151 |       display: inline-block;
 152 |       float: left;
 153 |       width: 60px;
 154 |       height: 48px;
 155 |       color: #FFFFFF;
 156 |       margin-right: 10px;
 157 |       text-align: center;
 158 |     }
 159 | 
 160 |     //li:nth-child(1) {
 161 |     //  width:140px;
 162 |     //  input {
 163 |     //    width:100px;
 164 |     //  }
 165 |     //  span {
 166 |     //    background: whitesmoke;
 167 |     //    width:10px;
 168 |     //    height: 48px;
 169 |     //    margin-left:2px;
 170 |     //    border: 1px solid brown;
 171 |     //    border-radius:2px;
 172 |     //  }
 173 |     //}
 174 | 
 175 |     #Storage {
 176 |       width: 173px;
 177 |       .progress {
 178 |         display: inline-block;
 179 |         width: 130px;
 180 |         height: 22px;
 181 |         .pro-con {
 182 |           display: block;
 183 |           width: 130px;
 184 |           height: 20px;
 185 |           margin-top: 5px;
 186 |           background: white;
 187 |           border: 1px solid brown;
 188 |           border-radius: 2px;
 189 |           .bar {
 190 |             display: inline-block;
 191 |             background: springgreen;
 192 |             float: left;
 193 |             height: 20px;
 194 |             width: 93.8434%;
 195 |             color: gray;
 196 |             line-height: 20px;
 197 |           }
 198 | 
 199 |         }
 200 | 
 201 |       }
 202 |       a {
 203 |         display: inline-block;
 204 |         width: 35px;
 205 |         color: #d8d8d8;
 206 |         margin-right: 2px;
 207 |       }
 208 |     }
 209 |     #User-name {
 210 |       color: #fff;
 211 |     }
 212 | 
 213 |     #vip-center {
 214 |       display: block;
 215 |       width: 100%;
 216 |       margin-top: 13px;
 217 |       height: 22px;
 218 |       -webkit-border-radius: 5px;
 219 |       -moz-border-radius: 5px;
 220 |       border-radius: 5px;
 221 |       background: red;
 222 |       color: #fff;
 223 |       font: 12px/1.5 "SimSun";
 224 |       text-align: center;
 225 |       line-height: 22px;
 226 |     }
 227 | 
 228 |     #Download-App {
 229 |       width: 100px;
 230 |     }
 231 | 
 232 |   }
 233 | 
 234 | }
 235 | 
 236 | #Right-banner {
 237 |   display: inline-block;
 238 |   float: left;
 239 |   width: 210px;
 240 |   min-height: 100%;
 241 |   font-size: 14px;
 242 |   background-color: #f0f0f0;
 243 |   border-right: #c6c8cc 1px solid;
 244 | 
 245 |   #Item-list {
 246 |     float: left;
 247 |     width: 210px;
 248 |     height: 296px;
 249 |     li {
 250 |       width: 210px;
 251 |       margin-top: 10px;
 252 |       margin-left: -40px;
 253 |       height: 32px;
 254 |       line-height: 32px;
 255 |       border-top:1px solid #F0F0F0;
 256 |       border-bottom:1px solid #F0F0F0;
 257 |     }
 258 |     @ItemhoverColor:#E2E2E2;
 259 |     .active {
 260 |       background:@ItemhoverColor;
 261 |       border-top:1px solid #F2F2F2;
 262 |       border-bottom:1px solid #F2F2F2;
 263 | 
 264 |         a {
 265 |           span {
 266 |             background-position-x:-23px!important;
 267 |           }
 268 |         }
 269 | 
 270 |     }
 271 | 
 272 |     span {
 273 |       margin-right: 10px;
 274 |     }
 275 |     a {
 276 |       margin-left: 40px;
 277 |       color: #666;
 278 |       span {
 279 |         display: inline-block;
 280 |         vertical-align: middle;
 281 |       }
 282 | 
 283 |     }
 284 | 
 285 |     li:nth-child(1) {
 286 |       a {
 287 |         span {
 288 |           background-position: 0 0;
 289 |         }
 290 |       }
 291 |     }
 292 | 
 293 |     li:nth-child(2) {
 294 |       a {
 295 |         span {
 296 |           background-position: 0 -22px
 297 |         }
 298 |       }
 299 |     }
 300 | 
 301 |     li:nth-child(3) {
 302 |       a {
 303 |         span {
 304 |           background-position: 0 -44px;
 305 |         }
 306 |       }
 307 |     }
 308 | 
 309 |     li:nth-child(4) {
 310 |       a {
 311 |         span {
 312 |           background-position: 0 -89px;
 313 |         }
 314 |       }
 315 |     }
 316 | 
 317 |     li:nth-child(5) {
 318 |       a {
 319 |         span {
 320 |           background-position: 0 -201px;
 321 |         }
 322 |       }
 323 |     }
 324 | 
 325 |     li:nth-child(6) {
 326 |       a {
 327 |         span {
 328 |           background-position: 0 -66px;
 329 |         }
 330 |       }
 331 |     }
 332 | 
 333 |     li:nth-child(7) {
 334 |       a {
 335 |         span {
 336 |           background-position: 0 -177px;
 337 |         }
 338 |       }
 339 |     }
 340 | 
 341 | 
 342 |     li:nth-child(1):hover {
 343 |       background:@ItemhoverColor;
 344 |       border-top:1px solid #F2F2F2;
 345 |       border-bottom:1px solid #F2F2F2;
 346 |       a {
 347 |         span {
 348 |           background-position: -23px 0;
 349 |         }
 350 |       }
 351 |     }
 352 | 
 353 |     li:nth-child(2):hover {
 354 |       background:@ItemhoverColor;
 355 |       border-top:1px solid #F2F2F2;
 356 |       border-bottom:1px solid #F2F2F2;
 357 |       a {
 358 |         span {
 359 |           background-position: -23px -22px
 360 |         }
 361 |       }
 362 |     }
 363 | 
 364 |     li:nth-child(3):hover {
 365 |       background:@ItemhoverColor;
 366 |       border-top:1px solid #F2F2F2;
 367 |       border-bottom:1px solid #F2F2F2;
 368 |       a {
 369 |         span {
 370 |           background-position: -23px -44px;
 371 |         }
 372 |       }
 373 |     }
 374 | 
 375 |     li:nth-child(4):hover {
 376 |       background:@ItemhoverColor;
 377 |       border-top:1px solid #F2F2F2;
 378 |       border-bottom:1px solid #F2F2F2;
 379 |       a {
 380 |         span {
 381 |           background-position: -23px -89px;
 382 |         }
 383 |       }
 384 |     }
 385 | 
 386 |     li:nth-child(5):hover {
 387 | 
 388 |       background:@ItemhoverColor;
 389 |       border-top:1px solid #F2F2F2;
 390 |       border-bottom:1px solid #F2F2F2;
 391 |       a {
 392 |         span {
 393 |           background-position: -23px -201px;
 394 |         }
 395 |       }
 396 |     }
 397 | 
 398 |     li:nth-child(6):hover {
 399 | 
 400 |       background:@ItemhoverColor;
 401 |       border-top:1px solid #F2F2F2;
 402 |       border-bottom:1px solid #F2F2F2;
 403 |       a {
 404 |         span {
 405 |           background-position: -23px -66px;
 406 |         }
 407 |       }
 408 |     }
 409 | 
 410 |     li:nth-child(7):hover {
 411 | 
 412 |       background:@ItemhoverColor;
 413 |       border-top:1px solid #F2F2F2;
 414 |       border-bottom:1px solid #F2F2F2;
 415 |       a {
 416 |         span {
 417 |           background-position: -23px -177px;
 418 |         }
 419 |       }
 420 |     }
 421 | 
 422 |   }
 423 | 
 424 |   #Item-More {
 425 |     float: left;
 426 |     width: 210px;
 427 |     height: 90px;
 428 |     .Boutton-ico3 {
 429 |       display: inline-block;
 430 |       width: 20px;
 431 |       height: 20px;
 432 | 
 433 |     }
 434 | 
 435 |     span {
 436 |       margin-right: 10px;
 437 |     }
 438 | 
 439 |     .Item-Sperate {
 440 |       width: 210px;
 441 |       height: 0;
 442 |       margin: 0px 0 5px 0;
 443 |       border-top: #dce1e6 1px solid;
 444 |       border-bottom: #f7f9fb 1px solid;
 445 |     }
 446 |     a {
 447 |       color: #666;
 448 |       span {
 449 |         display: inline-block;
 450 |         vertical-align: middle;
 451 |       }
 452 |     }
 453 |     li {
 454 |       width: 210px;
 455 |       margin-top: 10px;
 456 |       margin-left: -40px;
 457 |       height: 32px;
 458 |       line-height: 32px;
 459 |       border-top: 1px solid #F0F0F0;
 460 |       border-bottom: 1px solid #F0F0F0;
 461 |       a {
 462 |         margin-left: 40px;
 463 |         position: relative;
 464 |         bottom: 5px;
 465 |       }
 466 |     }
 467 | 
 468 |     li:nth-child(1) {
 469 |       a {
 470 |         span:nth-child(1) {
 471 |           background: url("../img/Item-more.png");
 472 |           background-position: 0 0;
 473 |         }
 474 |       }
 475 |     }
 476 | 
 477 |     li:nth-child(2) {
 478 |       border-top: 1px solid #F0F0F0;
 479 |       border-bottom: 1px solid #F0F0F0;
 480 |       a {
 481 |         span:nth-child(1) {
 482 |           background: url("../img/Item-more.png");
 483 |           background-position: -2px -22px;
 484 |         }
 485 |       }
 486 |     }
 487 |     li:nth-child(2):hover {
 488 |       background: #E2E2E2;
 489 |       border-top: 1px solid #F2F2F2;
 490 |       border-bottom: 1px solid #F2F2F2;
 491 |       a {
 492 |         span:nth-child(1)  {
 493 |           background: url("../img/Item-more.png");
 494 |           background-position: 20px -22px!important;
 495 |         }
 496 |       }
 497 | 
 498 |     }
 499 | 
 500 |     .active {
 501 |       background: #E2E2E2;
 502 |       border-top: 1px solid #F2F2F2;
 503 |       border-bottom: 1px solid #F2F2F2;
 504 |       a {
 505 |         span:nth-child(1)  {
 506 |           background: url("../img/Item-more.png");
 507 |           background-position: 20px -22px!important;
 508 |         }
 509 |       }
 510 |     }
 511 | 
 512 |   }
 513 | 
 514 |   #Device {
 515 |     float: left;
 516 |     margin-top: 10px;
 517 |     margin-left: 25px;
 518 |     width: 225px;
 519 |     height: 50px;
 520 |     a {
 521 |       display: inline-block;
 522 |       font-size: 12px;
 523 |       width: 46px;
 524 |       height: 42px;
 525 |       margin-left: -4px;
 526 |       color: #666;
 527 |       text-align: center;
 528 |       span {
 529 |         display: inline-block;
 530 |         text-align: center;
 531 |       }
 532 | 
 533 |       span:nth-child(1) {
 534 |         display: inline-block;
 535 |         margin-left: 6px;
 536 |       }
 537 |     }
 538 | 
 539 |     a:nth-child(1) {
 540 |       span {
 541 |         background-position: 0 -73px;
 542 |       }
 543 |     }
 544 | 
 545 |     a:nth-child(2) {
 546 |       span {
 547 | 
 548 |         background-position: -70px -73px;
 549 |       }
 550 |     }
 551 | 
 552 |     a:nth-child(3) {
 553 |       span {
 554 |         background-position: 0 0;
 555 |       }
 556 |     }
 557 | 
 558 |     a:nth-child(4) {
 559 |       span {
 560 |         background-position: -206px -73px;
 561 |       }
 562 |     }
 563 | 
 564 |   }
 565 | 
 566 | }
 567 | 
 568 | #Main-border {
 569 |   margin-top: -18px;
 570 |   margin-left: 210px;
 571 |   position: relative;
 572 |   box-shadow: -1px 0 3px #aaa;
 573 |   min-width: 990px;
 574 |   min-height: 100%;
 575 |   font-size: 12px;
 576 |   #Tools-bar {
 577 |     position: relative;
 578 |     left: 1px;
 579 |     height: 50px;
 580 |     padding-left: 10px;
 581 |     line-height: 50px;
 582 |     border-bottom: 1px solid #d2d2d2;
 583 |     background: #F7F7F7 left -53px repeat-x;
 584 | 
 585 |     span {
 586 |       display: inline-block;
 587 |       margin-left: 10px;
 588 |       height: 28px;
 589 |       line-height: 28px;
 590 |     }
 591 | 
 592 | #Tools {
 593 |   position: absolute; top: 0px; padding-top: 11px; line-height: normal;
 594 |   .Upload {
 595 |     float: left;
 596 |     span{
 597 |       background: url("../img/uploadCreate.png") ;
 598 |       display: inline-block;
 599 |       margin-right: 10px;
 600 |       margin-left: 18px;
 601 |       vertical-align: middle;
 602 |       height: 24px;
 603 |       width: 20px;
 604 |     }
 605 |     width: 106px;
 606 |     color: #fff;
 607 |     -webkit-border-radius:3px;
 608 |     -moz-border-radius:3px;
 609 |     border-radius:3px;;
 610 |     background: url("../img/button.png") no-repeat right -645px;
 611 |   }
 612 | 
 613 |   .Upload:hover {
 614 |     span{
 615 |       background: url("../img/uploadCreate.png");
 616 |     }
 617 |     background: url("../img/button.png") no-repeat right -682px;
 618 |   }
 619 | 
 620 | 
 621 | 
 622 | 
 623 |   .NewFolder {
 624 |       span{
 625 |         background: url("../img/uploadCreate.png") -150px 0;
 626 |         display: inline-block;
 627 |         margin-right: 10px;
 628 |         margin-left: 18px;
 629 |         vertical-align: middle;
 630 |         height: 24px;
 631 |         width: 20px;
 632 |       }
 633 | 
 634 |     float: left;
 635 |     width: 114px;
 636 |     border-right:2px solid #c6c8cc;
 637 |     color: #666;
 638 |     -webkit-border-radius:3px;
 639 |     -moz-border-radius:3px;
 640 |     border-radius:3px;;
 641 |     background: url("../img/button.png") no-repeat 0 -144px;
 642 | 
 643 |   }
 644 |   .NewFolder:hover {
 645 |     span{
 646 |       background: url("../img/uploadCreate.png") -180px 0;
 647 |     }
 648 | 
 649 |     background: url("../img/button.png") no-repeat 0 -180px;
 650 | 
 651 |   }
 652 | 
 653 |   .Lixian {
 654 |     span{
 655 |       background: url("../img/lixian.png");
 656 |       display: inline-block;
 657 |       margin-right: 10px;
 658 |       margin-left: 18px;
 659 |       margin-bottom: 1px;
 660 |       vertical-align: middle;
 661 |       height: 24px;
 662 |       width: 20px;
 663 |     }
 664 | 
 665 |     float: left;
 666 |     width: 114px;
 667 |     border-right:2px solid #c6c8cc;
 668 |     color: #666;
 669 |     -webkit-border-radius:3px;
 670 |     -moz-border-radius:3px;
 671 |     border-radius:3px;;
 672 |     background: url("../img/button.png") no-repeat 0 -144px;
 673 | 
 674 |   }
 675 | 
 676 |   .Lixian:hover {
 677 |     span{
 678 |       background: url("../img/lixian.png") -30px 0;
 679 | 
 680 |     }
 681 | 
 682 |     background: url("../img/button.png") no-repeat 0 -180px;
 683 | 
 684 |   }
 685 | 
 686 |   .Mydevice {
 687 |     span{
 688 |       background: url("../img/lixian.png") -60px 0 ;
 689 |       display: inline-block;
 690 |       margin-right: 10px;
 691 |       margin-left: 18px;
 692 |       margin-bottom: 1px;
 693 |       vertical-align: middle;
 694 |       height: 24px;
 695 |       width: 20px;
 696 |     }
 697 | 
 698 |     float: left;
 699 |     width: 114px;
 700 |     border-left:2px solid #c6c8cc;
 701 |     color: #666;
 702 |     -webkit-border-radius:3px;
 703 |     -moz-border-radius:3px;
 704 |     border-radius:3px;;
 705 |     background: url("../img/button.png") no-repeat;
 706 |     background-position-y: -260px;
 707 |     background-position-x: -83px;
 708 | 
 709 |   }
 710 | 
 711 |   .Mydevice:hover {
 712 |     span{
 713 |       background: url("../img/lixian.png") -90px 0px ;
 714 |     }
 715 | 
 716 | 
 717 |     background: url("../img/button.png") no-repeat;
 718 |     background-position-y: -296px;
 719 |     background-position-x: -83px;
 720 | 
 721 |   }
 722 | 
 723 | 
 724 | }
 725 | 
 726 | 
 727 | 
 728 | 
 729 | 
 730 |     .list-gird-switch {
 731 |       margin: 8px 0 0 0;
 732 |       float: right;
 733 |       height: 29px;
 734 |       width: 92px;
 735 | 
 736 |       .list-switch {
 737 |         height: 29px;
 738 |         width: 32px;
 739 |         float: left;
 740 |         background: url("../img/list-switch.png") no-repeat 0 0;
 741 |       }
 742 | 
 743 |       .gird-switch {
 744 |         height: 29px;
 745 |         width: 32px;
 746 |         float: left;
 747 | 
 748 |         background: url("../img/list-switch.png") no-repeat;
 749 |       }
 750 | 
 751 |     }
 752 | 
 753 | 
 754 | 
 755 |     .list-switch-on {
 756 |       .list-switch {
 757 |         background: url("../img/list-switch.png") no-repeat 0 0;
 758 |       }
 759 | 
 760 |       .gird-switch {
 761 |         background: url("../img/list-switch.png") no-repeat;
 762 |         background-position: right 0;
 763 |       }
 764 | 
 765 |       .gird-switch:hover {
 766 |         background-position: right -70px;
 767 |       }
 768 |     }
 769 | 
 770 | 
 771 |     .gird-switch-on {
 772 |       .list-switch {
 773 |         background: url("../img/list-switch.png") no-repeat 0 -35px;
 774 |       }
 775 | 
 776 |       .list-switch:hover {
 777 |         background-position: 0 -70px;
 778 |       }
 779 | 
 780 |       .gird-switch {
 781 |         background: url("../img/list-switch.png") no-repeat;
 782 |         background-position: right -35px;
 783 |       }
 784 |     }
 785 | 
 786 | 
 787 | 
 788 | 
 789 | 
 790 |     .g-button-drop-down {
 791 |       vertical-align: top;
 792 |       margin: 0 5px;
 793 |       display: inline-block;
 794 |     }
 795 | 
 796 |     .g-button {
 797 | 
 798 |     }
 799 | 
 800 | 
 801 |     }
 802 | 
 803 | .Nav-title {
 804 |   display: block;
 805 |   position: relative;
 806 |   left: 1px;
 807 |   margin: 10px 0 10px 0;
 808 |   padding: 0px 27px;
 809 |   background-color: #FFF;
 810 |   height:20px;
 811 | 
 812 |   ul{
 813 |     float: left;
 814 |     margin-left: -40px;
 815 |     li{
 816 |       display:inline-block;
 817 |       float: left;
 818 |       margin-right:5px;
 819 |     }
 820 | 
 821 |   }
 822 | 
 823 | }
 824 | 
 825 | .Notin {
 826 |     .inDrectory-list {
 827 |       display: none;
 828 |     }
 829 |   .Back-to-main {
 830 |     .Blue {
 831 |       color: #80848C;
 832 |     }
 833 |   }
 834 | }
 835 | 
 836 | 
 837 | .InaDrec {
 838 | 
 839 |   .inDrectory-list {
 840 |     display: inline-block;
 841 |   }
 842 |   .Blue {
 843 |     color: dodgerblue;
 844 |     cursor: pointer;
 845 |   }
 846 | 
 847 |   .Blue:hover {
 848 |     text-decoration: underline;
 849 |   }
 850 | 
 851 |   .Gray {
 852 |     color: #a4a4a4;
 853 |   }
 854 | 
 855 | }
 856 | 
 857 | 
 858 | 
 859 |   #Operation-bar {
 860 |     position: relative;
 861 |     height: 44px;
 862 |     left: 25px;
 863 |     color: #666;
 864 |     -webkit-border-radius: 3px;
 865 |     -moz-border-radius: 3px;
 866 |     border-radius: 3px;
 867 | 
 868 |     border: 1px solid #d2d2d2;
 869 |     line-height: 44px;
 870 |     border-right: none;
 871 |     background: #F7F7F7;
 872 | 
 873 |     .list-gird-switch {
 874 |       margin: 8px 0 0 0;
 875 |       float: right;
 876 |       height: 29px;
 877 |       width: 92px;
 878 | 
 879 |       .list-switch {
 880 |         height: 29px;
 881 |         width: 32px;
 882 |         float: left;
 883 |         background: url("../img/list-switch.png") no-repeat 0 0;
 884 |       }
 885 | 
 886 |       .gird-switch {
 887 |         height: 29px;
 888 |         width: 32px;
 889 |         float: left;
 890 | 
 891 |         background: url("../img/list-switch.png") no-repeat;
 892 |       }
 893 | 
 894 |     }
 895 | 
 896 | 
 897 | 
 898 |     .list-switch-on {
 899 |       .list-switch {
 900 |         background: url("../img/list-switch.png") no-repeat 0 0;
 901 |       }
 902 | 
 903 |       .gird-switch {
 904 |         background: url("../img/list-switch.png") no-repeat;
 905 |         background-position: right 0;
 906 |       }
 907 | 
 908 |       .gird-switch:hover {
 909 |         background-position: right -70px;
 910 |       }
 911 |     }
 912 | 
 913 | 
 914 |     .gird-switch-on {
 915 |       .list-switch {
 916 |         background: url("../img/list-switch.png") no-repeat 0 -35px;
 917 |       }
 918 | 
 919 |       .list-switch:hover {
 920 |         background-position: 0 -70px;
 921 |       }
 922 | 
 923 |       .gird-switch {
 924 |         background: url("../img/list-switch.png") no-repeat;
 925 |         background-position: right -35px;
 926 |       }
 927 |     }
 928 | 
 929 |   }
 930 | 
 931 |   .ChoosedItem{
 932 |     background-color: #F7F7F7;
 933 |     .TextMassage {
 934 |       display: inline-block;
 935 |       margin: 0;
 936 |       span{
 937 |         display: inline-block;
 938 |       }
 939 |     }
 940 | 
 941 | 
 942 | 
 943 |     .Item-Operate {
 944 |       display: inline-block;
 945 |       margin-left: 10px;
 946 |       border-radius: 3px;
 947 |       border-right:2px solid rgba(178, 178, 178, 0.57);
 948 |       background: url('../img/button.png') no-repeat 5px -143px;
 949 |       padding: 5px;
 950 |       vertical-align: middle;
 951 |       white-space: nowrap;
 952 |       font-size: 12px;
 953 |       text-align: center;
 954 |       color: #666;
 955 |       width:78px;
 956 |       height: 20px;
 957 |       line-height: 20px;
 958 | 
 959 |       span:nth-child(1){
 960 |         display: inline-block;
 961 |         vertical-align: middle;
 962 |         width:20px;
 963 |         margin-right:5px;
 964 |         height: 24px;
 965 |         background: url(../img/lixian.png )-180px 0 no-repeat;
 966 |       }
 967 | 
 968 |       span:nth-child(2){
 969 |         vertical-align: middle;
 970 |         display: inline-block;
 971 |         width:20px;
 972 |         height: 20px;
 973 |       }
 974 |     }
 975 | 
 976 | 
 977 |     .B-Share {
 978 |       span:nth-child(1){
 979 |         background: url(../img/lixian.png )-180px 0 no-repeat;
 980 |       }
 981 |     }
 982 | 
 983 | 
 984 |     .B-Share:hover {
 985 |       span:nth-child(1){
 986 |         background: url(../img/lixian.png )-240px 0 no-repeat;
 987 |       }
 988 |     }
 989 | 
 990 | 
 991 |     .B-Download {
 992 |       span:nth-child(1){
 993 |         background: url(../img/uploadCreate.png )-60px 0 no-repeat;
 994 |       }
 995 |     }
 996 | 
 997 |     .B-Download:hover {
 998 |       span:nth-child(1){
 999 |         background: url(../img/uploadCreate.png )-120px 0 no-repeat;
1000 |       }
1001 |     }
1002 | 
1003 |     .B-Delete {
1004 |       span:nth-child(1){
1005 |         background: url(../img/uploadCreate.png )-210px 0 no-repeat;
1006 |       }
1007 |     }
1008 | 
1009 |     .B-Delete:hover {
1010 |       span:nth-child(1){
1011 |         background: url(../img/uploadCreate.png )-270px 0 no-repeat;
1012 |       }
1013 |     }
1014 | 
1015 |     .B-Push {
1016 |       span:nth-child(1){
1017 |         background: url(../img/lixian.png )-120px 0 no-repeat;
1018 |       }
1019 |     }
1020 | 
1021 |     .B-Push:hover {
1022 |       span:nth-child(1){
1023 |         background: url(../img/lixian.png )-150px 0 no-repeat;
1024 |       }
1025 |     }
1026 | 
1027 | 
1028 |     .Item-type {
1029 |       display: none;
1030 |     }
1031 |   }
1032 | 
1033 | 
1034 |   .UchoosedItemGird{
1035 |     .TextMassage {
1036 |       display: none;
1037 |       margin: 0;
1038 |     }
1039 |     .Item-Operate {
1040 |       display: none;
1041 |     }
1042 | 
1043 |     .Item-type {
1044 |       display: none;
1045 |     }
1046 |   }
1047 | 
1048 | 
1049 | 
1050 |   .UchoosedItemList{
1051 | 
1052 |     .TextMassage {
1053 |       display: none;
1054 |     }
1055 |     .Item-Operate {
1056 |       display: none;
1057 |     }
1058 | 
1059 |     .Item-type {
1060 |       margin-left:-3px;
1061 |       display: inline-block;
1062 |       width:25%;
1063 |       height:100%;
1064 |       border-right:#dce1e6 1px solid;
1065 |       border-left: #f4f6f8 1px solid;
1066 |       text-align: center;
1067 | 
1068 |       .Updown {
1069 |           display: none;
1070 | 
1071 |       }
1072 |     }
1073 | 
1074 | 
1075 |     .Item-type:hover{
1076 |       background:#E8F5FD;
1077 |       .Down {
1078 |         display: inline-block;
1079 |         background: url(../img/Updown.png) no-repeat -50px -45px;
1080 |         height: 10px;
1081 |         width: 9px;
1082 |         vertical-align: middle;
1083 |         margin-left: 4px;
1084 |       }
1085 | 
1086 |       .Up {
1087 |         display: inline-block;
1088 |         background: url(../img/Updown.png) no-repeat -60px -45px;
1089 |         height: 10px;
1090 |         width: 9px;
1091 |         vertical-align: middle;
1092 |         margin-left: 4px;
1093 |       }
1094 |     }
1095 | 
1096 | 
1097 |   }
1098 | 
1099 | 
1100 | 
1101 | 
1102 | 
1103 | 
1104 | 
1105 | 
1106 |   #View {
1107 |     position: relative;
1108 |     left: 25px;
1109 |     min-width: 900px;
1110 |     overflow-y:hidden;
1111 |     //brder:1px solid black;
1112 |   }
1113 | 
1114 |   .Gird-view {
1115 |     dl {
1116 |       position: absolute;
1117 |       left: 0;
1118 |       top: 0;
1119 |       width: 100%;
1120 |       //height: 100%;
1121 |       margin: 0;
1122 |       dd {
1123 |         margin: 0;
1124 |         display: inline-block;
1125 |         .Ob {
1126 |           width: 182px;
1127 |           height: 122px;
1128 |           float: left;
1129 |           margin: 4px 4px 0 0;
1130 |           text-align: center;
1131 | 
1132 |           .File-Title {
1133 |              float:left;
1134 |             width: 100%;
1135 |           }
1136 | 
1137 |           .Uedit {
1138 |             .EditArea {
1139 |               float: left;
1140 |               width: 100px;
1141 |               margin-left: 30px;
1142 |               display: inline-block;
1143 |               input {
1144 |                 display: none;
1145 |               }
1146 |               span {
1147 |                 display: inline-block;
1148 |               }
1149 |             }
1150 | 
1151 |             .EditOp {
1152 |               float: left;
1153 |               display: inline-block;
1154 |               width: 30px;
1155 |               margin-left: 20px;
1156 |               span:nth-child(1) {
1157 |                 display: none;
1158 |               }
1159 | 
1160 |               span:nth-child(2) {
1161 |                 display: none;
1162 |               }
1163 | 
1164 |               span:nth-child(3) {
1165 |                 display: none;
1166 |               }
1167 | 
1168 |             }
1169 | 
1170 |           }
1171 |           .Uedit:hover{
1172 |             .EditOp {
1173 |               float: left;
1174 |               display: inline-block;
1175 |               width: 30px;
1176 |               margin-left: 20px;
1177 |               span:nth-child(1) {
1178 |                 display: inline-block;
1179 |                 width: 24px;
1180 |                 height: 24px;
1181 |                 margin-top: -5px;
1182 |                 background: url("../img/edit.png");
1183 |               }
1184 | 
1185 |               span:nth-child(2) {
1186 |                 display: none;
1187 |               }
1188 | 
1189 |               span:nth-child(3) {
1190 |                 display: none;
1191 |               }
1192 |             }
1193 |           }
1194 | 
1195 |           .Editing {
1196 |             .EditArea {
1197 |               float: left;
1198 |               width: 110px;
1199 |               display: inline-block;
1200 |               input{
1201 |                 display: inline-block;
1202 |                 float: left;
1203 |                 width: 60px;
1204 |               }
1205 |               .Name {
1206 |                 display: none;
1207 |               }
1208 |               .Type {
1209 |                 display: inline-block;
1210 |                 float: left;
1211 |               }
1212 |             }
1213 | 
1214 |             .EditOp {
1215 |               float: left;
1216 |               width:60px;
1217 |               margin-left: 0;
1218 |               display: inline-block;
1219 |              .EditButon {
1220 |                 display: none;
1221 |               }
1222 | 
1223 |               span:nth-child(2){
1224 |                 display: inline-block;
1225 |                 float: left;
1226 |                 width: 24px;
1227 |                 height: 24px;
1228 |                 margin-right: 0px;
1229 |                 background: url(../img/btn.png);
1230 |                 background-position-x: -6px;
1231 |                 background-position-y: 26px;
1232 |               }
1233 | 
1234 |               span:nth-child(3){
1235 |                 display: inline-block;
1236 |                 width: 24px;
1237 |                 height: 24px;
1238 |                 margin-right: 0px;
1239 |                 background: url(../img/btn.png);
1240 |                 background-position-x: -33px;
1241 |                 background-position-y: 26px;
1242 |               }
1243 |             }
1244 | 
1245 |           }
1246 |           .File-more {
1247 |             display: none;
1248 |           }
1249 |         }
1250 |       }
1251 | 
1252 |         .Unclick {
1253 | 
1254 |           .Ob {
1255 |             div {
1256 |               position: relative;
1257 |               margin: 0 auto;
1258 |               width: 90px;
1259 |               height: 92px;
1260 |               border: 2px solid transparent;
1261 |               overflow: hidden;
1262 |               span {
1263 | 
1264 |                 display: none;
1265 |                 background: url("../img/checkbox.png") 6px -36px no-repeat;
1266 |                 position: absolute;
1267 |                 top: -8px;
1268 |                 left: -8px;
1269 |                 height: 30px;
1270 |                 width: 30px;
1271 |               }
1272 | 
1273 |             }
1274 |           }
1275 |         }
1276 | 
1277 |         .Unclick:hover {
1278 |           .Ob {
1279 |             div {
1280 |               position: relative;
1281 |               margin: 0 auto;
1282 |               width: 90px;
1283 |               height: 92px;
1284 |               border: 2px solid #2e80dc;
1285 |               overflow: hidden;
1286 |               span {
1287 | 
1288 |                 display: inline-block;
1289 |                 background: url("../img/checkbox.png") 6px -36px no-repeat;
1290 |                 position: absolute;
1291 |                 top: -8px;
1292 |                 left: -8px;
1293 |                 height: 30px;
1294 |                 width: 30px;
1295 |               }
1296 | 
1297 |             }
1298 |           }
1299 |         }
1300 | 
1301 |         .Clicked {
1302 |           .Ob {
1303 |             div {
1304 |               position: relative;
1305 |               margin: 0 auto;
1306 |               width: 90px;
1307 |               height: 92px;
1308 |               border: 2px solid #2e80dc;
1309 |               overflow: hidden;
1310 | 
1311 |               span {
1312 | 
1313 |                 background: url(../img/checkbox.png) -30px -36px no-repeat;
1314 |                 position: absolute;
1315 |                 top: -8px;
1316 |                 left: -8px;
1317 |                 height: 30px;
1318 |                 width: 30px;
1319 |               }
1320 | 
1321 |             }
1322 |           }
1323 |         }
1324 | 
1325 | 
1326 | 
1327 |         .Drec {
1328 |           background: url(../img/File-type.png) 16px -77px no-repeat;
1329 |         }
1330 |         .avi,
1331 |         .doc,
1332 |         .eps,
1333 |         .ppt,
1334 |         .css,
1335 |         .mp3,
1336 |         .HTML,
1337 |         .pdf,
1338 |         .txt,
1339 |         .docx,
1340 |         .dll,
1341 |         .jpg,
1342 |         .zip,
1343 |         .psd,
1344 |         .wav,
1345 |         .xls {
1346 |           background: url(../img/file-type2.png) no-repeat;
1347 | 
1348 |         }
1349 | 
1350 | 
1351 | 
1352 | 
1353 |         .doc { width: 45px; height: 57px; background-position: 20px -140px}
1354 |         .eps { width: 45px; height: 57px; background-position: 20px -297px; }
1355 |         .ppt { width: 45px; height: 57px; background-position: 20px -454px; }
1356 |         .css { width: 45px; height: 57px; background-position: 20px -611px; }
1357 |         .avi { width: 45px; height: 60px; background-position: 20px 20px; }
1358 |         .mp3 { width: 45px; height: 57px; background-position: 20px -768px; }
1359 |         .HTML { width: 45px; height: 57px; background-position: 20px -925px; }
1360 |         .pdf { width: 45px; height: 57px; background-position: 20px -1082px; }
1361 |         .txt { width: 45px; height: 57px; background-position: 20px -1239px; }
1362 |         .docx { width: 45px; height: 57px; background-position: 20px -1396px; }
1363 |         .dll { width: 45px; height: 57px; background-position: 20px -1553px; }
1364 |         .jpg { width: 45px; height: 57px; background-position: 20px -1710px; }
1365 |         .zip { width: 45px; height: 57px; background-position: 20px -1867px; }
1366 |         .psd { width: 45px; height: 57px; background-position: 20px -2024px; }
1367 |         .wav { width: 45px; height: 57px; background-position: 20px -2181px; }
1368 |         .xls { width: 45px; height: 57px; background-position: 20px -2338px; }
1369 | 
1370 |       }
1371 |     }
1372 | 
1373 | 
1374 | 
1375 |   //#List-view {
1376 |   //  position: absolute;
1377 |   //  left:0;
1378 |   //  top:0;
1379 |   //  width: 100%;
1380 |   //  height: 100%;
1381 |   //  border:1px solid black;
1382 |   //}
1383 |   //
1384 |   //#Gird-view{
1385 |   //  position: absolute;
1386 |   //  left:0;
1387 |   //  top:0;
1388 |   //  width: 100%;
1389 |   //  height: 100%;
1390 |   //}
1391 |   .List-view {
1392 |     dl {
1393 |       position: absolute;
1394 |       left: 0;
1395 |       top: 0;
1396 |       width: 100%;
1397 |      // height: 100%;
1398 |       margin: 0;
1399 |       dd {
1400 |         margin: 0;
1401 |         width: 100%;
1402 |         height: 40px;
1403 |         display: block;
1404 |         border-bottom: 1px #d4d7dc solid;
1405 |         .Ob {
1406 |           margin-top: 12px;
1407 |           display: block;
1408 |           float: left;
1409 |           width: 100%;
1410 |           height: 23px;
1411 | 
1412 |           .Haschild {
1413 |             display: inline-block;
1414 |             float: left;
1415 |             margin-left: 50px;
1416 |             width:16px;
1417 |             height:16px;
1418 |             background:url("../img/haschild.png") no-repeat;
1419 |           }
1420 | 
1421 |           .File-Title {
1422 |             margin-left: 10px;
1423 |             display: inline-block;
1424 |             float: left;
1425 |             width:25%;
1426 | 
1427 |           }
1428 | 
1429 |           .Uedit {
1430 |             .EditArea {
1431 |                   float: left;
1432 |                   width:60%;
1433 |                   display: inline-block;
1434 |                   input{
1435 |                     display: none;
1436 |                   }
1437 |                   span {
1438 |                     display: inline-block;
1439 |                   }
1440 |                 }
1441 | 
1442 |               .EditOp {
1443 |                 float: left;
1444 |                 display: inline-block;
1445 |                 width:40%;
1446 |                 span:nth-child(1){
1447 |                   display: none;
1448 |                 }
1449 | 
1450 |                 span:nth-child(2){
1451 |                   display: none;
1452 |                 }
1453 | 
1454 |                 span:nth-child(3){
1455 |                   display: none;
1456 |                 }
1457 |             }
1458 | 
1459 |           }
1460 | 
1461 | 
1462 |           .Uedit:hover {
1463 |             .EditArea {
1464 |               float: left;
1465 |               width:60%;
1466 |               display: inline-block;
1467 |               input{
1468 |                 display: none;
1469 |               }
1470 |               span {
1471 |                 display: inline-block;
1472 |               }
1473 |             }
1474 | 
1475 | 
1476 |             .EditOp {
1477 |               float: left;
1478 |               display: inline-block;
1479 |               width:40%;
1480 |               span:nth-child(1){
1481 |                 display: inline-block;
1482 |                 width: 24px;
1483 |                 height: 24px;
1484 |                 margin-top: -5px;
1485 |                 background: url("../img/edit.png");
1486 |               }
1487 | 
1488 |               span:nth-child(2){
1489 |                 display: none;
1490 |               }
1491 | 
1492 |               span:nth-child(3){
1493 |                 display: none;
1494 |               }
1495 |             }
1496 | 
1497 |           }
1498 |           .Editing {
1499 |             .EditArea {
1500 |               float: left;
1501 |               width:50%;
1502 |               display: inline-block;
1503 |               input{
1504 |                 display: inline-block;
1505 |                 width: 70px;
1506 |               }
1507 |               .Name {
1508 |                 display: none;
1509 |               }
1510 |             }
1511 | 
1512 |             .EditOp {
1513 |               float: left;
1514 |               width:40%;
1515 |               display: inline-block;
1516 |               .EditButon {
1517 |                 display: none;
1518 |               }
1519 | 
1520 |               span:nth-child(2){
1521 |                 display: inline-block;
1522 |                 float: left;
1523 |                 width: 30px;
1524 |                 height: 30px;
1525 |                 margin-right: 10px;
1526 |                 background: url(../img/btn.png);
1527 |                 background-position-x: -2px;
1528 |                 background-position-y: 26px;
1529 |               }
1530 | 
1531 |               span:nth-child(3){
1532 |                 display: inline-block;
1533 |                 width: 30px;
1534 |                 height: 30px;
1535 |                 margin-right: 10px;
1536 |                 background: url(../img/btn.png);
1537 |                 background-position-x: -31px;
1538 |                 background-position-y: 26px;
1539 |               }
1540 |             }
1541 | 
1542 |           }
1543 | 
1544 |           .File-more {
1545 |             margin-left: 20px;
1546 |             display: inline-block;
1547 |             float: left;
1548 |             color: #a4a4a4;
1549 |             width:20%;
1550 |           }
1551 | 
1552 |         }
1553 |       }
1554 |         .Unclick:hover {
1555 |           background: #F0F8FD;
1556 |           .Ob {
1557 |             div {
1558 |               //overflow: hidden;
1559 |               span {
1560 | 
1561 |                 display: inline-block;
1562 |                 background: url(../img/checkbox.png) 1px -41px no-repeat;
1563 |               }
1564 | 
1565 |             }
1566 |           }
1567 |         }
1568 | 
1569 |         .Unclick {
1570 |           .Ob {
1571 |             div {
1572 |               display: inline-block;
1573 |               float: left;
1574 |               width: 50px;
1575 |               height: 23px;
1576 |               //border: 2px solid #FFF;
1577 |               //overflow: hidden;
1578 |               span {
1579 | 
1580 |                 display: none;
1581 |                 background: url(../img/checkbox.png) 1px -41px no-repeat;
1582 |                 float: left;
1583 |                 height: 20px;
1584 |                 width: 20px;
1585 |               }
1586 | 
1587 |             }
1588 |           }
1589 |         }
1590 | 
1591 | 
1592 | 
1593 |         .Clicked {
1594 |           background: #F0F8FD;
1595 |           .Ob {
1596 |             div {
1597 |               display: inline-block;
1598 |               float: left;
1599 |               position: relative;
1600 |               margin: 0 auto;
1601 |               width: 50px;
1602 |               height: 23px;
1603 |               //border: 2px solid #2e80dc;
1604 |               //overflow: hidden;
1605 | 
1606 |               span {
1607 | 
1608 |                 background: url(../img/checkbox.png) -35px -41px no-repeat;
1609 |                 float: left;
1610 |                 height: 20px;
1611 |                 width: 20px;
1612 |               }
1613 | 
1614 |             }
1615 |           }
1616 |         }
1617 | 
1618 | 
1619 | 
1620 |         .Drec {
1621 |           background: url(../img/listIcon.png) 32px -30px no-repeat;
1622 |         }
1623 |         .avi,
1624 |         .doc,
1625 |         .eps,
1626 |         .ppt,
1627 |         .css,
1628 |         .mp3,
1629 |         .HTML,
1630 |         .pdf,
1631 |         .txt,
1632 |         .docx,
1633 |         .dll,
1634 |         .jpg,
1635 |         .zip,
1636 |         .psd,
1637 |         .wav,
1638 |         .xls {
1639 |           background: url(../img/list-icon2.png) no-repeat;
1640 |         }
1641 | 
1642 | 
1643 |         .doc { background-position: 32px -31px; }
1644 |         .eps {  background-position: 32px -61px; }
1645 |         .ppt {  background-position: 32px -91px; }
1646 |         .css { background-position: 32px -121px; }
1647 |         .avi {  background-position: 32px 0; }
1648 |         .mp3 { background-position: 32px -151px; }
1649 |         .HTML { background-position: 32px -181px; }
1650 |         .pdf {  background-position: 32px -211px; }
1651 |         .txt { background-position: 32px -241px; }
1652 |         .docx { background-position: 32px -271px; }
1653 |         .dll { background-position: 32px -301px; }
1654 |         .jpg { background-position: 32px -331px; }
1655 |         .zip { background-position: 32px -361px; }
1656 |         .psd { background-position: 32px -391px; }
1657 |         .wav { background-position: 32px -421px; }
1658 |         .xls { background-position: 32px -451px; }
1659 | 
1660 | 
1661 | 
1662 | 
1663 | 
1664 | 
1665 | 
1666 | 
1667 |     }
1668 | 
1669 |   }
1670 | 
1671 |   #Scrollbar {
1672 |     display: none;
1673 |     position: absolute;
1674 |     right:0;
1675 |     top:150px;
1676 |     background: #fff;
1677 |     width:20px;
1678 |     height:500px;
1679 |     span {
1680 |       display: none;
1681 |       position: absolute;
1682 |       background: #bbbdc1;
1683 |       width:18px;
1684 |       height:10px;
1685 |       border: 1px solid #bbbdc1;
1686 |       border-radius:6px;
1687 |     }
1688 | 
1689 |     span:hover{
1690 |       display: none;
1691 |       position: absolute;
1692 |       background: #cdf5fd;
1693 |       width:18px;
1694 |       height:10px;
1695 |       border: 1px solid #bbbdc1;
1696 |       border-radius:6px;
1697 |     }
1698 |   }
1699 | 
1700 | }
1701 | #Mask{
1702 |   position: absolute;
1703 |   left: 0;
1704 |   top: 0;
1705 |   width: 100%;
1706 |   height: 100%;
1707 |   display: none;
1708 |   z-index:100;
1709 | }
1710 | #Confirm {
1711 |   position:absolute;
1712 |   left:50%;
1713 |   top:50%;
1714 |   margin-left: -250px;
1715 |   margin-top: -125px;
1716 |   width: 500px;
1717 |   height:250px;
1718 |   border:5px solid #999999;
1719 |   background-color: #FFFFFF;
1720 |   z-index:100;
1721 |   h3 {
1722 |       margin: 0;
1723 |     padding:10px 0 10px 0;
1724 |       background-color:#F6F6F6;
1725 |   }
1726 | 
1727 |  .Areyousure{
1728 |     text-align:center;
1729 |     padding-top:44px;
1730 |     width:500px;
1731 |     height:20%;
1732 |   }
1733 | 
1734 |   #Confirm-Button{
1735 |     width:500px;
1736 |     margin-top: 50px;
1737 |     height:20%;
1738 |     text-align: center;
1739 | 
1740 |     .Cb {
1741 |       display: inline-block;
1742 |       margin-left: 10px;
1743 |       width:120px;
1744 |       height:30px;
1745 |       border:1px solid #80848C;
1746 |       border-radius:2px;
1747 |       font-size: 20px;
1748 | 
1749 |     }
1750 | 
1751 |     .CB-Ac{
1752 |       background-color: #008AF5;
1753 |       color: #fff;
1754 |     }
1755 |     .CB-Ua{
1756 |       background-color: #d0d2d6;
1757 |       color: #000;
1758 |     }
1759 |   }
1760 | 
1761 | 
1762 | 
1763 | 
1764 | 
1765 | 
1766 | }
1767 | 
1768 | #Confirm2 {
1769 |   position:absolute;
1770 |   left:50%;
1771 |   top:50%;
1772 |   margin-left: -250px;
1773 |   margin-top: -125px;
1774 |   width: 500px;
1775 |   height:250px;
1776 |   border:5px solid #999999;
1777 |   background-color: #FFFFFF;
1778 |   z-index:100;
1779 |   display:none;
1780 |   h3 {
1781 |     margin: 0;
1782 |     padding:10px 0 10px 0;
1783 |     background-color:#F6F6F6;
1784 |   }
1785 | 
1786 |   .Areyousure{
1787 |     text-align:center;
1788 |     padding-top:44px;
1789 |     width:500px;
1790 |     height:20%;
1791 |   }
1792 | 
1793 |   #Confirm-Button2{
1794 |     width:500px;
1795 |     margin-top: 50px;
1796 |     height:20%;
1797 |     text-align: center;
1798 | 
1799 |     .Cb {
1800 |       display: inline-block;
1801 |       margin-left: 10px;
1802 |       width:120px;
1803 |       height:30px;
1804 |       border:1px solid #80848C;
1805 |       border-radius:2px;
1806 |       font-size: 20px;
1807 | 
1808 |     }
1809 | 
1810 |     .CB-Ac{
1811 |       background-color: #008AF5;
1812 |       color: #fff;
1813 |     }
1814 |     .CB-Ua{
1815 |       background-color: #d0d2d6;
1816 |       color: #000;
1817 |     }
1818 |   }
1819 | 
1820 | }
1821 | 
1822 | 
1823 | 
1824 | #SelectTab {
1825 |   width:0px;
1826 |   height:0px;
1827 |   background: #cdf5fd;
1828 |   position: absolute;
1829 |   left:0;
1830 |   top:0;
1831 |   border:1px solid #000;
1832 |   z-index:100;
1833 |   opacity:0.5;
1834 | 
1835 | }
1836 | 
1837 | .tabShow{
1838 |   display: inline-block;
1839 | }
1840 | 
1841 | .tabHide {
1842 |   display:none;
1843 | }
1844 | 
1845 | #rightMenu {
1846 |   position: absolute;
1847 |   width: 150px;
1848 |   height:120px;
1849 |   z-index: 100;
1850 |   left:0;
1851 |   top:0;
1852 |   background: #FFFFFF;
1853 |   border:1px solid #BABABA;
1854 |   display:none;
1855 |   cursor: pointer;
1856 |   #R-Operation {
1857 |     display: inline-block;
1858 |     width:100%;
1859 |     height:60%;
1860 |     .R-Operation-list {
1861 |       width:100%;
1862 |       height:33%;
1863 |       text-align: center;
1864 |       vertical-align:middle;
1865 |       line-height: 19px;
1866 | 
1867 |     }
1868 | 
1869 |     .R-Operation-list:hover {
1870 |         background-color: #00B4CC;
1871 |     }
1872 | 
1873 |     .R-Operation-list:nth-child(1){
1874 |       #R-LorG {
1875 |         width:80px;
1876 |         position: relative;
1877 |         left:150px;
1878 |         top:-20px;
1879 |         background-color: #fff;
1880 |         border: 1px solid #80848C;
1881 |         padding:0;
1882 |         display:none;
1883 | 
1884 |         li:hover {
1885 |           background-color: #00B4CC;
1886 |         }
1887 | 
1888 | 
1889 |       }
1890 | 
1891 | 
1892 |       .List-view-span {
1893 |         li:nth-child(1){
1894 | 
1895 |           span {
1896 |               display: inline-block;
1897 |               width:5px;
1898 |               height:5px;
1899 |               margin-right:2px;
1900 |               background-color: #f5a843;
1901 |               border-radius:10px ;
1902 |             }
1903 |         }
1904 | 
1905 |         li:nth-child(2){
1906 |           span{
1907 |             display: none;
1908 |             height:5px;
1909 |             margin-right:2px;
1910 |             background-color: #f5a843;
1911 |             border-radius:10px ;
1912 |           }
1913 |         }
1914 |       }
1915 | 
1916 | 
1917 |       .Gird-view-span {
1918 |         li:nth-child(1){
1919 |           span{
1920 |             display: none;
1921 |             height:5px;
1922 |             margin-right:2px;
1923 |             background-color: #f5a843;
1924 |             border-radius:10px ;
1925 |           }
1926 |         }
1927 | 
1928 |         li:nth-child(2){
1929 |           span{
1930 |             display: inline-block;
1931 |             width:5px;
1932 |             height:5px;
1933 |             margin-right:2px;
1934 |             background-color: #f5a843;
1935 |             border-radius:10px ;
1936 |           }
1937 |         }
1938 |       }
1939 |     }
1940 | 
1941 |     .R-Operation-list:nth-child(2){
1942 |       #R-UporDown {
1943 |         width:80px;
1944 |         position: relative;
1945 |         left:-82px;
1946 |         top:-15px;
1947 |         background-color: #fff;
1948 |         border: 1px solid #80848C;
1949 |         padding:0;
1950 |         display:none;
1951 |         li:hover {
1952 |           background-color: #00B4CC;
1953 |         }
1954 | 
1955 |       }
1956 | 
1957 | 
1958 |       .nameD{
1959 |         li:nth-child(1){
1960 |           span{
1961 |             display:inline-block;
1962 |             height:5px;
1963 |             margin-right:2px;
1964 |             background-color: #f5a843;
1965 |             border-radius:10px ;
1966 |           }
1967 |         }
1968 | 
1969 |         li:nth-child(2){
1970 |           span{
1971 |             display:none;
1972 |           }
1973 |         }
1974 | 
1975 |         li:nth-child(3){
1976 |           span{
1977 |             display:none;
1978 |           }
1979 |         }
1980 | 
1981 |       }
1982 | 
1983 |       .capD{
1984 |         li:nth-child(1){
1985 |           span{
1986 |             display:none;
1987 |           }
1988 |         }
1989 | 
1990 |         li:nth-child(2){
1991 |           span{
1992 |             display:inline-block;
1993 |             height:5px;
1994 |             margin-right:2px;
1995 |             background-color: #f5a843;
1996 |             border-radius:10px ;
1997 |           }
1998 |         }
1999 | 
2000 |         li:nth-child(3){
2001 |           span{
2002 |             display:none;
2003 |           }
2004 |         }
2005 | 
2006 |       }
2007 | 
2008 | 
2009 |       .TimeD{
2010 |         li:nth-child(1){
2011 |           span{
2012 |             display:none;
2013 |           }
2014 |         }
2015 | 
2016 |         li:nth-child(2){
2017 |           span{
2018 |             display:none;
2019 |           }
2020 |         }
2021 | 
2022 |         li:nth-child(3){
2023 |           span{
2024 |             display:inline-block;
2025 |             height:5px;
2026 |             margin-right:2px;
2027 |             background-color: #f5a843;
2028 |             border-radius:10px ;
2029 |           }
2030 |         }
2031 | 
2032 |       }
2033 |     }
2034 | 
2035 | 
2036 |     .Trigle1 ,.Trigle2{
2037 |       display: inline-block;
2038 |      position: relative;
2039 |       margin-right:5px;
2040 |       width: 0;
2041 |       height: 0;
2042 |       border-top: 5px solid transparent;
2043 |       border-left: 10px solid black;
2044 |       border-bottom: 5px solid transparent;
2045 |     }
2046 | 
2047 |     .Trigle2 {
2048 |       left:60px;
2049 |     }
2050 |     .Trigle1 {
2051 |       left:48px;
2052 |     }
2053 |   }
2054 | 
2055 |   #R-Tool {
2056 |     border-top:1px solid #c6c8cc ;
2057 |     display: inline-block;
2058 |     width:100%;
2059 |     height:40%;
2060 |     .R-Tool-list {
2061 |       margin-top: 0;
2062 |       text-align: center;
2063 |       //vertical-align:middle;
2064 |       line-height: 19px;
2065 |       width:100%;
2066 |       height:49%;
2067 |     }
2068 |     span {
2069 |       display: inline-block;
2070 |       float: left;
2071 | 
2072 |     }
2073 |    .Folder {
2074 |      display: inline-block;
2075 |      margin-left: 25px;
2076 |      width:20px;
2077 |      height:15px;
2078 |      background: url("../img/small-folder.png") 0px -41px;
2079 |    }
2080 | 
2081 | 
2082 |   }
2083 | }


--------------------------------------------------------------------------------
/img/Cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/Cancel.png


--------------------------------------------------------------------------------
/img/File-type.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/File-type.png


--------------------------------------------------------------------------------
/img/Item-more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/Item-more.png


--------------------------------------------------------------------------------
/img/Ok.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/Ok.png


--------------------------------------------------------------------------------
/img/Updown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/Updown.png


--------------------------------------------------------------------------------
/img/baidulogo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/baidulogo.gif


--------------------------------------------------------------------------------
/img/baiduyun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/baiduyun.jpg


--------------------------------------------------------------------------------
/img/btn-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/btn-4.png


--------------------------------------------------------------------------------
/img/btn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/btn.png


--------------------------------------------------------------------------------
/img/btn_icon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/btn_icon.gif


--------------------------------------------------------------------------------
/img/btn_icon_17d92fd.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/btn_icon_17d92fd.gif


--------------------------------------------------------------------------------
/img/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/button.png


--------------------------------------------------------------------------------
/img/checkbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/checkbox.png


--------------------------------------------------------------------------------
/img/down2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/down2.png


--------------------------------------------------------------------------------
/img/easyicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/easyicon.png


--------------------------------------------------------------------------------
/img/edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/edit.png


--------------------------------------------------------------------------------
/img/file-type2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/file-type2.png


--------------------------------------------------------------------------------
/img/frame-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/frame-icon.png


--------------------------------------------------------------------------------
/img/haschild.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/haschild.png


--------------------------------------------------------------------------------
/img/list-icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/list-icon2.png


--------------------------------------------------------------------------------
/img/list-switch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/list-switch.png


--------------------------------------------------------------------------------
/img/listIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/listIcon.png


--------------------------------------------------------------------------------
/img/lixian.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/lixian.png


--------------------------------------------------------------------------------
/img/mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/mask.png


--------------------------------------------------------------------------------
/img/navigator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/navigator.png


--------------------------------------------------------------------------------
/img/property_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/property_icon.png


--------------------------------------------------------------------------------
/img/searchBg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/searchBg.jpg


--------------------------------------------------------------------------------
/img/small-folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/small-folder.png


--------------------------------------------------------------------------------
/img/up1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/up1.png


--------------------------------------------------------------------------------
/img/uploadCreate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bobiscool/baiduCloud/3130d862fe1c6ab8e50cd88c6d2d0452e8ded6e6/img/uploadCreate.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Karl's baiduyun</title>
  6 |     <link href="css/Main.css" rel="stylesheet" type="text/css">
  7 | </head>
  8 | <body>
  9 | <div id="Out-border">
 10 |     <div id="Top-banner">
 11 |         <div id="Logo" class="f-icon"></div>
 12 |         <div id="Page-Button">
 13 |             <a class="Page-Button Page-Button-unActive" href="javascript: void(0);" id="Home-page-button">主页</a>
 14 |             <span class="separate"></span>
 15 |             <div class="Page-Button Page-Button-Active" id="Cloud-page-button">
 16 |                 <a class="Page-down" href="javascript: void(0);" target="_self"> <em class="f-icon"></em>网盘 </a>
 17 |             </div>
 18 |             <span class="separate"></span>
 19 |             <a class="Page-Button Page-Button-unActive" href="javascript: void(0);" id="Share-page-button">分享</a>
 20 |             <a class="Page-Button  Page-Button-unActive" href="javascript: void(0);" id="App-page-button">应用</a>
 21 |         </div>
 22 |         <div id="User-information">
 23 |             <ul>
 24 |                 <!--<li><input type="text" placeholder="在此处搜索"><span>go</span></li>-->
 25 |                 <li id="Storage">
 26 |                     <a class="increase-link" href="" target="_blank">扩容</a>
 27 |                     <div class="progress">
 28 |                         <div class="pro-con">
 29 |                             <span class="bar">
 30 |                                2020.45G/2153G
 31 |                             </span>
 32 |                         </div>
 33 |                     </div>
 34 |                 </li>
 35 |                 <li id="User-name" class="Page-up">Karl <em class="f-icon "></em></li>
 36 |                 <li id="Usercenter-page-button">
 37 |                     <div id="vip-center">会员中心</div>
 38 |                 </li>
 39 |                 <li id="Download-App">客户端下载</li>
 40 |                 <li id="Notice">通知</li>
 41 |                 <li id="More" class="Page-up">更多 <em class="f-icon "></em></li>
 42 |             </ul>
 43 | 
 44 |         </div>
 45 | 
 46 |     </div>
 47 |     <div id="Right-banner">
 48 |         <ul id="Item-list">
 49 |             <li data-showwhat="All" class="active"><a href="javascript: void(0);" class=""><span
 50 |                     class="Boutton-ico"></span><span>全部文件</span></a></li>
 51 |             <li data-showwhat="PictureData"><a href="javascript: void(0);" class=""><span
 52 |                     class="Boutton-ico"></span><span>图片</span></a></li>
 53 |             <li data-showwhat="FileData"><a href="javascript: void(0);" class=""><span class="Boutton-ico"></span><span>文档</span></a>
 54 |             </li>
 55 |             <li data-showwhat="VideoData"><a href="javascript: void(0);" class=""><span
 56 |                     class="Boutton-ico"></span><span>视频</span></a></li>
 57 |             <li data-showwhat="Torrent"><a href="javascript: void(0);" class=""><span class="Boutton-ico"></span><span>种子</span></a>
 58 |             </li>
 59 |             <li data-showwhat="AudioData"><a href="javascript: void(0);" class=""><span
 60 |                     class="Boutton-ico"></span><span>音乐</span></a></li>
 61 |             <li data-showwhat="OtherData"><a href="javascript: void(0);" class=""><span
 62 |                     class="Boutton-ico"></span><span>其他</span></a></li>
 63 | 
 64 | 
 65 |         </ul>
 66 | 
 67 |         <ul id="Item-More">
 68 |             <li>
 69 |                 <div class="Item-Sperate"></div>
 70 |                 <a href="javascript: void(0);" class=""><span class="Boutton-ico3"></span><span>我的分享</span></a>
 71 | 
 72 |             </li>
 73 |             <li id="Cash">
 74 |                 <div class="Item-Sperate"></div>
 75 |                 <a href="javascript: void(0);"><span class="Boutton-ico3"></span><span>回收站</span></a></li>
 76 |         </ul>
 77 | 
 78 |         <div id="Device">
 79 |             <a href="javascript: void(0);" class=""><span class="Boutton-ico2"></span><span>云管家</span></a>
 80 |             <a href="javascript: void(0);" class=""><span class="Boutton-ico2"></span><span>Andiord</span></a>
 81 |             <a href="javascript: void(0);" class=""><span class="Boutton-ico2"></span><span>Apple</span></a>
 82 |             <a href="javascript: void(0);" class=""><span class="Boutton-ico2"></span><span>更多</span></a>
 83 |         </div>
 84 |     </div>
 85 |     `
 86 | 
 87 |     <div id="Main-border">
 88 |         <div id="Tools-bar">
 89 |             <div id="Tools">
 90 |                 <span class="Upload"><span></span>上传</span>
 91 |                 <span class="NewFolder"><span></span>新建文件夹</span>
 92 |                 <span class="Lixian">
 93 |                     <span></span>离线下载</span>
 94 |                 <span class="Mydevice">
 95 |                     <span></span>我的设备</span>
 96 | 
 97 |             </div>
 98 |             <div id="LGswitch" class="list-gird-switch list-switch-on">
 99 |                 <a class="list-switch"></a>
100 |                 <a class="gird-switch"></a>
101 |             </div>
102 | 
103 | 
104 |         </div>
105 |         <div id="Nav-title" class="Nav-title Notin">
106 |             <ul id="Nav-title-ul">
107 |                 <!--<li class="inDrectory-list"><span  class="Blue">返回上一级</span><span class="Gray">|</span></li>-->
108 |                 <li class="Back-to-main" data-showwhat="0"><span class="Blue">全部文件</span></li>
109 |             </ul>
110 |         </div>
111 |         <div id="Operation-bar" class="UchoosedItemList">
112 |             <input type="checkbox" value="复选"/>
113 |             <p class="TextMassage">已选中<span id="Howmany">0</span>个文件/文件夹</p>
114 |             <span class="Item-Operate B-Share"><span></span><span>分享</span></span>
115 |             <span class="Item-Operate B-Download"><span></span><span>下载</span></span>
116 |             <span class="Item-Operate B-Delete"><span></span><span>删除</span></span>
117 |             <span class="Item-Operate B-Push"><span></span><span>推送</span></span>
118 | 
119 |             <span class="Item-type"><span class="Down"></span>文件名</span>
120 |             <span class="Item-type"><span class="Down"></span>大小</span>
121 |             <span class="Item-type"><span class="Up"></span>修改日期</span>
122 | 
123 | 
124 |             <!--是否也应 设置 两种显示模式 listview  和girdview  后面再说  先girdview-->
125 |         </div>
126 | 
127 | 
128 |         <div id="View" class="List-view">
129 | 
130 |             <dl>
131 |                 <dd class="Unclick">
132 |                     <div class="Ob">
133 | 
134 |                         <div class="avi">
135 |                             <span></span>
136 |                         </div>
137 |                         <span class="File-Title Editing">
138 |                             <span class="EditArea">
139 |                                 <input type="text" class="inputBox" placeholder="dsfsdfsdfs" value="dsfsdfsdfs">
140 |                                 <span class="Name">dsfsdfsdfs</span>
141 |                                 <span class="Type">.fsd</span>
142 |                             </span>
143 |                             <span class="EditOp">
144 |                                 <span class="EditButon"></span>
145 |                                 <span class="ConfirmButton"></span>
146 |                                 <span class="OkButton"></span>
147 |                             </span>
148 |                         </span>
149 |                         <span class="File-more">dsfsdfsdfs</span>
150 |                         <span class="File-more">dsfsdfsdfs</span>
151 |                     </div>
152 | 
153 |                 </dd>
154 | 
155 |             </dl>
156 | 
157 | 
158 |         </div>
159 | 
160 |         <div id="Scrollbar">
161 |             <span></span>
162 |         </div>
163 |     </div>
164 |     <div id="Mask">
165 |         <div id="Confirm">
166 |             <h3>&nbsp;&nbsp;确认删除</h3>
167 |             <div class="Areyousure">
168 |                 确认要把所选文件放入回收站吗？<br>删除的文件可在10天内通过回收站还原
169 |             </div>
170 | 
171 |             <div id="Confirm-Button">
172 |                 <div class="Cb CB-Ac">确认</div>
173 |                 <div class="Cb CB-Ua">取消</div>
174 |             </div>
175 |         </div>
176 | 
177 |         <div id="Confirm2">
178 |             <h3>&nbsp;&nbsp;BUG认领</h3>
179 |             <div class="Areyousure">
180 |                 在数据删除这一块,暂时没有想出一个好的解决办法,全部是前端解决肯定不是明智之举<br>本来可以渲染出来,但是有一个bug <br>所以就把回收站空了起来
181 |             </div>
182 | 
183 |             <div id="Confirm-Button2">
184 |                 <div class="Cb CB-Ac">理解</div>
185 |                 <div class="Cb CB-Ua">不理解</div>
186 |             </div>
187 |         </div>
188 | 
189 |     </div>
190 | 
191 |     <div id="rightMenu" class="rightMenu">
192 |         <div id="R-Operation">
193 |             <div class="R-Operation-list" data-showwhat="LorG"><span>查看</span><span class="Trigle2"></span>
194 | 
195 |                 <ul id="R-LorG" class="R-LorG">
196 |                     <li data-showwhat="List"><span></span>列表</li>
197 |                     <li data-showwhat="Gird"> <span></span>缩略图</li>
198 |                 </ul>
199 | 
200 | 
201 |             </div>
202 |             <div class="R-Operation-list" data-showwhat="UporDown"><span>排序方式</span ><span class="Trigle1"></span>
203 | 
204 |                 <ul id="R-UporDown" class="R-UporDown">
205 |                     <li data-showwhat="FileName"><span></span>文件名</li>
206 |                     <li data-showwhat="Capicy"> <span></span>大小</li>
207 |                     <li data-showwhat="Time"> <span></span>修改时间</li>
208 |                 </ul>
209 | 
210 |             </div>
211 |             <div class="R-Operation-list" data-showwhat="Refresh">刷新</div>
212 |         </div>
213 | 
214 |         <div id="R-Tool">
215 |             <div class="R-Tool-list" data-showwhat="Reload">重新加载页面</div>
216 |             <div class="R-Tool-list" data-showwhat="NewFolder"><span class="Folder"></span><span>新建文件夹</span></div>
217 |         </div>
218 |     </div>
219 |     <a href="https://github.com/bobiscool/baiduCloud"><img style="position: absolute; bottom: -60px; left: -60px; border: 0; transform:rotate(90deg) " src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
220 | 
221 | 
222 | </div>
223 | 
224 | </body>
225 | <script src="js/controlDOM.js"></script>
226 | <script src="js/dataTohtmlTamplate.js"></script>
227 | <script src="js/randomData.js"></script>
228 | <script src="js/DataManage.js"></script>
229 | <script src="js/index.js"></script>
230 | 
231 | </html>


--------------------------------------------------------------------------------
/js/DataManage.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by mac on 16/9/24.
  3 |  */
  4 | /**
  5 |  * 此函数专门写出来用于处理树形结构,文件夹结构的数据
  6 |  * 我的数据 结构 是
  7 |  * id
  8 |  * pid  父级 id
  9 |  * name
 10 |  * type 是什么类型
 11 |  *
 12 |  * 数据操作标示 全部用id
 13 |  *
 14 |  */
 15 | 
 16 | var F_manageData ={
 17 |     //获取这个ID下面所有的子数据
 18 |     getChildById:function(arr,pid){
 19 |         var newArr =[];
 20 |         for(var i=0;i<arr.length;i++){
 21 |             if(arr[i].pid==pid){
 22 |                 newArr.push(arr[i]);
 23 |             }
 24 |         }
 25 |         return newArr;
 26 |     },
 27 |     // 获取当前文件夹 所有的子集item
 28 |     getItChildsAll:function(data,CurentId){
 29 |         var arrB= F_manageData.getChildById(data,CurentId);
 30 |         if(arrB){
 31 | 
 32 |             arrB.map(function(item){
 33 |                 Alldeleted.push(item);//把下面的自己全部拿出来
 34 |                 F_manageData.getItChildsAll(data,item.idNumber);});
 35 |         }
 36 |     },
 37 |     //获取当前ID是处于第几层
 38 |     getLevelById:function(data,CurentId){
 39 |         var i =0;
 40 |         while (F_manageData.getItParents(data,CurentId)){
 41 |             i++;
 42 |             CurentId = F_manageData.getItParents(data,CurentId);
 43 |         }
 44 |         return i;
 45 |     },
 46 |     //这个元素下面 是否有 子元素?
 47 |     IfTherehasChild:function (data,hasChild) {
 48 |         var arr =[];
 49 |         for(var i=0;i<data.length;i++){
 50 |             if(data[i].pid==hasChild.id){
 51 |                 arr.push(data[i]);
 52 |             }
 53 |         }
 54 | 
 55 |         return arr==[]?false:arr;
 56 |     },
 57 |     getItParents:function(data,find){
 58 |         var arr =null;
 59 |         for(var i=0;i<data.length;i++){
 60 |             console.log(i);
 61 |             console.log(data[i].idNumber+'按剩余的话说'+F_manageData.whereTheValue(data,find).pid);
 62 |             if(data[i].idNumber==F_manageData.WhoHasTheValue(data,find).pid){
 63 |                 arr=data[i].idNumber;
 64 |                 console.log('已找到父级'+arr);
 65 |             }
 66 |         }
 67 |         return arr==null?null:arr;
 68 |     },
 69 |     UpOrDown:function(data,attr,UpOrDown){
 70 |         var testData = F_manageData.extend(data);
 71 |         var temB =[];
 72 |                 var temA =F_manageData.getItValueToSort(testData,attr);
 73 |                 F_manageData.SortSort(temA,UpOrDown);
 74 | 
 75 |                 temA.map(function(item){
 76 |                     F_manageData.getItObject(testData,attr,item,temB);
 77 | 
 78 |                 });
 79 |                 return temB;
 80 |     },//自制的排序函数
 81 |     /**
 82 |      * 排序 有 文件名排序,然后是文件大小排序,然后是创建时间排序
 83 |      * 我传入的就是当前 桌面上显示的  childs 然后呢?
 84 |      * 以文件名来排序 就是Title
 85 |      * Title
 86 |      * 然后是 把每一个东西的Title
 87 |      * 拿出来比较 比较完了之后再找到他的父对象 。。不过这样是不是有点过于复杂
 88 |      */
 89 |     getItObject:function (data,attr,value,Arr) {
 90 |         //通过属性值 找到 他是口那个对象
 91 |         console.log('我排完了顺序 开始找父对象'+value);
 92 |         //console.log(tem);
 93 |         for(var i =0 ;i<data.length;i++){
 94 |               if(data[i][attr]==value){
 95 |                   Arr.push(data[i]);
 96 |                  data.splice(i,1);
 97 |               }
 98 |         }
 99 |         // console.log(data);
100 |     },//排序之后 取得 父对象
101 |     getItValueToSort(data,attr){
102 |         var temA = [];
103 |         data.forEach(function (item) {
104 |            // console.log('我这里正在取值value'+item);
105 |             temA.push(item[attr]);
106 |         });
107 |         //console.log('我取完了所以data的属性值'+temA);
108 |         return temA;
109 |     },//取出排序用的属性
110 |     SortSort(Array,UD){//改造了一个 数组排序函数
111 |        // console.log('我开始排序'+Array);
112 |         if(UD=='down'){
113 |             Array.sort();
114 |         }else{
115 |             Array.sort();
116 |             Array.reverse();
117 |             }
118 |     },//排序主函数
119 |     extend:function (obj){//深度拷贝  用于 保护数据不被更改
120 |         var newArr = obj.constructor === Array ? [] : {};
121 |         for( var attr in obj ){
122 |             if( typeof obj[attr] === "object"){
123 |                 newArr[attr] =F_manageData.extend(obj[attr]);
124 |             }else{
125 |                 newArr[attr] = obj[attr];
126 |             }
127 |         }
128 |         return newArr;
129 |     },
130 |     each:function(obj,callBack){
131 |         for( var i = 0; i < obj.length; i++ ){
132 |             callBack&&callBack(obj[i],i); // 找到 obj 类数组里面的元素   每一个 加一个 call
133 |         }
134 |     },
135 |     ToogleArray(Array,value){
136 | 
137 |         var tem = F_manageData.whereTheValue(Array,value);
138 |         tem=='meiyou'?Array.push(value):Array.splice(tem,1);
139 |     },//再写一个数据处理函数 找数组里面是否有这个 如果有 就是返回他的位置
140 |     whereTheValue(Array,value){//这里没有考虑数字相同的情况
141 |         var tem = 'meiyou';
142 |         for(var i=0;i<Array.length;i++){
143 |             if(Array[i]==value){
144 |                 tem=i;
145 |             }
146 |         }
147 |         console.log('我要删除的位置'+tem);
148 |         return tem;
149 | 
150 |     },
151 |     WhoHasTheValue:function(data,id){
152 |         var temObj = null;
153 |         for(var i=0;i<data.length;i++){
154 |             if(data[i].idNumber==id){
155 |             temObj=data[i];
156 |             }
157 |         }
158 |         console.log(temObj);
159 |         return temObj;
160 |     }
161 | 
162 | 
163 | };


--------------------------------------------------------------------------------
/js/controlDOM.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by mac on 16/9/21.
  3 |  */
  4 | //此函数 是用于操作DOM的函数库 ,模仿 jquery 自己写的一个封装函数库
  5 | var F_Tool = (function(){
  6 |     var F_ToolObj = {
  7 |         W$:function(selector,context){
  8 |             //context 是选择器的上级
  9 |             context = context || document;
 10 |             if(selector.indexOf(" ") !== -1){
 11 |                 return context.querySelectorAll(selector);
 12 |             }else if( selector.charAt(0) === "#" ){  //  有井号键  就选择 ID
 13 |                 return document.getElementById(selector.slice(1))
 14 |             }else if( selector.charAt(0) === "." ){//有小数点 选择 Class
 15 |                 return context.getElementsByClassName(selector.slice(1));
 16 |             }else{//空格键 存在  选择元素
 17 |                 return context.getElementsByTagName(selector);
 18 |             }
 19 |         }, addClass:function (element,clsNames){//添加 class
 20 |             if( typeof clsNames === "string" ){
 21 |                 if(!F_Tool.hasClass(element,clsNames)){
 22 |                     element.className += " "+clsNames;
 23 |                 }
 24 |             }
 25 |         },
 26 |         removeClass:function (element,clsNames){
 27 |             var classNameArr = element.className.split(" ");//class 拆分
 28 |             for( var i = 0; i < classNameArr.length; i++ ){
 29 |                 if( classNameArr[i] === clsNames ){
 30 |                     classNameArr.splice(i,1);  //数组 删除 一个
 31 |                     i--;
 32 |                 }
 33 |             }
 34 |             element.className = classNameArr.join(" "); // 数组 合起来 添加 class
 35 |         },
 36 |         hasClass:function(ele,classNames){
 37 | 
 38 |             var classNameArr = ele.className.split(" ");
 39 |             for( var i = 0; i < classNameArr.length; i++ ){
 40 |                 if( classNameArr[i] === classNames ){ //如果有这个class  就返回true
 41 |                     return true;
 42 |                 }
 43 |             }
 44 | 
 45 |             return false;
 46 |         },
 47 |         toggleClass:function (ele,classNames1,classNames2){ //  如果 有这个class  就删除class
 48 |             if( F_Tool.hasClass(ele,classNames1) ){
 49 |                 F_Tool.removeClass(ele,classNames1);
 50 |                 F_Tool.addClass(ele,classNames2);
 51 |                 return false;
 52 |             }else{
 53 |                 F_Tool.removeClass(ele,classNames2);
 54 |                 F_Tool.addClass(ele,classNames1);
 55 |                 return true;
 56 |             }
 57 |         },
 58 |         parents:function(obj,selector){
 59 |             /*  这里 是找寻 具有 selector 的父级
 60 |              * selector
 61 |              * 分为  id
 62 |              *      class
 63 |              *      标签
 64 |              * */
 65 | 
 66 |             if( selector.charAt(0) === "#" ){// id 找父集
 67 |                 while(obj&&obj.id !== selector.slice(1)){  //如果obj的id 不等于selector的ID
 68 |                     obj = obj.parentNode;
 69 |                 }
 70 |             }else if( selector.charAt(0) === "." ){//如果obj的class不等于selector的Class
 71 |                 while((obj && obj.nodeType !== 9) && !F_Tool.hasClass(obj,selector.slice(1))){ // 如果obj 存在 并且 obj 不是 document
 72 |                     obj = obj.parentNode;
 73 |                 }
 74 |             }else{
 75 |                 while(obj && obj.nodeType !== 9 && obj.nodeName.toLowerCase() !== selector){
 76 |                     obj = obj.parentNode;
 77 |                 }
 78 |             }
 79 | 
 80 |             // 找到obj  返回obj  没有找到 就返回 null
 81 |             return obj && obj.nodeType === 9  ? null : obj;
 82 |         }, getEleRect:function(obj){
 83 |             return obj.getBoundingClientRect(); //获取元素 上下左右 距离 对应的页边的距离
 84 |         },
 85 |         Boom:function(obj1,obj2){  // 判断自己 画的框是否与文件夹 相遇
 86 |             var obj1Rect = F_Tool.getEleRect(obj1);
 87 |             var obj2Rect = F_Tool.getEleRect(obj2);
 88 | 
 89 |             var obj1W = obj1Rect.width;
 90 |             var obj1H = obj1Rect.height;
 91 |             var obj1L = obj1Rect.left;
 92 |             var obj1T = obj1Rect.top;
 93 | 
 94 |             var obj2W = obj2Rect.width;
 95 |             var obj2H = obj2Rect.height;
 96 |             var obj2L = obj2Rect.left;
 97 |             var obj2T = obj2Rect.top;
 98 |             //碰上返回true 否则返回false
 99 |             if( obj1W+obj1L>obj2L && obj1T+obj1H > obj2T && obj1L < obj2L+obj2W && obj1T<obj2T+obj2H ){
100 |                 return true
101 |             }else{
102 |                 false;
103 |             }
104 |         },
105 |         store:function (namespace, data)  {//保存 用户名
106 |             if (data) {
107 |                 return localStorage.setItem(namespace, JSON.stringify(data));
108 |             }
109 | 
110 |             var store = localStorage.getItem(namespace);
111 |             return (store && JSON.parse(store)) || [];
112 |         },
113 |         each:function(Obj,Callback){
114 |                 for(var i = 0;i<Obj.length;i++){
115 |                     Callback&&Callback(Obj[i]);
116 |                 }
117 |         },
118 |         hide:function (element){ // 隐藏
119 |             return element.style.display = "none";
120 |         },
121 |         show:function (element){
122 |             return element.style.display = "block";
123 |         },
124 |         getOffset:function (obj){//得到物体的真实 宽高
125 |             return {
126 |                 width:obj.offsetWidth,
127 |                 height:obj.offsetHeight
128 |             }
129 |         },
130 | 
131 |     }
132 | 
133 |     return F_ToolObj;
134 | 
135 | }());
136 | 


--------------------------------------------------------------------------------
/js/dataTohtmlTamplate.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by mac on 16/9/24.
 3 |  */
 4 | //数据渲染成为  html
 5 | //事件  模板 要分开
 6 | var renderData = {// 利用EC6的特性  生成模板函数
 7 |     fileHtml:function (itemData,tempData) {
 8 |         return `<dd class="Unclick">
 9 |             <div class="Ob" data-fileid="${itemData.idNumber}" data-filetype="${itemData.Type}" data-pidNum="${itemData.pid}">
10 | 
11 |             <div class="${itemData.Type}">
12 |             <span></span>
13 |             </div>
14 |             <span class="File-Title Uedit">
15 |             <span class="EditArea">
16 |             <input type="text" class="inputBox" placeholder="dsfsdfsdfs" value="dsfsdfsdfs">
17 |             <span class="Name">${itemData.Title}</span>
18 |             <span class="Type">${tempData}</span>
19 |             </span>
20 |             <span class="EditOp">
21 |             <span class="EditButon"></span>
22 |             <span class="ConfirmButton"></span>
23 |             <span class="OkButton"></span>
24 |             </span>
25 |             </span>
26 |             <span class="File-more">${itemData.Cap}</span>
27 |             <span class="File-more">${itemData.Time}</span>
28 |             </div>
29 | 
30 |             </dd>`;
31 | 
32 | 
33 | 
34 | 
35 |     },
36 | 
37 |     crNav:function(item){
38 |         return `<li class="inDrectory-list" data-showwhat="${item.idNumber}" ><span class="Gray">></span><span class="Blue">${item.Title}</span></li>`
39 |     },
40 |     StaticHtml:function (Arr) {
41 |         return `<li class="inDrectory-list" data-showwhat="${Arr[Arr.length-2]}"><span  class="Blue">返回上一级</span><span class="Gray">|</span></li><li class="Back-to-main" data-showwhat="0"><span class="Blue">全部文件</span></li>`;
42 |     },
43 |     CreatNewFolder:function(itemData){
44 |         return `<div class="Ob" data-fileid="${itemData.idNumber}" data-filetype="${itemData.Type}" data-pidNum="${itemData.pid}">
45 | 
46 |             <div class="${itemData.Type}">
47 |             <span></span>
48 |             </div>
49 |             <span class="File-Title Editing">
50 |             <span class="EditArea">
51 |             <input type="text" class="inputBox" placeholder="dsfsdfsdfs" value="${itemData.Title}">
52 |             <span class="Name">${itemData.Title}</span>
53 |             <span class="Type"></span>
54 |             </span>
55 |             <span class="EditOp">
56 |             <span class="EditButon"></span>
57 |             <span class="ConfirmButton"></span>
58 |             <span class="OkButton"></span>
59 |             </span>
60 |             </span>
61 |             <span class="File-more">${itemData.Cap}</span>
62 |             <span class="File-more">${itemData.Time}</span>
63 |             </div>`;
64 | 
65 |     }
66 | 
67 | };
68 | 
69 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by mac on 16/9/21.
  3 |  */
  4 | 
  5 | 
  6 | //取东西区域
  7 | var Oview = document.getElementById('View');
  8 | var OItemList = F_Tool.W$('#Item-list');
  9 | var Old = OItemList.getElementsByTagName('li')[0];
 10 | var O_LGswich = document.getElementById('LGswitch');
 11 | var O_Lswich = document.getElementsByClassName('list-switch')[0];
 12 | var O_Gswich = document.getElementsByClassName('gird-switch')[0];
 13 | var O_Operation = document.getElementById('Operation-bar');
 14 | var O_NameUD = document.getElementsByClassName('Item-type')[0];
 15 | var O_CapUD = document.getElementsByClassName('Item-type')[1];
 16 | var O_TimeUD = document.getElementsByClassName('Item-type')[2];
 17 | var O_selectAll = O_Operation.getElementsByTagName('input')[0];
 18 | var O_Howmany = document.getElementById('Howmany');
 19 | var O_Navtitle = document.getElementById('Nav-title');
 20 | var O_Navtitleul = document.getElementById('Nav-title-ul');
 21 | var O_NewFolder = document.getElementsByClassName('NewFolder')[0];
 22 | var O_Delete = document.getElementsByClassName('B-Delete')[0];
 23 | var O_Confirm = document.getElementById('Confirm');
 24 | var O_Confirm2 = document.getElementById('Confirm2');
 25 | var O_Mask = document.getElementById('Mask');
 26 | var O_Cash = document.getElementById('Cash');
 27 | var O_ToolsBar = document.getElementById('Tools');
 28 | var O_ScroolBar = document.getElementById('Scrollbar');
 29 | var O_Scroolspan = O_ScroolBar.getElementsByTagName('span')[0];
 30 | var O_rightMenu = document.getElementById('rightMenu');
 31 | var childs = [];
 32 | var OA_Group = [];
 33 | var OA_NowWhere = [];
 34 | var IdNumber = JsonData.length;
 35 | var newDiv = null;
 36 | var Deleted = [];
 37 | var Alldeleted = [];
 38 | var disX = 0;
 39 | var disY =0;
 40 | var Old2 = O_rightMenu;
 41 | var O_RLorG = document.getElementById('R-LorG');
 42 | var O_RUporDown = document.getElementById('R-UporDown');
 43 | var NowWhere={
 44 |     Lorg:"L",
 45 |     Item:'All'
 46 | };
 47 | // console.log(O_Howmany);
 48 | 
 49 | F_RenderData(JsonData, 0, 'Cap', 'Up');
 50 | 
 51 | // setInterval(function(){
 52 | //     F_ChangeTheToolBar(OA_Group);
 53 | // },50);//定时监督
 54 | //添加 点击事件
 55 | //点击事件区域
 56 | OItemList.addEventListener('click', function (ev) {
 57 |     O_ToolsBar.style.display = 'inline';
 58 |     O_Operation.style.display = 'block';
 59 |     O_Navtitleul.style.display = "block";
 60 |     if (ev.target.tagName == 'LI') {
 61 |         F_scroolBar();
 62 |         F_Tool.removeClass(Old, 'active');
 63 |         F_Tool.addClass(ev.target, 'active');
 64 |         NowWhere.Item = ev.target.dataset.showwhat;
 65 |         F_ShowWho(ev.target.dataset.showwhat);
 66 |         Old = ev.target;
 67 |         if (ev.target.dataset.showwhat != 'All') {
 68 |             O_NewFolder.style.display = 'none';
 69 |         } else {
 70 |             O_NewFolder.style.display = 'inline-block';
 71 |         }
 72 |     } else if (F_Tool.parents(ev.target, 'li') != null) {
 73 |         F_scroolBar();
 74 |         var tem = F_Tool.parents(ev.target, 'li');
 75 |         F_Tool.removeClass(Old, 'active');
 76 |         F_Tool.addClass(tem, 'active');
 77 |         F_ShowWho(tem.dataset.showwhat);
 78 |         Old = tem;
 79 |         if (tem.dataset.showwhat != 'All') {
 80 |             O_NewFolder.style.display = 'none';
 81 |         } else {
 82 |             O_NewFolder.style.display = 'inline-block';
 83 |         }
 84 |     } else {
 85 |         console.log('oh no');
 86 |     }
 87 | 
 88 | 
 89 | });
 90 | O_Lswich.addEventListener('click', function () {
 91 |     F_Tool.removeClass(Oview, 'Gird-view');
 92 |     F_Tool.addClass(Oview, 'List-view');
 93 |     F_Tool.removeClass(O_LGswich, 'gird-switch-on');
 94 |     F_Tool.addClass(O_LGswich, 'list-switch-on');
 95 |     O_Operation.className = '';
 96 |     F_Tool.addClass(O_Operation, 'UchoosedItemList');
 97 |     F_scroolBar();
 98 |     NowWhere.Lorg = 'L';
 99 | });
100 | O_Gswich.addEventListener('click', function () {
101 |    // F_scroolBar();
102 |     F_Tool.addClass(Oview, 'Gird-view');
103 |     F_Tool.removeClass(Oview, 'List-view');
104 |     F_Tool.addClass(O_LGswich, 'gird-switch-on');
105 |     F_Tool.removeClass(O_LGswich, 'list-switch-on');
106 |     O_Operation.className = '';
107 |     F_Tool.addClass(O_Operation, 'UchoosedItemGird');
108 |     F_scroolBar();
109 |     NowWhere.Lorg = 'G';
110 | });
111 | O_NameUD.addEventListener('click', function () {
112 |     if (O_NameUD.getElementsByTagName('span')[0].className == 'Down') {
113 |         O_NameUD.getElementsByTagName('span')[0].className = 'Up';
114 |         F_RenderData(JsonData, F_findlevel(), 'Title', 'Up');
115 |     } else {
116 |         O_NameUD.getElementsByTagName('span')[0].className = 'Down';
117 |         F_RenderData(JsonData, F_findlevel(), 'Title', 'down');
118 |     }
119 | });
120 | O_CapUD.addEventListener('click', function () {
121 |     if (O_CapUD.getElementsByTagName('span')[0].className == 'Down') {
122 |         O_CapUD.getElementsByTagName('span')[0].className = 'Up';
123 |         F_RenderData(JsonData, F_findlevel(), 'Cap', 'Up');
124 |     } else {
125 |         O_CapUD.getElementsByTagName('span')[0].className = 'Down';
126 |         F_RenderData(JsonData, F_findlevel(), 'Cap', 'down');
127 |     }
128 | });
129 | O_TimeUD.addEventListener('click', function () {
130 |     if (O_TimeUD.getElementsByTagName('span')[0].className == 'Down') {
131 |         O_TimeUD.getElementsByTagName('span')[0].className = 'Up';
132 |         F_RenderData(JsonData, F_findlevel(), 'Time', 'Up');
133 |     } else {
134 |         O_TimeUD.getElementsByTagName('span')[0].className = 'Down';
135 |         F_RenderData(JsonData, F_findlevel(), 'Time', 'down');
136 |     }
137 | });
138 | O_selectAll.addEventListener('click', function (ev) {
139 |     // console.log(ev.target);
140 |     if (ev.target.checked) {
141 |         F_toSelectAll();
142 |     } else {
143 |         F_toSelectAllNot();
144 |     }
145 | });//全选建
146 | O_Cash.onclick = function () {
147 |     O_ToolsBar.style.display = 'none';
148 |     O_Operation.style.display = 'none';
149 |     F_Tool.removeClass(Old, 'active');
150 |     F_Tool.addClass(this, 'active');
151 |     Old = this;
152 |     OA_NowWhere = [];
153 |     O_Navtitleul.style.display = "none";
154 |     O_Mask.style.display = 'block';
155 |     O_Confirm.style.display = 'none';
156 |     O_Confirm2.style.display = 'block';
157 | 
158 |     O_Confirm2.addEventListener('click', function (ev) {
159 |         if (ev.target.className == "Cb CB-Ac") {
160 |             O_Mask.style.display = 'none';
161 |             O_Confirm2.style.display = 'none';
162 |             O_Confirm.style.display = 'block';
163 |         }
164 |         if (ev.target.className == "Cb CB-Ua") {
165 |             O_Mask.style.display = 'none';
166 |             O_Confirm2.style.display = 'none';
167 |             O_Confirm.style.display = 'block';
168 |         }
169 |     });
170 |     F_RenderData([], 'n', 'Cap', 'Up');
171 | };
172 | document.oncontextmenu = function(ev){
173 |     var ev = ev||window.event;
174 |     O_rightMenu.style.display = 'block';
175 |     O_rightMenu.style.left = ev.clientX +'px';
176 |     O_rightMenu.style.top = ev.clientY +'px';
177 |     if(NowWhere.Item!='All'){
178 |         O_rightMenu.getElementsByClassName('R-Tool-list')[1].style.color='#CCCCCC';
179 |     }else{
180 |         O_rightMenu.getElementsByClassName('R-Tool-list')[1].style.color='black';
181 |     }
182 | 
183 |     if(NowWhere.Lorg=='G'){
184 |         O_rightMenu.getElementsByClassName('R-Operation-list')[1].style.color='#CCCCCC';
185 |     }else{
186 |         O_rightMenu.getElementsByClassName('R-Operation-list')[1].style.color='black';
187 |     }
188 | 
189 |     return false;
190 | };
191 | 
192 | O_rightMenu.onmouseover = function(ev){
193 |     var  ev = ev||window.event;
194 |     var tem = null;
195 |     ev.target.tagName =='DIV'?tem=ev.target:tem=F_Tool.parents(ev.target,'div');
196 |     console.log(tem);
197 | 
198 |     if(tem&&(tem.className=='R-Operation-list'||tem.className=='R-Tool-list')){
199 |         Old2.style.backgroundColor = '#fff';
200 |         tem.style.backgroundColor = '#00B4CC';
201 |         Old2 = tem;
202 |         if(tem.dataset.showwhat =='LorG'){
203 |             O_RLorG.style.display = 'block';
204 |             O_RUporDown.style.display = 'none';
205 |         }else if(tem.dataset.showwhat =='UporDown'&&NowWhere.Lorg=='L'){
206 |             O_RLorG.style.display = 'none';
207 |             O_RUporDown.style.display = 'block';
208 |         }else{
209 |             O_RLorG.style.display = 'none';
210 |             O_RUporDown.style.display = 'none';
211 |         }
212 |     }
213 | };
214 | 
215 | O_rightMenu.addEventListener('click',function () {
216 |     var  ev = ev||window.event;
217 |     var tem = null;
218 |     ev.target.tagName =='DIV'?tem=ev.target:tem=F_Tool.parents(ev.target,'div');
219 |     console.log(tem);
220 | 
221 |     if(tem&&(tem.className=='R-Operation-list'||tem.className=='R-Tool-list')){
222 |         if(tem.dataset.showwhat =='Refresh'){
223 |             F_ShowWho(NowWhere.Item);
224 |             console.log('点击了刷新');
225 |             O_rightMenu.style.display = 'none';
226 |         }
227 | 
228 |         if(tem.dataset.showwhat =='Reload'){
229 |             location.reload();
230 |             O_rightMenu.style.display = 'none';
231 |         }
232 | 
233 | 
234 |         if(tem.dataset.showwhat =='NewFolder'&&NowWhere.Item=='All'){
235 |             console.log('点击了新建');
236 |             F_createNewFolder();
237 |             O_rightMenu.style.display = 'none';
238 |         }
239 |     }
240 | 
241 | 
242 | });
243 | O_RLorG.addEventListener('click',function(ev){
244 | 
245 |    
246 |     var ev = ev||window.event;
247 |     var tem = ev.target;
248 |     if(tem.dataset.showwhat){
249 |         if(tem.dataset.showwhat=="List"){
250 |             O_Lswich.click();
251 |             O_rightMenu.style.display = 'none';
252 |             O_RLorG.className = 'List-view-span';
253 |             O_RLorG.style.display = 'none';
254 | 
255 |         }
256 |         if(tem.dataset.showwhat=="Gird"){
257 |             O_Gswich.click();
258 |             O_rightMenu.style.display = 'none';
259 |             O_RLorG.style.display = 'none';
260 |             O_RLorG.className = 'Gird-view-span';
261 |         }
262 |     }
263 | 
264 | });
265 | 
266 | O_RUporDown.addEventListener('click',function(ev){
267 |     if(NowWhere.Lorg=='G'){
268 |         return false;
269 |     }
270 |     var ev = ev||window.event;
271 |     var tem = ev.target;
272 |     console.log(tem.dataset.showwhat);
273 |     if(tem.dataset.showwhat){
274 |         if(tem.dataset.showwhat=="FileName"){
275 |             O_NameUD.click();
276 |             O_rightMenu.style.display = 'none';
277 |             O_RUporDown.className = 'nameD';
278 |             O_RUporDown.style.display = 'none';
279 | 
280 |         }
281 |         if(tem.dataset.showwhat=="Capicy"){
282 |             O_CapUD.click();
283 |             O_rightMenu.style.display = 'none';
284 |             O_RUporDown.style.display = 'none';
285 |             O_RUporDown.className = 'capD';
286 |         }
287 | 
288 |         if(tem.dataset.showwhat=="Time"){
289 |             O_TimeUD.click();
290 |             O_rightMenu.style.display = 'none';
291 |             O_RUporDown.style.display = 'none';
292 |             O_RUporDown.className = 'TimeD';
293 |         }
294 |     }
295 | 
296 | });
297 | 
298 | 
299 | var OviewDl = document.getElementsByTagName('dl')[0];
300 | 
301 | F_scroolBar();
302 | 
303 | window.onresize = function(){
304 |     Oview.style.height = document.body.clientHeight-170+'px';
305 |     F_scroolBar();
306 | };
307 | setInterval(function () {
308 |     F_ChangeTheToolBar();
309 |     O_Howmany.innerHTML = OA_Group.length;
310 |     if (OA_NowWhere.length == 0) {
311 |         O_Navtitle.className = 'Nav-title Notin';
312 |     } else {
313 |         O_Navtitle.className = 'Nav-title InaDrec';
314 |     }
315 | }, 50);
316 | 
317 | 
318 | Oview.addEventListener('click', function (ev) {
319 |     var tem = F_Tool.parents(ev.target, '.Ob');
320 |     // var temEdit = F_Tool.parents(ev.target,'.EditButon');
321 |     var temObj = ev.target;
322 |     if (temObj.className == 'EditButon') {//点击了edit
323 |         console.log('点击了EditButon');
324 |         F_Tool.parents(temObj, '.File-Title').className = 'File-Title Editing';
325 |         var teminput = F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0];
326 |         teminput.value = F_Tool.parents(temObj, '.File-Title').getElementsByClassName('Name')[0].innerHTML;
327 |         F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].focus();
328 | 
329 |         return false;
330 |     }
331 | 
332 |     if (temObj.tagName == 'INPUT') {//如果点击了 input
333 |         console.log('点击了 input');
334 | 
335 |         return false;
336 |     }
337 | 
338 | 
339 |     if (temObj.className == 'ConfirmButton') {//如果点击了 input
340 |         console.log(F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].value.length);
341 |         if (F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].value.length > 8 || F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].value.length < 3) {
342 |             alert('文件名称限制3-8位!');
343 |             F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].focus();
344 |             return false;
345 |         }
346 |         var temTime = new Date();
347 |         var temdata = F_manageData.WhoHasTheValue(JsonData, tem.dataset.fileid)
348 |         console.log(F_manageData.WhoHasTheValue(JsonData, tem.dataset.fileid));
349 |         temdata.Title = F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].value;
350 | 
351 |         temdata.Time = temTime.getHours() + ":" + temTime.getMinutes() + ':' + temTime.getSeconds();
352 | 
353 |         F_Tool.parents(temObj, '.File-Title').className = 'File-Title Uedit';
354 |         tem.getElementsByClassName('File-more')[1].innerHTML = temdata.Time;
355 |         F_Tool.parents(temObj, '.File-Title').getElementsByClassName('Name')[0].innerHTML = F_Tool.parents(temObj, '.File-Title').getElementsByTagName('input')[0].value;
356 | 
357 |         return false;
358 |     }
359 | 
360 | 
361 |     if (temObj.className == 'OkButton') {//如果点击了 取消键
362 |         F_Tool.parents(temObj, '.File-Title').className = 'File-Title Uedit';
363 |         return false;
364 |     }
365 | 
366 | 
367 |     //这是input 不存在的时候
368 | 
369 | 
370 |     if (tem && temObj.tagName != 'INPUT' && temObj.className != 'OkButton') {// 除了点击 edit以外的位置
371 |         if (ev.target.className != '' && tem.dataset.filetype == 'Drec') {//点击文件夹
372 |             F_RenderData(JsonData, tem.dataset.fileid, 'Title', 'down');
373 |             OA_NowWhere.push(tem.dataset.fileid);//保存ID
374 |             F_createNav();
375 |             //OA_Group = [];
376 |             //这个地方就得 开始渲染导航框了
377 |         } else {//点击 文件
378 |             //push进入数组  开始打打勾 第二次点击 就取消打勾
379 |             F_Tool.toggleClass(F_Tool.parents(ev.target, 'dd'), 'Unclick', 'Clicked');
380 |             // console.log(tem);
381 |             F_manageData.ToogleArray(OA_Group, tem.dataset.fileid);
382 |             console.log(F_manageData.getChildById(JsonData, F_findlevel()).length);
383 |             if (OA_Group.length == F_manageData.getChildById(JsonData, F_findlevel()).length) {
384 |                 O_selectAll.checked = true;
385 |             } else {
386 |                 O_selectAll.checked = false;
387 |             }//判断 是否全选
388 | 
389 |         }
390 | 
391 |     }
392 | 
393 | 
394 | });//文件点击操作
395 | 
396 | O_Navtitleul.addEventListener('click', function (ev) {
397 |     console.log(F_Tool.parents(ev.target, 'li').dataset.showwhat);
398 |     if (F_Tool.parents(ev.target, 'li')) {
399 |         if (F_Tool.parents(ev.target, 'li').dataset.showwhat != 0) {
400 | 
401 |             OA_NowWhere = F_deleteBehind(OA_NowWhere, F_Tool.parents(ev.target, 'li').dataset.showwhat);
402 |             // console.log(OA_NowWhere);
403 |             F_NavRender(F_Tool.parents(ev.target, 'li').dataset.showwhat);
404 |         } else {
405 |             OA_NowWhere = [];
406 |             F_NavRender(F_Tool.parents(ev.target, 'li').dataset.showwhat);
407 |         }
408 |     }
409 | 
410 | });
411 | 
412 | O_NewFolder.addEventListener('mouseup', function (ev) {
413 |     if (F_Tool.parents(ev.target, '.NewFolder')) {
414 |         //function new folder
415 |         F_createNewFolder();
416 |     }
417 | });
418 | 
419 | O_Delete.addEventListener('click', function () {
420 |     O_Mask.style.display = 'block';
421 |     O_Confirm.addEventListener('click', function (ev) {
422 |         if (ev.target.className == "Cb CB-Ac") {
423 |             O_Mask.style.display = 'none';
424 |             //执行删除
425 | 
426 |             F_DeleteData();
427 | 
428 |         }
429 |         if (ev.target.className == "Cb CB-Ua") {
430 |             O_Mask.style.display = 'none';
431 |         }
432 |     })
433 | 
434 | });
435 | 
436 | Oview.addEventListener('mousedown', F_Down);
437 | 
438 | O_Scroolspan.onmousedown  = function (ev) {
439 |     var OviewDl = document.getElementsByTagName('dl')[0];
440 |     var disY = 0;
441 |     var disMtS =(ev.clientY-O_ScroolBar.offsetTop)- O_Scroolspan.offsetTop;
442 |     O_Scroolspan.onmousemove = function(ev){
443 |         disY = ev.clientY-O_ScroolBar.offsetTop-disMtS;
444 |         if(disY>=0&&disY<=O_ScroolBar.offsetHeight-O_Scroolspan.offsetHeight){
445 |             O_Scroolspan.style.top = disY+'px';
446 |             OviewDl.style.top = -disY*(O_ScroolBar.offsetHeight/O_Scroolspan.offsetHeight+1)+'px';
447 |         }
448 | 
449 |     };
450 | //
451 |     document.addEventListener('mouseup', F_ScroolUp);
452 | 
453 | 
454 | };
455 | 
456 | 
457 | 
458 | //现在需要写一个 函数 当我点击 除了input框之外 ,还有取消键之外的东西 他的效果就是 确认键效果
459 | //不过这个监听 应该是 我在 添加了edit之后
460 | document.addEventListener('mousedown', function (ev) {
461 |     var temObj = document.getElementsByClassName('Editing')[0];
462 | 
463 |     console.log(temObj);
464 |     if (temObj) {
465 |         if (ev.target.tagName != 'INPUT' && ev.target.className != 'ConfirmButton') {
466 |             console.log(temObj);
467 |             temObj.className = 'File-Title Uedit';
468 |         }
469 | 
470 |     }
471 |   console.log(F_Tool.parents(ev.target,'.rightMenu'));
472 |      if( !F_Tool.parents(ev.target,'.rightMenu')&&!F_Tool.parents(ev.target,'.R-LorG')&&!F_Tool.parents(ev.target,'.R-UporDown')){
473 |         O_rightMenu.style.display = 'none';
474 |         O_RUporDown.style.display = 'none';
475 |         O_RLorG.style.display = 'none';
476 | }
477 | 
478 | 
479 |     ev.preventDefault();
480 | 
481 | 
482 | 
483 | });
484 | 
485 | //点击事件区域
486 | 
487 | function F_ShowWho(showwho) {
488 |     if (showwho == 'All') {
489 |         //这里就直接 跑到根目录
490 |         F_RenderData(JsonData, 0, 'Cap', 'Up');
491 |     } else {
492 |         F_RenderData(ClassiFy[showwho], 'n', 'Cap', 'Up');
493 |         OA_NowWhere = [];
494 |         //console.log(ClassiFy[showwho]);
495 |     }
496 | }//此函数 是 侧边栏 的函数
497 | 
498 | function F_RenderData(data, renderId, Attr, UD) {
499 |     clearAll();//不知道这样设置 是否是个坑  一旦重新渲染 就清空
500 |   //一旦渲染 重新定位
501 |     OviewDl = document.getElementsByTagName('dl')[0];
502 |     // console.log(data);
503 |     var tempData = '';
504 |     var html = "";
505 |     if (!isNaN(renderId)) {
506 |         childs = F_manageData.UpOrDown(F_manageData.getChildById(data, renderId), Attr, UD);
507 | 
508 |     } else {
509 |         // console.log(data);
510 |         // console.log(childs);
511 |         childs = F_manageData.UpOrDown(data, Attr, UD);  //两种渲染模式  一种是渲染子集  一种是渲染 当前 数据  现在没用它
512 |     }
513 | 
514 |     childs.map(function (item) {
515 |         tempData = '';
516 |         if (item.Type != "Drec") {
517 |             tempData = '.' + item.Type;
518 |         }
519 |         html += renderData.fileHtml(item, tempData);
520 |     });
521 | 
522 |     Oview.innerHTML = '<dl>' + html + '</dl>';
523 |     // Oview.style.height = document.body.clientHeight-170+'px';
524 | 
525 |     F_scroolBar();
526 | 
527 | }//渲染函数
528 | 
529 | function F_ChangeTheToolBar() {
530 |     if (OA_Group.length == 0) {
531 |         if (F_Tool.hasClass(Oview, 'Gird-view')) {
532 |             O_Operation.className = 'UchoosedItemGird';
533 |         } else {
534 |             O_Operation.className = 'UchoosedItemList';
535 |         }
536 |     } else {
537 |         O_Operation.className = 'ChoosedItem';
538 |     }
539 | 
540 | 
541 | }
542 | function F_toSelectAll() {
543 |     var A_tem = Oview.getElementsByTagName('dd');
544 |     F_manageData.each(A_tem, function (a) {
545 |         F_Tool.addClass(a, 'Clicked');
546 |         F_Tool.removeClass(a, 'Unclick');
547 |         OA_Group.push(a.getElementsByClassName('Ob')[0].dataset.fileid);
548 |     });
549 | 
550 | }
551 | 
552 | function F_toSelectAllNot() {
553 |     var A_tem = Oview.getElementsByTagName('dd');
554 |     F_manageData.each(A_tem, function (a) {
555 |         F_Tool.addClass(a, 'Unclick');
556 |         F_Tool.removeClass(a, 'Clicked');
557 |     });
558 |     OA_Group = [];
559 | 
560 | }
561 | 
562 | function clearAll() {
563 |     O_Howmany.innerHTML = 0;
564 |     OA_Group = [];
565 |     O_selectAll.checked = false;
566 | }
567 | 
568 | function F_createNav() {//id 与 第几个是对应得 但是 是减去一的关系!!!!!
569 |     O_Navtitleul.innerHTML = renderData.StaticHtml(OA_NowWhere);
570 |     OA_NowWhere.forEach(function (item) {
571 |         O_Navtitleul.innerHTML += renderData.crNav(F_manageData.WhoHasTheValue(JsonData, item));
572 |         console.dir(JsonData[item - 1]);
573 |     });
574 | }
575 | 
576 | 
577 | function F_NavRender(id) {
578 |     F_RenderData(JsonData, id, 'Cap', 'Up');
579 |     F_createNav();
580 | }
581 | function F_fromArraygetData(Arr, data) {
582 |     var tem = [];
583 |     Arr.forEach(function (item) {
584 |         tem.push(data[item - 1]);
585 |     });
586 |     return tem;
587 | }
588 | 
589 | function F_deleteBehind(Arr, number) {
590 |     return Arr.slice(0, F_manageData.whereTheValue(Arr, number) + 1);
591 | }
592 | 
593 | function F_createNewFolder() {
594 |     //数据层 新建 这时候跟 i有关了 卧槽。。。
595 |     //点击新建IDnumber就加1
596 |     F_scroolBar();
597 |     var Time = new Date();
598 |     IdNumber++;
599 |     //数据层
600 |     var newData = {};
601 |     newData.pid = F_findlevel();//现在所处文件夹的位置
602 |     newData.Time = newData.Time = Time.getHours() + ':' + Time.getMinutes() + ':' + Time.getSeconds();
603 |     newData.Cap = 'O__O "…';
604 |     newData.Title = 'NF' + IdNumber;
605 |     newData.Type = 'Drec';
606 |     newData.idNumber = IdNumber;
607 |     JsonData.push(newData);
608 |     //DOM 阶段 新建 一个 DOM 添加一个修改界面
609 |     //
610 |     var temDOM = document.createElement('dd');
611 |     temDOM.className = 'Unclick';
612 |     temDOM.innerHTML = renderData.CreatNewFolder(newData);
613 |     console.log(temDOM);
614 |     Oview.getElementsByTagName('dl')[0].insertBefore(temDOM, Oview.getElementsByTagName('dl')[0].firstChild);
615 |     temDOM.getElementsByTagName('input')[0].focus();
616 |     console.log(OviewDl);
617 | }
618 | 
619 | function F_findlevel() {
620 |     return OA_NowWhere.length == 0 ? 0 : OA_NowWhere[OA_NowWhere.length - 1];
621 | }
622 | 
623 | function F_DeleteData() {
624 |     //通过ID找到他们的值
625 |     var Ad = document.getElementsByClassName('Ob');
626 |     console.log(Ad);
627 |     console.log(OviewDl);
628 |     console.log(OA_Group);
629 |     OA_Group.map(function (item) {
630 |         var i = F_manageData.whereTheValue(JsonData, F_manageData.WhoHasTheValue(JsonData, item));//为了赶时间   写了一个恶心的算法  见谅 见谅
631 |     F_manageData.getItChildsAll(JsonData,item);
632 | 
633 | 
634 |         //找到他下面的数据全部删除  然后 在Clssify里面也全部删除
635 |         //有一个数组 然后 数组里面的东西
636 |         //全部删除掉
637 |         //classify
638 |         // Alldeleted.map(function(item){
639 |         //     var i = F_manageData.whereTheValue(JsonData,item);
640 |         //     JsonData.splice(i, 1);
641 |         // });
642 |         if (JsonData[i]) {
643 |             Deleted.push(JsonData[i]);
644 |             JsonData.splice(i, 1);
645 |         }
646 | 
647 | 
648 |         for (var j = 0; j < Ad.length; j++) {
649 |             console.log(Ad[j].parentNode);
650 |             var Adl = document.getElementsByTagName('dl')[0];
651 |             if (Ad[j].dataset.fileid == item) {
652 |                 Adl.removeChild(Ad[j].parentNode);
653 |             }
654 |         }
655 | 
656 |         OA_Group = [];
657 |         Alldeleted =[];
658 |         O_selectAll.checked = false;
659 |     });
660 | 
661 | }
662 | 
663 | 
664 | function F_Down(ev){
665 |     disX = ev.clientX;
666 |     disY = ev.clientY;
667 |     if(!newDiv){
668 |         newDiv = document.createElement('div');
669 |         newDiv.id = 'SelectTab';
670 | 
671 | 
672 |         console.log(newDiv);
673 | 
674 |         document.body.appendChild(newDiv);
675 |     }
676 |     ev.preventDefault();//阻止默认行为
677 | 
678 |     newDiv.style.width = 0+'px';
679 |     newDiv.style.height = 0+'px';
680 | 
681 | 
682 |     newDiv.style.left = disX+'px';
683 |     newDiv.style.top = disY+'px';
684 | 
685 |     document.addEventListener('mousemove',F_move);
686 |     document.addEventListener('mouseup',F_Up);
687 | }
688 | 
689 | 
690 | function F_move(ev){
691 |     var w = ev.clientX-disX;
692 |     var h  = ev.clientY - disY;
693 |     newDiv.style.width = Math.abs(w)+'px';
694 |     newDiv.style.height = Math.abs(h)+'px';
695 |     newDiv.style.left = Math.min(ev.clientX,disX)+'px';
696 |     newDiv.style.top = Math.min(ev.clientY,disY)+'px';
697 | 
698 |     if(Math.abs(w)>20&&Math.abs(h)>20){
699 |         newDiv.className = 'tabShow';
700 |         var Ad = document.getElementsByClassName('Ob');
701 |         F_Tool.each(Ad,function(item){
702 |             if(F_Tool.Boom(newDiv,item)){
703 |                 //执行模拟点击事件。。。。
704 |                 F_Tool.removeClass(F_Tool.parents(item, 'dd'), 'Unclick');
705 |                 F_Tool.addClass(F_Tool.parents(item, 'dd'), 'Clicked');
706 |                 // console.log(tem);
707 |                 if(F_manageData.whereTheValue(OA_Group,item.dataset.fileid)=='meiyou'){
708 |                     OA_Group.push(item.dataset.fileid);
709 |                 }
710 | 
711 |                 console.log(F_manageData.getChildById(JsonData, F_findlevel()).length);
712 |                 if (OA_Group.length == F_manageData.getChildById(JsonData, F_findlevel()).length) {
713 |                     O_selectAll.checked = true;
714 |                 } else {
715 |                     O_selectAll.checked = false;
716 |                 }//判断 是否全选
717 | 
718 |             }else{
719 |                 F_Tool.removeClass(F_Tool.parents(item, 'dd'), 'Clicked');
720 |                 F_Tool.addClass(F_Tool.parents(item, 'dd'), 'Unclick');
721 |                 if(F_manageData.whereTheValue(OA_Group,item.dataset.fileid)!='meiyou'){
722 |                     OA_Group.splice(F_manageData.whereTheValue(OA_Group,item.dataset.fileid),1);
723 |                 }
724 |             }
725 |         });
726 | 
727 |     }else{
728 |         newDiv.className = 'tabHide';
729 |     }
730 | 
731 | 
732 |     // 在移动的过程中 添加碰撞检测
733 | 
734 | }
735 | 
736 | function F_Up(){
737 |     document.removeEventListener('mousemove',F_move);
738 |     document.removeEventListener('mouseup',F_Up);
739 | 
740 |     newDiv.className = 'tabHide';
741 | }
742 | 
743 | function F_scroolBar() {
744 | 
745 |     var OviewDl = document.getElementsByTagName('dl')[0];
746 |     console.log(OviewDl.offsetHeight);
747 |     Oview.style.height = document.body.clientHeight-170+'px';
748 |     if(OviewDl.offsetHeight>Oview.offsetHeight){
749 |         O_ScroolBar.style.display = 'inline-block';
750 |         O_Scroolspan.style.display = 'inline-block';
751 |         O_ScroolBar.style.height = Oview.offsetHeight+'px';
752 |         O_Scroolspan.style.height = (O_ScroolBar.offsetHeight*O_ScroolBar.offsetHeight/OviewDl.offsetHeight)+'px';
753 |         O_Scroolspan.style.top=0;
754 |     }else {
755 |         O_ScroolBar.style.display = 'none';
756 |         O_Scroolspan.style.display = 'none';
757 |     }
758 | }
759 | 
760 | function F_ScroolUp() {
761 |     O_Scroolspan.onmousemove = null;
762 |     document.removeEventListener('mouseup',F_ScroolUp);
763 | }


--------------------------------------------------------------------------------
/js/randomData.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by mac on 16/9/23.
  3 |  */
  4 | 
  5 | /*
  6 |  *
  7 |  * 此 js 文件 用于 创建 随机的 文件夹 json 数据   首先是
  8 |  * 随机创建 文件夹   随机所属关系 然后  随机 添加文件
  9 |  * 文件格式 的不同 图片也就不同
 10 |  */
 11 | 
 12 | 
 13 | var ClassiFy = {
 14 |     PictureData: [],
 15 |     VideoData: [],
 16 |     FileData: [],
 17 |     AudioData: [],
 18 |     OtherData: [],
 19 |     DrecData: [],
 20 |     Torrent:[]
 21 | }
 22 | var MaybeParent = [0];
 23 | var JsonData = (function () {
 24 | // 产生随机文件数目
 25 |     var a = Math.floor(Math.random() * 150 + 40);
 26 | // 随机 产生 文件  文件夹
 27 |     var b = Math.floor(Math.random() * (a * 0.4));//文件夹
 28 |     var c = a - b;  //文件
 29 |     var fileString = 'avi-ppt-css-eps-pdf-mp3-HTML-txt-doc-jpg-dll-xls-docx-psd-wav-zip';
 30 |     var file = fileString.split('-'); //文件类型
 31 | 
 32 |     var jsonData = [];
 33 | //产生随机文件夹
 34 |     function CreatData(call) {
 35 |         var Time = new Date();
 36 |         var newData = {};
 37 |         newData.pid = getRandom(MaybeParent);
 38 |         newData.idNumber = i;
 39 |         if (call == "Drec") {//如果是目录文件 那么在目录文件 出 加 上他
 40 |             MaybeParent.push(i);
 41 |         }
 42 |         newData.Title = randomWord(true, 3, 7);
 43 |         newData.Type = call;
 44 |         newData.Time = Time.getHours() + ':' + Time.getMinutes() + ':' + Time.getSeconds();
 45 |         if (call == "Drec") {
 46 |             newData.Cap = 'O__O "…';
 47 |             ClassiFy.DrecData.push(newData);
 48 |         } else {
 49 |             newData.Cap = Math.floor(Math.random() * 9000+1000) + 'KB';
 50 |         }
 51 | 
 52 | 
 53 |         switch (call) {
 54 |             case 'avi':
 55 |                 ClassiFy.VideoData.push(newData);
 56 |                 break;
 57 |             case 'mp3':
 58 |                 ClassiFy.AudioData.push(newData);
 59 |                 break;
 60 |             case 'wav':
 61 |                 ClassiFy.AudioData.push(newData);
 62 |                 break;
 63 |             case 'eps':
 64 |                 ClassiFy.PictureData.push(newData);
 65 |                 break;
 66 |             case 'jpg':
 67 |                 ClassiFy.PictureData.push(newData);
 68 |                 break;
 69 |             case 'psd':
 70 |                 ClassiFy.PictureData.push(newData);
 71 |                 break;
 72 |             case 'ppt':
 73 |                 ClassiFy.FileData.push(newData);
 74 |                 break;
 75 |             case 'css':
 76 |                 ClassiFy.FileData.push(newData);
 77 |                 break;
 78 |             case 'pdf':
 79 |                 ClassiFy.FileData.push(newData);
 80 |                 break;
 81 |             case 'HTML':
 82 |                 ClassiFy.FileData.push(newData);
 83 |                 break;
 84 |             case 'txt':
 85 |                 ClassiFy.FileData.push(newData);
 86 |                 break;
 87 |             case 'doc':
 88 |                 ClassiFy.FileData.push(newData);
 89 |                 break;
 90 |             case 'xls':
 91 |                 ClassiFy.FileData.push(newData);
 92 |                 break;
 93 |             case 'docx':
 94 |                 ClassiFy.FileData.push(newData);
 95 |                 break;
 96 |             case 'dll':
 97 |                 ClassiFy.OtherData.push(newData);
 98 |                 break;
 99 |             case 'zip':
100 |                 ClassiFy.OtherData.push(newData);
101 |                 break;
102 |         }
103 | 
104 |         // console.log(newData);
105 |         return newData;
106 |     }
107 | 
108 | 
109 |     for (var i = 1; i <= b; i++) {
110 |         jsonData.push(CreatData('Drec'));// 保存目录数据
111 |     }
112 | 
113 |     for (i = b + 1; i <= a; i++) {
114 |         jsonData.push(CreatData(getRandom(file)));// 保存 文件数据
115 |     }
116 | 
117 | 
118 |     function getRandom(Array) {
119 |         return Array[Math.floor(Math.random() * (Array.length - 1))];
120 |     }
121 | 
122 |     function randomWord(randomFlag, min, max) {
123 |         var str = "",
124 |             range = min,
125 |             arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
126 | 
127 |         // 随机产生
128 |         if (randomFlag) {
129 |             range = Math.round(Math.random() * (max - min)) + min;
130 |         }
131 |         for (var i = 0; i < range; i++) {
132 |             pos = Math.round(Math.random() * (arr.length - 1));
133 |             str += arr[pos];
134 |         }
135 |         return str;
136 |     }
137 | 
138 |     return jsonData;
139 | })();
140 | 
141 | // console.log(JsonData);
142 | 
143 | 
144 | 


--------------------------------------------------------------------------------
/思路.md:
--------------------------------------------------------------------------------
 1 | #README
 2 | 
 3 | 首先id是唯一的 
 4 | 我刚开始分配id机制 是for循环分配 
 5 | 那么现在 这个 id1应该是 是个常熟 一直在增加 
 6 | 
 7 | ##新建文件夹
 8 | 需要 在数据层新建 在DOM创建
 9 | 创建完了之后还要在显示改名 
10 | 
11 | 创建之后改名 与 更该名称 是同一件事 
12 | 那就先写一个改名称函数
13 | 
14 | ## 名称修改
15 | 修改名称的键 放到哪里 ? 
16 | - 如果是放到 tools bar 那就得注意 多选的情况 
17 | - 如果是放到 每一个Dom上面 添加一个修改键值 那就需要 放一个修改箭头
18 |  
19 | > 我更加倾向于第二种情况,第二种情况 必须要考虑数组的多少点击那个修改名称 就修改。
20 | > 修改名称 需要都注意的是,如果是修改文件的名称,应该只修改文件名称部分不能修改
21 | 他的后缀,为了防止这一点,我将名称分成两个部分 一个是名称部分 一个是后缀部分,后缀部分是
22 | > 那么布局  因该是这样   span{ span{名称} span{input框}span{后缀} span{修改} span{确认} span{取消}}   
23 | >在刚开始产生的时候  因该是1 显示名称 还有 修改键位
24 | >在点击新建的时候 就会产生具有修改类名的 东西出来 同时要添加  确认 和取消的事件,确认之后那就拿这个input里面的value值传给当前id的jsondata
25 |  并且将value值传给dom键值,并且显示编辑键,那么编辑健的作用及时 换类名
26 | >确认键除了换类名 传值,然后就是取消键也只是换类名
27 | >样式有 G:
28 | >       L: 这两种情况
29 | 
30 | ## 点击事件的规划
31 | >  一个 文件里面 有多个点击事件
32 | >    /**
33 |       * 点击情况  刚开始 点击 多选框  点击编辑按钮 编辑按钮点击之后 就是点击 input框   input框 之后就是  确认键  取消键
34 |       * 刚开始点击情况    段选矿 就是 除了点击 edit键之外 都是多选框  或者打开文件夹
35 |       * 第二种 编辑界面点击情况
36 |       */
37 | > 点击情况如上  点击 出了点击编辑按钮之外的其他情况 都为点击多选框
38 | >  那么首先来 就判断是不是点击 编辑按钮 
39 |    那么是不是点击 确认件 取消键 
40 |      是不是点击input框 
41 | > 最后才是判断是不是选中     
42 | 
43 | ----
44 | 
45 | ### 最近 发现自己 经常犯 ==  与 = 的错误 我是猪。。。
46 | 
47 | ## 删除数据 
48 | > 删除数据,删除数据是要用户确认,再push进数组,这个数组 就是回收站的数据,点击之后会有一个Confirm框
49 | Confirm框跟随鼠标移动
50 | ## 新bug
51 | >新建的文件夹 时候 没push到当前 我当前 是用childs来核对的  childs在改变  还有 OA GROUP要清空
52 | >
53 | ## 我想还是吧百度云 删除完善了 
54 | > 删除包括了 删除他的所有子集
55 | >删除 包括了 然后 点击 删除了的东西
56 | 
57 | 
58 | 
59 | 
60 | ## 框选 右键 全部都要写
61 | 
62 | ##删除 递归  先将
63 | > 怎么接受后面传过来的数据呢?
64 | >显示 获取 子集 然后把子集传入数组
65 | >然后再 获取子集每一个的自己 再传入数组
66 | >那么这个数组 必定是一个全局的
67 | >获取的自己如何传出??
68 | >
69 | 
70 | ## scroll 滚动条的处理
71 | > 滚动条 在window.resize的时候 会自动计算自己的长度
72 | >winddow.resize的时候 也要计算 Oview的高度


--------------------------------------------------------------------------------