Bläddra i källkod

feat: 引入bootstrap icons

ljc 4 månader sedan
förälder
incheckning
98c664e666

+ 1 - 0
package.json

@@ -21,6 +21,7 @@
     "@vue/runtime-dom": "^3.5.24",
     "@vueuse/core": "^9.13.0",
     "axios": "^0.27.2",
+    "bootstrap-icons": "^1.13.1",
     "clipboard": "^2.0.10",
     "codemirror": "^5.65.9",
     "core-js": "^3.6.5",

+ 3 - 1
src/main.ts

@@ -8,13 +8,15 @@ import { registerElIcons } from '@/plugins/ElIcons'
 // svg-icons注册导入
 // @ts-ignore: virtual module injected by svg-icons plugin
 // UI框架 element-plus
-import '@/styles/self.scss'
+import '@/styles/element/index.scss'
 import ElementPlus from 'element-plus'
 // import 'element-plus/dist/index.css'
 // 引入暗黑模式 element-plus 2.2 内置暗黑模式
 // import 'element-plus/theme-chalk/dark/css-vars.css'
 // 自定义暗黑模式
 // import '@/styles/cwg_common.scss'
+// bootstrap icon
+import "bootstrap-icons/font/bootstrap-icons.css";
 // 引入阿里图标库
 import '@/assets/iconfont/iconfont.scss'
 import '@/assets/iconfont/iconfont.js'

+ 1 - 0
src/styles/bootstrap.scss

@@ -0,0 +1 @@
+@import "bootstrap-icons/font/bootstrap-icons.scss";

+ 7 - 14
src/styles/cwg_common.scss

@@ -1,4 +1,6 @@
-$--color-primary: #EB3F57;
+:root{
+  --el-color-primary: #EB3F57;
+}
 
 //全局样式
 html, body {
@@ -1058,24 +1060,19 @@ a {
 }
 
 .el-button--primary:focus,.el-button--primary:hover {
-  background: #ef6579;
+  background-color: #ef6579;
   border-color: #ef6579;
   color: #fff
 }
 
 .el-button--primary.is-active,.el-button--primary:active {
-  background: #d4394e;
+  background-color: #d4394e;
   border-color: #d4394e;
   color: #fff
 }
-.el-button:focus,.el-button:hover {
-  color: #eb3f57;
-  border-color: #f9c5cd;
-  background-color: #fdecee
-}
 
 .el-button:active {
-  color: #d4394e;
+  color: #fff;
   border-color: #d4394e;
   outline: 0
 }
@@ -1097,7 +1094,7 @@ a {
 .el-select-dropdown__item{
   padding: 0 32px 0 20px;
   &.is-selected {
-    color: #eb3f57;
+    //color: #eb3f57;
     font-weight: 700;
   }
 }
@@ -1131,7 +1128,3 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
-:root{
-  --el-checkbox-checked-bg-color:#EB3F57;
-
-}

+ 6 - 0
src/styles/self.scss → src/styles/element/index.scss

@@ -4,6 +4,12 @@
     'checked-bg-color': #EB3F57,
     'checked-input-border-color':#eb3f57,
     'input-border-color-hover':#eb3f57
+  ),
+  $common-component-size: (
+  'default': 40px,
+  ),
+  $select-option:(
+  'selected-text-color':#eb3f57
   )
 )
 ;

+ 3 - 1
src/views/userless/sigin/SignUp.vue

@@ -844,13 +844,15 @@
 
         .el-checkbox {
           position: absolute;
-          top: 0;
+          top: 3px;
           left: 0;
+          align-items: flex-start;
         }
 
         p {
           padding-left: 30px;
           text-align: left;
+          line-height: 20px;
         }
       }
 

+ 4 - 10
src/views/userless/sigin/User.vue

@@ -37,23 +37,17 @@
                   href="https://www.facebook.com/people/CWG-Markets-Promotions/100064027417838/"
                   target="_blank"
                 >
-                  <el-icon>
-                    <Platform />
-                  </el-icon>
+                  <i class="bi bi-facebook"></i>
                 </a>
               </li>
               <li>
                 <a href="https://www.linkedin.com/company/cwg-markets-ltd/" target="_blank">
-                  <el-icon>
-                    <Link />
-                  </el-icon>
+                  <i class="bi bi-linkedin"></i>
                 </a>
               </li>
               <li>
                 <a href="https://www.instagram.com/cwgmarkets/" target="_blank">
-                  <el-icon>
-                    <Camera />
-                  </el-icon>
+                  <i class="bi bi-instagram"></i>
                 </a>
               </li>
             </ul>
@@ -106,7 +100,7 @@
 import { ref, computed, onMounted, inject } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ArrowDown, Platform, Link, Camera } from '@element-plus/icons-vue'
+import { ArrowDown } from '@element-plus/icons-vue'
 import axios from 'axios'
 import Loop from './Loop.vue'
 import Service from '@/service/login'