diff --git a/src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue b/src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue index 64d4964e..85c3702b 100644 --- a/src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue +++ b/src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue @@ -1,20 +1,17 @@ @@ -335,25 +375,34 @@ export default { .text-line { width: 100%; font-family: PingFangSC-Regular; + font-weight: 400; font-size: 28px; color: #E55500; - line-height: 44px; - } - .text-content { - text-indent: 2em; + margin-bottom: 32px; + p{ + line-height: 44px; + word-break: break-all; + } + img { + width: 636px; + } + .text-center { + text-align: center; + } } .title-text { + line-height: 48px; font-family: PingFangSC-SNaNpxibold; font-weight: 600; - font-size: 32px; + font-size: 34px; color: #DC0000; - line-height: 44px; - margin: 30px 0 14px 0; + margin-bottom: 16px; } .qrcode-img { - width: 174px; - height: 174px; - margin-top: 30px; + display: inherit; + width: 240px; + height: 240px; + margin: 0 auto 32px; } .count-text { line-height: 40px; @@ -452,36 +501,37 @@ export default { } } .turntable-content { - width: 640px; - height: 888px; + width: 700px; + height: 960px; background-image: url('./img/turntable-bg.png'); background-size: 100% 100%; background-repeat: no-repeat; margin: 0 auto; position: relative; .turntable-btn { - width: 268px; - height: 84px; - line-height: 84px; + width: 296px; + height: 118px; + line-height: 100px; text-align: center; - margin-left: 28px; - color: #F30000; - background-color: #FFCF75; - border-radius: 42px; - font-size: 34px; + background-image: url('./img/active-btn-bg.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + font-family: PingFangSC-SNaNpxibold; font-weight: 600; + font-size: 40px; + color: #DC0000; position: absolute; - bottom: 176px; + bottom: 164px; left: 50%; - margin-left: -134px; + margin-left: -148px; } .turntable { position: relative; - top: 68px; + top: 74px; margin: 0 auto; background: #fff; - height: 500px; - width: 500px; + height: 538px; + width: 538px; border-radius: 50%; text-align: center; overflow: hidden; @@ -493,28 +543,29 @@ export default { top: 0; left: 50%; margin: 0 0 0 -60px; - transform-origin: 60px 250px; + transform-origin: 60px 269px; font-size: 20px; padding-top: 40px; box-sizing: border-box; + color: #E55500; } .cell-img { - width: 50px; - height: 50px; - margin-top: 32px; + width: 80px; + // height: 80px; + margin-top: 10px; } .sector { - width: 500px; - height: 500px; + width: 538px; + height: 538px; position: absolute; - clip: rect(0 500px 500px 250px); + clip: rect(0 538px 538px 269px); overflow: hidden; } .inner { width: 100%; height: 100%; position: absolute; - clip: rect(0 250px 500px 0); + clip: rect(0 269px 538px 0); transform: rotate(60deg); border-radius: 50%; background-color: #FFE3B8; @@ -527,36 +578,60 @@ export default { } .point-img { position: absolute; - width: 112px; - height: 160px; - top: 228px; + width: 120px; + top: 250px; left: 50%; margin-left: -56px; } } .lucky-list { - width: 100%; + width: calc(100% - 64px); background: #FFDEAC; border: 2px solid #FFAE32; border-radius: 28px; padding: 22px; box-sizing: border-box; + position: absolute; + top: 920px; + left: 32px; + z-index: 99; } + .mar-b0 { + margin-bottom: 0; + } + } + .mar-b48 { + margin-bottom: 48px; } .pad-lf18 { padding: 64px 18px 48px; } + .pad-b120 { + padding: 24px 0 134px; + } + .pad-b48{ + padding: 24px 0 28px; + } .share-bottom-btn { - width: calc(100% - 56px); - height: 84px; - line-height: 84px; + width: calc(100% - 24px); + margin-left: 12px; + height: 120px; + line-height: 100px; text-align: center; - margin-left: 28px; - color: #F30000; - background-color: #FFCF75; - border-radius: 42px; - font-size: 34px; + font-family: PingFangSC-SNaNpxibold; font-weight: 600; + font-size: 40px; + color: #DC0000; + background-image: url('./img/share-btn-bg.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + } + + .sign-btn { + position: fixed; + bottom: 200px; + right: 24px; + width: 160px; } } diff --git a/src/project/activeAnalysis/AppLuckyDraw/img/active-btn-bg.png b/src/project/activeAnalysis/AppLuckyDraw/img/active-btn-bg.png new file mode 100644 index 00000000..6be0b3e0 Binary files /dev/null and b/src/project/activeAnalysis/AppLuckyDraw/img/active-btn-bg.png differ diff --git a/src/project/activeAnalysis/AppLuckyDraw/img/content-img.png b/src/project/activeAnalysis/AppLuckyDraw/img/content-img.png new file mode 100644 index 00000000..7b2bad10 Binary files /dev/null and b/src/project/activeAnalysis/AppLuckyDraw/img/content-img.png differ diff --git a/src/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png b/src/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png index df9512e9..c0d33bfc 100644 Binary files a/src/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png and b/src/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png differ diff --git a/src/project/activeAnalysis/AppLuckyDraw/img/share-btn-bg.png b/src/project/activeAnalysis/AppLuckyDraw/img/share-btn-bg.png new file mode 100644 index 00000000..ae1408bb Binary files /dev/null and b/src/project/activeAnalysis/AppLuckyDraw/img/share-btn-bg.png differ diff --git a/src/project/activeAnalysis/AppLuckyDraw/img/sign-btn.png b/src/project/activeAnalysis/AppLuckyDraw/img/sign-btn.png new file mode 100644 index 00000000..7c2fa90a Binary files /dev/null and b/src/project/activeAnalysis/AppLuckyDraw/img/sign-btn.png differ