<template><view class="train-ticket"><view class="header"><view class="header-left"><text class="logo">铁路</text><text class="ticket-type">电子客票</text></view><view class="header-right"><text class="ticket-number">{{ ticketData.ticketNumber }}</text></view></view><view class="content"><view class="from-to"><text class="from">{{ ticketData.fromPlace }}</text><text class="arrow">→</text><text class="to">{{ ticketData.toPlace }}</text></view><view class="info-item"><text class="info-label">车次：</text><text class="info-value">{{ ticketData.trainNumber }}</text></view><view class="info-item"><text class="info-label">座席：</text><text class="info-value">{{ ticketData.seatClass }}</text></view><view class="info-item"><text class="info-label">出发时间：</text><text class="info-value">{{ ticketData.departureTime }}</text></view><view class="info-item"><text class="info-label">到达时间：</text><text class="info-value">{{ ticketData.arrivalTime }}</text></view><view class="info-item"><text class="info-label">乘车人：</text><text class="info-value">{{ ticketData.passengerName }}</text></view><view class="info-item"><text class="info-label">身份证号：</text><text class="info-value">{{ ticketData.idNumber }}</text></view></view></view>
</template><script>
export default {name: "TrainTicket",data() {return {ticketData: {ticketNumber: "E00123456",fromPlace: "深圳北站",toPlace: "北京西站",trainNumber: "G888",seatClass: "一等座",departureTime: "10:00",arrivalTime: "18:00",passengerName: "ネф̶-イω",idNumber: "888888888888888888"}};}
};
</script><style scoped>css">
.train-ticket {width: calc(100% - 20px);border: 1px solid #ccc;border-radius: 8px;overflow: hidden;background-color: white;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);margin: 15px auto;font-family: Arial, sans-serif;font-size: 14px;
}.header {display: flex;justify-content: space-between;align-items: center;padding: 6px 10px;background: linear-gradient(135deg, #0078d7, #0057b8);color: white;
}.header-left {display: flex;align-items: center;
}.logo {font-size: 20px;font-weight: bold;margin-right: 8px;
}.ticket-type {font-size: 14px;
}.header-right {
}.ticket-number {font-size: 14px;
}.content {padding: 20px;
}.from-to {display: flex;justify-content: space-between;margin-bottom: 12px;font-size: 18px;color: #333;
}.from {width: 30%;text-align: left;
}.arrow {width: 10%;text-align: center;margin: 0;color: #666;font-size: 20px;
}.to {width: 30%;text-align: right;
}.info-item {display: flex;justify-content: space-between;margin-bottom: 10px;
}.info-label {width: 30%;font-weight: bold;color: #333;text-align: left;
}.info-value {width: 70%;text-align: right;
}
</style>
