更新页面
This commit is contained in:
@@ -32,8 +32,8 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
}
|
||||
.PageHeader{
|
||||
width:53vw;
|
||||
height:70px;
|
||||
margin-left:20vw;
|
||||
height:55px;
|
||||
margin-left:13vw;
|
||||
margin-top:50px;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff;
|
||||
@@ -41,9 +41,33 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
}
|
||||
.PageContent{
|
||||
width:53vw;
|
||||
margin-left:20vw;
|
||||
margin-left:13vw;
|
||||
margin-top:20px;
|
||||
border-radius: 6px;
|
||||
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;
|
||||
}
|
||||
@@ -3,65 +3,133 @@
|
||||
<!--<div>-->
|
||||
<!-- 月刊-->
|
||||
<!--</div>-->
|
||||
<div>
|
||||
<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="display: flex;flex-direction:row;flex-wrap: nowrap">
|
||||
|
||||
<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;
|
||||
<div style="display: flex;flex-direction:column;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">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" style="font-size: 18px;
|
||||
text-align:left;background-color: #fddbb8;
|
||||
border-color: rgba(255,243,232,0.89);border-radius:10px">
|
||||
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
|
||||
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
|
||||
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
|
||||
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
|
||||
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:30px;width:50vw;margin-left:20px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always" class="card_style">
|
||||
<span style="font-size:20px;font-weight:520;color: #676767">已发布</span>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always" class="card_style">
|
||||
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
|
||||
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
|
||||
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always" style="font-size: 18px;
|
||||
text-align:left;background-color: #fddbb8;border-color: rgba(255,243,232,0.89)">
|
||||
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
|
||||
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
|
||||
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top:30px;width:50vw;margin-left:20px">
|
||||
<el-row :gutter="24">
|
||||
<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">87</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>
|
||||
<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">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">选择分类: </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 style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
|
||||
<!-- <div class="UserInfo">-->
|
||||
<!-- 用户信息展示内容：-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="RightContent">-->
|
||||
<!-- 空位置，待填入-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="ReferralProgram">-->
|
||||
<!-- 推荐项目目录-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -102,8 +170,9 @@ export default {
|
||||
background-image: url("../../src/assets/images/美人.jpg");
|
||||
}
|
||||
.card_style{
|
||||
height:385px;
|
||||
font-size: 18px;
|
||||
background-color: #fddbb8;
|
||||
background-color: #fde5da;
|
||||
border-color: rgba(255,243,232,0.89);
|
||||
text-align: center;
|
||||
border-radius:10px;
|
||||
|
||||
@@ -1,18 +1,40 @@
|
||||
<template>
|
||||
<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 style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||||
<div style="display: flex;flex-direction:column;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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PaperComponent"
|
||||
name: "PaperComponent",
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
13
src/components/ProjectDetail.vue
Normal file
13
src/components/ProjectDetail.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectDetail"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,23 +1,46 @@
|
||||
<template>
|
||||
<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 style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||||
<div style="display: flex;flex-direction:column;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 (2023)年(6)月语言排行榜
|
||||
</div>
|
||||
</el-page-header>
|
||||
</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>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RankingComponent"
|
||||
name: "RankingComponent",
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-page-header__left{
|
||||
left:-250px;
|
||||
left:-150px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user