feat: 官网2.0样式优化

package-lock.json

@@ -43,6 +43,7 @@
         "xlsx": "~0.16.1"
       },
       "devDependencies": {
+        "@iconify/vue2": "^2.1.0",
         "@vue/cli-plugin-babel": "~4.5.15",
         "@vue/cli-plugin-eslint": "~4.5.15",
         "@vue/cli-plugin-router": "~4.5.15",
@@ -2004,6 +2005,27 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "node_modules/@iconify/vue2": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/vue2/-/vue2-2.1.0.tgz",
+      "integrity": "sha512-+R4T9EqrUecMKh/tdiscju/mJS+HCzHFFuJ9XnNcFLaIj3lBOdh8RJolPY9n4k7XRG5V/tY16Lzx+mv+vOmjhA==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": "2.x"
+      }
+    },
     "node_modules/@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",

package.json

@@ -43,6 +43,7 @@
     "xlsx": "~0.16.1"
   },
   "devDependencies": {
+    "@iconify/vue2": "^2.1.0",
     "@vue/cli-plugin-babel": "~4.5.15",
     "@vue/cli-plugin-eslint": "~4.5.15",
     "@vue/cli-plugin-router": "~4.5.15",

src/components/footer.vue

@@ -136,7 +136,7 @@
         <div class="footer-content-right flex flex-1 flex-col">
           <div
             class="flex flex-col lg:flex-row lg:justify-between lg:mb-20 mb-7.5">
-            <div class="border-b border-gray-700 border-solid lg:border-b-0">
+            <div class="">
               <div
                 class="flex justify-between items-center font-medium text-base leading-10 lg:text-lg lg:leading-normal">
                 产品

src/styles/index.scss

@@ -14,7 +14,24 @@ $secondary-color: #00205a;
 
   --secondary-color: #{$secondary-color};
   --secondary-text-color: #{darken($secondary-color, 5%)};
-  --secondary-color-lighter: #{lighten($secondary-color, 10%)};
+  --secondary-color-light1: #{mix(white, $secondary-color, 10%)};
+  --secondary-color-light2: #{mix(white, $secondary-color, 20%)};
+  --secondary-color-light3: #{mix(white, $secondary-color, 30%)};
+  --secondary-color-light4: #{mix(white, $secondary-color, 40%)};
+  --secondary-color-light5: #{mix(white, $secondary-color, 50%)};
+  --secondary-color-light6: #{mix(white, $secondary-color, 60%)};
+  --secondary-color-light7: #{mix(white, $secondary-color, 70%)};
+  --secondary-color-light8: #{mix(white, $secondary-color, 80%)};
+  --secondary-color-light9: #{mix(white, $secondary-color, 90%)};
+  --secondary-color-dark1: #{mix(black, $secondary-color, 10%)};
+  --secondary-color-dark2: #{mix(black, $secondary-color, 20%)};
+  --secondary-color-dark3: #{mix(black, $secondary-color, 30%)};
+  --secondary-color-dark4: #{mix(black, $secondary-color, 40%)};
+  --secondary-color-dark5: #{mix(black, $secondary-color, 50%)};
+  --secondary-color-dark6: #{mix(black, $secondary-color, 60%)};
+  --secondary-color-dark7: #{mix(black, $secondary-color, 70%)};
+  --secondary-color-dark8: #{mix(black, $secondary-color, 80%)};
+  --secondary-color-dark9: #{mix(black, $secondary-color, 90%)};
 
   /* Element UI 主题色 - 基于 $primary-color 生成 */
   --el-color-primary: #{$primary-color};

src/views/help/helpPage.vue

@@ -67,7 +67,7 @@ export default {
   border: none;
   transition: all 0.2s ease;
   &:hover {
-    background-color: var(--secondary-color-lighter);
+    background-color: var(--secondary-color-light1);
   }
 }
 

tailwind.config.js

@@ -4,6 +4,25 @@ module.exports = {
   theme: {
     extend: {
       width: {
+        104: '26rem',
+        112: '28rem',
+        120: '30rem',
+        128: '32rem',
+        144: '36rem',
+        160: '40rem',
+        192: '48rem',
+        224: '56rem',
+        256: '64rem',
+        288: '72rem',
+        320: '80rem',
+        384: '96rem',
+        512: '128rem',
+        576: '144rem',
+        640: '160rem',
+      },
+      height: {
+        104: '26rem',
+        112: '28rem',
         120: '30rem',
         128: '32rem',
         144: '36rem',
@@ -33,9 +52,16 @@ module.exports = {
         68: '68px',
       },
       marginTop: {
-        30:'120px'
+        30: '120px'
       },
     },
   },
+  variants: {
+    extend: {
+      width: ['hover'],
+      height: ['hover'],
+
+    }
+  },
   plugins: [],
 }