From a6618250919bb2605074dc15c99e7f15b87d81ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Mon, 11 Mar 2024 22:46:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=A1=B9=E7=9B=AE=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomeComponents/NavBar.vue |  48 +++--
 src/js/request.js                        |   2 +-
 src/views/ProjectPage/ProjectCard.vue    | 255 +++++------------------
 3 files changed, 80 insertions(+), 225 deletions(-)

diff --git a/src/components/HomeComponents/NavBar.vue b/src/components/HomeComponents/NavBar.vue
index 4c25357..cf8806e 100644
--- a/src/components/HomeComponents/NavBar.vue
+++ b/src/components/HomeComponents/NavBar.vue
@@ -77,6 +77,7 @@
             <a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/"  onclick="changeColor('home')">
               首页
             </a>
+
           </li>
           <li>
             <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" onclick="changeColor('projects')">
@@ -182,29 +183,32 @@ function exitLogin(){
 onMounted(() => {
     requests.userGetProfile(token).then((res)=>{
         console.log(res)
-        if (res.data.code === 200) {
-            //登录成功
-            isLoggedIn.value = true; //头像展示
-            username.value = res.data.data.username
-            // avatar.value = res.data.data.avatar   数据库无头像，暂时用下面的头像
-             avatar.value = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
-            console.log(username.value, avatar.value)
-            if (res.data.data.role === 'teacher') {
-                console.log('这是老师');
-                // 执行老师相关的逻辑
-                role.value =true
-
-            } else {
-                console.log('这不是老师');
-                // 执行非老师相关的逻辑
-                role.value= false
+        // if(token ===null){
+        //  router.push('/')
+        // }
+        // else{
+            if (res.data.code === 200) {
+                //登录成功
+                isLoggedIn.value = true; //头像展示
+                username.value = res.data.data.username
+                // avatar.value = res.data.data.avatar   数据库无头像，暂时用下面的头像
+                avatar.value = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
+                console.log(username.value, avatar.value)
+                if (res.data.data.role === 'teacher') {
+                    console.log('这是老师');
+                    // 执行老师相关的逻辑
+                    role.value =true
+                } else {
+                    console.log('这不是老师');
+                    // 执行非老师相关的逻辑
+                    role.value= false
+                }
+            }else {
+                //用户过期，重新登录
+            //     message.error("用户过期，请重新登录！")
+            //     router.push("/login")
             }
-
-        }else{
-            //用户过期，重新登录
-            message.error("用户过期，请重新登录！")
-            router.push("/login")
-        }
+        // }
     })
   })
 
diff --git a/src/js/request.js b/src/js/request.js
index d79d59e..7cbbdc6 100644
--- a/src/js/request.js
+++ b/src/js/request.js
@@ -508,7 +508,7 @@ const projectGet =(token) => {
     return axios({
         url:api+ "/project/get",
         method: "get",
-        header:{
+        headers:{
             'Authorization':'Bearer '+token,
             'Timestamp': getCurrentTimestamp()
         }
diff --git a/src/views/ProjectPage/ProjectCard.vue b/src/views/ProjectPage/ProjectCard.vue
index dd34ac6..1e2ae6a 100644
--- a/src/views/ProjectPage/ProjectCard.vue
+++ b/src/views/ProjectPage/ProjectCard.vue
@@ -1,217 +1,66 @@
 <template>
-  <div class="w-full min-h-screen mt-2">
-    <div class="container mx-auto w-3/4">
-      <nav class="bg-white border-gray-200">
-        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-          <div id="navbar-default" class="w-full md:block md:w-auto">
-            <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
-              <li>
-                <a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" href="#">全部</a>
-              </li>
-              <li>
-                <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">Web</a>
-              </li>
-              <li>
-                <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">Ai</a>
-              </li>
-              <li>
-                <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">App</a>
-              </li>
-              <li>
-                <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">大数据</a>
-              </li>
-            </ul>
-          </div>
-          <div class="text-gray-800 flex space-x-5">
-<!--            <label>-->
-<!--              <input type="checkbox" class="border border-gray-300 rounded"/>-->
-<!--              未开始-->
-<!--            </label>-->
-<!--            <label>-->
-<!--              <input type="checkbox"/>-->
-<!--              进行中-->
-<!--            </label>-->
-<!--            <label>-->
-<!--              <input type="checkbox"/>-->
-<!--              已完成-->
-<!--            </label>-->
-              <a-checkbox>未开始</a-checkbox>
-              <a-checkbox>进行中</a-checkbox>
-              <a-checkbox>已完成</a-checkbox>
-          </div>
+    <div class="relative h-full bg-gray-50 flex">
+        <div class="mt-12">
+            <nav class="ml-16 flex space-x-72">
+                <ul class="flex space-x-24">
+                    <li class="hover:text-blue-500">全部</li>
+                    <li class="hover:text-blue-500">Web</li>
+                    <li class="hover:text-blue-500">Ai</li>
+                    <li class="hover:text-blue-500">App</li>
+                </ul>
+                <ul class="flex space-x-12 ">
+                    <a-checkbox>未开始</a-checkbox>
+                    <a-checkbox>进行中</a-checkbox>
+                    <a-checkbox>已完成</a-checkbox>
+                </ul>
+            </nav>
+            <div class="flex space-x-9 ml-16 mt-12">
+                <template v-for="(project, index) in projects" :key="index">
+                    <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[300px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
+                        <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
+                            <p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>
+                            <div class="ml-auto mr-10">
+                                <button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
+                                    <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </a-card>
+                </template>
+            </div>
+<!--            <a-pagination-->
+<!--                v-model:current="current1"-->
+<!--                v-model:pageSize="pageSize"-->
+<!--                show-size-changer-->
+<!--                :total="500"-->
+<!--                @showSizeChange="onShowSizeChange"-->
+<!--            />-->
         </div>
-      </nav>
-      <div class="w-full h-full mt-2">
-        <div class="flex flex-col mx-auto space-y-8">
-          <div class="flex space-x-12">
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img21.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore1}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore1" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img22.jpg')]" @mouseleave="LearnMore2=false" @mouseover="LearnMore2=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore2}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore2" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="LearnMore3=false" @mouseover="LearnMore3=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore3}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore3" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore3" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex space-x-12">
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img24.jpg')]" @mouseleave="LearnMore4=false" @mouseover="LearnMore4=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore4}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore4" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore4" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore5=false" @mouseover="LearnMore5=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore5}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore5" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore5" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img26.jpg')]" @mouseleave="LearnMore6=false" @mouseover="LearnMore6=true">
-              <div class="flex items-center">
-                <div :class="{'bg-white':LearnMore6}" class="flex absolute bottom-0 min-h-[30%] w-full">
-                  <h5 v-if="LearnMore6" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
-                  <div class="ml-auto mr-10">
-                    <button v-if="LearnMore6" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
-                      <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <nav aria-label="Page navigation example" class="mt-10">
-        <ul class="flex items-center -space-x-px h-10 text-base">
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700" href="#">
-              <span class="sr-only">Previous</span>
-              <svg aria-hidden="true" class="w-3 h-3 rtl:rotate-180" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
-                <path d="M5 1 1 5l4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700" href="#">
-              1
-            </a>
-          </li>
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700" href="#">
-              2
-            </a>
-          </li>
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700" href="#">
-              3
-            </a>
-          </li>
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700" href="#">
-              4
-            </a>
-          </li>
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700" href="#">
-              5
-            </a>
-          </li>
-          <li>
-            <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700" href="#">
-              <span class="sr-only">Next</span>
-              <svg aria-hidden="true" class="w-3 h-3 rtl:rotate-180" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
-                <path d="m1 9 4-4-4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </nav>
     </div>
-  </div>
 </template>
 <script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, ref, watch} from "vue";
 import request from "@/js/request.js";
 
 const  LearnMore1 = ref(false)
-const  LearnMore2 = ref(false)
-const  LearnMore3 = ref(false)
-const  LearnMore4 = ref(false)
-const  LearnMore5 = ref(false)
-const  LearnMore6 = ref(false)
 
 
-
-// export default {
-//   data() {
-//     return {
-//       LearnMore1:false,
-//       LearnMore2:false,
-//       LearnMore3:false,
-//       LearnMore4:false,
-//       LearnMore5:false,
-//       LearnMore6:false,
-//     };
-//   },
-// };
-
-// const Project = reactive({
-//     data:[],
-// })
 const token = window.localStorage.getItem('token')
+const projects = ref([]);
 
+const pageSize = ref(20);
+const current1 = ref(3);
+const onShowSizeChange = (current, pageSize) => {
+    console.log(current, pageSize);
+};
+watch(pageSize, () => {
+    console.log('pageSize', pageSize.value);
+});
+watch(current1, () => {
+    console.log('current', current1.value);
+});
 onMounted(() =>{
     getAllProject()
 })
@@ -219,6 +68,8 @@ function  getAllProject(){
     request.projectGet(token).then((res)=>{
         console.log(res)
         // Project.data= res.data.data.data
+        projects.value = res.data.data;
+
     })
 }
 </script>
\ No newline at end of file