|
@@ -2,10 +2,15 @@
|
|
|
<section class="base-power-layout">
|
|
|
<div class="base-power-module default-module">
|
|
|
<slot name="default"></slot>
|
|
|
+ <div v-if="baseMaskShow" class="base-mask" @click="clickBaseMask"></div>
|
|
|
</div>
|
|
|
- <div class="base-power-module vip-module" v-if='vipShow'>
|
|
|
+ <div class="base-power-module vip-module" v-if="vipModuleShow">
|
|
|
<slot name="vip"></slot>
|
|
|
- <div v-if="vipMask" class="vip-mask pointer" @click="clickMask"></div>
|
|
|
+ <div
|
|
|
+ v-if="vipMaskShow"
|
|
|
+ class="vip-mask pointer"
|
|
|
+ @click="clickVipMask"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
@@ -14,18 +19,25 @@
|
|
|
export default {
|
|
|
name: 'BasePowerLayout',
|
|
|
props: {
|
|
|
- vipMask: {
|
|
|
+ baseMaskShow: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- vipShow: {
|
|
|
+ vipMaskShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ vipModuleShow: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- clickMask() {
|
|
|
- this.$emit('clickMask')
|
|
|
+ clickBaseMask() {
|
|
|
+ this.$emit('clickBaseMask')
|
|
|
+ },
|
|
|
+ clickVipMask() {
|
|
|
+ this.$emit('clickVipMask')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -40,6 +52,7 @@ $gold: #c98f37;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.base-power-module {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 12px 0 6px;
|
|
@@ -49,7 +62,6 @@ $gold: #c98f37;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
.vip-module {
|
|
|
- position: relative;
|
|
|
border: 1px dashed $gold;
|
|
|
background: linear-gradient(90deg, #fff7dC 0%, rgba(255, 247, 220, 0) 100%);
|
|
|
&::after {
|
|
@@ -65,6 +77,7 @@ $gold: #c98f37;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
}
|
|
|
+.base-mask,
|
|
|
.vip-mask {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
@@ -72,5 +85,6 @@ $gold: #c98f37;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 2;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
</style>
|