更新样式

This commit is contained in:
2023-06-30 18:11:46 +08:00
parent 6b5e50048c
commit 69c7e0a0f6
7 changed files with 232 additions and 45 deletions

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>