wip: test
This commit is contained in:
@@ -56,47 +56,48 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.turntable {
|
.turntable {
|
||||||
width: 500px;
|
// width: 500px;
|
||||||
height: 500px;
|
// height: 500px;
|
||||||
border: 1px solid #a6a6a6;
|
// border: 1px solid #a6a6a6;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
margin: 50px auto;
|
margin: 30px auto;
|
||||||
position: relative;
|
// position: relative;
|
||||||
|
|
||||||
&::before,
|
// &::before,
|
||||||
&::after {
|
// &::after {
|
||||||
content: '';
|
// content: '';
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
background-color: #a6a6a6;
|
// background-color: #a6a6a6;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
width: 2px;
|
// width: 2px;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
left: 50%;
|
// left: 50%;
|
||||||
top: 0;
|
// top: 0;
|
||||||
transform: translateX(-50%);
|
// transform: translateX(-50%);
|
||||||
}
|
// }
|
||||||
|
|
||||||
&::after {
|
// &::after {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 2px;
|
// height: 2px;
|
||||||
left: 0;
|
// left: 0;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
transform: translateY(-50%);
|
// transform: translateY(-50%);
|
||||||
}
|
// }
|
||||||
|
|
||||||
.num-box {
|
.num-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
// flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 50px;
|
// padding: 50px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
@@ -104,9 +105,14 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
|
// background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,11 +27,12 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
:style="{
|
:style="{
|
||||||
color: item.active ? '#ff0000' : '#000',
|
color: item.active ? '#ff0000' : '#000',
|
||||||
|
backgroundImage: `url(${item.optActive ? require('../../../static/dz.png') : 'none'})`,
|
||||||
}"
|
}"
|
||||||
@click="handleClick(item)"
|
@click="handleClick(item)"
|
||||||
>
|
>
|
||||||
<text>{{ item.value }}</text>
|
<text>{{ item.value }}</text>
|
||||||
<image v-show="item.optActive" class="icon" src="../../../static/dz.png" />
|
<!-- <image class="icon" v-show="item.optActive" src="../../../static/dz.png" /> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user