移动📱端适配😊

Class-Widgets · Jan 4, 2025 · d0fc735 · d0fc735
1 parent 182d5d6
commit d0fc735
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 7 deletions.
diff --git a/contact.html b/contact.html
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="./css/contact.css">
     <link rel="stylesheet" href="./css/docs.css">
     <link rel="stylesheet" href="./assets/icon/FluentSystemIcons-Resizable.css">
+    <link rel="stylesheet" media="(max-width: 1200px)" href="./css/common_mobile.css">
 </head>
 <body>
     <!-- header -->

diff --git a/css/contact.css b/css/contact.css
diff --git a/css/docs.css b/css/docs.css
diff --git a/css/index.css b/css/index.css
diff --git a/css/index.css.map b/css/index.css.map
diff --git a/docs-dev.html b/docs-dev.html
@@ -11,6 +11,7 @@
     <meta name="keywords" content="Class Widgets, 桌面课表, 课程表, 软件, 应用, 教学, 教学, 教学工具, 高效, 实用"> <!-- 网站关键字 -->
     <link rel="stylesheet" href="./css/docs.css">
     <link rel="stylesheet" href="./assets/icon/FluentSystemIcons-Resizable.css">
+    <link rel="stylesheet" media="(max-width: 1200px)" href="./css/common_mobile.css">
 </head>
 <body>
     <!-- header -->

diff --git a/docs-user.html b/docs-user.html
@@ -11,6 +11,7 @@
     <meta name="keywords" content="Class Widgets, 桌面课表, 课程表, 软件, 应用, 教学, 教学, 教学工具, 高效, 实用"> <!-- 网站关键字 -->
     <link rel="stylesheet" href="./css/docs.css">
     <link rel="stylesheet" href="./assets/icon/FluentSystemIcons-Resizable.css">
+    <link rel="stylesheet" media="(max-width: 1200px)" href="./css/common_mobile.css">
 </head>
 <body>
     <!-- header -->

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <meta name="description" content="欢迎来到 Class Widgets 官方网站 | 全新桌面课程表，与未来形态的课程表问好"> <!-- 网站描述 -->
     <meta name="keywords" content="Class Widgets, 桌面课表, 课程表, 软件, 应用, 教学, 教学, 教学工具, 高效, 实用"> <!-- 网站关键字 -->
     <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" media="(max-width: 1200px)" href="./css/common_mobile.css">
     <link rel="stylesheet" href="./assets/icon/FluentSystemIcons-Resizable.css">
 </head>
 <body>
@@ -28,8 +29,10 @@ <h2>Class Widgets</h2>
                         <i class="icon-ic_fluent_arrow_download_20_filled"></i>
                         现在下载
                     </a>
-                    <a href="docs-user.html" class="link">使用文档</a>
-                    <a href="contact.html" class="link">社区</a>
+                    <div class="links">
+                        <a href="docs-user.html" class="link">使用文档</a>
+                        <a href="contact.html" class="link">社区</a>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/less/common.less b/less/common.less
@@ -28,6 +28,8 @@
 
 // 自定义链接
 a {
+  word-break: keep-all;
+
   i { // 图标
     margin-top: 2px;
     display: inline-block;
@@ -212,7 +214,7 @@ header {
 footer {
   background-color: #161719;
   width: 100%;
-  height: 225px;
+  height: 100%;
 
   .wrapper {
     display: flex;
@@ -233,6 +235,7 @@ footer {
     .desc {
       display: flex;
       gap: 16px;
+      flex-wrap: wrap;
 
       a {
         font-size: 13px;

diff --git a/less/common_mobile.less b/less/common_mobile.less
@@ -0,0 +1,117 @@
+// out: ../css/
+@font-face {
+  font-family: "FluentSystemIcons-Resizable";
+  src: url("../assets/icon/FluentSystemIcons-Resizable.ttf");
+}
+
+// var
+@theme-color: #25d9e6;
+
+@keyframes up-in {
+  0% {
+    transform: translate(0, -25%);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+.wrapper {
+  width: 95%;
+}
+
+header {
+  .left, .right{
+    gap: 12px;
+  }
+
+  .right img {
+    display: none;
+  }
+}
+
+.tabs {
+  margin: 0;
+
+  &:hover {
+    position: absolute;
+    left: 160px + 5vw;
+    margin-left: 12px;
+    padding: 12px 12px;
+    display: flex;
+    width: 150px;
+    flex-direction: column;
+    justify-content: flex-start;
+    transform: translateY(50%-12px);
+    z-index: 1;
+
+    &::before {
+      transform-origin: center;
+      transform: translateY(25%) rotate(-90deg);
+      margin-bottom: 16px;
+    }
+
+    &::after {  // 背景
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1; /* 伪元素在内容下方 */
+      background: rgba(55, 58, 63);
+      border-radius: 8px;
+      animation: opacity-in 0.25s;
+    }
+
+    .tab {
+      display: inline-block;
+      cursor: default;
+      position: relative;
+      padding: 8px 12px;
+      margin: 0;
+      font-size: 17px;
+      animation: up-in 0.25s;
+      animation-fill-mode: forwards;
+
+      &.active {
+        background-color: rgba(255, 255, 255, 0.12);
+        border-radius: 5px;
+
+        &::after {
+          left: 0;
+          top: 50%;     /* 将伪元素水平居中 */
+          transform: translateY(-50%); /* 使伪元素在水平居中 */
+          width: 4px;
+          height: 18px;
+          opacity: 0;
+
+          background-color: @theme-color;
+          border-radius: 2px;
+
+          animation: opacity-in 0.25s;
+          animation-fill-mode: forwards;
+          animation-delay: 0.25s;
+        }
+      }
+    }
+  }
+
+  &::before {
+    content: "\e429"; // 图标（链接）
+    display: block;
+    width: 24px;
+    font-family: FluentSystemIcons-Resizable; /* 设置图标字体 */
+    font-size: 24px;
+    vertical-align: middle;
+    transition: all 0.25s;
+  }
+
+
+  .tab {
+    display: none;
+    opacity: 0;
+  }
+}
diff --git a/less/index.less b/less/index.less
@@ -66,7 +66,13 @@
     .bottom {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: 24px;
+
+      .links {
+        display: flex;
+        gap: 24px;
+      }
     }
   }
 }