Merge pull request #113 from ZvonimirSun/feature-layoutNew

style(all): 样式调整
ZvonimirSun · Sep 10, 2021 · f4dfac1 · f4dfac1
2 parents c245d79 + cdd58e6
commit f4dfac1
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint --cache --fix src/**/*.{js,ts,tsx,vue}"
   },
   "dependencies": {
-    "@ckpack/vue-color": "^1.0.1",
+    "@ckpack/vue-color": "^0.0.3",
     "@highlightjs/vue-plugin": "^2.0.1",
     "@icon-park/vue-next": "^1.3.5",
     "ali-oss": "^6.15.2",

diff --git a/src/App.vue b/src/App.vue
@@ -111,15 +111,15 @@ export default defineComponent({
   }
 
   &-header {
-    padding: 3.2rem 0 2.4rem;
+    padding: 1.6rem 0 .8rem;
     text-align: center;
-    height: 13.4rem;
+    height: 8.4rem;
     line-height: unset;
 
     .header {
-      height: 4.6rem;
-      line-height: 4.6rem;
-      font-size: 3.8rem;
+      height: 3.2rem;
+      line-height: 3.2rem;
+      font-size: 2.4rem;
       color: #333333;
       font-weight: 600;
 
@@ -132,16 +132,16 @@ export default defineComponent({
       height: 2.2rem;
       font-size: 1.4rem;
       line-height: 2.2rem;
-      margin-top: 1.2rem;
+      margin-top: .8rem;
       color: #999999;
     }
   }
 
   &-content {
-    max-width: 120rem;
+    max-width: 180rem;
     width: 100%;
     margin: 0 auto;
-    padding: 0 2rem 1.6rem;
+    padding: 0 1.6rem 1.6rem;
     overflow-y: auto;
 
     &.layout-wide {
@@ -150,8 +150,16 @@ export default defineComponent({
   }
 
   &-footer {
-    height: 7rem;
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    padding: 0.8rem 0;
+
+    height: 6rem;
     text-align: center;
+
+    * {
+      height: 2.2rem;
+    }
   }
 }
 </style>
diff --git a/src/directives/span.js b/src/directives/span.js
@@ -0,0 +1,22 @@
+const breakPoint = {
+  xs: '480px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px',
+  xxl: '1600px'
+}
+
+export const spanDirective = {
+  mounted (el, binding) {
+    console.log(el)
+    console.log(binding)
+    console.log(breakPoint)
+  }
+}
+
+export default {
+  install: (Vue) => {
+    Vue.directive('span', spanDirective)
+  }
+}
diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,7 @@ import App from '@/App.vue'
 import router from '@/router'
 import store from '@/store'
 import axios from '@/plugins/Axios'
+import span from '@/directives/span'
 
 const app = createApp(App)
 
@@ -15,5 +16,5 @@ message.config({
 app.config.globalProperties.$axios = axios
 app.config.globalProperties.$msg = message
 
-app.use(store).use(router)
+app.use(store).use(router).use(span)
 app.mount('#app')
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,9 +1,15 @@
+:root {
+  --main-bg-color: #f4f8fb;
+  --global-font-size: 62.5%;
+  --global-mobile-font-size: 45%;
+}
+
 /*字号统一控制*/
 html {
-  font-size: 62.5%;
+  font-size: var(--global-font-size);
 
-  @media screen and (max-width: 426px) {
-    font-size: 45%;
+  @media screen and (max-width: 480px) {
+    font-size: var(--global-mobile-font-size);
   }
 }
 
@@ -48,7 +54,7 @@ html, body, #app {
   font-size: 1.4rem;
   line-height: 2.2rem;
   color: #333333;
-  background: #f4f8fb;
+  background: var(--main-bg-color);
 
   pre,
   code, kbd, samp {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -8,16 +8,14 @@
     </Col>
   </Row>
   <template v-for="(item,index) in tools" :key="'type'+ index">
-    <Row :gutter="{ xs: 8, sm: 16, md: 24}">
-      <Col :span="24">
-        <Divider orientation="left">
-          <span class="typeName">
-            <iconpark-icon class="i-icon" :name="item.icon" color="#fff" v-if="item.icon"/>
-            <div>{{ item.type }}</div>
-          </span>
-        </Divider>
+    <Row :gutter="{ xs: 8, sm: 16}">
+      <Col :span="24" class="typeNameCol">
+        <div class="typeName">
+          <iconpark-icon class="i-icon" :name="item.icon" color="#fff" v-if="item.icon"/>
+          <div>{{ item.type }}</div>
+        </div>
       </Col>
-      <Col :xs="12" :sm="12" :md="8" :lg="6" v-for="(tool,i) in item.children" :key="'tool'+i">
+      <Col :xs="12" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" v-for="(tool,i) in item.children" :key="'tool'+i">
         <router-link
           :target="(settings.openInNewTab || /^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+)+$/.test(tool.link))?'_blank':''"
           :to="(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+)+$/.test(tool.link))?('/redirect?url='+tool.link):(tool.link||'')">
@@ -35,13 +33,11 @@
     </Row>
   </template>
   <Row :gutter="{ xs: 8, sm: 16, md: 24}">
-    <Col :span="24">
-      <Divider orientation="left">
-          <span class="typeName">
-            <notes theme="outline"/>
-            <div>公告</div>
-          </span>
-      </Divider>
+    <Col :span="24" class="typeNameCol">
+      <div class="typeName">
+        <notes theme="outline"/>
+        <div>公告</div>
+      </div>
     </Col>
     <Col :span="24">
       <div class="announcement">
@@ -65,7 +61,7 @@
 
 <script>
 import { Search, Notes, Star } from '@icon-park/vue-next'
-import { Row, Col, Divider, Typography } from 'ant-design-vue'
+import { Row, Col, Typography } from 'ant-design-vue'
 import tools from '@/views/tools.json'
 import legends from '@/views/legends.json'
 import { createNamespacedHelpers } from 'vuex'
@@ -77,7 +73,7 @@ const { mapState: settingsMapState } = createNamespacedHelpers('settings')
 
 export default {
   name: '首页',
-  components: { Star, Row, Col, Divider, Paragraph, Typography, Search, Notes },
+  components: { Star, Row, Col, Paragraph, Typography, Search, Notes },
   computed: {
     tools () {
       let tmp
@@ -165,30 +161,35 @@ export default {
   border-radius: .8rem;
 
   &:not(:first-child) {
-    margin-top: 3.5rem;
-  }
-
-  &:not(.noName) {
-    .ant-col:first-child {
-      margin-top: -3.5rem;
-    }
+    margin-top: 3.3rem;
   }
 }
 
-.typeName {
-  font-size: 1.8rem;
-  font-weight: 700;
-  display: inline-flex;
-  align-items: center;
-  background-color: #16b0f6;
-  padding: .48rem 1.28rem;
-  color: #fff;
-  box-shadow: 0 0.8rem 1rem rgb(36 159 253 / 30%);
-  border-radius: .8rem;
+.typeNameCol {
+  padding: .8rem;
+  margin-top: -2.5rem;
 
-  .i-icon {
-    font-size: 2.4rem;
-    margin-right: .5rem;
+  .typeName {
+    margin-left: 3rem;
+    padding: .5rem 1.6rem;
+
+    height: 3.2rem;
+    display: inline-flex;
+    align-items: center;
+
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.4rem;
+
+    color: #fff;
+    background-color: #16b0f6;
+    box-shadow: 0 0.8rem 1rem #16B0F64D;
+    border-radius: .8rem;
+
+    .i-icon {
+      font-size: 2.4rem;
+      margin-right: .5rem;
+    }
   }
 }