更新文字对齐和

src/view/audioDetail/index.vue

@@ -136,7 +136,7 @@ const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好")
       <div class="content-box">
         <div class="content-title">{{ currentP.paragraphName }}</div>
         <div class="p">
-          <div v-html="currentP.contentText"></div>
+          {{ currentP.contentText.split("").join(" ") }}
         </div>
       </div>
       <div class="control-box">
@@ -176,8 +176,10 @@ const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好")
     background-size: 100% 100%;
     border-radius: 8px 8px 0 0;
     position: relative;
+
     .top-img {
       width: 100%;
+
       // height: 30vh;
       img {
         width: 100%;
@@ -186,31 +188,44 @@ const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好")
         box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
       }
     }
+
     .content-box {
       width: 100%;
       height: 55vh;
       overflow: auto;
       padding: 5%;
+
       .content-title {
         text-align: center;
         font-size: 1.1rem;
         font-weight: bold;
         text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
       }
+
       .p {
+        width: 100%;
         font-size: 1rem;
         line-height: 1.5rem;
-        letter-spacing: 6px;
+        letter-spacing: 3px;
         font-weight: 500;
         white-space: pre-wrap;
         margin-top: 10px;
+        text-align: justify;
+        text-justify:inter-ideograph;
+        // text-align-last: justify;
 
-        .html-box {
-          div {
-            text-indent: 2em;
-          }
-        }
+        // .html-box {
+        //   div {
+        //     text-indent: 2em;
+        //   }
+        // }
       }
+
+      // .p::after {
+      //   width: 100%;
+      //   content: "";
+      //   display: inline-block;
+      // }
     }
 
     .control-box {
@@ -233,6 +248,7 @@ const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好")
           margin: auto;
         }
       }
+
       .control-bottom {
         width: 100%;
         display: flex;
@@ -258,5 +274,4 @@ const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好")
       }
     }
   }
-}
-</style>
+}</style>

src/view/exhibitionList/index.vue

@@ -55,38 +55,26 @@ onMounted(() => {
         <img :src="getAssetURL(`home/${currentScene.coverImg}`)" alt="" />
       </div>
       <div class="content-box">
-        <div
-          class="content-box-item"
-          v-for="(item, index) in currentScene.parts"
-          :key="item.partName"
-        >
-          <div
-            class="item-title"
-            @click="open(index)"
-            v-if="item.partName != ''"
-          >
+        <div class="content-box-item" v-for="(item, index) in currentScene.parts" :key="item.partName">
+          <div class="item-title" @click="open(index)" v-if="item.partName != ''">
             <div class="scroll-wrap">
               <div class="scroll-item">
                 {{ item.partName }}
               </div>
             </div>
-            <img
-              v-show="index != 0"
-              :src="
-                currentPart == index
-                  ? getAssetURL('up.png')
-                  : getAssetURL('down.png')
-              "
-              alt=""
-            />
+            <img v-show="index != 0" :src="currentPart == index
+              ? getAssetURL('up.png')
+              : getAssetURL('down.png')
+              " alt="" />
           </div>
           <div class="item-list" v-if="currentPart == index || index == 0">
-            <div
-              class="item-list-item"
-              v-for="(p, i) in item.paragraphs"
-              @click="goDetail(p, index)"
-            >
-              {{ p.paragraphName }}
+            <div class="item-list-item" v-for="(p, i) in item.paragraphs" @click="goDetail(p, index)">
+              <div class="scroll-wrap">
+                <div class="scroll-item">
+                  {{ p.paragraphName }}
+                </div>
+              </div>
+
             </div>
           </div>
         </div>
@@ -110,8 +98,10 @@ onMounted(() => {
     background: url(/src\assets\img\contentBg.png);
     background-size: 100% 100%;
     border-radius: 8px 8px 0 0;
+
     .top-img {
       width: 100%;
+
       // height: 30vh;
       img {
         width: 100%;
@@ -120,6 +110,7 @@ onMounted(() => {
         box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
       }
     }
+
     .content-box {
       width: 100%;
       height: 70vh;
@@ -141,6 +132,7 @@ onMounted(() => {
           text-align: center;
           line-height: 8vh;
           position: relative;
+
           .scroll-wrap {
             max-width: 100%;
             padding: 0 10px;
@@ -148,10 +140,12 @@ onMounted(() => {
             vertical-align: top;
             overflow: hidden;
             white-space: nowrap;
+
             .scroll-item {
               animation: scroll linear 4s alternate infinite;
               float: left;
             }
+
             @keyframes scroll {
               0% {
                 margin-left: 0;
@@ -174,6 +168,7 @@ onMounted(() => {
               }
             }
           }
+
           img {
             width: 6vw;
             height: 6vw;
@@ -187,6 +182,7 @@ onMounted(() => {
 
         .item-list {
           transition: height 2s;
+
           &-item {
             width: 100%;
             height: 8vh;
@@ -199,9 +195,45 @@ onMounted(() => {
             text-align: center;
             line-height: 8vh;
             font-weight: bold;
+
             // white-space: nowrap;
             // overflow: hidden;
             // text-overflow: ellipsis;
+            .scroll-wrap {
+              max-width: 100%;
+              padding: 0 10px;
+              display: inline-block;
+              vertical-align: top;
+              overflow: hidden;
+              white-space: nowrap;
+
+              .scroll-item {
+                animation: scroll linear 4s alternate infinite;
+                float: left;
+              }
+
+              @keyframes scroll {
+                0% {
+                  margin-left: 0;
+                  transform: translateX(0);
+                }
+
+                10% {
+                  margin-left: 0;
+                  transform: translateX(0);
+                }
+
+                90% {
+                  margin-left: 100%;
+                  transform: translateX(-100%);
+                }
+
+                100% {
+                  margin-left: 100%;
+                  transform: translateX(-100%);
+                }
+              }
+            }
           }
         }
       }
@@ -209,6 +241,7 @@ onMounted(() => {
       // background: url(/src\assets\img\contentBg.png);
       // background-size: 100% 100%;
     }
+
     .content-box::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       -webkit-box-shadow: inset 0 0 5px transparent;
@@ -216,6 +249,7 @@ onMounted(() => {
       background: transparent;
     }
   }
+
   .home-icon {
     width: 15vw;
     height: 15vw;