fix: 修复环境&报告断言等bug

2024-03-28 16:45:41 +08:00 · 2024-03-28 16:45:41 +08:00 · 967f2e7c2d
parent f14aad9472
commit 967f2e7c2d
18 changed files with 165 additions and 88 deletions
--- a/frontend/src/assets/svg/service_01.svg
+++ b/frontend/src/assets/svg/service_01.svg
@ -0,0 +1,14 @@
+<svg width="568" height="85" viewBox="0 0 568 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2108_249979" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="568" height="78">
+<path d="M1.5 6C1.5 3.51472 3.51472 1.5 6 1.5H562C564.485 1.5 566.5 3.51472 566.5 6V72C566.5 74.4853 564.485 76.5 562 76.5H6C3.51472 76.5 1.5 74.4853 1.5 72V6Z" fill="url(#paint0_linear_2108_249979)" stroke="white" stroke-width="3"/>
+</mask>
+<g mask="url(#mask0_2108_249979)">
+<path opacity="0.05" d="M482.28 103.12C473.267 103.12 466.307 100.56 461.4 95.44C456.547 90.32 454.12 82.1333 454.12 70.88C454.12 59.6267 456.547 51.44 461.4 46.32C466.307 41.2 473.267 38.64 482.28 38.64C491.293 38.64 498.227 41.2 503.08 46.32C507.987 51.44 510.44 59.6267 510.44 70.88C510.44 81.28 508.173 89.2533 503.64 94.8C499.16 100.347 492.04 103.12 482.28 103.12ZM482.28 88.88C485.907 88.88 487.72 86.9067 487.72 82.96V58.8C487.72 54.8533 485.907 52.88 482.28 52.88C478.653 52.88 476.84 54.8533 476.84 58.8V82.96C476.84 86.9067 478.653 88.88 482.28 88.88ZM515.114 102V88.88H522.794V52.88H512.714V43.84L530.474 39.76H543.914V88.88H550.634V102H515.114Z" fill="#783887"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2108_249979" x1="-830.5" y1="39" x2="592" y2="39" gradientUnits="userSpaceOnUse">
+<stop offset="0.0336452" stop-color="#F2E9F6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
--- a/frontend/src/assets/svg/service_02.svg
+++ b/frontend/src/assets/svg/service_02.svg
@ -0,0 +1,14 @@
+<svg width="568" height="85" viewBox="0 0 568 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2108_249992" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="568" height="78">
+<path d="M1.5 6C1.5 3.51472 3.51472 1.5 6 1.5H562C564.485 1.5 566.5 3.51472 566.5 6V72C566.5 74.4853 564.485 76.5 562 76.5H6C3.51472 76.5 1.5 74.4853 1.5 72V6Z" fill="url(#paint0_linear_2108_249992)" stroke="white" stroke-width="3"/>
+</mask>
+<g mask="url(#mask0_2108_249992)">
+<path opacity="0.05" d="M482.28 103.12C473.267 103.12 466.307 100.56 461.4 95.44C456.547 90.32 454.12 82.1333 454.12 70.88C454.12 59.6267 456.547 51.44 461.4 46.32C466.307 41.2 473.267 38.64 482.28 38.64C491.293 38.64 498.227 41.2 503.08 46.32C507.987 51.44 510.44 59.6267 510.44 70.88C510.44 81.28 508.173 89.2533 503.64 94.8C499.16 100.347 492.04 103.12 482.28 103.12ZM482.28 88.88C485.907 88.88 487.72 86.9067 487.72 82.96V58.8C487.72 54.8533 485.907 52.88 482.28 52.88C478.653 52.88 476.84 54.8533 476.84 58.8V82.96C476.84 86.9067 478.653 88.88 482.28 88.88ZM512.554 95.12C512.554 90.5333 513.22 86.48 514.554 82.96C515.94 79.44 518.18 76.1333 521.274 73.04C524.367 69.8933 528.634 66.64 534.074 63.28C535.674 62.2667 536.794 61.4133 537.434 60.72C538.127 59.9733 538.474 59.0933 538.474 58.08C538.474 55.8933 536.9 54.8 533.754 54.8C531.407 54.8 528.714 55.4133 525.674 56.64C522.634 57.8667 519.887 59.4133 517.434 61.28L512.714 44.24C516.127 42.5333 520.047 41.0933 524.474 39.92C528.9 38.6933 533.354 38.08 537.834 38.08C545.194 38.08 550.9 39.7067 554.954 42.96C559.007 46.2133 561.034 50.8267 561.034 56.8C561.034 60 560.314 62.8267 558.874 65.28C557.487 67.68 555.78 69.7067 553.754 71.36C551.78 73.0133 549.194 74.9067 545.994 77.04C542.42 79.3867 539.78 81.4133 538.074 83.12C536.42 84.7733 535.594 86.6933 535.594 88.88H545.274V84.32H561.674V102H512.554V95.12Z" fill="#783887"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2108_249992" x1="-830.5" y1="39" x2="592" y2="39" gradientUnits="userSpaceOnUse">
+<stop offset="0.0336452" stop-color="#F2E9F6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
--- a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
@ -39,6 +39,7 @@
              class="ms-params-input"
              :max-length="255"
              :disabled="props.disabled"
+              :placeholder="t('apiTestDebug.commonPlaceholder')"
              @input="() => handleExpressionChange(rowIndex)"
              @change="() => handleExpressionChange(rowIndex)"
            >
@ -132,6 +133,7 @@
              :disabled="props.disabled"
              class="ms-params-input"
              :max-length="255"
+              :placeholder="t('apiTestDebug.commonPlaceholder')"
              @input="() => handleExpressionChange(rowIndex)"
              @change="() => handleExpressionChange(rowIndex)"
            >
--- a/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
@ -13,7 +13,7 @@
 <script setup lang="ts">
  import { useVModel } from '@vueuse/core';

-  import { statusCodeOptions } from '@/components/pure/ms-advance-filter/index';
+  import { EQUAL, statusCodeOptions } from '@/components/pure/ms-advance-filter/index';
  import paramsTable, { type ParamTableColumn } from '@/views/api-test/components/paramTable.vue';

  import { responseHeaderOption } from '@/config/apiTest';
@ -36,7 +36,7 @@

  const defaultParamItem = {
    variableName: '',
-    condition: '',
+    condition: EQUAL.value,
    expectedValue: '',
    enable: true,
  };
--- a/frontend/src/components/business/ms-assertion/index.vue
+++ b/frontend/src/components/business/ms-assertion/index.vue
@ -132,6 +132,7 @@
  import { cloneDeep } from 'lodash-es';
  import { VueDraggable } from 'vue-draggable-plus';

+  import { EQUAL } from '@/components/pure/ms-advance-filter/index';
  import MsButton from '@/components/pure/ms-button/index.vue';
  import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@ -321,7 +322,7 @@
              id: '',
              name: '',
              script: '',
-              params: [{}],
+              params: [],
              scriptLanguage: LanguageEnum.BEANSHELL_JSR233,
            },
          });
--- a/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
+++ b/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
@ -10,7 +10,9 @@
      @confirm="handleOk"
      @cancel="handleCancel"
    >
+      <slot>
        <MsButton :disabled="props.disabled" @click="showPopover">{{ t(props.removeText) }}</MsButton>
+      </slot>
    </MsPopconfirm>
  </span>
 </template>
--- a/frontend/src/components/pure/ms-form-create/formcreate-password.vue
+++ b/frontend/src/components/pure/ms-form-create/formcreate-password.vue
@ -6,6 +6,8 @@
    :placeholder="placeholder"
    style="width: 100%"
    autocomplete="username"
+    allow-clear
+    @clear="clearHandler"
  >
    <template #suffix>
      <span v-if="!isShowPassword" @click="togglePasswordVisibility">
@ -37,6 +39,11 @@
    }
  );

+  function clearHandler() {
+    inputValue.value = '';
+    emits('update:modelValue', inputValue.value);
+  }
+
  const isShowPassword = ref<boolean>(true);
  const togglePasswordVisibility = () => {
    isShowPassword.value = !isShowPassword.value;
--- a/frontend/src/components/pure/ms-pagination/page-item-step.vue
+++ b/frontend/src/components/pure/ms-pagination/page-item-step.vue
@ -1,8 +1,18 @@
 <template>
  <component :is="simple ? 'span' : 'li'" :class="cls" @click="handleClick">
    <slot :type="isNext ? 'next' : 'previous'">
-      <MsIcon v-if="isNext" size="12px" type="icon-icon_right_outlined" />
-      <MsIcon v-else size="12px" type="icon-icon_left_outlined" />
+      <MsIcon
+        v-if="isNext"
+        size="12px"
+        :class="{ 'text-[var(--color-text-4)]': props.current === props.pages }"
+        type="icon-icon_right_outlined"
+      />
+      <MsIcon
+        v-else
+        size="12px"
+        :class="{ 'text-[var(--color-text-4)]': props.current === 1 }"
+        type="icon-icon_left_outlined"
+      />
    </slot>
  </component>
 </template>
--- a/frontend/src/models/setting/serviceIntegration.ts
+++ b/frontend/src/models/setting/serviceIntegration.ts
@ -36,4 +36,5 @@ export interface StepListType {
  skipTitle: SkipTitle[];
  step: string;
  description: string;
+  bg?: string;
 }
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@ -100,7 +100,7 @@
          v-else
          v-model:model-value="record[columnConfig.dataIndex as string]"
          :disabled="props.disabledExceptParam"
-          :placeholder="t('apiTestDebug.paramNamePlaceholder')"
+          :placeholder="t('apiTestDebug.commonPlaceholder')"
          class="ms-form-table-input"
          :max-length="255"
          size="mini"
@ -319,14 +319,8 @@
      />
    </template>
    <!-- 响应头 -->
-    <template #header="{ record, columnConfig, rowIndex }">
-      <a-select
-        v-model="record.header"
-        :disabled="props.disabledExceptParam"
-        class="ms-form-table-input"
-        size="mini"
-        @change="() => addTableLine(rowIndex)"
-      >
+    <template #header="{ record, columnConfig }">
+      <a-select v-model="record.header" :disabled="props.disabledExceptParam" class="ms-form-table-input" size="mini">
        <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
      </a-select>
    </template>
@ -368,7 +362,8 @@
        :disabled="props.disabledExceptParam"
        size="mini"
        class="ms-form-table-input"
-        @change="() => addTableLine(rowIndex)"
+        :placeholder="t('apiTestDebug.commonPlaceholder')"
+        @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
      />
    </template>
    <!-- 项目选择 -->
@ -551,7 +546,7 @@
  import { groupCategoryEnvList, groupProjectEnv } from '@/api/modules/project-management/envManagement';
  import { useI18n } from '@/hooks/useI18n';
  import useAppStore from '@/store/modules/app';
-  import { isArray, isEmptyObject, isNumber, isObject, isRegExp, isString, isUndefined } from '@/utils/is';
+  import { isArray, isEmptyObject, isObject, isString } from '@/utils/is';

  import { ModuleTreeNode, TransferFileParams } from '@/models/common';
  import { HttpForm, ProjectOptionItem } from '@/models/projectManagement/environmental';
@ -770,32 +765,6 @@
      initProjectOptions();
    }
  });
-  /**
-   * 当表格输入框变化时，表格的每一个值存在的情况下才添加行
-   * @param 注意: 目前只做了数组&布尔&字符串类型的校验
-   * @param dataItem 当前编辑项
-   * @param
-   */
-  function validateAddLine(dataItem: Record<string, any>) {
-    return Object.keys(dataItem).every((key: any) => {
-      if (typeof dataItem[key] === 'boolean') {
-        return true;
-      }
-      if (dataItem[key] && typeof dataItem[key] !== 'boolean') {
-        if (isArray(dataItem[key])) {
-          return dataItem[key].length > 0;
-        }
-        if (isObject(dataItem[key]) && isEmptyObject(dataItem[key])) {
-          return true;
-        }
-        if (isString(dataItem[key])) {
-          return dataItem[key].trim().length > 0;
-        }
-        return true;
-      }
-      return false;
-    });
-  }

  /** 环境管理-环境组 end */

@ -810,11 +779,15 @@
      emitChange('addTableLine addLineDisabled', isInit);
      return;
    }
-    // 判断每一个值是否存在才会加行
    if (
-      (rowIndex === paramsData.value.length - 1 && validateAddLine(paramsData.value[rowIndex])) ||
-      paramsData.value[rowIndex].projectId
+      rowIndex === paramsData.value.length - 1 &&
+      (paramsData.value[rowIndex].key ||
+        paramsData.value[rowIndex].projectId ||
+        paramsData.value[rowIndex].header ||
+        paramsData.value[rowIndex].header ||
+        paramsData.value[rowIndex].expression)
    ) {
+      // 最后一行的更改才会触发添加新一行
      const id = new Date().getTime().toString();
      paramsData.value.push({
        id,
--- a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
@ -1,4 +1,13 @@
 <template>
+  <div v-if="isShowLoopControl?.stepType === ScenarioStepType.LOOP_CONTROLLER" class="my-4 flex justify-start">
+    <MsPagination
+      v-model:page-size="pageSize"
+      v-model:current="controlCurrent"
+      :total="controlTotal"
+      size="mini"
+      @change="loadControlLoop"
+    />
+  </div>
  <div class="mt-4 flex w-full items-center justify-between rounded bg-[var(--color-text-n9)] p-4">
    <div class="font-medium">
      <span
@ -103,9 +112,10 @@

  import { reportCaseStepDetail, reportStepDetail } from '@/api/modules/api-test/report';
  import { useI18n } from '@/hooks/useI18n';
+  import { findNodeByKey } from '@/utils';

  import type { ReportStepDetail, ReportStepDetailItem, ScenarioItemType } from '@/models/apiTest/report';
-  import { ResponseComposition } from '@/enums/apiEnum';
+  import { ResponseComposition, ScenarioStepType } from '@/enums/apiEnum';

  const props = defineProps<{
    mode: 'tiled' | 'tab'; // 平铺 | tab形式
@ -119,6 +129,7 @@
    environmentName?: string; // 环境
    isResponseModel?: boolean;
    reportId?: string;
+    steps?: ScenarioItemType[]; // 步骤列表
  }>();
  const { t } = useI18n();

@ -171,7 +182,7 @@

  const total = computed(() => (activeStepDetail.value?.content.subRequestResults || []).length);
  const current = ref(1);
-  const pageSize = ref(1);
+  const pageSize = ref(10);

  const activeType = ref<'ResContent' | 'SubRequest'>('ResContent');
  const subRequestResults = ref<any[]>([]);
@ -238,13 +249,13 @@

  const loading = ref<boolean>(false);
  // 获取详情
-  async function getStepDetail() {
+  async function getStepDetail(stepId: string) {
    try {
      loading.value = true;
      if (props.stepItem) {
        const res = await reportDetailMap[props.showType].stepDetail(
          (props.stepItem?.reportId || props.reportId) as string,
-          props?.stepItem?.stepId,
+          stepId,
          route.query.shareId as string | undefined
        );
        stepDetailInfo.value = cloneDeep(res) as any;
@ -279,11 +290,40 @@
    }
  }

+  /**
+   *  获取对应父是否为次数循环步骤
+   */
+
+  const isShowLoopControl = computed(() => {
+    if (props.steps && props.steps.length && props.stepItem) {
+      return findNodeByKey<ScenarioItemType>(props.steps, props.stepItem?.parentId, 'stepId');
+    }
+  });
+
+  const controlCurrent = ref(1);
+  const controlTotal = computed(() => (isShowLoopControl.value?.children || []).length);
+  /**
+   *  循环次数控制器
+   */
+  function loadControlLoop() {
+    if (
+      isShowLoopControl.value &&
+      isShowLoopControl.value?.stepType === ScenarioStepType.LOOP_CONTROLLER &&
+      isShowLoopControl.value.children &&
+      isShowLoopControl.value.children.length
+    ) {
+      const loopStepId = isShowLoopControl.value?.children[controlCurrent.value - 1].stepId;
+      if (loopStepId) {
+        getStepDetail(loopStepId);
+      }
+    }
+  }
+
  const originStepId = ref<string | undefined>('');

  watchEffect(() => {
    if (props?.stepItem?.stepId && props.stepItem.stepId !== originStepId.value) {
-      getStepDetail();
+      getStepDetail(props?.stepItem?.stepId);
    }
  });

--- a/frontend/src/views/api-test/report/component/caseReportDrawer.vue
+++ b/frontend/src/views/api-test/report/component/caseReportDrawer.vue
@ -89,7 +89,9 @@
      emit('update:visible', val);
    },
  });
+
  const innerReportId = ref(props.reportId);
+  const detailDrawerRef = ref();

  const reportStepDetail = ref<ReportDetail>({
    id: '',
--- a/frontend/src/views/api-test/report/component/reportList.vue
+++ b/frontend/src/views/api-test/report/component/reportList.vue
@ -401,9 +401,10 @@
  const showDetailDrawer = ref<boolean>(false);
  const showCaseDetailDrawer = ref<boolean>(false);
  const activeCaseReportType = ref('');
+
  function showReportDetail(id: string, rowIndex: number, integrated: boolean) {
    activeDetailId.value = id;
-    activeReportIndex.value = rowIndex;
+    activeReportIndex.value = rowIndex - 1;
    if (props.moduleType === ReportEnum.API_SCENARIO_REPORT) {
      showDetailDrawer.value = true;
    } else {
--- a/frontend/src/views/api-test/report/component/step/stepTree.vue
+++ b/frontend/src/views/api-test/report/component/step/stepTree.vue
@ -50,15 +50,11 @@
                  </div>
                </a-tooltip>
                <!-- 展开折叠控制器 -->
-                <div v-if="getShowExpand(step)" class="mx-1">
-                  <span
-                    v-if="step.fold"
-                    class="collapsebtn flex items-center justify-center"
-                    @click.stop="expandHandler(step)"
-                  >
+                <div v-if="getShowExpand(step)" class="mx-1" @click.stop="expandHandler(step)">
+                  <span v-if="step.fold" class="collapsebtn flex items-center justify-center">
                    <icon-right class="text-[var(--color-text-4)]" :style="{ 'font-size': '12px' }" />
                  </span>
-                  <span v-else class="expand flex items-center justify-center" @click.stop="expandHandler(step)">
+                  <span v-else class="expand flex items-center justify-center">
                    <icon-down class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }" />
                  </span>
                </div>
@ -66,7 +62,7 @@
                  <ConditionStatus class="mx-1" :status="step.stepType || ''" />
                </div>

-                <a-tooltip :content="step.name">
+                <a-tooltip :content="step.name" position="tl">
                  <div class="step-name-container w-full flex-grow" @click.stop="showDetail(step)">
                    <div class="one-line-text mx-[4px] max-w-[150px] text-[var(--color-text-1)]">
                      {{ step.name }}
@ -137,7 +133,7 @@
            </div>
            <div v-if="!step.fold" class="line"></div>
          </div>
-          <!-- 折叠展开内容 -->
+          <!-- 折叠展开内容 v-if="showResContent(step)" -->
          <div v-if="showResContent(step)" class="foldContent mt-4 pl-2">
            <a-scrollbar
              :style="{
@ -155,6 +151,7 @@
                :show-type="props.showType"
                :is-response-model="true"
                :report-id="props?.reportId"
+                :steps="steps"
              />
            </a-scrollbar>
          </div>
@ -232,6 +229,7 @@

  function expandHandler(item: ScenarioItemType) {
    const realStep = findNodeByKey<ScenarioItemType>(steps.value, item.stepId, 'stepId');
+    // TODO
    if (realStep) {
      realStep.fold = !realStep.fold;
    }
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
@ -526,6 +526,7 @@
        span: 15,
      },
      contentClass: 'contentClass',
+      autoLabelWidth: true,
    },
    // 暂时默认
    row: {
@ -697,11 +698,11 @@
      color: red !important;
    }
    :deep(.arco-form-item-label-col > .arco-form-item-label) {
-      color: var(--color-text-3) !important;
-      width: 84px;
      overflow: hidden;
+      width: 84px;
      text-overflow: ellipsis;
      white-space: nowrap;
+      color: var(--color-text-3) !important;
    }
    :deep(.arco-select-view-single) {
      border-color: transparent !important;
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@ -332,8 +332,8 @@
    isCover.value = cover;
    validateLoading.value = true;
    try {
-      start();
      validateModal.value = true;
+      start();
      const params = {
        projectId: appStore.currentProjectId,
        versionId: '',
@ -345,6 +345,7 @@
        validateInfo.value = result.data;
      }
    } catch (error) {
+      validateModal.value = false;
      console.log(error);
    } finally {
      validateLoading.value = false;
--- a/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue
@ -258,11 +258,11 @@
      }
    });
  };
-  onMounted(() => {
-    getDriverOption();
-  });

-  watchEffect(() => {
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
        if (props.currentId) {
          const currentItem = store.currentEnvDetailInfo.config.dataSources.find(
            (item) => item.id === props.currentId
@ -283,6 +283,12 @@
            formReset();
          }
        }
+      }
+    }
+  );
+
+  onMounted(() => {
+    getDriverOption();
  });
 </script>

--- a/frontend/src/views/setting/organization/serviceIntegration/index.vue
+++ b/frontend/src/views/setting/organization/serviceIntegration/index.vue
@ -11,7 +11,7 @@
              t('organization.service.expand')
            }}</span>
          </template>
-          <div class="flex w-[100%] flex-row justify-between text-sm font-normal">
+          <div class="flex w-[100%] flex-row justify-between pb-1 text-sm font-normal">
            <div v-for="(item, index) in cardContent" :key="item.id" class="item mt-4" :class="`ms-item-${index}`">
              <span class="mr-3">
                <svg-icon width="64px" height="46px" :name="item.icon" />
@ -114,6 +114,7 @@
      ],
      step: '@/assets/images/ms_plugindownload.jpg',
      description: 'organization.service.description',
+      bg: '@/assets/svg/service_01.svg',
    },
    {
      id: '1002',
@ -129,6 +130,7 @@
      ],
      step: '@/assets/images/ms_configplugin.jpg',
      description: 'organization.service.configDescription',
+      bg: '@/assets/svg/service_02.svg',
    },
  ]);
  const isCollapse = ref<boolean>(false);
@ -167,11 +169,13 @@
    @apply flex items-center rounded-md;
  }
  .ms-item-0 {
-    background: url('@/assets/images/ms_plugindownload.jpg') no-repeat center;
+    background: url('@/assets/svg/service_01.svg') no-repeat;
+    background-position: center;
    background-size: cover;
  }
  .ms-item-1 {
-    background: url('@/assets/images/ms_configplugin.jpg') no-repeat center;
+    background: url('@/assets/svg/service_02.svg') no-repeat;
+    background-position: center;
    background-size: cover;
  }
 </style>