|
@@ -0,0 +1,109 @@
|
|
|
+<template>
|
|
|
+ <div class="sign-wrap">
|
|
|
+ <div class="sign-content">
|
|
|
+ <div class="sign-banner">
|
|
|
+ <text class="sign-banner__text">获得<span class="orange">50</span>书币</text>
|
|
|
+ </div>
|
|
|
+ <div class="sign-line">
|
|
|
+ <div class="sign-line__item" for="{{signList}}">
|
|
|
+ <text class="sign-line__day">{{$item.day}}天</text>
|
|
|
+ <image src="../../assets/imgs/sign_{{$item.iconType}}.jpg"></image>
|
|
|
+ <text class="sign-line__fee">{{$item.fee}}书币</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <image src="../../assets/imgs/pop_close.png" class="close-icon" @click="setSignPop"></image>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// 子组件
|
|
|
+export default {
|
|
|
+ data: {
|
|
|
+ signList: [
|
|
|
+ { day: 1, iconType: 'coin', fee: 50 },
|
|
|
+ { day: 2, iconType: 'coin', fee: 50 },
|
|
|
+ { day: 3, iconType: 'gift', fee: 150 },
|
|
|
+ { day: 4, iconType: 'coin', fee: 50 },
|
|
|
+ { day: 5, iconType: 'coin', fee: 50 },
|
|
|
+ { day: 6, iconType: 'coin', fee: 50 },
|
|
|
+ { day: 7, iconType: 'gift', fee: 150 },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ onInit() {
|
|
|
+
|
|
|
+ },
|
|
|
+ setSignPop() {
|
|
|
+ this.$dispatch('dispathEvt')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.sign {
|
|
|
+ &-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.56);
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ &-content {
|
|
|
+ width: 650px;
|
|
|
+ height: 520px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 240px;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ &-line {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 140px;
|
|
|
+ &__item {
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ &__day {
|
|
|
+ color: #999;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ &__fee {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-banner {
|
|
|
+ background-image: url(../../assets/imgs/sign_bg.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ border-top-left-radius: 30px;
|
|
|
+ border-top-right-radius: 30px;
|
|
|
+ &__text {
|
|
|
+ font-size: 34px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 200px;
|
|
|
+ .orange {
|
|
|
+ color: #ffc017;
|
|
|
+ font-size: 46px;
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.close-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-top: 60px;
|
|
|
+}
|
|
|
+</style>
|