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

更新样式

Browse Source
This commit is contained in:
Zhang HaoYang
2023-06-30 18:11:46 +08:00
parent 6b5e50048c
commit 69c7e0a0f6
7 changed files with 232 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/美人.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

2
src/assets/styles/element-ui.scss
View File

@@ -89,4 +89,4 @@
> .el-submenu__title
.el-submenu__icon-arrow {
display: none;
}
}

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

@@ -30,3 +30,20 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
:export {
theme: $--color-primary;
}
.PageHeader{
width:53vw;
height:70px;
margin-left:20vw;
margin-top:50px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea
}
.PageContent{
width:53vw;
margin-left:20vw;
margin-top:20px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: -10px 5px 10px 5px #eaeaea
}

116
src/components/Header.vue
View File

@@ -2,12 +2,11 @@
<div class="header">
<div class="logo-all">
<img class="logo" src="../assets/logo/logo.png">
<span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
<span class="HeaderWord">HelloGithub</span>
</div>
<el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
active-text-color="#42b983"
style="width: 30vw;"
router>
<el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
<el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
@@ -15,8 +14,8 @@
</el-menu-item>
<el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
</el-menu>
<SearchInput></SearchInput>
<el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
<SearchInput class="HeaderInput"></SearchInput>
<el-button class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
</div>
</template>
@@ -33,30 +32,89 @@ export default {
</script>
<style scoped>
.logo-all {
height: 60px;
width: 12vw;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
border-radius: 50px;
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.el-menu {
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-evenly;
}
.menu-item {
width: 6vw;
/*适用于小屏幕，手持设备*/
/*@media(orientation: portrait){*/
/* .logo-all {*/
/* height: 20px;*/
/* width: 10vw;*/
/* display: flex;*/
/* align-items: center;*/
/* background-color: #ff4949;*/
/* margin-left:1vw;*/
/* }*/
/* .logo {*/
/* width: 20px;*/
/* height: 20px;*/
/* border-radius: 6px;*/
/* }*/
/* .HeaderWord{*/
/* cursor: pointer;*/
/* margin-left: 5px;*/
/* font-size: 80%;*/
/* font-weight: bold;*/
/* font-family:'楷体';*/
/* }*/
/* .header {*/
/* display: flex;*/
/* flex-direction: row;*/
/* align-items: center;*/
/* !*justify-content: space-evenly;*!*/
/* }*/
/* .el-menu {*/
/* font-weight: bold;*/
/* font-size: 5px;*/
/* display: flex;*/
/* justify-content: space-evenly;*/
/* width: 10vw;*/
/* }*/
/* .menu-item {*/
/* width: 2vw;*/
/* font-size:2px;*/
/* }*/
/* .HeaderInput{*/
/* width:15vw;*/
/* font-size:1px;*/
/* }*/
/* .HeaderSubmitBtn{*/
/* }*/
/*}*/
@media(orientation: landscape){
.logo-all {
height: 60px;
width: 12vw;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
border-radius: 50px;
}
.HeaderWord{
cursor: pointer;
margin-left: 5px;
font-size: 150%;
font-weight: bold;
font-family:'楷体';
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.el-menu {
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-evenly;
width: 30vw;
}
.menu-item {
width: 6vw;
}
}
</style>

106
src/components/Monthly.vue
View File

@@ -1,15 +1,111 @@
<template>
<div>
月刊
</div>
<!--<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="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>
<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>
</div>
</div>
</template>
<script>
export default {
name: "MonthlyComponent"
name: "MonthlyComponent",
methods: {
goBack() {
window.history.go(-1);
}
}
}
</script>
<style scoped lang="scss">
::v-deep .el-page-header__left{
left:-250px;
}
::v-deep .el-icon-back{
font-size:20px;
}
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-size: cover;
background-image: url("../../src/assets/images/美人.jpg");
}
.el-carousel__item:nth-child(2n+1) {
background-size: cover;
background-image: url("../../src/assets/images/美人.jpg");
}
.card_style{
font-size: 18px;
background-color: #fddbb8;
border-color: rgba(255,243,232,0.89);
text-align: center;
border-radius:10px;
}
</style>

18
src/components/Paper.vue
View File

@@ -1,7 +1,13 @@
<template>
<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>
</template>
<script>
@@ -10,6 +16,8 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
::v-deep .el-page-header__left{
left:-250px;
}
</style>

18
src/components/Ranking.vue
View File

@@ -1,7 +1,13 @@
<template>
<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>
</template>
<script>
@@ -10,6 +16,8 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
::v-deep .el-page-header__left{
left:-250px;
}
</style>