58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<template>
|
|
<div class="ball-content" :class="modeClass">
|
|
<div class="ball-content-main">
|
|
<div class="ball-content-main-grid">
|
|
<lucky-grid-view :mode="mode"></lucky-grid-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import luckyGridView from "@/components/luckyGridView";
|
|
export default {
|
|
name: "BallContent",
|
|
components: {
|
|
luckyGridView
|
|
},
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: "blue"
|
|
}
|
|
},
|
|
computed: {
|
|
modeClass() {
|
|
if (this.mode === "blue") return "ball-xy";
|
|
return "ball-hh";
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ball-content {
|
|
width: 676px;
|
|
height: 430px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
padding-top: 57px;
|
|
margin: 0 auto;
|
|
&-main {
|
|
height: 414px;
|
|
padding: 8px;
|
|
&-grid {
|
|
padding-top: 78px;
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
.ball-xy {
|
|
background-image: url(../../assets/images/giftbox.png);
|
|
}
|
|
.ball-hh {
|
|
background-image: url(../../assets/images/giftbox_g.png);
|
|
}
|
|
</style>
|