style(home): 调整首页样式

src/views/home/components/BootCardSmall.vue

@@ -82,22 +82,31 @@ const jumpPage = (item: bootConfig) => {
             //border-style: solid;
             //border-color: rgb(238, 238, 238) rgb(238, 238, 238)
             //    rgb(238, 238, 238) rgb(133, 165, 255);
-            border: 1px solid #e6e6e6;
+            //border: 1px solid #e6e6e6;
             padding: 11px;
-            background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(135.62deg, rgba(47, 84, 235, 0.07) 22.27%, rgba(47, 84, 235, 0.01) 91.82%);
+            //background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(135.62deg, rgba(47, 84, 235, 0.07) 22.27%, rgba(47, 84, 235, 0.01) 91.82%);
-            border-radius: 2px;
+            //border-radius: 2px;
-            box-shadow: -2px 0 #85A5FF;
+            //box-shadow: -2px 0 #85A5FF;
+
+            background: linear-gradient(90deg, #F4F6FA 0%, #EBF2FF 45%, #F9FCFF 100%);
+            box-shadow: 0px 6px 20px 0px rgba(111,155,225,0.3);
+            border-radius: 35px;
+            border: 1px solid #FFFFFF;
             &:not(:first-child) {
                 margin-top: 12px;
             }
 
+
             .item-content {
                 display: flex;
                 align-items: center;
                 .item-label {
-                    color: #252526;
+                    //color: #252526;
                     font-size: 18px;
-                    font-weight: 700;
+                    //font-weight: 700;
+                    font-weight: 400;
+                    color: #333333;
+                    //line-height: 44px;
                 }
             }
 
@@ -107,6 +116,14 @@ const jumpPage = (item: bootConfig) => {
                 bottom: 0;
                 width: 37px;
             }
+          &:hover {
+            background: linear-gradient(90deg, #E9F8FF 0%, #D9EDFF 46%, #E9F8FF 100%);
+            .item-content {
+              .item-label {
+                color: #0645CF;
+              }
+            }
+          }
         }
     }
 }

src/views/home/components/ComprehensiveHome/index.vue

@@ -76,7 +76,7 @@ const rulePermission = (action: string) =>
 // 物联网引导-数据
 const deviceBootConfig: bootConfig[] = [
     {
-        english: 'STEP1',
+        english: '步骤1',
         label: $t('ComprehensiveHome.index.926510-6'),
         link: 'device/Product',
         auth: productPermission('add'),
@@ -86,7 +86,7 @@ const deviceBootConfig: bootConfig[] = [
         },
     },
     {
-        english: 'STEP2',
+        english: '步骤2',
         label: $t('ComprehensiveHome.index.926510-7'),
         link: 'device/Instance',
         auth: devicePermission('add'),
@@ -96,7 +96,7 @@ const deviceBootConfig: bootConfig[] = [
         },
     },
     {
-        english: 'STEP3',
+        english: '步骤3',
         label: $t('ComprehensiveHome.index.926510-8'),
         link: 'rule-engine/Instance',
         auth: rulePermission('add'),
@@ -167,13 +167,13 @@ const deviceStepDetails: recommendList[] = [
 // 运维管理引导-数据
 const opsBootConfig: bootConfig[] = [
     {
-        english: 'STEP1',
+        english: '步骤1',
         label: $t('ComprehensiveHome.index.926510-18'),
         link: 'link/AccessConfig',
         image: '/images/home/guide-home4.png',
     },
     {
-        english: 'STEP2',
+        english: '步骤2',
         label: $t('ComprehensiveHome.index.926510-19'),
         link: 'Log',
         params: {
@@ -182,7 +182,7 @@ const opsBootConfig: bootConfig[] = [
         image: '/images/home/guide-home5.png',
     },
     {
-        english: 'STEP3',
+        english: '步骤3',
         label: $t('ComprehensiveHome.index.926510-20'),
         link: 'link/DashBoard',
         image: '/images/home/guide-home6.png',

src/views/home/components/DevOpsHome/index.vue

@@ -33,12 +33,12 @@ import { useI18n } from 'vue-i18n'
 const { t: $t } = useI18n()
 const opsBootConfig: bootConfig[] = [
     {
-        english: 'STEP1',
+        english: '步骤1',
         label: $t('DevOpsHome.index.926510-3'),
         link: 'link/AccessConfig',
     },
     {
-        english: 'STEP2',
+        english: '步骤2',
         label: $t('DevOpsHome.index.926510-4'),
         link: 'Log',
         params: {
@@ -46,7 +46,7 @@ const opsBootConfig: bootConfig[] = [
         },
     },
     {
-        english: 'STEP3',
+        english: '步骤3',
         label: $t('DevOpsHome.index.926510-5'),
         link: 'link/DashBoard',
     },

src/views/home/components/DeviceHome/index.vue

@@ -64,7 +64,7 @@ const deviceDialogVisible = ref(false);
 
 const deviceBootConfig: bootConfig[] = [
     {
-        english: 'STEP1',
+        english: '步骤1',
         label: $t('DeviceHome.index.926510-3'),
         link: 'device/Product',
         auth: productPermission('add'),
@@ -73,7 +73,7 @@ const deviceBootConfig: bootConfig[] = [
         },
     },
     {
-        english: 'STEP2',
+        english: '步骤2',
         label: $t('DeviceHome.index.926510-4'),
         link: 'device/Instance',
         auth: devicePermission('add'),
@@ -82,7 +82,7 @@ const deviceBootConfig: bootConfig[] = [
         },
     },
     {
-        english: 'STEP3',
+        english: '步骤3',
         label: $t('DeviceHome.index.926510-5'),
         link: 'rule-engine/Instance',
         auth: rulePermission('add'),

src/views/home/index.vue

@@ -122,3 +122,53 @@ if (isNoCommunity) {
     }
 }
 </style>
+
+<style lang="less">
+.iot-home-container{
+  font-family: Source Han Sans CN;
+  .boot-card-container,.device-count-container,.platform-pic-container,.step-container{
+    border-top: 2px solid #609CD8;
+    .title{
+      padding-left: 22px;
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0);
+        border: 1px solid rgba(0, 0, 0, 0);
+        transform: translateY(-50%);
+        //content: ' ';
+        width: 20px;
+        height: 20px;
+        background-image:
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px),
+            radial-gradient(circle, #0066CC 2px, transparent 2px);
+        background-size: 33.33% 33.33%;
+        background-repeat: no-repeat;
+        background-position:
+            0% 0%, 50% 0%, 100% 0%,
+            0% 50%, 50% 50%, 100% 50%,
+            0% 100%, 50% 100%, 100% 100%;
+      }
+    }
+    >.detail{
+      color: #007DFC;
+    }
+  }
+  .platform-pic-container{
+    .title{
+      padding-left: 40px;
+      &::before {
+        left: 14px;
+      }
+    }
+  }
+}
+</style>