<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>
.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>
uniapp火车票样式
2025/2/25 19:40:21
来源:https://blog.csdn.net/weixin_45019897/article/details/145076372
浏览:
次
关键词:uniapp火车票样式
版权声明:
本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。
我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com
热文排行
最新新闻
- 双目的一些文章学习
- go获取正在运行的函数并及时捕获panic
- 【微机及接口技术】- 第三章 8086 汇编语言程序设计(汇编语言基础)
- ubuntu安装docker docker/DockerHub 国内镜像源/加速列表【持续更新】
- 从1000s到10s,OceanBase 标量子查询的SQL优化实践
- Nginx正向代理配置
- CV-MLLM经典论文解读|OneLLM: One Framework to Align All Modalities with Language
- 吃一堑长一智
- docker配置镜像加速
- ASP.NET Core 使用 FileStream 将 FileResult 文件发送到浏览器后删除该文件
推荐新闻
- 双目的一些文章学习
- go获取正在运行的函数并及时捕获panic
- 【微机及接口技术】- 第三章 8086 汇编语言程序设计(汇编语言基础)
- ubuntu安装docker docker/DockerHub 国内镜像源/加速列表【持续更新】
- 从1000s到10s,OceanBase 标量子查询的SQL优化实践
- Nginx正向代理配置
- CV-MLLM经典论文解读|OneLLM: One Framework to Align All Modalities with Language
- 吃一堑长一智
- docker配置镜像加速
- ASP.NET Core 使用 FileStream 将 FileResult 文件发送到浏览器后删除该文件