From b8fa7dac9d2ff3a4885fa9937f3f676546056a9a Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Tue, 7 Jan 2020 10:36:43 +0800
Subject: [PATCH] Fix front-end code specifications (#1726)

* Fix api url

* Fixed DAG zoom in and zoom out nodes separated from arrows

* Fix front-end code specifications

* Fix front-end code specifications

* Fix front-end code specifications
---
 .../src/js/conf/home/pages/dag/_source/dag.js |  7 +---
 .../js/conf/home/pages/dag/_source/dag.scss   | 19 ++++------
 .../js/conf/home/pages/dag/_source/dag.vue    |  8 ++--
 .../_source/formModel/_source/selectInput.vue |  4 +-
 .../dag/_source/formModel/formModel.scss      |  2 -
 .../pages/dag/_source/formModel/formModel.vue |  6 +--
 .../home/pages/dag/_source/formModel/log.vue  |  8 ++--
 .../tasks/_source/dependItemList.vue          | 10 ++---
 .../formModel/tasks/_source/httpParams.vue    |  6 +--
 .../formModel/tasks/_source/localParams.vue   |  6 +--
 .../formModel/tasks/_source/scriptBox.vue     |  2 +-
 .../formModel/tasks/_source/statementList.vue |  6 +--
 .../dag/_source/formModel/tasks/dependent.vue |  8 ++--
 .../dag/_source/formModel/tasks/shell.vue     |  2 +-
 .../pages/dag/_source/formModel/tasks/sql.vue |  4 +-
 .../pages/dag/_source/jumpAffirm/index.js     |  1 -
 .../pages/dag/_source/plugIn/downChart.js     |  6 +--
 .../pages/dag/_source/plugIn/jsPlumbHandle.js |  8 ++--
 .../home/pages/dag/_source/plugIn/util.js     |  2 +-
 .../pages/dag/_source/startingParam/index.vue |  2 +-
 .../dag/_source/variable/variablesView.vue    | 10 ++---
 .../pages/list/_source/createDataSource.vue   | 14 +++----
 .../datasource/pages/list/_source/list.vue    | 16 ++++----
 .../pages/servers/_source/zookeeperList.vue   |  4 +-
 .../home/pages/monitor/pages/servers/db.vue   | 12 +++---
 .../pages/monitor/pages/servers/master.vue    |  2 +-
 .../monitor/pages/servers/statistics.vue      |  8 ++--
 .../pages/monitor/pages/servers/worker.vue    |  2 +-
 .../_source/instanceConditions/index.vue      |  4 +-
 .../taskRecordList/_source/conditions.vue     |  4 +-
 .../definition/pages/list/_source/email.vue   |  2 +-
 .../definition/pages/list/_source/list.vue    | 18 ++++-----
 .../definition/pages/list/_source/start.vue   |  4 +-
 .../definition/pages/list/_source/timing.vue  |  4 +-
 .../pages/definition/pages/tree/index.vue     |  4 +-
 .../pages/instance/pages/gantt/index.vue      |  2 +-
 .../instance/pages/list/_source/list.vue      | 26 ++++++-------
 .../pages/list/_source/createProject.vue      |  2 +-
 .../projects/pages/list/_source/list.vue      | 18 ++++-----
 .../pages/taskInstance/_source/list.vue       | 24 ++++++------
 .../pages/file/pages/create/index.vue         |  6 +--
 .../pages/file/pages/details/index.vue        |  2 +-
 .../pages/file/pages/list/_source/list.vue    | 14 +++----
 .../pages/file/pages/list/_source/rename.vue  |  2 +-
 .../udf/pages/function/_source/createUdf.vue  |  8 ++--
 .../pages/udf/pages/function/_source/list.vue | 20 +++++-----
 .../pages/udf/pages/resource/_source/list.vue | 16 ++++----
 .../udf/pages/resource/_source/rename.vue     |  2 +-
 .../pages/queue/_source/createQueue.vue       |  4 +-
 .../pages/tenement/_source/createTenement.vue |  6 +--
 .../pages/users/_source/createUser.vue        | 12 +++---
 .../warningGroups/_source/createWarning.vue   |  4 +-
 .../workerGroups/_source/createWorker.vue     |  4 +-
 .../user/pages/token/_source/createToken.vue  |  4 +-
 .../module/components/crontab/source/app.vue  | 12 +++---
 .../fileUpdate/definitionUpdate.vue           |  8 ++--
 .../components/fileUpdate/fileUpdate.vue      | 10 ++---
 .../src/js/module/components/nav/nav.vue      | 38 +++++++++----------
 .../module/components/priority/priority.vue   |  6 +--
 .../secondaryMenu/secondaryMenu.vue           |  8 ++--
 .../components/tooltipsJSON/tooltipsJSON.vue  |  4 +-
 .../module/components/transfer/resource.vue   |  4 +-
 .../module/components/transfer/transfer.vue   |  4 +-
 .../src/sass/common/index.scss                | 24 ++++--------
 64 files changed, 250 insertions(+), 269 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
index 11f22132c7..8225673ecd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
@@ -177,8 +177,6 @@ Dag.prototype.backfill = function (arg) {
       // Number of tree node levels
       let countTree = getLeafCountTree(datas[0])
       function getMaxFloor(treeData) {
-        let floor = 0
-        let v = this
         let max = 0
         function each (data, floor) {
           data.forEach(e => {
@@ -224,9 +222,8 @@ Dag.prototype.backfill = function (arg) {
           return []
         }
         function toLine(data){
-          return data.reduce((arr, {id, name, targetarr, x, y, children = []}) =>
-          arr.concat([{id, name, targetarr, x, y}], toLine(children)), [])
-          return result;
+          return data.reduce((arrData, {id, name, targetarr, x, y, children = []}) =>
+          arrData.concat([{id, name, targetarr, x, y}], toLine(children)), [])
         }
         let listarr = toLine(datas);
         let listarrs = toLine(datas)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
index 88a8bdad39..237e6f5cd9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@@ -317,6 +317,7 @@ svg path:hover {
 .jtk-demo-canvas {
   position: relative;
   height: 100%;
+  display: flex;
 }
 
 .jtk-bootstrap {
@@ -359,10 +360,6 @@ svg path:hover {
   list-style-type: disc !important;
 }
 
-.jtk-demo-canvas {
-  display: flex;
-}
-
 .canvas-wide {
   padding-top: 10px;
   margin-left: 0;
@@ -459,6 +456,12 @@ svg path:hover {
   -webkit-transition: background-color 0.25s ease-in;
   -moz-transition: background-color 0.25s ease-in;
   transition: background-color 0.25s ease-in;
+  background-color: white;
+  opacity: 0.8;
+  padding: 0.3em;
+  border-radius: 0.5em;
+  border: 1px solid #346789;
+  cursor: pointer;
 }
 
 .aLabel.jtk-hover,
@@ -485,14 +488,6 @@ svg path:hover {
   }
 }
 
-.aLabel {
-  background-color: white;
-  opacity: 0.8;
-  padding: 0.3em;
-  border-radius: 0.5em;
-  border: 1px solid #346789;
-  cursor: pointer;
-}
 
 .jtk-ep {
   .ep {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 01da782246..feb756dabe 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -58,7 +58,7 @@
           </x-button>
           <span class="name">{{name}}</span>
           &nbsp;
-          <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><i class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></i></span>
+          <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
         </div>
         <div class="save-btn">
           <div class="operation" style="vertical-align: middle;">
@@ -68,7 +68,7 @@
                :id="item.code"
                :key="$index"
                @click="_ckOperation(item,$event)">
-              <i :class="item.icon" data-toggle="tooltip" :title="item.description" ></i>
+              <em :class="item.icon" data-toggle="tooltip" :title="item.description" ></em>
             </a>
           </div>
           <x-button type="text" icon="ans-icon-triangle-solid-right" @click="dagAutomaticLayout"></x-button>
@@ -257,8 +257,8 @@
                   let state = dom.find('.state-p')
                   dom.attr('data-state-id', v1.stateId)
                   dom.attr('data-dependent-result', v1.dependentResult || '')
-                  state.append(`<b class="${v1.icoUnicode} ${v1.isSpin ? 'as as-spin' : ''}" style="color:${v1.color}" data-toggle="tooltip" data-html="true" data-container="body"></b>`)
-                  state.find('b').attr('title', titleTpl(v2, v1.desc))
+                  state.append(`<strong class="${v1.icoUnicode} ${v1.isSpin ? 'as as-spin' : ''}" style="color:${v1.color}" data-toggle="tooltip" data-html="true" data-container="body"></strong>`)
+                  state.find('strong').attr('title', titleTpl(v2, v1.desc))
                 }
               })
             })
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
index f04e8f41d9..1d3902c83b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
@@ -32,8 +32,8 @@
               :value="selectedModel === null ? '0' : selectedModel.value"
               style="width: 100%;"
               @on-click-icon.stop="_ckIcon">
-        <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></i>
-        <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></i>
+        <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
+        <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
       </x-input>
     <x-option
             v-for="city in list"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
index abe06b912a..9d9667f723 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
@@ -115,8 +115,6 @@
         color: #0097e0;
       }
     }
-    &:hover {
-    }
     .list-t {
       width: 50%;
       float: left;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 57c7ad4c18..7e3853f104 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -21,10 +21,10 @@
       <span class="go-subtask">
         <!-- Component can't pop up box to do component processing -->
         <m-log :item="backfillItem">
-          <template slot="history"><a href="javascript:" @click="_seeHistory" ><i class="ansicon ans-icon-timer"></i><em>{{$t('View history')}}</em></a></template>
-          <template slot="log"><a href="javascript:"><i class="ansicon ans-icon-log"></i><em>{{$t('View log')}}</em></a></template>
+          <template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon ans-icon-timer"></em><em>{{$t('View history')}}</em></a></template>
+          <template slot="log"><a href="javascript:"><em class="ansicon ans-icon-log"></em><em>{{$t('View log')}}</em></a></template>
         </m-log>
-        <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><i class="ansicon ans-icon-node"></i><em>{{$t('Enter this child node')}}</em></a>
+        <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon ans-icon-node"></em><em>{{$t('Enter this child node')}}</em></a>
       </span>
     </div>
     <div class="content-box" v-if="isContentBox">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
index 7ec9cdfa7a..dbe3e1d6b1 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
@@ -29,16 +29,16 @@
             <span>{{$t('View log')}}</span>
             <div class="full-screen">
               <a href="javascript:" @click="_downloadLog" data-container="body" data-toggle="tooltip" :title="$t('Download Log')">
-                <i class="ans-icon-download" style="font-size: 20px"></i>
+                <em class="ans-icon-download" style="font-size: 20px"></em>
               </a>
               <a href="javascript:" class="refresh-log" :class="loading ? 'active' :''" @click="!loading && _refreshLog()" data-container="body" data-toggle="tooltip" :title="$t('Refresh Log')">
-                <i class="ans-icon-refresh"></i>
+                <em class="ans-icon-refresh"></em>
               </a>
               <a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
-                <i class="ans-icon-max"></i>
+                <em class="ans-icon-max"></em>
               </a>
               <a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
-                <i class="ans-icon-min"></i>
+                <em class="ans-icon-min"></em>
               </a>
             </div>
           </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
index 8ae0a7866a..d6c865716a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@@ -39,17 +39,17 @@
       </x-select>
       <template v-if="isInstance">
         <span class="instance-state">
-          <i class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></i>
-          <i class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></i>
-          <i class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></i>
+          <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+          <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+          <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
         </span>
       </template>
       <span class="operation">
         <a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
         </a>
         <a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
index c5e635bfeb..de5f781132 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
@@ -52,18 +52,18 @@
       </x-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (httpParamsList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <i class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add-dp" v-if="!httpParamsList.length">
       <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
index 2b4ade1ad5..0bbbb661f4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
@@ -66,18 +66,18 @@
       </x-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (localParamsList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add-dp" v-if="!localParamsList.length">
       <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
index c16d18cc38..91e1cb7e08 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
@@ -28,7 +28,7 @@
       </div>
     </m-list-box>
     <a class="ans-modal-box-close">
-      <i class="ans-icon-min" @click="closeModal"></i>
+      <em class="ans-icon-min" @click="closeModal"></em>
     </a>
   </div>
 </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
index 226e23219a..ecd10a9411 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
@@ -32,18 +32,18 @@
       </x-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (localStatementList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addStatement()" >
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add" v-if="!localStatementList.length">
       <a href="javascript:" @click="!isDetails && _addStatement()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
index 785a4fe193..cca9ec7003 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
@@ -23,8 +23,8 @@
           <a href="javascript:"
              @click="!isDetails && _addDep()"
              class="add-dep">
-            <i v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
-            <i v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></i>
+            <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+            <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
           </a>
         </div>
         <div class="dep-box">
@@ -40,13 +40,13 @@
                   @click="!isDetails && _setRelation($index)">
               {{el.relation === 'AND' ? $t('and') : $t('or')}}
             </span>
-            <i class="ans-icon-trash dep-delete"
+            <em class="ans-icon-trash dep-delete"
                data-toggle="tooltip"
                data-container="body"
                :class="_isDetails"
                @click="!isDetails && _deleteDep($index)"
                :title="$t('delete')" >
-            </i>
+            </em>
             <m-depend-item-list
               :dependTaskList='dependTaskList'
               v-model="el.dependItemList"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
index 8b45e7c3d1..17184eed75 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@@ -26,7 +26,7 @@
             style="opacity: 0">
           </textarea>
           <a class="ans-modal-box-max">
-            <i class="ans-icon-max" @click="setEditorVal"></i>
+            <em class="ans-icon-max" @click="setEditorVal"></em>
           </a>
         </div>
       </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index 9cef7bb801..7ab032a798 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -45,7 +45,7 @@
     </m-list-box>
     <template v-if="sqlType==0">
       <m-list-box>
-        <div slot="text"><b class='requiredIcon'>*</b>{{$t('Title')}}</div>
+        <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
         <div slot="content">
           <x-input
             type="input"
@@ -56,7 +56,7 @@
         </div>
       </m-list-box>
       <m-list-box>
-        <div slot="text"><b class='requiredIcon'>*</b>{{$t('Recipient')}}</div>
+        <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Recipient')}}</div>
         <div slot="content">
           <m-email ref="refEmail" v-model="receivers" :disabled="isDetails" :repeat-data="receiversCc"></m-email>
         </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
index 72e7d5a2b9..6ac87b3372 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
@@ -67,7 +67,6 @@ Affirm.paramVerification = (name) => {
       if (!dagStore.name) {
         store.commit('dag/setName', `${uuid('dag_')}${uuid() + uuid()}`)
       }
-      flag = false
     } else {
       flag = true
     }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js
index 8ee991f3e6..3dd13895b0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js
@@ -54,12 +54,12 @@ DownChart.prototype.download = function ({ dagThis }) {
     const copyDom = $('#canvas')
     // gain
     const scale = 1
-    // svg handle
-    const nodesToRecover = []
-    const nodesToRemove = []
     // divReport is the id of the dom that needs to be intercepted into a picture
     const svgElem = copyDom.find('svg')
     svgElem.each((index, node) => {
+      // svg handle
+      const nodesToRecover = []
+      const nodesToRemove = []
       let parentNode = node.parentNode
       let svg = node.outerHTML.trim()
       let canvas = document.createElement('canvas')
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index a918b80ca1..6523a1c298 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -266,10 +266,10 @@ JSP.prototype.tasksContextmenu = function (event) {
     let isTwo = store.state.dag.isDetails
 
     let html = [
-      `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><i class="ans-icon-play"></i><span>${i18n.$t('Start')}</span></a>`,
-      `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-edit"></i><span>${i18n.$t('Edit')}</span></a>`,
-      `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-copy"></i><span>${i18n.$t('Copy')}</span></a>`,
-      `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-trash"></i><span>${i18n.$t('Delete')}</span></a>`
+      `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="ans-icon-play"></em><span>${i18n.$t('Start')}</span></a>`,
+      `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-edit"></em><span>${i18n.$t('Edit')}</span></a>`,
+      `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-copy"></em><span>${i18n.$t('Copy')}</span></a>`,
+      `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-trash"></em><span>${i18n.$t('Delete')}</span></a>`
     ]
 
     let operationHtml = () => {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
index d9338a01d4..c10dfda5d6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@@ -37,7 +37,7 @@ const saveTargetarr = (valId, domId) => {
 }
 
 const rtBantpl = () => {
-  return `<i class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></i>`
+  return `<em class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
 }
 
 /**
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
index d5956a4c4b..892cead413 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
@@ -18,7 +18,7 @@
   <div class="starting-params-dag-index">
     <template v-if="isView && isActive">
        <div class="box">
-         <p class="box-hd"><i class="fa ans-icon-arrow-circle-right"></i><b>{{$t('Startup parameter')}}</b></p>
+         <p class="box-hd"><em class="fa ans-icon-arrow-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
          <ul class="box-bd">
            <li><span class="tab">{{$t('Startup type')}}：</span><span class="content">{{_rtRunningType(startupParam.commandType)}}</span></li>
            <li><span class="tab">{{$t('Complement range')}}：</span><span class="content" v-if="startupParam.commandParam && startupParam.commandParam.complementStartDate">{{startupParam.commandParam.complementStartDate}}-{{startupParam.commandParam.complementEndDate}}</span><span class="content" v-else>-</span></li>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
index d139e5de41..7209c4daff 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
@@ -18,7 +18,7 @@
   <div class="variable-model">
     <template v-if="list">
       <div class="list">
-        <div class="name"><i class="fa ans-icon-code"></i><b style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</b></div>
+        <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
         <div class="var-cont">
           <template v-for="(item,$index) in list.globalParams">
             <x-button
@@ -28,13 +28,13 @@
                     :key="$index"
                     :data-clipboard-text="item.prop + ' = ' +item.value"
                     :class="'gbudp-' + $index">
-              <b style="color: #2A455B;">{{item.prop}}</b> = {{item.value}}
+              <strong style="color: #2A455B;">{{item.prop}}</strong> = {{item.value}}
             </x-button>
           </template>
         </div>
       </div>
       <div class="list" style="height: 30px;">
-        <div class="name"><i class="fa ans-icon-code"></i><b style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</b></div>
+        <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
         <div class="var-cont">
           &nbsp;
         </div>
@@ -47,11 +47,11 @@
               <span v-for="(e,k,i) in el" :key="i">
                 <template v-if="item.taskType === 'SQL' || item.taskType === 'PROCEDURE'">
                   <template v-if="(k !== 'direct' && k !== 'type')">
-                    <b style="color: #2A455B;">{{k}}</b> = {{e}}
+                    <strong style="color: #2A455B;">{{k}}</strong> = {{e}}
                   </template>
                 </template>
                 <template v-else>
-                  <b style="color: #2A455B;">{{k}}</b> = {{e}}
+                  <strong style="color: #2A455B;">{{k}}</strong> = {{e}}
                 </template>
               </span>
             </x-button>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
index d308ceee15..07e0e8d83e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
@@ -22,7 +22,7 @@
     <div class="content-p">
       <div class="create-datasource-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Datasource')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Datasource')}}</template>
           <template slot="content">
             <x-radio-group v-model="type" size="small">
               <x-radio :label="'MYSQL'">MYSQL</x-radio>
@@ -37,7 +37,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Datasource Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Datasource Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -59,7 +59,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('IP')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('IP')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -70,7 +70,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Port')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Port')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -81,7 +81,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f :class="{hidden:showPrincipal}">
-          <template slot="name"><b>*</b>Principal</template>
+          <template slot="name"><strong>*</strong>Principal</template>
           <template slot="content">
             <x-input
               type="input"
@@ -92,7 +92,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('User Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -114,7 +114,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b :class="{hidden:showdDatabase}">*</b>{{$t('Database Name')}}</template>
+          <template slot="name"><strong :class="{hidden:showdDatabase}">*</strong>{{$t('Database Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
index f6b90ab367..ebf296d11c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
@@ -19,28 +19,28 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Datasource Name')}}</span>
           </th>
-          <th width="120">
+          <th scope="col" width="120">
             <span>{{$t('Datasource Type')}}</span>
           </th>
-          <th width="100">
+          <th scope="col" width="100">
             <span>{{$t('Datasource Parameter')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th width="150">
+          <th scope="col" width="150">
             <span>{{$t('Create Time')}}</span>
           </th>
-          <th width="150">
+          <th scope="col" width="150">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th width="80">
+          <th scope="col" width="80">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
index 24902ee469..de187dddc8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
@@ -97,8 +97,8 @@
           </td>
           <td>
             <span class="state">
-              <i class="ans-icon-success-solid success" v-if="item.state"></i>
-              <i class="ans-icon-fail-solid error" v-else></i>
+              <em class="ans-icon-success-solid success" v-if="item.state"></em>
+              <em class="ans-icon-fail-solid error" v-else></em>
             </span>
           </td>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
index 2fca9663f8..873cd4a1e8 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
@@ -30,8 +30,8 @@
             </div>
             <div class="value-p">
               <span class="state">
-                <i class="ans-icon-success-solid success" v-if="item.state"></i>
-                <i class="ans-icon-fail-solid error" v-else></i>
+                <em class="ans-icon-success-solid success" v-if="item.state"></em>
+                <em class="ans-icon-fail-solid error" v-else></em>
               </span>
             </div>
             <div class="text-1">{{$t('Health status')}}</div>
@@ -43,7 +43,7 @@
               <span>{{$t('Max connections')}} - {{item.date | formatDate}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[0]}">{{item.maxConnections}}</b>
+              <strong :style="{color:color[0]}">{{item.maxConnections}}</strong>
             </div>
             <div class="text-1">{{$t('Max connections')}}</div>
           </div>
@@ -54,7 +54,7 @@
               <span>{{$t('Threads connections')}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
+              <strong :style="{color:color[8]}">{{item.threadsConnections}}</strong>
             </div>
             <div class="text-1">{{$t('Threads connections')}}</div>
           </div>
@@ -65,7 +65,7 @@
                 <span>{{$t('Max used connections')}}</span>
               </div>
               <div class="value-p">
-                <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
+                <strong :style="{color:color[2]}">{{item.maxUsedConnections}}</strong>
               </div>
               <div class="text-1">
                 {{$t('Max used connections')}}
@@ -78,7 +78,7 @@
               <span>{{$t('Threads running connections')}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
+              <strong :style="{color:color[4]}">{{item.threadsRunningConnections}}</strong>
             </div>
             <div class="text-1">{{$t('Threads running connections')}}</div>
           </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
index bd760d51cd..dc06712cd2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
@@ -48,7 +48,7 @@
             <div class="col-md-4">
               <div class="text-num-model">
                 <div class="value-p">
-                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</b>
+                  <strong :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</strong>
                 </div>
                 <div class="text-1">
                   loadAverage
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
index f660b38682..e47c163c78 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
@@ -25,7 +25,7 @@
                 <span>{{$t('command number of waiting for running')}}</span>
               </div>
               <div class="value-p">
-                <b :style="{color:color[0]}"> {{commandCountData.normalCount}}</b>
+                <strong :style="{color:color[0]}"> {{commandCountData.normalCount}}</strong>
               </div>
             </div>
           </div>
@@ -35,7 +35,7 @@
               <span >{{$t('failure command number')}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[1]}"> {{commandCountData.errorCount}}</b>
+              <strong :style="{color:color[1]}"> {{commandCountData.errorCount}}</strong>
             </div>
           </div>
         </div>
@@ -45,7 +45,7 @@
               <span >{{$t('tasks number of waiting running')}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[0]}"> {{queueCount.taskQueue}}</b>
+              <strong :style="{color:color[0]}"> {{queueCount.taskQueue}}</strong>
             </div>
           </div>
         </div>
@@ -55,7 +55,7 @@
               <span >{{$t('task number of ready to kill')}}</span>
             </div>
             <div class="value-p">
-              <b :style="{color:color[1]}">{{queueCount.taskKill}}</b>
+              <strong :style="{color:color[1]}">{{queueCount.taskKill}}</strong>
             </div>
           </div>
         </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
index f935628520..b386ea0cc0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
@@ -48,7 +48,7 @@
             <div class="col-md-4">
               <div class="text-num-model">
                 <div class="value-p">
-                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</b>
+                  <strong :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</strong>
                 </div>
                 <div class="text-1">
                   loadAverage
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
index 6ca3836d05..bbade46f2c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
@@ -30,12 +30,12 @@
                 :value="[searchParams.startDate,searchParams.endDate]"
                 :panelNum="2">
           <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
-            <i slot="suffix"
+            <em slot="suffix"
                @click.stop="_dateEmpty()"
                class="ans-icon-fail-solid"
                v-show="value"
                style="font-size: 13px;cursor: pointer;margin-top: 1px;">
-            </i>
+            </em>
           </x-input>
         </x-datepicker>
       </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
index 459f0fcfdc..a82bd45b02 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
@@ -30,12 +30,12 @@
                 placement="bottom-end"
                 :panelNum="2">
           <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
-            <i slot="suffix"
+            <em slot="suffix"
                @click.stop="_dateEmpty()"
                class="ans-icon-fail-solid"
                v-show="value"
                style="font-size: 13px;cursor: pointer;margin-top: 1px;">
-            </i>
+            </em>
           </x-input>
         </x-datepicker>
       </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
index ba99b14b08..2585744198 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
@@ -19,7 +19,7 @@
     <div class="clearfix input-element" :class="disabled ? 'disabled' : ''">
       <span class="tag-wrapper" v-for="(item,$index) in activeList" :key="$index" :class="activeIndex === $index ? 'active' : ''">
         <span class="tag-text">{{item}}</span>
-        <i class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></i>
+        <em class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
       </span>
       <x-poptip
               placement="bottom-start"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index 3de59d9306..7a9a165873 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -19,31 +19,31 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th width="50">
+          <th scope="col" width="50">
             <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
           </th>
-          <th width="40">
+          <th scope="col" width="40">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Process Name')}}</span>
           </th>
-          <th width="50">
+          <th scope="col" width="50">
             <span>{{$t('State')}}</span>
           </th>
-          <th width="130">
+          <th scope="col" width="130">
             <span>{{$t('Create Time')}}</span>
           </th>
-          <th width="130">
+          <th scope="col" width="130">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th width="90">
+          <th scope="col" width="90">
             <span>{{$t('Timing state')}}</span>
           </th>
-          <th width="240">
+          <th scope="col" width="240">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
index 2049b6b16e..8672c41295 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
@@ -89,8 +89,8 @@
                 v-model="warningGroupId"
                 :disabled="!notifyGroupList.length">
           <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
-            <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></i>
-            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></i>
+            <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
+            <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></em>
           </x-input>
           <x-option
                   v-for="city in notifyGroupList"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
index a15999edbd..16f7020939 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
@@ -122,8 +122,8 @@
                 :disabled="!notifyGroupList.length"
                 v-model="warningGroupId">
           <x-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
-            <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></i>
-            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></i>
+            <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
+            <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
           </x-input>
           <x-option
                   v-for="city in notifyGroupList"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
index 99633cc852..4bc102dc24 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
@@ -43,7 +43,7 @@
               <span>Node Type</span>
             </a>
             <a href="javascript:" v-for="(k,v) in tasksType" :key="v">
-              <i class="ans-icon-circle-solid" :style="{color:k.color}"></i>
+              <em class="ans-icon-circle-solid" :style="{color:k.color}"></em>
               <span>{{v}}</span>
             </a>
           </div>
@@ -52,7 +52,7 @@
               <span>{{$t('Task Status')}}</span>
             </a>
             <a href="javascript:" v-for="(item) in tasksState" :key="item.id">
-              <i class="ans-icon-rect-solid" :style="{color:item.color}"></i>
+              <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
               <span>{{item.desc}}</span>
             </a>
           </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
index ab4f440bb1..e2e7d9b000 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
@@ -24,7 +24,7 @@
               <span>{{$t('Task Status')}}</span>
             </a>
             <a href="javascript:" v-for="(item) in tasksState" :key="item.id">
-              <i class="ans-icon-rect-solid" :style="{color:item.color}"></i>
+              <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
               <span>{{item.desc}}</span>
             </a>
           </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index 6cc0fb0bfb..1410a67f90 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -19,43 +19,43 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th width="50">
+          <th scope="col" width="50">
             <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
           </th>
-          <th width="40">
+          <th scope="col" width="40">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Process Name')}}</span>
           </th>
-          <th width="70">
+          <th scope="col" width="70">
             <span>{{$t('Run Type')}}</span>
           </th>
-          <th width="130">
+          <th scope="col" width="130">
             <span>{{$t('Scheduling Time')}}</span>
           </th>
-          <th width="130">
+          <th scope="col" width="130">
             <span>{{$t('Start Time')}}</span>
           </th>
-          <th width="130">
+          <th scope="col" width="130">
             <span>{{$t('End Time')}}</span>
           </th>
-          <th width="60">
+          <th scope="col" width="60">
             <span>{{$t('Duration')}}s</span>
           </th>
-          <th width="60">
+          <th scope="col" width="60">
             <span>{{$t('Run Times')}}</span>
           </th>
-          <th width="100">
+          <th scope="col" width="100">
             <span>{{$t('host')}}</span>
           </th>
-          <th width="60">
+          <th scope="col" width="60">
             <span>{{$t('fault-tolerant sign')}}</span>
           </th>
-          <th width="30">
+          <th scope="col" width="30">
             <span>{{$t('State')}}</span>
           </th>
-          <th width="210">
+          <th scope="col" width="210">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
index b78a72d8a3..8b709885f3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
@@ -19,7 +19,7 @@
     <template slot="content">
       <div class="projects-create-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Project Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
index b9cb59b9f6..f1b90ed666 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@@ -19,31 +19,31 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Project Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Owned Users')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Process Define Count')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Process Instance Running Count')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Create Time')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th width="80">
+          <th scope="col" width="80">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index 30e327e4ad..bb972c3f3b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -19,40 +19,40 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Process Instance')}}</span>
           </th>
-          <th width="90">
+          <th scope="col" width="90">
             <span>{{$t('Node Type')}}</span>
           </th>
-          <th width="40">
+          <th scope="col" width="40">
             <span>{{$t('State')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Submit Time')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Start Time')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('End Time')}}</span>
           </th>
-          <th width="110">
+          <th scope="col" width="110">
             <span>{{$t('host')}}</span>
           </th>
-          <th width="74">
+          <th scope="col" width="74">
             <span>{{$t('Duration')}}(s)</span>
           </th>
-          <th width="84">
+          <th scope="col" width="84">
             <span>{{$t('Retry Count')}}</span>
           </th>
-          <th width="50">
+          <th scope="col" width="50">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
index c5651adf7c..1e0e373f57 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
@@ -19,7 +19,7 @@
     <template slot="content">
       <div class="resource-create-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -31,7 +31,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Format')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Format')}}</template>
           <template slot="content">
             <x-select v-model="suffix" style="width: 100px;" @on-change="_onChange">
               <x-option
@@ -56,7 +56,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Content')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Content')}}</template>
           <template slot="content">
             <textarea id="code-create-mirror" name="code-create-mirror"></textarea>
           </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
index e8087aa43f..e961d8b1ee 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
@@ -21,7 +21,7 @@
         <h2>
           <span>{{name}}</span>
           <div class="down">
-            <i class="ans-icon-download" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></i>
+            <em class="ans-icon-download" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></em>
             <em>{{size}}</em>
           </div>
         </h2>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
index e40a038475..8841c42fac 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
@@ -19,25 +19,25 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('File Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th width="100">
+          <th scope="col" width="100">
             <span>{{$t('Size')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
index 6248b9338a..b082f883fb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
@@ -19,7 +19,7 @@
     <template slot="content">
       <div class="resource-rename-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
index 0176122b3b..13a337d557 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
@@ -19,7 +19,7 @@
     <template slot="content">
       <div class="udf-create-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('type')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('type')}}</template>
           <template slot="content">
             <x-radio-group v-model="type">
               <x-radio :label="'HIVE'">HIVE UDF</x-radio>
@@ -28,7 +28,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('UDF Function Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('UDF Function Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -39,7 +39,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Package Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Package Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -70,7 +70,7 @@
           </template>
         </m-list-box-f> -->
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('UDF Resources')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('UDF Resources')}}</template>
           <template slot="content">
             <x-select
                     filterable
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
index 736940020a..a4558c78d6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
@@ -19,34 +19,34 @@ v-ps<template>
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('UDF Function Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Class Name')}}</span>
           </th>
-          <!-- <th>
+          <!-- <th scope="col">
             <span>{{$t('Parameter')}}</span>
           </th> -->
-          <th width="80">
+          <th scope="col" width="80">
             <span>{{$t('type')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Jar Package')}}</span>
           </th>
-          <!-- <th>
+          <!-- <th scope="col">
             <span>{{$t('Library Name')}}</span>
           </th> -->
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th width="80">
+          <th scope="col" width="80">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
index 84674b2441..da122272df 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
@@ -19,28 +19,28 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th>
+          <th scope="col">
             <span>{{$t('#')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('UDF Resource Name')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('File Name')}}</span>
           </th>
-          <th width="80">
+          <th scope="col" width="80">
             <span>{{$t('File Size')}}</span>
           </th>
-          <th>
+          <th scope="col">
             <span>{{$t('Description')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Create Time')}}</span>
           </th>
-          <th width="140">
+          <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th width="110">
+          <th scope="col" width="110">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
index 59fd32c728..c2f65b908b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
@@ -19,7 +19,7 @@
     <template slot="content">
       <div class="resource-rename-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
index 46be94c4f9..617270b0f6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-tenement-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -34,7 +34,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Queue value')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Queue value')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
index ec4efeed3a..ad93e6b6f6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-tenement-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Tenant Code')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant Code')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -34,7 +34,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Tenant Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -45,7 +45,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Queue')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Queue')}}</template>
           <template slot="content">
             <x-select v-model="queueId">
               <x-option
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
index a7fcfab179..39dc27855a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-user-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('User Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -34,7 +34,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f v-if="router.history.current.name !== 'account'">
-          <template slot="name"><b>*</b>{{$t('Password')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Password')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -44,7 +44,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f v-if="isADMIN">
-          <template slot="name"><b>*</b>{{$t('Tenant')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant')}}</template>
           <template slot="content">
             <x-select v-model="tenantId">
               <x-option
@@ -61,8 +61,8 @@
           <template slot="content">
             <x-select v-model="queueName">
               <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a queue')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="queueName = ''">
-                <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="queueName ==''"></i>
-                <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="queueName!=''"></i>
+                <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="queueName ==''"></em>
+                <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="queueName!=''"></em>
               </x-input>
               <x-option
                       v-for="city in queueList"
@@ -74,7 +74,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Email')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Email')}}</template>
           <template slot="content">
             <x-input
                     type="input"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
index c2ca85e970..12dc324898 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-warning-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -33,7 +33,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Type')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Type')}}</template>
           <template slot="content">
             <x-select v-model="groupType">
               <x-option
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
index 80ea40ea88..a2ca912f05 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-worker-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Name')}}</template>
           <template slot="content">
             <x-input
                     type="input"
@@ -33,7 +33,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><b>*</b>IP</template>
+          <template slot="name"><strong>*</strong>IP</template>
           <template slot="content">
             <x-input
                     :autosize="{ minRows: 4, maxRows: 6 }"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
index cef3969c14..5cc1ca8d8f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
@@ -23,7 +23,7 @@
     <template slot="content">
       <div class="create-token-model">
         <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Failure time')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Failure time')}}</template>
           <template slot="content">
             <x-datepicker
                     :disabled-date="disabledDate"
@@ -35,7 +35,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f v-if="auth">
-          <template slot="name"><b>*</b>{{$t('User')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User')}}</template>
           <template slot="content">
             <x-select v-model="userId" @on-change="_onChange">
               <x-option
diff --git a/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue b/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue
index 74747c4d17..38604095c7 100755
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue
@@ -24,12 +24,12 @@
 
     <div class="v-crontab-model">
       <div class="clearfix v-crontab-tab">
-        <a href="javascript:" :class="tabVal === 'second' ?' active' :''" @click="onTab('second')"><i class="ans-icon-calendar"></i><span>{{$t('秒')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'minute' ?' active' :''" @click="onTab('minute')"><i class="ans-icon-calendar"></i><span>{{$t('分')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'hour' ?' active' :''" @click="onTab('hour')"><i class="ans-icon-calendar"></i><span>{{$t('时')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'day' ?' active' :''" @click="onTab('day')"><i class="ans-icon-calendar"></i><span>{{$t('天')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'month' ?' active' :''" @click="onTab('month')"><i class="ans-icon-calendar"></i><span>{{$t('月')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'year' ?' active' :''" @click="onTab('year')"><i class="ans-icon-calendar"></i><span>{{$t('年')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'second' ?' active' :''" @click="onTab('second')"><em class="ans-icon-calendar"></em><span>{{$t('秒')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'minute' ?' active' :''" @click="onTab('minute')"><em class="ans-icon-calendar"></em><span>{{$t('分')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'hour' ?' active' :''" @click="onTab('hour')"><em class="ans-icon-calendar"></em><span>{{$t('时')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'day' ?' active' :''" @click="onTab('day')"><em class="ans-icon-calendar"></em><span>{{$t('天')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'month' ?' active' :''" @click="onTab('month')"><em class="ans-icon-calendar"></em><span>{{$t('月')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'year' ?' active' :''" @click="onTab('year')"><em class="ans-icon-calendar"></em><span>{{$t('年')}}</span></a>
       </div>
       <div class="v-crontab-content">
         <template v-if="tabVal === 'second'">
diff --git a/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue b/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue
index 95851b7d11..115b939793 100644
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue
+++ b/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue
@@ -29,22 +29,22 @@
              @dragleave.prevent="dragOver = false"
              id="file-update-model">
           <div class="tooltip-info">
-            <i class="fa ans-icon-notice-solid"></i>
+            <em class="fa ans-icon-notice-solid"></em>
             <span>{{$t('Drag the file into the current upload window')}}</span>
           </div>
           <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
-            <i class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></i>
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
           </div>-->
           <div class="update-popup" v-if="dragOver">
             <div class="icon-box">
-              <i class="ans ans-icon-upload"></i>
+              <em class="ans ans-icon-upload"></em>
             </div>
             <p class="p1">
               <span>{{$t('Drag area upload')}}</span>
             </p>
           </div>
           <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('Upload Files')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
diff --git a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue b/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
index 469946613b..b7cef4ecfb 100644
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
+++ b/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
@@ -29,22 +29,22 @@
              @dragleave.prevent="dragOver = false"
              id="file-update-model">
           <div class="tooltip-info">
-            <i class="ans ans-icon-warn-solid"></i>
+            <em class="ans ans-icon-warn-solid"></em>
             <span>{{$t('Drag the file into the current upload window')}}</span>
           </div>
           <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
-            <i class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></i>
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
           </div>-->
           <div class="update-popup" v-if="dragOver">
             <div class="icon-box">
-              <i class="ans ans-icon-upload"></i>
+              <em class="ans ans-icon-upload"></em>
             </div>
             <p class="p1">
               <span>{{$t('Drag area upload')}}</span>
             </p>
           </div>
           <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('File Name')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
             <template slot="content">
               <x-input
                       type="input"
@@ -68,7 +68,7 @@
             </template>
           </m-list-box-f>
           <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('Upload Files')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
diff --git a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
index 486385e662..6d6170476f 100644
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
@@ -23,42 +23,42 @@
       <div class="clearfix list">
         <div class="nav-links">
           <router-link :to="{ path: '/home'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-home-empty"></i>{{$t('Home')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-home-empty"></em>{{$t('Home')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
       <div class="clearfix list">
         <div class="nav-links">
           <router-link :to="{ path: '/projects'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-setting"></i>{{$t('Project Manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-setting"></em>{{$t('Project Manage')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
       <div class="clearfix list">
         <div class="nav-links">
           <router-link :to="{ path: '/resource'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-folder-empty"></i>{{$t('Resources manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-folder-empty"></em>{{$t('Resources manage')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
       <div class="clearfix list">
         <div class="nav-links">
           <router-link :to="{ path: '/datasource'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-database"></i>{{$t('Datasource manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-database"></em>{{$t('Datasource manage')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
       <div class="clearfix list">
         <div class="nav-links">
           <router-link :to="{ path: '/monitor'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-monitor"></i>{{$t('Monitor')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-monitor"></em>{{$t('Monitor')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
       <div class="clearfix list" >
         <div class="nav-links">
           <router-link :to="{ path: '/security'}" tag="a" active-class="active" v-ps="['ADMIN_USER']">
-            <span><i class="ansiconfont ans-icon-shield"></i>{{$t('Security')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-shield"></em>{{$t('Security')}}</span><strong></strong>
           </router-link>
         </div>
       </div>
@@ -76,7 +76,7 @@
         </div>
         <div class="login-model" slot="reference">
           <span>{{activeLocale.name}}</span>
-          <i class="ans-icon-arrow-down"></i>
+          <em class="ans-icon-arrow-down"></em>
         </div>
       </x-poptip>
       </span>
@@ -87,24 +87,24 @@
               placement="bottom-end">
         <div class="lrns-list">
           <a href="javascript:" @click="_goAccount">
-            <i class="ans-icon-user-empty"></i>
+            <em class="ans-icon-user-empty"></em>
             <span>{{$t('User Information')}}</span>
           </a>
           <a href="javascript:" @click="_signOut">
-            <i class="ans-icon-off"></i>
+            <em class="ans-icon-off"></em>
             <span>{{$t('Logout')}}</span>
           </a>
         </div>
         <div class="login-model" slot="reference">
-          <i class="ans-icon-user-solid"></i>
+          <em class="ans-icon-user-solid"></em>
           <span>{{userInfo.userName}}</span>
-          <i class="ans-icon-arrow-down"></i>
+          <em class="ans-icon-arrow-down"></em>
         </div>
       </x-poptip>
     </div>
     <div class="file-update-model" @click="_toggleArchive" v-if="isUpdate">
       <div class="icon-cloud">
-        <i class="ans ans-icon-upload"></i>
+        <em class="ans ans-icon-upload"></em>
       </div>
       <div class="progress-box">
         <m-progress-bar :value="progress" text-placement="bottom"></m-progress-bar>
@@ -112,35 +112,35 @@
     </div>
     <div class="adaptive-m-nav">
       <div class="m-nav-box ">
-        <a href="javascript:" @click="mIsNav = !mIsNav"><i class="ans-icon-database"></i></a>
+        <a href="javascript:" @click="mIsNav = !mIsNav"><em class="ans-icon-database"></em></a>
       </div>
       <div class="m-title-box">
         <div class="logo-m"></div>
       </div>
       <div class="m-user-box">
-        <a href="javascript:" @click="_goAccount"><i class="ans-icon-user-empty"></i></a>
+        <a href="javascript:" @click="_goAccount"><em class="ans-icon-user-empty"></em></a>
       </div>
       <transition name="slide-fade">
         <div class="m-nav-list" v-if="mIsNav">
           <ul @click="mIsNav = false">
             <router-link :to="{ path: '/home'}" tag="li" active-class="active">
-              <i class="ans-icon-home-empty"></i>
+              <em class="ans-icon-home-empty"></em>
               <span>{{$t('Home')}}</span>
             </router-link>
             <router-link :to="{ path: '/projects'}" tag="li" active-class="active">
-              <i class="ans-icon-setting"></i>
+              <em class="ans-icon-setting"></em>
               <span>{{$t('Project manage')}}</span>
             </router-link>
             <router-link :to="{ path: '/resource'}" tag="li" active-class="active">
-              <i class="ans-icon-folder-empty"></i>
+              <em class="ans-icon-folder-empty"></em>
               <span>{{$t('Resources manage')}}</span>
             </router-link>
             <router-link :to="{ path: '/datasource'}" tag="li" active-class="active">
-              <i class="ans-icon-database"></i>
+              <em class="ans-icon-database"></em>
               <span>{{$t('Datasource manage')}}</span>
             </router-link>
             <router-link :to="{ path: '/security'}" tag="li" active-class="active" v-ps="['ADMIN_USER']">
-              <i class="ans-icon-shield"></i>
+              <em class="ans-icon-shield"></em>
               <span>{{$t('Security')}}</span>
             </router-link>
           </ul>
diff --git a/dolphinscheduler-ui/src/js/module/components/priority/priority.vue b/dolphinscheduler-ui/src/js/module/components/priority/priority.vue
index 3f594336f0..653343d8fe 100644
--- a/dolphinscheduler-ui/src/js/module/components/priority/priority.vue
+++ b/dolphinscheduler-ui/src/js/module/components/priority/priority.vue
@@ -21,7 +21,7 @@
         <div class="input-element" :class="isDetails?'disabled' : ''">
           <span v-html="_rtUnicode(selectedModel ? selectedModel.label : 'MEDIUM')"></span>
           <span class="label-p">{{selectedModel ? selectedModel.label : 'MEDIUM'}}</span>
-          <i class="ans-icon-arrow-down" ></i>
+          <em class="ans-icon-arrow-down" ></em>
         </div>
       </div>
       <x-option
@@ -31,7 +31,7 @@
               :label="item.code">
         <li class="ans-option ans-option-listp">
           <span class="default-option-class">
-            <i :class="item.unicode" :style="{color:item.color}"></i>
+            <em :class="item.unicode" :style="{color:item.color}"></em>
             {{item.code}}
           </span>
         </li>
@@ -90,7 +90,7 @@
     methods: {
       _rtUnicode (value) {
         let o = _.find(this.priorityList, ['code', value])
-        return `<i class="${o.unicode}" style="color:${o.color}"></i>`
+        return `<em class="${o.unicode}" style="color:${o.color}"></em>`
       },
       _onChange (o) {
         this.value = o.value
diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
index 0038a35b30..102df8f910 100644
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
@@ -26,9 +26,9 @@
           <router-link :to="{ name: item.path}">
             <div class="name" @click="_toggleSubMenu(item)">
               <a href="javascript:">
-                <i class="fa icon" :class="item.icon"></i>
+                <em class="fa icon" :class="item.icon"></em>
                 <span>{{item.name}}</span>
-                <i class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></i>
+                <em class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></em>
               </a>
             </div>
           </router-link>
@@ -36,9 +36,9 @@
         <template v-if="!item.path">
           <div class="name" @click="_toggleSubMenu(item)">
             <a href="javascript:">
-              <i class="fa icon" :class="item.icon"></i>
+              <em class="fa icon" :class="item.icon"></em>
               <span>{{item.name}}</span>
-              <i class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></i>
+              <em class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></em>
             </a>
           </div>
         </template>
diff --git a/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue b/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue
index 9fe98731ef..f5b1ee5edd 100644
--- a/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue
+++ b/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue
@@ -20,9 +20,9 @@
             trigger="click"
             placement="bottom-start">
       <pre :id="'result-' + id" class="result"></pre>
-      <i class="iconfont" slot="reference">
+      <em class="iconfont" slot="reference">
         <slot name="reference"></slot>
-      </i>
+      </em>
     </x-poptip>
   </div>
 </template>
diff --git a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
index 3e07a943d7..8b7da81d37 100644
--- a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
@@ -37,7 +37,7 @@
                      placeholder="Please enter keyword"
                      type="text"
                      style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
             </x-input>
           </div>-->
           <div class="scrollbar tf-content">
@@ -63,7 +63,7 @@
                      placeholder="Please enter keyword"
                      type="text"
                      style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
             </x-input>
           </div>-->
           <div class="scrollbar tf-content">
diff --git a/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue b/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue
index 97780b4818..eaa905755c 100644
--- a/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue
@@ -31,7 +31,7 @@
                      placeholder="Please enter keyword"
                      type="text"
                      style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
             </x-input>
           </div>-->
           <div class="scrollbar tf-content">
@@ -57,7 +57,7 @@
                      placeholder="Please enter keyword"
                      type="text"
                      style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
             </x-input>
           </div>-->
           <div class="scrollbar tf-content">
diff --git a/dolphinscheduler-ui/src/sass/common/index.scss b/dolphinscheduler-ui/src/sass/common/index.scss
index d97501decb..ba0f93ac3b 100644
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@@ -22,8 +22,6 @@
 @import "table";
 
 .ans-input {
-  &.ans-input--default {
-  }
   textarea,input {
     font-weight: 400;
   }
@@ -43,6 +41,7 @@ a:focus {
 }
 
 a:hover{
+  color:#0097e0;
   text-decoration: none !important;
 }
 
@@ -60,7 +59,6 @@ a:hover{
 
 body{
   background: #EDEEED;
-  font-family: "PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif";
   .home-main {
     min-height: calc(100vh - 100px);
     background: #fff;
@@ -119,6 +117,13 @@ body{
       }
     }
   }
+  font-family:13px/1.5 PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif;
+	-webkit-backface-visibility:hidden;
+	-webkit-tap-highlight-color:transparent;
+	-webkit-text-size-adjust:none;
+	-webkit-touch-callout:none;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale
 }
 
 // icon disabled state
@@ -225,15 +230,6 @@ ol,ul {
 img {
 	border:0
 }
-body {
-	font:13px/1.5 PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif;
-	-webkit-backface-visibility:hidden;
-	-webkit-tap-highlight-color:transparent;
-	-webkit-text-size-adjust:none;
-	-webkit-touch-callout:none;
-	-webkit-font-smoothing:antialiased;
-	-moz-osx-font-smoothing:grayscale
-}
 input::-ms-clear,input::-ms-reveal {
 	display:none
 }
@@ -247,10 +243,6 @@ a,body {
 	-webkit-box-sizing:border-box;
 	box-sizing:border-box
 }
-a:hover {
-	color:#0097e0;
-	text-decoration:none
-}
 [hidden],[v-cloak] {
 	display:none
 }