oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-qrcode/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+// 二维码样式
+export type ClQrcodeMode = 'rect' | 'circular' | 'line' | 'rectSmall'
+
+export const qrcodeProps = {
+  ...baseProps,
+  /** 二维码内容 */
+  text: makeStringProp(''),
+  /** 二维码中心图标 */
+  logo: makeStringProp(''),
+  /** 二维码宽度，number 与纯数字字符串按 rpx 处理 */
+  width: makeNumericProp(400),
+  /** 二维码高度，number 与纯数字字符串按 rpx 处理 */
+  height: makeNumericProp(400),
+  /** 二维码中心图标大小，number 与纯数字字符串按 rpx 处理 */
+  logoSize: makeNumericProp(80),
+  /** 二维码内边距，number 与纯数字字符串按 rpx 处理 */
+  padding: makeNumericProp(0),
+  /** 二维码前景色 */
+  foreground: makeStringProp('#000'),
+  /** 二维码背景颜色 */
+  background: makeStringProp('#FFFFFF'),
+  /** 二维码错误级别
+   *  默认值：H
+   *  可选值：L、M、Q、H
+   * */
+  ecc: {
+    type: String as PropType<'L' | 'M' | 'Q' | 'H'>,
+    default: 'H'
+  },
+  /** 二维码样式 rect 普通矩形、circular 小圆点、line 线条、rectSmall 小方格*/
+  mode: {
+    type: String as PropType<ClQrcodeMode>,
+    default: 'circular'
+  },
+  /** 二维码边框颜色 */
+  pdColor: makeStringProp(''),
+  /** 二维码边框圆角，number 与纯数字字符串按 rpx 处理 */
+  pdRadius: makeNumericProp(0)
+}

package/components/oxy-radio/index.scss

@@ -92,7 +92,7 @@
     vertical-align: top;
     font-size: $-radio-label-fs;
     color: $-radio-label-color;
-    line-height: 20px;
+    line-height: 40rpx;
     word-break: break-all;
   }
   @include when(checked) {
@@ -109,7 +109,7 @@
 
   @include when(dot) {
     .oxy-radio__shape {
-      border: 2px solid $-radio-dot-border-color;
+      border: 4rpx solid $-radio-dot-border-color;
       border-radius: 50%;
       position: relative;
       display: inline-block;
@@ -145,7 +145,7 @@
   @include when(button) {
     display: inline-block;
     margin-top: 0;
-    margin-right: 10px;
+    margin-right: 20rpx;
 
     .oxy-radio__shape {
       display: none;
@@ -154,7 +154,7 @@
       height: $-radio-button-height;
       min-width: $-radio-button-min-width;
       max-width: $-radio-button-max-width;
-      padding: 5px 15px;
+      padding: 10rpx 30rpx;
       margin-right: 0;
       border-radius: $-radio-button-radius;
       background-color: $-radio-button-bg;
@@ -187,7 +187,7 @@
     }
     .oxy-radio__shape {
       display: block;
-      margin-right: 4px;
+      margin-right: 8rpx;
       float: left;
       &::after {
         content: "";
@@ -198,7 +198,7 @@
 
     @include when(dot) {
       .oxy-radio__shape {
-        margin-top: 2px;
+        margin-top: 4rpx;
       }
       @include when(large) {
         .oxy-radio__shape {
@@ -210,7 +210,7 @@
     &.icon-placement-right {
       .oxy-radio__shape {
         margin-right: 0;
-        margin-left: 4px;
+        margin-left: 8rpx;
         float: right;
       }
     }
@@ -257,18 +257,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 13px 15px;
+    padding: 26rpx 30rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 28rpx 30rpx;
     }
   }
 
   @include when(button-radio) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 12px 12px 0px 0px;
+    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-radio__label {

package/components/oxy-radio-group/index.scss

@@ -11,11 +11,11 @@
   background-color: $-radio-bg;
   font-size: 0;
 
-  // 上下20px 左右15px 内部间隔12px
+  // 上下40rpx 左右30rpx 内部间隔24rpx
   @include when(button) {
     width: 100%;
     height: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 16rpx 6rpx 40rpx 30rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-rate/types.ts

@@ -31,16 +31,16 @@ export const rateProps = {
   /**
    * 图标大小
    * 类型: string
-   * 默认值: '16px'
+   * 默认值: '32rpx'
    */
-  size: makeStringProp('16px'),
+  size: makeStringProp('32rpx'),
 
   /**
    * 图标间距
    * 类型: string
-   * 默认值: '4px'
+   * 默认值: '8rpx'
    */
-  space: makeStringProp('4px'),
+  space: makeStringProp('8rpx'),
 
   /**
    * 未选中的图标颜色

package/components/oxy-resize/index.scss

@@ -5,8 +5,8 @@
 
   @include e(container) {
     position: absolute;
-    min-width: 1px;
-    min-height: 1px;
+    min-width: 2rpx;
+    min-height: 2rpx;
   }
 
   @include e(wrapper) {

package/components/oxy-resize/oxy-resize.vue

@@ -13,7 +13,7 @@
         :scroll-left="expandScrollLeft"
         @scroll="onScrollHandler"
       >
-        <view class="oxy-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+        <view class="oxy-resize__wrapper--placeholder" style="height: 200000rpx; width: 200000rpx"></view>
       </scroll-view>
       <!--监听插槽变小-->
       <scroll-view
@@ -43,7 +43,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { objToStyle, unitConvert, uuid } from '../common/util'
 import { resizeProps } from './types'
 
 const props = defineProps(resizeProps)
@@ -59,8 +59,8 @@ const scrollEventCount = ref<number>(0)
 
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {
-    width: addUnit(width.value),
-    height: addUnit(height.value)
+    width: unitConvert(width.value, 0, { output: 'px' }),
+    height: unitConvert(height.value, 0, { output: 'px' })
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-resize/types.ts

@@ -2,5 +2,8 @@ import { baseProps, makeStringProp } from '../common/props'
 
 export const resizeProps = {
   ...baseProps,
+  /**
+   * 自定义容器类名
+   */
   customContainerClass: makeStringProp('')
 }

package/components/oxy-rich-text/index.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
   overflow: hidden;
   height: 100%;
+  text-align: left;
 
   &.editable {
     border: 1px solid $-rich-text-editable-border-color;
@@ -15,7 +16,7 @@
   .rich-text-main {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    padding: 16rpx;
     position: relative;
 
   }
@@ -27,26 +28,26 @@
   .editor_toolbox {
     width: 100%;
     background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-    padding: 4px 8px;
+    padding: 8rpx 16rpx;
     box-sizing: border-box;
     flex-wrap: wrap;
-    gap: 4px;
+    gap: 8rpx;
     display: flex;
     align-items: center;
     border-bottom: 1px solid $-color-border-light;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
 
     .oxy-icon {
       cursor: pointer;
-      width: 32px;
-      height: 32px;
+      width: 64rpx;
+      height: 64rpx;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      border-radius: 6px;
+      border-radius: 12rpx;
       transition: all 0.2s ease;
       color: $-color-secondary;
-      font-size: 18px;
+      font-size: 36rpx;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.05);
@@ -59,11 +60,11 @@
     }
 
     image {
-      width: 16px;
-      height: 16px;
+      width: 32rpx;
+      height: 32rpx;
       cursor: pointer;
-      padding: 8px;
-      border-radius: 6px;
+      padding: 16rpx;
+      border-radius: 12rpx;
       transition: all 0.2s ease;
       box-sizing: content-box;
       display: inline-block;
@@ -80,10 +81,10 @@
 
     svg {
       cursor: pointer;
-      width: 16px;
-      height: 16px;
-      padding: 8px;
-      border-radius: 6px;
+      width: 32rpx;
+      height: 32rpx;
+      padding: 16rpx;
+      border-radius: 12rpx;
       transition: all 0.2s ease;
       box-sizing: content-box;
       display: inline-block;
@@ -91,7 +92,7 @@
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.05);
-        transform: translateY(-1px);
+        transform: translateY(-2rpx);
       }
 
       &:active {
@@ -106,22 +107,22 @@
   }
 
   .dialog-title {
-    font-size: 16px;
-    line-height: 46px;
+    font-size: 32rpx;
+    line-height: 92rpx;
     text-align: center;
-    height: 46px;
+    height: 92rpx;
     font-weight: $-fw-semibold;
     color: $-color-black;
 
   }
 
   .oxy-rich-text__popup {
-    padding: 0 12px 12px 12px;
+    padding: 0 24rpx 24rpx 24rpx;
 
     .oxy-rich-text__emoji-content {
       display: flex;
-      font-size: 20px;
-      line-height: 35px;
+      font-size: 40rpx;
+      line-height: 70rpx;
       text-align: center;
 
       .oxy-rich-text__emoji-block {
@@ -133,23 +134,23 @@
       border-top: 1px dashed $-rich-text-popup-divider-color;
       width: 80%;
       height: 0;
-      margin: 20px auto;
+      margin: 40rpx auto;
     }
 
     .oxy-rich-text__link-input {
-      margin-bottom: 16px;
+      margin-bottom: 32rpx;
 
       .oxy-rich-text__link-label {
-        font-size: 14px;
+        font-size: 28rpx;
         color: $-color-secondary;
-        margin-bottom: 8px;
+        margin-bottom: 16rpx;
       }
     }
 
     .oxy-rich-text__link-buttons {
       display: flex;
-      gap: 12px;
-      margin-top: 20px;
+      gap: 24rpx;
+      margin-top: 40rpx;
 
       .oxy-button {
         flex: 1;

package/components/oxy-rich-text/mp-html/mp-html.vue

@@ -3,7 +3,7 @@
     id="_root"
     class="mp-html"
     :class="(selectable ? '_select ' : '') + '_root'"
-    :style="(editable ? 'min-height:200px;' : '') + containerStyle"
+    :style="(editable ? 'min-height:400rpx;' : '') + containerStyle"
     @tap="_containTap"
   >
     <slot v-if="!nodes[0]" />
@@ -11,14 +11,19 @@
     <node v-else :childs="nodes" :opts="[lazyLoad, loadingImg, errorImg, showImgMenu, selectable, editable, placeholder, 'nodes']" name="span" />
     <!-- #endif -->
     <!-- #ifdef APP-PLUS-NVUE -->
-    <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <web-view
+      ref="web"
+      src="/static/app-plus/mp-html/local.html"
+      :style="'margin-top:' + toPx(-2) + ';height:' + toPx(height)"
+      @onPostMessage="_onMessage"
+    />
     <!-- #endif -->
-    <view v-if="tooltip" class="_tooltip_contain" :style="'top:' + tooltip.top + 'px'">
+    <view v-if="tooltip" class="_tooltip_contain" :style="'top:' + toPx(tooltip.top)">
       <view class="_tooltip">
         <view v-for="(item, index) in tooltip.items" v-bind:key="index" class="_tooltip_item" :data-i="index" @tap="_tooltipTap">{{ item }}</view>
       </view>
     </view>
-    <view v-if="slider" class="_slider" :style="'top:' + slider.top + 'px'">
+    <view v-if="slider" class="_slider" :style="'top:' + toPx(slider.top)">
       <slider
         :value="slider.value"
         :min="slider.min"
@@ -27,12 +32,12 @@
         block-size="14"
         show-value
         activeColor="white"
-        style="padding: 3px"
+        style="padding: 6rpx"
         @changing="_sliderChanging"
         @change="_sliderChange"
       />
     </view>
-    <view v-if="color" class="_tooltip_contain" :style="'top:' + color.top + 'px'">
+    <view v-if="color" class="_tooltip_contain" :style="'top:' + toPx(color.top)">
       <view class="_tooltip" style="overflow-y: hidden">
         <view
           v-for="(item, index) in color.items"
@@ -85,6 +90,7 @@ import highlight from './highlight/index.js'
 import latex from './latex/index.js'
 import style from './style/index.js'
 import editable from './editable/index.js'
+import { unitConvert } from '../../common/util'
 const plugins = [markdown, highlight, latex, style, editable]
 // #ifdef APP-PLUS-NVUE
 const dom = weex.requireModule('dom')
@@ -184,6 +190,9 @@ export default {
     this._hook('onDetached')
   },
   methods: {
+    toPx(value) {
+      return unitConvert(value, 0, { output: 'px' })
+    },
     _containTap() {
       if (!this._lock && !this.slider && !this.color) {
         this._edit = undefined
@@ -587,7 +596,7 @@ export default {
 /* #ifndef APP-PLUS-NVUE */
 /* 根节点样式 */
 ._root {
-  padding: 1px 0;
+  padding: 2rpx 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
@@ -602,8 +611,8 @@ export default {
 /* 提示条 */
 ._tooltip_contain {
   position: absolute;
-  right: 20px;
-  left: 20px;
+  right: 40rpx;
+  left: 40rpx;
   text-align: center;
 }
 
@@ -612,29 +621,29 @@ export default {
   display: inline-block;
   width: auto;
   max-width: 100%;
-  height: 30px;
-  padding: 0 3px;
+  height: 60rpx;
+  padding: 0 6rpx;
   overflow-x: auto;
   overflow-y: hidden;
-  font-size: 14px;
-  line-height: 30px;
+  font-size: 28rpx;
+  line-height: 60rpx;
   white-space: nowrap;
-  padding-bottom: 2px;
+  padding-bottom: 4rpx;
   border: 1px solid transparent;
 }
 
 ._tooltip::-webkit-scrollbar {
-  height: 4px;
+  height: 8rpx;
 }
 
 ._tooltip::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
+  border-radius: 4rpx;
 }
 
 ._tooltip::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 1);
-  border-radius: 2px;
+  border-radius: 4rpx;
 }
 
 ._tooltip::-webkit-scrollbar-thumb:hover {
@@ -645,16 +654,16 @@ export default {
   display: inline-block;
   width: auto;
   padding: 0 2vw;
-  line-height: 30px;
+  line-height: 60rpx;
   background-color: black;
   color: white;
 }
 
 ._color_item {
   display: inline-block;
-  width: 18px;
-  height: 18px;
-  margin: 5px 2vw;
+  width: 36rpx;
+  height: 36rpx;
+  margin: 10rpx 2vw;
   border: 1px solid #dfe2e5;
   border-radius: 50%;
 }
@@ -662,14 +671,14 @@ export default {
 /* 图片宽度滚动条 */
 ._slider {
   position: absolute;
-  left: 20px;
-  width: 220px;
+  left: 40rpx;
+  width: 440rpx;
 }
 
 ._tooltip,
 ._slider {
   background-color: black;
-  border-radius: 3px;
+  border-radius: 6rpx;
   opacity: 0.75;
 }
 </style>

package/components/oxy-rich-text/mp-html/node/node.vue

@@ -1,37 +1,37 @@
 <template>
-  <view @tap="nodeTap" :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="(ctrl.root&&opts[5]!=='simple'?'border:1px solid black;padding:5px;display:block;':'')+attrs.style">
+  <view @tap="nodeTap" :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="(ctrl.root&&opts[5]!=='simple'?'border:1px solid black;padding:10rpx;display:block;':'')+attrs.style">
     <block v-for="(n, i) in nodes" v-bind:key="i">
       <!-- 图片 -->
       <!-- 占位图 -->
       <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
       <!-- 显示图片 -->
       <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
-      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
       <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
       <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
       <!-- #endif -->
       <!-- #ifdef APP-HARMONY -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id||('n'+i)" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+ctrl[i]+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id||('n'+i)" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+ctrl[i]+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:'+(ctrl['h'+i]||1)+'px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="!opts[5]&&opts[3]&&!n.attrs.ignore" :image-menu-prevent="opts[5]||!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:'+(ctrl['h'+i]||1)+'px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="!opts[5]&&opts[3]&&!n.attrs.ignore" :image-menu-prevent="opts[5]||!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifdef MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
       <!-- #endif -->
       <!-- #ifdef APP-PLUS && VUE3 -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- 文本 -->
       <text v-else-if="n.type==='text'&&!ctrl['e'+i]" :data-i="i" :user-select="opts[4]" :decode="!opts[5]" @tap="editStart">{{n.text}}
         <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
       </text>
-      <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:50px;width:auto;padding:5px;display:block" @tap.stop="editStart">{{n.text}}
+      <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:100rpx;width:auto;padding:10rpx;display:block" @tap.stop="editStart">{{n.text}}
         <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
       </text>
-      <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:50px;width:auto;padding:5px'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
+      <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:100rpx;width:auto;padding:10rpx'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
       <text v-else-if="n.name==='br'">\n</text>
       <!-- 链接 -->
       <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
@@ -114,6 +114,7 @@ module.exports = {
 </script>
 <script>
 import Parser from '../parser'
+import { unitConvert } from '../../../common/util'
 function getTop(e) {
   let top
   top = e.currentTarget.offsetTop
@@ -393,13 +394,23 @@ export default {
                 changing: val => {
                   if (Math.abs(val - value) > 2) {
                     // 字号变换超过 2 时更新到视图
-                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                    parent.changeStyle(
+                      'font-size',
+                      i,
+                      unitConvert(val, 0, { output: 'px' }),
+                      unitConvert(value, 0, { output: 'px' })
+                    )
                     value = e.detail.value
                   }
                 },
                 change: val => {
                   if (val !== value) {
-                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                    parent.changeStyle(
+                      'font-size',
+                      i,
+                      unitConvert(val, 0, { output: 'px' }),
+                      unitConvert(value, 0, { output: 'px' })
+                    )
                   }
                   this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
                 }
@@ -915,7 +926,7 @@ export default {
 
 /deep/ .md-table,
 /deep/ .md-blockquote {
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 /deep/ .md-table {
@@ -937,7 +948,7 @@ export default {
 
 /deep/ .md-th,
 /deep/ .md-td {
-  padding: 6px 13px !important;
+  padding: 12rpx 26rpx !important;
   border: 1px solid #dfe2e5;
 }
 
@@ -956,7 +967,7 @@ export default {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 85%;
   background-color: rgba(27, 31, 35, 0.05);
-  border-radius: 3px;
+  border-radius: 6rpx;
 }
 
 /deep/ .md-pre .md-code {
@@ -983,14 +994,14 @@ export default {
 
   /* #endif */
   /deep/ ._video {
-    width: 300px;
-    height: 225px;
+    width: 600rpx;
+    height: 450rpx;
     display: inline-block;
     background-color: black;
   }
 /* a 标签默认效果 */
 ._a {
-  padding: 1.5px 0 1.5px 0;
+  padding: 3rpx 0 3rpx 0;
   color: #366092;
   word-break: break-all;
 }
@@ -1080,7 +1091,7 @@ export default {
 ._ol,
 ._ul {
   display: block;
-  padding-left: 40px;
+  padding-left: 80rpx;
   margin: 1em 0;
 }
 
@@ -1154,8 +1165,8 @@ export default {
 
 /* #ifdef APP-PLUS */
 ._video {
-  width: 300px;
-  height: 225px;
+  width: 600rpx;
+  height: 450rpx;
 }
 /* #endif */
 </style>