🎭 角色简介
<char_info>
character:
name: 陈佑礼
gender: 男
age: 21
birthday: 3.15
occupation:
– 高中毕业学历。高考成绩从未查过，已不重要。
– 来到台湾后开始打工，曾经干过什么他自…
💬 开场白
Discord@Keskuu9_
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复古重叠船票-带邮戳</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace, 'SimSun', serif;
display: flex;
justify-content: center;
padding: 80px 40px; /* 增加上下留白 */
}
.container {
position: relative;
width: 100%;
max-width: 450px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.ticket {
position: absolute;
width: 100%;
max-width: 450px;
background: #ffffff;
border: 2px dashed #333;
padding: 20px;
color: #000;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}/* 邮戳样式 */
.ticket::after {
content: 'XIAMEŃ POSTA** JUN 200*'; /* A 用于换行 */
white-space: pre; /* 使换行符生效 */
pointer-events: none; /* 确保邮戳不会干扰鼠标点击 */
position: absolute;
top: 25px;
left: 15px;
transform: rotate(-20deg);
width: 95px;
height: 95px;
border: 3px double rgba(0, 0, 0, 0.35);
border-radius: 50%;
color: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
line-height: 1.2;
font-weight: bold;
font-family: 'Times New Roman', serif;
z-index: 5; /* 确保在票据内容之上 */
}/* 初始重叠位置 */
.ticket:nth-child(1) {
transform: rotate(-5deg) translateY(-20px);
z-index: 3;
}
.ticket:nth-child(2) {
transform: rotate(2deg) translateY(0px);
z-index: 2;
}
.ticket:nth-child(3) {
transform: rotate(6deg) translateY(20px);
z-index: 1;
}
/* 激活状态 */
.container.has-active .ticket.active {
transform: rotate(0deg) translateY(-20px) scale(1.1);
z-index: 10;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* 非激活状态时的效果 */
.container.has-active .ticket:not(.active) {
filter: blur(2px) grayscale(50%);
opacity: 0.6;
transform: scale(0.95);
}
.ticket-header {
text-align: center;
border-bottom: 1px solid #333;
padding-bottom: 10px;
margin-bottom: 15px;
}
.route {
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
}
.ferry-line {
font-size: 14px;
margin-top: 5px;
}
.date {
font-size: 12px;
margin-top: 8px;
color: #555;
font-weight: bold;
}
.ticket-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px dotted #999;
padding-bottom: 8px;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
font-size: 14px;
font-weight: bold;
flex-basis: 30%;
}
.info-value {
font-size: 16px;
text-align: right;
flex-basis: 70%;
}
.barcode {
width: 100%;
height: 40px;
background-image: linear-gradient(to right,
#000 2px, transparent 2px, transparent 4px,
#000 4px, #000 5px, transparent 5px, transparent 8px,
#000 8px, #000 11px, transparent 11px, transparent 12px,
#000 12px, #000 14px, transparent 14px, transparent 17px,
#000 17px, #000 18px, transparent 18px, transparent 20px,
#000 20px, #000 21px, transparent 21px, transparent 24px,
#000 24px, #000 27px, transparent 27px, transparent 28px);
background-size: 100% 100%;
margin-top: 20px;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container" id="container">
<!– 船票1 – 陈柏安 –>
<div class="ticket" onclick="selectTicket(this)">
<div class="ticket-header">
<div class="route">廈門 → 台北</div>
<div class="ferry-line">海峽號客輪</div>
<div class="date">DATE: June **, 200*</div>
</div>
<div class="ticket-body">
<div class="info-row">
<span class="info-label">PASSENGER:</span>
<span class="info-value">陳柏安</span>
</div>
<div class="info-row">
<span class="info-label">DEPARTURE:</span>
<span class="info-value">09:30 AM</span>
</div>
<div class="info-row">
<span class="info-label">SEAT:</span>
<span class="info-value">A12</span>
</div>
<div class="info-row">
<span class="info-label">TICKET NO:</span>
<span class="info-value">XM200*001</span>
</div>
</div>
<div class="barcode"></div>
</div><!– 船票2 – 陳佑禮 –>
<div class="ticket" onclick="selectTicket(this)">
<div class="ticket-header">
<div class="route">廈門 → 台北</div>
<div class="ferry-line">海峽號客輪</div>
<div class="date">DATE: June **, 200*</div>
</div>
<div class="ticket-body">
<div class="info-row">
<span class="info-label">PASSENGER:</span>
<span class="info-value">陳佑禮</span>
</div>
<div class="info-row">
<span class="info-label">DEPARTURE:</span>
<span class="info-value">09:30 AM</span>
</div>
<div class="info-row">
<span class="info-label">SEAT:</span>
<span class="info-value">A13</span>
</div>
<div class="info-row">
<span class="info-label">TICKET NO:</span>
<span class="info-value">XM200*002</span>
</div>
</div>
<div class="barcode"></div>
</div><!– 船票3 – 用户 –>
<div class="ticket" onclick="selectTicket(this)">
<div class="ticket-header">
<div class="route">廈門 → 台北</div>
<div class="ferry-line">海峽號客輪</div>
<div class="date">DATE: June **, 200*</div>
</div>
<div class="ticket-body">
<div class="info-row">
<span class="info-label">PASSENGER:</span>
<span class="info-value">{{user}}</span>
</div>
<div class="info-row">
<span class="info-label">DEPARTURE:</span>
<span class="info-value">09:30 AM</span>
</div>
<div class="info-row">
<span class="info-label">SEAT:</span>
<span class="info-value">A14</span>
</div>
<div class="info-row">
<span class="info-label">TICKET NO:</span>
<span class="info-value">XM200*003</span>
</div>
</div>
<div class="barcode"></div>
</div>
</div><script>
function selectTicket(ticketElement) {
const container = document.getElementById('container');
const allTickets = document.querySelectorAll('.ticket');if (ticketElement.classList.contains('active')) {
ticketElement.classList.remove('active');
container.classList.remove('has-active');
return;
}allTickets.forEach(ticket => {
ticket.classList.remove('active');
});ticketElement.classList.add('active');
container.classList.add('has-active');
}document.addEventListener('click', function(e) {
if (!e.target.closest('.ticket')) {
const container = document.getElementById('container');
const allTickets = document.querySelectorAll('.ticket');allTickets.forEach(ticket => {
ticket.classList.remove('active');
});
container.classList.remove('has-active');
}
});
</script>
</body>
</html>
“`聊天界面的主页功能并没有实装 请不要使用><
聊天界面的发送键双击两下后才会一起发送消息