1、移动端
1-1、引入mqtt及使用接收数据、推数据
可以npm安装、也可以下载下来直接引入，该移动端用uniapp搭建，直接将mqtt.js直接放入项目utils文件夹下，
import mqtt from '@/utils/mqtt.js'<template>
<view class="nature box">
<view class="container">
<el-banner></el-banner>
<view class="main">
<view class="dead_box nature_item" >
<view class="box_title">选择逝者（最多可选3名逝者）</view>
<view class="dead_list">
<u-checkbox-group
v-model="deadIdArray"
@change="checkboxChange"
:borderBottom="true"
placement="column"
iconPlacement="right"
>
<u-checkbox
activeColor="#217672"
shape="circle"
:customStyle="{marginBottom: '16px'}"
v-for="(item, index) in deads"
:key="index"
:label="item.deadName"
:name="item.id"
>
</u-checkbox>
</u-checkbox-group>
</view>
<view class="add_dead" @click="goAddDead">添加新的逝者</view>
</view>
<!-- 选择自然类 -->
<view class="nature_box nature_item">
<view class="box_title">选择自然类</view>
<view class="imgs_list">
<view @click="selectedBgImg(item,index)" :style="{backgroundImage:'url('+item.url+')'}" class="img_item" v-for="(item,index) in imgs" :key="item.id">
<view class="check_box">
<view v-if="currentIndex==index" class="check_tips"></view>
</view>
</view>
</view>
</view>
<!-- 选择音乐 -->
<view class="music_box nature_item">
<view class="box_title">选择背景音乐</view>
<view class="audios_list">
<u-radio-group
v-model="selectedAudioId"
:borderBottom="true"
placement="column"
iconPlacement="right">
<u-radio
activeColor="#217672"
shape="circle"
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in audios"
:key="index"
:label="item.name"
:name="item.id"
>
</u-radio>
</u-radio-group>
</view>
</view>
<!-- 获取验证码 -->
<view class="code_box nature_item">
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
<!-- #ifndef APP-NVUE -->
<u-input v-model="verCode" placeholder="请输入大屏幕验证码">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input v-model="verCode" placeholder="请输入大屏幕验证码">
<!-- #endif -->
<template slot="suffix">
<u-button
@tap="getCode"
shape='circle'
type="success"
v-if="!hasGetCode"
>获取验证码</u-button>
</template>
<!-- #ifndef APP-NVUE -->
</u-input>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</u--input>
<!-- #endif -->
<view v-if="hasGetCode" class="tips">验证码正在大屏幕上生成，请稍后输入</view>
<view v-if="Useing" class="tips">大屏幕正在使用中</view>
<view class="submit_btn" style="margin-top:30rpx" @click="startMemorial">开始祭奠</view>
</view>
<view class="tips">
<view class="tips_title">注意:</view>
<view class="tips_item">祭奠服务需输入现场大屏墓验证码，确定后，将在所选大屏幕显示祭奠信息</view>
<view class="tips_item">为能够给更多用户提供优质服务，定制服务限定每日1次，每次时长为30分钟</view>
<view class="tips_item">点击开始祭祀后，大屏墓出现倒计时提示</view>
</view>
</view>
<el-footer></el-footer>
</view>
<el-tool-box><!-- <view slot='toolCenter' class="share_btn" @click="wxShare">邀请亲友分享</view> --></el-tool-box>
<u-overlay :show="show" @click="show = false">
<view class="mask_content" @click="show = false">
<image
class="arrow"
:src="require('../../static/img/arrow.png')"
alt=""
/>
<view class="mask_main">
<view class="main_item">
<view class="item_tip"><text>1</text></view>
<view class="item_test">
<text>点击右上角</text>
<view class="item_btn">
<text>. . .</text>
</view>
<text>按钮</text>
</view>
</view>
<view class="main_item">
<view class="item_tip"><text>2</text></view>
<view class="item_test">
<text>将本页面分享给好友</text>
</view>
</view>
</view>
</view>
</u-overlay>
</view>
</template>
<script>
import { memorialMaterialList,deadList,saveMemorialOrder,getCode} from '@/api/index.js';
import mqtt from '@/utils/mqtt.js'
import {mqttUrl,topic} from '@/config/baseUrl.js'
// import sdk from "@/utils/wxShare";
export default {
data() {
return {
getVerCode:'',
show:false,
client:null,
orderId:0,
deads:[],
deadIdArray:[],
imgs:[],
audios:[],
selectedImgId:'',
currentIndex:0,
selectedAudioId:'',
hasGetCode:false,
Useing:false,
verCode:'',
};
},
onLoad(option) {
this.orderId=option.orderId;
// console.log(this.id,'878')
},
onShow() {
this.getDeadList();
},
created() {
this.connectMqtt();
this.getAudiosList();
this.getImgList();
},
mounted() {
// var ua = window.navigator.userAgent.toLowerCase();
// if (ua.match(/MicroMessenger/i) == "micromessenger") {
// var u = navigator.userAgent,
// app = navigator.appVersion;
// var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// if (isIOS) {
// if (window.location.href.indexOf("#reloaded") == -1) {
// window.location.href = window.location.href + "#reloaded";
// window.location.reload();
// }
// }
// }
},
methods: {
ininShare(data) {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
let obj = {
title: `${data.deadName}的纪念馆`,
des: `${data.biography}`,
linkurl: `${process.env.VUE_APP_WEB_LINK}/memorialHall/${data.id}`, //分享链接
img: `${data.deadPortraitUrl}`,
};
// let url = encodeURIComponent(location.href.split('#')[0]);
let url = location.href.split("#")[0];
sdk.getJSSDK(url, obj);
} else {
}
},
wxShare(){
this.show=true
},
//获取验证码
async getCode(){
let equipmentCode= uni.getStorageSync('equipmentCode');
let openId=uni.getStorageSync('openId')
let res = await getCode({equipmentCode,openId})
console.log(res,'获取验证码')
if(res.code==0){
this.Useing=true
return
}
this.getVerCode=res
//推送消息 code到大屏
let params={"screenCode":res,"type":1,serviceName:'自然类',equipmentCode}
this.pushData(params)
this.hasGetCode=true
},
//推数据
pushData(params){
if (!this.client.connected) {
console.log('客户端未连接')
return
}
this.client.publish(`${topic}`,JSON.stringify(params),{qos: 1},(err) => {
if(!err) {
console.log('主题为jmdz-jd1发布成功')
}
})
},
//停止祭奠
//停止祭奠
async stopMemorial() {
let equipmentCode= uni.getStorageSync('equipmentCode');
let params={
status:0,
id:this.orderId,
}
let res = await saveMemorialOrder(params)
console.log(res,'自然类停止祭奠')
if(res.code!==1){
return
}
let msg={type:3,serviceName:'自然类',equipmentCode}
this.pushData(msg)
// uni.redirectTo({
// url:'/pages/index/index'
// })
},
//链接mqtt
connectMqtt () {
const options={
clean: true, // true: 清除会话, false: 保留会话
connectTimeout:4000,
//clientId:'mqtttext',
clientId:`mqttText${Math.random()}`,
// port:8083,
username:'admin',
password:'public'
}
this.client=mqtt.connect(mqttUrl,options);
this.client.on('connect',e=>{
console.log('服务器链接成功');
this.client.subscribe(`${topic}`,{qos:2},err=>{
if(!err){
console.log('订阅成功');
}
})
})
//信息监听事件
this.client.on('message',(topic,message)=>{
console.log('收到'+message.toString());
let res = JSON.parse(message.toString())
let equipmentCode= uni.getStorageSync('equipmentCode');
if(res.code!=equipmentCode) return
if(res.status==0){
this.stopMemorial()
}
// this.handelNotices(res);
// EventBus.$emit("reloadNoReadNotices");
})
//重连
this.client.on('reconnect',(err)=>{
console.log('正在进行重连',err);
})
//失败
this.client.on('error',(err)=>{
console.log('连接失败',err);
})
},
//获取逝者列表
async getDeadList(){
let openId= uni.getStorageSync("openId")
let res = await deadList({openId})
this.deads =res
},
//获取逝者列表
async getImgList(){
let res = await memorialMaterialList({ fileType: 1,serviceId:11})
this.imgs =res;
this.selectedImgId=res[0].id
},
//获取逝者列表
async getAudiosList(){
let res = await memorialMaterialList({ fileType: 2})
this.audios =res
},
//开始祭奠
async startMemorial(){
if(this.deadIdArray.length==0) return uni.$u.toast('请选择逝者')
if(!this.verCode) return uni.$u.toast('请输入大屏验证码')
if(this.getVerCode!=this.verCode)return uni.$u.toast('验证码错误,请重新输入')
let openId=uni.getStorageSync('openId')
let equipmentCode= uni.getStorageSync('equipmentCode');
let res = await saveMemorialOrder({
id:this.orderId,
deadIdArray:this.deadIdArray,
verCode:this.verCode,
imageId:this.selectedImgId,
musicId:this.selectedAudioId,
status:1,
openId
})
//所选逝者
let deads = []
this.deads.forEach(item=>{
this.deadIdArray.forEach(id=>{
if(item.id==id){
deads.push(item)
}
})
})
//所选图片
let selectedImg={}
this.imgs.forEach(item=>{
if(item.id==this.selectedImgId){
selectedImg=item
}
})
//所选音乐
let selectedMusic={}
this.audios.forEach(item=>{
if(item.id==this.selectedAudioId){
selectedMusic=item
}
})
console.log(deads,selectedImg,selectedMusic,'自然类所选的逝者、图片、音乐')
let params={
deads,
selectedImg,
selectedMusic,
type:2,
serviceName:'自然类',
equipmentCode,
}
//推送消息大屏展示图iOS你改的数据
this.pushData(params)
uni.navigateTo({
url:`/pages/startMemorial/natureDetail?orderId=${this.orderId}`
})
},
//选择逝者
checkboxChange(e) {
if(e.length>3){
e.pop();
// console.log(this.deadIdArray)
return uni.$u.toast('最多可选3名逝者')
}
},
//新增逝者
goAddDead(){
uni.navigateTo({
url:'/pages/addDead/addDead'
})
},
//选择背景
selectedBgImg(item,index){
console.log(item,'555')
this.selectedImgId = item.id;
this.currentIndex = index
},
},
}
</script>
<style lang="scss" scoped>
.main{
/deep/ .u-border-bottom{
border-color: #B0CEC6!important;
}
.box_title{
text-align: center;
font-size:28rpx ;
line-height: 40rpx;
color: $uni-default-color;
font-weight: 600;
margin-bottom: 20rpx;
}
.nature_item{
padding:28rpx 32rpx;
background-color: #fff;
border:1px solid #B0CEC6;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.dead_box{
.dead_list{
}
.add_dead{
font-size: 28rpx;
color: $uni-default-color;
line-height: 40rpx;
text-align: center;
}
}
.nature_box{
.imgs_list{
.img_item{
position: relative;
width: 100%;
height: 238rpx;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
// background-size: 100% 100%;
margin-bottom: 20rpx;
border-radius: 6rpx;
.check_box{
position: absolute;
right:20rpx;
top:20rpx;
width:24rpx;
height: 24rpx;
background: transparent;
border:2rpx solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.check_tips{
width:12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #fff;
}
}
.check_box .active{
}
}
}
}
.code_box{
/deep/ .u-button--success{
background-color: $uni-default-color;
border-color: $uni-default-color;
}
/deep/ .u-border{
border-color: $uni-default-color!important;
}
/deep/ .uni-input-placeholder{
color: $uni-default-color!important;
}
.tips{
color: red;
font-size: 24rpx;
line-height: 60rpx;
text-align: center;
}
}
}
</style>2、PC端
<template>
<div class="home" :style="{backgroundImage:'url('+bg+')'}">
<!-- 左上角二维码 -->
<div v-if="status==1" class="code_box">
<!-- <qrcode :value='qrcodeUrl' v-if="qrcodeUrl" :options='{size:170}'></qrcode> -->
<img :src="qrcodeUrl" v-if="qrcodeUrl" class="qr_code" alt="">
<div>扫码祭奠</div>
</div>
<!-- 自然类中间逝者 -->
<div class="deads" v-if="status==3&&serviceName=='自然类'">
<div class="dead_item" v-for="item in deads" :key="item.id">
<div v-if="item.deadImage" class="item_avatar" :style="{backgroundImage:'url('+item.deadImage+')'}">
<!-- <img class="avatar" :src="item.avatar" alt=""> -->
</div>
<div v-else class="item_avatar" :style="{backgroundImage:'url('+defaultDeadAvatar+')'}">
<!-- <img class="avatar" :src="item.avatar" alt=""> -->
</div>
<div class="item_name">{{item.deadName}}</div>
<div class="item_time">{{item.birthday}}--{{item.deadDate}}</div>
</div>
</div>
<!-- 纪念堂中间逝者1逝者 -->
<div class="deads1" v-if="status==3 && serviceName=='纪念堂' && deads.length==1">
<div class="dead_item" v-for="item in deads" :key="item.id">
<div class="item_avatar" >
<div v-if="item.deadImage" class="avatar" :style="{backgroundImage:'url('+item.deadImage+')'}" ></div>
<div v-else class="avatar" :style="{backgroundImage:'url('+defaultDeadAvatar+')'}" ></div>
</div>
<div class="item_name">{{item.deadName}}</div>
</div>
</div>
<!-- 纪念堂中间逝者2逝者 -->
<div class="deads2" v-if="status==3 && serviceName=='纪念堂' && deads.length==2">
<div class="dead_item" v-for="item in deads" :key="item.id">
<div v-if="item.deadImage" class="item_avatar" :style="{backgroundImage:'url('+item.deadImage+')'}">
<!-- <img class="avatar" :src="item.avatar" alt=""> -->
</div>
<div v-else class="item_avatar" :style="{backgroundImage:'url('+defaultDeadAvatar+')'}">
<!-- <img class="avatar" :src="item.avatar" alt=""> -->
</div>
<div class="item_name">{{item.deadName}}</div>
</div>
</div>
<!-- 二维码倒计时 -->
<div class="code_time" v-if="status==3">
<div class="code_wrap">
<img :src="qrcodeUrl" v-if="qrcodeUrl" class="qr_code1" alt="">
<!-- <qrcode :value='qrcodeUrl' v-if="qrcodeUrl" :options='{size:120}'></qrcode> -->
<span>扫码祭奠</span>
</div>
<div class="time_box">
<!-- <div>祭祀倒计时</div> -->
<el-statistic @finish='finishCountTime' :value="time" format='mm:ss' time-indices title="祭祀倒计时">
</el-statistic>
</div>
</div>
<!-- 祭奠验证码 -->
<div class="verify_code" v-if="status==2">
<div class="verify_code_title">祭祀验证码</div>
<div class="verify_code_box">
<div class="code_item" v-for="(item,index) in verifyCode" :key="index">{{item}}</div>
</div>
</div>
<!--祭品盒子 -->
<div class="good_box" v-show="showGood">
<!-- 商品 -->
<img class="good" :src="selectedGood" alt="">
</div>
<!--上香、献花-->
<img class="ju_gong" v-show="juGong" :src="juGong" alt="">
<!-- 背景音乐 -->
<!-- v-if="selectedMusic" -->
<audio
ref="music"
preload="auto"
loop
:controls="false"
id="music"
autoplay
>
<!-- <source :src="selectedMusic" /> -->
</audio>
<!-- 蜡烛和香 -->
<div class="lazhu_xiang" v-if="laZhuXiangGoods[0].fileUrl">
<img class="lazhu_xiang_item" v-show="item.fileUrl" v-for="(item,index) in laZhuXiangGoods" :key="index" :src="item.fileUrl" />
</div>
<!-- 其余商品 -->
<div class="goods" v-if="goods.length>0">
<img class="good_item" v-for="(item,index) in goods" :key="index" :src="item.fileUrl" />
</div>
</div>
</template>
<script>
import defaultBg from '@/assets/bg.jpg'
import shangXiang from '@/assets/js-04.gif'
import xianHua from '@/assets/js-02.gif'
import defaultMp3 from '@/assets/default.mp3'
import defaultDeadAvatar from '@/assets/defaultDeadAvatar.jpg'
import mqtt from 'mqtt';
// import Qrcode from '@xkeshi/vue-qrcode';
import animateCSS from "@/utils/animateCSS";
import { mqttUrl,topic } from '@/config/baseUrl.js';
import { getQRCode } from '@/api/index.js';
export default {
name: 'Home',
data() {
return {
defaultDeadAvatar,
equipmentCode:'',
juGong:'',
laZhuXiangGoods:[{},{},{}],
goods:[],
serviceName:'',
client:null,
// time:Date.now() + 1000 * 60 * 10,
time:'',
bg:defaultBg,
qrcodeUrl:'',
selectedGood:'',
selectedMusic:'',
status:1,//1未使用2准备使用3正在使用
verifyCode:[],
deads:[
],
showGood:false,
}
},
created () {
// this.selectedMusic=defaultMp3
this.equipmentCode= this.getQueryString('equipmentCode')
console.log(this.equipmentCode,'884')
localStorage.setItem('equipmentCode',this.equipmentCode);
this.getQRCodeUrl()
this.connectMqtt();
},
// components:{
// qrcode: Qrcode
// },
mounted () {
// 播放音乐
// document.addEventListener("DOMContentLoaded", ()=> {
// this.audioAutoPlay();
// });
},
watch: {
goods(newValue, oldValue) {
if(newValue.length>5){
this.goods.pop()
}
}
},
methods: {
//音乐播放
audioAutoPlay() {
let audio = this.$refs.music;
audio.play();
document.addEventListener(
"WeixinJSBridgeReady",
function () {
audio.play();
},
false
);
},
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
},
//获取二维码
async getQRCodeUrl(){
let res = await getQRCode({equipmentCode:this.equipmentCode})
if(res.code!=1) return this.$message.error(res.message)
this.qrcodeUrl= res.data.qrCode
},
showGoodBox(){
animateCSS('.good_box', 'zoomIn').then((message) => {
this.showGood=false
// animateCSS('.good_box', 'fadeOut').then((message) => {
// });
});
},
connectMqtt () {
const options={
clean: true, // true: 清除会话, false: 保留会话
connectTimeout:4000,
//clientId:'mqtttext',
clientId:`mqttText${Math.random()}`,
// port:8083,
username:'admin',
password:'public'
}
this.client=mqtt.connect(mqttUrl,options);
this.client.on('connect',e=>{
console.log('服务器链接成功');
this.client.subscribe(`${topic}`,{qos:2},err=>{
if(!err){
console.log('订阅成功');
}
})
})
//信息监听事件
this.client.on('message',(topic,message)=>{
//console.log('收到'+message.toString());
console.log('收到'+message);
this.selectedMusic=''
let res = JSON.parse(message.toString())
console.log(res,'7474')
if(this.equipmentCode!=res.equipmentCode) return
this.serviceName=res.serviceName
//type:1获取验证码3停止祭奠
if(res.type==1){
//获取验证码
this.verifyCode=res.screenCode.toString().split("");
this.status=2
}else if(res.type==2){
//开始祭奠
this.deads=res.deads;
this.bg=res.selectedImg.url
// if(res.selectedMusic) this.selectedMusic=res.selectedMusic.fileUrl
if(res.selectedMusic)this.$refs.music.src =res.selectedMusic.fileUrl
// this.$nextTick(() => {
// const { music } = this.$refs
// music.load()
// // music.play()
// })
// console.log(this.selectedMusic)
this.status=3
this.time=Date.now() + 1000 * 60*10
}else if(res.type==3){
//type ==3停止祭奠
this.status=1
this.bg=defaultBg
// this.selectedMusic=''
this.$refs.music.src=''
this.laZhuXiangGoods=[{},{},{}]
this.goods=[]
}else if(res.type==4){
//type ==4 祭奠物品
this.selectedGood=res.good.fileUrl;
//商品动画展现
this.showGood=true
this.showGoodBox();
//鞠躬
this.juGongAction(res.good.goodsType)
if(res.good.goodsType==1){
//蜡烛
this.laZhuXiangGoods[0]=res.good
this.laZhuXiangGoods[2]=res.good
}else if(res.good.goodsType==2){
//上香
this.laZhuXiangGoods[1]=res.good
}else{
this.goods.unshift(res.good)
}
}
// this.handelNotices(res);
// EventBus.$emit("reloadNoReadNotices");
})
//重连
this.client.on('reconnect',(err)=>{
console.log('正在进行重连',err);
})
//失败
this.client.on('error',(err)=>{
console.log('连接失败',err);
})
},
//
//音乐播放
audioAutoPlay() {
let audio = this.$refs.music;
audio.play();
document.addEventListener(
"WeixinJSBridgeReady",
function () {
audio.play();
},
false
);
},
//鞠躬
juGongAction(type){
if(type==2){
//上香
this.juGong=shangXiang
}else if(type==4){
//献花
this.juGong=xianHua
}
// setTimeout(()=>{
// },2000)
animateCSS('.ju_gong', 'fadeIn').then((message) => {
this.juGong=''
});
},
//倒计时结束
finishCountTime(){
// alert('倒计时结束')
this.status=1
this.bg=defaultBg;
// this.selectedMusic=''
this.$refs.music.src=''
this.laZhuXiangGoods=[{},{},{}]
this.goods=[]
if (!this.client.connected) {
console.log('客户端未连接')
return
}
let message={title:'倒计时结束',status:0,code:this.code}
this.client.publish(`${topic}`,JSON.stringify(message),{qos: 1},(err) => {
if(!err) {
console.log('主题为jmdz-jd1发布成功')
}
})
}
},
}
</script>
<style lang='scss' scoped>
.home{
width: 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
// background-size: 100% 100%;
background-size: cover;
position: relative;
display: flex;
// align-items: center;
justify-content: center;
align-items: flex-start;
.qr_code{
width: 170px;
height: 170px;
display: block;
}
.qr_code1{
width: 120px;
height: 120px;
}
/deep/ .el-statistic .head{
color: #fff;
}
.ju_gong{
animation-duration: 4s;
--animate-delay: 2s;
}
.code_box{
position: absolute;
left:1%;
top:12%;
text-align: center;
}
.deads{
// padding:42px 33px;
// background: rgba(255,255,255,0.6);
// padding:20px;
display: flex;
align-items: center;
margin-top: 10%;
// backdrop-filter: blur(10px);
.dead_item{
// margin:0 17px;
text-align: center;
line-height: 30px;
padding:20px;
background: #fff;
margin-right: 20px;
.item_avatar{
width: 250px;
height: 350px;
background-repeat: no-repeat;
background-position: center;
// padding:37px;
// background: url('../assets/box.png') no-repeat;
background-size: cover;
overflow: hidden;
.avatar{
width: auto;
height: 100%;
}
}
}
}
.deads1{
position: absolute;
left:45%;
top:30%;
display: flex;
align-items: center;
justify-content: space-between;
.dead_item{
// margin:0 17px;
// margin-right: 15%;
text-align: center;
// line-height: 30px;
// padding:20px;
// background: #fff;
.item_avatar{
width: 150px;
height: 200px;
background-repeat: no-repeat;
// background-position: center;
padding:17px;
background: url('../assets/box.png') no-repeat;
background-size: 100% 100%;
overflow: hidden;
.avatar{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}
.item_name{
margin-top: 5%;
height: 40px;
line-height: 40px;
font-weight: 600;
background: rgba(255,255,255,0.6);
}
}
}
.deads2{
position: absolute;
left:40%;
top:41%;
display: flex;
align-items: center;
justify-content: space-between;
.dead_item{
// margin:0 17px;
margin-right: 15%;
text-align: center;
line-height: 30px;
// padding:20px;
// background: #fff;
.item_avatar{
width: 150px;
height: 200px;
background-repeat: no-repeat;
background-position: center;
// padding:37px;
// background: url('../assets/box.png') no-repeat;
background-size: cover;
overflow: hidden;
.avatar{
width: auto;
height: 100%;
}
}
.item_name{
margin-top: 25%;;
}
}
}
.code_time{
position: absolute;
right:10%;
bottom:2%;
display: flex;
.code_wrap{
text-align: center;
padding:15px;
background: #fff;
border-radius: 10px;
display: flex;
flex-direction: column;
span{
font-size: 12px;
line-height: 20px;
}
}
.time_box{
width: 100px;
height: 100px;
.el-statistic{
margin-left: 20px;
/deep/ .head{
// color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 40px;
}
/deep/ .con{
// color: #fff;
.number{
padding:10px;
background: #1D62DA;
border-radius: 5px;
color: #fff;
}
}
}
}
}
.verify_code{
position: absolute;
right: 10%;
bottom:10%;
text-align: center;
.verify_code_title{
font-size: 24px;
font-weight: 600;
letter-spacing: 5px;
line-height: 60px;
color: #fff;
text-shadow: 2px 2px 10px #fff;
}
.verify_code_box{
display: flex;
align-items: center;
.code_item{
width: 50px;
height: 70px;
background: #1D62DA;
color: #fff;
margin:0 10px;
text-align: center;
border-radius: 5px;
font-weight: 600;
font-size: 30px;
line-height: 70px;
}
}
}
// 商品盒子
.good_box{
position: absolute;
left:50%;
top:50%;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
background: url('../assets/light1.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.good{
display: block;
width: 200px;
}
}
// 鞠躬
.ju_gong{
position: absolute;
left:65%;
bottom:20%;
}
//香和蜡烛
.lazhu_xiang{
position: absolute;
width: 100%;
display: flex;
left:0%;
bottom:20%;
align-items: center;
justify-content: center;
.lazhu_xiang_item{
width: 100px;
height: 100px;
margin:0 20px;
}
}
//其余商品
.goods{
position: absolute;
width: 100%;
display: flex;
left:0;
bottom:8%;
align-items: center;
justify-content: center;
.good_item{
width: 100px;
height: 100px;
margin:0 20px;
}
}
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
