「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
前言
截止到上一次分享中我们已经将签到日历页面中的所有功能基本都实现了，并且最后还实现了点击抽奖按钮和兑换按钮分别跳转到抽奖页面和兑换页面，而对应的抽奖和兑换页面都没有具体内容只是放了一张图片，而在接下来的分享中我们将逐步实现抽奖页面功能的实现。今天的分享要实现的功能有：
- 抽奖页面头部导航
- 抽奖页面背景及样式展示
- 抽奖页面中当前矿石数展示
- 抽奖页面幸运转盘背景展示
头部导航
抽奖页中的头部导航与签到日历页面中的头部导航非常类似，也是只有一个返回按钮和标题，不同的是这里的返回按钮返回的是签到日历页面，而签到日历页面中的返回按钮则是返回到首页。接下来我们就实现一下这个导航功能，后续可以根据需要再单独封装成一个独立的小组件。 头部导航依然还是使用vant库的navbar导航组件。我们只需要将checkin.vue中的导航组件相关代码拷贝过来改吧改吧（标题换成“幸运抽奖”，返回方法中的路由路径改成‘/checkin’）就可以作为抽奖页中的导航栏使用了，就是这么简单。
<van-nav-bar title="幸运抽奖" left-arrow @click-left="backCheckin" />
const backCheckin = function () {
router.push("/checkin");
};
背景样式及矿石数
在本次分享中涉及的与后端交互的比较少，只有一个获取当前矿石数的api，其余的都是样式调整，功能比较简单，但是涉及到样式调整就比较繁琐，在样式调试过程中有一部分是自己写的，还有一部分则是直接从官网那边copy过来的，所以如果觉得写样式太繁琐了小伙伴可以偷下懒，去官网直接copy吧。 下面来一起分析一下抽奖页面的一个大致结构：
- 1、首先最底部是一张背景图片（图片自行到官方下载）
- 2、然后是一个“掘金福利限量抽”的大标题，这个标题也是一张图片，直接到官网拔过来就好
- 3、再往下则是一个非常具有诱惑力的小标题“Switch、AirPods等大奖等你来拿”，这个是文本即可
- 4、紧接着是当前矿石数和抽奖规则以及我的收获两个超链接（具体功能后续再实现）
- 5、再往下是抽奖大转盘的背景及相关奖品
- 6、最后则是抽到大奖的幸运掘金儿展示 在我们这篇文章中将要实现前4个功能点，以及第5个功能点的一半（即幸运大转盘的背景），关于具体实现步骤这里也没什么可说的，都是div加css样式基本用不到vant组件，除了繁琐以外没有什么技术难点，所以这里也就不再过多赘述了，直接上代码和效果图吧。
<div class="goodluck">
<van-image :src="luck" />
<van-image class="title" :src="title" />
<div class="youhuo">Switch、AirPods等大奖等你来拿</div>
<div class="sub-title">
<div class="ks">
<!--这里是一个矿石图片的svg格式，由于代码过长就不贴出了，源码可直接到官网copy-->
<div class="count">{{ currentPoint }}</div>
</div>
<div class="rules">
<div>
<van-icon name="question" style="margin-right: 8px" />抽奖规则
</div>
<div>
<van-icon name="goods-collect" style="margin-right: 8px" />我的收获
</div>
</div>
</div>
<div class="lottery">
<div class="turnable-wrap">
<div class="turnable-box">
<div class="upper-border up-down">
<div class="dot vertex"></div>
<div class="dot border left-border-dot"></div>
<div class="dot white"></div>
<div class="dot border right-border-dot"></div>
<div class="dot vertex"></div>
</div>
<div class="lower-border up-down">
<div class="dot vertex"></div>
<div class="dot border left-border-dot"></div>
<div class="dot white"></div>
<div class="dot border right-border-dot"></div>
<div class="dot vertex"></div>
</div>
<div class="left-border left-right">
<div class="dot vertex"></div>
<div class="dot border left-border-dot"></div>
<div class="dot white"></div>
<div class="dot border right-border-dot"></div>
<div class="dot vertex"></div>
</div>
<div class="right-border left-right">
<div class="dot vertex"></div>
<div class="dot border left-border-dot"></div>
<div class="dot white"></div>
<div class="dot border right-border-dot"></div>
<div class="dot vertex"></div>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 80px"></div>
</div>
关于css代码这里也只贴出自己写的那部分，还有一部分是直接从官网copy过来的，由于代码太长也就不贴出了，需要的小伙伴还是一样去官网copy吧。（class为lottery以及lottery内部的所有样式均从官网copy的，所以关于lottery以及内部的所有样式都不贴了）
.goodluck {
position: relative;
background-color: #2c68ff;
width: 100%;
& .title {
position: absolute;
margin-top: -320px;
display: block;
}
& .youhuo {
position: absolute;
color: #fff;
font-size: 16px;
text-align: center;
margin-top: -270px;
margin-left: 100px;
}
& .sub-title {
width: 100%;
position: absolute;
margin-top: -230px;
& .rules {
float: right;
margin-right: 10px;
color: #fff;
}
& .ks {
width: 120px;
float: left;
font-size: 14px;
color: #faf1be;
margin-left: 10px;
border-radius: 15px;
background-color: rgba(30, 128, 255, 0.8);
padding-left: 10px;
padding-right: 10px;
& .count {
font-weight: bold;
position: absolute;
display: inline-block;
margin-top: 6px;
}
}
}
}
效果图
总结
今天的分享中我们实现了抽奖页面中的头部导航以及主体部分的ui实现，涉及到后端交互的只有获取当前矿石数，其余的都是繁琐的样式调试，最终算是有了一个基本雏形，有了点抽奖页面的模样了，明天我们继续实现抽奖页中的功能，今天的分享就到这里了。欢迎小伙伴们点赞加关注哦！
