475 lines
14 KiB
Vue
475 lines
14 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col flex-1 group_3">
|
||
<view class="flex-col relative group">
|
||
<view class="flex-col">
|
||
<view class="flex-col group_2">
|
||
<text class="self-start font text">场次</text>
|
||
<view class="mt-20 flex-col items-start self-stretch group_4">
|
||
<view class="flex-col justify-start text-wrapper">
|
||
<text class="font_2 text_2">上午场（09:30-12:00）</text>
|
||
</view>
|
||
<view class="mt-14 flex-col justify-start text-wrapper_2">
|
||
<text class="text_3">下午场（13:00-16:00）</text>
|
||
</view>
|
||
</view>
|
||
<view class="mt-20 self-stretch divider"></view>
|
||
<text class="mt-20 self-start font text_4">日期</text>
|
||
</view>
|
||
<view class="mt-22 flex-col">
|
||
<view class="flex-col justify-start self-start section">
|
||
<view class="flex-row equal-division">
|
||
<view class="flex-col items-center group_5 equal-division-item">
|
||
<text class="font_2 text_5">9月</text>
|
||
<text class="font_3 mt-9">￥68.00起</text>
|
||
</view>
|
||
<view class="flex-col items-center group_5 equal-division-item">
|
||
<text class="font_2 text_5">10月</text>
|
||
<text class="font_3 mt-9">￥68.00起</text>
|
||
</view>
|
||
<view class="flex-col items-center group_5 equal-division-item">
|
||
<text class="font_2 text_5">11月</text>
|
||
<text class="font_3 mt-9">￥68.00起</text>
|
||
</view>
|
||
<view class="flex-col items-center group_5 equal-division-item">
|
||
<text class="font_2 text_5">12月</text>
|
||
<text class="font_3 mt-9">￥68.00起</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-10 flex-row justify-between items-center self-stretch section_2">
|
||
<text class="font_4 text_6">日</text>
|
||
<text class="font_5 text_12">一</text>
|
||
<text class="font_5 text_7">二</text>
|
||
<text class="font_5 text_8">三</text>
|
||
<text class="font_5 text_9">四</text>
|
||
<text class="font_5 text_10">五</text>
|
||
<text class="font_4 text_11">六</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="grid">
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">1</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">2</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">3</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">4</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">5</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">6</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">7</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">8</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">9</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">10</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">11</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">12</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">13</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">14</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">15</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">16</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">17</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">18</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">19</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">20</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">21</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">22</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">23</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">24</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">25</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">26</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">27</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center grid-item">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 mt-7">28</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row mt-5">
|
||
<view class="flex-col items-center section_3">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 text_13 mt-7">29</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
<view class="flex-col items-center section_3 ml-5">
|
||
<text class="font_6">余99</text>
|
||
<text class="font_7 text_14 mt-7">30</text>
|
||
<text class="font_8 mt-7">￥68.00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_6">
|
||
<text class="font">数量</text>
|
||
<view class="flex-row items-center">
|
||
<text class="text_15">一次限购100件</text>
|
||
<image
|
||
class="shrink-0 image_2"
|
||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d02802d54496f19fd8b116/6705182d1511d900114a0a46/bd83ec79ae6ad0d4932c2e9d97aef3ef.png"
|
||
/>
|
||
<view class="flex-col justify-start items-center shrink-0 text-wrapper_3">
|
||
<text class="font_7 text_16">1</text>
|
||
</view>
|
||
<image
|
||
class="shrink-0 image_3"
|
||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/66d02802d54496f19fd8b116/6705182d1511d900114a0a46/3d7428683bada7a94b84917c1f260b0e.png"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col justify-start section_4 mt-55">
|
||
<view class="flex-col justify-start items-center button text-wrapper_4"><text class="text_17">下一步</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mt-9 {
|
||
margin-top: 16.88rpx;
|
||
}
|
||
.mt-5 {
|
||
margin-top: 9.38rpx;
|
||
}
|
||
.ml-5 {
|
||
margin-left: 9.38rpx;
|
||
}
|
||
.mt-7 {
|
||
margin-top: 13.13rpx;
|
||
}
|
||
.mt-55 {
|
||
margin-top: 103.13rpx;
|
||
}
|
||
.page {
|
||
background-color: #fffef8;
|
||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.group_3 {
|
||
padding-bottom: 16.88rpx;
|
||
overflow-y: auto;
|
||
}
|
||
.group {
|
||
margin-top: -15rpx;
|
||
}
|
||
.group_2 {
|
||
padding: 0 31.88rpx;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: Times New Roman;
|
||
line-height: 27.69rpx;
|
||
color: #323233;
|
||
}
|
||
.text {
|
||
margin-left: 3.75rpx;
|
||
line-height: 27.51rpx;
|
||
}
|
||
.group_4 {
|
||
padding: 0 3.75rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 18.75rpx 0;
|
||
background-color: #f3f3f3;
|
||
border-radius: 5.63rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 22.01rpx;
|
||
color: #323233;
|
||
}
|
||
.text_2 {
|
||
margin-left: 15rpx;
|
||
margin-right: 11.25rpx;
|
||
line-height: 24.96rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 18.75rpx 0;
|
||
background-color: #fff4cd;
|
||
border-radius: 5.63rpx;
|
||
}
|
||
.text_3 {
|
||
margin-left: 15rpx;
|
||
margin-right: 11.25rpx;
|
||
color: #fcc600;
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.96rpx;
|
||
}
|
||
.divider {
|
||
background-color: #eaeaea;
|
||
height: 1.88rpx;
|
||
}
|
||
.text_4 {
|
||
margin-left: 7.5rpx;
|
||
line-height: 27.39rpx;
|
||
}
|
||
.section {
|
||
padding: 22.5rpx 0 15rpx;
|
||
background-color: #fffef8;
|
||
width: 538.13rpx;
|
||
}
|
||
.equal-division {
|
||
padding: 0 26.25rpx;
|
||
}
|
||
.group_5 {
|
||
flex: 1 1 120rpx;
|
||
}
|
||
.equal-division-item {
|
||
padding: 11.25rpx 0;
|
||
}
|
||
.text_5 {
|
||
line-height: 22.78rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 18.75rpx;
|
||
font-family: Open Sans;
|
||
line-height: 17.38rpx;
|
||
color: #fcc600;
|
||
}
|
||
.section_2 {
|
||
padding: 30rpx 41.25rpx 30rpx 45rpx;
|
||
background-color: #f5f5dc;
|
||
}
|
||
.font_4 {
|
||
font-size: 26.25rpx;
|
||
font-family: Times New Roman;
|
||
line-height: 22.01rpx;
|
||
color: #fcc600;
|
||
}
|
||
.text_6 {
|
||
line-height: 22.07rpx;
|
||
}
|
||
.font_5 {
|
||
font-size: 26.25rpx;
|
||
font-family: Times New Roman;
|
||
line-height: 22.01rpx;
|
||
color: #323233;
|
||
}
|
||
.text_12 {
|
||
line-height: 2.16rpx;
|
||
}
|
||
.text_7 {
|
||
line-height: 17.78rpx;
|
||
}
|
||
.text_8 {
|
||
line-height: 19.69rpx;
|
||
}
|
||
.text_9 {
|
||
line-height: 21rpx;
|
||
}
|
||
.text_10 {
|
||
line-height: 20.16rpx;
|
||
}
|
||
.text_11 {
|
||
line-height: 23.81rpx;
|
||
}
|
||
.grid {
|
||
height: 455.63rpx;
|
||
display: grid;
|
||
grid-template-rows: repeat(4, minmax(0, 1fr));
|
||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||
row-gap: 11.38rpx;
|
||
column-gap: 0;
|
||
}
|
||
.grid-item {
|
||
padding: 18.75rpx 0;
|
||
background-color: #fffef8;
|
||
border-radius: 5.63rpx;
|
||
}
|
||
.font_6 {
|
||
font-size: 15rpx;
|
||
font-family: Open Sans;
|
||
line-height: 13.76rpx;
|
||
color: #323233;
|
||
}
|
||
.font_7 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 22.01rpx;
|
||
color: #323233;
|
||
}
|
||
.font_8 {
|
||
font-size: 15rpx;
|
||
font-family: Open Sans;
|
||
line-height: 11.08rpx;
|
||
color: #323233;
|
||
}
|
||
.section_3 {
|
||
padding: 15rpx 0;
|
||
background-color: #fffef8;
|
||
border-radius: 5.63rpx;
|
||
width: 101.25rpx;
|
||
height: 106.88rpx;
|
||
}
|
||
.text_13 {
|
||
line-height: 22.03rpx;
|
||
}
|
||
.text_14 {
|
||
line-height: 22.05rpx;
|
||
}
|
||
.group_6 {
|
||
margin-top: 52.5rpx;
|
||
padding-left: 37.5rpx;
|
||
padding-right: 28.13rpx;
|
||
}
|
||
.text_15 {
|
||
color: #818181;
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 20.72rpx;
|
||
}
|
||
.image_2 {
|
||
margin-left: 11.25rpx;
|
||
border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.text-wrapper_3 {
|
||
padding: 15rpx 0;
|
||
background-color: #f5f5dc;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.text_16 {
|
||
color: #000000;
|
||
line-height: 21.41rpx;
|
||
}
|
||
.image_3 {
|
||
border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.section_4 {
|
||
padding: 22.5rpx 0;
|
||
background-color: #ffffff;
|
||
}
|
||
.button {
|
||
margin: 0 45rpx;
|
||
}
|
||
.text-wrapper_4 {
|
||
padding: 22.5rpx 0;
|
||
background-color: #fbb612;
|
||
border-radius: 93.75rpx;
|
||
}
|
||
.text_17 {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-family: Inter;
|
||
font-weight: 700;
|
||
line-height: 28.2rpx;
|
||
}
|
||
@import url(../../common/css/global.css);
|
||
</style> |