布局项目详情

jero-web/src/common/lang/en-us.js

@@ -1809,4 +1809,8 @@ module.exports = {
   upgradeOrNot:'Upgrade or not',
   operationRecords:'Operation Records',
   versionUpdatedRecord:'Version Updated Record',
+  regulatoryComplianceManagement:'Regulatory Compliance Management',
+  certificationActivityManagement:'Certification Activity Management',
+  parameterCollectionProgressManagement:'Parameter Collection Progress Management',
+  certificationTaskConfirmation:'Certification Task Confirmation',
 }

jero-web/src/common/lang/zh-cn.js

@@ -1911,4 +1911,8 @@ module.exports = {
   upgradeOrNot:'是否升版',
   operationRecords:'操作记录',
   versionUpdatedRecord:'版本更新记录',
+  regulatoryComplianceManagement:'法规符合性管理',
+  certificationActivityManagement:'认证活动管理',
+  parameterCollectionProgressManagement:'参数收集进度管理',
+  certificationTaskConfirmation:'认证任务确认',
 }

jero-web/src/views/projectManagement/components/ProjectDetails.vue

@@ -28,23 +28,8 @@
         <span class="text-field-right" :title="queryForm.projectStatus_dictText"
         >{{queryForm.projectStatus_dictText}}</span>
       </div>
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('targetMarket')">{{$t('targetMarket')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.targetMarket_dictText"-->
-<!--        >{{queryForm.targetMarket_dictText}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('projectVersion')">{{$t('projectVersion')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.projectVersion"-->
-<!--        >{{queryForm.projectVersion}}</span>-->
-<!--      </div>-->
     </div>
     <div class="content-text">
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('projectStatus')">{{$t('projectStatus')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.projectStatus_dictText"-->
-<!--        >{{queryForm.projectStatus_dictText}}</span>-->
-<!--      </div>-->
       <div class="text-field">
         <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
         <span class="text-field-right" :title="queryForm.studioEngineerName"
@@ -84,18 +69,6 @@
         <span class="text-field-right" :title="queryForm.softwareVersion"
         >{{queryForm.softwareVersion}}</span>
       </div>
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('IPDInformation')">{{$t('IPDInformation')}}</span>-->
-<!--        <span class="text-field-right text-field-right-color"-->
-<!--              :title="queryForm.ipdInfo"-->
-<!--              @click="urlClick(queryForm.ipdInfo)"-->
-<!--        >{{queryForm.ipdInfo}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('brand')">{{$t('brand')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.brandText"-->
-<!--        >{{queryForm.brandText}}</span>-->
-<!--      </div>-->
     </div>
     <div class="content-text">
       <div class="text-field">
@@ -127,33 +100,6 @@
         >{{queryForm.explanation}}</span>
       </div>
     </div>
-<!--    <div class="content-text">-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.studioEngineerName"-->
-<!--        >{{queryForm.studioEngineerName}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.certificationEngineerName"-->
-<!--        >{{queryForm.certificationEngineerName}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" style="float: left;margin-top: 3px" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>-->
-<!--        <span class="text-field-right"-->
-<!--        >-->
-<!--          <a-button type="primary" v-has="'projectRelatedPersonnel:page'"-->
-<!--                    :title="$t('ListOfRelevantPersonnel')"-->
-<!--                    class="button-text"-->
-<!--                    @click="ListOfRelevantPersonnelClick">-->
-<!--                  {{$t('ListOfRelevantPersonnel')}}-->
-<!--          </a-button>-->
-<!--        </span>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div class="content-text">-->
-
-<!--    </div>-->
     <div class="box-text">
       <div class="header-text">
         {{$t('complianceCertificationProgram')}}
@@ -181,21 +127,9 @@
       </div>
       <div class="process-content-right-xian"></div>
     </div>
-<!--    <a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">-->
+
-<!--      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">-->
+    <projectStatus />
-<!--        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"-->
+
-<!--                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">-->
-<!--        <deliverableStatusEchart @currentStatus="currentStatus" v-if="activeKey == $t('DeliverableStatus')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">-->
-<!--        <certificationProgressEchart @currentStatus="currentStatus" v-if="activeKey == $t('CertificationProgress')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">-->
-<!--        <ParameterCollectionEchart @currentStatus="currentStatus" v-if="activeKey == $t('Parametercollection')"/>-->
-<!--      </a-tab-pane>-->
-<!--    </a-tabs>-->
     <listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
     <addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
     <settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
@@ -208,22 +142,16 @@
   import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
   import addModel from './addModel'
   import settingList from './settingList'
-  import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
+  import projectStatus from './projectStatus'
-  import deliverableStatusEchart from './deliverableStatusEchart'
-  import ParameterCollectionEchart from './ParameterCollectionEchart'
-  import certificationProgressEchart from './certificationProgressEchart'
   import { mapGetters } from 'vuex'
 
   export default {
     name: 'ProjectDetails',
     components: {
       listOfRelevantPersonnel,
-      ParameterCollectionEchart,
       addModel,
       settingList,
-      currentStatusOfTheProjectEcharts,
+      projectStatus
-      deliverableStatusEchart,
-      certificationProgressEchart
     },
     data() {
       return {

jero-web/src/views/projectManagement/components/certificationActivity.vue

@@ -9,15 +9,7 @@
       </div>
     </div>
     <div class="box-content">
-      <div class="box-content-left">
+      <div class="box-content-bottom">
-        <div id="main-left-content"></div>
-      </div>
-      <div class="box-content-right">
-        <div id="main-right-content"></div>
-      </div>
-    </div>
-    <div class="box-content">
-      <div class="box-content-left">
         <div id="main-bottom"></div>
       </div>
     </div>
@@ -32,7 +24,7 @@
   import responsibilityList from './responsibilityList'
 
   export default {
-    name: 'DeliverableStatusEchart',
+    name: 'certificationActivity',
     components: {
       responsibilityList
     },
@@ -50,9 +42,7 @@
       }
     },
     mounted() {
-      this.mainLeftContentEcharts()
       this.mainRightEcharts()
-      this.mainRightContentEcharts()
       this.mainBottomEcharts()
       this.getData()
     },
@@ -243,23 +233,15 @@
       }
       ,
       mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
+        this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data, 1)
       }
       ,
       mainRightEcharts(data, color) {
-        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
+        this.getEcharts('main-right', this.$t('preHomoFlow'), color, data, 2)
-      }
-      ,
-      mainLeftContentEcharts(data, color) {
-        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
-      }
-      ,
-      mainRightContentEcharts(data, color) {
-        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
       }
       ,
       mainBottomEcharts(data, color) {
-        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
+        this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data, 5)
       },
       responsibility(item) {
         this.$emit('currentStatus', item)
@@ -276,48 +258,41 @@
     margin-bottom: 20px;
 
     .box-content-left {
-      width: calc(50% - 12px);
+      width: calc(50% - 10px);
-      height: 398px;
+      height: 346px;
       border: 2px #eff1f3 solid;
-
+      border-radius: 6px;
+      margin-top: 4px;
       #main-left {
         width: 100%;
         height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
-        box-sizing: border-box;
-      }
-
-      #main-left-content {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-
-      #main-bottom {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
         box-sizing: border-box;
       }
     }
 
     .box-content-right {
-      width: calc(50% - 12px);
+      width: calc(50% - 10px);
-      height: 398px;
+      height: 346px;
       border: 2px #eff1f3 solid;
-
+      border-radius: 6px;
+      margin-top: 4px;
       #main-right {
         width: 100%;
         height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
         box-sizing: border-box;
       }
-
+    }
-      #main-right-content {
+    .box-content-bottom{
+      width: 100%;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      #main-bottom {
         width: 100%;
         height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
         box-sizing: border-box;
       }
     }

jero-web/src/views/projectManagement/components/certificationProgressEchart.vue

@@ -1,248 +0,0 @@
-<template>
-  <div class="box-content">
-    <div class="box-content-left">
-      <div id="main-left"></div>
-    </div>
-    <div class="box-content-right">
-      <div id="main-right">
-        <a-table
-          ref="table"
-          :components="drag(columns,'columns')"
-          :loading="loading"
-          :pagination="false"
-          :scroll="{x: true}"
-          :data-source="dataSource"
-          :columns="columns"
-        >
-          <template slot="footer" slot-scope="currentPageData">
-            {{$t('totalTable')}}:{{certificationProgressTotal}}
-          </template>
-        </a-table>
-      </div>
-    </div>
-    <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
-  </div>
-</template>
-
-<script>
-  import * as echarts from 'echarts'
-  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
-  import responsibilityList from './responsibilityList'
-  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
-
-  export default {
-    name: 'certificationProgress',
-    components: {
-      responsibilityList
-    },
-    props: {
-      idList: {
-        type: Array,
-        default: []
-      }
-    },
-    mixins:[ResizeHeader, ResizeColumnProvide],
-    data() {
-      return {
-        loading: false,
-        dataSource: [],
-        certificationProgressTotal: 0,
-        url: {
-          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
-        },
-        columns: [
-          {
-            title: this.$t('notInvolved'),
-            align: 'left',
-            dataIndex: 'notInvolved',
-            width: 102
-          },
-          {
-            title: this.$t('toBeStarted'),
-            align: 'left',
-            dataIndex: 'toBeStarted',
-            width: 102
-          },
-          {
-            title: this.$t('inProgress'),
-            align: 'left',
-            dataIndex: 'inProgress',
-            width: 102
-          },
-          {
-            title: this.$t('experimentFailed'),
-            align: 'left',
-            dataIndex: 'experimentFailed',
-            width: 122
-          },
-          {
-            title: this.$t('experimentPassed'),
-            align: 'left',
-            dataIndex: 'experimentPassed',
-            width: 122
-          }
-        ]
-      }
-    },
-    mounted() {
-      this.mainLeftEcharts()
-      this.getData()
-    },
-    methods: {
-      responsibility(item) {
-        this.$emit('currentStatus', item)
-      },
-      getData() {
-        let id = ''
-        if (this.idList && this.idList.length > 0) {
-          id = this.idList.join(',')
-        } else {
-          id = this.$route.query.id
-        }
-        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
-          if (res.success) {
-            if (res.result) {
-              let certificationProgressMap = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressMapList : []
-              this.certificationProgressTotal = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressTotal : 0
-              this.dataEcharts(certificationProgressMap)
-            }
-          }
-        })
-      },
-      dataEcharts(val) {
-        let data = []
-        let color = []
-        this.dataSource = []
-        if (val && val.length > 0) {
-          this.dataSource = [{}]
-          val.forEach(res => {
-            if (res.certificationProgress == 'NA') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('notInvolved'),
-                status: res.certificationProgress
-              })
-              color.push('#707486')
-              this.dataSource[0].notInvolved = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Not start') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('toBeStarted'),
-                status: res.certificationProgress
-              })
-              color.push('#00B3BE')
-              this.dataSource[0].toBeStarted = res.certificationProgressCount
-            } else if (res.certificationProgress == 'In progress') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('inProgress'),
-                status: res.certificationProgress
-              })
-              color.push('#FDA71C')
-              this.dataSource[0].inProgress = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Test failed') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('experimentFailed'),
-                status: res.certificationProgress
-              })
-              color.push('#E83030')
-              this.dataSource[0].experimentFailed = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Test passed') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('experimentPassed'),
-                status: res.certificationProgress
-              })
-              color.push('#26BD4B')
-              this.dataSource[0].experimentPassed = res.certificationProgressCount
-            }
-          })
-        }
-        this.mainLeftEcharts(data, color)
-      },
-      getEcharts(chart, title, color, data) {
-        var myChart = echarts.init(document.getElementById(chart))
-        myChart.setOption({
-          title: {
-            text: title
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            itemWidth: 12,
-            itemHeight: 12,
-            bottom: '0',
-            left: 'center',
-            itemGap: 30,
-            icon: 'circle'
-          },
-          series: [
-            {
-              name: title,
-              type: 'pie',
-              radius: ['40%', '54%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              labelLine: {
-                show: false
-              },
-              color: color,
-              data: data
-            }
-          ]
-        })
-        myChart.on('click', (params) => {
-          let query = {
-            title: params.seriesName,
-            projectLibraryId: this.$route.query.id,
-            operatorType: 'queryCertificationProgressStatistics',
-            certificationProgress: params.data.status
-          }
-          this.$refs.responsibilityListRef.getData(query)
-        })
-      },
-      mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-  .box-content {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    .box-content-left {
-      width: calc(50% - 12px);
-      height: 398px;
-      border: 2px #eff1f3 solid;
-
-      #main-left {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-    }
-
-    .box-content-right {
-      width: calc(50% - 12px);
-      height: 398px;
-      border: 2px #eff1f3 solid;
-
-      #main-right {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-    }
-  }
-</style>

jero-web/src/views/projectManagement/components/projectStatus.vue

@@ -12,22 +12,22 @@
       </div>
     </div>
     <a-tabs v-model="activeKey" class="ant-tabs">
-      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
+      <a-tab-pane :key="$t('regulatoryComplianceManagement')" :tab="$t('regulatoryComplianceManagement')">
-        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
+        <regulatoryCompliance @currentStatus="currentStatus"
                                           :idList="idList"
-                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
+                                          v-if="activeKey == $t('regulatoryComplianceManagement')"/>
       </a-tab-pane>
-      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
+      <a-tab-pane :key="$t('certificationActivityManagement')" :tab="$t('certificationActivityManagement')">
-        <deliverableStatusEchart @currentStatus="currentStatus" :idList="idList"
+        <certificationActivity @currentStatus="currentStatus" :idList="idList"
-                                 v-if="activeKey == $t('DeliverableStatus')"/>
+                                 v-if="activeKey == $t('certificationActivityManagement')"/>
       </a-tab-pane>
-      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
+      <a-tab-pane :key="$t('parameterCollectionProgressManagement')" :tab="$t('parameterCollectionProgressManagement')">
-        <certificationProgressEchart @currentStatus="currentStatus" :idList="idList"
+        <parameterCollectionProgress @currentStatus="currentStatus" :idList="[]"
-                                     v-if="activeKey == $t('CertificationProgress')"/>
+                                   v-if="activeKey == $t('parameterCollectionProgressManagement')"/>
       </a-tab-pane>
-      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">
+      <a-tab-pane :key="$t('nonConformance')" :tab="$t('nonConformance')">
-        <ParameterCollectionEchart @currentStatus="currentStatus" :idList="[]"
+        <nonConformance @currentStatus="currentStatus" :idList="[]"
-                                   v-if="activeKey == $t('Parametercollection')"/>
+                                     v-if="activeKey == $t('nonConformance')"/>
       </a-tab-pane>
     </a-tabs>
     <versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
@@ -35,25 +35,25 @@
 </template>
 
 <script>
-  import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
+  import regulatoryCompliance from './regulatoryCompliance'
-  import deliverableStatusEchart from './deliverableStatusEchart'
+  import certificationActivity from './certificationActivity'
-  import ParameterCollectionEchart from './ParameterCollectionEchart'
+  import parameterCollectionProgress from './parameterCollectionProgress'
-  import certificationProgressEchart from './certificationProgressEchart'
   import versionStatistics from './versionStatistics'
+  import nonConformance from './nonConformance'
   import { getAction, postAction } from '@/api/manage'
 
   export default {
     name: 'projectStatus',
     components: {
-      ParameterCollectionEchart,
+      parameterCollectionProgress,
-      currentStatusOfTheProjectEcharts,
+      regulatoryCompliance,
-      deliverableStatusEchart,
+      certificationActivity,
-      certificationProgressEchart,
+      versionStatistics,
-      versionStatistics
+      nonConformance
     },
     data() {
       return {
-        activeKey: this.$t('CurrentStatusOfTheProject'),
+        activeKey: this.$t('regulatoryComplianceManagement'),
         selectedRowKeys: [],
         idList: []
       }
@@ -85,4 +85,7 @@
 
 <style scoped>
   @import '~@assets/less/common.less';
+  ::v-deep .ant-card-body{
+    padding: 24px 0 ;
+  }
 </style>

jero-web/src/views/projectManagement/components/regulatoryCompliance.vue

@@ -1,30 +1,14 @@
 <template>
   <div class="box-content">
-    <div class="headerText"
+    <div class="box-content-top">
-         :title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
+      <div id="main-top"></div>
-      {{this.$t('redSchedule')}};
-      {{this.$t('yellowSchedule')}};
-      {{this.$t('greenRequirements')}};
-      {{this.$t('blueUndeterminedState')}};
     </div>
     <div class="box-content-left">
       <div id="main-left"></div>
     </div>
     <div class="box-content-right">
       <div id="main-right">
-        <a-table
+
-          ref="table"
-          :components="drag(columns,'columns')"
-          :loading="loading"
-          :pagination="false"
-          :scroll="{x: true}"
-          :data-source="dataSource"
-          :columns="columns"
-        >
-          <template slot="footer" slot-scope="currentPageData">
-            {{$t('totalTable')}}:{{currentProjectStatusTotal}}
-          </template>
-        </a-table>
       </div>
     </div>
     <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
@@ -38,7 +22,7 @@
   import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
 
   export default {
-    name: 'CurrentStatusOfTheProjectEcharts',
+    name: 'regulatoryCompliance',
     components: {
       responsibilityList
     },
@@ -48,11 +32,10 @@
         default: []
       }
     },
-    mixins:[ResizeHeader, ResizeColumnProvide],
+    mixins: [ResizeHeader, ResizeColumnProvide],
     data() {
       return {
         loading: false,
-        dataSource: [],
         currentProjectStatusTotal: 0,
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
@@ -192,7 +175,9 @@
             }
           })
         }
-        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), color, data)
+        this.getEcharts('main-left', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-right', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
       },
       responsibility(item) {
         this.$emit('currentStatus', item)
@@ -206,25 +191,43 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
+
+    .box-content-top {
+      width: 100%;
+      margin-top: 4px;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+
+      #main-top {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }
 
     .box-content-left {
-      width: calc(50% - 12px);
+      width: calc(50% - 10px);
-      margin-top: 30px;
+      margin-top: 20px;
-      height: 398px;
+      height: 346px;
       border: 2px #eff1f3 solid;
+      border-radius: 6px;
 
       #main-left {
         width: 100%;
         height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
         box-sizing: border-box;
       }
     }
 
     .box-content-right {
-      width: calc(50% - 12px);
+      width: calc(50% - 10px);
-      margin-top: 30px;
+      margin-top: 20px;
-      height: 398px;
+      height: 346px;
+      border-radius: 6px;
       border: 2px #eff1f3 solid;
 
       #main-right {