feat: PortalPage layout beta

src/App.vue

@@ -5,7 +5,7 @@
 <script>
 
 export default {
-  mounted() {
+  created() {
     const that = this;
     if (sessionStorage.token) {
       that.$store.commit("storage_load_user");

src/components/CoderCard.vue

@@ -1,5 +1,12 @@
 <template>
-  <el-card class="coder" shadow="hover">
+  <el-card class="coder" shadow="hover" @click="toTestInfo">
+
+    <div style="border-bottom: 30px solid #8dc9e2; float: right; width: 0; height: 0; position: absolute;right: 0;bottom: 0;border-left: 30px solid transparent;">
+      <div style="padding: 0 3px 0 3px; position: absolute; right: 0; bottom: -30px; color: white">
+        C
+      </div>
+    </div>
+
     <el-row>
       <el-col class="name" :span="16">
         {{ coderVO.name }}
@@ -18,14 +25,14 @@
       所属课程: {{coderVO.course}}
     </el-row>
     <el-row class="time">
-      {{ timeToCHN(toDate(coderVO.startAt)) }} 至 {{ timeToCHN(toDate(coderVO.endAt)) }}
-    </el-row>
-    <el-row class="button">
-      <el-col :span="24">
-        <el-button v-if="state==='FINISHED'" size="small" type="success" plain>结果报告</el-button>
-        <el-button v-else size="small" type="primary" plain>查看详情</el-button>
-      </el-col>
+      时间: {{ timestampToTime(coderVO.startAt) }} 至 {{ timestampToTime(coderVO.endAt) }}
     </el-row>
+<!--    <el-row class="button">-->
+<!--      <el-col :span="24">-->
+<!--        <el-button v-if="state==='FINISHED'" size="small" type="success" plain>结果报告</el-button>-->
+<!--        <el-button v-else size="small" type="primary" plain>查看详情</el-button>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
   </el-card>
 </template>
 
@@ -41,12 +48,12 @@ export default {
   },
   computed: {
     state: function () {
-      if (this.toDate(this.coderVO.endAt) < new Date()) {
+      if (this.coderVO.endAt * 1000 < new Date()) {
         return "OVER";
-      } else if (this.toDate(this.coderVO.startAt) > new Date()) {
+      } else if (this.coderVO.startAt * 1000 > new Date()) {
         return "NOT_STARTED";
-      // } else if (this.coderVO.status === "CLOSED") {
-      //   return "FINISHED";
+      } else if (this.coderVO.status === "CLOSED") {
+        return "FINISHED";
       } else {
         return "RUNNING";
       }
@@ -55,16 +62,19 @@ export default {
   mounted() {
   },
   methods: {
-    timeToCHN: function (time) {
-      const date = new Date(time);
-      const hours = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
-      const minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
-      return (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
-        hours + ":" + minutes;
+    timestampToTime(timestamp) {
+      const date = new Date(timestamp * 1000);
+      const Y = date.getFullYear() + "-";
+      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
+      const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
+      return Y + M + D;
     },
-
-    toDate(timeStamp) {
-      return new Date(Number(timeStamp + "000"));
+    toTestInfo() {
+      if (this.type === "eval") {
+        window.open(this.evalURL);
+      } else {
+        window.open(this.coderURL);
+      }
     },
   },
 };
@@ -72,15 +82,19 @@ export default {
 
 <style scoped>
 .coder {
-  background-color: #f8f9fb;
-  margin: 10px 0 0 10px;
-  border: 1px solid #e4e7ed;
   border-radius: 8px;
   height: calc(100% - 14px);
+  position: relative;
+}
+
+.coder:hover {
+  cursor: pointer;
+  border: 1px solid #aaaaaa;
 }
 
 .name {
   font-weight: bold;
+  font-size: medium;
 }
 
 .status {
@@ -90,20 +104,24 @@ export default {
 .teacher {
   font-size: 10px;
   margin-top: 10px;
+  color: #999999;
 }
 
 .course {
   font-size: 10px;
   margin-top: 4px;
+  color: #999999;
 }
 
 .time {
   margin-top: 4px;
   font-size: 10px;
+  margin-bottom: 16px;
+  color: #999999;
 }
 
-.button {
-  margin-top: 12px;
-  text-align: center;
-}
+/*.button {*/
+/*  margin-top: 12px;*/
+/*  text-align: center;*/
+/*}*/
 </style>

src/components/CourseCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="course-card" shadow="hover">
+  <el-card class="course-card" shadow="hover" @click="toCourseInfo">
     <div class="image">
       <img :src="imageUrl" alt="">
     </div>
@@ -16,20 +16,20 @@
       教师: {{ courseVO.teacher.name }}
     </el-row>
     <el-row class="semester">
-
+      季度: {{ courseVO.semester }}
     </el-row>
     <el-row class="time">
-      {{ courseVO.semester }} ： {{ timeToCHN(courseVO.startTime) }} 至 {{ timeToCHN(courseVO.endTime) }}
+      时间: {{ timestampToTime(courseVO.startTime) }} 至 {{ timestampToTime(courseVO.endTime) }}
     </el-row>
     <el-row class="description">
       {{ courseVO.description }}
     </el-row>
-    <el-row class="button">
-      <el-col :span="24">
-        <el-button v-if="state==='FINISHED'" size="small" type="success" plain>结果报告</el-button>
-        <el-button v-else size="small" type="primary" plain>查看详情</el-button>
-      </el-col>
-    </el-row>
+<!--    <el-row class="button">-->
+<!--      <el-col :span="24">-->
+<!--        <el-button v-if="state==='FINISHED'" plain size="small" type="success">结果报告</el-button>-->
+<!--        <el-button v-else plain size="small" type="primary">查看详情</el-button>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
   </el-card>
 </template>
 
@@ -47,8 +47,8 @@ export default {
         return "OVER";
       } else if (new Date(this.courseVO.startTime) > new Date()) {
         return "NOT_STARTED";
-      // } else if (this.examVO.finished) {
-      //   return "FINISHED";
+      } else if (this.examVO.finished) {
+        return "FINISHED";
       } else {
         return "RUNNING";
       }
@@ -60,12 +60,15 @@ export default {
   mounted() {
   },
   methods: {
-    timeToCHN: function (time) {
-      const date = new Date(time);
-      const hours = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
-      const minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
-      return (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
-          hours + ":" + minutes;
+    timestampToTime(timestamp) {
+      const date = new Date(timestamp);
+      const Y = date.getFullYear() + "-";
+      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
+      const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
+      return Y + M + D;
+    },
+    toCourseInfo() {
+      this.$router.push("/course/" + this.courseVO.id);
     },
   },
 };
@@ -73,19 +76,22 @@ export default {
 
 <style scoped>
 .course-card {
-  background-color: #f8f9fb;
-  border: 1px solid #e4e7ed;
   margin-bottom: 10px;
   border-radius: 4px;
   height: calc(100% - 10px);
+  position: relative;
 }
 
-.course-card :hover {
+.course-card:hover {
   cursor: pointer;
+  border: 1px solid #aaaaaa;
 }
 
 .image {
   height: 80px;
+  outline: solid 1px #eeeeee;
+  margin-bottom: 10px;
+  border-radius: 4px;
 }
 
 .image img {
@@ -93,13 +99,6 @@ export default {
   width: 100%;
 }
 
-/*.info {*/
-/*  margin-top: 4px;*/
-/*  box-sizing: border-box;*/
-/*  position: relative;*/
-/*  height: 120px;*/
-/*}*/
-
 .name {
   font-weight: bold;
 }
@@ -111,28 +110,34 @@ export default {
 .teacher {
   font-size: 10px;
   margin-top: 10px;
+  color: #999999;
 }
 
 .semester {
   margin-top: 4px;
   font-size: 10px;
+  color: #999999;
 }
 
 .time {
   margin-top: 4px;
   font-size: 10px;
+  color: #999999;
 }
 
 .description {
-  background-color: #ffffff;
+  background-color: #f8f8f8;
   margin-top: 10px;
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 10px;
   font-size: 10px;
+  color: #777777;
 }
 
-.button {
-  margin-top: 12px;
-  text-align: center;
-}
+/*.button {*/
+/*  position: absolute;*/
+/*  bottom: 8px;*/
+/*  left: calc(50% - 40px);*/
+/*  text-align: center;*/
+/*}*/
 </style>

src/components/EvalCard.vue

@@ -1,10 +1,18 @@
 <template>
-  <el-card class="eval" shadow="hover">
+  <el-card class="eval" shadow="hover" @click="toTestInfo">
+
+    <div style="border-bottom: 30px solid #f5b86e; float: right; width: 0; height: 0; position: absolute;right: 0;bottom: 0;border-left: 30px solid transparent;">
+      <div style="padding: 0 4px 0 4px; position: absolute; right: 0; bottom: -30px; color: white">
+        E
+      </div>
+    </div>
+
     <el-row>
-      <el-col class="name" :span="16">
+      <el-col :span="17" class="name">
         {{ examVO.examName }}
       </el-col>
-      <el-col class="status" :span="8">
+      <el-col :span="1"/>
+      <el-col :span="6" class="status">
         <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
         <el-tag v-else-if="state==='RUNNING'" size="small">进行中</el-tag>
         <el-tag v-else-if="state==='FINISHED'" size="small" type="success">已完成</el-tag>
@@ -15,17 +23,17 @@
       教师: {{ teacher.name }}
     </el-row>
     <el-row class="time">
-      {{ timeToCHN(examVO.startTime) }} 至 {{ timeToCHN(examVO.endTime) }}
+      时间: {{ timestampToTime(examVO.startTime) }} 至 {{ timestampToTime(examVO.endTime) }}
     </el-row>
-    <el-row class="comment" v-if="examVO.comment !== ''">
+    <el-row class="comment">
       {{ examVO.comment }}
     </el-row>
-    <el-row class="button">
-      <el-col :span="24">
-        <el-button v-if="state==='FINISHED'" size="small" type="success" plain>结果报告</el-button>
-        <el-button v-else size="small" type="primary" plain>查看详情</el-button>
-      </el-col>
-    </el-row>
+<!--    <el-row class="button">-->
+<!--      <el-col :span="24">-->
+<!--        <el-button v-if="state==='FINISHED'" plain size="small" type="success">结果报告</el-button>-->
+<!--        <el-button v-else plain size="small" type="primary">查看详情</el-button>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
   </el-card>
 </template>
 
@@ -65,28 +73,32 @@ export default {
     this.teacher = res.data.data;
   },
   methods: {
-    timeToCHN: function (time) {
-      const date = new Date(time);
-      const hours = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
-      const minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
-      return (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
-        hours + ":" + minutes;
-    }
+    timestampToTime(timestamp) {
+      const date = new Date(timestamp);
+      const Y = date.getFullYear() + "-";
+      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
+      const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
+      return Y + M + D;
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .eval {
-  background-color: #f8f9fb;
-  margin: 10px 0 0 10px;
-  border: 1px solid #e4e7ed;
   border-radius: 8px;
   height: calc(100% - 14px);
+  position: relative;
+}
+
+.eval:hover {
+  cursor: pointer;
+  border: 1px solid #aaaaaa;
 }
 
 .name {
   font-weight: bold;
+  font-size: medium;
 }
 
 .status {
@@ -96,23 +108,30 @@ export default {
 .teacher {
   font-size: 10px;
   margin-top: 10px;
+  color: #999999;
 }
 
 .time {
   margin-top: 4px;
   font-size: 10px;
+  color: #999999;
 }
 
 .comment {
-  background-color: #ffffff;
+  background-color: #f8f8f8;
+  color: #777777;
   margin-top: 10px;
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 10px;
   font-size: 10px;
+  margin-bottom: 16px;
 }
 
-.button {
-  margin-top: 12px;
-  text-align: center;
-}
+//.button {
+//  margin-top: 12px;
+//  text-align: center;
+//  position: absolute;
+//  bottom: 8px;
+//  left: calc(50% - 40px);
+//}
 </style>

src/store/modules/user.js

@@ -30,6 +30,7 @@ const user = {
       state.valid = undefined;
     },
     state_set_user: function (state, data) {
+      console.log(data);
       state.token = data.token;
       state.name = data.name;
       state.id = data.user.id;
@@ -53,6 +54,7 @@ const user = {
       sessionStorage.signature = state.signature;
       sessionStorage.createdTime = state.createdTime;
       sessionStorage.valid = state.valid;
+      sessionStorage.phone = state.phone;
     },
     storage_load_user: function (state) {
       state.token = sessionStorage.token;
@@ -65,6 +67,7 @@ const user = {
       state.signature = sessionStorage.signature;
       state.createdTime = sessionStorage.createdTime;
       state.valid = sessionStorage.valid;
+      state.phone = sessionStorage.phone;
     },
     storage_delete_user: function () {
       sessionStorage.removeItem("token");

src/views/PortalPage/PortalPage.css

@@ -1,11 +1,11 @@
 #portal-body {
     height: 100%;
     display: grid;
-    grid-template-columns: 1fr 2.3fr;
+    grid-template-columns: 1fr 2.5fr;
     grid-template-rows: 230px auto auto;
     grid-gap: 20px 20px;
     background: #f8f9fb;
-    padding: 10px 160px 80px 160px;
+    padding: 10px 180px 80px 180px;
 }
 
 .portal-card-title {

src/views/PortalPage/components/CarouselCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-carousel id="carousel-card-body" :interval="4000" height="200px" type="card">
+  <el-carousel id="carousel-card-body" :interval="4000" height="170px" type="card">
     <el-carousel-item v-for="item in contents" :key="item">
       <img :src=item alt="err">
     </el-carousel-item>

src/views/PortalPage/components/InfoCard.vue

@@ -1,32 +1,31 @@
 <template>
   <el-card style="width: 200px">
-  <div id="info-card-body">
-    <div>SEECODER</div>
-    <div v-if="isLogin" id="info-card-circle">
-      <span>{{ name.substring(0, 1) }}</span>
+    <div id="info-card-body">
+      <div>SEECODER</div>
+      <div v-if="isLogin" id="info-card-circle">
+        <span>{{ name.substring(0, 1) }}</span>
+      </div>
+      <div v-else>
+        <svg height="50" viewBox="0 0 1025 1024" width="50" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M511.999723 331.913794m-117.748854 0a117.748854 117.748854 0 1 0 235.497708 0 117.748854 117.748854 0 1 0-235.497708 0Z"
+            fill="#82BAD8"></path>
+          <path
+            d="M511.999723 0.000554A511.999723 511.999723 0 1 0 1025.10767 512.000277 512.276779 512.276779 0 0 0 511.999723 0.000554zM792.380524 779.636496a24.935051 24.935051 0 0 1-24.935052-24.935052 255.445749 255.445749 0 0 0-510.614442 0 24.935051 24.935051 0 0 1-49.870103 0 304.76174 304.76174 0 0 1 205.29859-288.138372 167.896013 167.896013 0 1 1 199.480412 0 304.76174 304.76174 0 0 1 205.575646 288.138372 24.935051 24.935051 0 0 1-24.935051 24.935052z"
+            fill="#82BAD8"></path>
+        </svg>
+      </div>
+      <div v-if="isLogin" id="info-card-name-id">
+        <div>{{ name }}</div>
+        <div>{{ email }}</div>
+      </div>
+      <div v-if="isLogin" id="info-card-button-in" @click="logout">
+        <span>登出</span>
+      </div>
+      <div v-else id="info-card-button-not" @click="toAuth">
+        <span>登录/注册</span>
+      </div>
     </div>
-    <div v-else>
-      <svg height="50" viewBox="0 0 1025 1024" width="50" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M511.999723 331.913794m-117.748854 0a117.748854 117.748854 0 1 0 235.497708 0 117.748854 117.748854 0 1 0-235.497708 0Z"
-          fill="#82BAD8"></path>
-        <path
-          d="M511.999723 0.000554A511.999723 511.999723 0 1 0 1025.10767 512.000277 512.276779 512.276779 0 0 0 511.999723 0.000554zM792.380524 779.636496a24.935051 24.935051 0 0 1-24.935052-24.935052 255.445749 255.445749 0 0 0-510.614442 0 24.935051 24.935051 0 0 1-49.870103 0 304.76174 304.76174 0 0 1 205.29859-288.138372 167.896013 167.896013 0 1 1 199.480412 0 304.76174 304.76174 0 0 1 205.575646 288.138372 24.935051 24.935051 0 0 1-24.935051 24.935052z"
-          fill="#82BAD8"></path>
-      </svg>
-    </div>
-    <div id="info-card-name-id" v-if="isLogin">
-      <div>{{ name }}</div>
-      <div>{{ email }}</div>
-    </div>
-    <div id="info-card-button-in" v-if="isLogin" @click="logout">
-      <span>登出</span>
-    </div>
-    <div v-else id="info-card-button-not" @click="toAuth">
-      <span>登录/注册</span>
-    </div>
-  </div>
-
   </el-card>
 </template>
 

src/views/PortalPage/components/MyCourseCard.vue

@@ -1,11 +1,11 @@
 <template>
   <el-card class="body" shadow="hover" @click="toCourseInfo">
     <el-row>
-      <el-col :span="7">
+      <el-col :span="6">
         <img :src="imageUrl" alt="err" class="course-img">
       </el-col>
 
-      <el-col :span="1"/>
+      <el-col :span="2"/>
 
       <el-col :span="16">
 
@@ -81,28 +81,30 @@ export default {
 
 .body:hover {
   cursor: pointer;
+  border: 1px solid #aaaaaa;
 }
 
 .course-img {
   width: 100%;
   height: 100%;
-  outline: solid 1px #aaaaaa;
-  border-radius: 2px;
+  outline: solid 1px #dddddd;
+  border-radius: 4px;
   object-fit: cover;
 }
 
 .title {
   font-weight: bold;
+  font-size: medium;
   margin-bottom: 10px;
 }
 
 .teacher {
-  font-size: x-small;
-  color: #888888;
+  font-size: 12px;
+  color: #999999;
 }
 
 .time {
-  font-size: x-small;
-  color: #888888;
+  font-size: 12px;
+  color: #999999;
 }
 </style>

src/views/PortalPage/components/MyTestCard.vue

@@ -138,10 +138,12 @@ export default {
 
 .body:hover {
   cursor: pointer;
+  border: 1px solid #aaaaaa;
 }
 
 .title {
   font-weight: bold;
+  font-size: medium;
   margin-bottom: 10px;
 }