Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/components/base/components/input/textarea.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="input textarea" 
-    :class="{suffix: $slots.icon || maxlength, disabled, right}"
-    ref="textRef">
-      {{modelValue}}
-    <textarea 
+    class="input textarea"
+    :class="{ suffix: $slots.icon || maxlength, disabled, right }"
+    ref="textRef"
+  >
+    <textarea
       class="ui-text"
       :value="modelValue"
       @input="inputHandler"
@@ -18,51 +18,42 @@
       v-bind="other"
     />
     <span class="replace"></span>
-    <span v-if="$slots.icon || props.maxlength"  class="retouch">
+    <span v-if="$slots.icon || props.maxlength" class="retouch">
       <slot name="icon" />
       <span v-if="props.maxlength" class="len">
-        <span>{{modelValue.length}}</span> / {{maxlength}}
+        <span>{{ modelValue.length }}</span> / {{ maxlength }}
       </span>
     </span>
   </div>
 </template>
 
 <script setup>
-import { textareaPropsDesc } from './state'
-import { 
-  nextTick,
-  ref
-} from 'vue'
+import { textareaPropsDesc } from "./state";
+import { nextTick, ref } from "vue";
 const props = defineProps({
   type: {
     type: String,
-    default: 'text'
+    default: "text",
   },
-  ...textareaPropsDesc
-})
+  ...textareaPropsDesc,
+});
 
-console.log(props)
-const emit = defineEmits([
-  'update:modelValue',
-  'focus',
-  'blur',
-  'click'
-])
-const textRef = ref(null)
-const inputRef = ref(null)
+console.log(props);
+const emit = defineEmits(["update:modelValue", "focus", "blur", "click"]);
+const textRef = ref(null);
+const inputRef = ref(null);
 
-
-const inputHandler = ev => {
-  emit('update:modelValue', ev.target.value)
+const inputHandler = (ev) => {
+  emit("update:modelValue", ev.target.value);
   nextTick(() => {
     if (ev.target.value !== props.modelValue.toString()) {
-      ev.target.value = props.modelValue.toString()
+      ev.target.value = props.modelValue.toString();
     }
-  })
-}
+  });
+};
 
 defineExpose({
   root: textRef,
-  input: inputRef
-})
-</script>
+  input: inputRef,
+});
+</script>

src/views/graphic/menus.ts

@@ -1,11 +1,15 @@
-import { uiType, UIType, graphicState } from '@/hook/useGraphic';
-import { findMenuByAttr, generateByMenus as generateByMenusRaw, generateMixMenus as generateMixMenusRaw } from '@/utils/menus';
-import Message from '@/components/base/components/message/message.vue';
-import RoadStructure from '@/graphic/enum/RoadStructure';
-import RoadTemplate from '@/graphic/enum/RoadTemplate';
-import { computed } from 'vue';
-import { mount } from '@/components/base/utils/componentHelper';
-import Setting from '@/views/graphic/setting.vue';
+import { uiType, UIType, graphicState } from "@/hook/useGraphic";
+import {
+  findMenuByAttr,
+  generateByMenus as generateByMenusRaw,
+  generateMixMenus as generateMixMenusRaw,
+} from "@/utils/menus";
+import Message from "@/components/base/components/message/message.vue";
+import RoadStructure from "@/graphic/enum/RoadStructure";
+import RoadTemplate from "@/graphic/enum/RoadTemplate";
+import { computed } from "vue";
+import { mount } from "@/components/base/utils/componentHelper";
+import Setting from "@/views/graphic/setting.vue";
 
 export enum Mode {
   Road,
@@ -13,18 +17,18 @@ export enum Mode {
 }
 
 export const UITypeExtend = {
-  structure: 'structure',
-  template: 'template',
-  measure: 'measure',
-  road: '__road',
-  image: '__image',
-  line: '__line',
-  photo: 'photo',
-  setup: 'setup',
-  lineType: 'lineType',
-  width: 'width',
-  lock: 'lock',
-  basemap: 'Basemap',
+  structure: "structure",
+  template: "template",
+  measure: "measure",
+  road: "__road",
+  image: "__image",
+  line: "__line",
+  photo: "photo",
+  setup: "setup",
+  lineType: "lineType",
+  width: "width",
+  lock: "lock",
+  basemap: "Basemap",
 };
 
 export type MenuRaw = {
@@ -38,52 +42,60 @@ export type MenuRaw = {
 export type MenusRaw = Array<MenuRaw>;
 
 export const structureMenusRaw = [
-  { key: RoadStructure.BranchRoad, icon: 'jg_zl-1', text: '支路' },
-  { key: RoadStructure.NarrowRoad, icon: 'jg_zl', text: '窄路' },
-  { key: RoadStructure.ShoulderRoad, icon: 'jg_lj', text: '路肩' },
-  { key: RoadStructure.ZebraCrossing, icon: 'jg_bmx', text: '斑马线' },
-  { key: RoadStructure.Bridge, icon: 'jg_q', text: '桥' },
-  { key: RoadStructure.Tunnel, icon: 'jg_sd', text: '隧道' },
-  { key: RoadStructure.Sidewalk, icon: 'jg_rxd', text: '人行道' },
-  { key: RoadStructure.ConstructionSection, icon: 'jg_sgld', text: '施工路段' },
-  { key: RoadStructure.Downhill, icon: 'jg_road_u', text: '下坡' },
-  { key: RoadStructure.Uphill, icon: 'jg_sp', text: '上坡' },
-  { key: RoadStructure.RoadsideGutter, icon: 'jg_lpsg', text: '路边水沟' },
-  { key: RoadStructure.RoadsAndRails, icon: 'jg_dltlpjk', text: '道路与铁...' },
-  { key: RoadStructure.FireHydrantWell, icon: 'jg_xfsj', text: '消火栓井' },
-  { key: RoadStructure.Gullies, icon: 'jg_ysk', text: '雨水口' },
-  { key: RoadStructure.RoadPotholes, icon: 'jg_lmak', text: '路面凹坑' },
-  { key: RoadStructure.ProtrudingRoad, icon: 'jg_lmtcbf', text: '路面凸出...' },
-  { key: RoadStructure.WaterOnTheRoad, icon: 'jg_lmjs', text: '路面积水' },
+  { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
+  { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
+  { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
+  { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
+  { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
+  { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
+  { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
+  { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
+  { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
+  { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
+  { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
+  { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
+  { key: RoadStructure.FireHydrantWell, icon: "jg_xfsj", text: "消火栓井" },
+  { key: RoadStructure.Gullies, icon: "jg_ysk", text: "雨水口" },
+  { key: RoadStructure.RoadPotholes, icon: "jg_lmak", text: "路面凹坑" },
+  { key: RoadStructure.ProtrudingRoad, icon: "jg_lmtcbf", text: "路面凸出..." },
+  { key: RoadStructure.WaterOnTheRoad, icon: "jg_lmjs", text: "路面积水" },
 ];
 
 export const templateMenusRaw = [
-  { key: RoadTemplate.SBend, icon: 'mb_sxwl', text: 's型弯路' },
-  { key: RoadTemplate.TJunction, icon: 'mb_dzlk', text: '丁字路口' },
-  { key: RoadTemplate.FiveForks, icon: 'mb_wclk', text: '五岔路口' },
-  { key: RoadTemplate.ExitRamp, icon: 'mb_ckzd', text: '出口匝道' },
-  { key: RoadTemplate.Crossroads, icon: 'mb_szlk', text: '十字路口' },
-  { key: RoadTemplate.NationalHighwayShoulder, icon: 'mb_gdlj', text: '国道（路肩）' },
-  { key: RoadTemplate.IndoorSection, icon: 'mb_snld', text: '室内路段' },
-  { key: RoadTemplate.Bend, icon: 'mb_wd', text: '弯道' },
-  { key: RoadTemplate.SharpCurve, icon: 'mb_jzwd', text: '急转弯道' },
-  { key: RoadTemplate.SixForkIntersection, icon: 'mb_lclk', text: '六岔路口' },
+  { key: RoadTemplate.SBend, icon: "mb_sxwl", text: "s型弯路" },
+  { key: RoadTemplate.TJunction, icon: "mb_dzlk", text: "丁字路口" },
+  { key: RoadTemplate.FiveForks, icon: "mb_wclk", text: "五岔路口" },
+  { key: RoadTemplate.ExitRamp, icon: "mb_ckzd", text: "出口匝道" },
+  { key: RoadTemplate.Crossroads, icon: "mb_szlk", text: "十字路口" },
+  {
+    key: RoadTemplate.NationalHighwayShoulder,
+    icon: "mb_gdlj",
+    text: "国道（路肩）",
+  },
+  { key: RoadTemplate.IndoorSection, icon: "mb_snld", text: "室内路段" },
+  { key: RoadTemplate.Bend, icon: "mb_wd", text: "弯道" },
+  { key: RoadTemplate.SharpCurve, icon: "mb_jzwd", text: "急转弯道" },
+  { key: RoadTemplate.SixForkIntersection, icon: "mb_lclk", text: "六岔路口" },
   // { key: RoadTemplate.WideNarrowRoad, icon: 'mb_kbzld', text: '宽变窄路段' },
-  { key: RoadTemplate.Corner, icon: 'mb_zjwd', text: '直角弯道' },
-  { key: RoadTemplate.ImportSmashedRoad, icon: 'mb_jkzd', text: '进口匝道' },
-  { key: RoadTemplate.HighSpeedTollBooth, icon: 'mb_gssfz', text: '高速收费站' },
+  { key: RoadTemplate.Corner, icon: "mb_zjwd", text: "直角弯道" },
+  { key: RoadTemplate.ImportSmashedRoad, icon: "mb_jkzd", text: "进口匝道" },
+  {
+    key: RoadTemplate.HighSpeedTollBooth,
+    icon: "mb_gssfz",
+    text: "高速收费站",
+  },
   // { key: RoadTemplate.HighSpeedHarbor, icon: 'mb_gsgw', text: '高速港湾' },
-  { key: RoadTemplate.HighwaySection, icon: 'mb_gsld', text: '高速路段' },
+  { key: RoadTemplate.HighwaySection, icon: "mb_gsld", text: "高速路段" },
 ];
 
 export const measureMenusRaw = [
   {
     key: UIType.BaseLine,
-    icon: 'line',
-    text: '基准线',
+    icon: "line",
+    text: "基准线",
     disabled: computed(() => graphicState.value.existsBaseLine),
   },
-  { key: UIType.BasePoint, text: '基准点', icon: 'point', border: true },
+  { key: UIType.BasePoint, text: "基准点", icon: "point", border: true },
   // {
   //   key: UIType.NormalLocationMode,
   //   text: '垂线定位',
@@ -99,42 +111,48 @@ export const measureMenusRaw = [
   {
     desc: "一键测量",
     key: UIType.AngleLocationMode,
-    text: '直角定位法',
-    icon: 'measure_r',
+    text: "直角定位法",
+    icon: "measure_r",
     onClick(data) {
       console.error(graphicState.value.canAllLocationMode);
       if (graphicState.value.canAllLocationMode) {
         uiType.change(data.key);
       } else {
-        Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
+        Message.success({
+          msg: "请添加基准线及基准点后再执行此操作",
+          time: 3000,
+        });
       }
     },
   },
   {
     key: UIType.AllLocationMode,
-    text: '综合定位法',
-    icon: 'measure_c',
+    text: "综合定位法",
+    icon: "measure_c",
     onClick(data) {
       if (graphicState.value.canAllLocationMode) {
         uiType.change(data.key);
       } else {
-        Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
+        Message.success({
+          msg: "请添加基准线及基准点后再执行此操作",
+          time: 3000,
+        });
       }
     },
-    border: true
+    border: true,
   },
   {
     key: UIType.FreeMeasureLine,
-    text: '自由测量',
-    icon: 'measure_free'
+    text: "自由测量",
+    icon: "measure_free",
   },
 ];
 
 export const mainMenusRaw: MenusRaw = [
   {
     key: UIType.Line,
-    text: '画线',
-    icon: 'line_d',
+    text: "画线",
+    icon: "line_d",
     // children: [
     //   {
     //     key: UIType.Line,
@@ -150,43 +168,48 @@ export const mainMenusRaw: MenusRaw = [
   },
   {
     key: UITypeExtend.road,
-    text: '道路',
-    icon: 'road',
+    text: "道路",
+    icon: "road",
     children: [
-      { key: UIType.OneEdgeOneLanRoad, icon: 'road_ss', text: '' },
-      { key: UIType.OneEdgeTwoLanRoad, icon: 'road_sd', text: '' },
-      { key: UIType.OneEdgeThreeLanRoad, icon: 'road_st', text: '' },
-      { key: UIType.TwoEdgeOneLanRoad, icon: 'road_ds', text: '' },
-      { key: UIType.TwoEdgeTwoLanRoad, icon: 'road_dd', text: '' },
-      { key: UIType.TwoEdgeThreeLanRoad, icon: 'road_dt', text: '' },
-      { key: UIType.CurveRoad, icon: 'road_wl', text: '' },
+      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
+      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "" },
+      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
+      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "" },
+      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
+      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
+      { key: UIType.CurveRoad, icon: "road_wl", text: "" },
       // { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
-      { key: UITypeExtend.template, icon: 'r_structure', text: '道路模板', extend: templateMenusRaw },
+      {
+        key: UITypeExtend.template,
+        icon: "r_structure",
+        text: "道路模板",
+        extend: templateMenusRaw,
+      },
     ],
   },
   {
     key: UITypeExtend.image,
-    text: '图例',
-    icon: 'legend',
+    text: "图例",
+    icon: "legend",
     // children: [
     //   { key: UIType.BusPlane, text: "客车平面图" }
     // ]
   },
-  { key: UIType.FixPoint, text: '固定点', icon: 'text' },
+  { key: UIType.FixPoint, text: "固定点", icon: "point_a" },
   {
     key: UITypeExtend.measure,
-    text: '测量',
+    text: "测量",
     children: measureMenusRaw,
-    icon: 'measure',
+    icon: "measure",
   },
-  { key: UIType.Text, text: '文字', icon: 'text' },
-  { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
+  { key: UIType.Text, text: "文字", icon: "text" },
+  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
 
   // { key: UITypeExtend.photo, text: "照片库" },
   {
     key: UITypeExtend.setup,
-    icon: 'setting',
-    text: '设置',
+    icon: "setting",
+    text: "设置",
     onClick() {
       const { destroy } = mount(Setting, {
         props: {
@@ -200,26 +223,37 @@ export const mainMenusRaw: MenusRaw = [
 ];
 
 export const photoMenusRaw: MenusRaw = [
-  { key: UIType.Text, text: '文字', icon: 'text' },
-  { key: UIType.Circle, text: '圈出', icon: 'circle' },
-  { key: UIType.SingleArrow, text: '箭头', icon: 'arrows' },
-  { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
+  { key: UIType.Text, text: "文字", icon: "text" },
+  { key: UIType.Circle, text: "圈出", icon: "circle" },
+  { key: UIType.SingleArrow, text: "箭头", icon: "arrows" },
+  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
 ];
 
 export const headActionMenuRaw = [
-  { key: UIType.GoBack, text: '回退', icon: 'backout' },
-  { key: UIType.GoAhead, text: '前进', icon: 'redo' },
-  { key: UIType.Clear, text: '清除', icon: 'reset' },
-  { key: UIType.BackImageChange, text: '底图开关', icon: 'map' },
+  { key: UIType.GoBack, text: "回退", icon: "backout" },
+  { key: UIType.GoAhead, text: "前进", icon: "redo" },
+  { key: UIType.Clear, text: "清除", icon: "reset" },
+  { key: UIType.BackImageChange, text: "底图开关", icon: "map" },
 ];
 
 export const focusMenuRaw: { [key in string]: MenusRaw } = {};
 
-export const generateByMenus = <T extends MenuRaw>(generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) => generateByMenusRaw(generateFn, mainMenus);
+export const generateByMenus = <T extends MenuRaw>(
+  generateFn: (men: MenuRaw) => T,
+  mainMenus: MenusRaw = mainMenusRaw
+) => generateByMenusRaw(generateFn, mainMenus);
 
-export const findMainMenuByAttr = (value: MenusRaw, attr = 'extend' as const, mainMenus = mainMenusRaw) => findMenuByAttr(value, attr, mainMenus);
+export const findMainMenuByAttr = (
+  value: MenusRaw,
+  attr = "extend" as const,
+  mainMenus = mainMenusRaw
+) => findMenuByAttr(value, attr, mainMenus);
 
-export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(childKey: K, generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) =>
+export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(
+  childKey: K,
+  generateFn: (men: MenuRaw) => T,
+  mainMenus: MenusRaw = mainMenusRaw
+) =>
   generateMixMenusRaw(
     childKey,
     generateFn,

src/views/roads/tabulation.vue

@@ -10,7 +10,7 @@
       <div class="content" ref="layoutRef">
         <table>
           <tr>
-            <td class="value title" colspan="6" height="64">
+            <td class="value title" colspan="6" height="62">
               <span v-if="downMode">{{ roadPhoto.title }}</span>
               <ui-input
                 v-else
@@ -22,7 +22,7 @@
             </td>
           </tr>
           <tr>
-            <td class="label" width="150" height="64">到达事故现场时间</td>
+            <td class="label" width="150" height="50">到达事故现场时间</td>
             <td class="value">
               <span v-if="downMode">{{ history.value.arrivalTime }}</span>
               <ui-input
@@ -57,7 +57,7 @@
             </td>
           </tr>
           <tr>
-            <td class="label" height="64">事故发生地点</td>
+            <td class="label" height="40">事故发生地点</td>
             <td class="value" colspan="5">
               <span v-if="downMode">{{ history.value.location }}</span>
               <ui-input
@@ -70,7 +70,7 @@
             </td>
           </tr>
           <tr>
-            <td class="image" colspan="6" height="360">
+            <td class="image" colspan="6" height="676">
               <div class="photo-layout">
                 <img
                   :src="useStaticUrl(roadPhoto.url).value"
@@ -90,19 +90,21 @@
             </td>
           </tr>
           <tr>
-            <td class="value" colspan="6" height="64">
+            <td class="value textarea-layout" colspan="6" height="73">
               <span v-if="downMode">{{ history.value.illustrate }}</span>
               <ui-input
+                class="textarea"
                 v-else
-                type="text"
+                type="textarea"
                 @input="input"
                 v-model="history.value.illustrate"
                 @blur="history.push"
+                :maxlength="120"
               />
             </td>
           </tr>
           <tr>
-            <td class="value date" colspan="6" height="48">
+            <td class="value date" colspan="6" height="50">
               {{ formatDate(new Date(), "yyyy年MM月dd日hh时mm分") }}
             </td>
           </tr>
@@ -184,12 +186,11 @@ watchEffect(() => {
     photoRef.value.onload = () => (photoLoaded.value = true);
     return;
   }
-  const scale = roadPhoto.value.data.scale || 1;
+  const scale = roadPhoto.value.data.scale / window.devicePixelRatio || 1;
   const martrixScale = photoMatrix.value[0];
   const photoWidth = photoRef.value.naturalWidth;
   const prop = ((photoWidth / photoRef.value.offsetWidth) * scale) / martrixScale;
-  console.log(scale, martrixScale, photoWidth, prop);
-  proportion.value = Math.ceil(prop * 100) / 100;
+  proportion.value = Math.ceil(1 / prop);
 });
 
 const onBack = () => {
@@ -200,6 +201,7 @@ const onBack = () => {
 };
 
 const downMode = ref(false);
+// const downMode = ref(true);
 const layoutRef = ref<HTMLDivElement>();
 const getLayoutImage = async () => {
   downMode.value = true;
@@ -230,6 +232,8 @@ const saveHandler = async () => {
   overflow-y: auto;
   left: 0;
   right: 0;
+
+  font-family: SimSun-Regular, SimSun;
   color: #000;
   font-size: 16px;
 }
@@ -281,7 +285,7 @@ const saveHandler = async () => {
 
 .content table {
   width: 100%;
-  height: 800px;
+  // height: 800px;
   border-collapse: collapse;
 
   tr:not(:first-child) {
@@ -308,7 +312,7 @@ const saveHandler = async () => {
   }
 
   .title {
-    padding-bottom: 16px;
+    padding-bottom: 7px;
     position: relative;
 
     &:after {
@@ -328,12 +332,33 @@ const saveHandler = async () => {
 }
 
 .downMode {
+  .title {
+    span {
+      height: 62px !important;
+      font-size: 54px !important;
+      font-family: SimSun-Regular, SimSun;
+      font-weight: 400;
+      color: #000000;
+      line-height: 63px;
+      letter-spacing: 13px;
+    }
+  }
+
   .content {
     width: 1485px;
     height: 1050px;
-    padding: 125px 100px 75px 100px;
+    // padding: 125px 100px 75px 100px;
+    padding: 30px 28px 26px;
     overflow: hidden;
   }
+  .content table .textarea-layout {
+    height: 73px;
+    span {
+      padding: 10px 0px;
+      display: block;
+      height: 100%;
+    }
+  }
   .content table {
     .value {
       background: none;
@@ -341,23 +366,23 @@ const saveHandler = async () => {
 
     tr:not(:first-child) {
       td {
-        border-right: 5px solid #000;
-        border-bottom: 5px solid #000;
+        border-right: 3px solid #000;
+        border-bottom: 3px solid #000;
       }
 
       &:nth-child(2) td {
-        border-top: 7.5px solid #000;
+        border-top: 3px solid #000;
       }
 
       td:first-child {
-        border-left: 7.5px solid #000;
+        border-left: 3px solid #000;
       }
       td:last-child {
-        border-right: 7.5px solid #000;
+        border-right: 3px solid #000;
       }
 
       &:last-child td {
-        border-bottom: 7.5px solid #000;
+        border-bottom: 3px solid #000;
       }
     }
   }
@@ -376,7 +401,8 @@ const saveHandler = async () => {
 <style lang="scss">
 .value {
   box-sizing: border-box;
-  padding: 8px 10px;
+  // padding: 8px 10px;
+  padding: 0 10px;
   input,
   .ui-input {
     width: 100%;
@@ -395,7 +421,7 @@ const saveHandler = async () => {
     display: block;
     font-size: 32px !important;
     height: 48px !important;
-    font-weight: bold;
+    font-weight: 400;
     text-align: center;
     line-height: 48px !important;
   }
@@ -408,4 +434,23 @@ const saveHandler = async () => {
     line-height: 48px !important;
   }
 }
+.textarea {
+  textarea {
+    color: #000 !important;
+    font-size: 16px !important;
+    line-height: 1.2em;
+  }
+}
+
+.textarea-layout {
+  .textarea {
+    height: 100% !important;
+  }
+  .retouch {
+    justify-content: flex-end !important;
+    .len {
+      color: #000 !important;
+    }
+  }
+}
 </style>