diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index c2fb4dadc..d55d0c25b 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -694,6 +694,10 @@ li{
 .nz-pop2 {
   padding: 0 20px 20px 20px;
 }
+.nz-pop-select-area {
+  padding: 0 !important;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
+}
 .right-box-title {
   height: 36px;
   text-align: left;
diff --git a/nezha-fronted/src/components/common/popBox/selectArea.vue b/nezha-fronted/src/components/common/popBox/selectArea.vue
index 3d40d3807..0da5745b2 100644
--- a/nezha-fronted/src/components/common/popBox/selectArea.vue
+++ b/nezha-fronted/src/components/common/popBox/selectArea.vue
@@ -1,16 +1,16 @@
 <template>
-  <el-popover :placement="placement" width="250" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop">
+  <el-popover :placement="placement" width="487" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
     <div>
       <!-- begin--顶部按钮-->
-      <div class="pop-top-btns">
+      <!--<div class="pop-top-btns">
         <button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
           <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
           <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
         </button>
-      </div>
+      </div>-->
       <!-- end--顶部按钮-->
 
-      <div class="pop-title">{{$t('config.dc.selectArea')}}</div>
+      <!--<div class="pop-title">{{$t('config.dc.selectArea')}}</div>-->
       <div class="pop-item-wider">
         <el-scrollbar class="select-area-tree">
           <el-tree
@@ -92,8 +92,20 @@
     }
 </script>
 
-<style>
+<style lang="scss">
 .select-area-tree {
   height: 350px;
 }
+.select-area-tree .el-tree-node__content {
+  height: 34px;
+  line-height: 34px;
+}
+.select-area-tree .el-tree-node__content:hover {
+  color: $global-text-color-active;
+}
+.select-area-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  background-color: #F5F7FA;
+  font-weight: bold;
+  color: $global-text-color-active;
+}
 </style>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 9e75dfe76..9f9f36421 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -51,7 +51,7 @@
             <div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
           </el-form-item>
           <el-form-item :label='$t("config.dc.area")' prop="area">
-            <select-area ref="selectArea" :areaData="areaData" :placement="'left'" @selectArea="selectArea" :currentArea="currentDc.area.id">
+            <select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="currentDc.area.id">
               <template v-slot:trigger>
                 <el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>
               </template>