111 lines
4.1 KiB
Vue
111 lines
4.1 KiB
Vue
|
||
<template>
|
||
<!--<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",
|
||
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;
|
||
}
|
||
|
||
.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> |