💄 feat: 图片位置调整

README.md

@@ -1,6 +1,4 @@
 # vehicle-monitor
 
-![大数据可视化蓝色科技智慧车辆大屏后台统计2](public/大数据可视化蓝色科技智慧车辆大屏后台统计2.png)
-
 智慧智能监管中心
 车辆监控中心

src/assets/styles/global.scss

@@ -3,6 +3,7 @@
 
 :root {
   --color-primary: #027AFF;
+  --color-primary-1: #4F94E6;
   --color-primary-secondary: #00FFFF;
   --color-primary-secondary-1: #00FFFFB5;
   --color-success: #44D7B6;

src/components/PanelItem/CommunityPanel/index.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="panel">
+    <h1>{{ title }}</h1>
+
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.panel {
+  width: 430px;
+  height: 440px;
+  background: url('./bg.png') no-repeat;
+  background-size: cover;
+
+  h1 {
+    color: var(--color-primary-1);
+    font-size: 20px;
+    text-align: center;
+    line-height: 85px;
+  }
+
+  &-body {
+    display: flex;
+    justify-self: center;
+    width: 368px;
+    height: 314px;
+  }
+}
+</style>

src/router/modules/home.ts

@@ -4,7 +4,7 @@ import type { RouteConfigsTable } from '@/types/router/Route';
 const routes: RouteConfigsTable[] = [
   {
     path: '/welcome',
-    name: 'welcome',
+    name: 'Welcome',
     component: () => import('@/views/welcome/index.vue'),
     meta: {
       title: '后台管理系统标题',
@@ -13,7 +13,7 @@ const routes: RouteConfigsTable[] = [
   },
   {
     path: '/smart-park',
-    name: 'smartPark',
+    name: 'SmartPark',
     component: () => import('@/views/smart-park/index.vue'),
     meta: {
       title: '智慧智能监管中心',
@@ -27,7 +27,7 @@ const routes: RouteConfigsTable[] = [
   },
   {
     path: '/data-analyse',
-    name: 'dataAnalyse',
+    name: 'DataAnalyse',
     component: () => import('@/views/data-analyse/index.vue'),
     meta: {
       title: '数据分析',
@@ -39,9 +39,23 @@ const routes: RouteConfigsTable[] = [
       },
     },
   },
+  {
+    path: '/community',
+    name: 'Community',
+    component: () => import('@/views/community/index.vue'),
+    meta: {
+      title: '社区',
+      subtitle: '社区可视化中心',
+      headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceIn animate__faster',
+        leave: 'animate__bounceOut',
+      },
+    },
+  },
   {
     path: '/business-supervision',
-    name: 'businessSupervision',
+    name: 'BusinessSupervision',
     component: () => import('@/views/business-supervision/index.vue'),
     meta: {
       title: '智慧经营监管中心',
@@ -51,7 +65,7 @@ const routes: RouteConfigsTable[] = [
   },
   {
     path: '/big-data',
-    name: 'bigData',
+    name: 'BigData',
     component: () => import('@/views/big-data/index.vue'),
     meta: {
       title: '大数据可视化中心',

src/views/big-data/components/big-data-content/components/content-middle.vue

@@ -21,7 +21,7 @@ onMounted(() => {
       <img
         :class="[isActive ? 'move-top' : 'move-bottom']"
         alt=""
-        src="@/assets/images/big-data/bg/bg-middle-move.png"
+        src="@/views/big-data/images/bg-middle-move.png"
       />
 
       <h1>工作台</h1>
@@ -29,7 +29,7 @@ onMounted(() => {
       <img
         :class="[isActive ? 'move-bottom' : 'move-top']"
         alt=""
-        src="@/assets/images/big-data/bg/bg-middle-move.png"
+        src="@/views/big-data/images/bg-middle-move.png"
       />
     </div>
   </div>
@@ -57,7 +57,7 @@ onMounted(() => {
     line-height: 109px;
     font-size: 34px;
     color: var(--color-primary-secondary);
-    background: url('@/assets/images/big-data/bg/bg-middle-title.png') no-repeat center;
+    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
     background-size: cover;
   }
 

src/views/big-data/components/big-data-content/components/content-top.vue

@@ -47,7 +47,7 @@ ul {
       line-height: 54px;
       text-align: center;
       color: var(--color-primary-secondary);
-      background: url('@/assets/images/big-data/bg/bg-content-top-item.png') no-repeat center;
+      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
       background-size: cover;
     }
   }

src/views/big-data/components/big-data-left/components/left-middle.vue

@@ -82,7 +82,7 @@ li {
   padding: 0 18px 0 14px;
   width: 248px;
   height: 143px;
-  background: url('@/assets/images/big-data/bg/bg-middle.png') no-repeat center;
+  background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
   background-size: cover;
 
   .progress {

src/views/big-data/components/big-data-right/components/right-bottom.vue

@@ -49,7 +49,7 @@ li {
   margin: 0 24px 14px 0;
   width: 144px;
   height: 83px;
-  background: url('@/assets/images/big-data/bg/bg-right-bottom.png') no-repeat center;
+  background: url('@/views/big-data/images/bg-right-bottom.png') no-repeat center;
   background-size: cover;
 
   &::before {

src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue

@@ -39,7 +39,7 @@ onMounted(() => {
   margin: 20px 0 0 0;
   width: 761px;
   height: 294px;
-  background: url('@/assets/images/business-supervision/bg/content/bg-bottom.png') no-repeat center;
+  background: url('@/views/business-supervision/images/content/bg-bottom.png') no-repeat center;
   background-size: cover;
 
   &-inner {

src/views/business-supervision/components/business-supervision-content/components/content-middle.vue

@@ -52,7 +52,7 @@ const getImage = (url) => {
   margin: 30px 0 0 0;
   width: 761px;
   height: 407px;
-  background: url('@/assets/images/business-supervision/bg/content/bg-middle.png') no-repeat center;
+  background: url('@/views/business-supervision/images/content/bg-middle.png') no-repeat center;
   background-size: cover;
 
   li {
@@ -76,7 +76,7 @@ const getImage = (url) => {
       text-align: center;
       line-height: 40px;
       color: var(--color-primary-secondary);
-      background: url('@/assets/images/business-supervision/bg/content/bg-middle-tag.png') no-repeat
+      background: url('@/views/business-supervision/images/content/bg-middle-tag.png') no-repeat
         center;
       background-size: cover;
     }
@@ -89,8 +89,8 @@ const getImage = (url) => {
     align-items: center;
     width: 140px;
     height: 99px;
-    background: url('@/assets/images/business-supervision/bg/content/bg-middle-detail.png')
-      no-repeat center;
+    background: url('@/views/business-supervision/images/content/bg-middle-detail.png') no-repeat
+      center;
     background-size: cover;
 
     strong {

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-bottom.vue

@@ -60,7 +60,7 @@ const devices = ref<any>([
     justify-content: center;
     width: 74px;
     height: 46px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
+    background: url('@/views/business-supervision/images/sidebar/device-carriage.png') no-repeat
       center;
     background-size: cover;
 

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue

@@ -75,7 +75,7 @@ onMounted(() => {
     margin: 15px 0 0 0;
     width: 242px;
     height: 124px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background: url('@/views/business-supervision/images/sidebar/frame-1.png') no-repeat center;
     background-size: cover;
 
     h1 {

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue

@@ -72,7 +72,7 @@ onMounted(() => {
       align-items: center;
       width: 240px;
       height: 167px;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png')
+      background: url('@/views/business-supervision/images/sidebar/bg-sidebar-bottom-panel.png')
         no-repeat center;
       background-size: cover;
 

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-middle.vue

@@ -47,8 +47,8 @@ const list = [
       padding: 0 0 0 14px;
       width: 243px;
       height: 124px;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png')
-        no-repeat center;
+      background: url('@/views/business-supervision/images/sidebar/bg-sidebar-panel.png') no-repeat
+        center;
       background-size: cover;
 
       h1 {

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue

@@ -32,26 +32,17 @@ const timeList = ref<TimeSelectType[]>([
       <ul class="business-supervision__sidebar-list">
         <li>
           <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
           <p>批准规划面积验收率</p>
         </li>
         <li>
           <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
           <p>批准规划面积验收率</p>
         </li>
         <li>
           <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
           <p>批准规划面积验收率</p>
         </li>
       </ul>
@@ -71,7 +62,7 @@ const timeList = ref<TimeSelectType[]>([
   &--spin {
     width: 167px;
     height: 167px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png') no-repeat
+    background: url('@/views/business-supervision/images/sidebar/bg-middle-spin.png') no-repeat
       center;
     background-size: cover;
     animation: rotate 2s linear infinite;

src/views/community/community-content/index.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="community__content">community-content/index.vue</div>
+</template>
+
+<style lang="scss" scoped>
+.community__content {
+  background: #006bc5;
+}
+</style>

src/views/community/community-left/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+</script>
+
+<template>
+  <div class="community__sidebar">
+    <div class="community__sidebar-item">
+      <CommunityPanel title="智慧设备总数" />
+    </div>
+
+    <div class="community__sidebar-item">
+      <CommunityPanel title="预警概览" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community__sidebar {
+  //background: #fff;
+}
+</style>

src/views/community/community-right/index.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+</script>
+
+<template>
+  <div class="community__sidebar">
+    <div class="community__sidebar-item">
+      <CommunityPanel title="标题标题" />
+    </div>
+
+    <div class="community__sidebar-item">
+      <CommunityPanel title="标题标题" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community__sidebar {
+}
+</style>

src/views/community/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import CommunityContent from '@/views/community/community-content/index.vue';
+import CommunityLeft from '@/views/community/community-left/index.vue';
+import CommunityRight from '@/views/community/community-right/index.vue';
+</script>
+
+<template>
+  <div class="community">
+    <community-left />
+    <community-content />
+    <community-right />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 759px, #0e5fff33);
+}
+</style>

src/views/login/index.vue

@@ -109,7 +109,7 @@ onBeforeMount(() => {
       align-items: center;
       width: 749px;
       height: 578px;
-      background: url('@/assets/images/login/bg-login.png') no-repeat center;
+      background: url('@/views/login/images/bg-login.png') no-repeat center;
       background-size: cover;
 
       &-info {
@@ -154,7 +154,7 @@ onBeforeMount(() => {
           font-size: 16px;
           color: var(--color-primary-secondary);
           outline: none;
-          background: url('@/assets/images/login/bg-login-btn.png') no-repeat center;
+          background: url('@/views/login/images/bg-login-btn.png') no-repeat center;
           background-size: cover;
         }
       }

src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue

@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="@/assets/images/smart-park/arrow/arrow-item.png"
+        src="@/views/smart-park/images/arrow/arrow-item.png"
       />
     </div>
   </div>

src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue

@@ -3,8 +3,8 @@ defineProps({
   percent: Number,
 });
 
-import ArrowDown from '@/assets/images/smart-park/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/smart-park/arrow/arrow-up.png';
+import ArrowDown from '@/views/smart-park/images/arrow/arrow-down.png';
+import ArrowUp from '@/views/smart-park/images/arrow/arrow-up.png';
 
 const calPercentItem = (percent: number): Element => {
   return percent > 25 ? (
@@ -35,7 +35,7 @@ const calPercentItem = (percent: number): Element => {
   position: absolute;
   width: 86px;
   height: 86px;
-  background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
+  background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
   background-size: cover;
 }
 </style>

src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue

@@ -46,13 +46,13 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
   align-items: center;
   width: 824px;
   height: 650px;
-  background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;
+  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
   background-size: cover;
 
   // 中间部分标题
   &-title {
     height: 61px;
-    background: url('@/assets/images/smart-park/bg/bg-main-title.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
     background-size: cover;
 
     h1 {
@@ -71,7 +71,7 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
     margin: 28px 0 77px 0;
     width: 666px;
     height: 400px;
-    background: url('@/assets/images/smart-park/bg/bg-main-1.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
     background-size: cover;
   }
 
@@ -87,7 +87,7 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
     &-headline {
       width: 100%;
       height: 100%;
-      background: url('@/assets/images/smart-park/bg/bg-main-center.png');
+      background: url('@/views/smart-park/images/bg/bg-main-center.png');
       background-size: cover;
       font-size: 19px;
       animation: rotate 30s linear infinite;

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue

@@ -11,22 +11,22 @@
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
           <p>入卡口（西北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
           <p>入卡口（东北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-2.png" />
           <p>入卡口（东北门）</p>
           <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
           <p>入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
@@ -57,7 +57,7 @@
     width: 330px;
     height: 61px;
     margin: 0 0 9px 0;
-    background: url('@/assets/images/smart-park/bg/bg-frame.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
     background-size: cover;
 
     img {
@@ -77,7 +77,7 @@
     height: 157px;
     color: #fff;
     font-size: 14px;
-    background: url('@/assets/images/smart-park/bg/bg-suggest.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
     background-size: cover;
 
     span {

src/views/smart-park/components/smart-park-content/index.vue

@@ -77,7 +77,7 @@ onMounted(() => {
     color: #fff;
     line-height: 40px;
     font-size: 16px;
-    background: url('@/assets/images/smart-park/bg/bg-frame-2.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-frame-2.png') no-repeat center;
     background-size: cover;
   }
 
@@ -87,7 +87,7 @@ onMounted(() => {
     color: var(--color-primary-secondary);
     line-height: 66px;
     font-size: 34px;
-    background: url('@/assets/images/smart-park/bg/bg-frame-3.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-frame-3.png') no-repeat center;
     background-size: cover;
   }
 

src/views/smart-park/components/smart-park-footer/index.vue

@@ -4,7 +4,7 @@
   <footer>
     <ul class="smart-park__footer-nav">
       <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
-        <img alt="车辆管理" src="../../../../assets/images/smart-park/car/car-39.png" />
+        <img alt="车辆管理" src="@/views/smart-park/images/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>

src/views/smart-park/index.vue

@@ -6,7 +6,7 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
 <template>
   <div class="smart-park">
     <div class="smart-park__arrow left-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-left.png" />
+      <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-left.png" />
     </div>
 
     <smart-part-content />
@@ -14,7 +14,7 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
     <smart-part-footer />
 
     <div class="smart-park__arrow right-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-right.png" />
+      <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-right.png" />
     </div>
   </div>
 </template>
@@ -38,7 +38,7 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
   &__sidebar {
     width: 380px;
     height: 650px;
-    background: url('@/assets/images/smart-park/bg/bg-side.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-side.png') no-repeat center;
     background-size: cover;
     transition: transform 0.8s;
     transform-style: preserve-3d;
@@ -46,7 +46,7 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
     .smart-park__sidebar-title {
       width: 218px;
       height: 59px;
-      background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
+      background: url('@/views/smart-park/images/bg/bg-road-condition.png') no-repeat center;
       background-size: cover;
 
       h1 {

src/views/welcome/components/welcome-content.vue

@@ -7,7 +7,7 @@ const list = [
   { title: '停车场', image: '/images/welcome/car.png', target: '/smart-park' },
   { title: '数据分析', image: '/images/welcome/distribution.png', target: '/data-analyse' },
   { title: '智慧渣土', image: '/images/welcome/muck.png', target: '/smart-park' },
-  { title: '智慧洁城', image: '/images/welcome/clean-city.png', target: '/smart-park' },
+  { title: '社区', image: '/images/welcome/clean-city.png', target: '/community' },
   { title: '智慧路灯', image: '/images/welcome/lamp.png', target: '/smart-park' },
 ];
 </script>
@@ -16,7 +16,7 @@ const list = [
   <div class="welcome__content">
     <div class="welcome__content-inner">
       <p>
-        <img alt="welcome-bg" src="@/assets/images/welcome/icon/welcome.png" />
+        <img alt="welcome-bg" src="../images/welcome.png" />
         <i>xxxx</i>
         你好 欢迎使用xxxxxxxzz
       </p>