Browse Source

增加第三个展馆数据

aamin 1 year ago
parent
commit
c98ab0da3b
2 changed files with 351 additions and 311 deletions
  1. 310 308
      src/data/data.ts
  2. 41 3
      src/view/home/index.vue

File diff suppressed because it is too large
+ 310 - 308
src/data/data.ts


+ 41 - 3
src/view/home/index.vue

@@ -7,7 +7,6 @@ const getAssetURL = (image: string) => {
 
 const router = useRouter();
 const goDetail = (id: string) => {
-
   router.push(
     {
       path: "/exhibitionList",
@@ -35,7 +34,13 @@ onMounted(() => {
       @click="goDetail(item.id)"
     >
       <img :src="getAssetURL(item.coverImg)" alt="" />
-      <div class="title-box">{{ item.name }}</div>
+      <div class="title-box">
+        <div class="scroll-wrap">
+          <div class="scroll-item">
+            {{item.name}}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -71,7 +76,40 @@ onMounted(() => {
       line-height: 2.5rem;
       letter-spacing: 2px;
       font-weight: bold;
-      padding-left: 5%;
+      // padding-left: 5%;
+      padding: 0 5PX;
+      .scroll-wrap {
+        max-width: 100%;
+        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%);
+          }
+        }
+      }
     }
   }
 }