feat: 经营状态完成底部差一点

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+</script>
+
+<template>
+  <div class="business-supervision__bottom">
+    <div class="business-supervision__bottom-inner">
+      <div class="flex-x-between">
+        <div class="flex-x-between">
+          <h1 class="font-size-[22px]">年度税收概览</h1>
+          <span class="font-size-[12px]">单位/万元</span>
+        </div>
+        <TimeSelect :time-list="timeList" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__bottom {
+  margin: 20px 0 0 0;
+  width: 761px;
+  height: 294px;
+  background: url('@/assets/images/business-supervision/bg/content/bg-bottom.png') no-repeat center;
+  background-size: cover;
+
+  &-inner {
+    padding: 20px;
+    color: #fff;
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul class="business-supervision__middle">
+    <li>
+      <img
+        alt="bg-middle-1"
+        src="@/assets/images/business-supervision/bg/content/bg-middle-1.png"
+      />
+      <h2>员工</h2>
+      <strong>365</strong>
+      <span>相关员工</span>
+    </li>
+    <li>
+      <img
+        alt="bg-middle-2"
+        src="@/assets/images/business-supervision/bg/content/bg-middle-2.png"
+      />
+      <h2>智慧大楼</h2>
+      <strong>365</strong>
+      <span>区域面积/㎡</span>
+    </li>
+    <li>
+      <img
+        alt="bg-middle-3"
+        src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
+      />
+      <h2>智慧设备</h2>
+      <strong>1123</strong>
+      <span>设备总数</span>
+    </li>
+    <li>
+      <img
+        alt="bg-middle-3"
+        src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
+      />
+      <h2>数据报表</h2>
+      <strong>287</strong>
+      <span>报表下载总数</span>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__middle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 30px 0 0 0;
+  width: 761px;
+  height: 407px;
+  background: url('@/assets/images/business-supervision/bg/content/bg-middle.png ') no-repeat center;
+  background-size: cover;
+
+  li {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    img {
+      width: 162px;
+      height: 183px;
+      object-fit: cover;
+    }
+
+    h2 {
+      margin: 17px 0 18px 0;
+      width: 140px;
+      height: 40px;
+      font-size: 14px;
+      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
+        center;
+      background-size: cover;
+    }
+
+    strong {
+      font-size: 32px;
+      color: var(--color-primary-secondary);
+    }
+
+    span {
+      color: #fff;
+      font-size: 16px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,119 @@
+<script lang="tsx" setup>
+const list = [
+  {
+    title: '今日出口额 / 万元',
+    amount: 593,
+    detail: [
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+    ],
+  },
+  {
+    title: '今日货量/吨',
+    amount: 593,
+    detail: [
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+    ],
+  },
+  {
+    title: '今日进出车辆/辆',
+    amount: 593,
+    detail: [
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+      { name: '品类1', amount: 34 },
+    ],
+  },
+];
+
+const contentEl = () => {
+  return (
+    <>
+      {list.map((item, index) => (
+        <li key={index}>
+          <div className="business-supervision__content-cards-text">
+            <h1>{item.title}</h1>
+            <strong>{item.amount}</strong>
+            <section>
+              {item.detail.map((item) => (
+                <span>
+                  {item.name}:{item.amount}万元
+                </span>
+              ))}
+            </section>
+          </div>
+          <img
+            alt="card-1"
+            src={
+              new URL(
+                `../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
+                import.meta.url
+              ).href
+            }
+          />
+        </li>
+      ))}
+    </>
+  );
+};
+</script>
+
+<template>
+  <ul class="business-supervision__content-cards">
+    <component :is="contentEl()" />
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__content-cards {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 33px 43px 27px 23px;
+    width: 243px;
+    height: 184px;
+    color: #fff;
+    background: #19abdd;
+    border-radius: 5px;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-text {
+    z-index: 1;
+
+    h1 {
+      font-size: 15px;
+    }
+
+    strong {
+      font-size: 45px;
+      font-weight: bold;
+    }
+
+    section {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      font-size: 13px;
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-content/index.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import ContentBottom from '@/views/business-supervision/business-supervision-content/content-bottom.vue';
+import ContentMiddle from '@/views/business-supervision/business-supervision-content/content-middle.vue';
+import ContentTop from '@/views/business-supervision/business-supervision-content/content-top.vue';
+</script>
 
 <template>
-  <div class="manage-forms-content-container">
+  <div class="business-supervision__content">
-    <ul class="manage-forms-card-list">
+    <content-top />
-      <li>进出口</li>
+    <content-middle />
-    </ul>
+    <content-bottom />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.manage-forms-content-container {
-  width: 759px;
-  height: 100%;
-  background-color: #fff;
-}
-</style>

src/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue

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

src/views/business-supervision/business-supervision-left/compontens/import-export-value.vue

@@ -53,7 +53,7 @@ const displayContent = () => {
     margin: 0 3.5px;
     width: 49px;
     height: 69px;
-    background: url('@/assets/images/business-supervision/bg/bg-count.png') no-repeat;
+    background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
     background-size: cover;
   }
 }

src/views/business-supervision/business-supervision-left/compontens/manage-device.vue

@@ -41,11 +41,11 @@ defineProps<{
     justify-content: center;
     width: 74px;
     height: 46px;
-    background: url('@/assets/images/business-supervision/bg/device-carriage.png') no-repeat center;
+    background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
+      center;
     background-size: cover;
 
     i {
-      //color: #ff7e5f;
       font-size: 26px;
     }
   }

src/views/business-supervision/style.scss

@@ -40,7 +40,7 @@
       height: 42px;
       font-size: 22px;
       color: #fff;
-      background: url('@/assets/images/business-supervision/bg/bg-frame-4.png') no-repeat;
+      background: url('@/assets/images/business-supervision/bg/sidebar/bg-frame-4.png') no-repeat;
       background-size: cover;
     }
 
@@ -49,4 +49,12 @@
       color: var(--color-info-secondary);
     }
   }
-}
+
+  &__content {
+    width: 759px;
+    height: 100%;
+  }
+}
+
+
+