init
This commit is contained in:
alphaAE
27
src/App.vue
27
src/App.vue
@ -1,28 +1,37 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<public-header></public-header>
|
||||
|
||||
<div class="contents">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<public-footer></public-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
import PublicFooter from './components/PublicFooter.vue'
|
||||
import PublicHeader from './components/PublicHeader.vue'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
PublicHeader,
|
||||
PublicFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* #app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
} */
|
||||
|
||||
</style>
|
||||
|
||||
74
src/components/ProjectGame.vue
Normal file
74
src/components/ProjectGame.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="project-game shadow-large" style="height: 225px;">
|
||||
<div class="project-image" style="height: 225px; width: 400px;">
|
||||
<el-carousel height="225px" 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">
|
||||
{{ 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>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
id: Intl,
|
||||
name: String,
|
||||
tag: Array,
|
||||
description: String,
|
||||
img: Array,
|
||||
createTime: String,
|
||||
repository: String,
|
||||
playUrl: String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
43
src/components/PublicFooter.vue
Normal file
43
src/components/PublicFooter.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 copyright">
|
||||
<p>
|
||||
© <span id="current-year"> 2022 </span> AlphaAE.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-2 top">
|
||||
<span id="to-top">
|
||||
<i class="fa fa-chevron-up" aria-hidden="true"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-5 social">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/alphaAE" target="_blank"><i class="fa fa-github"
|
||||
aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://steamcommunity.com/id/alphaAE/" target="_blank"><i
|
||||
class="fa fa-steam-square" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tencent://message/?uin=1226123914" target="_blank"><i class="fa fa-qq"
|
||||
aria-hidden="true"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
41
src/components/PublicHeader.vue
Normal file
41
src/components/PublicHeader.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<div id="mobile-menu-close">
|
||||
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
|
||||
</div>
|
||||
<ul id="menu" class="shadow">
|
||||
<li>
|
||||
<a href="http://www.alphaae.com" target="_blank">主页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://blog.alphaae.com" target="_blank">博客</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.alphaae.com/projects">项目</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">关于</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="header-bg"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-bg {
|
||||
border-bottom: 1px solid #dcd9d9;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
91
src/data/projects.json
Normal file
91
src/data/projects.json
Normal file
@ -0,0 +1,91 @@
|
||||
{
|
||||
"projects": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "Mod",
|
||||
"name": "秘密战争",
|
||||
"tag": ["Minecraft", "Mod", "Python"],
|
||||
"description": "网易我的世界 API 制作的 Roguelike 类游戏模组 & 地图",
|
||||
"img": [
|
||||
"./assets/projects/NeteaseMCAddOn_SecretWar_banner.png",
|
||||
"./assets/projects/NeteaseMCAddOn_SecretWar_inGame_1.jpg",
|
||||
"./assets/projects/NeteaseMCAddOn_SecretWar_inGame_2.jpg",
|
||||
"./assets/projects/NeteaseMCAddOn_SecretWar_inGame_3.jpg",
|
||||
"./assets/projects/NeteaseMCAddOn_SecretWar_inGame_4.jpg"
|
||||
],
|
||||
"createTime": "2020.11.17",
|
||||
"repository": "https://github.com/alphaAE/NeteaseMCAddOn_SecretWar",
|
||||
"playUrl": ""
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "游戏",
|
||||
"name": "[Demo]打飞机",
|
||||
"tag": ["Java", "JOGL"],
|
||||
"description": "使用 JOGL 包开发的雷电玩法小游戏",
|
||||
"img": [
|
||||
"./assets/projects/FightingDemo_1.jpg",
|
||||
"./assets/projects/FightingDemo_2.jpg"
|
||||
],
|
||||
"createTime": "2019.12.15",
|
||||
"repository": "https://github.com/alphaAE/FightingDemo-Class",
|
||||
"playUrl": ""
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "Mod",
|
||||
"name": "萌化怪物模组",
|
||||
"tag": ["Minecraft", "Mod", "Addon"],
|
||||
"description": "适用于国际版与网易版我的世界基岩的怪物拓展模组",
|
||||
"img": [
|
||||
"./assets/projects/CutMobAddon_banner.jpg",
|
||||
"./assets/projects/CutMobAddon_inGame_1.jpg",
|
||||
"./assets/projects/CutMobAddon_inGame_2.jpg",
|
||||
"./assets/projects/CutMobAddon_inGame_3.jpg"
|
||||
],
|
||||
"createTime": "2019.06.08",
|
||||
"repository": "https://github.com/alphaAE/CutMobAddon/tree/main",
|
||||
"playUrl": ""
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "Mod",
|
||||
"name": "文字冒险框架模组",
|
||||
"tag": ["Minecraft", "ModPE", "JavaScript"],
|
||||
"description": "适用于国际版我的世界中的 GalGame 游戏框架模组",
|
||||
"img": [
|
||||
"./assets/projects/McGalgame_1.jpg",
|
||||
"./assets/projects/McGalgame_2.jpg"
|
||||
],
|
||||
"createTime": "2016.03.28",
|
||||
"repository": "https://github.com/alphaAE/Minecraft-ModPE/blob/main/galgame%20%E6%A1%86%E6%9E%B6.js",
|
||||
"playUrl": ""
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "动画",
|
||||
"name": "史丹利的寓言",
|
||||
"tag": ["Minecraft"],
|
||||
"description": "Cinema 4D 制作的我的世界风格原创 3D 动画",
|
||||
"img": ["./assets/projects/Video_Stanley's_Fable.jpg"],
|
||||
"createTime": "2016.01.17",
|
||||
"repository": "",
|
||||
"playUrl": "",
|
||||
"videoUrl": "https://www.bilibili.com/video/BV1hs411R7S4"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "网站",
|
||||
"name": "任天堂游戏多区域价格比价平台",
|
||||
"tag": ["React", "Python", "Scrapy"],
|
||||
"description": "Python 后端、React 前端开发的可视化游戏比价网站",
|
||||
"img": [
|
||||
"./assets/projects/EshopPriceComparison_1.jpg",
|
||||
"./assets/projects/EshopPriceComparison_2.jpg"
|
||||
],
|
||||
"createTime": "2021.12.29",
|
||||
"repository": "https://github.com/alphaAE/EshopPriceComparison",
|
||||
"playUrl": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
19
src/main.js
19
src/main.js
@ -1,8 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
Vue.config.productionTip = false
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
||||
18
src/router/index.js
Normal file
18
src/router/index.js
Normal file
@ -0,0 +1,18 @@
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: () => import("../views/ProjectView.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
17
src/store/index.js
Normal file
17
src/store/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
64
src/views/ProjectView.vue
Normal file
64
src/views/ProjectView.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="projects-view">
|
||||
<div id="projects" class="background-alt-nth">
|
||||
<h2 class="heading">项目</h2>
|
||||
<div class="container-game">
|
||||
<project-game v-for="(data, i) in projectData" :data="data" :key="i"></project-game>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects" class="background-alt-nth">
|
||||
<h2 class="heading">3D Models</h2>
|
||||
<div class="container">
|
||||
|
||||
<!-- One Project 3DModel Block -->
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectGame from '@/components/ProjectGame.vue'
|
||||
import ProjectData from "@/data/projects.json"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectData: ProjectData.projects,
|
||||
data: {
|
||||
id: 1,
|
||||
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 },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#projects {
|
||||
padding-top: 75px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user