style(questionnaire): polish the style slightly. (#7)

* activity: we have poster now * ACM迎新赛入口开放 * style(questionnaire): polish the style slightly. --------- Co-authored-by: zhullyb <[email protected]> Co-authored-by: lyyzzz6 <[email protected]>
zjutjh · Aug 10, 2023 · 90c3a7b · 90c3a7b
1 parent a8b3e25
commit 90c3a7b
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 156 deletions.
diff --git a/src/components/QuestionCard.vue b/src/components/QuestionCard.vue
@@ -1,73 +1,70 @@
-
 <template>
-    <div v-if="!isDeleted"  class="card-container" >
-      <div class="text-container">
-        <div class="text">
-          {{ !props.is? "+ 创建新问卷" : props.title }}
-        </div>
+  <div v-if="!isDeleted" class="card-container">
+    <div class="text-container">
+      <div class="text">
+        {{ !props.is ? "+ 创建新问卷" : props.title }}
       </div>
-      <div class="bar" v-if="props.admin">
-        <div class="bar" v-if="props.is">
-          <div  @click="changePublic()" >
-            <div v-if="!isPublic">
-              发布
-            </div>
-            <div v-else>
-              取消发布
-            </div>
-          </div>
-          <div @click="nav2Data()" v-if="!draft">
-            数据
-          </div>
-          <div @click="nav2Edit()" v-if="draft">
-            编辑
+    </div>
+    <div class="bar" v-if="props.admin">
+      <div class="bar" v-if="props.is">
+        <div @click="changePublic()">
+          <div v-if="!isPublic">
+            发布
           </div>
-          <div @click="deleteQ() ">
-            删除
+          <div v-else>
+            取消发布
           </div>
         </div>
+        <div @click="nav2Data()" v-if="!draft">
+          数据
+        </div>
+        <div @click="nav2Edit()" v-if="draft">
+          编辑
+        </div>
+        <div @click="deleteQ()">
+          删除
+        </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
-.card-container{
+.card-container {
   background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  height: 14rem;
-  width: 35rem;
-  margin-top: 8%;
+  height: 200px;
+  width: 40%;
   border-radius: 20px;
   box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.3);
 }
+
 .text-container {
   display: block;
-  height: 60%;
-  width: 100%;
-  margin-top: 5%;
+  margin-top: 20px;
 }
+
 .text {
-  font-size: 2em;
+  font-size: 24px;
   text-align: center;
 }
 
 .bar {
-    margin-top: 5vh;
+  margin-top: 80px;
   display: flex;
   width: 80%;
   justify-content: space-around;
-  height: 9vh;
 }
 </style>
 
 <script lang="ts" setup>
-import {deleteQuestionnaire , changeQuestionnaireStatus} from "@/apis/questionnaire";
-import {useQuestionnaireStore } from "@/stores/questionnaire";
+import { deleteQuestionnaire, changeQuestionnaireStatus } from "@/apis/questionnaire";
+import { useQuestionnaireStore } from "@/stores/questionnaire";
 import router from "@/router";
-import {ref} from "vue";
+import { ref } from "vue";
 const nowId = useQuestionnaireStore();
 const isDeleted = ref(false);
 const props = defineProps({
@@ -82,53 +79,50 @@ const props = defineProps({
   },
 })
 const isPublic = ref(props.public);
-function nav2Data(){
-   nowId.setId(props.id);
-   router.push('/questionnaire/data');
+function nav2Data() {
+  nowId.setId(props.id);
+  router.push('/questionnaire/data');
 }
-function nav2Edit(){
+function nav2Edit() {
   nowId.setId(props.id);
   router.push('/questionnaire/create');
 }
-function deleteQ(){
+function deleteQ() {
   const confirm = window.confirm('确定删除该问卷吗？');
-  if(confirm){
+  if (confirm) {
     console.log('delete');
     deleteQuestionnaire(props.id).then(res => {
 
-      if (res.msg === 'ok')
-      {
+      if (res.msg === 'ok') {
         alert("删除成功");
         isDeleted.value = true;
       }
       else {
         alert("请求错误");
       }
     })
-
   }
   else {
     console.log('cancel');
   }
 }
-function changePublic(){
+function changePublic() {
   let postData = {
     id: props.id,
     public: !isPublic.value,
     draft: false,
   }
   changeQuestionnaireStatus(postData).then(res => {
-    if (res.msg === 'ok')
-    {
+    if (res.msg === 'ok') {
       alert("修改成功");
-     isPublic.value = !isPublic.value;
-     if(props.draft===true && isPublic.value===true){
-       isDeleted.value = true;
-     }
+      isPublic.value = !isPublic.value;
+      if (props.draft === true && isPublic.value === true) {
+        isDeleted.value = true;
+      }
     }
     else {
       alert("请求错误");
     }
   })
 }
-</script>
+</script>
diff --git a/src/utils/const.ts b/src/utils/const.ts
@@ -2,7 +2,7 @@ export var ENV = 'dev';
 // export const BASE_URL = 'http://localhost:8888/'
 // export const BASE_URL = 'http://101.34.27.200:8888/'
 // export const BASE_URL = 'http://www.jh.zjut.edu.cn/'
-export const BASE_URL =  'REPLACE_ME'
+export const BASE_URL = 'REPLACE_ME'
 export const ACM_BASE_URL = 'http://zhangjinhong.top:8081'
 export const Q_BASE_URL_DEV = 'REPLACE_ME'
 export const regions = ['未选择', "朝晖", "屏峰", "莫干山"];
@@ -52,4 +52,4 @@ export const product_details = [
   { title: "微信服务号", img: "https://download.tooc.xlj0.com/uploads/22/jhhome/public/photo/product/2.png", content: "浙江工业大学精弘网络微信公众号，提供结合精弘网络产品的实用功能，推出微精弘板块等系列服务，是工大学子学习生活的好帮手。" },
   { title: "视觉影像", img: "https://download.tooc.xlj0.com/uploads/22/jhhome/public/photo/product/3.jpg", content: "校园学习生活、学校各类大型活动的记录团队，专注于摄影、视频前期拍摄和后期剪辑，致力于用最优秀的制作呈现最美的工大人、工大景。视觉影像像期待用最用心的摄制给你带来最高级的视听盛宴!" },  //欢迎关注 b站:浙江工业大学精弘网络微信视频号:精小弘在线。
   { title: "学术邮箱", img: "https://download.tooc.xlj0.com/uploads/22/jhhome/public/photo/product/4.png", content: "学校为每一位学生提供邮箱，由精弘网络提供运营服务，是你参与学校工作、学习、生活等各类活动的官方邮箱，伴随你的大学四年乃至一生，毕业后仍可享受校方的服务。" },
-];
+];
diff --git a/src/views/questionnaire.vue b/src/views/questionnaire.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-     <QuestionCard @click="addQuestion" :is="false"></QuestionCard>
+    <QuestionCard @click="addQuestion" :is="false"></QuestionCard>
     <div v-for="item in questionnaire" :key="item.id">
       <QuestionCard :is="true" :title="item.title" :id="item.id" :public="item.public" :draft="item.draft"></QuestionCard>
     </div>
@@ -10,9 +10,9 @@
 <script setup lang="ts">
 import QuestionCard from '../components/QuestionCard.vue'
 import router from '@/router';
-import {getQuestionnaire} from "@/apis/questionnaire";
-import {onMounted, ref} from "vue";
-import {useQuestionnaireStore} from "@/stores/questionnaire";
+import { getQuestionnaire } from "@/apis/questionnaire";
+import { onMounted, ref } from "vue";
+import { useQuestionnaireStore } from "@/stores/questionnaire";
 const pinia = useQuestionnaireStore();
 function addQuestion() {
   pinia.setId(-1);
@@ -25,31 +25,28 @@ const questionnaire = ref();
 onMounted(() => {
   pinia.setId(-1);
   console.log(pinia.getIsAdmin());
-  if(pinia.getIsAdmin() !== "true")
+  if (pinia.getIsAdmin() !== "true")
     router.push('/questionnaire/user');
   getQuestionnaire().then(res => {
-    if (res.msg === 'ok')
-    {
+    if (res.msg === 'ok') {
       questionnaire.value = res.data.filter(item => item.draft === false);
       console.log(questionnaire.value);
     }
     else {
       alert("请求错误");
     }
-})
+  })
 })
 </script>
 
 <style scoped>
 .container {
-  margin-top: 5%;
-  width: 100vw;
+  margin-top: 100px;
   background-color: rgb(239, 239, 239);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  gap: 5%;
+  gap: 20px;
 }
-
 </style>