Explorar o código

优化富文本着重点,统一效果

zq hai 1 mes
pai
achega
ba6de7d923
Modificáronse 2 ficheiros con 12 adicións e 14 borrados
  1. 4 7
      src/components/PinyinText.vue
  2. 8 7
      src/styles/index.scss

+ 4 - 7
src/components/PinyinText.vue

@@ -15,10 +15,7 @@
           v-if="block.type === 'text'"
           :key="'text-' + index"
           class="pinyin-sentence"
-          :style="[
-            { 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' },
-            block.sentenceStyle
-          ]"
+          :style="[{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }, block.sentenceStyle]"
         >
           <span v-for="(word, wIndex) in block.word_list" :key="wIndex" class="pinyin-text" :style="block.styleObj">
             <span
@@ -794,11 +791,11 @@ export default {
         const letterSpacingValue = parseFloat(letterSpacing) || 0;
 
         baseStyle['border-bottom'] = 'none';
-        baseStyle['background-image'] = 'radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em)';
+        baseStyle['background-image'] = 'radial-gradient(circle at center, currentColor 0.08em, transparent 0.09em)';
         baseStyle['background-repeat'] = 'repeat-x';
         baseStyle['background-position'] = `${letterSpacingValue * -0.5}em 100%`;
-        baseStyle['background-size'] = `${1 + letterSpacingValue}em 0.3em`;
-        baseStyle['padding-bottom'] = '0.3em';
+        baseStyle['background-size'] = `${1 + letterSpacingValue}em 0.15em`;
+        baseStyle['padding-bottom'] = '0.15em';
         baseStyle['display'] = 'inline';
       }
 

+ 8 - 7
src/styles/index.scss

@@ -95,14 +95,15 @@ ul {
 /* 富文本着重点 */
 .rich-text-emphasis-dot {
   display: inline;
-  padding-bottom: 0.2em;
-
-  --letter-spacing-value: attr(data-letter-spacing number, 0);
-
-  background-image: radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em);
+  padding-bottom: 0.15em; /* 间距也相对于字体 */
+  background-image: radial-gradient(
+    circle at center,
+    currentColor 0.08em, /* 圆点大小相对于字体 */ 
+    transparent 0.09em
+  );
   background-repeat: repeat-x;
-  background-position: calc(var(--letter-spacing-value) * -0.5em) 100%;
-  background-size: calc((1 + var(--letter-spacing-value)) * 1em) 0.3em;
+  background-position: 0 100%;
+  background-size: 1em 0.15em; /* 间距相对于字体大小,高度相对字体 */
   border-bottom: none;
 }