navbar projectcard 页面稍优化

src/components/HomeComponents/NavBar.vue

@@ -60,7 +60,7 @@
 
           </div>
 
-        <div v-else>
+        <div v-else class="flex items-center space-x-3 right-2 fixed top-3">
         <a  class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
           登录 |
         </a>

src/views/ProjectPage/ProjectCard.vue

@@ -1,4 +1,5 @@
 <template>
+    <a-spin  :spinning="false"  tip="Loading..." >
     <div class="relative h-full bg-gray-50 flex w-full  overflow-x-hidden">
         <div class="mt-0">
             <div class="flex flex-row justify-between">
@@ -24,6 +25,13 @@
                     </div>
                 </div>
 
+            <template v-if="projects.length === 0">
+                <!-- 数据为空时的提示信息 -->
+                <div class="w-full h-[80vh] bg-white ">
+                        <img src="../../../public/33.png" class="w-[300px] h-[300px] mt-[20vh] ml-[40vw]">
+                </div>
+            </template>
+            <template v-else>
             <div class="flex flex-wrap justify-between  mt-5 w-full">
                 <template v-for="(project, index) in projects" :key="index">
                     <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[24vw]  h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
@@ -40,8 +48,10 @@
                     </a-card>
                 </template>
             </div>
+            </template>
         </div>
     </div>
+    </a-spin>
 </template>
 <script setup>
 import {onMounted, reactive, ref, watch} from "vue";
@@ -56,35 +66,28 @@ const data = reactive({
   tags:[],
   isFinish:[0,1,2,-1]
 })
-// const pageSize = ref(20);
+// const loading  =ref(false)
-// const current1 = ref(3);
-
-// watch(pageSize, () => {
-//     console.log('pageSize', pageSize.value);
-// });
-// watch(current1, () => {
-//     console.log('current', current1.value);
-// });
 onMounted(() =>{
+
     request.getTagsProjectList().then(res=>{
         console.log("tagsData:",res)
         tagsData.value=res.data.data
+
     })
     getAllProject()
+
+
 })
 function  getAllProject(){
     request.projectGetCustom(data).then((res)=>{
-        // console.log("project-res:",res.data.data)
-      // console.log("data:",data)
-        // Project.data= res.data.data.data
         projects.value = res.data.data;
-        // console.log(projects.value)
     })
+    // loading.value = true;
+    // console.log('zmhuisss',loading.value)
 }
 
 const tagsData = ref([]);
 const selectTags = ref([false, false, false, false]);
-
 const options = [
   {
     label: '未开始',
@@ -109,12 +112,8 @@ watch(() =>data.isFinish, async (newValue, oldValue) =>{
 })
 
 const tagAll=ref(true)
-
 const token = window.localStorage.getItem('token')
 
-
-
-
 //当选中全部时，其他的都不选中
 const handleClickAll=(checked)=>{
     if(checked){
@@ -128,8 +127,6 @@ const handleClickAll=(checked)=>{
 }
 const  selectedTags =ref([])
 
-
-
 // 当选中其他的时候， 全部 不选中
 const handleChange = (tag, checked) => {
     tag.checked = checked; // 更新checkbox的选中状态
@@ -153,29 +150,14 @@ const handleChange = (tag, checked) => {
             tagAll.value = true;
         }
     }
-  // console.log("selectedTags:", selectedTags.value)
-  // data.tags = selectedTags.value
-  // getAllProject()
-    // 在这里触发向后端请求数据的操作，将selectedTags作为参数发送到后端
-    // request.projectGetCustom(selectedTags).then((res) =>{
-    //     projects.value = res.data.data;
-    // })
 };
 
-
-// 点击跳转事件
-// function MainMessage(id){
-    // this.$router.push(`/details/${id}`);
 function MainMessage(project) {
 console.log(project.id)
     window.localStorage.setItem('id',project.id)
         router.push('/ProjectMessage');
 
 }
-
-// @click="selectedTags.web = !selectedTags.web"
-
-
 watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
   data.tags = []
   selectedTags.value.forEach((item,index)=>{
@@ -184,6 +166,4 @@ watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
   getAllProject()
 })
 
-
-
 </script>

src/views/WorkLoadPage/PersonalProject.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="relative h-full bg-gray-50 flex flex-col ">
-    <div class="mt-5">
+      <a-breadcrumb class="ml-[3vw]">
+          <a-breadcrumb-item>我的项目</a-breadcrumb-item>
+      </a-breadcrumb>
+    <div class="mt-3">
+
         <div class="flex flex-row justify-between ml-3">
             <div >
                 <!-- 第一个是 全部 所以独立出来 -->
@@ -110,7 +114,8 @@ function  getMyselfProject(){
 function MainMessage(project) {
     console.log(project.id)
     window.localStorage.setItem('id',project.id)
-    router.push('/ProjectMessage');
+    router.push('/WorkLoad/I_Manage/ChildSystem')
+
 
 }