<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>
导入使用时钟组件
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
