图片引用问题

src/view/components/brief.vue

 <template>
   <div class="brief-container">
     <div v-for="item in list" :key="item.name">
-      <img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
+      <img v-if="item.icon" :src="item.icon" />
       <div v-if="Array.isArray(item.value)">
         <div class="count-group">
           <m-count class="count yellow" :value="item.value[0]" />
@@ -28,7 +28,7 @@ import { defineComponent, PropType } from 'vue'
 export interface BriefProp {
   name: string
   value: number | number[]
-  icon?: string
+  icon?: any
 }
 export default defineComponent({
   name: 'Brief',

src/view/components/tabs.vue

@@ -6,15 +6,17 @@
       :class="{ on: curTabKey === tab.key }"
       @click.prevent="handleSelect(tab.key)"
     >
-      <img :src="`@/assets/images/${horizontal ? 'tri2' : 'tri'}.png`" />
+      <img :src="horizontal ? img2 : img1" />
       <p>{{ tab.name }}</p>
-      <img :src="`@/assets/images/${horizontal ? 'tri2' : 'tri'}.png`" />
+      <img :src="horizontal ? img2 : img1" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue'
+import tri1 from '@/assets/images/tri1.png'
+import tri2 from '@/assets/images/tri2.png'
 
 export interface TabsProp {
   name: string
@@ -35,6 +37,8 @@ export default defineComponent({
   },
   emits: ['select'],
   setup(props, ctx) {
+    const img1 = ref(tri1)
+    const img2 = ref(tri2)
     const curTabKey = ref(props.list[0].key)
     const handleSelect = (key: string) => {
       curTabKey.value = key
@@ -43,6 +47,8 @@ export default defineComponent({
     return {
       curTabKey,
       handleSelect,
+      img1,
+      img2,
     }
   },
 })

src/view/left/command.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="leader">
           <div v-for="(item, i) in leaders" :key="i">
-            <img :src="`@/assets/images/${item.img}`" />
+            <img :src="item.img" />
             <div>
               <p>{{ item.name }}</p>
               <span>{{ item.type }}</span>
@@ -50,7 +50,7 @@
         <m-sub>单兵巡查边量</m-sub>
         <div class="btns">
           <div v-for="btn in btns" :key="btn.name">
-            <img :src="`@/assets/images/${btn.icon}`" />
+            <img :src="btn.icon" />
             {{ btn.name }}
           </div>
         </div>
@@ -89,29 +89,35 @@ import SubTitle from '../components/sub-title.vue'
 import Summary, { SummaryProp } from '../components/summary.vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import Cricle from '../components/circle.vue'
-
+import avatar1 from '@/assets/images/avatar1.png'
+import avatar2 from '@/assets/images/avatar2.png'
+import icon1 from '@/assets/images/icon1.png'
+import icon2 from '@/assets/images/icon2.png'
+import icon3 from '@/assets/images/icon3.png'
+import icon4 from '@/assets/images/icon4.png'
+import icon5 from '@/assets/images/icon5.png'
 export default defineComponent({
   name: 'Command',
   components: { Tabs, SubTitle, Summary, Brief, Cricle },
   setup() {
     const leaders = ref([
       {
-        img: 'avatar1.png',
+        img: avatar1,
         type: '指挥长',
         name: '姓名',
       },
       {
-        img: 'avatar2.png',
+        img: avatar2,
         type: '指挥长',
         name: '姓名',
       },
       {
-        img: 'avatar1.png',
+        img: avatar1,
         type: '指挥长',
         name: '姓名',
       },
       {
-        img: 'avatar2.png',
+        img: avatar2,
         type: '指挥长',
         name: '姓名',
       },
@@ -141,11 +147,11 @@ export default defineComponent({
     ])
     const btns = ref([
       {
-        icon: 'icon1.png',
+        icon: icon1,
         name: '单兵专题',
       },
       {
-        icon: 'icon2.png',
+        icon: icon2,
         name: '排班表',
       },
     ])
@@ -204,17 +210,17 @@ export default defineComponent({
       {
         name: '居委会',
         value: 10,
-        icon: 'icon3.png',
+        icon: icon3,
       },
       {
         name: '业委会',
         value: 15,
-        icon: 'icon4.png',
+        icon: icon4,
       },
       {
         name: '物业企业',
         value: 20,
-        icon: 'icon5.png',
+        icon: icon5,
       },
       {
         name: '交叉任职',

src/view/left/manage-basic.vue

@@ -4,7 +4,7 @@
       <div class="basic">
         <div v-for="item in basicList" :key="item.name">
           <p>
-            <img :src="`@/assets/images/${item.icon}`" />
+            <img :src="item.icon" />
             {{ item.name }}
           </p>
           <p>
@@ -22,7 +22,7 @@
         </div>
         <div class="leader">
           <div v-for="(item, i) in leaders" :key="i">
-            <img :src="`@/assets/images/${item.img}`" />
+            <img :src="item.img" />
             <div>
               <p>{{ item.name }}</p>
               <span>{{ item.type }}</span>
@@ -48,29 +48,35 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import pic1 from '@/assets/images/pic1.png'
+import pic2 from '@/assets/images/pic2.png'
+import pic3 from '@/assets/images/pic3.png'
+import pic4 from '@/assets/images/pic4.png'
+import avatar1 from '@/assets/images/avatar1.png'
+import avatar2 from '@/assets/images/avatar2.png'
 
 export default defineComponent({
   name: 'ManageBasic',
   setup() {
     const basicList = ref([
-      { name: '总面积', value: 241359, unit: '㎡', icon: 'pic1.png' },
-      { name: '总户数', value: 341359, unit: '户', icon: 'pic2.png' },
-      { name: '总人口', value: 965334, unit: '人', icon: 'pic3.png' },
-      { name: '总单位', value: 5334, unit: '家', icon: 'pic4.png' },
+      { name: '总面积', value: 241359, unit: '㎡', icon: pic1 },
+      { name: '总户数', value: 341359, unit: '户', icon: pic2 },
+      { name: '总人口', value: 965334, unit: '人', icon: pic3 },
+      { name: '总单位', value: 5334, unit: '家', icon: pic4 },
     ])
     const leaders = ref([
       {
-        img: 'avatar1.png',
+        img: avatar1,
         name: '姓名',
         type: '网格长',
       },
       {
-        img: 'avatar2.png',
+        img: avatar2,
         name: '姓名',
         type: '副网格长',
       },
       {
-        img: 'avatar1.png',
+        img: avatar1,
         name: '姓名',
         type: '警长',
       },

src/view/right/beauty-home.vue

@@ -31,6 +31,12 @@
 import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
+import icon9 from '@/assets/images/icon9.png'
+import icon10 from '@/assets/images/icon10.png'
+import icon11 from '@/assets/images/icon11.png'
+import icon12 from '@/assets/images/icon12.png'
+import icon13 from '@/assets/images/icon13.png'
+import icon14 from '@/assets/images/icon14.png'
 
 export default defineComponent({
   name: 'BeautyHome',
@@ -43,10 +49,10 @@ export default defineComponent({
       { name: '2018年', value: 18 },
     ])
     const situation = ref<BriefProp[]>([
-      { name: '小区微更新', value: 26, icon: 'icon9.png' },
-      { name: '充电桩', value: 64, icon: 'icon10.png' },
-      { name: '雨污混接', value: 18, icon: 'icon11.png' },
-      { name: '门岗规范化', value: 12, icon: 'icon12.png' },
+      { name: '小区微更新', value: 26, icon: icon9 },
+      { name: '充电桩', value: 64, icon: icon10 },
+      { name: '雨污混接', value: 18, icon: icon11 },
+      { name: '门岗规范化', value: 12, icon: icon12 },
     ])
     const elevList = ref([
       { name: '振兴', value: 9 },
@@ -58,8 +64,8 @@ export default defineComponent({
       { name: '顺天村', value: 1 },
     ])
     const toiletSituation = ref<BriefProp[]>([
-      { name: '已完成改造', value: 26, icon: 'icon13.png' },
-      { name: '应改造', value: 64, icon: 'icon14.png' },
+      { name: '已完成改造', value: 26, icon: icon13 },
+      { name: '应改造', value: 64, icon: icon14 },
     ])
     const workStationProjects = ref([
       { name: '架空线梳理', value: 16 },

src/view/right/company.vue

@@ -5,7 +5,7 @@
         <m-count class="count" :value="item.value" />
         <p>
           {{ item.name }}
-          <img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
+          <img v-if="item.icon" :src="item.icon" />
         </p>
       </div>
     </div>
@@ -31,6 +31,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue'
+import icon1 from '@/assets/images/icon1.png'
 import store from '@/store'
 export default defineComponent({
   name: 'Company',
@@ -38,8 +39,8 @@ export default defineComponent({
     const showChart = computed(() => store.state.curTheme === 'safety')
     const sum = ref([
       { name: '本街道注册', value: 6741 },
-      { name: '境外注册', value: 1658, icon: 'icon1.png' },
-      { name: '境内注册', value: 1804, icon: 'icon1.png' },
+      { name: '境外注册', value: 1658, icon: icon1 },
+      { name: '境内注册', value: 1804, icon: icon1 },
     ])
     const pieData = ref({
       dimensions: [

src/view/right/convenient.vue

@@ -27,6 +27,10 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
+import icon23 from '@/assets/images/icon23.png'
+import icon24 from '@/assets/images/icon24.png'
+import icon25 from '@/assets/images/icon25.png'
+import icon26 from '@/assets/images/icon26.png'
 
 export default defineComponent({
   name: 'Convenient',
@@ -44,10 +48,10 @@ export default defineComponent({
       { name: '助浴点', value: 68 },
     ])
     const forLive = ref<BriefProp[]>([
-      { name: '菜场', value: 26, icon: 'icon23.png' },
-      { name: '街面废物箱', value: 64, icon: 'icon24.png' },
-      { name: '公厕', value: 18, icon: 'icon25.png' },
-      { name: '电话亭', value: 12, icon: 'icon26.png' },
+      { name: '菜场', value: 26, icon: icon23 },
+      { name: '街面废物箱', value: 64, icon: icon24 },
+      { name: '公厕', value: 18, icon: icon25 },
+      { name: '电话亭', value: 12, icon: icon26 },
     ])
     return {
       forOld,

src/view/right/demand.vue

@@ -57,6 +57,9 @@
 import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
+import icon6 from '@/assets/images/icon6.png'
+import icon7 from '@/assets/images/icon7.png'
+import icon8 from '@/assets/images/icon8.png'
 
 export default defineComponent({
   name: 'Demand',
@@ -68,17 +71,17 @@ export default defineComponent({
       {
         name: '综合管理',
         value: [36, 468],
-        icon: 'icon6.png',
+        icon: icon6,
       },
       {
         name: '街面管理',
         value: [64, 261],
-        icon: 'icon7.png',
+        icon: icon7,
       },
       {
         name: '小区管理',
         value: [57, 154],
-        icon: 'icon8.png',
+        icon: icon8,
       },
     ])
     const process = ref([

src/view/right/duty.vue

@@ -2,7 +2,7 @@
   <m-card title="勤务">
     <Brief class="brief" :list="summary" />
     <Tabs class="tabs" :list="tabs" horizontal />
-    <div class="details">
+    <div v-if="showTable" class="details">
       <m-scroll :limit="4" :length="caseList.length" :step="1.1" mode="2">
         <div v-for="(item, i) in caseList" :key="i" class="detail">
           <div class="title">
@@ -22,29 +22,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
+import store from '@/store'
+import icon6 from '@/assets/images/icon6.png'
+import icon7 from '@/assets/images/icon7.png'
+import icon8 from '@/assets/images/icon8.png'
 
 export default defineComponent({
   name: 'Duty',
   components: { Brief, Tabs },
   setup() {
+    const showTable = computed(() => store.state.curView.type !== 'street')
     const summary = ref<BriefProp[]>([
       {
         name: '综合管理',
         value: [36, 468],
-        icon: 'icon6.png',
+        icon: icon6,
       },
       {
         name: '街面管理',
         value: [64, 261],
-        icon: 'icon7.png',
+        icon: icon7,
       },
       {
         name: '小区管理',
         value: [57, 154],
-        icon: 'icon8.png',
+        icon: icon8,
       },
     ])
     const tabs = ref<TabsProp[]>([
@@ -84,6 +89,7 @@ export default defineComponent({
       },
     ])
     return {
+      showTable,
       summary,
       tabs,
       caseList,

src/view/right/ecology.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="sum">
       <div v-for="item in sumList" :key="item.name">
-        <img :src="`@/assets/images/${item.icon}`" />
+        <img :src="item.icon" />
         <div>
           <m-count class="count" :value="item.value" />
           <p>{{ item.name }}</p>
@@ -19,21 +19,13 @@
     <div>
       <m-sub>商业综合体</m-sub>
       <div class="business photos">
-        <img
-          v-for="photo in businessPhotos"
-          :key="photo"
-          :src="`@/assets/images/${photo}`"
-        />
+        <img v-for="photo in businessPhotos" :key="photo" :src="photo" />
       </div>
     </div>
     <div>
       <m-sub>历史文化场馆</m-sub>
       <div class="history photos">
-        <img
-          v-for="photo in historyPhotos"
-          :key="photo"
-          :src="`@/assets/images/${photo}`"
-        />
+        <img v-for="photo in historyPhotos" :key="photo" :src="photo" />
       </div>
     </div>
   </m-card>
@@ -41,6 +33,19 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import img1 from '@/assets/images/img1.png'
+import img2 from '@/assets/images/img2.png'
+import img3 from '@/assets/images/img3.png'
+import img4 from '@/assets/images/img4.png'
+import img5 from '@/assets/images/img5.png'
+import img6 from '@/assets/images/img6.png'
+import img7 from '@/assets/images/img7.png'
+import img8 from '@/assets/images/img8.png'
+import photo1 from '@/assets/images/photo1.png'
+import photo2 from '@/assets/images/photo2.png'
+import photo3 from '@/assets/images/photo3.png'
+import photo4 from '@/assets/images/photo4.png'
+import photo5 from '@/assets/images/photo5.png'
 
 export default defineComponent({
   name: 'Ecology',
@@ -52,17 +57,17 @@ export default defineComponent({
       { name: '住', value: 853 },
     ])
     const sumList = ref([
-      { name: '为老设施', value: 853, icon: 'img1.png' },
-      { name: '便民商店', value: 1276, icon: 'img2.png' },
-      { name: '便利店', value: 285, icon: 'img3.png' },
-      { name: '电话亭', value: 853, icon: 'img4.png' },
-      { name: '餐车', value: 1276, icon: 'img5.png' },
-      { name: '街面废物箱', value: 285, icon: 'img6.png' },
-      { name: '公厕', value: 200, icon: 'img7.png' },
-      { name: '垃圾箱房', value: 1957, icon: 'img8.png' },
+      { name: '为老设施', value: 853, icon: img1 },
+      { name: '便民商店', value: 1276, icon: img2 },
+      { name: '便利店', value: 285, icon: img3 },
+      { name: '电话亭', value: 853, icon: img4 },
+      { name: '餐车', value: 1276, icon: img5 },
+      { name: '街面废物箱', value: 285, icon: img6 },
+      { name: '公厕', value: 200, icon: img7 },
+      { name: '垃圾箱房', value: 1957, icon: img8 },
     ])
-    const businessPhotos = ref(['photo1.png', 'photo2.png'])
-    const historyPhotos = ref(['photo3.png', 'photo4.png', 'photo5.png'])
+    const businessPhotos = ref([photo1, photo2])
+    const historyPhotos = ref([photo3, photo4, photo5])
     return {
       ecologyList,
       sumList,

src/view/right/house.vue

@@ -32,15 +32,21 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
+import icon18 from '@/assets/images/icon18.png'
+import icon19 from '@/assets/images/icon19.png'
+import icon20 from '@/assets/images/icon20.png'
+import icon7 from '@/assets/images/icon7.png'
+import icon21 from '@/assets/images/icon21.png'
+import icon22 from '@/assets/images/icon22.png'
 
 export default defineComponent({
   name: 'House',
   components: { Brief },
   setup() {
     const summary = ref<BriefProp[]>([
-      { name: '小区数', value: 65465, icon: 'icon18.png' },
-      { name: '物业公司', value: 1648, icon: 'icon19.png' },
-      { name: '业委会', value: 56462, icon: 'icon20.png' },
+      { name: '小区数', value: 65465, icon: icon18 },
+      { name: '物业公司', value: 1648, icon: icon19 },
+      { name: '业委会', value: 56462, icon: icon20 },
     ])
     const houseTypes = ref([
       {
@@ -60,9 +66,9 @@ export default defineComponent({
       },
     ])
     const houseSum = ref<BriefProp[]>([
-      { name: '门面房', value: 1658, icon: 'icon7.png' },
-      { name: '商办', value: 3564, icon: 'icon21.png' },
-      { name: '商业综合体', value: 1875, icon: 'icon22.png' },
+      { name: '门面房', value: 1658, icon: icon7 },
+      { name: '商办', value: 3564, icon: icon21 },
+      { name: '商业综合体', value: 1875, icon: icon22 },
     ])
     return {
       summary,

src/view/right/police.vue

@@ -40,6 +40,9 @@ import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import Summary, { SummaryProp } from '../components/summary.vue'
 import store from '@/store'
+import icon15 from '@/assets/images/icon15.png'
+import icon16 from '@/assets/images/icon16.png'
+import icon17 from '@/assets/images/icon17.png'
 
 export default defineComponent({
   name: 'Police',
@@ -48,9 +51,9 @@ export default defineComponent({
     const showChart = computed(() => store.state.curTheme === 'safety')
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const sumList = ref<BriefProp[]>([
-      { name: '今日发现', value: 157, icon: 'icon15.png' },
-      { name: '今日处置中', value: 64, icon: 'icon16.png' },
-      { name: '今日结案', value: 37, icon: 'icon17.png' },
+      { name: '今日发现', value: 157, icon: icon15 },
+      { name: '今日处置中', value: 64, icon: icon16 },
+      { name: '今日结案', value: 37, icon: icon17 },
     ])
     const lineData = ref({
       dimensions: [

src/view/right/population.vue

@@ -16,15 +16,18 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
+import inImg from '@/assets/images/in.png'
+import out from '@/assets/images/out.png'
+import china from '@/assets/images/china.png'
 
 export default defineComponent({
   name: 'Population',
   components: { Brief },
   setup() {
     const summary = ref<BriefProp[]>([
-      { name: '本市户籍', value: 18733, icon: 'in.png' },
-      { name: '境外流入', value: 28833, icon: 'out.png' },
-      { name: '境内流入', value: 29052, icon: 'china.png' },
+      { name: '本市户籍', value: 18733, icon: inImg },
+      { name: '境外流入', value: 28833, icon: out },
+      { name: '境内流入', value: 29052, icon: china },
     ])
     const population = ref([
       { name: '老龄人口', value: 35648 },

src/view/right/public-safety.vue

@@ -8,7 +8,7 @@
       <div class="house"><House /></div>
       <div class="company"><Company /></div>
     </m-card>
-    <m-card mode="border">
+    <m-card id="flex-start" mode="border">
       <m-card title="应急物资储备">
         <Brief
           :list="[
@@ -65,4 +65,7 @@ export default defineComponent({
       flex 2
     .company
       flex 1.2
+#flex-start
+  :deep(.card-content)
+    justify-content flex-start
 </style>

vite.config.js

@@ -12,5 +12,4 @@ export default defineConfig({
     },
   },
   base: './',
-  assetsDir: 'src/assets',
 })