<template>
<div class="about-page-container">
<
!-- 小组成员标题 -->
<div class="team-header">
<h1 class="team-title">农大熬夜秃头组</h1>
<img src="@/assets/logo.png" alt="Logo" class="group-logo" />
</div>
<
!-- 内容容器 -->
<div class="content-container">
<
!-- 左侧：小组成员部分 -->
<div class="team-members">
<div class="member-list">
<div class="member-item" v-for="(member, index) in teamMembers" :key="index">
<img :src="member.avatar" :alt="member.name" class="member-avatar" />
<div class="member-info">
<p class="member-name">{{ member.name }}</p>
<p class="member-email" @click="copyEmail(member.email)">
{{ member.email }}
</p>
</div>
</div>
</div>
</div>
<
!-- 右侧：圆盘时钟部分 -->
<div class="clock-container">
<div id="clock">
<div class="hand hour-hand" :style="{ transform: `rotate(${hourDegrees}deg)` }"></div>
<div class="hand minute-hand" :style="{ transform: `rotate(${minuteDegrees}deg)` }"></div>
<div class="hand second-hand" :style="{ transform: `rotate(${secondDegrees}deg)` }"></div>
<
!-- 时钟中心点 -->
<div class="center-point"></div>
<
!-- 时钟刻度点 -->
<div
v-for="(angle, index) in clockMarkAngles"
:key="'mark-' + index"
class="clock-mark"
:class="{
'big-mark': [0, 3, 6, 9].includes(index),
'small-mark':
![0, 3, 6, 9].includes(index)
}"
:style="{
transform: `translate(-50%, -50%) rotate(${angle}deg) translate(0, -200px)` /* 调整刻度位置 */
}"
></div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
// 导入头像图片资源（根据实际路径调整）
import avatar1 from '../assets/avatar1.png';
import avatar2 from '../assets/avatar2.png';
import avatar3 from '../assets/avatar3.png';
import avatar4 from '../assets/avatar4.png';
import avatar5 from '../assets/avatar5.png';
import avatar6 from '../assets/avatar6.png';
// 小组成员数据
const teamMembers = [
{ name: '韩磊大帅锅', email: '2815984077@qq.com', avatar: avatar1 },
{ name: '球球小可爱', email: '3027830960@qq.com', avatar: avatar2 },
{ name: '. ', email: '3503429197@qq.com', avatar: avatar3 },
{ name: 'Zui_ren', email: '2036382099@qq.com', avatar: avatar4 },
{ name: '梁哲源大帅哥', email: '2064685542@qq.com', avatar: avatar5 },
{ name: '00', email: '27245185689@qq.com', avatar: avatar6 },
];
// 时钟指针角度
const hourDegrees = ref(90);
const minuteDegrees = ref(90);
const secondDegrees = ref(90);
// 计算时钟刻度的角度（0-11小时对应的角度）
const clockMarkAngles = computed(() => {
return Array.from({ length: 12 }, (_, i) => i * 30);
});
// 更新时钟函数（使用北京时间）
const updateClock = () => {
const now = new Date(); // 获取当前时间
const utcOffset = 8; // 北京时间偏移量（+8小时）
const beijingTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000 + utcOffset * 3600000);
const seconds = beijingTime.getSeconds();
const minutes = beijingTime.getMinutes();
const hours = beijingTime.getHours();
secondDegrees.value = ((seconds / 60) * 360) + 90;
minuteDegrees.value = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
hourDegrees.value = ((hours % 12) / 12) * 360 + ((minutes / 60) * 30) + 90;
};
// 复制邮箱地址
const copyEmail = (email: string) => {
navigator.clipboard.writeText(email).then(() => {
alert('邮箱已复制到剪贴板');
}).catch(err => {
console.error('无法复制邮箱: ', err);
});
};
// 挂载后启动时钟更新
onMounted(() => {
setInterval(updateClock, 1000);
updateClock(); // 初始化时钟
});
</script>
<style scoped>
/* 颜色变量 */
:root {
--primary-color: #409eff;
--secondary-color: #67c23a;
--accent-color: #e6a23c;
--text-color: #333;
--light-text-color: #666;
--bg-color: #f5f7fa;
--border-color: #e4e7ed;
}
/* 整体页面容器 */
.about-page-container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #f9fafc;
font-family: 'Inter', sans-serif;
padding: 20px;
}
/* 小组成员标题 */
.team-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
gap: 15px;
}
.team-title {
font-size: 32px;
font-weight: 600;
color: var(--text-color);
margin: 0;
}
.group-logo {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
background-color: #fff;
}
/* 内容容器 */
.content-container {
display: flex;
justify-content: space-between; /* 确保左右两侧分开 */
gap: 40px;
flex-wrap: wrap; /* 在小屏幕上换行 */
}
/* 左侧：小组成员部分 */
.team-members {
flex: 1; /* 占据左侧空间 */
max-width: calc(50% - 40px); /* 略小于两个时钟组件的高度 */
}
.member-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.member-item {
display: flex;
align-items: center;
padding: 10px; /* 缩小卡片尺寸 */
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
font-size: 14px; /* 调整字体大小以适应缩小的卡片 */
}
.member-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.member-avatar {
width: 60px; /* 缩小头像尺寸 */
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 2px solid var(--primary-color);
}
.member-info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.member-name {
font-size: 16px; /* 调整名称字体大小 */
font-weight: 600;
color: var(--text-color);
margin: 0 0 5px 0;
}
.member-email {
font-size: 12px; /* 调整邮箱字体大小 */
color: var(--light-text-color);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 3px 8px; /* 缩小内边距 */
background-color: #f0f7ff;
border-radius: 20px;
width: fit-content;
transition: all 0.3s ease;
}
.member-email:hover {
color: var(--primary-color);
background-color: #e1edff;
}
/* 右侧：圆盘时钟部分 */
.clock-container {
flex: 1; /* 占据右侧空间 */
max-width: 40%; /* 调整为略小的比例 */
display: flex;
justify-content: center;
align-items: center;
}
#clock {
width: 400px; /* 调整为较小的尺寸 */
height: 400px;
background: radial-gradient(circle, #ffffff 0%, #f5f7fa 100%);
border: 16px solid var(--primary-color); /* 调整边框宽度 */
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.hand {
position: absolute;
bottom: 50%;
transform-origin: center bottom;
transition: transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 6px;
}
.hour-hand {
width: 12px;
height: 120px; /* 缩短指针长度 */
background: linear-gradient(to bottom, #90ee90 0%, #70cc70 100%); /* 浅绿色 */
top: 80px;
z-index: 3;
}
.minute-hand {
width: 8px;
height: 160px; /* 缩短指针长度 */
background: linear-gradient(to bottom, #ffffe0 0%, #ffffb3 100%); /* 浅黄色 */
top: 60px;
z-index: 4;
}
.second-hand {
width: 4px;
height: 180px; /* 缩短指针长度 */
background: linear-gradient(to bottom, #ff4d4f 0%, #d9363e 100%);
top: 40px;
z-index: 5;
}
/* 时钟中心点 */
.center-point {
position: absolute;
width: 20px; /* 缩小中心点 */
height: 20px;
background: linear-gradient(to bottom, var(--primary-color) 0%, #3080e0 100%);
border-radius: 50%;
z-index: 10;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 时钟刻度 - 黑色圆点样式 */
.clock-mark {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
z-index: 2;
}
.big-mark {
width: 10px; /* 较大的黑色圆点 */
height: 10px;
background-color: black;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.small-mark {
width: 5px; /* 较小的黑色圆点 */
height: 5px;
background-color: black;
border-radius: 50%;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
/* 响应式设计 */
@media (max-width: 1200px) {
.content-container {
flex-direction: column; /* 在小屏幕上垂直排列 */
}
.team-members, .clock-container {
max-width: 100%; /* 占据整行 */
flex: 1;
}
#clock {
width: 300px;
height: 300px;
}
}
@media (max-width: 600px) {
#clock {
width: 250px;
height: 250px;
border-width: 12px;
}
}
</style>
导入使用时钟组件
本文讨论了通过手写Windows应用程序而非使用IDE提供的控件来评估程序员对面向对象编程理解的做法，并提出了一些观点认为这种方法可能并非最佳途径。
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
