HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
landaiqing
2023-07-01 13:54:15 +08:00
parent c5eba95ed7 57bbe3bf87
commit 41416ac662
5 changed files with 226 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/assets/styles/element-variables.scss
View File

@@ -32,8 +32,8 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
} }
.PageHeader{ .PageHeader{
width:53vw; width:53vw;
height:70px; height:55px;
margin-left:20vw; margin-left:13vw;
margin-top:50px; margin-top:50px;
border-radius: 6px; border-radius: 6px;
background-color: #ffffff; background-color: #ffffff;
@@ -41,9 +41,33 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
} }
.PageContent{ .PageContent{
width:53vw; width:53vw;
margin-left:20vw; margin-left:13vw;
margin-top:20px; margin-top:20px;
border-radius: 6px; border-radius: 6px;
background-color: #ffffff; background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea box-shadow: -10px 5px 10px 5px #eaeaea;
}
.UserInfo{
width:20vw;
margin-left:20px;
margin-top:50px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea;
}
.RightContent{
width:20vw;
margin-top:10px;
margin-left:20px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea;
}
.ReferralProgram{
width:20vw;
margin-top:10px;
margin-left:20px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea;
} }

177
src/components/Monthly.vue
View File

@@ -3,65 +3,133 @@
<!--<div>--> <!--<div>-->
<!-- 月刊--> <!-- 月刊-->
<!--</div>--> <!--</div>-->
<div> <div style="display: flex;flex-direction:row;flex-wrap: nowrap">
<div class="PageHeader">
<br/>
<el-page-header @back="goBack" style="justify-content: center;">
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
<div slot="content" style="font-size:23px;font-weight: 600;">
HelloGitHub 月刊
</div>
</el-page-header>
</div>
<div class="PageContent">
<div style="width:50vw;margin-left:20px">
<el-carousel :interval="4000" type="card" height="250px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div style="margin-top:30px;width:50vw;margin-left:20px"> <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
<el-row :gutter="24"> <div class="PageHeader">
<el-col :span="24"> <br/>
<el-card shadow="always" style="font-size: 18px; <el-page-header @back="goBack" style="justify-content: center;">
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
<div slot="content" style="font-size:23px;font-weight: 600;">
HelloGitHub 月刊
</div>
</el-page-header>
</div>
<div class="PageContent">
<div style="width:50vw;margin-left:20px">
<el-carousel :interval="4000" type="card" height="250px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div style="margin-top:30px;width:50vw;margin-left:20px">
<el-row :gutter="24">
<el-col :span="24">
<el-card shadow="always" style="font-size: 18px;
text-align:left;background-color: #fddbb8; text-align:left;background-color: #fddbb8;
border-color: rgba(255,243,232,0.89);border-radius:10px"> border-color: rgba(255,243,232,0.89);border-radius:10px">
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span> <span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包 分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！ 括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div style="margin-top:30px;width:50vw;margin-left:20px"> <div style="margin-top:30px;width:50vw;margin-left:20px">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="8"> <el-col :span="8">
<el-card shadow="always" class="card_style"> <el-card shadow="always" class="card_style">
<span style="font-size:20px;font-weight:520;color: #676767">已发布</span> <span style="font-size:25px;font-weight:540;color: #676767">已发布</span>
</el-card> <br/><br/>
</el-col> <span style="font-size:55px;font-weight:650;color: #3d8bff">87</span>
<el-col :span="8"> <br/><br/>
<el-card shadow="always" class="card_style"> <span style="font-size:25px;font-weight:540;color: #676767">期</span>
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span> <br/>
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包 <br/>
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！ <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
</el-card> <br/>
</el-col> <span style="font-size:18px;font-weight:540;color: #676767">选择期数: &nbsp;</span>
<el-col :span="8"> <el-select v-model="value" filterable placeholder="期数" style="width:80px;">
<el-card shadow="always" style="font-size: 18px; <el-option
text-align:left;background-color: #fddbb8;border-color: rgba(255,243,232,0.89)"> v-for="item in options"
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span> :key="item.value"
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包 :label="item.label"
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！ :value="item.value"
</el-card> >
</el-col> </el-option>
</el-row> </el-select>
<br/><br/>
</div>
<br/>
<el-button type="info">阅读该期</el-button>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="always" class="card_style">
<span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
<br/><br/>
<span style="font-size:55px;font-weight:650;color: #3d8bff">21</span>
<br/><br/>
<span style="font-size:25px;font-weight:540;color: #676767">类</span>
<br/>
<br/>
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
<br/>
<span style="font-size:18px;font-weight:540;color: #676767">选择分类: &nbsp;</span>
<el-select v-model="value" filterable placeholder="分类" style="width:80px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<br/><br/>
</div>
<br/>
<el-button type="info">查看分类</el-button>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="always" class="card_style" >
<span style="font-size:25px;font-weight:540;color: #676767">项目数</span>
<br/><br/>
<span style="font-size:55px;font-weight:650;color: #3d8bff">230</span>
<br/><br/>
<span style="font-size:25px;font-weight:540;color: #676767">个</span>
<br/>
<br/>
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
<br/>
<span style="font-size:18px;font-weight:540;color: #676767">欢迎推荐和自荐项目！</span>
<br/><br/>
</div>
<el-button type="info" style="margin-top:37px">推荐项目</el-button>
</el-card>
</el-col>
</el-row>
</div>
<br/>
<br/>
</div> </div>
</div> </div>
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
<!-- <div class="UserInfo">-->
<!-- 用户信息展示内容：-->
<!-- </div>-->
<!-- <div class="RightContent">-->
<!-- 空位置，待填入-->
<!-- </div>-->
<!-- <div class="ReferralProgram">-->
<!-- 推荐项目目录-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</template> </template>
@@ -102,8 +170,9 @@ export default {
background-image: url("../../src/assets/images/美人.jpg"); background-image: url("../../src/assets/images/美人.jpg");
} }
.card_style{ .card_style{
height:385px;
font-size: 18px; font-size: 18px;
background-color: #fddbb8; background-color: #fde5da;
border-color: rgba(255,243,232,0.89); border-color: rgba(255,243,232,0.89);
text-align: center; text-align: center;
border-radius:10px; border-radius:10px;

38
src/components/Paper.vue
View File

@@ -1,18 +1,40 @@
<template> <template>
<div class="PageHeader"> <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
<br/> <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
<el-page-header @back="goBack" style="justify-content: center;"> <div class="PageHeader">
<div slot="title" style="font-size:23px;font-weight: 600;"></div> <br/>
<div slot="content" style="font-size:23px;font-weight: 600;"> <el-page-header @back="goBack" style="justify-content: center;">
HelloGitHub 文章 <div slot="title" style="font-size:23px;font-weight: 600;"></div>
<div slot="content" style="font-size:23px;font-weight: 600;">
HelloGitHub 文章
</div>
</el-page-header>
</div> </div>
</el-page-header> <div class="PageContent">文章内容</div>
</div>
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
<!-- <div class="UserInfo">-->
<!-- 用户信息展示内容：-->
<!-- </div>-->
<!-- <div class="RightContent">-->
<!-- 空位置，待填入-->
<!-- </div>-->
<!-- <div class="ReferralProgram">-->
<!-- 推荐项目目录-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "PaperComponent" name: "PaperComponent",
methods: {
goBack() {
window.history.go(-1);
}
}
} }
</script> </script>

13
src/components/ProjectDetail.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script>
export default {
name: "ProjectDetail"
}
</script>
<style scoped>
</style>

41
src/components/Ranking.vue
View File

@@ -1,23 +1,46 @@
<template> <template>
<div class="PageHeader"> <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
<br/> <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
<el-page-header @back="goBack" style="justify-content: center;"> <div class="PageHeader">
<div slot="title" style="font-size:23px;font-weight: 600;"></div> <br/>
<div slot="content" style="font-size:23px;font-weight: 600;"> <el-page-header @back="goBack" style="justify-content: center;">
HelloGitHub 榜单 <div slot="title" style="font-size:23px;font-weight: 600;"></div>
<div slot="content" style="font-size:23px;font-weight: 600;">
HelloGitHub (2023)年(6)月语言排行榜
</div>
</el-page-header>
</div> </div>
</el-page-header> <div class="PageContent">榜单内容</div>
</div>
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
<!-- <div class="UserInfo">-->
<!-- 用户信息展示内容-->
<!-- </div>-->
<!-- <div class="RightContent">-->
<!-- 空位置，待填入-->
<!-- </div>-->
<!-- <div class="ReferralProgram">-->
<!-- 推荐项目目录-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "RankingComponent" name: "RankingComponent",
methods: {
goBack() {
window.history.go(-1);
}
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-page-header__left{ ::v-deep .el-page-header__left{
left:-250px; left:-150px;
} }
</style> </style>