디자인 수정 + undefined 해결

Sejong-Creative-Semester2021 · Nov 18, 2021 · 719906a · 719906a
1 parent fac441e
commit 719906a
Show file tree

Hide file tree

Showing 20 changed files with 161 additions and 79 deletions.
diff --git a/OJ-FE/src/pages/admin/components/SideMenu.vue b/OJ-FE/src/pages/admin/components/SideMenu.vue
@@ -37,15 +37,15 @@
 
 <style scoped lang="less">
   .el-menu-item.is-active {
-    background: #990000 !important;
+    background: rgb(48, 33, 184) !important;
     color: #ffffff !important;
     font-weight: bold;
   }
   .el-submenu__title:hover {
-    background-color: rgba(153, 0,0,0.1); 
+    background-color: rgba(48, 33, 184, 0.1); 
   }
   .el-menu-item:hover {
-    background: rgba(153, 0,0,0.1);
+    background: rgba(48, 33, 184, 0.1);
   }
   .el-menu-item {
     color: black;

diff --git a/OJ-FE/src/pages/admin/views/aicontest/AIContestList.vue b/OJ-FE/src/pages/admin/views/aicontest/AIContestList.vue
@@ -261,12 +261,12 @@
 
 <style scoped lang="less">
   .el-button--primary {
-    background-color: #990000 !important;
-    border-color: #990000 !important;
+    background-color: rgb(48, 33, 184) !important;
+    border-color: rgb(48, 33, 184) !important;
     font-weight: bold;
   }
   .el-button--primary:hover {
-    background-color: rgba(153,0,0,0.8) !important;
-    border-color: rgba(153,0,0,0.8) !important;
+    background-color: rgb(48, 33, 184, 0.8) !important;
+    border-color: rgb(48, 33, 184, 0.8) !important;
   }
 </style>
diff --git a/OJ-FE/src/pages/admin/views/general/Announcement.vue b/OJ-FE/src/pages/admin/views/general/Announcement.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="announcement view">
-    <Panel :title="'공지사항'">
+    <Panel :title="'공지사항'" >
       <div class="list">
         <el-table
           v-loading="loading"
@@ -304,12 +304,12 @@
     float: left;
   }
   .el-button--primary {
-    background-color: #990000 !important;
-    border-color: #990000 !important;
+    background-color: rgb(48, 33, 184) !important;
+    border-color: rgb(48, 33, 184) !important;
     font-weight: bold;
   }
   .el-button--primary:hover {
-    background-color: rgba(153,0,0,0.8) !important;
-    border-color: rgba(153,0,0,0.8) !important;
+    background-color: rgb(48, 33, 184, 0.8) !important;
+    border-color: rgb(48, 33, 184, 0.8)!important;
   }
 </style>
diff --git a/OJ-FE/src/pages/oj/App.vue b/OJ-FE/src/pages/oj/App.vue
@@ -34,7 +34,7 @@
             </div>
           </template>
           <template v-else>
-            <b-avatar button @click="handleRoute('/user-home')"></b-avatar>
+            <b-avatar :src="profile.avatar" button @click="handleRoute('/user-home')"></b-avatar>
             <Button type="text" name="/user-home" @click="handleRoute('/user-home')" style="font-size: 16px; font-weight: bold; color:#474747;">{{ user.username }}</Button>
             <Button type="text" name="/logout" @click="handleRoute('/logout')" style="font-size: 16px; font-weight: bold; color:#474747;">로그아웃</Button>
             <!--<Dropdown class="drop-menu" @on-click="handleRoute" placement="bottom" trigger="click">
@@ -64,10 +64,38 @@
           <router-view></router-view>
         </transition>
         <div class="footer">
-          <p v-html="website.website_footer"></p>
-          <p>Powered by <a href="https://github.com/QingdaoU/OnlineJudge">OnlineJudge</a>
-            <!-- <span v-if="version">&nbsp; Version: {{ version }}</span> -->
-          </p>
+          <!--<div class="container">
+            <div class="row justify-content-center">
+              <div class="text-left col-md-4 col-auto">
+                <h5 class="bd-text-white mb-1">Documentation</h5>
+                <ul class="list-unsyled ml-3">
+                  <li>example 1</li>
+                  <li>example 2</li>
+                </ul>
+              </div>
+              <div class="text-left col-md-4 col-auto">
+                <h5 class="bd-text-white mb-1">Documentation</h5>
+                <ul class="list-unsyled ml-3">
+                  <li>example 1</li>
+                  <li>example 2</li>
+                </ul>
+              </div>
+              <div class="text-left col-auto">
+                <h5 class="bd-text-white mb-1">Documentation</h5>
+                <ul class="list-unsyled ml-3">
+                  <li>example 1</li>
+                  <li>example 2</li>
+                </ul>
+              </div>
+            </div>
+            <p class="mt-4 mb-2">Designed and built with all the love in the world. Maintained by the core team with the help of our contributors.</p>
+            <p>Currently v2.21.2. Code licensed MIT. Docs generated with Nuxt.js and proudly hosted on Vercel.</p>
+            <p class="mt-3 text-center"></p>
+          </div>-->
+          <!--<p v-html="website.website_footer"></p>-->
+          <!--<p>Powered by <a href="https://github.com/QingdaoU/OnlineJudge">OnlineJudge</a>
+             <span v-if="version">&nbsp; Version: {{ version }}</span>
+          </p>-->
         </div>
       </div>
     </div>
@@ -79,6 +107,7 @@
   import { mapActions, mapState, mapGetters } from 'vuex'
   import login from '@oj/views/user/Login'
   import register from '@oj/views/user/Register'
+  import api from '@oj/api'
 
   export default {
     name: 'app',
@@ -88,8 +117,9 @@
     },
     data () {
       return {
-        offsetTop: 0
+        offsetTop: 0,
         // version: process.env.VERSION
+        profile: {}
       }
     },
     created () {
@@ -101,15 +131,23 @@
     mounted () {
       this.getProfile()
       this.getWebsiteConfig()
+      this.init()
       window.addEventListener('scroll', this.onScroll, true)
     },
     beforeDestroy () {
       window.removeEventListener('scroll', this.onScroll, true)
     },
     methods: {
       ...mapActions(['getWebsiteConfig', 'changeDomTitle', 'getProfile', 'changeModalStatus']),
+      init () {
+        this.username = this.$route.query.username
+        api.getUserInfo(this.username).then(res => {
+          this.changeDomTitle({title: res.data.data.user.username})
+          this.profile = res.data.data
+        })
+      },
       handleRoute (route) {
-        console.log('route', route)
+        // console.log('route', route)
         if (route && route.indexOf('admin') < 0) {
           this.$router.push(route)
         } else {
@@ -138,6 +176,8 @@
       ...mapState(['website']),
       ...mapGetters(['website', 'modalStatus', 'user', 'isAuthenticated', 'isAdminRole']),
       activeMenu () {
+        console.log('active menu')
+        console.log('path', this.$route.path.split('/')[1])
         return '/' + this.$route.path.split('/')[1]
       },
       modalVisible: {
@@ -175,6 +215,7 @@
     }
   }
   .content-app {
+    background: transparent;
     min-height: 100%;
   }
 
@@ -198,12 +239,36 @@
 }
 
   .footer {
-    margin-top: 20px;
-    margin-bottom: 10px;
+    // width: 100%;
+    // max-width: 100%;
+    // height: 350px;
+    // color: white;
+    // padding: 3rem 0;
+    margin-top:100px;
+    margin-bottom: -100px;
     text-align: center;
     font-size: small;
+  //   background: linear-gradient( to right, rgb(48, 33, 184), rgb(119, 67, 214) );
+  //   .container {
+  //     margin-top: 25px;
+  //   }
+  //   h5 {
+  //     font-weight: bold;
+  //     font-size: 18px;
+  //   }
+  // }
+  // ul {
+  //   display: block;
+  //   margin-block-start: 2em;
+  //   margin-block-end: 2em;
+  //   padding-inline-start: 40px;
+  //   font-weight: 600;
+  //   font-size: 15px;
+  // }
+  // li {
+  //   display: list-item;
+  //   letter-spacing: -0.009em;
   }
-
   .fadeInUp-enter-active {
     animation: fadeInUp .8s;
   }

diff --git a/OJ-FE/src/pages/oj/router/routes.js b/OJ-FE/src/pages/oj/router/routes.js
@@ -76,19 +76,7 @@ export default [
     name: 'aiproblem-list',
     path: '/aicontest_general',
     meta: {title: 'AIProblem List'},
-    component: AIContestList,
-    children: [
-      {
-        path: '',
-        name: 'general',
-        component: AIContestList
-      },
-      {
-        path: 'class',
-        name: 'class',
-        component: AIContestClassList
-      }
-    ]
+    component: AIContestList
   },
   {
     name: 'aiproblem-list-class',

diff --git a/OJ-FE/src/pages/oj/views/aicontest/AIContest.vue b/OJ-FE/src/pages/oj/views/aicontest/AIContest.vue
@@ -1,19 +1,27 @@
 <template>
   <Row type="flex" :gutter="18" align="center">
+    <img src="../../../../../static/img/contest-bg.png" style="width: 100%; height: 400px; position: relative;">
+    <!--<img :src='`../../../../../static/img/${problem.id}.jpg`' style="width: 100%; height: 500px; position: relative;">-->
+    <div style="padding:40px 0px 40px 0px; position: absolute; margin-top: 100px; left: 10%;">
+      <!--<img :src='`../../../../../static/img/${problem.id}.jpg`'>-->
+      <div class="problem-title" slot="title" style="display: inline-block; font-size: 50px; color: white;">{{problem.title}}</div>
+      <!--<div style="display:flex;">
+        <b-button variant="primary" @click="join" :disabled="alreadyJoined == true" style="width: 80px;font-weight: bold; font-size: 20px;">{{joinText}}</b-button>
+      </div>-->
+    </div>
     <Col id="problem-main" :span=17>
       <!--problem main-->
-      <!--<img class="problem-img" src="https://i.postimg.cc/rFSwYd77/banner1.jpg">-->
       <Panel :padding="40" shadow>
-        <div style="padding:40px 0px 40px 0px">
-          <div class="problem-title" slot="title" style="display:inline-block">{{problem.title}}</div>
+        <div style="padding:40px 0px 40px 0px; margin-top: -120px;">
+          <!--<div class="problem-title" slot="title" style="display:inline-block">{{problem.title}}</div>-->
           <div style="display:inline-block; float: right; margin-top: 30px; margin-bottom: 20px;">
-            <b-button variant="primary" @click="join" :disabled="alreadyJoined == true" style="width:80px">{{joinText}}</b-button>
+            <b-button variant="primary" @click="join" :disabled="alreadyJoined == true" style="width: 180px; height: 60px; font-weight: bold; font-size: 25px; border-radius: 40px; margin-top: -220px;">{{joinText}}</b-button>
           </div>
         </div>
         <div id="problem-content">
           <b-tabs content-class="mt-3 tabs" align="center" pills card fill>
             <b-tab class="tab" title="대회안내" id="contest-content" active>
-              <p class="subtitle">{{'대회 주요 일정'}}</p>
+              <p class="subtitle" style="font-size: 25px">{{'대회 주요 일정'}}</p>
               <b-tabs content-class="mt-3" fill>
                 <b-tab class="tab" title="개요"><p class="markdown-body content" v-html=problem.contest_description></p></b-tab>
                 <b-tab class="tab" title="규칙"><p class="markdown-body content" v-html=problem.rule_description></p></b-tab>
@@ -93,7 +101,7 @@
   import CodeMirror from '@oj/components/CodeMirror.vue'
   import storage from '@/utils/storage'
   import {FormMixin} from '@oj/components/mixins'
-  import {JUDGE_STATUS, CONTEST_STATUS, buildProblemCodeKey, RULE_TYPE} from '@/utils/constants'
+  import {JUDGE_STATUS, CONTEST_STATUS, buildProblemCodeKey} from '@/utils/constants'
   import api from '@oj/api'
   import {pie, largePie} from './chartData'
   import utils from '@/utils/utils'
@@ -692,9 +700,8 @@
     color: black !important;
   }
   .problem-title {
-    margin-top: 20px;
     margin-bottom: 20px;
-    font-size: 30px;
+    font-size: 40px;
     font-weight: 750;
   }
 
@@ -714,7 +721,7 @@
   }
 
   .subtitle{
-    font-size: 18px;
+    font-size: 25px;
     font-weight: bold;
   }
 

diff --git a/OJ-FE/src/pages/oj/views/aicontest/AIContestClassList.vue b/OJ-FE/src/pages/oj/views/aicontest/AIContestClassList.vue
@@ -2,8 +2,8 @@
   <Row type="flex" :gutter="18" align="center">
     <Col :span=15>
     <Panel shadow>
-      <div slot="title" style="font-size: 20px;"><b>{{$t('진행중인 대회')}}</b></div>
-      <div slot="extra">
+      <div slot="title" style="font-size: 30px; margin-bottom: 20px; font-weight: 800;"><b>{{'진행중인 대회'}}</b></div>
+      <div slot="extra" style="margin-left: -400px;">
         <ul class="filter">
           <li>
             <Input v-model="query.keyword"
@@ -15,7 +15,7 @@
         </ul>
       </div>
       <!-- 추가 부분 -->
-      <b-tabs content-class="block mt-3 tabs" fill pills>
+      <b-tabs content-class="block mt-3 tabs" fill card pills>
         <b-tab title="일반용" id="contest-content" @click="goRouter()">
         <!-- <div id="problem-group">
           <b-card v-for="problem in problemList"
@@ -62,9 +62,9 @@
               <b-card-title class="problem-title" @click="goProblem(problem._id)">{{problem.title}}</b-card-title>
               <b-card-sub-title class="problem-subtitle">{{problem.created_by.username}}</b-card-sub-title>
               <b-card-text class="problem-text">
-                <p class="content" style="font-size: 16px; float: right; margin-top: -40px;">{{problem.start_time | localtime('YYYY-M-D')}} - {{problem.end_time | localtime('YYYY-M-D')}}</p>
+                <p class="content" style="font-size: 16px; float: right; margin-top: -45px;">{{problem.start_time | localtime('YYYY-M-D')}} - {{problem.end_time | localtime('YYYY-M-D')}}</p>
               </b-card-text>
-              <b-button pill variant="outline-primary" @click="isModalViewed = true" size="sm" style="float: right; margin-top: -25px;"><b>입장하기</b></b-button>
+              <b-button pill variant="outline-primary" @click="isModalViewed = true" size="sm" style="float: right; margin-top: -30px; font-size: 1.1rem;"><b>입장하기</b></b-button>
               <ModalView v-if="isModalViewed" v-bind:problemID="problem._id" v-bind:problemPassword="problem.password" @close="isModalViewed = false"></ModalView>
             </b-card-body>
           </b-card>
@@ -328,6 +328,15 @@
 </script>
 
 <style scoped lang="less">
+  .btn-sm {
+    padding: 0.4rem 0.9rem;
+  }
+  .ivu-input-wrapper {
+    width: 230%;
+  }
+  .ivu-card {
+    margin-top: 30px;
+  }
   .taglist-title {
     margin-left: -10px;
     margin-bottom: -10px;
@@ -361,11 +370,11 @@
     }
 
     .problem-content{
-      margin-top: -25px;
+      margin-top: -27px;
     }
     .problem-title{
-      font-size: 18px;
-      font-weight: bold;
+      font-size: 20px;
+      font-weight: 800;
       color: #3399ff;
     }
     .problem-subtitle{

diff --git a/OJ-FE/src/pages/oj/views/aicontest/AIContestHome.vue b/OJ-FE/src/pages/oj/views/aicontest/AIContestHome.vue
@@ -2,7 +2,7 @@
   <Row type="flex" :gutter="18" align="center">
     <Col :span=14>
     <Panel shadow>
-      <div slot="title" style="font-size: 30px"><b>{{$t('진행중인 대회')}}</b></div>
+      <div slot="title" style="font-size: 35px; font-weight: 800;"><b>{{$t('진행중인 대회')}}</b></div>
       <b-card-group deck id="problem-group">
         <div v-for="problem in problemList" :key="problem.title" >
           <b-card :img-src='`../../../../../static/img/${problem.id}.jpg`'