From 8a542c3cb9c5737e96dba040e8d89f1e46ddb043 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Wed, 17 Jan 2024 21:18:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=A7=E7=BB=AD=E5=AE=8C=E5=96=84=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainPage/More.vue        |  40 ++++++++
 src/components/MainPage/NavBar.vue      |   4 +-
 src/components/MainPage/NewProfile.vue  | 129 ++++++++++++++++--------
 src/components/MainPage/ProjectList.vue |  30 ++++--
 src/components/MainPage/TeamProfile.vue |  10 +-
 src/components/index.vue                |   9 +-
 6 files changed, 159 insertions(+), 63 deletions(-)
 create mode 100644 src/components/MainPage/More.vue

diff --git a/src/components/MainPage/More.vue b/src/components/MainPage/More.vue
new file mode 100644
index 0000000..dd40d8b
--- /dev/null
+++ b/src/components/MainPage/More.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="container w-auto mt-40 bg-gray-700 h-[400px]">
+    <div class="flex ml-52 text-white">
+      <div>
+        <p class="pt-32 text-2xl">
+            联系
+        </p>
+      </div>
+      <div class="flex">
+        <div class="ml-72">
+          <p class="mt-32 text-xl">
+              无锡学院-职业技术学院联合
+          </p>
+          <p class="mt-16">
+            地址
+          </p>
+          <p class="mt-3">
+            电话
+          </p>
+          <p class="mt-3">
+            传真
+          </p>
+        </div>
+        <div class="mt-32 ml-72">
+          <p class="mt-24">
+            邮编
+          </p>
+          <p class="mt-3">
+            手机
+          </p>
+          <p class="mt-3">
+            邮箱
+          </p>
+        </div>
+      </div>
+  </div>
+</div>
+</template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/MainPage/NavBar.vue b/src/components/MainPage/NavBar.vue
index 577a007..28c3832 100644
--- a/src/components/MainPage/NavBar.vue
+++ b/src/components/MainPage/NavBar.vue
@@ -14,12 +14,12 @@
             <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">主页</a>
           </li>
           <li>
-            <a href="#" class=" flex items-center py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
+            <button class=" flex items-center py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
               关于
               <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
               </svg>
-            </a>
+            </button>
             <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
               <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                 <li>
diff --git a/src/components/MainPage/NewProfile.vue b/src/components/MainPage/NewProfile.vue
index 8eee59c..cd2dc7a 100644
--- a/src/components/MainPage/NewProfile.vue
+++ b/src/components/MainPage/NewProfile.vue
@@ -1,51 +1,98 @@
 <template>
-  <div class="container mt-40 mx-auto">
-    <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">新闻与活动</h2>
-    <div class="flex space-x-8">
-      <div class="w-1/3 h-96 border-gray-400 bg-white">
-        <a href="">
-          <img src="" alt="" class="w-full h-60 border border-gray-400">
-          <div class="ml-4">
-            <h3 class="text-lg font-bold mt-10">新闻标题1</h3>
-            <h4 class="mt-2 mb-4">时间</h4>
-            <p class="ml-2">新闻简要内容</p>
+  <div class="ml-64 container mt-40 w-full">
+    <h2 class="text-3xl font-bold mb-16 text-gray-900 dark:text-white">新闻</h2>
+    <div class="flex space-x-16">
+      <div @mouseover="showMoreButton1=true" @mouseleave="showMoreButton1=false"
+           class="transition-transform transform-gpu hover:scale-105 relative w-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
+           :class="{'hover:bg-green-400':showMoreButton1}"
+      >
+        <div>
+          <p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton1}">张三老师发布了：</p>
+          <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton1}">梁溪区纪委大数据管理平台项目</p>
+          <div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton1}">
+            <div class="flex flex-col">
+              <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton1}">
+                01-17
+              </div>
+              <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton1}">
+                2024
+              </div>
+            </div>
+            <div class="mt-10 ml-52">
+              <a href="#" v-if="showMoreButton1" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+              </a>
+            </div>
           </div>
-        </a>
+        </div>
       </div>
-      <div class=" w-1/3 h-96 border-gray-400 bg-white">
-        <a href="">
-          <img src="" alt="" class="w-full h-60 border border-gray-400">
-          <div class="ml-4">
-            <h3 class="text-lg font-bold mt-10">新闻标题1</h3>
-            <h4 class="mt-2 mb-4">时间</h4>
-            <p class="ml-2">新闻简要内容</p>
+      <div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false"
+           class="transition-transform transform-gpu hover:scale-105 relative w-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
+           :class="{'hover:bg-green-400':showMoreButton2}"
+      >
+        <div class="">
+          <p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton2}">张三老师发布了：</p>
+          <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton2}">梁溪区纪委大数据管理平台项目</p>
+          <p class="ml-4 mr-4">主要针对大量数据进行处理，需要大量数据，前后端配合需要的技术有：springboot,vue,mysql等</p>
+           x<div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton2}">
+            <div class="flex flex-col">
+              <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton2}">
+                01-17
+              </div>
+              <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton2}">
+                2024
+              </div>
+            </div>
+            <div class="mt-10 ml-52">
+              <a href="#" v-if="showMoreButton2" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+              </a>
+            </div>
           </div>
-        </a>
+        </div>
       </div>
-      <div class="flex flex-col space-y-2 w-1/3 h-96 border-gray-400 bg-gray-100">
-        <a href="" class="mt-4 ml-2 w-full h-20 hover:text-red-700">
-          <h3 class="text-lg font-bold">新闻1</h3>
-          <p>时间</p>
-        </a>
-        <a href="" class="ml-2 w-full h-20 hover:text-red-700">
-          <h3 class="text-lg font-bold">新闻2</h3>
-          <p>时间</p>
-        </a>
-        <a href="" class="ml-2 w-full h-20 hover:text-red-700">
-          <h3 class="text-lg font-bold">新闻3</h3>
-          <p>时间</p>
-        </a>
-        <a href="" class="ml-2 w-full h-20 hover:text-red-700">
-          <h3 class="text-lg font-bold">新闻4</h3>
-          <p>时间</p>
-        </a>
-        <a href="" class="ml-2 w-full h-20 hover:text-red-700">
-          <h3 class="text-lg font-bold">新闻5</h3>
-          <p>时间</p>
-        </a>
+      <div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false"
+           class="transition-transform transform-gpu hover:scale-105 hover:bg-green-400 relative w-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
+           :class="{'hover:bg-green-400':showMoreButton3}"
+      >
+        <div class="">
+          <p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton3}">张三老师发布了：</p>
+          <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton3}">梁溪区纪委大数据管理平台项目</p>
+          <div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton3}">
+            <div class="flex flex-col">
+              <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton3}">
+                01-17
+              </div>
+              <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton3}">
+                2024
+              </div>
+            </div>
+            <div class="mt-10 ml-52">
+              <a href="#" v-if="showMoreButton3" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script setup>
+
+<script>
+export default {
+  data(){
+    return{
+      showMoreButton1:false,
+      showMoreButton2:false,
+      showMoreButton3:false,
+    }
+  }
+}
 </script>
\ No newline at end of file
diff --git a/src/components/MainPage/ProjectList.vue b/src/components/MainPage/ProjectList.vue
index a88bb5b..bfe14e1 100644
--- a/src/components/MainPage/ProjectList.vue
+++ b/src/components/MainPage/ProjectList.vue
@@ -1,26 +1,34 @@
 <template>
-  <div class="container w-full ml-96 mt-40">
-    <h2 class="text-3xl font-bold ml-96 mb-20">项目展示</h2>
-    <div class="flex flex-col space-y-8">
-      <div class="flex space-x-6">
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
+  <div class="container w-full mt-40">
+    <div class="flex">
+      <h2 class="text-3xl font-bold ml-64">项目展示</h2>
+      <button class="ml-[1065px] border-gray-400 border-2 h-8 w-14 rounded-full flex justify-center items-center">
+        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+      </button>
+    </div>
+    <div class="ml-64 mt-24 flex flex-col space-y-8">
+      <div class="flex space-x-12">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
           <ProjectCard :project="projects[0]" />
         </div>
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
+
           <ProjectCard :project="projects[1]" />
         </div>
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
           <ProjectCard :project="projects[2]" />
         </div>
       </div>
-      <div class="flex space-x-6">
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
+      <div class="flex space-x-12">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
           <ProjectCard :project="projects[3]" />
         </div>
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
           <ProjectCard :project="projects[4]" />
         </div>
-        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
+        <div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
           <ProjectCard :project="projects[5]" />
         </div>
       </div>
diff --git a/src/components/MainPage/TeamProfile.vue b/src/components/MainPage/TeamProfile.vue
index c52a2e9..1bf373d 100644
--- a/src/components/MainPage/TeamProfile.vue
+++ b/src/components/MainPage/TeamProfile.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="container mx-auto mt-72">
+  <div class="ml-64 container w-full mt-40">
     <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
       关于
     </h2>
-    <div class="flex space-x-4">
-      <div class="mt-40 ml-20 mr-96">
+    <div class="flex">
+      <div class="mt-16 h-96 w-[600px] border-2 border-gray-400">
         团队介绍
       </div>
-      <div role="status" class="flex items-center justify-center mt-10 mb-72 h-96 w-1/2 bg-white shadow-lg">
-
+      <div role="status" class="ml-10 mt-16 mb-40 h-96 w-2/5 bg-white shadow-lg">
+        <img src="@/assets/images/img15.jpg" alt="">
       </div>
     </div>
   </div>
diff --git a/src/components/index.vue b/src/components/index.vue
index 3c388b3..f983064 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -1,14 +1,14 @@
 <script setup>
 import { onMounted } from 'vue'
 import { initFlowbite } from 'flowbite'
-
+import More from "@/components/MainPage/More.vue";
 // initialize components based on data attribute selectors
 onMounted(() => {
   initFlowbite();
 })
 </script>
 <template>
-  <div class=" w-full h-auto bg-sky-200">
+  <div class=" w-full h-auto">
     <div>
       <NavBar/>
       <Carousel/>
@@ -16,7 +16,7 @@ onMounted(() => {
       <TeamProfile/>
       <NewProfile/>
       <ExcellentMember/>
-
+      <More/>
     </div>
     <!--版权-->
     <div class="mt-40 flex items-center justify-center">
@@ -38,8 +38,9 @@ import TeamProfile from "@/components/MainPage/TeamProfile.vue";
 import NewProfile from "@/components/MainPage/NewProfile.vue";
 import ExcellentMember from "@/components/MainPage/ExcellentMember.vue";
 import ProjectList from "@/components/MainPage/ProjectList.vue";
+import More from "@/components/MainPage/More.vue";
 
 export default{
-  components: {ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar},
+  components: {More,ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar},
 }
 </script>
\ No newline at end of file