Browse Source

修改背景

master
yusong1228 3 weeks ago
parent
commit
c06f90daca
  1. BIN
      public/bg.jpg
  2. BIN
      public/bg.png
  3. 66
      src/views/DZP3.vue

BIN
public/bg.jpg

After

Width: 1920  |  Height: 1080  |  Size: 292 KiB

BIN
public/bg.png

Before

Width: 2400  |  Height: 1200  |  Size: 3.1 MiB

66
src/views/DZP3.vue

@ -126,30 +126,25 @@ onMounted(() => {
<template> <template>
<div class="full-background"> <div class="full-background">
<!-- <img :src="jiantou" alt="111"> -->
<!-- 把底图和转盘放入一个容器中统一定位 -->
<div class="lucky-wrapper">
<div class="wheel-base">
<div class="luckyWheel"> <div class="luckyWheel">
<LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
<LuckyWheel class="lucky" ref="myLucky" width="470" height="470" :default-config="wheelConfig"
:prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" /> :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
</div> </div>
<div class="full-background">
<!-- 其他原有代码不变 -->
</div> </div>
<div class="wheel-base">
</div> </div>
<!-- 弹窗得分效果 -->
<transition name="popup-fade"> <transition name="popup-fade">
<div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }"> <div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }">
<!-- <div class="score-popup" :class="{ 'boom-effect': showPopup }"> -->
<div class="ziti"> <div class="ziti">
{{ popupMessage }} {{ popupMessage }}
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
@ -252,15 +247,12 @@ onMounted(() => {
} }
.full-background { .full-background {
background-image: url('/public/bg.png');
background-size: cover;
background-image: url('/public/bg.jpg');
background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 0; z-index: 0;
} }
@ -273,24 +265,37 @@ onMounted(() => {
z-index: 999; z-index: 999;
} }
.luckyWheel {
.lucky-wrapper {
position: fixed; position: fixed;
z-index: 999;
left: 610px;
top: 300px; top: 300px;
pointer-events: auto;
left: 610px;
width: 568px;
height: 600px;
z-index: 999;
} }
/* 转盘底的样式 */
/* 背景底图 */
.wheel-base { .wheel-base {
background-image: url('/public/wheel-base1.png');
position: fixed;
left: 28%;
top: 160px;
width: 568px;
height: 600px;
z-index: 990;
position: relative;
width: 116%;
height: 128%;
background-image: url(/public/wheel-base1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
top: -11%;
left: -12%;
z-index: 1;
}
/* 转盘组件 */
.luckyWheel {
position: absolute;
top: 83px;
/* 微调转盘位置以对齐底图中心 */
left: 67px;
width: 434px;
height: 434px;
z-index: 2;
} }
@ -298,7 +303,8 @@ onMounted(() => {
.luckyWheel .lucky { .luckyWheel .lucky {
aspect-ratio: 1/1; aspect-ratio: 1/1;
color: aqua; color: aqua;
margin-top: -10%;
margin-top: 6%;
margin-left: 4%;
} }
h1 { h1 {

Loading…
Cancel
Save