LAB/Home
2
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

feat: update the contact page and laboratory introduction, optimize the style and structure

Browse Source
This commit is contained in:
LufsX
2024-12-17 15:26:10 +08:00
parent e2445b5e95
commit f636811621
6 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/contacts/page.tsx
+7 -12
View File
@@ -28,12 +28,12 @@ export default function Page() {
<Header />
<main className="container mx-auto p-4 flex-grow">
<section className="text-center mb-12">
<h2 className="text-4xl font-extrabold text-gray-900">我们的联系人</h2>
<p className="text-xl text-gray-600 mt-4">以下是我们的联系人的信息，您可以点击卡片查看全部联系方式。</p>
<h2 className="text-4xl font-extrabold text-gray-900">联系</h2>
<p className="text-xl text-gray-600 mt-4">以下是主要负责人的联系信息，可以点击卡片查看全部联系方式。</p>
</section>
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{contacts.map((contact, index) => (
<div key={index} onClick={() => handleModal(contact)} className="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
<div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
<h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
<p className="text-gray-600">{contact.describe}</p>
</div>
@@ -41,17 +41,12 @@ export default function Page() {
</section>
</main>
<Footer />
<div
className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`}
onClick={closeModal}
>
<div className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`} onClick={closeModal}>
{modalContent && (
<div
className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`}
onClick={(e) => e.stopPropagation()}
>
<div className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`} onClick={(e) => e.stopPropagation()}>
<h3 className="text-xl font-semibold text-gray-900">{modalContent.name}</h3>
<p className="text-gray-600">{modalContent.describe}</p>
<p className="text-gray-600 ">{modalContent.describe}</p>
<br></br>
{modalContent.email && <p>Email: {modalContent.email}</p>}
{modalContent.phone && <p>Phone: {modalContent.phone}</p>}
{modalContent.qq && <p>QQ: {modalContent.qq}</p>}
app/globals.css
+5 -5
View File
@@ -20,18 +20,18 @@ body {
font-family: Arial, Helvetica, sans-serif;
}
.url-wrapper {
.list-wrapper {
background: var(--main);
max-height: 80px;
width: 100%;
}
.url-item {
.list-item {
display: flex;
border-radius: 1.125rem;
}
.url-avatar {
.list-avatar {
width: 80px;
height: 80px;
background-size: cover;
@@ -40,7 +40,7 @@ body {
flex-shrink: 0;
}
.url-info {
.list-info {
flex-shrink: 1;
padding-left: 0.75rem; /* pl-3 */
padding-top: 0.5rem; /* pt-2 */
@@ -51,7 +51,7 @@ body {
text-overflow: ellipsis;
}
.url-name {
.list-name {
font-size: 1.25rem; /* text-xl */
font-weight: 700; /* font-bold */
margin-top: 0.25rem; /* my-1 */
app/page.tsx
+8 -8
View File
@@ -9,16 +9,16 @@ export default function Home() {
<Header />
<main className="container mx-auto p-4 flex-grow">
<section className="text-center mb-12">
<h2 className="text-4xl font-extrabold text-gray-900">实验室简介</h2>
<p className="text-xl text-gray-600 mt-4">这里是实验室的基本信息简介，简洁明了地介绍实验室。</p>
<h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
<p className="text-xl text-gray-600 mt-4">这里是实验室的基本信息简介，阿巴阿巴阿巴。</p>
</section>
<section className="url-wrapper grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{websites.map((website, index) => (
<a key={index} href={website.link}>
<div className="url-item flex bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
<Image src={website.icon} alt={website.title} width={80} height={80} className="url-avatar rounded-lg overflow-hidden flex-shrink-0" />
<div className="url-info flex-shrink pl-3 pt-2 my-1 truncate">
<h3 className="url-name text-xl font-bold my-1 truncate">{website.title}</h3>
<a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
<div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
<Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
<div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
<h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
<div className="text-sm text-gray-500 truncate">{website.description}</div>
</div>
</div>