page

xygodcyx · May 25, 2024 · a9ecd64 · a9ecd64
1 parent 848c67a
commit a9ecd64
Show file tree

Hide file tree

Showing 3 changed files with 308 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -13,13 +13,13 @@
 
 <body>
     <div class="home hideLeft" id="app">
-        <div class="leftNav">
+        <div class="leftNav show">
             <div class="top">
-                <!-- <div class="icon control iconfont icon-m-kaiguan">
-                </div> -->
-                <div class="logo">
-                    <img src="web/asset/logo.png" alt="">
+                <div class="icon control iconfont icon-m-kaiguan">
                 </div>
+                <!-- <div class="logo">
+                    <img src="web/asset/logo.png" alt="">
+                </div> -->
                 <div class="search">
                     <span class="icon iconfont small icon-wxbsousuotuiguang"></span>
                     <div class="searchBig">
@@ -28,36 +28,37 @@
                     </div>
                 </div>
                 <p class="line"></p>
-                <h4 class="topTitle title">macOS图标库</h4>
+                <h4 class="topTitle title">Window图标库</h4>
                 <nav class="topNav">
                     <ul class="navList">
-                        <li class="navItem">
+                        <li class="navItem mainHome">
                             <span class="icon iconfont icon-home"></span>
-                            <span class="label">家</span>
+                            <span class="label">所有图标</span>
                         </li>
-                        <li class="navItem">
+                        <li class="navItem folders">
+                            <span class="icon iconfont icon-huabi"></span>
+                            <span class="label">文件夹图标</span>
+                        </li>
+                        <li class="navItem file">
                             <span class="icon iconfont icon-wenhao"></span>
-                            <span class="label">关于</span>
+                            <span class="label">文件图标</span>
                         </li>
                     </ul>
                 </nav>
             </div>
             <div class="center">
                 <p class="line"></p>
-                <h4 class="centerTitle title">过滤器</h4>
+                <h4 class="centerTitle title">分类</h4>
                 <nav class="centerNav">
                     <ul class="navList">
-                        <!-- <li class="navItem">
-                            <span class="icon iconfont icon-huabi"></span>
-                            <span class="label">颜色</span>
-                        </li> -->
+
                         <!-- <li class="navItem">
                             <span class="icon iconfont icon-manhuajia"></span>
                             <span class="label">文件类型</span>
                         </li> -->
-                        <li class="navItem">
+                        <li class="navItem company">
                             <span class="icon iconfont icon-kaifashang"></span>
-                            <span class="label">公司</span>
+                            <span class="label">按开发商展示</span>
                         </li>
                         <!-- <li class="navItem">
                             <span class="icon iconfont icon-yaoyiyao"></span>
@@ -67,9 +68,9 @@ <h4 class="centerTitle title">过滤器</h4>
                             <span class="icon iconfont icon-rili"></span>
                             <span class="label">年</span>
                         </li> -->
-                        <li class="navItem">
+                        <li class="navItem app">
                             <span class="icon iconfont icon-yingyongAPP_o"></span>
-                            <span class="label">应用</span>
+                            <span class="label">按软件展示</span>
                         </li>
                     </ul>
                 </nav>
@@ -81,13 +82,14 @@ <h3 class="title">
                 <nav class="about">
                     <ul>
                         <li class="navItem">
-                            <a href="#">iOS图标库</a>
-                            <span class="icon iconfont">&#xe74c;</span>
+                            <a href="">windows图标库
+                                <span class="icon iconfont">&#xe74c;</span>
+                            </a>
                         </li>
-                        <li class="navItem">
+                        <!-- <li class="navItem">
                             <a href="#">watchOS图标库</a>
                             <span class="icon iconfont">&#xe74c;</span>
-                        </li>
+                        </li> -->
                     </ul>
                 </nav>
             </div>
@@ -97,7 +99,7 @@ <h3 class="title">
             <div class="top">
                 <div class="leftTitle">
                     <span id="title">图标</span>
-                    <span class="sum">(999)</span>
+                    <span class="sum">(0)</span>
                     <div class="back iconfont icon-back"></div>
                 </div>
                 <div class="rightTool">

diff --git a/web/css/leftNav.css b/web/css/leftNav.css
@@ -15,6 +15,7 @@
     -moz-transition: 0.3s;
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
+    /* transition-delay: 0.02s; */
 }
 
 
@@ -24,13 +25,17 @@
 
     width: var(--leftNavWidth);
     max-width: var(--leftNavWidth);
-    transition-delay: 0.02s;
+    /* transition-delay: 0.2s; */
+    transition-delay: 0s;
+
 }
 
-.home .leftNav:hover {
+.home .leftNav:focus {
     width: var(--leftNavWidth);
     max-width: var(--leftNavWidth);
-    transition-delay: 0.02s;
+    /* transition-delay: 0.2s; */
+    transition-delay: 0s;
+
 }
 
 .home .leftNav.show .logo {
@@ -43,7 +48,7 @@
     -o-transform: scale(4.6);
 }
 
-.home .leftNav:hover .logo {
+.home .leftNav:focus .logo {
     /*width: 200px;
     */
     transform: scale(4.6);
@@ -91,11 +96,11 @@
     opacity: 1;
 }
 
-.home .leftNav:hover .top .search .small {
+.home .leftNav:focus .top .search .small {
     font-size: 0px;
 }
 
-.home .leftNav:hover .top .search .searchBig {
+.home .leftNav:focus .top .search .searchBig {
     opacity: 1;
 }
 
@@ -166,17 +171,17 @@
 }
 
 
-.home .leftNav:hover .label {
+.home .leftNav:focus .label {
     font-size: 14px;
 }
 
-.home .leftNav:hover .title {
+.home .leftNav:focus .title {
     opacity: 1;
     font-size: 16px;
 }
 
 
-.home .leftNav:hover .line {
+.home .leftNav:focus .line {
     width: var(--lineWidth);
     transition-delay: 0s;
 }
@@ -225,19 +230,19 @@
     opacity: 1;
 }
 
-.home .leftNav:hover .bottom {
+.home .leftNav:focus .bottom {
     opacity: 1;
 }
 
-.home .leftNav:hover .bottom .about .navItem>* {
+.home .leftNav:focus .bottom .about .navItem>* {
     opacity: 1;
 }
 
-.home .leftNav:hover .bottom .about .navItem>a {
+.home .leftNav:focus .bottom .about .navItem>a {
     font-size: 16px;
 }
 
-.home .leftNav:hover .bottom .about .navItem .icon {
+.home .leftNav:focus .bottom .about .navItem .icon {
     opacity: 1;
 }