refactor(仪表板): 网页组件文案优化

frontend/src/components/canvas/customComponent/DeFrame.vue

@@ -44,7 +44,12 @@
       v-else
       class="info-class"
     >
-      {{ $t('panel.web_add_tips') }}
+      <span>{{ $t('panel.web_add_tips_pre') }}</span>
+      <i
+        slot="reference"
+        class="icon iconfont icon-chaolianjie"
+      />
+      <span>{{ $t('panel.web_add_tips_suf') }}</span>
     </div>
   </el-row>
 </template>
@@ -53,6 +58,7 @@
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import eventBus from '@/components/canvas/utils/eventBus'
+
 export default {
   name: 'DeFrame',
   props: {
@@ -121,51 +127,56 @@ export default {
 </script>
 
 <style>
-  .info-class{
+.info-class {
-    text-align: center;
+  text-align: center;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    background-color: rgba(255,255,255,0.3);
+  background-color: rgba(255, 255, 255, 0.3);
-    font-size: 12px;
+  font-size: 12px;
-    color: #9ea6b2;
+  color: #9ea6b2;
-  }
+}
 
-  .main-frame{
+.main-frame {
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
-  }
+}
-  .frame-mask {
+
-    display: flex;
+.frame-mask {
-    opacity: 0.5;
+  display: flex;
-    position:absolute;
+  opacity: 0.5;
-    top:0px;
+  position: absolute;
-    z-index: 1;
+  top: 0px;
-    display: flex;
+  z-index: 1;
-    align-items: center;
+  display: flex;
-    justify-content: center;
+  align-items: center;
-  }
+  justify-content: center;
-  .edit-mask{
+}
-    left: 0px;
+
-    background-color: #5c5e61;
+.edit-mask {
-    height: 100%!important;
+  left: 0px;
-    width: 100% !important;
+  background-color: #5c5e61;
-  }
+  height: 100% !important;
-  .preview-top-mask{
+  width: 100% !important;
-    left: 0px;
+}
-    height: 15px!important;
+
-    width: 100% !important;
+.preview-top-mask {
-  }
+  left: 0px;
-  .preview-right-mask{
+  height: 15px !important;
-    right: 0px;
+  width: 100% !important;
-    height: 100%!important;
+}
-    width: 15px !important;
+
-  }
+.preview-right-mask {
-  .preview-left-mask{
+  right: 0px;
-    left: 0px;
+  height: 100% !important;
-    height: 100%!important;
+  width: 15px !important;
-    width: 15px !important;
+}
-  }
+
+.preview-left-mask {
+  left: 0px;
+  height: 100% !important;
+  width: 15px !important;
+}
 </style>
 

frontend/src/lang/en.js

@@ -2269,7 +2269,8 @@ export default {
     video_links: 'Video Links',
     web_url: 'Web URL',
     video_add_tips: 'Please Add Video Info...',
-    web_add_tips: 'Please Add Web Url Info...',
+    web_add_tips_pre: 'Please click',
+    web_add_tips_suf: 'Add Web Url Info...',
     panel_view_result_show: 'View Result',
     panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
     timeout_refresh: 'Timeout，Will Refresh...',

frontend/src/lang/tw.js

@@ -2263,7 +2263,8 @@ export default {
     video_links: '視頻鏈接',
     web_url: '網頁地址',
     video_add_tips: '請點擊添加配置視頻信息...',
-    web_add_tips: '請點擊添加網頁信息...',
+    web_add_tips_pre: '請點擊上方',
+    web_add_tips_suf: '添加網頁信息...',
     panel_view_result_show: '視圖結果',
     panel_view_result_tips: '選擇儀表闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
     timeout_refresh: '請求超時，稍後刷新...',

frontend/src/lang/zh.js

@@ -2263,7 +2263,8 @@ export default {
     video_links: '视频链接',
     web_url: '网页地址',
     video_add_tips: '请点击添加配置视频信息...',
-    web_add_tips: '请点击添加网页信息...',
+    web_add_tips_pre: '请点击上方',
+    web_add_tips_suf: '添加网页信息...',
     panel_view_result_show: '视图结果',
     panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
     timeout_refresh: '请求超时，稍后刷新...',