fix:修改字画作者拼音显示形式

public/configExcel.js

@@ -399,7 +399,9 @@ var configExcel = {
       "标题": "墨竹",
       "标题（展示）": "墨竹",
       "朝代": "明",
-      "作者": "夏昶（音chǎng）",
+      // "作者": "夏昶（音chǎng）",
+      "音": ['夏', 'chǎng', '昶'],
+      "作者": "夏昶",
       "馆藏": "故宫博物院藏",
       "装裱\/材质\/笔类型": "轴 纸本 墨笔",
       "尺寸": "纵116厘米\n横52.3厘米",
@@ -412,7 +414,9 @@ var configExcel = {
       "标题": "墨竹图（二）",
       "标题（展示）": "墨竹图",
       "朝代": "明",
-      "作者": "唐寅（音yín)",
+      // "作者": "唐寅（音yín)",
+      "音": ['唐', 'yín', '寅'],
+      "作者": "唐寅",
       "馆藏": "大都会艺术博物馆藏",
       "装裱\/材质\/笔类型": "卷 纸本 墨笔",
       "尺寸": "纵29.1厘米\n横150.2厘米",
@@ -489,7 +493,9 @@ var configExcel = {
       "标题": "托根乱岩图",
       "标题（展示）": "托根乱岩图",
       "朝代": "清",
-      "作者": "郑燮（音xiè）",
+      // "作者": "郑燮（音xiè）",
+      "音": ['郑', 'xiè', '燮'],
+      "作者": "郑燮",
       "馆藏": "南京博物院藏",
       "装裱\/材质\/笔类型": "轴 纸本 墨笔",
       "尺寸": "纵106.8厘米\n横51.7厘米",

src/views/BambooBookScene2.vue

@@ -104,8 +104,7 @@ const {
 
     .detail-img {
       width: 100%;
-      // max-width: 360px;
-      @media screen and (max-width: 320px) {
+      @media screen and (max-width: 350px) {
         width: 80%;
       }
     }

src/views/PaintingList.vue

@@ -101,7 +101,23 @@
                   alt=""
                   draggable="false"
                 >
-                {{ item['作者'] }}
+                <div
+                  v-if="item['音']"
+                  class="yin-name"
+                >
+                  <div
+                    v-for="(itemm,index) in item['音']"
+                    :key="index"
+                  >
+                    {{ itemm }}
+                  </div>
+                </div>
+                <div
+                  v-else
+                  class="name"
+                >
+                  {{ item['作者'] }}
+                </div>
               </div>
               <div class="title">
                 {{ item['标题（展示）'].split('\n').join('') }}
@@ -412,18 +428,39 @@ watch(menuElScrollLeft, (v) => {
               font-weight: 400;
               font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
               color: #474747;
-              white-space: pre;
-              transform: translateY(-50%);
+              // white-space: pre;
+              // transform: translateY(-50%);
               margin-right: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
               position: relative;
               letter-spacing: 0.3em;
               >img.bg{
                 width: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
                 position: absolute;
-                left: 0;
+                right: 0;
                 top: 50%;
-                transform: translate(-34%, 9%);
-                z-index: -1;
+                transform: translate(-24%, -40%);
+                z-index: 1;
+              }
+              >.name{
+                writing-mode: vertical-lr;
+                position: relative;
+                z-index: 2;
+              }
+              >.yin-name{
+                // writing-mode: horizontal-tb;
+                display: flex;
+                // flex-direction: column;
+                position: relative;
+                z-index: 2;
+                >div{
+                  writing-mode: horizontal-tb;
+                }
+                >div:nth-child(2){
+                  color: rgba(71,71,71,0.7 );
+                  letter-spacing: -1px;
+                  font-size: 20px;
+                  transform: translateX(-20px);
+                }
               }
             }
             >.author.long{