获取项目信息1

src/js/request.js

@@ -516,18 +516,38 @@ const projectGet =(token) => {
 
 /**
  * 展示游客查看的项目
- * @param data (tags isFinish)
+ * @param data (tags isFinish id)
  */
 const  projectGetCustom = (data) =>{
     return axios({
         url:api+ "/project/get/custom",
         method: "get",
-        data: data,
+        params: data,
         headers:{
             'Timestamp': getCurrentTimestamp()
         }
     })
 }
+// const data = reactive({
+//     id: 1,
+//     tags: ['web','ai'],
+//     isFinish: [1,-1,0]
+// })
+// const  projectGetCustom = (id, tags, isFinish) =>{
+//     return axios({
+//         url:api+ "/project/get/custom",
+//         method: "get",
+//         data: {
+//             id: id,
+//             tags: tags,
+//             isFinish: isFinish
+//         },
+//         headers:{
+//             'Timestamp': getCurrentTimestamp()
+//         }
+//     })
+// }
+// request.projectGetCustom(1, [], [1, -2, 0, 2])
 
 
 /**

src/views/ProjectPage/MainMessage/BasicProject.vue

@@ -1,5 +1,54 @@
 <template>
-    <div>
-        项目基本情况
+    <div class="w-[100vw] flex flex-row">
+        <div class="flex flex-col ml-[10vw] mt-[5vh] w-[40vw] mr-[12vw]">
+            <span class="text-6xl text-green-400 font-bold mb-2">Enter</span>
+            <div class="mb-[4vh] flex flex-col">
+                <span class="font-bold">{{project.name}}</span>
+                <a-radio-group v-model="project.data" class="flex-row flex mt-3">
+                    <a-radio  :style="radioStyle" :value="0">进行中</a-radio>
+                    <a-radio :style="radioStyle" :value="1">已完成</a-radio>
+                    <a-radio  :style="radioStyle" :value="2">进行中</a-radio>
+                    <a-radio :style="radioStyle" :value="-1">已完成</a-radio>
+                </a-radio-group>
+            </div>
+            <span class="mt-[0px]">{{project.description}}项目主要包括前端后端，旨在开发一个创新的解决方案，以满足当前市场需求并改善用户体验。我们团队致力于开发一款功能强大、易于使用且具有高度可定制性的软件/应用程序/网站</span>
+        </div>
+        <div class="mt-[15vh]">
+            <span class="font-bold text-red-600 ">项目基本情况：</span>
+            <ol>
+                <li>项目周期： {{project.cycle}}</li>
+                <li>项目分类： {{project.tags}}</li>
+                <li>项目文档：
+                    <a-button class="bg-blue-400">
+                        点击查看
+                    </a-button>
+                </li>
+            </ol>
+        </div>
     </div>
+
+
+
+
 </template>
+<script setup>
+import {reactive, ref} from "vue";
+
+const project = defineProps(['name','cycle','description','tags','isFinish'])
+const New =reactive({
+
+})
+const value=ref([project.isFinish])
+function overPosition(value) {
+    if (value === 0 || value=== 2 || value=== -1) {
+        return 2
+    } else {
+   return 1
+}}
+const radioStyle = reactive({
+    display: 'flex',
+    height: '30px',
+    lineHeight: '30px',
+});
+
+</script>

src/views/ProjectPage/MainMessage/BottomMessage.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="w-[100vw] h-[35vh] bg-gray-100">
+  <div class="flex flex-row ml-[10vw]">
+      <div class="flex flex-col mr-[40vw] mt-[5vh]">
+      <span class="text-xl font-bold">内部系统团队</span>
+      <span class="mt-2">地址：江苏省无锡市锡山区</span>
+      <span>电话：+89 0934223427</span>
+      <span>邮箱：ewifuesdjcnid@163.com</span>
+      <div class="flex-row mt-2">
+          <GithubOutlined  />
+          <QqOutlined />
+          <WechatOutlined />
+      </div>
+      </div>
+      <div class=" flex flex-col mr-[10vw] mt-[5vh] ">
+          <span class="text-gray-500 font-bold">优质服务</span>
+          <span>关于我们</span>
+          <span>合作机会</span>
+          <span>媒体联络</span>
+
+      </div>
+      <div class=" flex flex-col mt-[5vh]">
+          <span class="text-gray-500 font-bold">服务范围</span>
+          <span>用户体验设计</span>
+          <span>精美团队</span>
+          <span>品牌服务</span>
+      </div>
+  </div>
+        <div class="flex-row mt-[6vh] ml-[40vw]">
+            <span class="font-bold">友情提示：</span>
+            <span class="border-r border-gray-400 pr-2 text-gray-500">百度</span>
+            <span class="border-r border-gray-400 pr-2 text-gray-500">百度</span>
+            <span class="border-r border-gray-400 pr-2 text-gray-500">百度</span>
+            <span class="border-r border-gray-400 pr-2 text-gray-500">百度</span>
+            <span class="border-r border-gray-400 pr-2 text-gray-500">百度</span>
+        </div>
+    </div>
+</template>
+<script setup>
+import {GithubOutlined, QqOutlined, WechatOutlined} from '@ant-design/icons-vue';
+</script>

src/views/ProjectPage/MainMessage/Contributors.vue

@@ -1,5 +1,25 @@
-<template>
-    <div>
-        controbutors
+<template xmlns="">
+    <div class="mt-[5vh]">
+        <hr>
+        <span class="ml-[10vw] text-green-400 font-bold text-5xl mt-[6vh]">Contributors</span>
+        <div class="flex flex-row ml-[10vw]">
+<!--            <a-avatar class="bg-blue-100">-->
+<!--                <template #icon>-->
+<!--                    <UserOutlined />-->
+<!--                </template>-->
+<!--            </a-avatar>-->
+            <div class="flex flex-col">
+                <img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full ">
+                <span>杨某某</span>
+            </div>
+
+        </div>
+
     </div>
-</template>
+</template>
+<script setup>
+import {ref} from "vue";
+
+const avatar  =ref('')
+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';
+</script>

src/views/ProjectPage/MainMessage/TopProject.vue

@@ -1,5 +1,24 @@
 <template>
-    <div class="w-[100vw] h-[40vh] bg-blue-100">
-
+    <div class="w-screen h-[50vh] bg-blue-100 flex items-center justify-center w-[100vw]">
+        <div class="w-full h-full bg-cover bg-center" style="background-image: url('../../../../public/top1.jpg'); background-size: cover;">
+           <div class="flex-col ml-[10vw] mt-[10vh] w-[40vw] ">
+            <div class="text-4xl text-white font-black mb-[2vh]">梁溪区纪委大数据管理平台项目{{ project.name }}</div>
+            <div class="text-white text-2xs mb-[4vh]">We sincerely appreciate your presence on the project details page, and we aim to deliver an exceptional experience to you. </div>
+               <a-button shape="round" class="bg-white" size="large">查看项目</a-button>
+           </div>
+        </div>
     </div>
-</template>
+</template>
+
+<script setup>
+
+// console.log( "此项目",id)
+
+// const project = reactive({
+//     data:null
+// })
+
+const project = defineProps(['name','id','description'])
+
+
+</script>

src/views/ProjectPage/MainMessage/childProject.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        子系统
-    </div>
-</template>

src/views/ProjectPage/MainMessageCustom.vue

@@ -1,18 +1,43 @@
 <template>
   <NavBar class="h-[10vh]"></NavBar>
-    <TopProject></TopProject>
-    <BasicProject></BasicProject>
-    <ChildProject></ChildProject>
-    <Contributors></Contributors>
-    <Icp></Icp>
+    <TopProject v-bind="project.data"></TopProject>
+    <BasicProject v-bind="project.data"></BasicProject>
+    <Contributors ></Contributors>
+  <BottomMessage></BottomMessage>
+
 
 
 </template>
 <script setup>
 import NavBar from "@/components/HomeComponents/NavBar.vue";
-import Icp from "@/components/HomeComponents/Icp.vue";
 import TopProject from "@/views/ProjectPage/MainMessage/TopProject.vue";
-import ChildProject from "@/views/ProjectPage/MainMessage/childProject.vue";
+
 import Contributors from "@/views/ProjectPage/MainMessage/Contributors.vue";
 import BasicProject from "@/views/ProjectPage/MainMessage/BasicProject.vue";
+import BottomMessage from "@/views/ProjectPage/MainMessage/BottomMessage.vue";
+import {onMounted, reactive, ref} from "vue";
+import request from "@/js/request.js";
+
+const projects = ref([]);
+const id = window.localStorage.getItem('id')
+const data = reactive({
+    id: id
+})
+const project = reactive({
+    data:null
+})
+
+onMounted(()=>{
+
+    request.projectGetCustom(data).then((res)=>{
+        // console.log(res)
+        // Project.data= res.data.data.data
+        console.log("res:::",res)
+        projects.value = res.data.data;
+        // console.log("projects.value:",projects.value)
+        // console.log("projects.value[0].id:",projects.value[0].id)
+        project.data = projects.value[0];
+    })
+})
+
 </script>

src/views/ProjectPage/ProjectCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative h-full bg-gray-50 flex">
+    <div class="relative h-full bg-gray-50 flex w-[100vw]">
         <div class="mt-12">
             <nav class="ml-16 flex space-x-[30vw]">
               <div class="inline-flex rounded-md " role="group">
@@ -83,13 +83,14 @@
                     </label>
                 </div>
             </nav>
-            <div class="flex flex-wrap ml-16 mr-16 mt-5 w-[100vw]">
+
+            <div class="flex flex-wrap   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-[300px] h-60 mb-4 ml-8 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
+                    <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[19vw] h-60 mb-4 mr-3 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=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="showButton[index]" 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" @click="MainMessage">
+                                <button v-if="showButton[index]" 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" @click="MainMessage(project)">
                                     <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>
@@ -140,7 +141,7 @@ function  getAllProject(){
         console.log(res)
         // Project.data= res.data.data.data
         projects.value = res.data.data;
-        console.log(projects.value)
+        // console.log(projects.value)
     })
 }
 
@@ -176,8 +177,13 @@ const buttonClass = (button) => ({
 });
 
 // 点击跳转事件
-function MainMessage(){
-    router.push("/ProjectMessage")
+// 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"