alphaAE/website-project-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

整体基本完成

Browse Source
This commit is contained in:
alphaAE
2022-07-16 07:18:45 +08:00
parent c211421bb8
commit a0219695ba
10 changed files with 251 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/projects/NeteaseMCAddOn_SecretWar_banner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 38 KiB

2
public/index.html
View File

@ -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">

3
src/App.vue
View File

@ -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>

60
src/components/ProjectGame.vue
View File

@ -1,45 +1,27 @@
<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 class="project shadow-large">
<div class="look-detail"></div>
<div class="project-image" style="height: 168px; width: 300px;">
<img height="168px" :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>
<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>
{{ data.descriptionMini }}
</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>
.project-tags {}
<style scoped>
img {
width: 100%;
}
.project-tags>span {
margin: 0 4px;
@ -68,7 +57,14 @@ export default {
border-radius: 4px;
}
.project-link>span {
margin: 0 10px;
.project {
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>

80
src/components/ProjectGameStar.vue Normal file
View File

@ -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>

76
src/components/ProjectInfoDialog.vue Normal file
View File

@ -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>

6
src/components/PublicFooter.vue
View File

@ -7,11 +7,7 @@
© <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-2 top"></div>
<div class="col-sm-5 social">
<ul>
<li>

14
src/data/color.json Normal file
View File

@ -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"
}
}

16
src/data/projects.json
View File

@ -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"

64
src/views/ProjectView.vue
View File

@ -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">
<!-- 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" />
<project-game v-for="(data, i) in otherData" :data="data" :key="i" @click.native="openDialog(data)">
</project-game>
</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: {
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: ""
}
starData: [],
otherData: []
}
},
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>