Skip to content
Snippets Groups Projects
Commit 09850c99 authored by HyunKyeong Park's avatar HyunKyeong Park
Browse files

공지사항 완료

parent 25e2d2d3
Branches master
No related tags found
No related merge requests found
사용한 사진 출처
1. main background
https://images.unsplash.com/photo-1522410818928-5522dacd5066?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
# test_frontend # test_frontend
## Project setup ## Project setup
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
{{club[0].logo}} {{club[0].logo}}
<hr/> <hr/>
</header> </header>
<div class="introblock"> <div class="introBlock">
<h1 class="clubIntro">소개</h1> <h1 class="clubIntro">소개</h1>
<pre class="clubContent">{{club[0].introduce}}</pre> <pre class="clubContent">{{club[0].introduce}}</pre>
<div class="WriteButton"> <div class="WriteButton">
...@@ -15,42 +15,37 @@ ...@@ -15,42 +15,37 @@
</div> </div>
<hr/> <hr/>
</div> </div>
<div class="noticeblock"> <div class="noticeBlock">
<h1 class="clubNotice">공지사항</h1> <div class="noticeList">
<div class="overflow-auto"> <h5 class="listTitle">공지사항</h5>
<p class="currentPage">Current Page: {{ currentPage }}</p> <div class="logWrite">
<b-table <b-button variant="outline-primary" @click="post2()">글쓰기</b-button>
id="notice-table" </div>
:per-page="perPage" <div class="listTable">
:current-page="currentPage" <table class="table" id="logTable">
:items="noticeBoard" <thead>
hover <tr>
small <th></th>
></b-table> </tr>
<b-pagination </thead>
v-model="currentPage" <tbody>
:total-rows="rows" <div>
:per-page="perPage" <tr>
aria-controls="notice-table" <td class="col_1"><h3>작성자</h3></td>
></b-pagination> <td class="col_2"><h3>제목</h3></td>
<td class="col_3"><h3>작성일</h3></td>
</tr>
</div> </div>
<p>하다가 막힘. 공지사항이 불러와지는데
1.id가 db그대로 0 부터 시작하지 않음.
2. 라우터 이동
3. 방법 못찾으면 Table로 다시.
</p>
<div v-for="notice in noticeBoard" class="board"> <div v-for="notice in noticeBoard" class="board">
<router-link :to="{ name: 'notice', params: {clubId: `${club[0].id}`, noticeId: notice.id}}"> <tr>
<div class="boardlist"> <td class="col_1"><router-link :to="{ name: 'notice', params: {clubId: `${club[0].id}`, noticeId: notice.id}}"><h3>{{notice.writer}}</h3></router-link></td>
{{notice.writer}}{{notice.title}}{{notice.date}} <td class="col_2"><router-link :to="{ name: 'notice', params: {clubId: `${club[0].id}`, noticeId: notice.id}}"><h3>{{notice.title}}</h3></router-link></td>
<td class="col_3"><router-link :to="{ name: 'notice', params: {clubId: `${club[0].id}`, noticeId: notice.id}}"><h3>{{notice.date}}</h3></router-link></td>
</tr>
</div> </div>
</router-link> </tbody>
</table>
</div> </div>
<div class="WriteButton">
<b-button variant="outline-primary" @click="post2()">글쓰기</b-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,41 +158,98 @@ export default { ...@@ -163,41 +158,98 @@ export default {
font-size: 25px; font-size: 25px;
} }
.noticeblock { .noticeBlock {
margin: 20px 0; margin: 20px 0;
} }
.noticeblock > .clubNotice { .noticeBlock > .clubNotice {
text-align: left; text-align: left;
padding-left: 45px; padding-left: 45px;
padding-bottom: 30px; padding-bottom: 30px;
font-size: 30px; font-size: 30px;
} }
.overflow-auto { .noticeList {
margin: 0px 50px; padding: 20px;
text-align: left;
margin: 40px 40px;
width: 900px;
height: 650px;
border: 1px solid #e0e0f0;
border-radius: 12px;
overflow-y: auto;
float: left;
} }
.overflow-auto > #notice-table { .listTitle {
border-top: 3px solid #202020; font-size: 30px;
cursor: pointer;
} }
.overflow-auto > .currentPage {
text-align: left; .listTable {
display: block;
width: 100%;
overflow-x: auto;
} }
h1 { .table {
margin-bottom: 0; width: 100%;
max-width: 100%;
} }
.WriteButton { thead {
text-align: center; box-sizing: border-box;
margin-top: 20px; display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
.table thead th {
border-top: 0;
font-size: 20px;
font-weight: 500;
vertical-align: bottom;
}
tbody {
box-sizing: border-box;
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.table td {
vertical-align: middle;
font-size: 17px;
line-height: 1;
border-top: 1px solid #f3f3f3;
padding: 10px;
}
.col_1{
width: 160px;
}
.col_2 {
width: 540px;
}
.col_3 {
width: 200px;
text-align: right;
}
.button {
width: 100px; width: 100px;
margin: 0 auto; text-align: center;
} }
hr { h3 {
border-color: #e0e0e0; font-size: 17px;
}
.logWrite {
float: right;
width: 100px;
align-content:flex-end;
} }
</style> </style>
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<b-button variant="outline-primary" @click="post()">글쓰기</b-button> <b-button variant="outline-primary" @click="post()">글쓰기</b-button>
</div> </div>
<div class="listTable"> <div class="listTable">
<table class="table"> <table class="table" id="logTable">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
...@@ -42,6 +42,8 @@ import router from "../../router/index" ...@@ -42,6 +42,8 @@ import router from "../../router/index"
import {mapState} from "vuex" import {mapState} from "vuex"
import axios from "axios" import axios from "axios"
import { BButton } from 'bootstrap-vue' import { BButton } from 'bootstrap-vue'
import { BPagination } from 'bootstrap-vue'
export default { export default {
name: 'club_post', name: 'club_post',
components: { components: {
...@@ -60,11 +62,16 @@ export default { ...@@ -60,11 +62,16 @@ export default {
title:'', title:'',
content:'', content:'',
writer:'' writer:''
}] }],
perPage: 3,
currentPage: 1,
} }
}, },
computed: { computed: {
...mapState(['userInfo']) ...mapState(['userInfo']),
rows() {
return this.activityLog.length
}
}, },
async created() { async created() {
let id = this.$route.params.clubId; let id = this.$route.params.clubId;
...@@ -86,7 +93,7 @@ export default { ...@@ -86,7 +93,7 @@ export default {
} else{ } else{
router.push(`/post/${this.club[0].id}`) router.push(`/post/${this.club[0].id}`)
} }
} },
} }
} }
</script> </script>
......
...@@ -10,27 +10,45 @@ ...@@ -10,27 +10,45 @@
</header> </header>
</div> </div>
<div class="container-area"> <div class="container-area">
<div class="content"> <b-carousel
<h2 class="intro">Unite Club은,</h2> id="carousel"
<p>통합된 동아리 관리 서비스의 부재를 해결하고자 제작된 동아리 관리 서비스 웹입니다. :interval="3000"
<br>동아리 관리 서비스에 대한 설명 또는 사용법을 소개.</p> controls
</div> indicators
<hr class="section-divider"> background="#ababab"
</div> img-width="800"
<div class="footer-area"> img-height="500"
<div class="content"> style="text-shadow: 1px 1px 2px #333;"
<h2 class="intro">developer</h2> @sliding-start="onSlideStart"
<p></p> @sliding-end="onSlideEnd"
</div> >
</div> <!-- Text first slide with image -->
<b-carousel-slide
color="black"
text="Unite Club은 원하는 동아리를 쉽게 찾고 동아리 활동을 관리할 수 있는 웹 서비스입니다."
img-src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
></b-carousel-slide>
<!-- Text 2nd slide with image -->
<b-carousel-slide
text="새로운 사람들을 만나고 싶을 때, 다른 사람과 취미를 공유하고 싶을 때, 자신을 드러내고 싶을 때 Unite Club을 시작하세요. "
img-src="https://images.unsplash.com/photo-1522410818928-5522dacd5066?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
></b-carousel-slide>
<!-- Text 3st slide with image -->
<b-carousel-slide
text="요즘 코딩이 대세라는 데 혼자 시작하기 어려우신가요? 프로그래밍 동아리 Doit! 에 가입해보세요."
img-src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
></b-carousel-slide>
</b-carousel>
</div>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' import HelloWorld from '@/components/HelloWorld.vue'
import { BCarousel } from 'bootstrap-vue'
export default { export default {
name: 'home', name: 'home',
components: { components: {
...@@ -99,26 +117,16 @@ hr.section-divider:after { ...@@ -99,26 +117,16 @@ hr.section-divider:after {
} }
.container-area { .container-area {
padding-right: 15px; padding: 20px;
padding-left: 15px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
width: 1000px;
height: 500px;
} }
.content { .img-fluid {
width: 1140px; height: 500px;
height: 300px;
text-align: left;
padding-left: 20px;
} }
.intro {
color: #54397e;
font-size: 30px;
}
.intro::first-letter {
font-size: 50px;
font-weight: 500;
text-transform: uppercase;
}
</style> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment