From 181a62b159564cc4f5103c071481884d7d1f96f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=20=E5=85=83=E5=B1=B1?= Date: Fri, 27 Oct 2023 16:43:30 +0800 Subject: [PATCH] add ticket --- App.vue | 34 +- common/default.scss | 681 +++++++++++++++++++ components/fl-page-header/fl-page-header.vue | 73 ++ components/my-tabbar/my-tabbar.vue | 84 +-- pages.json | 29 +- pages/start.vue | 35 + pages/ticket/elector.vue | 0 pages/ticket/index.vue | 160 +++++ pages/ticket/reserve.vue | 0 static/bg-common.png | Bin 0 -> 1379956 bytes static/bg-start.png | Bin 0 -> 528568 bytes static/icon-ticket.png | Bin 0 -> 1180 bytes static/pageData.json | 98 +++ util/form.js | 290 ++++++++ 14 files changed, 1418 insertions(+), 66 deletions(-) create mode 100644 common/default.scss create mode 100644 components/fl-page-header/fl-page-header.vue create mode 100644 pages/start.vue create mode 100644 pages/ticket/elector.vue create mode 100644 pages/ticket/index.vue create mode 100644 pages/ticket/reserve.vue create mode 100644 static/bg-common.png create mode 100644 static/bg-start.png create mode 100644 static/icon-ticket.png create mode 100644 static/pageData.json create mode 100644 util/form.js diff --git a/App.vue b/App.vue index 6ddce7f..cbf9722 100644 --- a/App.vue +++ b/App.vue @@ -1,19 +1,25 @@ diff --git a/common/default.scss b/common/default.scss new file mode 100644 index 0000000..ebd5f0e --- /dev/null +++ b/common/default.scss @@ -0,0 +1,681 @@ +.flex, +.row { + display: flex; + flex-wrap: wrap; +} +.flex > .col, +.flex > .col-0, +.flex > .col-1, +.flex > .col-2, +.flex > .col-3, +.flex > .col-4, +.flex > .col-5, +.flex > .col-6, +.flex > .col-7, +.flex > .col-8, +.flex > .col-9, +.flex > .col-10, +.flex > .col-11, +.flex > .col-12, +.flex > .col-auto, +.flex > .col-grow, +.flex > .col-shrink, +.flex > .col-xs, +.flex > .col-xs-0, +.flex > .col-xs-1, +.flex > .col-xs-2, +.flex > .col-xs-3, +.flex > .col-xs-4, +.flex > .col-xs-5, +.flex > .col-xs-6, +.flex > .col-xs-7, +.flex > .col-xs-8, +.flex > .col-xs-9, +.flex > .col-xs-10, +.flex > .col-xs-11, +.flex > .col-xs-12, +.flex > .col-xs-auto, +.flex > .col-xs-grow, +.flex > .col-xs-shrink, +.row > .col, +.row > .col-0, +.row > .col-1, +.row > .col-2, +.row > .col-3, +.row > .col-4, +.row > .col-5, +.row > .col-6, +.row > .col-7, +.row > .col-8, +.row > .col-9, +.row > .col-10, +.row > .col-11, +.row > .col-12, +.row > .col-auto, +.row > .col-grow, +.row > .col-shrink, +.row > .col-xs, +.row > .col-xs-0, +.row > .col-xs-1, +.row > .col-xs-2, +.row > .col-xs-3, +.row > .col-xs-4, +.row > .col-xs-5, +.row > .col-xs-6, +.row > .col-xs-7, +.row > .col-xs-8, +.row > .col-xs-9, +.row > .col-xs-10, +.row > .col-xs-11, +.row > .col-xs-12, +.row > .col-xs-auto, +.row > .col-xs-grow, +.row > .col-xs-shrink { + width: auto; + min-width: 0; + max-width: 100%; +} +.flex > .col, +.flex > .col-0, +.flex > .col-1, +.flex > .col-2, +.flex > .col-3, +.flex > .col-4, +.flex > .col-5, +.flex > .col-6, +.flex > .col-7, +.flex > .col-8, +.flex > .col-9, +.flex > .col-10, +.flex > .col-11, +.flex > .col-12, +.flex > .col-auto, +.flex > .col-grow, +.flex > .col-shrink, +.flex > .col-xs, +.flex > .col-xs-0, +.flex > .col-xs-1, +.flex > .col-xs-2, +.flex > .col-xs-3, +.flex > .col-xs-4, +.flex > .col-xs-5, +.flex > .col-xs-6, +.flex > .col-xs-7, +.flex > .col-xs-8, +.flex > .col-xs-9, +.flex > .col-xs-10, +.flex > .col-xs-11, +.flex > .col-xs-12, +.flex > .col-xs-auto, +.flex > .col-xs-grow, +.flex > .col-xs-shrink { + height: auto; + min-height: 0; + max-height: 100%; +} +.col, +.col-xs { + flex: 10000 1 0%; +} +.col-0, +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12, +.col-auto, +.col-xs-0, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-auto { + flex: 0 0 auto; +} +.col-grow, +.col-xs-grow { + flex: 1 0 auto; +} +.col-shrink, +.col-xs-shrink { + flex: 0 1 auto; +} +.row > .col-0, +.row > .col-xs-0 { + height: auto; + width: 0%; +} +.row > .offset-0, +.row > .offset-xs-0 { + margin-left: 0%; +} +.row > .col-1, +.row > .col-xs-1 { + height: auto; + width: 8.3333%; +} +.row > .offset-1, +.row > .offset-xs-1 { + margin-left: 8.3333%; +} +.row > .col-2, +.row > .col-xs-2 { + height: auto; + width: 16.6667%; +} +.row > .offset-2, +.row > .offset-xs-2 { + margin-left: 16.6667%; +} +.row > .col-3, +.row > .col-xs-3 { + height: auto; + width: 25%; +} +.row > .offset-3, +.row > .offset-xs-3 { + margin-left: 25%; +} +.row > .col-4, +.row > .col-xs-4 { + height: auto; + width: 33.3333%; +} +.row > .offset-4, +.row > .offset-xs-4 { + margin-left: 33.3333%; +} +.row > .col-5, +.row > .col-xs-5 { + height: auto; + width: 41.6667%; +} +.row > .offset-5, +.row > .offset-xs-5 { + margin-left: 41.6667%; +} +.row > .col-6, +.row > .col-xs-6 { + height: auto; + width: 50%; +} +.row > .offset-6, +.row > .offset-xs-6 { + margin-left: 50%; +} +.row > .col-7, +.row > .col-xs-7 { + height: auto; + width: 58.3333%; +} +.row > .offset-7, +.row > .offset-xs-7 { + margin-left: 58.3333%; +} +.row > .col-8, +.row > .col-xs-8 { + height: auto; + width: 66.6667%; +} +.row > .offset-8, +.row > .offset-xs-8 { + margin-left: 66.6667%; +} +.row > .col-9, +.row > .col-xs-9 { + height: auto; + width: 75%; +} +.row > .offset-9, +.row > .offset-xs-9 { + margin-left: 75%; +} +.row > .col-10, +.row > .col-xs-10 { + height: auto; + width: 83.3333%; +} +.row > .offset-10, +.row > .offset-xs-10 { + margin-left: 83.3333%; +} +.row > .col-11, +.row > .col-xs-11 { + height: auto; + width: 91.6667%; +} +.row > .offset-11, +.row > .offset-xs-11 { + margin-left: 91.6667%; +} +.row > .col-12, +.row > .col-xs-12 { + height: auto; + width: 100%; +} +.row > .offset-12, +.row > .offset-xs-12 { + margin-left: 100%; +} +.row > .col-all { + height: auto; + flex: 0 0 100%; +} +.cursor { + cursor: pointer; +} + +.link-cursor { + cursor: pointer; + text-decoration: underline; + color: #027be3; +} + +.bg-grey { + background: #c7bfbf !important; +} + +.bg-primary { + background-color: #3aace8 !important; +} + +.bg-danger { + background-color: #ef136e; +} +.bg-231 { + background-color: #e7e7e7; +} +.bg-blue { + background: #2196f3 !important; +} +.h-100 { + height: 100vh; +} +.w-100 { + width: 100vw; +} +.height-100 { + height: 100%; +} +.width-100 { + width: 100%; +} +.fl-page-width { + max-width: 1200px; + margin: auto; +} + +.relative { + position: relative; +} +.absolute { + position: absolute; +} + +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.overflow-auto { + overflow: auto; +} +/*下三角*/ +.tip-bottom { + position: relative; + /*设置圆角*/ + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.tip-bottom:after { + content: ""; + display: block; + border-width: 25px; + position: absolute; + bottom: -30px; + left: 50px; + border-style: solid dashed dashed solid; + border-color: rgb(255, 255, 255) transparent transparent transparent; + font-size: 0; + line-height: 0; + transform: rotate(224deg); +} + +.tip-bottom:after { + bottom: -20px; +} +.text-center { + text-align: center !important; +} +.text-right { + text-align: right !important; +} +.text-left { + text-align: left !important; +} +.align-center { + align-items: center; +} + +.flex-wrap { + flex-wrap: wrap; +} +.column { + flex-direction: column; +} +.items-start { + align-items: flex-start !important; +} +.justify-between { + justify-content: space-between; +} +.justify-around { + justify-content: space-around; +} +.justify-end { + justify-content: flex-end; +} +.justify-center { + justify-content: center; +} + +.fl-pa-sm { + padding: 8px !important; +} +.fl-pb-xs { + padding-bottom: 4px !important; +} +.fl-mx-xs { + margin-left: 4px !important; + margin-right: 4px !important; +} +.fl-my-xs { + margin-top: 4px !important; + margin-bottom: 4px !important; +} +.fl-ml-xs { + margin-left: 4px !important; +} +.fl-mt-xs { + margin-top: 4px !important; +} +.fl-pt-xs { + padding-top: 4px !important; +} +.fl-pl-xs { + padding-left: 4px !important; +} +.fl-pl-sm { + padding-left: 8px !important; +} + +.fl-pr-sm { + padding-right: 8px !important; +} + +.fl-pt-sm { + padding-top: 8px !important; +} + +.fl-pb-sm { + padding-bottom: 8px !important; +} + +.fl-px-sm { + padding-left: 8px !important; + padding-right: 8px !important; +} +.fl-px-xs { + padding-left: 4px !important; + padding-right: 4px !important; +} + +.fl-py-sm { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.fl-pa-md { + padding: 16px !important; +} +.fl-pl-md { + padding-left: 16px !important; +} + +.fl-pr-md { + padding-right: 16px !important; +} + +.fl-pt-md { + padding-top: 16px !important; +} + +.fl-pb-md { + padding-bottom: 16px !important; +} + +.fl-px-md { + padding-left: 16px !important; + padding-right: 16px !important; +} + +.fl-py-md { + padding-top: 16px !important; + padding-bottom: 16px !important; +} + +.fl-pa-lg { + padding: 24px !important; +} +.fl-pl-lg { + padding-left: 24px !important; +} + +.fl-pr-lg { + padding-right: 24px !important; +} + +.fl-pt-lg { + padding-top: 24px !important; +} + +.fl-pb-lg { + padding-bottom: 24px !important; +} + +.fl-px-lg { + padding-left: 24px !important; + padding-right: 24px !important; +} + +.fl-py-lg { + padding-top: 24px !important; + padding-bottom: 24px !important; +} + +.fl-ma-sm { + margin: 8px !important; +} +.fl-ma-xs { + margin: 4px !important; +} +.fl-ml-sm { + margin-left: 8px !important; +} + +.fl-mr-sm { + margin-right: 8px !important; +} + +.fl-mt-sm { + margin-top: 8px !important; +} + +.fl-mb-sm { + margin-bottom: 8px !important; +} + +.fl-mx-sm { + margin-left: 8px !important; + margin-right: 8px !important; +} + +.fl-my-sm { + margin-top: 8px !important; + margin-bottom: 8px !important; +} + +.fl-ma-md { + margin: 16px !important; +} +.fl-ml-md { + margin-left: 16px !important; +} + +.fl-mr-md { + margin-right: 16px !important; +} + +.fl-mt-md { + margin-top: 16px !important; +} + +.fl-mb-md { + margin-bottom: 16px !important; +} + +.fl-mx-md { + margin-left: 16px !important; + margin-right: 16px !important; +} + +.fl-my-md { + margin-top: 16px !important; + margin-bottom: 16px !important; +} + +.fl-ma-lg { + margin: 24px !important; +} +.fl-ml-lg { + margin-left: 24px !important; +} + +.fl-mr-lg { + margin-right: 24px !important; +} + +.fl-mt-lg { + margin-top: 24px !important; +} + +.fl-mb-lg { + margin-bottom: 24px !important; +} + +.fl-mx-lg { + margin-left: 24px !important; + margin-right: 24px !important; +} + +.fl-my-lg { + margin-top: 24px !important; + margin-bottom: 24px !important; +} +.justify-start { + justify-content: flex-start; +} +.justify-end { + justify-content: flex-end; +} +.justify-center, +.flex-center { + justify-content: center; +} +.justify-between { + justify-content: space-between; +} +.justify-around { + justify-content: space-around; +} +.justify-evenly { + justify-content: space-evenly; +} + +.items-start { + align-items: flex-start; +} +.items-end { + align-items: flex-end; +} +.items-center, +.flex-center { + align-items: center; +} +.items-baseline { + align-items: baseline; +} +.items-stretch { + align-items: stretch; +} + +.box-border { + box-sizing: border-box; +} +.box-content { + box-sizing: content-box; +} +.width-140 { + width: 280rpx; +} +.width-300 { + width: 600rpx; +} +.no-shadow { + box-shadow: none !important; +} +.border-20 { + border-radius: 20rpx; +} + +.fl-link { + cursor: pointer; + text-decoration: underline; + color: #027be3; +} +.border-radius-4 { + border-radius: 4px !important; +} + +.border-radius-8 { + border-radius: 8px !important; +} + +.border-radius-16 { + border-radius: 16px !important; +} + +.margin-auto { + margin: auto; +} +.status_bar { + height: var(--status-bar-height); + width: 100%; +} diff --git a/components/fl-page-header/fl-page-header.vue b/components/fl-page-header/fl-page-header.vue new file mode 100644 index 0000000..9130527 --- /dev/null +++ b/components/fl-page-header/fl-page-header.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/components/my-tabbar/my-tabbar.vue b/components/my-tabbar/my-tabbar.vue index 17e0b92..d2ceb9d 100644 --- a/components/my-tabbar/my-tabbar.vue +++ b/components/my-tabbar/my-tabbar.vue @@ -1,41 +1,31 @@