Kaynağa Gözat

更新 组件字段过长缩小字号

wzh 4 yıl önce
ebeveyn
işleme
211e8cca1f
1 değiştirilmiş dosya ile 9 ekleme ve 3 silme
  1. 9 3
      src/components/IconInfo.vue

+ 9 - 3
src/components/IconInfo.vue

@@ -1,13 +1,18 @@
 // icon卡片展示
 <template>
   <div class="icon-info df aic jcsa">
-    <div v-for="item in info" :key="item" class="df aic jcsa">
+    <div v-for="(item, index) in info" :key="item" class="df aic jcsa">
       <div class="box">
         <div class="icon">
           <img :src="exchangeUrl(item.icon)" alt="" />
         </div>
         <div class="title">{{ item.title }}</div>
-        <div class="text">
+        <div
+          class="text"
+          :style="{
+            fontSize: `${index == 2 && item.text.length > 7 ? '10px' : '20px'}`,
+          }"
+        >
           <span class="text1">{{ item.text }}</span>
           <span class="text2">{{ item.unit || "" }}</span>
         </div>
@@ -76,13 +81,14 @@ export default {
 }
 
 .text {
-  font-size: 20px;
+  font-size: 16px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #ffffff;
   text-shadow: 0px 0px 16px rgba(100, 185, 255, 0.6);
   white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .title {