test

src/components/searchHeader/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="searchHeader">
     <div class="defaultBox Layout">
-      <div class="content mt12">
+      <div class="content mt5">
         <searchBox
           :list="data.default"
           @change="$emit('search')"
@@ -165,7 +165,7 @@ export default {
     position: relative;
     .btn {
       position: absolute;
-      bottom: 16px;
+      bottom: 0px;
       right: 0;
       font-size: 14px;
       color: #00A0FF;
@@ -176,7 +176,7 @@ export default {
     }
     .dateSelected {
       position: absolute;
-      bottom: 16px;
+      bottom: 0px;
       right: 80px;
       font-size: 14px;
       // color: #00A0FF;
@@ -200,8 +200,8 @@ export default {
       padding-right: 16px;
     }
   }
-  .mt12 {
-    margin-top: 12px;
+  .mt5 {
+    margin-top: 5px;
   }
 }
 </style>

src/components/searchHeader/searchBox.vue

@@ -77,8 +77,6 @@ export default {
 .searchBox {
   .row {
     width: 810px;
-    // justify-content: flex-start;
-    padding-bottom: 16px;
   }
   .name {
     width: 80px;

src/icons/svg/onlineProblem.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.308" height="14.215" viewBox="0 0 13.308 14.215">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#409eff"/>
+      <stop offset="1" stop-color="#80c9ff"/>
+    </linearGradient>
+  </defs>
+  <g id="问题解析-01" transform="translate(-201.5 -191.2)">
+    <path id="路径_13053" data-name="路径 13053" d="M212.3,205.415h-9.6a1.157,1.157,0,0,1-1.2-1.111V192.311a1.158,1.158,0,0,1,1.2-1.111h9.6a1.157,1.157,0,0,1,1.2,1.111v1.8a.443.443,0,0,1-.887,0v-1.8c0-.119-.145-.222-.309-.222h-9.6c-.165,0-.309.1-.309.222V204.3c0,.119.145.222.309.222h9.6c.165,0,.309-.1.309-.222V203.6a.443.443,0,1,1,.887,0v.709A1.156,1.156,0,0,1,212.3,205.415Z" fill="url(#linear-gradient)"/>
+    <path id="路径_13054" data-name="路径 13054" d="M297.807,353.9h-6.664a.45.45,0,0,1,0-.9h6.664a.45.45,0,0,1,0,.9Zm-1.332,3.095h-5.332a.439.439,0,1,1,0-.878h5.329a.439.439,0,1,1,0,.878Zm1.332,3.117h-6.664a.45.45,0,0,1,0-.9h6.664a.45.45,0,0,1,0,.9Z" transform="translate(-87.242 -158.248)" fill="url(#linear-gradient)"/>
+    <path id="路径_13055" data-name="路径 13055" d="M647.15,397.641a.444.444,0,0,1-.443-.443.91.91,0,1,0-1.82,0,.443.443,0,0,1-.887,0,1.8,1.8,0,1,1,3.6,0A.445.445,0,0,1,647.15,397.641Z" transform="translate(-432.787 -199.718)" fill="url(#linear-gradient)"/>
+    <path id="路径_13056" data-name="路径 13056" d="M710.343,461.089a.444.444,0,0,1-.443-.443v-.72a1.9,1.9,0,0,1,.56-1.361,1.908,1.908,0,0,0,.694-1.124.451.451,0,0,1,.439-.441h0a.437.437,0,0,1,.443.415,2.553,2.553,0,0,1-.964,1.789,1,1,0,0,0-.29.722v.72A.442.442,0,0,1,710.343,461.089Z" transform="translate(-497.24 -259.966)" fill="url(#linear-gradient)"/>
+    <path id="路径_13057" data-name="路径 13057" d="M708.974,658.074m-.474,0a.474.474,0,1,0,.474-.474A.474.474,0,0,0,708.5,658.074Z" transform="translate(-495.871 -456.162)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/router/newRouter.js

@@ -196,7 +196,7 @@ const layout = [
       {
         path: 'onlineProblem',
         name: '线上问题 ',
-        icon: 'problem',
+        icon: 'onlineProblem',
         cutOff: true,
         component: () => import('@/views/projectManage/onlineproblem'),
         meta: { title: '线上问题 ' }

src/views/projectManage/onlineproblem/create/component/makeBetterList.vue

@@ -50,7 +50,7 @@
             type="number"
           >
           %
-          <span class="brandColor pointer" @click="(e) => onChange('progress', '100', index)">
+          <span class="brandColor pointer overBtn" @click="(e) => onChange('progress', '100', index)">
             <i class="icon" :class="item.progress === '100' ? 'el-icon-success': 'el-icon-circle-check'" />
             标记为已完成
           </span>
@@ -148,7 +148,7 @@ export default {
       right: -30px;
     }
     .desc {
-      padding-left: 12px;
+      // padding-left: 12px;
       display: flex;
       .NO {
         display: inline-block;
@@ -168,7 +168,7 @@ export default {
       }
     }
     .formWrap {
-      padding-left: 16px;
+      padding-left: 4px;
       .formLine {
         margin-top: 20px;
       }
@@ -191,6 +191,9 @@ export default {
           padding: 0 0 0 5px;
           width: 44px;
         }
+        .overBtn {
+          margin-left: 20px;
+        }
       }
     }
   }

src/views/projectManage/onlineproblem/create/component/renderBase.js

@@ -33,16 +33,16 @@ const data = [
   [{
     ...d.adv[1][0]
   }, {
-    name: '影响描述',
+    name: '影响面描述',
     key: 'influenceDesc',
     type: 'input'
   }],
   [{
-    name: '闭环时长（分）',
+    name: '闭环时长(分)',
     key: 'closedLoopTime',
     type: 'number'
   }, {
-    name: 'SLA不可用时长（分）',
+    name: 'SLA不可用时长(分)',
     key: 'slaNotAvailableTime',
     type: 'number'
   }],

src/views/projectManage/onlineproblem/detial/component/base.vue

@@ -109,7 +109,7 @@
           </template>
         </over-click>
       </el-form-item>
-      <el-form-item label="闭环时常(分)：">
+      <el-form-item label="闭环时长(分)：">
         <over-click id="closedLoopTime-select" @overMouse="changeArea">
           <template slot="active">
             <el-input-number

src/views/projectManage/onlineproblem/detial/component/makeBetterView.vue

@@ -66,7 +66,7 @@ export default {
       right: -30px;
     }
     .desc {
-      padding-left: 12px;
+      // padding-left: 12px;
       display: flex;
       .NO {
         display: inline-block;
@@ -88,7 +88,7 @@ export default {
       }
     }
     .formWrap {
-      padding-left: 16px;
+      padding-left: 4px;
       .formLine {
         margin-top: 8px;
         .formcontent {

src/views/projectManage/onlineproblem/detial/index.vue

@@ -325,7 +325,7 @@ export default {
     .icon {
       font-size: 20px;
       color: #6f7c93;
-      line-height: 33px;
+      line-height: 60px;
     }
   }
   .headerH2 {
@@ -348,11 +348,32 @@ export default {
 </style>
 <style lang="scss">
 .wb-op-detial {
-  .headerH1 {
-    .el-input__inner {
-      border-color: transparent;
-      &:hover {
-        border-color: #DCDFE6;
+  .content {
+    &.headerH1 {
+      padding: 0px 30px;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        .el-input__inner {
+          border-color: transparent;
+          color: #333b4a;
+          font-size: 20px;
+          font-weight: 500;
+          &:hover {
+            border-color: #DCDFE6;
+          }
+        }
+      }
+    }
+    &.base {
+      .el-form-item__label {
+        color: #666;
+        font-size: 14px;
+        font-weight: 400;
+      }
+      .el-form-item__content {
+        color: #333;
+        font-size: 14px;
       }
     }
   }