摇骰子设计与实现
摇骰子：手机可以摇一摇，包含震动加声音，文章底部含有源代码，更关键的是内有开发者后门，夏天到了出去如果玩手机摇骰子可以今夜他们不醉我不归。
有预览图，也已经上线小程序，可以扫码直接体验效果。如果觉得不错点个赞(^▽^)
本章底部会贴出所有代码，图片资源以及音频资源，去度娘上找一下。
准备工作
新建一个项目，将已经准备好的资源，放入到项目中。下面是需要图片资源。
实现步骤以及思路
作为一个前端工程师，看到好玩的总是想着去实现一下。自我感觉摇骰子好玩就尝试实现一下，写下来后发现不是很难，好了，开始上正文。
首先开始思考摇骰子的流程，准备状态>>>晃动中状态>>>等待开启状态>>>开启后状态。 简单的四步循环，下面开始针对每一步处理。
开发者的后门！肯定是在开骰子的时候，可以调整点数。等待开启状态中实现。
第一步：实现准备状态
实现准备状态，我们要实现什么？
- 可以设置骰子个数
- 开启监听陀螺仪实现摇一摇
定义一个变量diceCount显示骰子个数。在准备阶段用户可以自行设置骰子个数。
利用uni.onGyroscopeChange监听陀螺仪，根据陀螺仪变化的速率来判断是否摇动了手机，当检测到摇动手机号开始游戏，并停止监听陀螺仪。这里需要注意的是uni.onGyroscopeChange是在onLoad()中页面初次加载时执行监听，如果放在onShow会存在多次触发监听事件。
实际情况中发现，摇动幅度大持续时间长，会执行多次。这里我想的是加个shakeState变量，监听到一次的时候就改变 shakeState，然后停止监听后开始游戏。
onLoad() {
this.startGyroscope()
uni.onGyroscopeChange((res) => {
// Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ);
var nowRange = Math.abs(res.x) + Math.abs(res.x) + Math.abs(res.x);
console.log(nowRange)
if (nowRange > 10) {
this.shakeState = true
}
if (this.shakeState) {
this.stopGyroscope()
this.shakeState = false
this.playGame()
}
});
},
methods: {
//监听陀螺仪
startGyroscope() {
uni.startGyroscope({
interval: "normal",
success() {
console.log('success')
},
fail() {
console.log('fail')
}
})
},
//停止监听陀螺仪
stopGyroscope() {
uni.stopGyroscope({
success() {
console.log('stop success!')
},
fail() {
console.log('stop fail!')
}
})
},
}
第二步：实现晃动中状态
实现晃动中状态，我们要实现什么？
- 整个骰盅左右晃动
- 有声音以及振动
骰盅左右晃动是通过vue中的:class类样式绑定，在代码中写了一个rollDiceAnimation**的样式类实现一个动画，然后判断“gameType”的变量实现动画。
<view class="diceCountent" :class="{'rollDiceAnimation':gameType == 1}">
</view>
声音的是利用了“uni.createInnerAudioContext()”设置好自动播放，音频文件地址，调用**onPlay()**方法实现声音的播放。
**uni.vibrateLong()**实现振动
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = '/static/rollDice/dice.mp3';
innerAudioContext.onPlay(() => {});
第三步：等待开起状态
实现晃动中状态，我们要实现什么？
- 上划骰盅可以提前查看结果。
- 开发者后门实现
实现向上滑动提前查看结果，这里就不得不说下手指触摸屏幕“@touchstart”、触摸移动“@touchmove”、手指离开屏幕“@touchend”这个三个事件。手指触摸的时候记录当前pageY的值，移动时算出移动的位置，改变骰盅的位置。手指离开后恢复原先的状态。
滑动骰盅直接展示结果，感觉太过于突然了。就使用“opacity”结合透明度显得不那么突然。
开发者后门，在等待开起状态：
- “上划” —— 1点数量加一
- “骰盅” —— 2点数量加一
- “可以” —— 3点数量加一
- “提前” —— 4点数量加一
- “查看” —— 5点数量加一
- “点数” —— 6点数量加一
<image class="maskbox" v-show="gameType != 3" :style="{'transform':'translate3d(0px,-'+yMove+'px,0)'}"
@touchstart="maskTouchStart" @touchmove.prevent="maskTouchMove" @touchend="maskTouchEnd"
src="../../static/rollDice/dice.png" mode=""></image>
// 开始触摸屏幕
maskTouchStart(ev) {
this.YStart = ev.changedTouches[0].pageY
},
// 触摸移动
maskTouchMove(ev) {
var result =0
if(this.gameType == 2){
result = parseInt(this.YStart - ev.changedTouches[0].pageY)
}
if(result > 0){
this.yMove = result
this.opacityShow = result/100
}
},
// 触摸结束
maskTouchEnd(ev) {
this.yMove = 0
this.opacityShow = 0
},
第四步：开启后状态
开启后状态，我们要实现什么？
- 骰子点数的展示
毕竟6个骰子和20个骰子展示是不一样的。这里先定好要展示位置的大小，然后通过骰子的个数，来改变骰子图片的大小
// 设置骰子位置前
setDice() {
var arr = []
// 生成坐标数组
if (this.diceCount > 9) {
let pointSum = Math.floor(Math.sqrt(this.diceCount)) + 1
this.diceWidth = parseInt(240 / pointSum)
for (let i = 0; i < pointSum; i++) {
for (let k = 0; k < pointSum; k++) {
arr[arr.length] = {
top: i * this.diceWidth,
left: k * this.diceWidth
}
}
}
} else {
for (let i = 0; i < 3; i++) {
for (let k = 0; k < 3; k++) {
arr[arr.length] = {
top: i * 80,
left: k * 80
}
}
}
}
// 骰子位置以及角度
var dice, angle, temp, tempList
for (var i = 0; i < this.diceCount; i++) {
dice = (Math.random() * 6) >> 0
angle = (Math.random() * 6) >> 0
temp = (Math.random() * arr.length) >> 0;
// 让数组不重复
tempList = arr[temp];
arr.splice(temp, 1)
this.addDiceList(dice, angle, tempList)
}
},
// 设置骰子
addDiceList(dice, angle, tempList) {
this.diceList.push({
"rotate": 30 * angle,
"dice": dice,
"top": tempList.top,
"left": tempList.left
})
},
总结
代码和我，只要一个能跑就行！
总体的功能就实现了，为了更加完善。开始做的时候觉得无从下手，行动起来一步一步去解决问题，发现整体下来还是比较顺利的。好了。这就不多说了，具体的逻辑源代码都在下面。
源代码
<template>
<view>
<!-- 背景 -->
<image class="gameBg" src="../../static/rollDice/gameBg.jpg" mode=""></image>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view style="height: 80rpx;"></view>
<!-- 骰子 -->
<view class="diceCountent" :class="{'rollDiceAnimation':gameType == 1}">
<image src="../../static/rollDice/dicebg.png" class="bgimg" mode=""></image>
<view class="dicebox">
<view class="diceitem" v-for="(item,index) in diceList" :key="index" :style="{width:diceWidth+'rpx',height:diceWidth+'rpx',top:item.top+'rpx',left:item.left+'rpx',
transform:`rotate(${item.rotate}deg)`}">
<image :src="diceAll[item.dice].img" class="diceimg" mode=""></image>
</view>
</view>
<image class="maskbox" v-show="gameType != 3" :style="{'transform':'translate3d(0px,-'+yMove+'px,0)'}"
@touchstart="maskTouchStart" @touchmove.prevent="maskTouchMove" @touchend="maskTouchEnd"
src="../../static/rollDice/dice.png" mode=""></image>
</view>
<view v-show="gameType == 0" class="diceSumBox">
<image @click="setcount()" src="../../static/rollDice/reduce.png" class="numImg" mode=""></image>
<text style="display: block;width: 300rpx;color: #f7d16a;text-shadow: 10rpx 10rpx 10rpx #47382b;">{{diceCount}}</text>
<image @click="setcount('add')" src="../../static/rollDice/add.png" class="numImg" mode=""></image>
<!-- {{diceCount}} -->
</view>
<view v-show="gameType == 2" class="smallTipBox">
<text @click="setCheat(0)">上划</text>
<text @click="setCheat(1)">骰盅</text>
<text @click="setCheat(2)">可以</text>
<text @click="setCheat(3)">提前</text>
<text @click="setCheat(4)">看查</text>
<text @click="setCheat(5)">点数</text>
</view>
<!-- 总合计 -->
<view style="height: 800rpx;"></view>
<!-- 按钮-->
<view class="btnBox">
<view v-show="gameType == 0" @click="playGame()" class="startBtn">
摇一摇
</view>
<view v-show="gameType == 2" @click="openDice()" class="openBtn">
开
</view>
<view v-show="gameType == 2" @click="playGame()" class="startBtn">
再摇一次
</view>
</view>
<!-- v-show="gameType == 3" -->
<view :style="{'opacity':opacityShow}" class="totalbox">
<text class="totalboxTitle">总点数：<text class="pointSum">{{point}}</text> </text>
<view class="totaldicebox">
<view class="totaldiceItem">
<image src="../../static/rollDice/01.png" class="smallDiceimg" mode=""></image>
<text>X {{one}}</text>
</view>
<view class="totaldiceItem">
<image src="../../static/rollDice/02.png" class="smallDiceimg" mode=""></image>
<text>X {{two}}</text>
</view>
<view class="totaldiceItem">
<image src="../../static/rollDice/03.png" class="smallDiceimg" mode=""></image>
<text>X {{thr}}</text>
</view>
</view>
<view class="totaldicebox">
<view class="totaldiceItem">
<image src="../../static/rollDice/04.png" class="smallDiceimg" mode=""></image>
<text>X {{fou}}</text>
</view>
<view class="totaldiceItem">
<image src="../../static/rollDice/05.png" class="smallDiceimg" mode=""></image>
<text>X {{fiv}}</text>
</view>
<view class="totaldiceItem">
<image src="../../static/rollDice/06.png" class="smallDiceimg" mode=""></image>
<text>X {{six}}</text>
</view>
</view>
</view>
<!-- <view class="smallTipBox">
<text v-show="gameType == 2">上划骰盅可提前查看结果</text>
<text v-show="gameType == 3">点击右下角可重新开始</text>
</view> -->
<view class="btnBox">
<view v-show="gameType == 3" @click="playGame()" class="startBtn">
再来一局
</view>
</view>
<!-- 记录 -->
<view class="footBox">
<!-- <image @click="setRecord()" src="../../static/rollDice/record.png" class="recordImg" mode=""></image> -->
<view v-if="gameType == 3" @click="reface()" class="footBtn">
复
</view>
<view @click="setShakeBtnState()" class="footBtn shakeBtn" :class="{'shakeBtnActive':!shakeBtnState}">
摇
</view>
</view>
<!-- <view v-show="recordShow" class="recordBox">
<view @click="recordShow = false" class="closeBox">
X
</view>
<view class="title">
历史开骰记录
</view>
<view class="headTitle">
<view class="whead">总和</view>
<image src="../../static/rollDice/01.png" class="diceRecordimg" mode=""></image>
<image src="../../static/rollDice/02.png" class="diceRecordimg" mode=""></image>
<image src="../../static/rollDice/03.png" class="diceRecordimg" mode=""></image>
<image src="../../static/rollDice/04.png" class="diceRecordimg" mode=""></image>
<image src="../../static/rollDice/05.png" class="diceRecordimg" mode=""></image>
<image src="../../static/rollDice/06.png" class="diceRecordimg" mode=""></image>
</view>
<scroll-view scroll-y="true" class="diceContentBox">
<view v-for="(item,index) in recordList" :key="index" class="diceContent">
<text class="whead">{{item.point}}点</text>
<text>{{item.one}}个</text>
<text>{{item.two}}个</text>
<text>{{item.thr}}个</text>
<text>{{item.fou}}个</text>
<text>{{item.fiv}}个</text>
<text>{{item.six}}个</text>
</view>
</scroll-view>
</view> -->
<!-- 设置 -->
<!-- 左上角设置，可设置音乐，震动，筛子个数，自动开 -->
<view @click="setBoxShow = true" class="setBtn">
<image src="../../static/set.png" mode=""></image>
</view>
<view v-show="setBoxShow" class="setBox">
<view @click="setBoxShow = false" class="closeBox">
X
</view>
<view class="title">
设置
</view>
<view @click="automated = !automated" class="handleBtn">
自动开骰：{{automated?'开启':'关闭'}}
</view>
<view @click="musicshow = !musicshow" class="handleBtn">
声音：{{musicshow?'开启':'关闭'}}
</view>
<view @click="shakeShow = !shakeShow" class="handleBtn">
震动：{{shakeShow?'开启':'关闭'}}
</view>
<!-- <view class="handleBtn setCountBox">
<text>骰子：</text>
<image @click="setcount()" src="../../static/rollDice/reduce.png" mode=""></image>
<text style="width: 100rpx;">{{diceCount}}</text>
<image @click="setcount('add')" src="../../static/rollDice/add.png" mode=""></image>
</view> -->
</view>
</view>
</template>
<script>
import store from '@/store/index.js'; //需要引入store
export default {
data() {
return {
shakeBtnState: true, // 摇一摇
shakeState: false, // 摇一摇执行一次
opacityShow: 0, // 统计透明度
YStart: '', // 开始位置
yMove: 0,
setBoxShow: false, // 设置
musicshow: true, // 音乐
shakeShow: true, // 震动
automated: false, // 自动开
recordShow: false, // 记录
gameType: 0, // 0:游戏准备，1摇骰子中，2等待开筛子，3已经开过筛子
point: 0,
one: 0,
two: 0,
thr: 0,
fou: 0,
fiv: 0,
six: 0,
diceCount: 5,
diceWidth: 70,
diceList: [],
diceAll: [{
img: '../../static/rollDice/01.png',
dicesum: 1
}, {
img: '../../static/rollDice/02.png',
dicesum: 2
}, {
img: '../../static/rollDice/03.png',
dicesum: 3
}, {
img: '../../static/rollDice/04.png',
dicesum: 4
}, {
img: '../../static/rollDice/05.png',
dicesum: 5
}, {
img: '../../static/rollDice/06.png',
dicesum: 6
}],
recordList: [],
cheatActive: false,
cheatSum: 0,
}
},
onLoad() {
// #ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
// #endif
this.diceCount = store.state.diceSum
this.startGyroscope()
uni.onGyroscopeChange((res) => {
// Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ);
var nowRange = Math.abs(res.x) + Math.abs(res.x) + Math.abs(res.x);
console.log(nowRange)
if (nowRange > 10) {
this.shakeState = true
}
if (this.shakeState) {
this.stopGyroscope()
this.shakeState = false
this.playGame()
}
});
},
onShareAppMessage() {
return {
title: '聚会喝酒神器，摇骰子、指尖轮盘',
imageUrl: '/static/logo.png',
path: 'pages/index/index'
}
},
onShareTimeline() {
return {
title: '聚会喝酒神器，摇骰子、指尖轮盘',
imageUrl: '/static/logo.png',
}
},
onShow() {
// this.playGame()
},
onHide() {
this.stopGyroscope()
},
methods: {
setShakeBtnState(){
this.shakeBtnState = !this.shakeBtnState
if(this.shakeBtnState){
this.startGyroscope()
}else{
this.stopGyroscope()
}
},
setCheat(diceCheat) {
let cheatStatus = true
this.diceList.map(value => {
if (cheatStatus) {
if (value.dice != diceCheat) {
value.dice = diceCheat
cheatStatus = false
}
}
})
// if( this.cheatSum < this.diceCount){
// this.diceList[this.cheatSum].dice = diceCheat
// this.cheatSum++
// }else{
// this.cheatSum = 0
// this.diceList[this.cheatSum].dice = diceCheat
// }
this.diceCountDice()
},
// 开始触摸屏幕
maskTouchStart(ev) {
this.YStart = ev.changedTouches[0].pageY
},
// 触摸移动
maskTouchMove(ev) {
var result = 0
if (this.gameType == 2) {
result = parseInt(this.YStart - ev.changedTouches[0].pageY)
}
if (result > 0) {
this.yMove = result
this.opacityShow = result / 100
}
},
// 触摸结束
maskTouchEnd(ev) {
this.yMove = 0
this.opacityShow = 0
},
//监听陀螺仪
startGyroscope() {
uni.startGyroscope({
interval: "normal",
success() {
console.log('success')
},
fail() {
console.log('fail')
}
})
},
//停止监听陀螺仪
stopGyroscope() {
uni.stopGyroscope({
success() {
console.log('stop success!')
},
fail() {
console.log('stop fail!')
}
})
},
setcount(txt) {
if (txt == 'add') {
if (this.diceCount < 100) {
store.commit('addDiceSum')
this.diceCount++
}
} else {
if (this.diceCount > 1) {
store.commit('reduceDiceSum')
this.diceCount--
}
}
},
// 查看记录
setRecord() {
this.recordShow = true
},
// 开起骰子
openDice() {
this.opacityShow = 1
this.gameType = 3
// this.stopGyroscope()
},
// 重置游戏
reface() {
this.opacityShow = 0
this.gameType = 0
this.diceList = []
this.recordList[this.recordList.length] = {
'point': this.point,
'one': this.one,
'two': this.two,
'thr': this.thr,
'fou': this.fou,
'fiv': this.fiv,
'six': this.six,
}
if(this.shakeBtnState){
this.startGyroscope()
}
},
palyAudio() {
let innerAudioContext = '';
innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = '/static/rollDice/dice.mp3';
innerAudioContext.onPlay(() => {});
},
// 开始游戏
playGame() {
this.stopGyroscope()
this.opacityShow = 0
this.gameType = 0
this.diceList = []
// 震动
if (this.shakeShow) {
uni.vibrateLong();
}
if (this.musicshow) {
this.palyAudio()
}
this.setDice()
this.diceCountDice()
this.gameType = 1
setTimeout(() => {
if(this.shakeBtnState){
this.startGyroscope()
}
// 自动开骰
if (this.automated) {
this.gameType = 3
this.opacityShow = 1
} else {
this.gameType = 2
}
}, 2000)
},
// 设置骰子位置前
setDice() {
var arr = [] // 深拷贝
// 生成坐标数组
if (this.diceCount > 9) {
let pointSum = Math.floor(Math.sqrt(this.diceCount)) + 1
this.diceWidth = parseInt(240 / pointSum)
for (let i = 0; i < pointSum; i++) {
for (let k = 0; k < pointSum; k++) {
arr[arr.length] = {
top: i * this.diceWidth,
left: k * this.diceWidth
}
}
}
} else {
for (let i = 0; i < 3; i++) {
for (let k = 0; k < 3; k++) {
arr[arr.length] = {
top: i * 80,
left: k * 80
}
}
}
}
var dice, angle, temp, tempList
for (var i = 0; i < this.diceCount; i++) {
dice = (Math.random() * 6) >> 0
angle = (Math.random() * 6) >> 0
temp = (Math.random() * arr.length) >> 0;
// 让数组不重复
tempList = arr[temp];
arr.splice(temp, 1)
this.addDiceList(dice, angle, tempList)
}
},
// 设置骰子
addDiceList(dice, angle, tempList) {
this.diceList.push({
"rotate": 30 * angle,
"dice": dice,
"top": tempList.top,
"left": tempList.left
})
},
// 统计数量
diceCountDice() {
this.one = 0
this.two = 0
this.thr = 0
this.fou = 0
this.fiv = 0
this.six = 0
let sum = 0
console.log(this.diceList)
this.diceList.forEach((item) => {
sum = sum + item.dice + 1
switch (item.dice) {
case 0:
this.one++;
break;
case 1:
this.two++;
break;
case 2:
this.thr++;
break;
case 3:
this.fou++;
break;
case 4:
this.fiv++;
break;
case 5:
this.six++;
break;
}
})
this.point = sum
}
}
}
</script>
<style lang="scss">
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.gameBg {
position: fixed;
width: 750rpx;
height: 100vh;
}
/* 骰子 */
.diceCountent {
position: absolute;
left: 130rpx;
padding-top: 60rpx;
.bgimg {
position: absolute;
top: 270rpx;
width: 500rpx;
height: 520rpx;
}
.dicebox {
position: relative;
top: 330rpx;
margin-left: 110rpx;
z-index: 10;
}
.diceitem {
position: absolute;
}
.diceimg {
width: 100%;
height: 100%;
}
.maskbox {
position: absolute;
margin-left: 40rpx;
width: 430rpx;
height: 600rpx;
z-index: 10;
}
}
.diceSumBox {
position: absolute;
top: 410rpx;
font-size: 180rpx;
font-weight: bold;
color: #d2d1d9;
z-index: 10;
width: 750rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.numImg {
width: 140rpx;
height: 140rpx;
}
}
.rollDiceAnimation {
animation: moveRoll 1.2s;
}
@keyframes moveRoll {
0% {
left: 130rpx;
}
5% {
left: 0rpx;
}
15% {
left: 260rpx;
}
25% {
left: 0rpx;
}
35% {
left: 260rpx;
}
45% {
left: 0rpx;
}
55% {
left: 260rpx;
}
65% {
left: 0rpx;
}
75% {
left: 260rpx;
}
85% {
left: 0rpx;
}
95% {
left: 260rpx;
}
100% {
left: 130rpx;
}
}
// 结果统计
.totalbox {
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
width: 680rpx;
border-radius: 30rpx;
margin: 10rpx auto 30rpx;
padding: 0 10rpx 30rpx;
border: 8rpx #7b422e solid;
// background: linear-gradient(#FFFFFF, #0ba952);
background: #28292f;
position: relative;
.totalboxTitle {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
line-height: 90rpx;
.pointSum {
font-size: 60rpx;
font-weight: bold;
line-height: 90rpx;
}
}
.smallDiceimg {
width: 90rpx;
height: 90rpx;
}
.totaldicebox {
display: flex;
width: 100%;
padding: 10rpx 0;
}
.totaldiceItem {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.totaldiceItem text {
margin-left: 10rpx;
font-size: 56rpx;
font-weight: bold;
}
}
.btnBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
z-index: 10;
font-size: 46rpx;
.startBtn {
width: 260rpx;
border: 8rpx #452f28 solid;
color: #452f28;
padding: 0 40rpx;
line-height: 80rpx;
border-radius: 40rpx;
font-weight: bold;
font-size: 58rpx;
background: #f7d16a;
}
.openBtn {
margin: -190rpx 0 30rpx 0;
font-size: 72rpx;
font-weight: bold;
color: #f7d16a;
line-height: 160rpx;
text-align: center;
width: 160rpx;
height: 160rpx;
border-radius: 100rpx;
border: 8rpx #452f28 solid;
color: #452f28;
background: #f7d16a;
}
}
// 历史记录
.recordBox {
position: fixed;
bottom: 0;
width: 670rpx;
height: 60vh;
z-index: 10;
background: #faf5ec;
border: 10rpx #755345 solid;
padding: 20rpx 30rpx;
border-radius: 50rpx 50rpx 0 0;
.title {
width: 100%;
font-weight: bold;
line-height: 120rpx;
font-size: 40rpx;
text-align: center;
}
.closeBox {
position: absolute;
right: 0;
top: 0;
font-size: 40rpx;
font-weight: bold;
padding: 20rpx 30rpx;
}
.headTitle {
display: flex;
align-items: center;
justify-content: space-around;
.whead {
font-weight: bold;
text-align: center;
width: 110rpx;
}
.diceRecordimg {
width: 54rpx;
height: 54rpx;
}
}
.diceContentBox {
height: 40vh;
margin-top: 20rpx;
overflow: hidden;
border: 2rpx #c1c1c1 solid;
}
.diceContent {
display: flex;
align-items: center;
color: #333333;
justify-content: space-around;
line-height: 70rpx;
border-bottom: 2rpx #999 solid;
.whead {
text-align: center;
width: 110rpx;
}
text {
width: 54rpx;
text-align: center;
}
}
}
.footBox {
position: fixed;
width: 650rpx;
display: flex;
bottom: 50rpx;
left: 50rpx;
height: 90rpx;
.recordImg {
width: 90rpx;
height: 90rpx;
}
.footBtn{
font-size: 40rpx;
text-align: center;
font-weight: bold;
width: 90rpx;
line-height: 90rpx;
height: 90rpx;
border-radius: 100rpx;
border: 6rpx #f7d16a solid;
color: #f7d16a;
}
.shakeBtn{
position: absolute;
right: 0rpx;
}
.shakeBtnActive{
text-decoration: line-through;
border: 6rpx #FFFFFF solid;
color: #FFFFFF;
}
.shakeBtnActive::after{
content: '';
position: absolute;
bottom: 0; // 先在div下面创建一条线
left: 0;
width: 120rpx; // 宽度可固定，也可根据需求计算
height: 8rpx; // 高度，即线粗
background-color: #FFFFFF; // 设置线的背景色，即线条颜色
transform-origin: left; // 将旋转的参考点设置为左端，即以左边为原点，用来后面的旋转
transform: rotate(-45deg); // 旋转-45°
}
}
// 设置
.setBtn {
position: fixed;
top: 80rpx;
left: 40rpx;
image {
width: 80rpx;
height: 80rpx;
}
}
.setBox {
z-index: 10;
position: fixed;
top: 26vh;
left: 110rpx;
color: #442e27;
border: 10rpx #755345 solid;
border-radius: 30rpx;
padding: 0 50rpx 50rpx 50rpx;
background: #faf5ec;
.title {
width: 100%;
font-weight: bold;
line-height: 140rpx;
font-size: 40rpx;
text-align: center;
}
.handleBtn {
border-radius: 30rpx;
font-size: 34rpx;
font-weight: bold;
line-height: 70rpx;
text-align: center;
width: 400rpx;
background: #f7d16a;
border: 6rpx #6c5447 solid;
margin-bottom: 20rpx;
}
.closeBox {
position: absolute;
right: 0;
font-size: 40rpx;
font-weight: bold;
padding: 10rpx 20rpx;
}
.setCountBox {
display: flex;
align-items: center;
justify-content: center;
image {
width: 40rpx;
height: 40rpx;
padding: 0 10rpx;
}
}
}
.smallTipBox {
letter-spacing: 14rpx;
position: absolute;
top: 160rpx;
width: 750rpx;
text-align: center;
color: #f7d16a;
font-size: 38rpx;
font-weight: bold;
z-index: 10;
text{
text-shadow: 8rpx 10rpx 10rpx #47382b;
}
}
</style>
