update source path

romanlee821116 · Jul 8, 2024 · 93f05b2 · 93f05b2
1 parent c3d6ad2
commit 93f05b2
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 17 deletions.
diff --git a/docs/assets/hk-landscap.mp4 b/docs/assets/hk-landscap.mp4
diff --git a/docs/assets/index-CVtbA06C.css b/docs/assets/index-CVtbA06C.css
diff --git a/docs/assets/index-Dl3c1gov.js → docs/assets/index-CfBqc8yN.js b/docs/assets/index-Dl3c1gov.js → docs/assets/index-CfBqc8yN.js
diff --git a/docs/assets/index-TZNBwB0v.css b/docs/assets/index-TZNBwB0v.css
diff --git a/docs/index.html b/docs/index.html
@@ -4,8 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Hong Kong - NEON CITY</title>
-		<script type="module" crossorigin src="/neon-hong-kong/assets/index-Dl3c1gov.js"></script>
-		<link rel="stylesheet" crossorigin href="/neon-hong-kong/assets/index-TZNBwB0v.css">
+		<script type="module" crossorigin src="/neon-hong-kong/assets/index-CfBqc8yN.js"></script>
+		<link rel="stylesheet" crossorigin href="/neon-hong-kong/assets/index-CVtbA06C.css">
 	</head>
 	<body>
 		<div id="app"></div>

diff --git a/public/assets/hk-landscap.mp4 b/public/assets/hk-landscap.mp4
diff --git a/src/App.vue b/src/App.vue
@@ -86,7 +86,6 @@ export default {
 };
 </script>
 
-
 <template>
 	<div class="header">
 		<img
@@ -113,7 +112,9 @@ export default {
 		<ScrollyVideo
 			id="land-scap-video"
 			:videoPercentage="0"
-			src="https://story-telling-storage.twreporter.org/files/hk-font-0626-landscape-lJME8N0znScoICcvjdc.mp4"
+			src="./assets/hk-landscap.mp4"
+			@onReady="onReady"
+			@onChange="onChange"
 		/>
 		<div
 			v-for="(item, index) in introList"
@@ -131,13 +132,13 @@ export default {
 	<div class="live-photo">
 		<div class="live-photo-header">
 			<button @click="prev">
-				{{ '<' }}
+				<i class="arrow left" />
 			</button>
 			<p>
 				下面是一些過去在香港旅遊時紀錄的招牌以及霓虹燈
 			</p>
 			<button @click="next">
-				{{ '>' }}
+				<i class="arrow right" />
 			</button>
 		</div>
 		<Carousel
@@ -255,11 +256,28 @@ export default {
 
 		button {
 			width: 60px;
-			height: 60px;
+			height: 40px;
 			border: 1px solid #ccc;
 			background-color: transparent;
 			color: white;
 
+			.arrow {
+				border: solid white;
+				border-width: 0 4px 4px 0;
+				display: inline-block;
+				padding: 4px;
+			}
+
+			.right {
+				transform: rotate(-45deg);
+				-webkit-transform: rotate(-45deg);
+			}
+
+			.left {
+				transform: rotate(135deg);
+				-webkit-transform: rotate(135deg);
+			}
+
 			&:hover {
 				background-color: rgba(255, 255, 255, .3);
 			}
@@ -292,6 +310,12 @@ export default {
 		padding-left: 12px;
 		margin: 0;
 		font-size: 12px;
+
+		li {
+			:hover {
+				color: #888;
+			}
+		}
 	}
 }
 </style>
diff --git a/src/style.css b/src/style.css
@@ -29,6 +29,7 @@ body {
   min-width: 320px;
   min-height: 100vh;
   background-color: black;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -60,7 +61,7 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 100vw;
+  max-width: 100%;
   margin: 0 auto;
   /* padding: 2rem; */
   text-align: center;