Quellcode durchsuchen

Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

dsy vor 1 Monat
Ursprung
Commit
bba868aa74
2 geänderte Dateien mit 11 neuen und 10 gelöschten Zeilen
  1. 3 3
      src/components/PinyinText.vue
  2. 8 7
      src/styles/index.scss

+ 3 - 3
src/components/PinyinText.vue

@@ -791,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;
 }