Last active
June 19, 2020 13:48
-
-
Save greenyleaf/59deff90f41b0ce1f4f7292da99c71f4 to your computer and use it in GitHub Desktop.
a mobile page Freemarker template of coupons list, used a little CSS3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="applicable-device" content="mobile"> | |
| <meta name="screen-orientation" content="portrait"> | |
| <title>我的优惠券</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12/css/all.min.css"/> | |
| <link href="/css/front-coupon.css" rel="stylesheet"/> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.4/dist/jquery.min.js"></script> | |
| <script src="/vendor/layer/mobile/layer.js"></script> | |
| <style> | |
| .coupon-item { | |
| display: flex; | |
| align-items: stretch; | |
| color: white; | |
| } | |
| .coupon-item + .coupon-item { | |
| margin-top: 9pt; | |
| } | |
| .coupon-left { | |
| background-color: rgb(194, 27, 27); | |
| width: max-content; | |
| min-width: 68pt; | |
| position: relative; | |
| padding: 0 10pt; | |
| text-align: center; | |
| } | |
| .coupon-right { | |
| background-color: rgb(74, 99, 114); | |
| flex-grow: 1; | |
| padding: 0 10pt; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .coupon-left:before, .coupon-right:after { | |
| content: ""; | |
| position: absolute; | |
| top: 4pt; | |
| height: 89pt; | |
| width: 5pt; | |
| background: radial-gradient(closest-side, #fff, #fff 66.67%, transparent 66.67%) repeat-y; | |
| background-size: 10pt 10pt; | |
| } | |
| .coupon-left:before { | |
| left: 0; | |
| background-position: -5pt 0; | |
| } | |
| .coupon-right:after { | |
| right: 0; | |
| } | |
| .coupon-left:after, .coupon-right:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| width: 5pt; | |
| background: radial-gradient(closest-side, #fff, #fff 66.67%, transparent 66.67%) repeat-y; | |
| background-size: 10pt 10pt; | |
| } | |
| .coupon-left:after { | |
| right: 0; | |
| background-position: 0 -5pt; | |
| } | |
| .coupon-right:before { | |
| left: 0; | |
| background-position: -5pt -5pt; | |
| } | |
| .discount-text { | |
| white-space: nowrap; | |
| margin-top: 9pt; | |
| } | |
| .number-discount { | |
| font-size: 48pt; | |
| line-height: 48pt; | |
| font-family: arial, monospace; | |
| font-weight: normal; | |
| } | |
| .discount-unit { | |
| font-size: 13.5pt; | |
| } | |
| .over-text { | |
| margin: 13.05pt 0 14.75pt; | |
| line-height: 10.5pt; | |
| font-size: 10.5pt; | |
| } | |
| .coupon-name { | |
| font-size: 16pt; | |
| line-height: 16pt; | |
| margin: 13pt 0 4pt; | |
| } | |
| .coupon-introduction { | |
| font-size: 10.5pt; | |
| line-height: 17pt; | |
| min-height: calc(17pt * 2); | |
| flex-grow: 1; | |
| } | |
| .coupon-right-bottom { | |
| display: flex; | |
| } | |
| .coupon-end { | |
| font-size: 10.5pt; | |
| line-height: 17pt; | |
| flex-grow: 1; | |
| margin-bottom: 11.5pt; | |
| } | |
| .coupon-use-btn { | |
| border-radius: 3pt; | |
| background: rgb(255, 127, 0); | |
| color: antiquewhite; | |
| border: none; | |
| padding: 3.2pt 0; | |
| width: 48pt; | |
| font-size: 9pt; | |
| line-height: 9pt; | |
| align-self: flex-end; | |
| margin-bottom: 6pt; | |
| } | |
| .coupon-use-btn:disabled { | |
| filter: grayscale(95%); | |
| } | |
| </style> | |
| <script> | |
| </script> | |
| </head> | |
| <body> | |
| <div class="main-content"> | |
| <#list myCoupons.data as issueRecord> | |
| <div class="coupon-item"> | |
| <div class="coupon-left"> | |
| <div class="discount-text"> | |
| <span class="number-discount">${issueRecord.coupon.discount}</span><span | |
| class="discount-unit">元</span> | |
| </div> | |
| <div class="over-text">满${issueRecord.coupon.over}元可用</div> | |
| </div> | |
| <div class="coupon-right"> | |
| <div class="coupon-name">${issueRecord.coupon.name}</div> | |
| <div class="coupon-introduction">${issueRecord.coupon.introduction}</div> | |
| <div class="coupon-right-bottom"> | |
| <div class="coupon-end">${issueRecord.coupon.end?date}过期</div> | |
| <button class="coupon-use-btn" ${issueRecord.used?string('disabled','')}>${issueRecord.used?string('已使用','使用')}</button> | |
| </div> | |
| </div> | |
| </div> | |
| </#list> | |
| </div> | |
| <div class="page"> | |
| <span>第${page}页 共${total}页</span> | |
| <a href="/my-coupons">首页</a> | |
| <a href="/my-coupons${(page-1 gt 1)?then('/'+(page-1),'')}">上一页</a> | |
| <a href="/my-coupons${(page+1 lt total)?then('/'+(page+1),(total gt 1)?then('/'+total,''))}">下一页</a> | |
| <a href="/my-coupons${(total gt 1)?then('/'+total,'')}">尾页</a> | |
| </div> | |
| <div class="bottom-toolbar"> | |
| <a class="bottom-toolbar-item" href="/coupon-list"> | |
| <div class="bottom-toolbar-item-icon"><i class="fas fa-receipt"></i></div> | |
| <div class="bottom-toolbar-item-text">优惠券</div> | |
| </a> | |
| <a class="bottom-toolbar-item" href="/my-coupons"> | |
| <div class="bottom-toolbar-item-icon"><i class="far fa-user-circle"></i></div> | |
| <div class="bottom-toolbar-item-text">我的</div> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment