From a41348f1a247c7027bca376b956b28715da6e382 Mon Sep 17 00:00:00 2001 From: zhangguoping Date: Wed, 28 Aug 2024 16:54:52 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BA=A2=E5=8C=85=EF=BC=8C=E7=AB=8B=E5=87=8F?= =?UTF-8?q?=E9=87=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- public/index.html | 3 +- src/router/index.ts | 8 + src/views/cash/index.scss | 170 ++++++++++++++ src/views/cash/index.vue | 394 ++++++++++++++++++++++++++++++++ src/views/voucher/index.scss | 170 ++++++++++++++ src/views/voucher/index.vue | 431 +++++++++++++++++++++++++++++++++++ 7 files changed, 1176 insertions(+), 2 deletions(-) create mode 100644 src/views/cash/index.scss create mode 100644 src/views/cash/index.vue create mode 100644 src/views/voucher/index.scss create mode 100644 src/views/voucher/index.vue diff --git a/package.json b/package.json index 2c49dbc..3ec0228 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "start": "webpack-dev-server --config build/webpack.dev.js", + "start": "webpack-dev-server --open --config build/webpack.dev.js", "com": "cross-env NODE_ENV=development webpack --config build/webpack.com.js", "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.js", "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js" diff --git a/public/index.html b/public/index.html index 8d8af10..6ff4606 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,8 @@ - + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/router/index.ts b/src/router/index.ts index f74ca7a..93e4823 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -16,6 +16,14 @@ const routes = [ { path: '/comProduct', component: () => import('../views/comProduct/index.vue') + }, + { + path: '/cash', + component: () => import('../views/cash/index.vue') + }, + { + path: '/voucher', + component: () => import('../views/voucher/index.vue') } ] diff --git a/src/views/cash/index.scss b/src/views/cash/index.scss new file mode 100644 index 0000000..8f00906 --- /dev/null +++ b/src/views/cash/index.scss @@ -0,0 +1,170 @@ +#redPacketsViews { + // height: 6rem !important; + background: #f4f6f9; + overflow-y: auto; + display: flex; + flex-direction: column; + height: 100%; + min-height: 100%; + background-color: rgb(250, 67, 59); +} + +#redPacketsViews ::-webkit-scrollbar { + display: none; +} + +#redPacketsViews .top { + height: 505px; +} + +#redPacketsViews .box { + padding: 10px 10px 20px; + box-sizing: border-box; + flex: 1; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_main_1.png") no-repeat; + background-size: 100%; +} + +#redPacketsViews .instruction-box { + width: 100%; + display: flex; + flex-direction: column; +} + +#redPacketsViews .effect_date { + font-size: 12px; + line-height: 40px; + color: #ffc49c; + text-align: center; +} + +#redPacketsViews .effect_date>span { + background: linear-gradient(to left top, #ff6049, #fd322a); + border: 1px solid #ffc3a5; + border-radius: 20px; + padding: 5px 20px; +} + +#redPacketsViews .bt { + width: 200px; + height: 46px; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/but_back_img.png"); + background-size: 100% 100%; + margin: 0 auto; + margin-top: 100px; + text-align: center; + line-height: 42px; + color: #df1104; + font-size: 16px; + font-weight: bold; +} + +#redPacketsViews .title { + margin-top: 30px; + font-size: 25px; + color: #fff; + font-weight: bold; + text-align: center; +} + +#redPacketsViews .type { + color: #fd3b2d; + font-size: 10px; + text-align: center; +} + +#redPacketsViews .type>span { + background-color: #fdc9a2; + border-radius: 20px; + padding: 3px 15px; +} + +#redPacketsViews .money { + font-weight: bold; + color: #fe0f0b; + font-size: 32px; + height: 97px; + width: 100%; + text-align: center; + margin-left: -2px; + line-height: 140px; +} + +#redPacketsViews .tag { + display: inline; +} + +#redPacketsViews .instruction-text { + font-weight: bold; + font-size: 12px; + color: #060606; +} + +#redPacketsViews .available_time { + text-align: left; +} + +#redPacketsViews .timeList { + display: grid; + grid-template-columns: repeat(3, 33.33%); + text-align: center; + margin: 5px 0; +} + +#redPacketsViews .timeList li { + font-size: 11px; + color: #a8a8a8; +} + +#redPacketsViews .scroll { + margin-top: 5px; +} + +#redPacketsViews .instruction-header { + width: 100%; + height: 43px; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_header.png") no-repeat; + background-size: 100%; + margin-bottom: -3px; +} + +#redPacketsViews .instruction { + width: 100%; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_text.png") no-repeat; + min-height: 450px; + background-size: 100% 100%; + font-size: 11px; + color: #959595; + padding: 0 12px 12px; + box-sizing: border-box; + line-height: 18px; +} + +#redPacketsViews .TextBlock { + margin-top: 10px; +} + +#redPacketsViews .notice { + width: 160px; + margin-bottom: 10px; +} + +#redPacketsViews .instruction-2 { + margin-top: 10px; +} + +#redPacketsViews .center { + text-align: center; +} + +#redPacketsViews .backIcon { + width: 40px; + position: fixed; + left: 10px; + top: 10px; + z-index: 1001; +} \ No newline at end of file diff --git a/src/views/cash/index.vue b/src/views/cash/index.vue new file mode 100644 index 0000000..7900942 --- /dev/null +++ b/src/views/cash/index.vue @@ -0,0 +1,394 @@ + + diff --git a/src/views/voucher/index.scss b/src/views/voucher/index.scss new file mode 100644 index 0000000..f000a05 --- /dev/null +++ b/src/views/voucher/index.scss @@ -0,0 +1,170 @@ +#reduce { + // height: 6rem !important; + background: #f4f6f9; + overflow-y: auto; + display: flex; + flex-direction: column; + height: 100%; + min-height: 100%; + background-color: rgb(250, 67, 59); +} + +#reduce { + background: #fff; + padding: 21px 0; + box-sizing: border-box; + font-size: 14px; + overflow-y: scroll; +} + +.readOnly { + filter: grayscale(1); +} + +#reduce .couponShow { + width: 94%; + margin: 0 auto; + max-height: 120px; + min-height: 90px; + display: flex; + justify-content: space-between; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/reduce/coupon.png"); + background-size: 100% 100%; +} + +#reduce .countdown { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + margin-bottom: 20px; + background: red; +} + +#reduce .countdown p { + margin: 5px; + background-size: 100% 100%; + min-width: 18px; + padding: 2.8px; + color: #fff; + font-weight: bold; + font-size: 16px; +} + +#reduce .countdown span { + color: #fff; + margin: 0; +} + +#reduce .coupon-left { + flex: 1; + display: flex; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + color: #ffffff; +} + +#reduce .coupon_money { + font-weight: bold; + margin: 0 auto; +} + +#reduce .coupon_money>span { + font-size: 15px; +} + +#reduce .full_money { + margin: 0 auto; + font-size: 12px; + margin-top: 1px; +} + +#reduce .coupon-right { + width: 250px; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 12px; + box-sizing: border-box; + color: #d18d6f; + font-size: 10px; +} + +#reduce .coupon-right>p { + margin: 0; + margin: 4px 0; +} + +#reduce .title { + color: #cd4236; + font-size: 15px; + font-weight: bold; +} + +#reduce .send_num { + font-size: 14px; + color: #f4342b; +} + +#reduce .coupon-right .validity { + font-size: 9px; + color: #cc9590; +} + +#reduce .receiveBtn { + width: 178px; + height: 46px; + background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/reduce/btnbg.png") no-repeat 100% 100% / cover; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + color: #ab582f; + font-weight: bold; + margin: 24px auto; +} + +#reduce .coupon_explain { + margin: 0 auto; + border-top: 2px dashed #f1f1f1; +} + +/*说明*/ +#reduce .coupon_explain { + width: 100%; + text-align: center; +} + +#reduce .backIcon { + width: 40px; + position: absolute; + top: 10px; +} + +#reduce .coupon_explain>h1 { + font-size: 16px; + color: #171717; + margin: 33px; +} + +#reduce .coupon_explain .content { + width: 94%; + margin: 0 auto; + text-align: justify; + line-height: 22px; + color: #a8a8a8; + font-size: 12px; + margin-bottom: 27px; +} + +#reduce .coupon_explain .content>h3 { + font-size: 13px; + color: #171717; + padding-bottom: 11px; +} + +h3, +h1 { + font-weight: bold; +} \ No newline at end of file diff --git a/src/views/voucher/index.vue b/src/views/voucher/index.vue new file mode 100644 index 0000000..b718433 --- /dev/null +++ b/src/views/voucher/index.vue @@ -0,0 +1,431 @@ + +