72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="header">
|
|
<div>门票名称</div>
|
|
<div>剩余数量</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="item">
|
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
|
<div class="detail">
|
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
|
<div>1023/20000</div>
|
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.main {
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
|
background-size: 100%;
|
|
padding: 38rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
|
|
.header {
|
|
width: 100%;
|
|
background: #AB2F23;
|
|
height: 70rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 2rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.detail {
|
|
flex: 1;
|
|
margin-left: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|