算法对比

front/src/views/home/algorithmCompare.vue

@@ -1,8 +1,14 @@
 <template>
-    <div>
+    <div class="bg">
         <home-header></home-header>
         <div class="box-container">
-            <div class="nav-box">能力集市 / 算法对比</div>
+            <div class="nav-box">
+                <a-breadcrumb>
+                    <a-breadcrumb-item>能力集市</a-breadcrumb-item>
+                    <a-breadcrumb-item>算法对比</a-breadcrumb-item>
+                </a-breadcrumb>
+                <!-- 能力集市 / 算法对比 -->
+            </div>
             <div class="content">
                 <div class="left">
                     <div class="left-item" v-for="(data, i) in tableData" :key="i"
@@ -256,7 +262,7 @@ const titleObj = {
             text: '算法应用期望达成效果', key: ''
         },
     ],
-    '计费标准': [
+    '计费标准信息': [
         {
             text: '是否计费', key: ''
         },
@@ -267,7 +273,7 @@ const titleObj = {
             text: '计费描述', key: ''
         },
         {
-            text: '计费标准', key: ''
+            text: '计费标准信息', key: ''
         },
     ],
     '使用方式': [
@@ -304,7 +310,7 @@ const titleObj = {
 }
 
 const arrayStr = [
-    '算法优势', '应用场景', '计费标准信息', '常见问题'
+    '算法优势', '应用场景', '计费标准信息信息', '常见问题'
 ]
 
 const activeNameIndex = ref(0)
@@ -501,23 +507,28 @@ const getLength = (array) => {
 
 
 <style lang="less" scoped>
+.bg {
+    background: #fff;
+    // background: rgba(244,245,248, 0.8);
+}
+
 // @font-face {
 //     font-family: 'num-typeface';
 //     src: url('~@/assets/newHome/font/num-typeface.otf');
 // }
 
 .border {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-bottom: none;
     border-right: none;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #dddee1;
 }
 
 .no-border-right {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
 }
 
@@ -540,11 +551,13 @@ const getLength = (array) => {
     }
 
     .nav-box {
-        height: 30px;
-        line-height: 30px;
+        height: 50px;
         width: 100%;
-        margin-bottom: 10px;
-        font-size: 12px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        background: rgba(244, 245, 248, 0.8);
+        padding-left: 10px;
     }
 
 
@@ -615,7 +628,7 @@ const getLength = (array) => {
         .bottom {
             width: 100%;
             overflow-y: auto;
-            height: 800px;
+            height: 680px;
             padding-bottom: 40px;
         }
 
@@ -628,10 +641,11 @@ const getLength = (array) => {
     padding: 20px 0 10px 10px;
     color: #212121;
     font-weight: bold;
+    background: rgba(244, 245, 248, 0.8);
 }
 
 .td-name {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -640,7 +654,7 @@ const getLength = (array) => {
 }
 
 .td {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -654,13 +668,14 @@ const getLength = (array) => {
 }
 
 .row-tr {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
     border-bottom: none;
+    background: #fff;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #dddee1;
 }
 
 .modal-box {