feat: base page

src/App.vue

@@ -29,6 +29,10 @@ header {
 
 .main {
   flex: 1 0 auto;
+  background-image: url("./assets/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
 }
 
 footer {

src/layout/Header.vue

@@ -1,34 +1,31 @@
 <template>
   <header :data-color="color">
     <nav id="menu">
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          Projects<i class="el-icon-arrow-down el-icon--right"></i>
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>The Perspective of The Other, 2022</el-dropdown-item>
-          <el-dropdown-item>The Last Mile, 2021</el-dropdown-item>
-          <el-dropdown-item>La jetée 2021,2021</el-dropdown-item>
-          <el-dropdown-item>Cardboard Cut-outs, 2020</el-dropdown-item>
-          <el-dropdown-item>The right to clip, 2020</el-dropdown-item>
-          <el-dropdown-item>film.exe, 2020</el-dropdown-item>
-          <el-dropdown-item>Overexposure, 2019</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          About<i class="el-icon-arrow-down el-icon--right"></i>
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>Biography</el-dropdown-item>
-          <el-dropdown-item>CV</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <el-link href="/#/contact">
-        Contact
-      </el-link>
+      <div class="menu-item" id="menu-item-1">
+        <div>
+          <a href="#/">Projects</a>
+        </div>
+        <div class="menu-content">
+          <p><a href="#/part1">Artificial Rainfall（working name）</a></p>
+          <p><a href="#/part2">The Perspective of The Other, 2022</a></p>
+          <p><a href="#/part3">The Last Mile, 2021</a></p>
+          <p><a href="#/part4">La jetée 2021, 2021</a></p>
+          <p><a href="#/part5">Cardboard Cut-outs, 2020</a></p>
+          <p><a href="#/part6">The right to clip, 2020</a></p>
+          <p><a href="#/part7">film.exe, 2020</a></p>
+          <p><a href="#/part8">Overexposure, 2019</a></p>
+        </div>
+      </div>
+      <div class="menu-item" id="menu-item-2">
+        <div>About</div>
+        <div class="menu-content">
+          <p><a>Biography</a></p>
+          <p><a>CV</a></p>
+        </div>
+      </div>
+      <div class="menu-item" id="menu-item-3">
+        <a href="#/contact">Contact</a>
+      </div>
     </nav>
   </header>
 </template>
@@ -48,23 +45,38 @@ export default {
 </script>
 
 <style scoped>
-header {
-  display: flex;
-  flex-direction: row;
-  padding: 24px;
+#menu {
+  width: 1000px;
 }
 
-#menu {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: row;
-  justify-content: left;
-  margin: 0;
-  padding: 0;
+.menu-item {
+  display: inline-block;
+  padding-top: 18px;
+  margin-left: 32px;
+  cursor: pointer;
+  float: top;
+}
+
+.menu-content {
+  position: absolute;
+  background: white;
+  display: none;
+}
+
+.menu-content p {
+  line-height: 60%;
+}
+
+.menu-item:hover {
+  background: white;
+}
+
+.menu-item:hover .menu-content {
+  display: block;
 }
 
-#menu div {
-  margin: 0 6px;
-  padding: 0 4px;
+.menu-item a {
+  color: black;
+  text-decoration: none;
 }
 </style>

src/router.js

@@ -5,6 +5,14 @@ import Footer from "./layout/Footer.vue";
 import Index from "./views/Index.vue";
 import About from "./views/About.vue";
 import Contact from "./views/Contact.vue";
+import Part1 from "./views/Part1.vue";
+import Part2 from "./views/Part2.vue";
+import Part3 from "./views/Part3.vue";
+import Part4 from "./views/Part4.vue";
+import Part5 from "./views/Part5.vue";
+import Part6 from "./views/Part6.vue";
+import Part7 from "./views/Part7.vue";
+import Part8 from "./views/Part8.vue";
 
 Vue.use(Router);
 
@@ -37,6 +45,49 @@ export default new Router({
         footer: { backgroundColor: "black" }
       }
     },
+    {
+      path: "/part1",
+      name: "part1",
+      components: { default: Part1, header: Header, footer: Footer },
+    },
+    {
+      path: "/part2",
+      name: "part2",
+      components: { default: Part2, header: Header, footer: Footer },
+      props: {
+        header: { color: "white" },
+      }
+    },
+    {
+      path: "/part3",
+      name: "part3",
+      components: { default: Part3, header: Header, footer: Footer },
+    },
+    {
+      path: "/part4",
+      name: "part4",
+      components: { default: Part4, header: Header, footer: Footer },
+    },
+    {
+      path: "/part5",
+      name: "part5",
+      components: { default: Part5, header: Header, footer: Footer },
+    },
+    {
+      path: "/part6",
+      name: "part6",
+      components: { default: Part6, header: Header, footer: Footer },
+    },
+    {
+      path: "/part7",
+      name: "part7",
+      components: { default: Part7, header: Header, footer: Footer },
+    },
+    {
+      path: "/part8",
+      name: "part8",
+      components: { default: Part8, header: Header, footer: Footer },
+    },
   ],
   scrollBehavior: to => {
     if (to.hash) {

src/views/Index.vue

@@ -1,45 +1,34 @@
 <template>
   <div class="container">
-    <!--
-    <div>
-      <a href="/#/"><h1>The Perspective of The Other, 2022</h1></a>
-      <a href="/#/"><h1>The Last Mile, 2021</h1></a>
-      <a href="/#/"><h1>La jetée 2021,2021</h1></a>
-      <a href="/#/"><h1>Cardboard Cut-outs, 2020</h1></a>
-      <a href="/#/"><h1>The right to clip, 2020</h1></a>
-      <a href="/#/"><h1>film.exe, 2020</h1></a>
-      <a href="/#/"><h1>Overexposure, 2019</h1></a>
-    </div>
-    -->
     <div id="main-left">
       <div id="main-name">
-        <p>Chen<br/>Luyu</p>
+        <img src="../assets/img-name.png"/>
       </div>
     </div>
     <div id="main-right">
       <div class="box" id="box-1">
-        <a href="/#/">Project 1</a>
+        <a href="#/part1">Artificial Rainfall（working name）</a>
       </div>
       <div class="box" id="box-2">
-        <a href="/#/">Project 2</a>
+        <a href="#/part2">The Perspective of The Other, 2022</a>
       </div>
       <div class="box" id="box-3">
-        <a href="/#/">Project 3</a>
+        <a href="#/part3">The Last Mile, 2021</a>
       </div>
       <div class="box" id="box-4">
-        <a href="/#/">Project 4</a>
+        <a href="#/part4">La jetée 2021,2021</a>
       </div>
       <div class="box" id="box-5">
-        <a href="/#/">Project 5</a>
+        <a href="#/part5">Cardboard Cut-outs, 2020</a>
       </div>
       <div class="box" id="box-6">
-        <a href="/#/">Project 6</a>
+        <a href="#/part6">The right to clip, 2020</a>
       </div>
       <div class="box" id="box-7">
-        <a href="/#/">Project 7</a>
+        <a href="#/part7">film.exe, 2020</a>
       </div>
       <div class="box" id="box-8">
-        <a href="/#/">Project 8</a>
+        <a href="#/part8">Overexposure, 2019</a>
       </div>
     </div>
   </div>
@@ -52,26 +41,15 @@ export default {
 </script>
 
 <style scoped>
-/**
-h1 {
-  font-size: 28px;
-}
-
-a {
-  color: black;
-  text-decoration: none;
-}
- */
-
 .container {
   height: 100%;
+  padding: 0 32px;
 }
 
 #main-left {
 }
 
 #main-right {
-  /*flex: 1 0 auto;*/
   display: flex;
   flex-direction: column;
   float: right;
@@ -81,9 +59,8 @@ a {
 
 #main-name {
   position: absolute;
-  bottom: 20px;
+  bottom: 64px;
   left: 32px;
-  font-size: 96px;
 }
 
 #main-right div {
@@ -97,6 +74,7 @@ a {
   flex-direction: column;
   justify-content: center;
   padding-left: 24px;
+  margin-bottom: 8px;
 }
 
 .box a {
@@ -107,40 +85,48 @@ a {
   transition: all 0.6s;
 }
 
+.box:hover {
+  margin-bottom: 0;
+}
+
 .box:hover a {
   display: block;
   transform: unset;
 }
 
 #box-1 {
-  background-image: url("../assets/img-1.jpg");
+  background-image: url("../assets/img-1.png");
 }
 
 #box-2 {
-  background-image: url("../assets/img-2.jpg");
+  background-image: url("../assets/img-2.png");
 }
 
 #box-3 {
-  background-image: url("../assets/img-3.jpg");
+  background-image: url("../assets/img-3.png");
 }
 
 #box-4 {
-  background-image: url("../assets/img-4.jpg");
+  background-image: url("../assets/img-4.png");
 }
 
 #box-5 {
-  background-image: url("../assets/img-5.jpg");
+  background-image: url("../assets/img-5.png");
 }
 
 #box-6 {
-  background-image: url("../assets/img-6.jpg");
+  background-image: url("../assets/img-6.png");
 }
 
 #box-7 {
-  background-image: url("../assets/img-7.jpg");
+  background-image: url("../assets/img-7.png");
 }
 
 #box-8 {
-  background-image: url("../assets/img-8.jpg");
+  background-image: url("../assets/img-8.png");
+}
+
+#box-5 a, #box-8 a {
+  color: black;
 }
 </style>

src/views/Part1.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    p1
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part1"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Part2.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="container">
+    <div style="padding: 72px 32px 0;">
+      <img src="../assets/p2/10.png" width="100%"/>
+      <img src="../assets/p2/20.jpg" width="35%" style="float: right; margin-top: 48px;"/>
+
+      <div class="grid">
+        <div class="row">
+          <img src="../assets/p2/11.jpg"/>
+          <span></span>
+        </div>
+        <div class="row">
+          <span></span>
+          <img src="../assets/p2/12.jpg"/>
+        </div>
+        <div class="row">
+          <img src="../assets/p2/13.jpg"/>
+          <span></span>
+        </div>
+        <div class="row">
+          <span></span>
+          <img src="../assets/p2/14.jpg"/>
+        </div>
+        <div class="row">
+          <img src="../assets/p2/15.jpg"/>
+          <span></span>
+        </div>
+        <div class="row">
+          <span></span>
+          <img src="../assets/p2/16.jpg"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part2"
+}
+</script>
+
+<style scoped>
+.container {
+  height: 100%;
+  background-image: url("../assets/p2/01.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.grid {
+  width: 50%;
+  margin-top: 48px;
+  margin-left: 25%;
+  position: absolute;
+}
+
+.grid .row {
+  display: flex;
+}
+
+.grid img {
+  width: 50%;
+}
+
+.grid span {
+  width: 50%;
+}
+</style>

src/views/Part3.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    p3
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part3"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Part4.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container">
+    <div class="content">
+      <img src="../assets/p4/00.jpg" width="100%"/>
+
+      <div>视频</div>
+
+      <el-carousel indicator-position="outside">
+        <el-carousel-item><img src="../assets/p4/01.jpg" width="100%"/></el-carousel-item>
+        <el-carousel-item><img src="../assets/p4/02.jpg" width="100%"/></el-carousel-item>
+        <el-carousel-item><img src="../assets/p4/03.jpg" width="100%"/></el-carousel-item>
+        <el-carousel-item><img src="../assets/p4/04.jpg" width="100%"/></el-carousel-item>
+        <el-carousel-item><img src="../assets/p4/05.jpg" width="100%"/></el-carousel-item>
+        <el-carousel-item><img src="../assets/p4/06.jpg" width="100%"/></el-carousel-item>
+      </el-carousel>
+
+      <div>
+        <img src="../assets/p4/11.jpg" width="33.33%"/>
+        <img src="../assets/p4/12.jpg" width="33.33%"/>
+        <img src="../assets/p4/13.jpg" width="33.33%"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part4",
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style scoped>
+.content {
+  display: block;
+  width: 50%;
+  margin-left: auto;
+  margin-right: 32px;
+}
+</style>

src/views/Part5.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <img src="../assets/p5/10.png" width="100%"/>
+    </div>
+
+    <div class="right">
+      <div style="margin-top: 60px;">
+        <el-carousel indicator-position="outside">
+          <el-carousel-item><img src="../assets/p5/01.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p5/02.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p5/03.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p5/04.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p5/05.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p5/06.jpg" width="100%"/></el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div>视频</div>
+
+      <div>
+        <img src="../assets/p5/11.png" width="50%"/>
+        <img src="../assets/p5/12.png" width="50%"/>
+      </div>
+
+      <img src="../assets/p5/07.jpg" width="100%"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part5"
+}
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+}
+
+.left {
+  flex: 1;
+  margin: 120px 0 0 32px;
+}
+
+.right {
+  flex: 1;
+  margin: 0 32px 32px 0;
+}
+</style>

src/views/Part6.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="container">
+    <div id="album">
+      <div class="row" id="row1">
+        <img src="../assets/p6/01.jpg" width="60%" height="200"/>
+        <img src="../assets/p6/02.jpg" width="30%" height="140" style="margin-top: auto;"/>
+      </div>
+      <div class="row" id="row2">
+        <img src="../assets/p6/03.jpg" width="32.5%" height="160"/>
+        <img src="../assets/p6/04.jpg" width="32.5%" height="160"/>
+        <img src="../assets/p6/05.jpg" width="32.5%" height="160"/>
+      </div>
+      <div class="row" id="row3">
+        <img src="../assets/p6/06.jpg" width="30%" height="140" style="margin-left: auto;"/>
+        <img src="../assets/p6/07.jpg" width="60%" height="200" style="margin-left: 0;"/>
+      </div>
+      <div class="row" id="row4">
+        <img src="../assets/p6/08.png" width="32.5%" height="140"/>
+        <img src="../assets/p6/09.jpg" width="32.5%" height="140"/>
+        <img src="../assets/p6/10.jpg" width="32.5%" height="140"/>
+      </div>
+    </div>
+
+    <div id="album2">
+      <div class="row" id="row5">
+        <img src="../assets/p6/11.jpg" width="19%"/>
+        <img src="../assets/p6/12.jpg" width="39%"/>
+        <img src="../assets/p6/13.jpg" width="39%"/>
+      </div>
+    </div>
+
+    <div style="position: fixed; left: 32px; bottom: 100px;">
+      <img src="../assets/img-name.png"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part6"
+}
+</script>
+
+<style scoped>
+.container {
+}
+
+#album {
+  background-color: white;
+  display: block;
+  width: 60%;
+  margin: 24px 32px 24px auto;
+}
+
+#album2 {
+  display: block;
+  width: 60%;
+  margin: 24px 32px 0 auto;
+}
+
+#album .row {
+  display: flex;
+}
+
+#album img {
+  padding: 4px;
+  transition: 1s;
+}
+
+#album img:hover {
+  transform: scale(1.5);
+}
+
+#album2 img {
+  padding: 4px;
+  transition: 1s;
+}
+
+#album2 img:hover {
+  transform: scale(1.5);
+}
+
+#row1 {
+  /*justify-content: end;*/
+}
+</style>

src/views/Part7.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container">
+    <div class="section">
+      <div style="width: 50%; margin-top: 60px; margin-left: 32px">
+        <p style="font-size: 24px;">&lt;Film.exe&gt;</p>
+        <p>2020年<br/>交互作品，虚幻引擎<br/>独立作品</p>
+        <p>不固定的取景器是⼀种移动的取景，电影的观看从时间转换变成空同转换。</p>
+
+        <p>
+          由⼀部电影情节中上千张电影帧图像，形成全景的影 像，在平⾯上展现随着电影时间⽽展开的空间。“可 操作的图像” ⽐起观看图像，我们越来越多地点击图像。 这件作品是用电子游戏引擎编写的软件程序，在后台 实时运行，标题中的 “.exe”的后缀也暗示了它的可执
+          行属性。作为时基媒体的电影形成空间，在同时间展 现。电影的取景是已完成的，对电影的平⾯化展开， 观众可以移动⿏标对图像迸⾏取景，新取景，取消取 景。不固定的取景器是⼀种移动的取景，电影的观看 从时间转换变成空同转换。把电影观看这⼀顺序⾏为
+          变成⾃主⾏为，在取景时，电影那⼀帧时的声⾳同时 响起。 可为现场装置，观看电影成为集体的公共活劫。
+        </p>
+      </div>
+      <div style="width: 50%;">
+        <img src="../assets/p7/01.png" width="100%" style=""/>
+        <img src="../assets/p7/02.jpg" width="25%" style="position: absolute; right: 0; bottom: 60px;"/>
+      </div>
+    </div>
+
+    <div>
+      <img src="../assets/p7/03.png" width="100%"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part7"
+}
+</script>
+
+<style scoped>
+.section {
+  display: flex;
+}
+
+.section p {
+  background-color: white;
+  display: table;
+}
+</style>

src/views/Part8.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <div class="section">
+      <div style="width: 50%;"></div>
+      <div style="width: 50%; margin: 64px 32px 0 0;">
+        <img src="../assets/p8/00.png" width="100%"/>
+
+        <div style="margin-top: 20px;">
+          <el-carousel indicator-position="outside">
+            <el-carousel-item><img src="../assets/p8/01.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/02.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/03.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/04.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/05.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/06.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/07.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/08.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/09.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/10.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/11.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/12.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/13.jpg" width="100%"/></el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+    </div>
+
+    <div style="position: absolute; left: 32px; bottom: 100px;">
+      <img src="../assets/img-name.png"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Part8"
+}
+</script>
+
+<style scoped>
+.section {
+  display: flex;
+}
+</style>