diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index 5b42a930bd..59a66cf145 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -24,7 +24,7 @@
           >
             <el-tooltip :content="item.tooltip">
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
             </el-tooltip>
           </el-radio-button>
@@ -47,7 +47,7 @@
               :value="item.value"
             >
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
               <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
             </el-option>
@@ -257,7 +257,7 @@
               @click="goColor"
             />
           </el-tooltip>
-          <div :style="letterDivColor" />
+          <div :style="letterDivColor"/>
           <el-color-picker
             ref="colorPicker"
             v-model="styleInfo.color"
@@ -279,7 +279,7 @@
               @click="goBoardColor"
             />
           </el-tooltip>
-          <div :style="boardDivColor" />
+          <div :style="boardDivColor"/>
           <el-color-picker
             ref="boardColorPicker"
             v-model="styleInfo.borderColor"
@@ -302,7 +302,7 @@
               @click="goBackgroundColor"
             />
           </el-tooltip>
-          <div :style="backgroundDivColor" />
+          <div :style="backgroundDivColor"/>
           <el-color-picker
             ref="backgroundColorPicker"
             v-model="styleInfo.backgroundColor"
@@ -318,7 +318,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.video_info')">
-          <VideoLinks :link-info="curComponent.videoLinks" />
+          <VideoLinks :link-info="curComponent.videoLinks"/>
         </el-tooltip>
       </div>
 
@@ -327,7 +327,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.stream_media_info')">
-          <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
+          <StreamMediaLinks :link-info="curComponent.streamMediaLinks"/>
         </el-tooltip>
       </div>
 
@@ -336,7 +336,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.web_addr')">
-          <FrameLinks :link-info="curComponent.frameLinks" />
+          <FrameLinks :link-info="curComponent.frameLinks"/>
         </el-tooltip>
       </div>
       <div
@@ -356,7 +356,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
       >
         <el-tooltip :content="$t('panel.tab_inner_style')">
-          <tab-style :style-info="styleInfo" />
+          <tab-style :style-info="styleInfo"/>
         </el-tooltip>
       </div>
 
@@ -616,7 +616,7 @@ export default {
 
     mainStyle() {
       const style = {
-        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
+        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft - 10) + 'px',
         top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 20) + 'px'
       }
       return style