feat: 修改图片位置

src/assets/styles/animations/animations.scss

@@ -1,2 +1,3 @@
 @use "src/rotate";
-@use "src/transition";
+@use "src/transition";
+@use "src/line-move";

src/assets/styles/animations/src/line-move.scss

@@ -0,0 +1,18 @@
+@keyframes line-move {
+  0% {
+    transform: translateX(200%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes line-move-alternate {
+  0% {
+    transform: rotateY(180deg) translateX(100%);
+  }
+  100% {
+    transform: rotateY(180deg) translateX(-200%);
+  }
+}

src/assets/styles/common/src/element.scss

@@ -10,7 +10,7 @@
 }
 
 .hover {
-  transition: all 0.3s;
+  transition: all 0.4s;
   cursor: pointer;
 
   &:hover {

src/assets/styles/minix/sidebar.scss

@@ -1,4 +1,4 @@
-@mixin view-style-default($sidebar-width,$content-width) {
+@mixin view-style-default($sidebar-width,$content-width,$item-bg) {
   &__sidebar {
     display: flex;
     flex-wrap: wrap;
@@ -12,7 +12,7 @@
     &-item {
       padding: 9px 15px;
       width: 100%;
-      background: rgba(14, 95, 255, 0.2);
+      background: $item-bg;
     }
 
     &-tag {

src/layout/index.vue

@@ -11,7 +11,7 @@ const route = useRoute();
 const appStore = useAppStore();
 
 onBeforeMount(() => {
-  appStore.setBackground('@/assets/images/common/bg/bg-layout.png');
+  appStore.setBackground('/images/common/bg/bg-layout.png');
 });
 </script>
 

src/store/app.ts

@@ -17,7 +17,7 @@ const useAppStore = defineStore('appStore', {
         const href = new URL(background, import.meta.url).href;
         this.background = `url(${href})`;
       } else {
-        const href = new URL('@/assets/images/common/bg/bg-layout.png', import.meta.url).href;
+        const href = new URL('/images/common/bg/bg-layout.png', import.meta.url).href;
         this.background = `url(${href})`;
       }
     },

src/views/big-data/charts/content-bottom.tsx

@@ -0,0 +1,51 @@
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart, graphicLinearGradient } from '@/utils/chart';
+
+let myChart = null;
+
+const option = {
+  backgroundColor: 'transparent',
+  grid: { top: '54px', right: '14px', left: '14px', bottom: '24px' },
+  title: {
+    text: '最近12个月税收概览',
+    textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' },
+  },
+  tooltip: {},
+  legend: { show: false },
+  xAxis: {
+    type: 'category',
+    show: true,
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    // data: category,
+    itemStyle: { color: '#ccc' },
+    splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
+    splitArea: { show: false },
+  },
+  yAxis: { show: true, type: 'value', splitLine: { show: false } },
+  series: [
+    {
+      name: '金额',
+      type: 'bar',
+      barWidth: 14,
+      itemStyle: {
+        borderRadius: 5,
+        color: graphicLinearGradient('#66FFFF', '#66FFFF33'),
+      },
+      data: [2, 8, 3, 7, 1, 9, 18, 3, 7, 1, 9, 6],
+    },
+  ],
+};
+
+/** 渲染图表 */
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};

src/views/big-data/charts/left-bottom.tsx

@@ -9,9 +9,10 @@ let myChart = null;
 
 const option = {
   backgroundColor: 'transparent',
-  grid: { top: '19%', right: 9, left: 9, bottom: '20%' },
+  grid: { top: '9%', right: 9, left: 9, bottom: '20%' },
   tooltip: {},
   legend: {
+    show: false,
     data: [
       { name: '出园', icon: 'rect', itemStyle: { color: '#32C5FF' } },
       { name: '入园', icon: 'rect', itemStyle: { color: '#16CEB9' } },

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

@@ -1,19 +1,30 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
+import { renderEcharts } from '@/views/big-data/charts/content-bottom';
 
 const chart = ref<HTMLDivElement>();
+
+onMounted(() => {
+  renderEcharts(chart);
+});
 </script>
 
 <template>
-  <div class="content-bottom">
-    <div ref="chart" />
+  <div class="big-data__sidebar-item">
+    <div ref="chart" class="big-data__sidebar-item-chart" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.content-bottom {
+.big-data__sidebar-item {
   width: 800px;
   height: 377px;
-  background: mediumpurple;
+
+  &-chart {
+    padding: 29px 25px 21px 28px;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

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

@@ -3,10 +3,15 @@ import { onMounted, ref } from 'vue';
 
 const isActive = ref(true);
 
-onMounted(() => {
+/** 改变移动状态 */
+const changeMoveState = () => {
   setInterval(() => {
     isActive.value = !isActive.value;
   }, 2000);
+};
+
+onMounted(() => {
+  changeMoveState();
 });
 </script>
 
@@ -18,7 +23,9 @@ onMounted(() => {
         alt=""
         src="@/assets/images/big-data/bg/bg-middle-move.png"
       />
+
       <h1>工作台</h1>
+
       <img
         :class="[isActive ? 'move-bottom' : 'move-top']"
         alt=""
@@ -59,26 +66,7 @@ onMounted(() => {
   }
 
   .move-bottom {
-    animation: 2s linear 0s infinite normal none running line-move-top;
-  }
-}
-
-@keyframes line-move-top {
-  0% {
-    transform: translateX(200%);
-  }
-
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes line-move {
-  0% {
-    transform: rotateY(180deg) translateX(100%);
-  }
-  100% {
-    transform: rotateY(180deg) translateX(-200%);
+    animation: 2s linear 0s infinite normal none running line-move-alternate;
   }
 }
 </style>

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

@@ -2,10 +2,10 @@
 import { getImage } from '@/utils/image';
 
 const list = [
-  { title: '员工', img: '../assets/images/big-data/bg/bg-content-top-1.png' },
-  { title: '智慧大楼', img: '../assets/images/big-data/bg/bg-content-top-2.png' },
-  { title: '智慧设备', img: '../assets/images/big-data/bg/bg-content-top-3.png' },
-  { title: '数据报表', img: '../assets/images/big-data/bg/bg-content-top-4.png' },
+  { title: '员工', img: '/images/big-data/bg-content-top-1.png' },
+  { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' },
+  { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' },
+  { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' },
 ];
 </script>
 

src/views/big-data/index.vue

@@ -9,7 +9,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
 const appStore = useAppStore();
 
 onBeforeMount(async () => {
-  appStore.setBackground('@/assets/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/common/bg/bg-secondary.png');
 });
 </script>
 
@@ -30,6 +30,6 @@ onBeforeMount(async () => {
   width: 100%;
   height: 100%;
 
-  @include view-style-default(530px, 748px);
+  @include view-style-default(530px, 748px, #122953b3);
 }
 </style>

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

@@ -1,38 +1,40 @@
 <script lang="ts" setup>
-import { getImage } from '@/utils/image';
-
 const list = [
   {
-    img: '../assets/images/business-supervision/bg/content/bg-middle-1.png',
+    img: '/images/business-supervision/content/bg-middle-1.png',
     title: '员工',
     describe: '相关员工',
     amount: 365,
   },
   {
-    img: '../assets/images/business-supervision/bg/content/bg-middle-2.png',
+    img: '/images/business-supervision/content/bg-middle-2.png',
     title: '智慧大楼',
     describe: '区域面积/㎡',
     amount: 365,
   },
   {
-    img: '../assets/images/business-supervision/bg/content/bg-middle-3.png',
+    img: '/images/business-supervision/content/bg-middle-3.png',
     title: '智慧设备',
     describe: '设备总数',
     amount: 1123,
   },
   {
-    img: '../assets/images/business-supervision/bg/content/bg-middle-4.png',
+    img: '/images/business-supervision/content/bg-middle-4.png',
     title: '数据报表',
     describe: '报表下载总数',
     amount: 287,
   },
 ];
+
+const getImage = (url) => {
+  return new URL(url, import.meta.url).href;
+};
 </script>
 
 <template>
   <ul class="business-supervision__middle">
     <li v-for="(item, index) in list" :key="index">
-      <img :alt="`bg-middle-${index}`" :src="getImage(item.img)" />
+      <img :src="item.img" alt="" />
       <h2>{{ item.title }}</h2>
       <div class="business-supervision__middle-detail">
         <strong>{{ item.amount }}</strong>

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

@@ -1,6 +1,4 @@
 <script lang="tsx" setup>
-import { getImage } from '@/utils/image';
-
 const list = [
   {
     title: '今日出口额 / 万元',
@@ -51,12 +49,7 @@ const contentEl = () => {
               ))}
             </section>
           </div>
-          <img
-            alt="card-1"
-            src={getImage(
-              `../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`
-            )}
-          />
+          <img alt="card-1" src={`/images/business-supervision/content/bg-card-${index + 1}.png`} />
         </li>
       ))}
     </>

src/views/business-supervision/index.vue

@@ -9,7 +9,7 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
 const appStore = useAppStore();
 
 onBeforeMount(() => {
-  appStore.setBackground('@/assets/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/common/bg/bg-secondary.png');
 });
 </script>
 
@@ -30,6 +30,6 @@ onBeforeMount(() => {
   width: 100%;
   height: 100%;
 
-  @include view-style-default(530px, 759px);
+  @include view-style-default(530px, 759px, #0e5fff33);
 }
 </style>

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

@@ -2,6 +2,14 @@
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
+
+const list = [
+  { title: '智慧停车', image: '/images/welcome/car.png', target: '/smart-park' },
+  { title: '智慧配送', image: '/images/welcome/distribution.png', target: '/smart-park' },
+  { title: '智慧渣土', image: '/images/welcome/muck.png', target: '/smart-park' },
+  { title: '智慧洁城', image: '/images/welcome/clean-city.png', target: '/smart-park' },
+  { title: '智慧路灯', image: '/images/welcome/lamp.png', target: '/smart-park' },
+];
 </script>
 
 <template>
@@ -14,25 +22,9 @@ const router = useRouter();
       </p>
     </div>
     <ul class="welcome__content-list">
-      <li @click="router.push('/smart-park')">
-        <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
-        <span>智慧停车</span>
-      </li>
-      <li>
-        <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
-        <span>智慧配送</span>
-      </li>
-      <li>
-        <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
-        <span>智慧渣土</span>
-      </li>
-      <li>
-        <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
-        <span>智慧洁城</span>
-      </li>
-      <li>
-        <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
-        <span>智慧路灯</span>
+      <li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
+        <img :src="item.image" alt="distribution" />
+        <span>{{ item.title }}</span>
       </li>
     </ul>
   </div>
@@ -48,6 +40,7 @@ const router = useRouter();
 
   &-inner {
     margin: 156px 0 0 0;
+    animation: flipInY 1s 1.5s;
   }
 
   p {
@@ -74,7 +67,6 @@ const router = useRouter();
   height: 260px;
 
   li {
-    position: relative;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
@@ -83,10 +75,7 @@ const router = useRouter();
     width: 280px;
     height: 260px;
     cursor: pointer;
-
-    &:nth-child(n):hover {
-      background: linear-gradient(to bottom, #164ec2c9, #1fa3dec9);
-    }
+    transition: all 1s;
 
     &:nth-child(1) {
       background: linear-gradient(to bottom, #006efec9, #494affc9);
@@ -108,9 +97,14 @@ const router = useRouter();
       background: linear-gradient(to bottom, #0ad1d1c9, #10607cc9);
     }
 
+    &:nth-child(n):hover {
+      background: linear-gradient(to bottom, #164ec2c9, #1fa3dec9);
+    }
+
     img {
       width: 108px;
       height: 108px;
+      animation: headShake 2s ease-out alternate infinite;
     }
 
     span {

src/views/welcome/index.vue

@@ -16,5 +16,6 @@ import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
   height: 100%;
   background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
   background-size: cover;
+  animation: bounceInUp 1s;
 }
 </style>