diff --git a/package-lock.json b/package-lock.json
index 48bae61..c0ea32c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "pako": "^2.0.2",
         "popper.js": "^1.16.0",
         "pygmentize-bundled": "^2.3.0",
+        "qs": "^6.11.2",
         "swiper": "^6.0.4",
         "vue": "^2.5.2",
         "vue-awesome-swiper": "^3.1.3",
@@ -2352,7 +2353,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -6720,8 +6720,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -6754,7 +6753,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6937,7 +6935,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -6994,7 +6991,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -9414,8 +9410,7 @@
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "node_modules/object-is": {
       "version": "1.1.5",
@@ -13109,6 +13104,17 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
@@ -14238,7 +14244,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -19861,7 +19866,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -23529,8 +23533,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
       "version": "1.1.5",
@@ -23560,7 +23563,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -23711,7 +23713,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -23755,8 +23756,7 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
@@ -25747,8 +25747,7 @@
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "object-is": {
       "version": "1.1.5",
@@ -28807,6 +28806,14 @@
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
       "dev": true
     },
+    "qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
@@ -29755,7 +29762,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
diff --git a/package.json b/package.json
index c3c2265..835ae3e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "pako": "^2.0.2",
     "popper.js": "^1.16.0",
     "pygmentize-bundled": "^2.3.0",
+    "qs": "^6.11.2",
     "swiper": "^6.0.4",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
diff --git a/src/assets/scss/base/_common.scss b/src/assets/scss/base/_common.scss
index c51294e..c865a39 100644
--- a/src/assets/scss/base/_common.scss
+++ b/src/assets/scss/base/_common.scss
@@ -238,11 +238,11 @@ $basew: 24;
 
 @while $i <=$basew {
     .w-#{$i}\/#{$basew} {
-        width: #{$i/$basew * 100}#{"%"};
+        width: #{calc($i/$basew) * 100}#{"%"};
     }
 
     .h-#{$i}\/#{$basew} {
-        height: #{$i/$basew * 100}#{"%"};
+        height: #{calc($i/$basew) * 100}#{"%"};
     }
 
     $i: $i + 1;
diff --git a/src/views/college/detail.vue b/src/views/college/detail.vue
index 179f464..29562a1 100644
--- a/src/views/college/detail.vue
+++ b/src/views/college/detail.vue
@@ -78,7 +78,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ {
+::v-deep {
     .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
         color: #606266;
     }
diff --git a/src/views/contract/index.vue b/src/views/contract/index.vue
index f5aade2..6e17741 100644
--- a/src/views/contract/index.vue
+++ b/src/views/contract/index.vue
@@ -379,7 +379,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    .justify-content-between >>> .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{
+    .justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{
         color:white !important
     }
 </style>
diff --git a/src/views/forgotPwd/index.vue b/src/views/forgotPwd/index.vue
index a69c586..8036ccc 100644
--- a/src/views/forgotPwd/index.vue
+++ b/src/views/forgotPwd/index.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .el-input__inner,.form-control{
+::v-deep .el-input__inner,.form-control{
     padding-top:.375rem;
     padding-bottom:.375rem;
     height: 45px !important;
diff --git a/src/views/notice/detail.vue b/src/views/notice/detail.vue
index eafd238..6e895fd 100644
--- a/src/views/notice/detail.vue
+++ b/src/views/notice/detail.vue
@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ {
+::v-deep {
     .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
         color: #606266;
     }
diff --git a/src/views/option/index.vue b/src/views/option/index.vue
index 9cf93df..d0aca0f 100644
--- a/src/views/option/index.vue
+++ b/src/views/option/index.vue
@@ -287,7 +287,7 @@ export default {
   border: none;
 }
 
-/deep/ .el-collapse-item:last-child {
+::v-deep .el-collapse-item:last-child {
   .el-collapse-item__header {
     border-bottom: 0;
   }
diff --git a/src/views/otc/ad.vue b/src/views/otc/ad.vue
index f074ea6..e2cee9a 100644
--- a/src/views/otc/ad.vue
+++ b/src/views/otc/ad.vue
@@ -165,7 +165,7 @@ export default {
   justify-content: center;
   background: linear-gradient(to right, #6d9ef9, #1f5df4);
 }
-/deep/ .el-dialog {
+::v-deep .el-dialog {
   background-color: #222e3d;
   color: #fff;
   &__title {
diff --git a/src/views/otc/index.vue b/src/views/otc/index.vue
index ad2ba8c..435bb8c 100644
--- a/src/views/otc/index.vue
+++ b/src/views/otc/index.vue
@@ -326,7 +326,7 @@ export default {
   justify-content: center;
   background: linear-gradient(to right, #6d9ef9, #1f5df4);
 }
-/deep/ .el-dialog {
+::v-deep .el-dialog {
   background-color: #222e3d;
   color: #fff;
   &__title {
diff --git a/src/views/otc/order.vue b/src/views/otc/order.vue
index 8bb3f80..55bbae3 100644
--- a/src/views/otc/order.vue
+++ b/src/views/otc/order.vue
@@ -172,7 +172,7 @@ export default {
   justify-content: center;
   background: linear-gradient(to right, #6d9ef9, #1f5df4);
 }
-/deep/ .el-dialog {
+::v-deep .el-dialog {
   background-color: #222e3d;
   color: #fff;
   &__title {
diff --git a/src/views/purchase/index.vue b/src/views/purchase/index.vue
index bf9399e..2b92224 100644
--- a/src/views/purchase/index.vue
+++ b/src/views/purchase/index.vue
@@ -461,7 +461,7 @@ export default {
 .table tr:hover{
     background: #e9e9e9 !important;
 }
-/deep/ {
+::v-deep {
   .el-step__icon {
     background: #222e3d;
   }
diff --git a/src/views/wallet/address.vue b/src/views/wallet/address.vue
index 46269e3..c586962 100644
--- a/src/views/wallet/address.vue
+++ b/src/views/wallet/address.vue
@@ -392,7 +392,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ {
+::v-deep {
   .el-collapse {
     border-top-color: #4e4e5d;
     border-bottom-color: #4e4e5d;
diff --git a/yarn.lock b/yarn.lock
index 8908157..b7a9a1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7264,6 +7264,13 @@
   "resolved" "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
   "version" "1.5.1"
 
+"qs@^6.11.2":
+  "integrity" "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA=="
+  "resolved" "https://registry.npmmirror.com/qs/-/qs-6.11.2.tgz"
+  "version" "6.11.2"
+  dependencies:
+    "side-channel" "^1.0.4"
+
 "qs@6.11.0":
   "integrity" "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q=="
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz"