编辑文案

src/assets/styles/element-ui.scss

@@ -354,19 +354,7 @@
 
 .custom-textarea {
   position: relative;
-  el-textarea__inner {
-    box-shadow: none;
-    background-color: #0a3b87;
-    border: 1px solid #0d63c2;
-    font-size: 32px;
-    color: #a7ccdf;
-    font-family: PingFang SC;
-    height: 55px;
-    line-height: 55px;
-    &::placeholder {
-      color: #a7ccdf;
-    }
-  }
+
   &::before {
     content: '';
     position: absolute;
@@ -388,3 +376,4 @@
     background: url('@/assets/images/inputIcon2.png') no-repeat;
   }
 }
+

src/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue

@@ -1,21 +1,31 @@
 <template>
   <div v-show="modelValue" class="text-edit-container">
     <div class="gradient-text title">编辑文案</div>
-    <el-input v-model="textEditState.text" class="custom-textarea" :rows="8" type="textarea" placeholder="请输入文案" />
-    <div class="edit-box">
-      <div class="flex">
-        <div class="text">字号</div>
-        <el-input v-model="textEditState.fontSize" />
+    <div class="close-btn" @click="cancelEdit"></div>
+    <el-input v-model="textEditState.text" :rows="8" type="textarea" placeholder="请输入文案" />
+    <div class="flex-box">
+      <div class="edit-box">
+        <div class="flex">
+          <div class="text">字号</div>
+          <el-select
+            v-model="textEditState.fontSize"
+            class="custom-select"
+            popper-class="custom-select-popper"
+            :teleported="false"
+            style="width: 236px"
+          >
+            <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
+          </el-select>
+        </div>
+        <div class="color-container">
+          <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" />
+        </div>
       </div>
-      <div class="flex">
-        <div class="text">颜色</div>
-        <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" show-alpha size="large" />
+      <div class="edit-btn-box">
+        <div class="btn" @click="cancelEdit">取消</div>
+        <div class="btn2" @click="addText">确定</div>
       </div>
     </div>
-    <div class="edit-btn-box">
-      <el-button size="large" @click="cancelEdit">取消</el-button>
-      <el-button type="primary" size="large" @click="addText">确定</el-button>
-    </div>
   </div>
 </template>
 
@@ -27,13 +37,21 @@
 //   text: string;
 //   lnglat: [];
 // }
+import { deepClone } from '@/utils';
+
 interface Props {
   modelValue: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {});
+const options = reactive([
+  { name: '16px', value: '16px' },
+  { name: '26px', value: '26px' },
+  { name: '36px', value: '36px' },
+  { name: '38px', value: '38px' }
+]);
 const textEditState = reactive({
   fontColor: '#f80102',
-  fontSize: '36',
+  fontSize: '36px',
   text: ''
 });
 const emits = defineEmits(['update:modelValue', 'addText']);
@@ -42,8 +60,9 @@ const cancelEdit = () => {
   emits('update:modelValue', false);
 };
 const addText = () => {
+  const data = deepClone(textEditState);
   textEditState.text = '';
-  emits('addText');
+  emits('addText', data);
 };
 </script>
 
@@ -57,24 +76,34 @@ const addText = () => {
   height: 760px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog2.png') no-repeat;
   font-size: 36px;
-  padding: 180px 20px 20px 20px;
+  padding: 180px 40px 20px 40px;
   font-size: 36px;
+  .flex-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 40px;
+  }
   .edit-box {
-    margin-top: 20px;
     display: flex;
+    align-items: center;
     .flex {
+      display: flex;
+      align-items: center;
       flex: 1;
       margin-right: 20px;
     }
     .text {
       white-space: nowrap;
       margin-right: 8px;
-    }
-    .edit-btn-box {
-      margin-top: 20px;
-      display: flex;
+      font-size: 38px;
+      color: #ffffff;
     }
   }
+  .edit-btn-box {
+    display: flex;
+    align-items: center;
+  }
 }
 .title {
   font-size: 84px;
@@ -82,4 +111,114 @@ const addText = () => {
   top: 30px;
   left: 70px;
 }
+.el-textarea {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon1.png') no-repeat;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon2.png') no-repeat;
+  }
+}
+:deep(.el-textarea__inner) {
+  box-shadow: none;
+  background-color: #0a3b87;
+  border: 1px solid #0d63c2;
+  font-size: 32px;
+  color: #a7ccdf;
+  font-family: PingFang SC;
+  &::placeholder {
+    color: #a7ccdf;
+  }
+}
+.color-container {
+  width: 80px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #0d3980;
+  border: 4px solid #0b5fbb;
+  margin-left: 20px;
+  :deep(.el-color-picker) {
+    height: 60px !important;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon1.png') no-repeat;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon2.png') no-repeat;
+  }
+}
+.custom-select {
+  :deep(.el-select__wrapper) {
+    height: 50px !important;
+    line-height: 50px !important;
+    .el-select__placeholder {
+      height: 50px !important;
+      line-height: 50px !important;
+    }
+  }
+}
+.btn {
+  width: 140px;
+  height: 56px;
+  background: url('@/assets/images/map/rightMenu/onlinePlotting/btn2.png') no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 20px;
+  color: #a7ccdf;
+  font-size: 32px;
+}
+.btn2 {
+  width: 204px;
+  height: 120px;
+  background: url('@/assets/images/map/rightMenu/onlinePlotting/btn3.png') no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 20px;
+  color: #ffffff;
+  font-size: 32px;
+}
+.close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 75px;
+  height: 70px;
+  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
 </style>

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -103,7 +103,7 @@
     </div>
   </div>
   <!--添加文字-->
-  <TextEdit v-model="showTextEdit" />
+  <TextEdit v-model="showTextEdit" @addText="addText" />
   <!--绘制提示信息-->
   <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
   <Dialog v-model="showEdit" title="预案管理" width="450px" height="200px" style="position: absolute; top: 1280px">