🐛苹果手机 人文 .不局中问题

public/configExcel.js

@@ -193,7 +193,7 @@ var configExcel = {
       "正文": "不论台阁与山林 爱尔岂惟千亩阴\n未出土时先有节 便凌云去也无心\n葛陂始与龙俱化 嶰谷聊同凤一吟\n月朗风清良夜永 可怜王子独知音"
     },
     {
-      "标题": "水仙子·咏竹",
+      "标题": "水仙<span>子<i>·</i> </span>咏竹",
       "类型": "七律",
       "朝代": "元",
       "作者": "马谦斋",
@@ -214,7 +214,7 @@ var configExcel = {
       "正文": "小雨春池湿凤毛 \n天孙深夜织鲛绡\n何人更立湘江水 \n独倚薰风忆舜韶"
     },
     {
-      "标题": "题画竹·谁谓籊籊竿",
+      "标题": "题画<span>竹<i>·</i> </span>谁谓籊籊竿",
       "类型": "五绝",
       "朝代": "元",
       "作者": "仇远",

src/views/PoemList.vue

@@ -46,7 +46,7 @@
         >
           <div class="inner-wrap">
             <div class="title-wrap">
-              <h1>{{ item1["标题"] }}</h1>
+              <h1 v-html="item1['标题']" />
               <div class="sub-title">
                 <span class="author">{{ item1["作者"] }}</span>
                 <span class="age">{{ item1["朝代"] }}</span>
@@ -608,6 +608,19 @@ const isMoveFu = (index, num) => {
           letter-spacing: 0.2em;
         }
       }
+      /deep/.title-wrap {
+         > h1 {
+           > span {
+            position: relative;
+             > i {
+              position: absolute;
+              left: 50%;
+              transform: translateX(-50%);
+              bottom: 8%;
+            }
+          }
+        }
+      }
     }
     .ROWtxt.typesetting-1 {
       > .inner-wrap {