整体基本完成

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>ALPHAAE 个人项目</title>
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
     <link rel="stylesheet" href="./libs/font-awesome/css/font-awesome.min.css">
     <link href="./css/bootstrap.min.css" rel="stylesheet">

src/App.vue

@@ -7,6 +7,8 @@
     </div>
 
     <public-footer></public-footer>
+
+    <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
   </div>
 </template>
 
@@ -33,5 +35,4 @@ body {
   text-align: center;
   color: #2c3e50;
 } */
-
 </style>

src/components/ProjectGame.vue

@@ -1,45 +1,27 @@
 <template>
-    <div class="project-game shadow-large" style="height: 225px;">
+    <div class="project shadow-large">
-        <div class="project-image" style="height: 225px; width: 400px;">
+        <div class="look-detail"></div>
-            <el-carousel height="225px" v-if="data.img.length > 1">
+        <div class="project-image" style="height: 168px; width: 300px;">
-                <el-carousel-item v-for="(item, i) in data.img" :key="i">
+            <img height="168px" :src="data.img[0]" />
-                    <img :src="item" />
-                </el-carousel-item>
-            </el-carousel>
-            <img v-else :src="data.img[0]" />
         </div>
         <div class="project-info">
             <h3 style="margin: 0 0 12px 0;"> {{ data.name }}</h3>
             <p class="project-tags">
-                <span v-for="(item, i) in data.tag" :key="i">
+                <span v-for="(item, i) in data.tag" :key="i" :style="'background-color: ' + color.tags[item] + ';'">{{
-                    {{ item }}
+                        item
-                </span>
+                }}</span>
             </p>
 
             <p>
-                {{ data.description }}
+                {{ data.descriptionMini }}
-            </p>
-            <p class="project-link">
-                <span v-if="data.repository">
-                    <i class="fa fa-github-alt fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.repository" target="_blank">仓库地址</a>
-                </span>
-
-                <span v-if="data.playUrl">
-                    <i class="fa fa-gamepad fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.playUrl" target="_blank">在线演示</a>
-                </span>
-
-                <span v-if="data.videoUrl">
-                    <i class="fa fa-youtube-play fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.videoUrl" target="_blank">在线观看</a>
-                </span>
             </p>
         </div>
     </div>
+
 </template>
 
 <script>
+import colorJson from '@/data/color.json'
 export default {
     props: {
         data: {
@@ -52,12 +34,19 @@ export default {
             repository: String,
             playUrl: String
         }
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
     }
 }
 </script>
 
-<style>
+<style scoped>
-.project-tags {}
+img {
+    width: 100%;
+}
 
 .project-tags>span {
     margin: 0 4px;
@@ -68,7 +57,14 @@ export default {
     border-radius: 4px;
 }
 
-.project-link>span {
+.project {
-    margin: 0 10px;
+    transition-duration: 0.2s;
+    cursor: pointer;
+}
+
+.project:hover {
+    color: #3498db;
+    transform: scale(1.1);
+    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.02), 0 3px 15px rgba(0, 0, 0, 0.07);
 }
 </style>

src/components/ProjectGameStar.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="project-game shadow-large" style="height: 225px;">
+        <div class="project-image" style="height: 225px; width: 400px;">
+            <el-carousel height="225px" trigger="click" v-if="data.img.length > 1">
+                <el-carousel-item v-for="(item, i) in data.img" :key="i">
+                    <img :src="item" />
+                </el-carousel-item>
+            </el-carousel>
+            <img v-else :src="data.img[0]" />
+        </div>
+        <div class="project-info">
+            <h3 style="margin: 0 0 12px 0;"> {{ data.name }}</h3>
+            <p class="project-tags">
+                <span v-for="(item, i) in data.tag" :key="i" :style="'background-color: ' + color.tags[item] + ';'">{{
+                        item
+                }}</span>
+            </p>
+
+            <p>
+                {{ data.description }}
+            </p>
+            <p class="project-link">
+                <span v-if="data.repository">
+                    <i class="fa fa-github-alt fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.repository" target="_blank">仓库地址</a>
+                </span>
+
+                <span v-if="data.playUrl">
+                    <i class="fa fa-gamepad fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.playUrl" target="_blank">在线演示</a>
+                </span>
+
+                <span v-if="data.videoUrl">
+                    <i class="fa fa-youtube-play fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.videoUrl" target="_blank">在线观看</a>
+                </span>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import colorJson from '@/data/color.json'
+export default {
+    props: {
+        data: {
+            id: Intl,
+            name: String,
+            tag: Array,
+            description: String,
+            img: Array,
+            createTime: String,
+            repository: String,
+            playUrl: String
+        }
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.project-tags {}
+
+.project-tags>span {
+    margin: 0 4px;
+    padding: 4px;
+    color: white;
+    font-size: 0.4em;
+    background: rgb(131, 131, 131);
+    border-radius: 4px;
+}
+
+.project-link>span {
+    margin: 0 10px;
+}
+</style>

src/components/ProjectInfoDialog.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <el-carousel :autoplay="false" type="card" :loop="false" trigger="click" height="300px">
+            <el-carousel-item v-if="data.videoUrl" :key="-1">
+                <iframe width="100%" height="100%" :src="data.videoUrl" scrolling="no" border="0" frameborder="no"
+                    framespacing="0" allowfullscreen="true"> </iframe>
+            </el-carousel-item>
+            <el-carousel-item v-for="(item, i) in data.img" :key="i">
+                <img :src="item" width="100%" />
+            </el-carousel-item>
+        </el-carousel>
+
+        <div class="project-info">
+            <el-row>
+                <el-col :span="18">
+                    <h1> {{ data.name }}</h1>
+                    <p class="project-tags">
+                        <span v-for="(item, i) in data.tag" :key="i"
+                            :style="'background-color: ' + color.tags[item] + ';'">{{ item }}</span>
+                    </p>
+
+                    <p style="font-size: 1.1em;">
+                        {{ data.description }}
+                    </p>
+                </el-col>
+                <el-col :span="6">
+                    <div style="position:absolute;  bottom:0; right:0;">
+                        <p style="margin: 15px 0 0 0;" v-if="data.repository">
+                            <a :href="data.repository" target="_blank">
+                                <el-button type="primary">
+                                    <i class="fa fa-github-alt fa-fw fa-lg" aria-hidden="true"
+                                        style="margin-right: 10px;"></i>
+                                    仓库地址
+                                </el-button>
+                            </a>
+                        </p>
+                        <p style="margin: 15px 0 0 0;" v-if="data.playUrl">
+                            <a :href="data.playUrl" target="_blank">
+                                <el-button type="warning">
+                                    <i class="fa fa-gamepad fa-fw fa-lg" aria-hidden="true"
+                                        style="margin-right: 10px;"></i>
+                                    在线演示
+                                </el-button>
+                            </a>
+                        </p>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import colorJson from '@/data/color.json'
+export default {
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.project-tags>span {
+    margin: 0 4px;
+    padding: 4px;
+    color: white;
+    font-size: 1.2em;
+    background: rgb(131, 131, 131);
+    border-radius: 4px;
+}
+</style>

src/components/PublicFooter.vue

@@ -7,11 +7,7 @@
                         © <span id="current-year"> 2022 </span> AlphaAE.
                     </p>
                 </div>
-                <div class="col-sm-2 top">
+                <div class="col-sm-2 top"></div>
-                    <span id="to-top">
-                        <i class="fa fa-chevron-up" aria-hidden="true"></i>
-                    </span>
-                </div>
                 <div class="col-sm-5 social">
                     <ul>
                         <li>

src/data/color.json

@@ -0,0 +1,14 @@
+{
+  "tags": {
+    "default": "#74808a",
+    "Minecraft": "#6a9039",
+    "Mod": "#976327",
+    "Addon": "#ea427b",
+    "ModPE": "#323e85",
+    "JavaScript": "#ff9b2b",
+    "React": "#1c79c2",
+    "Python": "#3c78aa",
+    "Scrapy": "#448f3d",
+    "Java": "#d9292a"
+  }
+}

src/data/projects.json

@@ -2,10 +2,12 @@
   "projects": [
     {
       "id": 1,
+      "isStar": true,
       "type": "Mod",
       "name": "秘密战争",
       "tag": ["Minecraft", "Mod", "Python"],
       "description": "网易我的世界 API 制作的 Roguelike 类游戏模组 & 地图",
+      "descriptionMini": "我的世界 Roguelike 类游戏拓展",
       "img": [
         "./assets/projects/NeteaseMCAddOn_SecretWar_banner.png",
         "./assets/projects/NeteaseMCAddOn_SecretWar_inGame_1.jpg",
@@ -19,10 +21,12 @@
     },
     {
       "id": 2,
+      "isStar": false,
       "type": "游戏",
       "name": "[Demo]打飞机",
       "tag": ["Java", "JOGL"],
       "description": "使用 JOGL 包开发的雷电玩法小游戏",
+      "descriptionMini": "使用 JOGL 包开发的雷电玩法小游戏",
       "img": [
         "./assets/projects/FightingDemo_1.jpg",
         "./assets/projects/FightingDemo_2.jpg"
@@ -33,10 +37,12 @@
     },
     {
       "id": 3,
+      "isStar": true,
       "type": "Mod",
       "name": "萌化怪物模组",
       "tag": ["Minecraft", "Mod", "Addon"],
       "description": "适用于国际版与网易版我的世界基岩的怪物拓展模组",
+      "descriptionMini": "我的世界基岩版怪物拓展模组",
       "img": [
         "./assets/projects/CutMobAddon_banner.jpg",
         "./assets/projects/CutMobAddon_inGame_1.jpg",
@@ -49,10 +55,12 @@
     },
     {
       "id": 3,
+      "isStar": true,
       "type": "Mod",
       "name": "文字冒险框架模组",
       "tag": ["Minecraft", "ModPE", "JavaScript"],
       "description": "适用于国际版我的世界中的 GalGame 游戏框架模组",
+      "descriptionMini": "我的世界 GalGame 游戏框架模组",
       "img": [
         "./assets/projects/McGalgame_1.jpg",
         "./assets/projects/McGalgame_2.jpg"
@@ -63,22 +71,26 @@
     },
     {
       "id": 4,
+      "isStar": false,
       "type": "动画",
       "name": "史丹利的寓言",
       "tag": ["Minecraft"],
       "description": "Cinema 4D 制作的我的世界风格原创 3D 动画",
+      "descriptionMini": "我的世界风格原创 3D 动画",
       "img": ["./assets/projects/Video_Stanley's_Fable.jpg"],
       "createTime": "2016.01.17",
       "repository": "",
       "playUrl": "",
-      "videoUrl": "https://www.bilibili.com/video/BV1hs411R7S4"
+      "videoUrl": "//player.bilibili.com/player.html?aid=3603745&bvid=BV1hs411R7S4&cid=5754859&page=1"
     },
     {
       "id": 4,
+      "isStar": false,
       "type": "网站",
-      "name": "任天堂游戏多区域价格比价平台",
+      "name": "Eshop多区价格比价平台",
       "tag": ["React", "Python", "Scrapy"],
       "description": "Python 后端、React 前端开发的可视化游戏比价网站",
+      "descriptionMini": "可视化游戏比价网站",
       "img": [
         "./assets/projects/EshopPriceComparison_1.jpg",
         "./assets/projects/EshopPriceComparison_2.jpg"

src/views/ProjectView.vue

@@ -1,59 +1,63 @@
 <template>
     <div class="projects-view">
         <div id="projects" class="background-alt-nth">
-            <h2 class="heading">项目</h2>
+            <h2 class="heading">精选</h2>
             <div class="container-game">
-                <project-game v-for="(data, i) in projectData" :data="data" :key="i"></project-game>
+                <project-game-star v-for="(data, i) in starData" :data="data" :key="i"></project-game-star>
             </div>
 
         </div>
 
-
         <div id="projects" class="background-alt-nth">
-            <h2 class="heading">3D Models</h2>
+            <h2 class="heading">Other</h2>
             <div class="container">
-
+                <project-game v-for="(data, i) in otherData" :data="data" :key="i" @click.native="openDialog(data)">
-                <!-- One Project 3DModel Block -->
+                </project-game>
-                <div class="project shadow-large">
-                    <div class="project-glb">
-                        <img class="image" src="assets/thumbs/model03-thumb.jpg" alt="assets/fulls/model03-full.glb" />
-                    </div>
-                </div>
-                <!-- End of One Project 3DModel Block -->
-
-
-                <div class="project shadow-large">
-                    <div class="project-glb">
-                        <img class="image" src="assets/thumbs/model04-thumb.jpg" alt="assets/fulls/model04-full.glb" />
-                    </div>
-                </div>
-
             </div>
         </div>
 
+        <el-dialog :visible.sync="dialogVisible" @closed="closeDialog">
+            <project-info-dialog :data="selectProject"></project-info-dialog>
+        </el-dialog>
+
     </div>
 </template>
 
 <script>
+import ProjectGameStar from '@/components/ProjectGameStar.vue'
 import ProjectGame from '@/components/ProjectGame.vue'
 import ProjectData from "@/data/projects.json"
+import ProjectInfoDialog from '@/components/ProjectInfoDialog.vue'
 export default {
+    components: { ProjectGameStar, ProjectGame, ProjectInfoDialog },
     data() {
         return {
+            dialogVisible: false,
+            selectProject: {},
             projectData: ProjectData.projects,
-            data: {
+            starData: [],
-                id: 1,
+            otherData: []
-                name: "Flappy bird demo",
-                tag: ["Unity", "Unity", "Unity"],
-                description: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
-                img: ["./assets/thumbs/project02-thumb.jpg"],
-                createTime: "2020-01-01",
-                repository: "https://www.thinkcmf.com/font/font_awesome/icon/steam-square",
-                playUrl: ""
-            }
         }
     },
-    components: { ProjectGame },
+    created() {
+        this.projectData.forEach((item) => {
+            if (item.isStar) {
+                this.starData.push(item);
+            } else {
+                this.otherData.push(item);
+            }
+
+        })
+    },
+    methods: {
+        openDialog(data) {
+            this.selectProject = data;
+            this.dialogVisible = true;
+        },
+        closeDialog() {
+            this.selectProject = {};
+        }
+    }
 }
 </script>