更改首页样式

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :style="{ backgroundImage: `url(${backgroundImg})` }">
+  <div id="app">
     <Nav />
     <div class="content">
       <router-view />
@@ -8,13 +8,9 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
   import { useRoute } from 'vue-router';
   import Nav from '@/components/Nav.vue';
   const route = useRoute();
-  const backgroundImg = computed(() => {
-    return route.path === '/home' ? '/src/assets/images/home/home-bg@1X.png' : '';
-  });
 </script>
 
 <style scoped lang="scss">
@@ -23,9 +19,6 @@
     flex-direction: column;
     width: 100vw;
     height: 100vh;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
   }
   .content {
     flex: 1;

src/components/Nav.vue

@@ -84,8 +84,10 @@
     width: 100%;
     height: 78cpx;
     background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
+    z-index: 2;
     &__nav {
       @include flex-center;
+      gap: 25cpx;
       height: 100%;
       margin-left: 32cpx;
       &--item {
@@ -112,7 +114,7 @@
   }
   .platform-name {
     font-size: 18cpx;
-    font-weight: 600;
+    font-weight: 550;
     margin-left: 9cpx;
   }
   .platform__right {

src/constant/nav.ts

@@ -45,26 +45,12 @@ export const NAV_LIST = [
     name: 'DisasterPrevention',
   },
   {
-    name: '',
+    name: '应急管理',
     path: '',
     meta: {
       title: '应急管理',
     },
   },
-  {
-    name: '',
-    path: '',
-    meta: {
-      title: '智慧视觉',
-    },
-  },
-  {
-    name: '',
-    path: '',
-    meta: {
-      title: '物联集成',
-    },
-  },
   {
     name: 'Platform',
     path: '/platform',

src/main.scss

@@ -8,11 +8,10 @@
   box-sizing: border-box;
   &::-webkit-scrollbar {
     position: relative;
-    width: 3px;
+    width: 0;
   }
   &::-webkit-scrollbar-thumb {
-    background-color: rgba(155, 155, 155, 0.5);
-    border-radius: 4px;
+    background-color: transparent;
   }
 }
 html {

src/router/full-routes.ts

@@ -28,7 +28,7 @@ export const HOME_PAGE: RouteRecordString = {
   component: '/home/PageHome',
   meta: {
     icon: '',
-    title: '公司主页',
+    title: '首页',
   },
 };
 

src/views/home/PageHome.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container home-container">
     <img :src="IntroductionWords" alt="公司标语" class="introduction-words" />
+    <section class="home-bg" />
     <section class="introduction-card-section">
       <IntroductionCard />
     </section>
@@ -17,21 +18,22 @@
     position: relative;
     display: flex;
     justify-content: center;
+    flex-direction: column;
   }
   .introduction-words {
     position: absolute;
-    left: 339cpx;
-    top: 72cpx;
-    width: 290cpx;
+    left: 405cpx;
+    top: 30cpx;
+    width: 265cpx;
+  }
+  .home-bg {
+    width: 100%;
+    height: 510cpx;
+    background: url('assets/images/home/home-bg@1X.png') no-repeat center center / cover;
   }
   .introduction-card-section {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    left: 0;
-    top: 480cpx;
     width: 100%;
-    height: 400cpx;
-    padding: 0 100cpx;
+    flex: 1;
+    padding: 26cpx 20cpx 57cpx 20cpx;
   }
 </style>

src/views/home/src/components/IntroductionCard.vue

@@ -1,14 +1,17 @@
 <template>
-  <div
-    class="introduction-card"
-    v-for="item in COMPANY_INTRODUCTION_CARD_LIST"
-    :key="item.title"
-    :style="{ backgroundImage: `url(${item.backgroundImg})` }"
-  >
-    <div class="introduction-card__title">{{ item.title }}</div>
-    <div class="introduction-card__content">
-      <div class="introduction-card__content-item" v-for="content in item.content" :key="content">
-        {{ content }}
+  <div class="introduction-card-container">
+    <div class="introduction-card" v-for="item in COMPANY_INTRODUCTION_CARD_LIST" :key="item.title">
+      <div class="introduction-card__header">
+        <img :src="item.icon" />
+        <p>{{ item.title }}</p>
+      </div>
+      <div class="introduction-card__content">
+        <section class="section-content">
+          <p v-for="content in item.leftContent" :key="content">{{ content }}</p>
+        </section>
+        <section class="section-content">
+          <p v-for="content in item.rightContent" :key="content">{{ content }}</p>
+        </section>
       </div>
     </div>
   </div>
@@ -18,25 +21,41 @@
 </script>
 
 <style lang="scss" scoped>
-  .introduction-card {
+  .introduction-card-container {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
     height: 100%;
-    padding: 35cpx 55cpx;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    &__title {
-      font-size: 32cpx;
-      font-weight: 600;
+  }
+  .introduction-card {
+    width: 361cpx;
+    height: 407cpx;
+    padding: 40cpx 34cpx 0 34cpx;
+    background-color: $white-color;
+    border-radius: 5cpx;
+    &__header {
+      @include flex-center;
+      flex-direction: column;
+      gap: 14cpx;
+      font-weight: 550;
+      font-size: 24cpx;
       color: #333;
-      margin-bottom: 20cpx;
+      img {
+        width: 100cpx;
+        height: 100cpx;
+      }
     }
     &__content {
       display: flex;
-      flex-direction: column;
-      gap: 10cpx;
+      justify-content: space-between;
       font-size: 18cpx;
       color: #666;
     }
   }
+  .section-content {
+    display: flex;
+    flex-direction: column;
+    gap: 17cpx;
+    margin-top: 32cpx;
+  }
 </style>

src/views/home/src/constant.ts

@@ -1,43 +1,40 @@
 /**
  * @description 公司介绍卡片常量
  */
-import productionSafetyBg from './images/production-safety@1X.png';
-import trafficSafetyBg from './images/traffic-safety@1X.png';
-import securityBg from './images/defend-secrecy@1X.png';
-import disasterPreventionBg from './images/disaster-prevention@1X.png';
-import emergencyManagementBg from './images/emergency-management@1X.png';
+import productionSafetyIcon from './images/production-safety@1X.png';
+import trafficSafetyIcon from './images/traffic-safety@1X.png';
+import securityIcon from './images/defend-secrecy@1X.png';
+import disasterPreventionIcon from './images/disaster-prevention@1X.png';
+import emergencyManagementIcon from './images/emergency-management@1X.png';
 export const COMPANY_INTRODUCTION_CARD_LIST = [
   {
     title: '生产安全',
-    content: [
-      '生产安全体系',
-      '安全责任落实',
-      '安全教育培训',
-      '风险识别与管控',
-      '隐患的排查与治理',
-      '安全奖惩与考核',
-      '安全文化',
-    ],
-    backgroundImg: productionSafetyBg,
+    leftContent: ['生产安全体系', '安全责任落实', '安全教育培训'],
+    rightContent: ['风险识别与管控', '隐患的排查与治理', '安全奖惩与考核', '安全文化'],
+    icon: productionSafetyIcon,
   },
   {
     title: '交通安全',
-    content: ['管理规定', '交通违规管理', '交通事故管理'],
-    backgroundImg: trafficSafetyBg,
+    leftContent: ['交通管理规定', '交通违规管理'],
+    rightContent: ['交通事故管理'],
+    icon: trafficSafetyIcon,
   },
   {
     title: '保卫保密',
-    content: ['保密要害部门(部位)安全', '治安重点部位安全监控', '人员管理', '门禁管理', '车辆管理'],
-    backgroundImg: securityBg,
+    leftContent: ['保密要害部门(部位)安全', '治安重点部位安全监控', '人员管理'],
+    rightContent: ['门禁管理', '车辆管理'],
+    icon: securityIcon,
   },
   {
     title: '灾害防范',
-    content: ['灾害监测', '灾害预警', '灾害预防', '灾害风险点查看', '灾害处置记录'],
-    backgroundImg: disasterPreventionBg,
+    leftContent: ['灾害监测', '灾害预警', '灾害预防'],
+    rightContent: ['灾害风险点查看', '灾害处置记录'],
+    icon: disasterPreventionIcon,
   },
   {
     title: '应急管理',
-    content: ['应急队伍', '应急预案', '应急演练', '应急物资', '应急处置'],
-    backgroundImg: emergencyManagementBg,
+    leftContent: ['应急队伍', '应急预案', '应急演练'],
+    rightContent: ['应急物资', '应急处置'],
+    icon: emergencyManagementIcon,
   },
 ];