修改排序首字母大写问题

src/components/Adult/preview/SentenceSortQP.vue

@@ -66,10 +66,10 @@
               v-for="(itemNode, indexNode) in SortArr[index]"
               :key="indexNode"
             >
-              <p>
+              <p v-if="itemNode.pinyin">
                 {{ itemNode.pinyin }}
               </p>
-              <p>
+              <p v-if="itemNode.chs">
                 {{ itemNode.chs }}
               </p>
             </div>
@@ -109,9 +109,30 @@ export default {
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    SortArr(newval, oldval) {
+      this.SortArr.forEach((item) => {
+        item.forEach((it, i) => {
+          if (i == 0) {
+            let str = it.pinyin[0];
+            str = str.toUpperCase();
+            it.pinyin = this.changeStr(it.pinyin, 0, str);
+          } else {
+            let str = it.pinyin[0];
+            str = str.toLowerCase();
+            it.pinyin = this.changeStr(it.pinyin, 0, str);
+          }
+        });
+      });
+    },
+  },
   //方法集合
   methods: {
+    changeStr(str, index, changeStr) {
+      return (
+        str.substr(0, index) + changeStr + str.substr(index + changeStr.length)
+      );
+    },
     // 清空当前选中的文字
     removeCurrentSortArr(index) {
       this.$set(this.SortArr, index, []);
@@ -254,9 +275,14 @@ export default {
           margin-bottom: 2px;
           cursor: pointer;
           border: 1px solid #ffffff;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: end;
           p {
             margin: 0;
             line-height: 150%;
+            width: 100%;
+            text-align: center;
           }
           > :nth-child(1) {
             font-family: "GB-PINYINOK-B";
@@ -304,9 +330,14 @@ export default {
           margin-left: 4px;
           color: #000000;
           margin-bottom: 4px;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: end;
           p {
             margin: 0;
             line-height: 150%;
+            width: 100%;
+            text-align: center;
           }
           > :nth-child(1) {
             font-family: "GB-PINYINOK-B";