协同标绘2

src/views/mobileControl/OnlinePlotting/TextEdit.vue

@@ -1,50 +1,40 @@
 <template>
-  <van-popup
-      v-model:show="show"
-      @close="cancelEdit"
-  >
-    <div class="van-doc-block__title">编辑文案</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>
+    <van-popup
+        v-model:show="show"
+        @close="cancelEdit"
+    >
+      <div class="van-doc-block__title">编辑文案</div>
+      <van-field v-model="textEditState.text" type="textarea" :rows="5" label="文案" placeholder="请输入文案" />
+      <div class="flex-box">
+        <div class="edit-box">
+          <div class="flex">
+            <div class="text">字号</div>
+            <el-select
+                v-model="textEditState.fontSize"
+                :teleported="false"
+                style="width: 100px"
+            >
+              <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>
-      <div class="edit-btn-box">
-        <div class="btn" @click="cancelEdit">取消</div>
-        <div class="btn2" @click="addText">确定</div>
+      <div class="popup-footer">
+        <van-button @click="cancelEdit" class="cancel-btn">取 消</van-button>
+        <van-button type="primary" class="confirm-btn" @click="addText">确 定</van-button>
       </div>
-    </div>
-  </van-popup>
-  <div v-show="modelValue" class="text-edit-container">
-    <div class="gradient-text title">编辑文案</div>
-    <div class="close-btn" @click="cancelEdit"></div>
-
+    </van-popup>
   </div>
+
 </template>
 
 <script lang="ts" setup>
-// interface TextEditState {
-//   showTextEdit: boolean;
-//   fontColor: string;
-//   fontSize: string;
-//   text: string;
-//   lnglat: [];
-// }
 import { deepClone } from '@/utils';
+import { ElSelect, ElColorPicker } from 'element-plus';
 import {computed, reactive} from "vue";
 
 interface Props {
@@ -83,158 +73,30 @@ const addText = () => {
 </script>
 
 <style lang="scss" scoped>
-.text-edit-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1569px;
-  height: 760px;
-  background: url('@/assets/images/map/onlinePlotting/dialog2.png') no-repeat;
-  font-size: 36px;
-  padding: 180px 40px 20px 40px;
-  font-size: 36px;
-  .flex-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 40px;
-  }
-  .edit-box {
-    display: flex;
-    align-items: center;
-    .flex {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      margin-right: 20px;
-    }
-    .text {
-      white-space: nowrap;
-      margin-right: 8px;
-      font-size: 38px;
-      color: #ffffff;
-    }
-  }
-  .edit-btn-box {
-    display: flex;
-    align-items: center;
-  }
-}
-.title {
-  font-size: 84px;
-  position: absolute;
-  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;
+.flex-box {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   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;
-  }
+  margin-top: 10px;
 }
-.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/onlinePlotting/btn2.png') no-repeat;
+.edit-box {
   display: flex;
-  justify-content: center;
   align-items: center;
-  cursor: pointer;
-  margin-left: 20px;
-  color: #a7ccdf;
-  font-size: 32px;
+  .flex {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    padding: 0 16px;
+    margin-right: 6px;
+  }
+  .text {
+    white-space: nowrap;
+    margin-right: 8px;
+    font-size: 14px;
+  }
 }
-.btn2 {
-  width: 204px;
-  height: 120px;
-  background: url('@/assets/images/map/onlinePlotting/btn3.png') no-repeat;
+.edit-btn-box {
   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/close.png') no-repeat;
-  background-size: 100% 100%;
-  cursor: pointer;
 }
 </style>

src/views/mobileControl/OnlinePlotting/index.vue

@@ -28,10 +28,10 @@
           </div>
         </div>
       </van-tab>
-      <van-tab>
-        <template #title>{{ menu[1].name }}</template>
-        内容2
-      </van-tab>
+<!--      <van-tab>-->
+<!--        <template #title>{{ menu[1].name }}</template>-->
+<!--        内容2-->
+<!--      </van-tab>-->
     </van-tabs>
   </van-popup>
   <!--添加文字-->