Skip to content

V
vue3-quasar-ts-study01
Commit 41e8cf64 authored by hucy's avatar hucy ☘
Browse files
Options

fix:没啥提交

parent 79519c27
Hide whitespace changes
Inline Side-by-side
Showing with 13 additions and 12 deletions
src/modules/page9/element/SpinningWheelGame.vue
View file @ 41e8cf64
...@@ -17,18 +17,18 @@ function spinClick() { ...@@ -17,18 +17,18 @@ function spinClick() {
<div class="container"> <div class="container">
<div class="spin-btn" @click="spinClick">开始</div> <div class="spin-btn" @click="spinClick">开始</div>
<div class="wheel" ref="wheelRef"> <div class="wheel" ref="wheelRef">
<div class="number" style="--i: 1; --clr: #f2bdd0"> <div class="number" style="--i: 1; --clr: #feb54a">
<span>100</span> <span>100</span>
</div> </div>
<div class="number" style="--i: 2; --clr: #f0f4c1"><span>1</span></div> <div class="number" style="--i: 2; --clr: #d1e94a"><span>1</span></div>
<div class="number" style="--i: 3; --clr: #cccc99"><span>50</span></div> <div class="number" style="--i: 3; --clr: #96dea6"><span>50</span></div>
<div class="number" style="--i: 4; --clr: #cccccc"><span>0</span></div> <div class="number" style="--i: 4; --clr: #80dbe6"><span>0</span></div>
<div class="number" style="--i: 5; --clr: #cb7575"> <div class="number" style="--i: 5; --clr: #7478a8">
<span>1000</span> <span>1000</span>
</div> </div>
<div class="number" style="--i: 6; --clr: #ecb83c"><span>10</span></div> <div class="number" style="--i: 6; --clr: #c06d99"><span>10</span></div>
<div class="number" style="--i: 7; --clr: #d3e397"><span>5</span></div> <div class="number" style="--i: 7; --clr: #f5869e"><span>5</span></div>
<div class="number" style="--i: 8; --clr: #f8dcdc"><span>20</span></div> <div class="number" style="--i: 8; --clr: #ff6747"><span>20</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -39,7 +39,8 @@ function spinClick() { ...@@ -39,7 +39,8 @@ function spinClick() {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #333; // background-color: #333;
background-color: #fff;
} }
.container { .container {
position: relative; position: relative;
...@@ -61,7 +62,7 @@ function spinClick() { ...@@ -61,7 +62,7 @@ function spinClick() {
font-weight: 600; font-weight: 600;
color: #333; color: #333;
letter-spacing: 0.1em; letter-spacing: 0.1em;
border: 4px solid rgba(0, 0, 0, 0.75); border: 4px solid rgba(152, 215, 93, 0.75);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
z-index: 10; z-index: 10;
...@@ -84,9 +85,9 @@ function spinClick() { ...@@ -84,9 +85,9 @@ function spinClick() {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #fff;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 5px #333, 0 0 0 15px #fff, 0 0 0 18px #111; box-shadow: 0 0 0 4px #fff, 0 0 0 12px #e1f1a8, 0 0 0 18px #97d75d;
transition: transform 5s ease-in-out; transition: transform 5s ease-in-out;
.number { .number {
......
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