style: 样式调整

ZvonimirSun · Sep 2, 2024 · c8ae3ca · c8ae3ca
1 parent 5fb4576
commit c8ae3ca
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 77 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -186,22 +186,21 @@ function fullScreenListener(e: KeyboardEvent) {
 .main {
   height: 100%;
   width: 100%;
-  font-size: 1.4rem;
   overflow: hidden;
 
   &-header {
     padding: 1.6rem 0 .8rem;
     text-align: center;
-    height: 8.4rem;
+    height: unset;
     line-height: unset;
 
     &.in-tool {
       padding: .8rem 0 0;
       height: 5.8rem;
 
       .header {
-        font-size: 2rem;
-        line-height: 2.8rem;
+        font-size: var(--el-font-size-large);
+        line-height: 1.5;
       }
 
       .desc {
@@ -210,20 +209,18 @@ function fullScreenListener(e: KeyboardEvent) {
     }
 
     .header {
-      line-height: 3.2rem;
-      font-size: 2.4rem;
-      font-weight: 600;
+      line-height: 1.7;
+      font-size: var(--el-font-size-extra-large);
+      font-weight: 700;
 
       a {
         color: var(--el-text-color-primary) !important;
       }
     }
 
     .desc {
-      height: 2.2rem;
-      font-size: 1.4rem;
-      line-height: 2.2rem;
-      margin-top: .8rem;
+      font-size: var(--el-font-size-base);
+      line-height: 1.3;
       color: var(--el-text-color-secondary);
       display: flex;
       justify-content: center;
@@ -239,7 +236,7 @@ function fullScreenListener(e: KeyboardEvent) {
   &-content {
     width: 100%;
     margin: 0 auto;
-    padding: 0 1.6rem 1.6rem;
+    padding: 0 1.6rem 0;
     overflow-y: auto;
     flex: 1;
 
@@ -249,8 +246,8 @@ function fullScreenListener(e: KeyboardEvent) {
   }
 
   &-footer {
-    font-size: 1.4rem;
-    line-height: 2.2rem;
+    font-size: var(--el-font-size-base);
+    line-height: 1.5;
     padding: 0.8rem 0;
 
     height: 6rem;

diff --git a/src/components/container.vue b/src/components/container.vue
@@ -62,9 +62,8 @@ function fullScreen() {
       display: inline-flex;
       align-items: center;
 
-      font-size: 1.6rem;
-      font-weight: 700;
-      line-height: 2.4rem;
+      font-size: var(--el-font-size-base);
+      line-height: 1.5;
 
       color: var(--el-color-white);
       background-color: var(--el-color-primary);

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -71,31 +71,25 @@ onMounted(() => {
             :target="(settings.openInNewTab || isExternalLink(tool.link)) ? '_blank' : ''"
             :to="isExternalLink(tool.link) ? (`/redirect?url=${tool.link}`) : (tool.link || '')"
           >
-            <el-tooltip
-              placement="top"
-              :show-after="200"
-              :content="tool.name"
+            <div
+              class="tool"
+              :class="{ toolCollected: isFav(tool.name) }"
             >
-              <div
-                class="tool"
-                :class="{ toolCollected: isFav(tool.name) }"
+              <span class="toolName">{{ tool.name }}</span>
+              <span
+                v-if="isFav(tool.name)"
+                class="fav collected"
+                @click.prevent="updateFav({ name: tool.name, link: tool.link || '', add: false })"
+              ><span class="i-icon-park-solid-star" /></span>
+              <span
+                v-else
+                class="fav"
+                @click.prevent="updateFav({ name: tool.name, link: tool.link || '', add: true })"
               >
-                <span class="toolName">{{ tool.name }}</span>
-                <span
-                  v-if="isFav(tool.name)"
-                  class="fav collected"
-                  @click.prevent="updateFav({ name: tool.name, link: tool.link || '', add: false })"
-                ><span class="i-icon-park-solid-star" /></span>
-                <span
-                  v-else
-                  class="fav"
-                  @click.prevent="updateFav({ name: tool.name, link: tool.link || '', add: true })"
-                >
-                  <span class="nonHover"><span class="i-icon-park-outline-star" /></span>
-                  <span class="hovered"><span class="i-icon-park-solid-star" /></span>
-                </span>
-              </div>
-            </el-tooltip>
+                <span class="nonHover"><span class="i-icon-park-outline-star" /></span>
+                <span class="hovered"><span class="i-icon-park-solid-star" /></span>
+              </span>
+            </div>
           </router-link>
         </el-col>
       </el-row>
@@ -106,9 +100,10 @@ onMounted(() => {
 <style scoped lang="scss">
 .home-page {
   width: 100%;
+  max-width: 120rem;
   height: 100%;
   overflow: auto;
-  padding: 1.6rem;
+  padding: 0 1.6rem;
 }
 
 .search-wrapper {
@@ -160,9 +155,8 @@ onMounted(() => {
     display: inline-flex;
     align-items: center;
 
-    font-size: 1.6rem;
-    font-weight: 700;
-    line-height: 2.4rem;
+    font-size: var(--el-font-size-medium);
+    line-height: 1.5;
 
     color: var(--el-color-white);
     background-color: var(--el-color-primary);
@@ -185,9 +179,8 @@ onMounted(() => {
 
 .tool {
   color: var(--el-text-color-primary);
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-  font-weight: 600;
+  font-size: var(--el-font-size-medium);
+  line-height: 1.5;
   border-radius: var(--el-border-radius-middle);
   margin: .8rem 0;
   padding: .8rem 1.6rem;
@@ -226,7 +219,6 @@ onMounted(() => {
     &:hover {
       background-color: var(--el-color-primary);
       color: var(--el-color-white);
-      //transform: scale3d(1.1, 1.1, 1.1);
       padding-right: 1.5rem * 2;
 
       .fav {

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -47,9 +47,9 @@ html, body, #app {
   font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  @apply font-main;
-  font-size: 1.4rem;
-  line-height: 2.2rem;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-size: var(--el-font-size-base);
+  line-height: var(--el-font-line-height-primary);
   color: var(--el-text-color-primary);
 }
 

diff --git a/src/tools/lodCalculator/lodCalculator.vue b/src/tools/lodCalculator/lodCalculator.vue
@@ -129,7 +129,7 @@ function generate() {
           <el-input v-model="formInfo.pixelSize" @input="changePixelSize" />
         </el-form-item>
         <el-form-item label="切片层级数" class="form-item">
-          <el-input-number v-model.number="lodInfo.count" :min="0" :step="1" @change="changeCount" />
+          <el-input-number v-model.number="lodInfo.count" controls-position="right" :min="0" :step="1" @change="changeCount" />
         </el-form-item>
         <el-form-item label="ScaleDomination" class="form-item">
           <el-input v-model="formInfo.scaleDomination" @input="changeScaleDomination" />
@@ -138,10 +138,10 @@ function generate() {
           <el-input v-model="formInfo.resolution" @input="changeResolution" />
         </el-form-item>
         <el-form-item label="当前层级" class="form-item">
-          <el-input-number v-model.number="lodInfo.lod" :min="0" :max="lodInfo.count" :step="1" />
+          <el-input-number v-model.number="lodInfo.lod" controls-position="right" :min="0" :max="lodInfo.count" :step="1" />
         </el-form-item>
         <el-form-item class="form-item">
-          <el-button @click="generate">
+          <el-button type="primary" @click="generate">
             生成
           </el-button>
         </el-form-item>
@@ -163,4 +163,16 @@ function generate() {
   width: calc(calc(100% - 0.5rem * 2 - 1.6rem) / 3);
   margin: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .form-item.el-form-item  {
+    width: calc(calc(100% - 0.5rem - 1.6rem) / 2);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .form-item.el-form-item  {
+    width: 100%
+  }
+}
 </style>
diff --git a/uno.config.ts b/uno.config.ts
@@ -31,29 +31,6 @@ export default defineConfig({
         return axios.get(url).then(res => res.data)
       },
       fonts: {
-        main: [
-          {
-            name: 'Lora',
-            weights: ['400', '700'],
-            italic: true,
-          },
-          {
-            name: 'Noto Serif SC',
-            weights: ['300', '400', '700'],
-          },
-          {
-            name: 'PingFang SC',
-            provider: 'none',
-          },
-          {
-            name: 'Microsoft YaHei',
-            provider: 'none',
-          },
-          {
-            name: 'sans-serif',
-            provider: 'none',
-          },
-        ],
         mono: 'JetBrains Mono:300,400,700',
         inter: 'Inter:500,700',
       },