Skip to content

M
mongo-ui
Commit 9b841f1b authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

feature: 添加抽奖活动

parent ba1be9d7
Show whitespace changes
Inline Side-by-side
Showing with 1668 additions and 20 deletions
src/assets/icons/svg/retest.svg 0 → 100644
View file @ 9b841f1b
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>智能测评报告</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智能测评报告" transform="translate(-142.000000, -1828.000000)" fill-rule="nonzero">
<g id="Group-4" transform="translate(123.000000, 1817.000000)">
<g id="编组" transform="translate(19.000000, 9.000000)">
<g id="刷新" transform="translate(0.000000, 2.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="1" y="1" width="16" height="16"></rect>
<path d="M15.3883125,9.86975 C14.9662812,13.0226875 12.2659219,15.4544375 8.99748437,15.4544375 C6.63620312,15.4544375 4.5715,14.1851719 3.44810937,12.29175 L4.63720312,11.1026563 L1.85390625,11.1026563 L1.85390625,13.8859531 L2.88276562,12.8570938 C4.162375,14.8847656 6.42259375,16.2316719 8.9975,16.2316719 C12.6957812,16.2316719 15.745,13.4531406 16.1718125,9.86975 L15.3883125,9.86975 L15.3883125,9.86975 Z M8.99748437,2.557875 C11.2990156,2.557875 13.3187812,3.76373438 14.4597812,5.57804688 L13.372875,6.66495313 L16.1561562,6.66495313 L16.1561562,3.88167188 L15.1032187,4.93460938 L15.0219375,5.01589063 C13.7280156,3.06609375 11.5129219,1.780625 8.99748437,1.780625 C5.29920312,1.780625 2.24998437,4.55915625 1.82317187,8.14254688 L2.60667187,8.14254688 C3.02870312,4.989625 5.72904687,2.557875 8.99748437,2.557875 Z" id="形状" fill="#999999"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/understand-not.svg 0 → 100644
View file @ 9b841f1b
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="92.843376%" y1="61.7618573%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#747AFF" offset="0%"></stop>
<stop stop-color="#C3C6FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.2523376%" y1="70.2276035%" x2="85.8062056%" y2="70.2276035%" id="linearGradient-2">
<stop stop-color="#FFCEC7" offset="0%"></stop>
<stop stop-color="#FFA096" offset="100%"></stop>
</linearGradient>
</defs>
<g id="运营" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="投票弹窗" transform="translate(-238.000000, -316.000000)" fill-rule="nonzero">
<g id="Group-3-Copy" transform="translate(258.000000, 336.000000) scale(1, -1) translate(-258.000000, -336.000000) translate(238.000000, 316.000000)">
<g id="dianzan" transform="translate(1.000000, 15.382979)" fill="url(#linearGradient-1)">
<path d="M7.41162071,22.4304324 L7.41162071,1.39544697 C7.41162071,0.748216662 6.56457836,0.208858051 5.61165565,0.208858004 L2.75288767,0.208858004 C1.27056352,0.208858004 0,1.50331866 0,3.01352275 L0,20.7044848 C0,22.3225606 1.16468325,23.6170213 2.75288767,23.6170213 L5.61165565,23.6170213 C6.56457832,23.6170213 7.41162066,23.0776627 7.41162071,22.4304324 Z" id="Shape"></path>
</g>
<path d="M35.8347921,14.8367347 L27.2584882,14.8367347 C26.6232064,14.728863 26.4114458,14.0816327 26.3055655,13.7580175 L26.3055655,5.88338192 C26.3055655,3.72594753 24.6114808,2 22.4938749,2 C20.5880295,2 18.9998251,3.51020409 18.6821842,5.34402336 C17.517501,12.787172 13.0705286,15.2682216 10.2117606,16.0233236 C10.3176409,16.3469388 10.3176409,16.5626823 10.3176409,16.7784257 L10.3176409,37.7055393 C10.3176409,38.1370262 10.2117605,38.5685131 10,39 L30.7525379,39 C32.7642636,38.5685131 34.1407074,37.8134111 35.0936301,35.7638484 L39.4347222,20.2303207 C40.2817645,17.425656 38.9053207,14.728863 35.8347921,14.8367347 Z" id="Path" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/understand.svg 0 → 100644
View file @ 9b841f1b
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="98.9906353%" y1="70.2901373%" x2="50%" y2="70.2901373%" id="linearGradient-1">
<stop stop-color="#FFE677" offset="0%"></stop>
<stop stop-color="#FFC842" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.2523376%" y1="70.2276035%" x2="85.8062056%" y2="70.2276035%" id="linearGradient-2">
<stop stop-color="#FFCEC7" offset="0%"></stop>
<stop stop-color="#FFA096" offset="100%"></stop>
</linearGradient>
</defs>
<g id="运营" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="投票弹窗" transform="translate(-96.000000, -316.000000)" fill-rule="nonzero">
<g id="Group-6" transform="translate(38.000000, 78.000000)">
<g id="Group-5">
<g id="Group-3" transform="translate(58.000000, 238.000000)">
<g id="dianzan" transform="translate(0.000000, 14.382979)" fill="url(#linearGradient-1)">
<path d="M7.41162071,22.4304324 L7.41162071,1.39544697 C7.41162071,0.748216662 6.56457836,0.208858051 5.61165565,0.208858004 L2.75288767,0.208858004 C1.27056352,0.208858004 0,1.50331866 0,3.01352275 L0,20.7044848 C0,22.3225606 1.16468325,23.6170213 2.75288767,23.6170213 L5.61165565,23.6170213 C6.56457832,23.6170213 7.41162066,23.0776627 7.41162071,22.4304324 Z" id="Shape"></path>
</g>
<path d="M34.728737,13.8367347 L26.152433,13.8367347 C25.5171513,13.728863 25.3053907,13.0816327 25.1995104,12.7580175 L25.1995104,4.88338192 C25.1995104,2.72594753 23.5054256,1 21.3878197,1 C19.4819744,1 17.89377,2.51020409 17.5761291,4.34402336 C16.4114458,11.787172 11.9644734,14.2682216 9.10570544,15.0233236 C9.21158576,15.3469388 9.21158576,15.5626823 9.21158571,15.7784257 L9.21158571,36.7055393 C9.21158571,37.1370262 9.1057054,37.5685131 8.89394486,38 L29.6464828,38 C31.6582084,37.5685131 33.0346523,36.8134111 33.9875749,34.7638484 L38.3286671,19.2303207 C39.1757094,16.425656 37.7992656,13.728863 34.728737,13.8367347 Z" id="Path" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/router/index.js
View file @ 9b841f1b
......@@ -8,6 +8,138 @@ import { authByxyqb, getwxOpenId } from "@/api/user";
import localStorage from "@/service/localStorage";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Default",
redirect: "/goods"
},
{
path: "/home",
name: "Home",
component: () => import("../views/Home/index.vue")
},
{
path: "/home/smart-measure",
name: "SmartMeasure",
component: () => import("../views/Home/SmartMeasure/index.vue")
},
{
path: "/home/smart-measure/report",
name: "Report",
component: () => import("../views/Home/SmartMeasure/Report/index.vue")
},
{
path: "/home/activity",
name: "Activity",
component: () => import("../views/Home/Activity/index.vue")
},
{
path: "/goods",
name: "Goods",
component: () => import("../views/Goods/index.vue")
},
{
path: "/goods/detail",
name: "GoodsDetail",
component: () => import("../views/Goods/Detail/index.vue")
},
{
path: "/goods/plan",
name: "GoodsPlan",
component: () => import("../views/Goods/Plan/index.vue")
},
{
path: "/goods/inform",
name: "GoodsInform",
component: () => import("../views/Goods/Inform/index.vue")
},
{
path: "/consultant",
name: "Consultant",
component: () => import("../views/Consultant/index.vue")
},
{
path: "/consultant/success",
name: "ConsultantSuccess",
component: () => import("../views/Consultant/Success/index.vue")
},
{
path: "/consultant/question",
name: "ConsultantQuestion",
component: () => import("../views/Consultant/Question/index.vue")
},
{
path: "/consultant/exclusive",
name: "ConsultantExclusive",
component: () => import("../views/Consultant/Exclusive/index.vue")
},
{
path: "/consultant/plan",
name: "ConsultantPlan",
component: () => import("../views/Consultant/Plan/index.vue")
},
{
path: "/user",
name: "User",
component: () => import("../views/User/index.vue")
},
{
path: "/user/family",
name: "Family",
component: () => import("../views/User/Family/index.vue")
},
{
path: "/user/family/detail/:id",
name: "Family",
component: () => import("../views/User/Family/Detail/index.vue")
},
{
path: "/user/help-center",
name: "Family",
component: () => import("../views/User/HelpCenter/index.vue")
},
{
path: "/policy",
name: "Policy",
component: () => import("../views/Policy/index.vue")
},
{
path: "/policy/detail",
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/policy/add",
name: "AddPolicy",
component: () => import("../views/Policy/Add/index.vue")
},
{
path: "/policy/payment-record",
name: "PaymentRecord",
component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{
path: "/policy/renewal",
name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue")
},
{
path: "/introduction",
name: "Introduction",
component: () => import("../views/Introduction/index.vue")
},
{
path: "/paytest",
name: "Introduction",
component: () => import("../views/paytest")
},
{
path: "*",
redirect: "/goods"
}
];
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
......
src/service/cherry-ui.js
View file @ 9b841f1b
......@@ -41,9 +41,9 @@ const {
// Navbar,
Progress,
// Skeleton,
Sticky
// Swipe,
// SwipeItem,
Sticky,
Swipe,
SwipeItem
} = cherry;
Vue.use(Button);
......@@ -77,3 +77,5 @@ Vue.use(Form);
Vue.use(Picker);
Vue.use(Notify);
Vue.use(Loading);
Vue.use(Swipe);
Vue.use(SwipeItem);
src/style/index.less
View file @ 9b841f1b
@import "reset.less";
@import "var.less";
@import "mixins.less";
html,
body,
#app {
height: 100%;
}
body {
font-family: @font-family;
background-color: @background-color;
}
a {
color: @blue;
font-size: @font-size-12;
}
input::-webkit-input-placeholder {
color: #AAAAAA;
}
.cr-button {
padding: 0 @padding-sm !important;
&__text {
font-weight: bold !important;
}
&--warning {
color: @button-warning-color !important;
background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !important;
border-radius: @border-radius-md !important;
}
&--default {
color: @button-default-color !important;
background-color: @button-default-background-color !important;
border: 1px solid @button-default-border-color !important;
border-radius: @border-radius-md !important;
}
&--large {
height: @button-large-height !important;
line-height: @button-large-line-height !important;
}
&--small {
height: @button-small-height !important;
line-height: @button-small-line-height !important;
......@@ -51,6 +61,7 @@ input::-webkit-input-placeholder {
padding: 1px 6px 2px !important;
font-size: 10px !important;
font-weight: bold;
&--round {
border-radius: 1em !important;
}
......@@ -58,14 +69,17 @@ input::-webkit-input-placeholder {
background-color: @tag-primary-background-color !important;
color: @tag-primary-color !important;
}
&--success {
background-color: @tag-success-background-color !important;
color: @tag-success-color !important;
}
&--danger {
background-color: @tag-danger-background-color !important;
color: @tag-danger-color !important;
}
&--warning {
background-color: @tag-warning-background-color !important;
color: @tag-warning-color !important;
......@@ -94,6 +108,7 @@ input::-webkit-input-placeholder {
}
}
}
.cr-notify {
font-size: @font-size-14;
}
......@@ -104,9 +119,12 @@ input::-webkit-input-placeholder {
.cr-picker {
font-size: 14px;
}.table {
}
.table {
margin: 0;
width: 100%;
thead {
th {
color: @gray-5;
......@@ -115,16 +133,19 @@ input::-webkit-input-placeholder {
padding: 12px 0 12px 18px;
text-align: left;
background-color: @gray-1;
&:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
}
&:last-child {
border-top-right-radius: @border-radius-lg;
border-bottom-right-radius: @border-radius-lg;
}
}
}
tbody {
th {
color: @black;
......@@ -134,6 +155,7 @@ input::-webkit-input-placeholder {
text-align: left;
border-bottom: 1px solid #ece9e9;
}
td {
color: @black;
font-size: @font-size-12;
......@@ -143,25 +165,51 @@ input::-webkit-input-placeholder {
}
}
}
.searching {
animation: search-move 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes search-move {
0% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
25% {
transform: translate(39.369px, 66.02px) rotate(-45deg);
}
50% {
transform: translate(39.369px, 76.02px) rotate(-45deg);
}
75% {
transform: translate(49.369px, 76.02px) rotate(-45deg);
}
100% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
}
@-webkit-keyframes free_download {
0% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes free_download {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
\ No newline at end of file
src/views/Home/Activity/index.less 0 → 100644
View file @ 9b841f1b
@import "../../../style/index.less";
.font-public() {
font-size: 12px;
color: #666666;
font-weight: 400;
line-height: 17px;
}
.activity {
padding-bottom: 44px;
background: url('../../../assets/images/home/bg@2x.png') no-repeat 0 0 /cover;
&:before {
z-index: 1;
position: absolute;
top: 22px;
left: 0;
width: 100px;
height: 32px;
content: '';
background: url('../../../assets/logo-top.png') no-repeat 0 0 /cover;
}
&-detail {
position: absolute;
top: 29px;
right: 15px;
z-index: 1;
display: flex;
align-items: center;
&-text {
margin-right: 4px;
font-size: 11px;
color: #FFFFFF;
line-height: 13px;
}
&-svg {
padding-top: 2px;
width: 8px;
height: 8px;
}
}
&-title {
margin-top: 67px;
padding: 0 26px;
}
&-desc {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 13px;
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
line-height: 17px;
span {
color: #F94C4C;
}
}
&-prize {
margin: 20px 7px;
height: 362px;
background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;
&-pointer {
transform: none;
width: 100%;
height: 100%;
// width: 82px;
// height: 100px;
background: url('../../../assets/images/home/zhizhen.png') no-repeat center/82px 100px;
}
}
&-award {
margin: 29px 40px 40px;
padding: 10px;
height: 345px;
background: linear-gradient(123deg, #FFFDFD 0%, #FFF7AF 100%);
border-radius: 14px;
&-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background: #fff;
.Aa-container-congratulate {
margin: 32px 0 8px;
font-size: 24px;
color: #F94C4C;
font-weight: 600;
line-height: 33px;
}
.Aa-container-public {
.font-public();
}
.Aa-container-progress {
.font-public();
color: #F94C4C;
}
.Aa-container-qrcode {
margin: 18px 0 16px;
width: 140px;
height: 140px;
}
.Aa-container-focus {
font-size: 11px;
color: #999999;
line-height: 13px;
}
}
}
&-swiper {
margin: 0 38px;
height: 26px;
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
line-height: 17px;
background: url('../../../assets/images/home/zhognjiangxinxi.png') no-repeat 0 0 /contain;
&-container {
height: 100%;
width: 100%;
@{deep} .cr-swipe-item {
display: flex;
justify-content: center;
align-items: center;
height: 26px !important;
p:first-child {
margin-right: 10px;
}
span {
color: #F94C4C;
}
}
}
}
&-button {
display: flex;
justify-content: center;
margin: 26px 21px 0;
padding-top: 18px;
height: 75px;
font-size: 20px;
color: #B94A00;
font-weight: 600;
line-height: 28px;
background: url('../../../assets/images/home/button.png') no-repeat 0 0 /contain;
-webkit-animation: free_download .8s linear alternate infinite;
animation: free_download .8s linear alternate infinite;
}
&-withdrawal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px 24px;
height: 139px;
background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;
p:first-child {
font-size: 14px;
color: #333333;
line-height: 17px;
}
p:last-child {
font-size: 32px;
color: #FF6702;
font-weight: 600;
line-height: 45px;
}
}
&-vote {
margin: 0 20px 24px;
padding: 20px 16px;
background: url('../../../assets/images/home/baoxianbg.png') no-repeat center / 100% 100%;
&-title {
font-size: 16px;
color: #FFFFFF;
font-weight: 600;
line-height: 22px;
}
&-desc {
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
line-height: 17px;
span {
color: #FFC842;
}
}
&-body {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
background: #FFFFFF;
border-radius: 14px;
.Av-body-left {
display: flex;
align-items: center;
.Avb-left-image {
margin-right: 12px;
width: 32px;
height: 32px;
}
.Avb-left-text {
color: #242629;
font-weight: 600;
line-height: 17px;
p:first-child {
font-size: 12px;
}
p:last-child {
font-size: 17px;
}
}
}
.Av-body-right {
width: 76px;
height: 36px;
background: #FFC842 !important;
border-radius: 8px !important;
font-size: 12px;
color: #333333 !important;
font-weight: 600;
line-height: 17px;
}
}
}
&-intro {
margin: 24px 20px 0;
padding: 20px;
background: rgba(0, 0, 0, .1);
border-radius: 14px;
font-size: 11px;
color: rgba(255, 255, 255, .7);
font-weight: 400;
line-height: 16px;
p:first-child {
margin-bottom: 15px;
font-size: 16px;
color: #FFFFFF;
font-weight: 600;
line-height: 22px;
}
}
}
\ No newline at end of file
src/views/Home/Activity/index.vue 0 → 100644
View file @ 9b841f1b
<template>
<div class="activity">
<div class="activity-detail" @click="modal.detail = true">
<span class="activity-detail-text">活动详情</span>
<svg-icon class-name="activity-detail-svg" icon-class="arrow" />
</div>
<cr-image
class="activity-title"
width=""
height=""
fit="cover"
src="@/assets/images/home/biaoti@2x.png"
/>
<div class="activity-desc">
<p>参与投票即可抽取最高<span>18888</span>元红包</p>
<p>芒果保险老用户专享</p>
</div>
<div class="activity-prize">
<div class="activity-prize-pointer" @click="gameStart"></div>
</div>
<!-- <div class="activity-award">
<div class="activity-award-container">
<p class="Aa-container-congratulate">恭喜您已中奖</p>
<p class="Aa-container-public">快关注「芒果保险」公众号</p>
<p class="Aa-container-progress">查看红包进度</p>
<cr-image
class="Aa-container-qrcode"
width=""
height=""
fit="cover"
src="@/assets/images/home/qrcode.jpg"
/>
<p class="Aa-container-focus">截图或长按保存二维码</p>
<p class="Aa-container-focus">使用「微信」扫一扫即可关注</p>
</div>
</div> -->
<div class="activity-swiper">
<cr-swipe
class="activity-swiper-container"
:autoplay="3000"
:show-indicators="false"
vertical
>
<cr-swipe-item>
<p>138****8888</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
<cr-swipe-item>
<p>138****8887</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
<cr-swipe-item>
<p>138****8886</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
</cr-swipe>
</div>
<div class="activity-button" @click="modal.guide = true">立即抽奖 100%领钱</div>
<div class="activity-withdrawal">
<p>累计可提现红包</p>
<p>5元</p>
</div>
<div class="activity-vote">
<p class="activity-vote-title">投保“国民保·百万医疗险”的用户</p>
<p class="activity-vote-desc">参与投票，即可抽取最高<span>18888</span>元可提现红包</p>
<div class="activity-vote-body">
<div class="Av-body-left">
<cr-image
class="Avb-left-image"
width=""
height=""
fit="cover"
src="@/assets/images/home/vote@2x.png"
/>
<div class="Avb-left-text">
<p>您会为家人购买</p>
<p>百万医疗险吗？</p>
</div>
</div>
<cr-button class="Av-body-right" @click="modal.vote = true">
去投票
</cr-button>
</div>
</div>
<div class="activity-intro">
<p>奖品使用说明</p>
<p>1、“红包”仅限芒果保险用户可领取；</p>
<p>2、领取“红包”的手机账号需与提现的手机账号保持一致；</p>
<p>3、“红包”将通过“芒果保险”微信公众号发放至“微信零钱”；</p>
<p>4、请查看“活动详情”，了解更详细的“红包”发放规则、发放时间等信息。</p>
</div>
<Modal v-model="modal.winning" type="winning"></Modal>
<Modal v-model="modal.guide" type="guide"></Modal>
<Modal v-model="modal.vote" type="vote"></Modal>
<Modal v-model="modal.detail" type="detail"> </Modal>
</div>
</template>
<script>
import Modal from "../modules/Modal";
export default {
name: "Activity",
components: {
Modal
},
data() {
return {
isGoing: false,
modal: {
winning: false,
guide: false,
vote: false,
detail: false
}
};
},
computed: {},
methods: {
gameStart() {
this.$nextTick(() => {
if (this.isGoing) return;
this.isGoing = true;
console.log("游戏开始");
const turntable = document.querySelector(".activity-prize");
const pointer = document.querySelector(".activity-prize-pointer");
// 1. 计算旋转角度
let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
let rotate = rotateItemDeg + 5 * 360;
let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
// 2. 重置转盘样式
turntable.removeAttribute("style");
pointer.removeAttribute("style");
// 3. 保证下一次旋转动画生效
setTimeout(() => {
turntable.style.transform = `rotate(${rotate}deg)`;
pointer.style.transform = `rotate(-${rotate}deg)`;
pointer.style.transition = `transform ${rotateSpeed}s ease-out`;
turntable.style.transition = `transform ${rotateSpeed}s ease-out`;
}, 10);
// 4. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定
setTimeout(() => {
console.log("中奖了");
this.isGoing = false;
this.modal.winning = true;
}, rotateSpeed * 1000);
});
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Home/SmartMeasure/Report/index.less 0 → 100644
View file @ 9b841f1b
@import "../../../../style/index.less";
.button() {
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
font-size: 14px;
font-weight: 400;
color: #787EFF;
line-height: 16px;
&:first-child {
margin-right: 8px;
}
}
.card-container() {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
}
.card-title(@marginBottom) {
margin-bottom: @marginBottom;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
.card-desc(@marginBottom, @lineHeight: 22px) {
margin-bottom: @marginBottom;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: @lineHeight;
}
.card-head() {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
span:first-child {
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 400;
color: #787EFF;
line-height: 24px;
}
.svg-icon {
padding: 4px 0;
width: 16px;
height: 16px;
}
}
.card-body(@marginBottom: 0) {
margin-bottom: @marginBottom;
div {
display: flex;
justify-content: space-between;
span:first-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
}
}
.report {
position: relative;
background: #F6F6F6;
&:before {
position: absolute;
width: 375px;
height: 194px;
border: 0;
content: '';
background: linear-gradient(0deg, #F1F1F1 0%, #FFC842 100%);
}
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
&-container {
position: absolute;
left: 0;
right: 0;
&-head {
display: flex;
margin: 39px 0 32px 16px;
.Rc-head-left {
margin-right: 16px;
width: 50px;
height: 50px;
}
.Rc-head-right {
display: flex;
flex-direction: column;
align-items: space-between;
color: #242629;
line-height: 24px;
p:first-child {
font-size: 12px;
}
p:last-child {
font-size: 20px;
font-weight: 600;
}
}
}
&-degree {
.card-container();
.Rc-degree-title {
.card-title(24px);
span {
color: #FF6702;
}
}
.Rc-degree-progress {
margin-bottom: 4px;
@{deep} .cr-progress__track {
height: 12px;
border-radius: 6px;
background-color: #f4f4f4;
.cr-progress__progress {
background: linear-gradient(270deg, #ffe677 0%, #ffc842 100%);
border-radius: 6px;
}
}
}
.Rc-degree-pointer {
margin-bottom: 11px;
display: flex;
justify-content: space-around;
font-size: 11px;
font-weight: 400;
color: #CCCCCC;
line-height: 22px;
}
.Rc-degree-desc {
.card-desc(0);
}
}
&-analyze {
.card-container();
.Rc-analyze-title {
.card-title(12px);
}
.Rc-analyze-desc {
.card-desc(0);
}
.Rc-analyze-image {
display: flex;
justify-content: center;
margin: 10px 20px;
height: 255px;
}
}
&-plan {
.card-container();
.Rc-plan-title {
.card-title(12px);
}
.Rc-plan-advice {
.card-desc(7px);
}
.Rc-plan-priority {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 18px;
height: 49px;
background: #F4F4F4;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
.Rc-plan-desc {
.card-desc(23px);
}
.Rc-plan-card {
overflow: hidden;
margin: 0 -12px 10px;
background: #F4F4F4;
border-radius: 10px;
.Rcp-card-head {
display: flex;
align-items: center;
align-items: center;
margin: 14px 0 16px 0;
.Rcpc-head-left {
margin-right: 9px;
width: 49px;
height: 25px;
}
.Rcpc-head-right {
width: 258px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
.Rcp-card-body {
margin: 0 14px 20px;
padding: 13px 16px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 8px;
.Rcpc-body-title {
.card-title(6px);
}
.Rcpc-body-desc {
.card-desc(3px, 16px);
}
.Rcpc-body-opera {
display: flex;
justify-content: space-between;
align-items: flex-end;
.Rcpcb-opera-left {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
span {
font-size: 20px;
font-weight: bold;
color: #F94C4C;
line-height: 22px;
}
}
.Rcpcb-opera-right {
width: 99px;
height: 36px;
background: #FFC842 !important;
border-radius: 8px !important;
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 17px;
}
}
}
}
}
&-retest {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto 27px;
padding: 0 19px;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #DDD8D8;
.Rc-retest-svg {
width: 18px;
height: 18px;
}
.Rc-retest-text {
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 22px;
}
}
.report-container-explain {
width: 343px;
height: 76px;
margin: 0 auto 24px;
background: url('../../../../assets/images/home/explain@2x.png') no-repeat center/contain;
}
}
}
\ No newline at end of file
src/views/Home/SmartMeasure/Report/index.vue 0 → 100644
View file @ 9b841f1b
<template>
<div class="report">
<div class="report-container">
<div class="report-container-head">
<cr-image
class="Rc-head-left"
round
width=""
height=""
fit="cover"
src="@/assets/images/user/avatar@2x.png"
/>
<div class="Rc-head-right">
<p>王小闹</p>
<p>风险测评报告</p>
</div>
</div>
<div class="report-container-degree">
<p class="Rc-degree-title">风险程度 <span>高</span></p>
<cr-progress class="Rc-degree-progress" :percentage="85" :show-pivot="false" />
<p class="Rc-degree-pointer">
<span>低</span>
<span>中</span>
<span>高</span>
</p>
<p class="Rc-degree-desc">整体风险程度高，建议保持良好的生活习惯，增强相关保障。</p>
</div>
<div class="report-container-analyze">
<p class="Rc-analyze-title">风险分析</p>
<p class="Rc-analyze-desc">
您是家庭的重要成员，健康的生活习惯会让您未来受益匪浅，必要的配备健康保障，也是对个人和家庭更负责任的体现，奋斗的同时也要关注保障哦~
</p>
<cr-image
class="Rc-analyze-image"
width=""
height=""
fit="contain"
src="@/assets/images/home/report@2x.png"
/>
</div>
<div class="report-container-plan">
<p class="Rc-plan-title">适合你的保险方案</p>
<p class="Rc-plan-advice">建议投保优先级</p>
<p class="Rc-plan-priority">
<span>1.医疗险</span>
<span>2.重疾险</span>
<span>3.意外险</span>
<span>4.寿险</span>
</p>
<p class="Rc-plan-desc">
你的身体处在黄金期，但不可以掉以轻心，话习惯会影响到未来，适当的运动很重要，奋斗的同时一定也要合理的休息。
</p>
<div class="Rc-plan-card">
<div class="Rcp-card-head">
<cr-image
class="Rcpc-head-left"
width=""
height=""
fit="cover"
src="@/assets/images/home/medical@2x.png"
/>
<span class="Rcpc-head-right"
>因责任内“医疗和住院”所产生的费用，医疗险100%报销，赔多少钱，取决于您实际花费多少</span
>
</div>
<div class="Rcp-card-body">
<p class="Rcpc-body-title">万家保·百万医疗险</p>
<p class="Rcpc-body-desc">看病报销医药费，最高600万</p>
<div class="Rcpc-body-opera">
<p class="Rcpcb-opera-left"><span>¥1</span>首月</p>
<cr-button class="Rcpcb-opera-right">
去投保
</cr-button>
</div>
</div>
</div>
</div>
<div class="report-container-retest">
<svg-icon icon-class="retest" class-name="Rc-retest-svg" />
<span class="Rc-retest-text">重测一遍</span>
</div>
<div class="report-container-explain"></div>
</div>
</div>
</template>
<script>
export default {
name: "PolicyList",
data() {
return {};
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Home/SmartMeasure/index.vue
View file @ 9b841f1b
<template>
<div ref="measure" class="measure">
<div class="measure">
<div class="measure-dialogue" v-for="(item, index) in smartMeasure" :key="item.id">
<div class="measure-dialogue-robot">
<cr-image
......
src/views/Home/index.less
View file @ 9b841f1b
......@@ -23,6 +23,18 @@
background: url('../../assets/logo-top.png') no-repeat 0 0 /cover;
}
&-button {
position: absolute;
top: 181px;
left: 50%;
margin-left: -76.5px;
width: 153px;
height: 60px;
background: url('../../assets/images/home/activity-button@2x.png') no-repeat center/contain;
-webkit-animation: free_download .8s linear alternate infinite;
animation: free_download .8s linear alternate infinite;
}
&-activity {
width: 100%;
}
......
src/views/Home/index.vue
View file @ 9b841f1b
......@@ -7,6 +7,7 @@
fit="cover"
src="@/assets/images/home/activity@2x.png"
/>
<div class="home-button"></div>
<div class="home-service">
<router-link tag="div" to="/home/smart-measure" class="home-service-item">
<svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
......
src/views/Home/modules/Modal.vue 0 → 100644
View file @ 9b841f1b
<template>
<div>
<cr-popup
v-if="type === 'winning'"
class="activity-modal"
v-model="show"
:closeable="true"
get-container="body"
close-icon="close"
@close="onClose"
>
<div class="activity-winning">
<div class="activity-winning-bg"></div>
<div class="activity-winning-panel">
<p class="Aw-panel-congratulate">恭喜您获得</p>
<p class="Aw-panel-amount">5元</p>
<p class="Aw-panel-packet">—可提现红包—</p>
<cr-image
class="Aw-panel-qrcode"
width=""
height=""
fit="cover"
src="@/assets/images/home/qrcode.jpg"
/>
<p class="Aw-panel-account">快关注「芒果保险」公众号</p>
<p class="Aw-panel-progress">查看红包进度</p>
</div>
</div>
</cr-popup>
<cr-popup
v-if="type === 'guide'"
class="activity-modal"
v-model="show"
:closeable="true"
get-container="body"
close-icon="close"
@close="onClose"
>
<div class="activity-guide-panel">
<div class="Ag-panel-insured">
<span>还差一步</span>
<p>您还未投保</p>
</div>
<p class="Ag-panel-amount">立即投保600万医疗保险</p>
<div class="Ag-panel-strategy">
<p class="Agp-strategy-title">红包策略</p>
<div class="Agp-strategy-item">
<i></i>
<p>投保600万医疗保障（<span>首月1元</span>）</p>
</div>
<div class="Agp-strategy-item">
<i></i>
<p>完成投票 抽红包（<span>100%中奖</span>）</p>
</div>
</div>
<p class="Ag-panel-button" @click="go">{{ `好的继续 (${time}s)` }}</p>
</div>
</cr-popup>
<cr-popup
v-if="type === 'vote'"
class="activity-modal"
v-model="show"
:closeable="true"
get-container="body"
close-icon="close"
@close="onClose"
>
<div class="activity-vote-panel">
<div class="Av-panel-head">
<p>完成投票，即可抽奖</p>
<p>您会为家人购买百万医疗险吗？</p>
</div>
<div class="Av-pane-body">
<p class="Avp-body-intro">【万家保·百万医疗险】</p>
<p class="Avp-body-intro">
可以100%报销责任内的医药费用，是医保的重要补充，是人人都应该购买的国民医疗保障。
</p>
<div class="Avp-body-opera">
<div class="Avpb-opera-item Avpb-opera-left Avpb-opera-left_selected">
<svg-icon class-name="Avpbo-item-svg" icon-class="understand" />
<p class="Avpbo-item-text">了解</p>
</div>
<div class="Avpb-opera-item Avpb-opera-right">
<svg-icon class-name="Avpbo-item-svg" icon-class="understand-not" />
<p class="Avpbo-item-text">不了解</p>
</div>
</div>
<div class="Avp-body-statistic">
<p>了解 <span>23405</span></p>
<p>不了解 <span>23405</span></p>
</div>
<cr-progress class="Avp-body-progress" :percentage="80" :show-pivot="false" />
</div>
<div class="Av-pane-footer">
<cr-button class="Avp-body-button">
完成投票抽红包
</cr-button>
<p>最高<span>88888</span>元</p>
</div>
</div>
</cr-popup>
<cr-popup
v-if="type === 'detail'"
class="activity-modal"
v-model="show"
:closeable="true"
get-container="body"
close-icon="close"
@close="onClose"
>
<div class="activity-detail-panel">
<h4 class="Ad-panel-head">活动详情</h4>
<div class="Ad-panel-body">
<iframe
class="activity-modal-detail"
src="http://mangguo-contract.qthbx.com/huo-dong-xiang-qing/"
frameborder="0"
height="100%"
></iframe>
</div>
<div class="Ad-panel-footer"></div>
</div>
</cr-popup>
</div>
</template>
<script>
const time = 6;
let timer = null;
export default {
name: "Modal",
props: {
value: {
type: Boolean,
default: true
},
type: {
type: String,
default: "winning"
}
},
data() {
return {
show: this.value,
time
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.show = val;
if (this.type === "guide" && val) {
this.resetTime();
this.countTime();
}
}
}
},
methods: {
onClose() {
this.$emit("input", false);
},
go() {
this.$emit("input", false);
},
resetTime() {
this.time = time;
if (timer) clearTimeout(timer);
},
countTime() {
if (this.time === 0) {
this.go();
return;
}
this.time -= 1;
timer = setTimeout(this.countTime, 1000);
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
.activity-modal {
overflow: visible;
background-color: transparent;
@{deep} .cr-popup--close-top-right {
top: -35px;
right: 0px;
color: #fff;
font-size: 24px;
}
.activity-winning {
&-bg {
transform: rotate(90deg);
width: 312px;
height: 228px;
top: -100px;
position: absolute;
z-index: -1;
background: url("../../../assets/images/home/guangmang.png") no-repeat center / contain;
}
&-panel {
display: flex;
flex-direction: column;
align-items: center;
width: 293px;
height: 405px;
background: url("../../../assets/images/home/winning@2x.png") no-repeat 0 0 / contain;
.Aw-panel-congratulate {
margin-top: 36px;
font-size: 16px;
color: #f94c4c;
font-weight: 400;
line-height: 22px;
}
.Aw-panel-amount {
font-size: 56px;
color: #f94c4c;
font-weight: 600;
line-height: 78px;
}
.Aw-panel-packet {
font-size: 11px;
color: #666666;
font-weight: 400;
line-height: 16px;
}
.Aw-panel-qrcode {
margin: 8px 0 0 4px;
width: 70px;
height: 70px;
}
.Aw-panel-account {
font-size: 11px;
color: #f35422;
font-weight: 400;
line-height: 16px;
}
.Aw-panel-progress {
font-size: 11px;
color: #333333;
font-weight: 600;
line-height: 16px;
}
}
}
.activity-guide-panel {
display: flex;
flex-direction: column;
align-items: center;
width: 293px;
height: 405px;
background: url("../../../assets/images/home/guide@2x.png") no-repeat 0 0 / contain;
.Ag-panel-insured {
display: flex;
align-items: center;
margin: 42px 0 3px;
span {
margin-right: 5px;
font-size: 18px;
color: #f94c4c;
font-weight: 600;
line-height: 25px;
}
p {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 16px;
background: #ffeab7;
border-radius: 8px 2px 8px 2px;
font-size: 11px;
color: #eaad1a;
font-weight: 400;
line-height: 16px;
}
}
.Ag-panel-amount {
font-size: 12px;
color: #333333;
font-weight: 400;
line-height: 17px;
}
.Ag-panel-strategy {
margin: 118px 0 32px;
.Agp-strategy-title {
text-align: center;
font-size: 14px;
color: #ffffff;
font-weight: 600;
line-height: 20px;
}
.Agp-strategy-item {
display: flex;
align-items: center;
font-size: 11px;
color: #ffffff;
font-weight: 400;
line-height: 12px;
i {
position: relative;
margin-right: 10px;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
span {
color: #ffc842;
}
&:nth-child(2) {
margin: 14px 0 8px;
i {
background: #ffc842;
&:after {
position: absolute;
top: 2px;
left: 2.5px;
display: block;
border-left: 1px dashed #fff;
height: 16px;
content: "";
}
}
}
&:nth-child(3) {
i {
box-sizing: border-box;
border: 1px solid #ffffff;
}
}
}
}
.Ag-panel-button {
display: flex;
justify-content: center;
padding-top: 9px;
height: 55px;
width: 232px;
background: url("../../../assets/images/home/button.png") no-repeat 0 0 / contain;
font-size: 20px;
color: #b94a00;
font-weight: 600;
line-height: 28px;
}
}
.activity-vote-panel {
position: relative;
box-sizing: border-box;
padding: 24px 20px 32px;
width: 300px;
height: 477px;
border-radius: 14px;
background: #fff;
&:after {
position: absolute;
top: 37px;
right: 0;
display: block;
width: 34px;
height: 25px;
content: "";
background: url("../../../assets/images/dialog-header-bg.png") no-repeat center/contain;
}
.Av-panel-head {
margin-bottom: 22px;
font-size: 18px;
color: #333333;
font-weight: 400;
line-height: 25px;
p:last-child {
font-weight: 600;
}
}
.Av-pane-body {
margin-bottom: 44px;
.Avp-body-intro {
font-size: 12px;
color: #666666;
font-weight: 400;
line-height: 20px;
}
.Avp-body-opera {
display: flex;
justify-content: space-between;
margin: 22px 0 25px;
.Avpb-opera-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 128px;
height: 106px;
.Avpbo-item-svg {
margin-bottom: 10px;
width: 40px;
height: 40px;
}
.Avpbo-item-text {
font-size: 12px;
color: #ff6702;
font-weight: 600;
line-height: 17px;
}
}
.Avpb-opera-left {
background: url("../../../assets/images/home/understand@2x.png") no-repeat center/contain;
&_selected {
.Avpbo-item-text {
color: #fff;
}
background: url("../../../assets/images/home/understand_selected@2x.png") no-repeat
center/contain;
}
}
.Avpb-opera-right {
background: url("../../../assets/images/home/understand-not@2x.png") no-repeat
center/contain;
&_selected {
background: url("../../../assets/images/home/understand-not_selected@2x.png") no-repeat
center/contain;
}
}
}
.Avp-body-statistic {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 12px;
color: #333333;
font-weight: 600;
line-height: 16px;
span {
color: #eaad1a;
}
}
.Avp-body-progress {
@{deep} .cr-progress__track {
height: 12px;
border-radius: 6px;
background-color: #f4f4f4;
.cr-progress__progress {
background: linear-gradient(270deg, #ffe677 0%, #ffc842 100%);
border-radius: 6px;
}
}
}
}
.Av-pane-footer {
position: relative;
.Avp-body-button {
width: 100%;
height: 52px;
background: #ffc842 !important;
border-radius: 14px !important;
font-size: 16px;
color: #333333 !important;
font-weight: 600;
line-height: 22px;
}
p {
position: absolute;
top: -19px;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 20px;
background: linear-gradient(180deg, #fd8484 0%, #f94c4c 100%);
border-radius: 22px 22px 22px 4px;
font-size: 11px;
color: #ffffff;
font-weight: 400;
line-height: 16px;
span {
color: #ffc600;
}
}
}
}
.activity-detail-panel {
position: relative;
overflow: hidden;
padding: 24px 0px;
width: 300px;
height: 474px;
background: #fff;
border-radius: 14px;
&:after {
position: absolute;
top: 30px;
right: 0;
width: 34px;
height: 25px;
content: "";
background: url("../../../assets/images/dialog-header-bg.png") no-repeat center/contain;
}
.Ad-panel-head {
margin: 0 20px 0;
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
}
.Ad-panel-body {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
padding: 9px 5px 24px;
width: 100%;
height: 98%;
border-radius: 14px;
}
.Ad-panel-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 72px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment