提交一波

src/views/AppStoresTable.vue

@@ -139,11 +139,11 @@ export default {
                 <hls-player :url="url"/>
               </el-carousel-item>
             </el-carousel>
-            <div class="subTiltle" v-text="'品类销售情况'"/>
+            <div class="subTitle" v-text="'品类销售情况'"/>
             <el-table :data="store.categorySale" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
               <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
             </el-table>
-            <div class="subTiltle" v-text="'重点单品情况'"/>
+            <div class="subTitle" v-text="'重点单品情况'"/>
             <el-table :data="store.keyGoods" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
               <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop">
                 <template v-slot="{row}">
@@ -201,7 +201,7 @@ export default {
   background-size: 100% 100%;
 }
 
-.AppStoresTable .subTiltle {
+.AppStoresTable .subTitle {
   line-height: 20px;
   width: fit-content;
   margin: 24px auto 12px;

src/views/AppSubTitle.vue

@@ -0,0 +1,59 @@
+<script>
+export default {
+  name: "AppSubTitle",
+  label: "副标题",
+  data() {
+    return {
+      text: "副标题",
+      pinyinText: ""
+    }
+  },
+  methods: {
+    async getPinyin(text) {
+      const wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
+      while (!window.pinyinPro) await wait()
+      const {pinyin} = window.pinyinPro
+      this.pinyinText = pinyin(text, {toneType: 'none'}).toUpperCase()
+
+    }
+  },
+  watch: {
+    text: {
+      immediate: true,
+      handler(v) {
+        v && this.getPinyin(v)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="AppSubTitle">
+    {{ text }}
+    <span v-text="pinyinText"/>
+  </section>
+</template>
+
+<style scoped>
+.AppSubTitle {
+  height: 48px;
+  padding: 8px 0 8px 38px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+  line-height: 32px;
+  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  max-width: 400px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.AppSubTitle span {
+  font-size: 12px;
+  color: #215A8E;
+}
+</style>