Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
8876746b by yyx
Options

seat page

1 parent 4b6bf2f4
Inline Side-by-side
Showing 11 changed files with 1187 additions and 0 deletions
pnpm-lock.yaml 0 → 100644
This diff could not be displayed because it is too large.
src/permission.js
...@@ -13,6 +13,7 @@ NProgress.configure({ showSpinner: false }) ...@@ -13,6 +13,7 @@ NProgress.configure({ showSpinner: false })
13 const whiteList = ['/login', '/register', '/regulations'] 13 const whiteList = ['/login', '/register', '/regulations']
14 14
15 router.beforeEach((to, from, next) => { 15 router.beforeEach((to, from, next) => {
16 console.log('to2', to)
16 NProgress.start() 17 NProgress.start()
17 if (getToken()) { 18 if (getToken()) {
18 // debugger 19 // debugger
......
src/permissionPc.js
...@@ -9,6 +9,7 @@ import useUserStore from '@/store/modules/user' ...@@ -9,6 +9,7 @@ import useUserStore from '@/store/modules/user'
9 NProgress.configure({ showSpinner: false }) 9 NProgress.configure({ showSpinner: false })
10 10
11 router.beforeEach((to, from, next) => { 11 router.beforeEach((to, from, next) => {
12 console.log('to', to)
12 NProgress.start() 13 NProgress.start()
13 if (getToken()) { 14 if (getToken()) {
14 // 判断当前用户是否已拉取完user_info信息 15 // 判断当前用户是否已拉取完user_info信息
......
src/routerPc/en.js
...@@ -500,6 +500,50 @@ export const constantRoutes = [ ...@@ -500,6 +500,50 @@ export const constantRoutes = [
500 meta: { title: 'System messages' } 500 meta: { title: 'System messages' }
501 } 501 }
502 ] 502 ]
503 },
504 {
505 path: 'seat',
506 component: () => import('@/viewsPc/seat/seat'),
507 name: 'seat',
508 redirect: '/seat/detail',
509 children: [
510 {
511 path: 'detail',
512 name: 'seat_detail',
513 component: () => import('@/viewsPc/seat/ticket-detail'),
514 meta: { title: '购票详情' }
515 },
516 {
517 path: 'order',
518 name: 'seat_order',
519 component: () => import('@/viewsPc/seat/order-list'),
520 meta: { title: '我的订单' }
521 },
522 {
523 path: 'order_detail',
524 name: 'order_detail',
525 component: () => import('@/viewsPc/seat/order-detail'),
526 meta: { title: '订单详情' }
527 },
528 {
529 path: 'confirm_order',
530 name: 'confirm_order',
531 component: () => import('@/viewsPc/seat/confirm-order'),
532 meta: { title: '确认订单' }
533 },
534 {
535 path: 'add_watch_people',
536 name: 'add_watch_people',
537 component: () => import('@/viewsPc/seat/add-watch-people'),
538 meta: { title: '新增观影人' }
539 },
540 {
541 path: 'people_manage',
542 name: 'people_manage',
543 component: () => import('@/viewsPc/seat/people-manage'),
544 meta: { title: '观影人管理' }
545 },
546 ]
503 } 547 }
504 ] 548 ]
505 }, 549 },
......
src/viewsPc/seat/add-watch-people.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div class="container">
5 <div class="title">新增观影人</div>
6 <div class="content">
7 <div class="form-item">
8 <div>
9 <div class="label">姓名</div>
10 <el-input
11 v-model="input"
12 style="width: 570px"
13 placeholder="Please input"
14 />
15 </div>
16 <div>
17 <div class="label">证件类型</div>
18 <el-input
19 v-model="input"
20 style="width: 570px"
21 placeholder="Please input"
22 readonly
23 />
24 </div>
25 </div>
26 <div class="form-item">
27 <div>
28 <div class="label">身份证号</div>
29 <el-input
30 v-model="input"
31 style="width: 570px"
32 placeholder="Please input"
33 />
34 </div>
35 </div>
36 </div>
37
38 <div class="footer">
39 <div class="can_pay">取消</div>
40 <div class="pay">确认</div>
41 </div>
42 </div>
43 </template>
44
45 <style scoped lang="scss">
46 div {
47 box-sizing: border-box;
48 }
49 .container {
50 padding: 20px 0;
51 width: 1200px;
52 margin: 0 auto;
53
54 .title {
55 padding: 11px;
56 text-align: center;
57 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
58 font-size: 18px;
59 color: #ffffff;
60 }
61
62 .content {
63 padding: 46px 20px 24px;
64 background-color: #fff;
65 :deep(.el-input) {
66 height: 48px;
67 border-radius: 24px !important;
68 }
69 .form-item {
70 display: flex;
71 gap: 20px;
72 margin-bottom: 36px;
73 &:last-child {
74 margin: 0;
75 }
76 .label {
77 font-size: 18px;
78 color: #333333;
79 margin-bottom: 16px;
80 }
81 }
82 }
83 .footer {
84 display: flex;
85 justify-content: center;
86 align-items: center;
87 gap: 20px;
88 height: 70px;
89 background-color: #fff;
90 margin-top: 12px;
91 .pay {
92 width: 200px;
93 height: 40px;
94 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
95 border-radius: 20px;
96 font-weight: 500;
97 font-size: 16px;
98 color: #ffffff;
99 line-height: 40px;
100 text-align: center;
101 cursor: pointer;
102 }
103 .can_pay {
104 width: 200px;
105 height: 40px;
106 background: #f6f6f6;
107 border-radius: 20px;
108 font-weight: 500;
109 font-size: 16px;
110 color: #999;
111 line-height: 40px;
112 text-align: center;
113 box-sizing: border-box;
114 cursor: pointer;
115 }
116 }
117 }
118 </style>
src/viewsPc/seat/confirm-order.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div class="container">
5 <div class="title">订单确认</div>
6 <div class="content">
7 <div class="left">
8 <div class="info">
9 <div class="name">2024亚洲舞蹈比赛无锡站</div>
10 <div class="address">无锡会展中心</div>
11 </div>
12
13 <div class="ticket_info">
14 <div class="tit_box">
15 <div class="line"></div>
16 <div class="txt">订票信息</div>
17 </div>
18
19 <div class="form">
20 <el-form>
21 <el-form-item label="联系人">
22 <el-input placeholder="请输入手机号" style="width: 260px" />
23 </el-form-item>
24 <el-form-item label="观看人">
25 <div class="p_box">
26 <div class="people">
27 <el-checkbox-group @change="">
28 <div
29 v-for="(it, index) in 5"
30 :key="index"
31 class="prople_item"
32 >
33 <div>
34 <div class="name">张三</div>
35 <div class="idcard">412************073</div>
36 </div>
37 <el-checkbox> </el-checkbox>
38 </div>
39 </el-checkbox-group>
40 </div>
41 <!-- button -->
42 <div class="btn">新增</div>
43 </div>
44 </el-form-item>
45 </el-form>
46 </div>
47 </div>
48 </div>
49
50 <div class="right">
51 <div class="tit_box">
52 <div class="line"></div>
53 <div class="txt">订单明细</div>
54 </div>
55
56 <div class="detail">
57 <div class="detail_top">
58 <div class="time">2024.03.03 周六</div>
59 <div class="ticket">80.00元票档 X2张</div>
60 </div>
61 <div class="detail_center">
62 <div v-for="(it, index) in 4" :key="index" class="ticket">
63 A区 6排14座 (B6馆)
64 </div>
65 </div>
66 <div class="detail_b">
67 <div class="sum_txt">共计</div>
68 <div class="price_num">¥160.00</div>
69 </div>
70 </div>
71 </div>
72 </div>
73 <div class="footer">
74 <div>
75 <span class="label">共计金额：</span><span class="value">¥900.00</span>
76 </div>
77 <div class="pay">立即支付</div>
78 </div>
79 </div>
80 </template>
81
82 <style scoped lang="scss">
83 div {
84 box-sizing: border-box;
85 }
86 .container {
87 padding: 20px 0;
88 width: 1200px;
89 margin: 0 auto;
90
91 .title {
92 padding: 11px;
93 text-align: center;
94 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
95 font-size: 18px;
96 color: #ffffff;
97 }
98
99 .content {
100 display: flex;
101 background-color: #fff;
102 padding: 20px 0;
103 }
104
105 .line {
106 width: 4px;
107 height: 18px;
108 background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
109 border-radius: 4px;
110 }
111
112 .left {
113 padding-left: 20px;
114 .info {
115 width: 640px;
116 background: rgba(69, 61, 234, 0.04);
117 border-radius: 8px;
118 border: 1px solid #d3d1f6;
119 padding: 20px 0 28px 33px;
120 margin-bottom: 20px;
121 .name {
122 font-weight: 500;
123 font-size: 18px;
124 color: #000000;
125 margin-bottom: 20px;
126 }
127 .address {
128 font-weight: 400;
129 font-size: 14px;
130 color: #929aa0;
131 }
132 }
133
134 .ticket_info {
135 .tit_box {
136 display: flex;
137 align-items: center;
138 gap: 10px;
139 margin-bottom: 14px;
140 .txt {
141 font-weight: bold;
142 font-size: 16px;
143 color: #493ceb;
144 }
145 }
146 .form {
147 width: 640px;
148 min-height: 464px;
149 padding: 20px 60px;
150 border-radius: 5px;
151 border: 1px solid #dcdfe6;
152
153 .p_box {
154 display: flex;
155 gap: 10px;
156 .people {
157 width: 298px;
158 background: #fbfcfd;
159 border-radius: 2px;
160 border: 1px solid #dcdfe6;
161 padding: 0 14px;
162 .prople_item {
163 display: flex;
164 justify-content: space-between;
165 align-items: center;
166 padding: 14px 0;
167 border-bottom: 1px solid #dcdfe6;
168 &:last-child {
169 border: none;
170 }
171 .name {
172 font-size: 16px;
173 color: #929aa0;
174 margin-bottom: 20px;
175 }
176 .idcard {
177 font-size: 10px;
178 color: #929aa0;
179 }
180 }
181 }
182 .btn {
183 width: 90px;
184 height: 40px;
185 background: #fbfcfd;
186 border-radius: 20px;
187 border: 1px solid #493ceb;
188 margin-top: 10px;
189 font-size: 14px;
190 color: #493ceb;
191 line-height: 40px;
192 text-align: center;
193 cursor: pointer;
194 user-select: none;
195 }
196 }
197 }
198 }
199 }
200
201 .right {
202 width: 460px;
203 margin-left: 36px;
204 .tit_box {
205 display: flex;
206 align-items: center;
207 gap: 10px;
208 margin-bottom: 20px;
209 .txt {
210 font-weight: bold;
211 font-size: 16px;
212 color: #493ceb;
213 }
214 }
215
216 .detail {
217 padding: 15px 26px;
218 border-radius: 5px;
219 border: 1px solid #dcdfe6;
220 .detail_top {
221 padding-bottom: 13px;
222 border-bottom: 1px solid #dcdfe6;
223 .time {
224 font-weight: 500;
225 font-size: 18px;
226 color: #2d373f;
227 line-height: 25px;
228 margin-bottom: 8px;
229 }
230 .ticket {
231 font-size: 16px;
232 color: #2d373f;
233 }
234 }
235 .detail_center {
236 margin-top: 14px;
237 display: flex;
238 flex-direction: column;
239 padding-bottom: 13px;
240 border-bottom: 1px solid #dcdfe6;
241 gap: 8px;
242 .ticket {
243 font-size: 16px;
244 color: #2d373f;
245 }
246 }
247 .detail_b {
248 display: flex;
249 justify-content: space-between;
250 align-items: center;
251 margin-top: 16px;
252 .sum_txt {
253 font-weight: 600;
254 font-size: 18px;
255 color: #2d373f;
256 line-height: 25px;
257 }
258 .price_num {
259 font-weight: 600;
260 font-size: 36px;
261 color: #ff8124;
262 line-height: 50px;
263 }
264 }
265 }
266 }
267
268 .footer {
269 display: flex;
270 justify-content: space-between;
271 height: 70px;
272 align-items: center;
273 background: #ffffff;
274 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
275 margin-top: 9px;
276 padding: 0 30px;
277 .label {
278 font-size: 16px;
279 color: #7b7f83;
280 line-height: 22px;
281 }
282 .value {
283 font-size: 22px;
284 color: #ff8124;
285 line-height: 30px;
286 font-weight: 600;
287 }
288 .pay {
289 width: 200px;
290 height: 40px;
291 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
292 border-radius: 20px;
293 font-weight: 500;
294 font-size: 16px;
295 color: #ffffff;
296 line-height: 40px;
297 text-align: center;
298 cursor: pointer;
299 }
300 }
301 }
302 </style>
src/viewsPc/seat/order-detail.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div class="container">
5 <div class="left">
6 <!-- 票务信息 -->
7 <div class="ticket">
8 <div class="th">
9 <div style="width: 33%" class="td">票务信息</div>
10 <div style="width: 25%" class="td">地点</div>
11 <div style="width: 20%" class="td">单价</div>
12 <div style="width: 10%" class="td">数量</div>
13 <div style="width: 12%; text-align: right" class="td">小计</div>
14 </div>
15 <div class="line"></div>
16 <div class="tr">
17 <div style="width: 30%" class="td">2024年亚洲舞蹈大赛无锡站</div>
18 <div style="width: 25%" class="td">无锡太湖国际博览中心</div>
19 <div style="width: 20%" class="td">¥80.00</div>
20 <div style="width: 12%" class="td">x3</div>
21 <div style="width: 13%; text-align: right" class="td">¥240.00</div>
22 </div>
23 </div>
24 <!-- 座位 -->
25 <div class="seat_box">
26 <div class="th">
27 <div style="width: 30.33%" class="td">时间座位</div>
28 <div style="width: 30.33%" class="td">订单信息</div>
29 <div style="width: 30.33%" class="td">联系方式</div>
30 </div>
31 <div class="tr">
32 <div style="width: 30.33%" class="td flex-col">
33 <div>2024.05.03 周六</div>
34 <div>A区 6排16座 (B6馆)</div>
35 <div>A区 6排16座 (B6馆)</div>
36 <div>A区 6排16座 (B6馆)</div>
37 </div>
38 <div style="width: 30.33%" class="td flex-col">
39 <div>订单编号：12783893435</div>
40 <div>创建时间：2024.05.07 16:3</div>
41 </div>
42 <div style="width: 30.33%" class="td">
43 <div>联系电话：12783893435</div>
44 </div>
45 </div>
46 </div>
47 <!-- 购票人 -->
48 <div class="pay_ticket">
49 <div class="title">购票人</div>
50 <div class="people">
51 <div v-for="(it, index) in 4" :key="index" class="p_info">
52 <div>张三</div>
53 <div class="idcard">身份证：244************0</div>
54 </div>
55 </div>
56 </div>
57 </div>
58
59 <div class="right">
60 <div class="balance">
61 <div class="title">结算信息</div>
62 <div class="cell">
63 <div class="label">订单状态</div>
64 <div class="value">待支付</div>
65 </div>
66 <div class="cell">
67 <div class="label">订单金额</div>
68 <div class="value">待支付</div>
69 </div>
70 <!-- button -->
71 <div class="btn_box">
72 <div class="can_pay">取消支付</div>
73 <div class="pay">立即支付</div>
74 </div>
75 </div>
76 <div class="tip">请尽快完成支付，还剩15分00秒</div>
77 </div>
78 </div>
79 </template>
80
81 <style scoped lang="scss">
82 .container {
83 width: 1200px;
84 margin: 0 auto;
85 padding: 20px 0;
86 display: flex;
87 gap: 20px;
88 .left {
89 width: 780px;
90 // 票务信息
91 .ticket {
92 background-color: #fff;
93 padding: 0 20px;
94 .th {
95 display: flex;
96 justify-content: space-between;
97 padding: 20px 0;
98 .td {
99 font-weight: bold;
100 font-size: 16px;
101 color: #333333;
102 line-height: 24px;
103 }
104 }
105 .line {
106 width: 740px;
107 height: 1px;
108 background: #eee;
109 }
110 .tr {
111 display: flex;
112 justify-content: space-between;
113 padding: 20px 0;
114 .td {
115 font-weight: 400;
116 font-size: 16px;
117 color: #333333;
118 line-height: 24px;
119 }
120 }
121 }
122 // 座位
123 .seat_box {
124 background-color: #fff;
125 padding: 0 20px;
126 margin-top: 20px;
127 .th {
128 display: flex;
129 justify-content: space-between;
130 padding: 20px 0;
131 .td {
132 font-weight: bold;
133 font-size: 16px;
134 color: #333333;
135 line-height: 24px;
136 }
137 }
138 .tr {
139 display: flex;
140 justify-content: space-between;
141 padding: 20px 0;
142 .td {
143 font-weight: 400;
144 font-size: 16px;
145 color: #333333;
146 line-height: 24px;
147 }
148 .flex-col {
149 display: flex;
150 flex-direction: column;
151 gap: 16px;
152 }
153 }
154 }
155 // 购票人
156 .pay_ticket {
157 background-color: #fff;
158 padding: 20px;
159 margin-top: 20px;
160 .title {
161 font-weight: bold;
162 font-size: 16px;
163 color: #333333;
164 margin-bottom: 28px;
165 }
166 .people {
167 display: flex;
168 justify-content: space-between;
169 flex-wrap: wrap;
170 gap: 15px 50px;
171 .p_info {
172 font-weight: 400;
173 font-size: 16px;
174 color: #333333;
175 line-height: 24px;
176 .idcard {
177 color: #999999;
178 }
179 }
180 }
181 }
182 }
183 .right {
184 width: 400px;
185 .balance {
186 background-color: #fff;
187 padding: 20px;
188 .title {
189 font-weight: bold;
190 font-size: 20px;
191 color: #333333;
192 line-height: 30px;
193 margin-bottom: 28px;
194 }
195 .cell {
196 display: flex;
197 justify-content: space-between;
198 align-items: center;
199 margin-bottom: 20px;
200 &:last-child {
201 margin: 0;
202 }
203 .label {
204 font-weight: 400;
205 font-size: 16px;
206 color: #333333;
207 }
208 .value {
209 font-weight: 400;
210 font-size: 16px;
211 color: #ff8124;
212 }
213 }
214 .btn_box {
215 border-top: 1px solid #eee;
216 padding-top: 20px;
217 display: flex;
218 gap: 20px;
219 .pay {
220 width: 170px;
221 height: 40px;
222 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
223 border-radius: 20px;
224 font-weight: 500;
225 font-size: 16px;
226 color: #ffffff;
227 line-height: 40px;
228 text-align: center;
229 cursor: pointer;
230 }
231 .can_pay {
232 width: 170px;
233 height: 40px;
234 background: #f6f6f6;
235 border-radius: 20px;
236 font-weight: 500;
237 font-size: 16px;
238 color: #999;
239 line-height: 40px;
240 text-align: center;
241 box-sizing: border-box;
242 cursor: pointer;
243 }
244 }
245 }
246 .tip {
247 font-weight: 400;
248 font-size: 16px;
249 color: #ea3d6b;
250 line-height: 24px;
251 margin-top: 20px;
252 text-align: center;
253 }
254 }
255 }
256 </style>
src/viewsPc/seat/order-list.vue 0 → 100644
1 <script setup>
2 const status = reactive({
3 0: {
4 txt: "待支付",
5 color: "#F740A6",
6 bgColor: "#FFE2F2",
7 },
8 1: {
9 txt: "已支付",
10 color: "#757575",
11 bgColor: "#DDDDDD",
12 },
13 2: {
14 txt: "未支付",
15 color: "#34C759",
16 bgColor: "#D2FFDD",
17 },
18 3: {
19 txt: "已退款",
20 color: "#FFCC00",
21 bgColor: "#FFF7D9",
22 },
23 });
24 </script>
25
26 <template>
27 <div class="container">
28 <div
29 v-for="(it, index) in 10"
30 :key="index"
31 @click="$router.push({ path: '/seat/order_detail' })"
32 class="order-item"
33 >
34 <div class="info_box">
35 <img class="cover_img" />
36 <div class="info">
37 <div class="title">2024年亚洲舞蹈大赛无锡站</div>
38 <div class="common">时间：2024.05.06 周六</div>
39 <div class="common">地址：无锡太湖博览中心</div>
40 <div class="common">订单编号：739274039504</div>
41 <div class="common">张数：2张</div>
42 <div class="common">金额：￥728.00</div>
43 <div class="status">
44 <div class="label">订单状态：</div>
45 <div class="value">
46 <div
47 :style="{
48 borderColor: status[0].color,
49 background: status[0].bgColor,
50 color: status[0].color,
51 }"
52 class="tag"
53 >
54 {{ status[0].txt }}
55 </div>
56 <div v-if="true" class="tip">请尽快完成支付，还剩15分00秒</div>
57 </div>
58 </div>
59 </div>
60 </div>
61 <div class="btn_box">
62 <div class="pay">立即支付</div>
63 <div class="can_pay">取消支付</div>
64 </div>
65 </div>
66 </div>
67 </template>
68
69 <style scoped lang="scss">
70 .container {
71 width: 1200px;
72 margin: 0 auto;
73 padding: 26px 0;
74 font-family: SourceHanSansCN, SourceHanSansCN;
75 .order-item {
76 display: flex;
77 justify-content: space-between;
78 align-items: center;
79 padding: 36px;
80 background: #fff;
81 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
82 border-radius: 8px;
83 margin-bottom: 30px;
84 .info_box {
85 display: flex;
86 gap: 20px;
87 .cover_img {
88 width: 155px;
89 height: 200px;
90 }
91 .info {
92 .title {
93 font-weight: bold;
94 font-size: 22px;
95 color: #000000;
96 line-height: 33px;
97 margin-bottom: 25px;
98 margin-bottom: 10px;
99 }
100 .common {
101 font-weight: 500;
102 font-size: 16px;
103 color: #4e4e4e;
104 margin-bottom: 6px;
105 }
106 .status {
107 display: flex;
108
109 .label {
110 font-weight: 500;
111 font-size: 16px;
112 color: #4e4e4e;
113 line-height: 24px;
114 }
115 .value {
116 display: flex;
117 align-items: center;
118 gap: 20px;
119 .tag {
120 padding: 6px 14px;
121 border-radius: 6px;
122 border: 1px solid #34c759;
123 }
124 .tip {
125 font-size: 16px;
126 color: #f740a6;
127 line-height: 24px;
128 }
129 }
130 }
131 }
132 }
133 .btn_box {
134 display: flex;
135 flex-direction: column;
136 gap: 12px;
137 .pay {
138 width: 175px;
139 height: 40px;
140 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
141 border-radius: 20px;
142 font-weight: 500;
143 font-size: 16px;
144 color: #ffffff;
145 line-height: 40px;
146 text-align: center;
147 cursor: pointer;
148 }
149 .can_pay {
150 width: 175px;
151 height: 40px;
152 background: #fff;
153 border-radius: 20px;
154 font-weight: 500;
155 font-size: 16px;
156 color: #493ceb;
157 line-height: 40px;
158 border: 1px solid #493ceb;
159 text-align: center;
160 box-sizing: border-box;
161 cursor: pointer;
162 }
163 }
164 }
165 }
166 </style>
src/viewsPc/seat/people-manage.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div class="container">
5 <div class="title">观影人管理</div>
6 <div class="content">
7 <div class="people_box">
8 <div v-for="(it, index) in 10" :key="index" class="people_item">
9 <div class="name">朱育杰</div>
10 <div class="idcard">身份证：244************074</div>
11 <div class="btn">删除</div>
12 </div>
13 </div>
14 </div>
15 </div>
16 </template>
17
18 <style scoped lang="scss">
19 div {
20 box-sizing: border-box;
21 }
22 .container {
23 padding: 20px 0;
24 width: 1200px;
25 margin: 0 auto;
26
27 .title {
28 padding: 11px;
29 text-align: center;
30 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
31 font-size: 18px;
32 color: #ffffff;
33 }
34
35 .content {
36 min-height: 590px;
37 background-color: #fff;
38 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
39 padding: 20px;
40 .people_box {
41 display: flex;
42 flex-wrap: wrap;
43 gap: 20px;
44 .people_item {
45 width: 275px;
46 height: 137px;
47 background: #ffffff;
48 border: 1px solid #dcdfe6;
49 padding: 16px;
50 .name {
51 font-weight: 600;
52 font-size: 16px;
53 color: #2d373f;
54 line-height: 22px;
55 }
56 .idcard {
57 font-size: 16px;
58 color: #95a1a6;
59 line-height: 22px;
60 margin-top: 12px;
61 margin-bottom: 17px;
62 }
63 .btn {
64 width: 69px;
65 height: 32px;
66 background: #e7e6ff;
67 font-weight: 400;
68 font-size: 16px;
69 color: #493ceb;
70 line-height: 32px;
71 text-align: center;
72 cursor: pointer;
73 user-select: none;
74 }
75 }
76 }
77 }
78 }
79 </style>
src/viewsPc/seat/seat.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div class="view">
5 <router-view />
6 </div>
7 </template>
8
9 <style scoped lang="scss">
10 .view {
11 min-width: 1024px;
12 max-width: 1920px;
13 margin: 0 auto;
14 }
15 </style>
src/viewsPc/seat/ticket-detail.vue 0 → 100644
1 <script setup></script>
2
3 <template>
4 <div>
5 <!-- top -->
6 <div class="container top">
7 <img class="cover_img" />
8 <div class="info">
9 <div class="title">2024年亚洲舞蹈大赛无锡站</div>
10 <div class="time">时间：2024.05.02 周六 — 2024.05.08 周一</div>
11 <div class="address">地址：无锡太湖博览中心</div>
12 <!-- 时间 -->
13 <div class="select_item_box">
14 <div class="label">时间</div>
15 <div class="select_item">
16 <div
17 v-for="(it, index) in 4"
18 :key="index"
19 :class="[false ? 'tagActive' : 'tag']"
20 >
21 2024.05.02 周六
22 </div>
23 </div>
24 </div>
25 <!-- 场次 -->
26 <div class="select_item_box">
27 <div class="label">场次</div>
28 <div class="select_item">
29 <div :class="[true ? 'tagDisabled' : false ? 'tagActive' : 'tag']">
30 日场
31 </div>
32 <div :class="[true ? 'tagDisabled' : false ? 'tagActive' : 'tag']">
33 日场
34 </div>
35 </div>
36 </div>
37 <!-- 场馆 -->
38 <div class="select_item_box">
39 <div class="label">场馆</div>
40 <div class="select_item">
41 <div
42 v-for="(it, index) in 2"
43 :key="index"
44 :class="[true ? 'tagDisabled' : false ? 'tagActive' : 'tag']"
45 >
46 B6
47 </div>
48 </div>
49 </div>
50 <!-- 票档 -->
51 <div class="select_item_box">
52 <div class="label">票档</div>
53 <div class="select_item">
54 <div
55 v-for="(it, index) in 3"
56 :key="index"
57 :class="[true ? 'tagDisabled' : false ? 'tagActive' : 'tag']"
58 >
59 200.00元
60 </div>
61 </div>
62 </div>
63 <!-- button -->
64 <div class="btn">选座购票</div>
65 </div>
66 </div>
67
68 <!-- bottom -->
69 <div class="container bottom">
70 <div class="title">活动介绍</div>
71 <div class="rich_content" v-html="'123123123123123123'"></div>
72
73 <div class="title" style="margin-top: 30px">购票须知</div>
74 <div class="rich_content" v-html="'123123123123123123'"></div>
75 </div>
76 </div>
77 </template>
78
79 <style scoped lang="scss">
80 .container {
81 width: 1200px;
82 margin: 0 auto;
83 background-color: #fff;
84 box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
85 border-radius: 8px;
86 box-sizing: border-box;
87 font-family: SourceHanSansCN, SourceHanSansCN;
88 padding-bottom: 20px;
89 }
90
91 .top {
92 display: flex;
93 padding: 19px;
94 margin-top: 26px;
95 .cover_img {
96 width: 390px;
97 height: 517px;
98 object-fit: fill;
99 margin-right: 36px;
100 }
101
102 .info {
103 padding-top: 12px;
104 .title {
105 font-weight: bold;
106 font-size: 28px;
107 color: #000000;
108 line-height: 42px;
109 margin-bottom: 34px;
110 }
111 .time {
112 font-weight: 500;
113 font-size: 16px;
114 color: #4a4a4a;
115 line-height: 24px;
116 margin-bottom: 16px;
117 }
118 .address {
119 font-weight: 500;
120 font-size: 16px;
121 color: #4a4a4a;
122 line-height: 24px;
123 margin-bottom: 33px;
124 }
125
126 .select_item_box {
127 display: flex;
128 margin-bottom: 30px;
129 &:last-child {
130 margin-bottom: 0;
131 }
132 .label {
133 font-weight: 600;
134 font-size: 16px;
135 color: #000;
136 line-height: 24px;
137 margin-right: 12px;
138 flex-shrink: 0;
139 }
140
141 .select_item {
142 display: flex;
143 flex-wrap: wrap;
144 gap: 10px;
145 .tag {
146 padding: 12px 18px;
147 background: #eeeeee;
148 border-radius: 4px;
149 border: 1px solid #29343c;
150 font-size: 14px;
151 color: #4a4a4a;
152 cursor: pointer;
153 }
154 .tagActive {
155 padding: 12px 18px;
156 background: #fff;
157 border-radius: 4px;
158 border: 1px solid #493ceb;
159 font-size: 14px;
160 color: #493ceb;
161 cursor: pointer;
162 }
163 .tagDisabled {
164 padding: 12px 18px;
165 background: #878787;
166 border-radius: 4px;
167 border: 1px solid #29343c;
168 font-size: 14px;
169 color: #4a4a4a;
170 cursor: no-drop;
171 }
172 }
173 }
174 .btn {
175 width: 175px;
176 height: 40px;
177 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
178 border-radius: 20px;
179 line-height: 40px;
180 text-align: center;
181 font-weight: 500;
182 font-size: 16px;
183 color: #ffffff;
184 cursor: pointer;
185 }
186 }
187 }
188
189 .bottom {
190 padding: 50px;
191 margin-top: 30px;
192 .title {
193 padding: 20px 30px;
194 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
195 font-weight: bold;
196 font-size: 20px;
197 color: #ffffff;
198 line-height: 30px;
199 margin-bottom: 30px;
200 }
201 .rich_content {
202 margin-top: 30px;
203 }
204 }
205 </style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!