svg展示

components.d.ts

@@ -49,7 +49,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SimilarPositions: typeof import('./src/components/Position/similarPositions.vue')['default']
-    SubmitPage: typeof import('./src/components/svg/submitPage.vue')['default']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     TextArea: typeof import('./src/components/FormUI/textArea/index.vue')['default']
     TextInput: typeof import('./src/components/FormUI/TextInput/index.vue')['default']
     VerificationCode: typeof import('./src/components/VerificationCode/index.vue')['default']

package.json

@@ -41,6 +41,7 @@
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.5",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vuetify": "^2.0.3"
   }
 }

src/assets/svg/vip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723002344509" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10427" id="mx_n_1723002344510" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200"><path d="M792.95488 557.44H723.38688v83.968h69.504a41.664 41.664 0 0 0 41.28-41.344v-1.28a41.664 41.664 0 0 0-41.28-41.28z" fill="#ffa500" p-id="10428"></path><path d="M1155.45088 118.528c-53.76 0-97.024 43.2-97.024 97.088 0 38.784 23.168 72.64 55.68 88.32A214.72 214.72 0 0 1 902.58688 481.024a215.104 215.104 0 0 1-214.784-214.784v-6.272a132.544 132.544 0 0 0 70.72-117.76C758.45888 69.12 699.06688 9.6 625.72288 9.6 552.50688 9.6 493.62688 69.696 493.62688 142.976c0 50.688 28.8 95.168 70.72 117.76v6.208c0.64 117.76-95.808 214.144-214.144 214.144a214.72 214.72 0 0 1-211.648-177.216c33.216-15.616 55.744-48.832 55.744-88.32 0-53.76-43.2-97.024-97.024-97.024a97.152 97.152 0 0 0-34.496 187.84l80.832 412.672c3.072-0.64 6.208-0.64 9.344-0.64 39.488 0 72.64 29.44 77.696 67.648h791.488a78.336 78.336 0 0 1 87.04-67.008l80.768-412.672a97.152 97.152 0 0 0-34.432-187.84zM501.75488 746.56H464.18688L383.41888 531.2h31.936l65.088 179.072L549.94688 531.2h32l-80.192 215.36z m140.288 4.416h-28.8V531.2h28.8v219.776z m218.496-150.912c0 37.568-30.72 67.648-67.584 67.648H723.38688v78.272h-33.216V531.2h102.72c37.568 0 67.584 30.72 67.584 67.584v1.28z m164.096 219.776l-398.272 0.64H228.09088v-0.64c-7.488 25.664-28.16 45.696-53.824 52.608l9.984 51.328c6.272 30.72 33.216 53.248 64.512 53.248h755.2c31.296 0 58.88-22.528 64.448-53.248l10.048-51.328a78.336 78.336 0 0 1-53.824-52.608z" fill="#ffa500" p-id="10429"></path></svg>

src/components/SvgIcon/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true" :style="{ width: size + 'px', height: size + 'px'}">
+    <use :href="`#icon-${name}`" />
+  </svg>
+</template>
+
+<script setup>
+defineOptions({ name: 'SvgIcon' })
+
+defineProps({
+  name: String,
+  size: {
+    type: [String, Number],
+    default: 30
+  }
+})
+</script>
+ 
+<style lang="scss" scoped>
+.svg-icon {
+  fill: currentColor;
+  vertical-align: middle;
+}
+</style>

src/layout/company/navBar.vue

@@ -24,13 +24,14 @@
             <div class="cursor-pointer" @click="router.push({ path: '/recruit/enterprise/memberCenter/myPoints' })">{{ $t('enterprise.account.accountBalances') }}：{{ enterpriseUserAccount?.balance || 0 }}元</div>
             <div class="ml-5 cursor-pointer" @click="router.push({ path: '/recruit/enterprise/memberCenter/myPoints' })">{{ $t('enterprise.account.remainingPoints') }}：{{ enterpriseUserAccount?.point || 0 }}点</div>
           </div>
-          <div class="line"></div>
-          
+          <div class="line mr-5"></div>
+          <svg-icon @click="handleToVip" name="vip" size="30" class="cursor-pointer"></svg-icon>
+
           <!-- 头像用户名 -->
           <div class="d-flex align-center" v-if="showBall">
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-5 pl-2 align-center cursor-pointer" v-bind="props">
+                <div class="d-flex ml-3 pl-2 align-center cursor-pointer" v-bind="props">
                   <v-avatar>
                     <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-img>
                   </v-avatar>
@@ -117,6 +118,10 @@ onMounted(() => {
   }
 })
 
+const handleToVip = () => {
+  router.push({ path: '/recruit/enterprise/memberCenter/myAccount' })
+}
+
 // const handleLogoClick = () => { router.push({ path: '/recruit/enterprise'}) }
 const handleLogoClick = () => { window.open('/') } // 点击logo
 

src/main.js

@@ -6,6 +6,7 @@
 
 // Plugins
 import { registerPlugins } from '@/plugins'
+import 'virtual:svg-icons-register'
 import '@/styles/index.scss'
 
 // import * as echarts from 'echarts'

src/plugins/curtain/components/message.vue

@@ -15,7 +15,7 @@
             :class="[icon]"
             class="ml-2 mr-2"
           ></span>
-          <component :is="componentMap[name]"></component>
+          <svg-icon :name="name" :size="iconFontSize"></svg-icon>
           <!-- 文字 -->
           <div class="font-size-18" :style="{color:color}">{{message}}</div>
         </div>
@@ -30,7 +30,6 @@
 <script setup>
 import { ref } from 'vue'
 defineOptions({name: 'curtain-message'})
-import SubmitPage from '@/components/svg/submitPage'
 
 defineProps({
   message: String, // 单条数据，也可以用list['']
@@ -60,10 +59,6 @@ defineProps({
   }
 })
 
-const componentMap = {
-  'SubmitPage': SubmitPage
-}
-
 const dialog = ref(true)
 
 </script>

src/views/headhunting/index.vue

@@ -43,9 +43,8 @@ const handleSubmit = async () => {
     showDialog.value = false
     Curtain('message', {
       message: t('headhunting.submitSuccess'),
-      // icon: 'mdi mdi-check-circle-outline',
-      name: 'SubmitPage',
-      iconColor: 'green',
+      name: 'submit',
+      iconFontSize: 300
     })
   } catch (error) {
     console.error('error', error)

src/views/recruit/enterprise/memberCenter/myAccount/index.vue

@@ -20,4 +20,4 @@ const tab = ref(0)
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

src/views/recruit/enterprise/register/inReview.vue

@@ -7,7 +7,7 @@
 
         <!-- 提交企业注册以后跳转显示页面 -->
         <div v-if="!applyInfo || !(Object.keys(applyInfo).length)" class="d-flex flex-column align-center">
-          <SubmitPage></SubmitPage>
+          <svg-icon name="submit" size="300"></svg-icon>
           <div>提交成功，审核时间在1~3个工作日内，申请结果会以短信方式通知到您的手机上，请注意查收</div>
         </div>
 

vite.config.mjs

@@ -3,6 +3,8 @@ import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 // import ViteFonts from 'unplugin-fonts/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -26,6 +28,10 @@ export default defineConfig({
         },
       ]
     }),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
+      // symbolId: 'icon-[dir]-[name]',
+    })
     // ViteFonts({
     //   google: {
     //     // families: [{