Browse Source

更改不分部分的样式

aamin 1 year ago
parent
commit
f184d6aa54
2 changed files with 39 additions and 2 deletions
  1. 1 1
      src/data/data.ts
  2. 38 1
      src/view/exhibitionList/index.vue

+ 1 - 1
src/data/data.ts

@@ -617,7 +617,7 @@ const dataList = [
     coverImg: "2.png",
     parts: [
       {
-        partName: "",
+        partName: "指尖上的非遗——岳阳手工技艺民俗类非遗馆",
         // 段落
         paragraphs: [
           {

+ 38 - 1
src/view/exhibitionList/index.vue

@@ -65,7 +65,11 @@ onMounted(() => {
             @click="open(index)"
             v-if="item.partName != ''"
           >
-            {{ item.partName }}
+            <div class="scroll-wrap">
+              <div class="scroll-item">
+                {{ item.partName }}
+              </div>
+            </div>
             <img
               v-show="index != 0"
               :src="
@@ -137,6 +141,39 @@ onMounted(() => {
           text-align: center;
           line-height: 8vh;
           position: relative;
+          .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%);
+              }
+            }
+          }
           img {
             width: 6vw;
             height: 6vw;