zhangsiye/mini/pages/sign/index.vue

<template>
  <view class="sign-container">
    <view
      class="header"
      :style="{
        backgroundImage: `url(${$setting.IMAGE_URL}/sign/bg.png)`
      } "
    >
      <view
        class="icon"
        :style="{
          backgroundImage: `url(${$setting.IMAGE_URL}/sign/icon.png)`
        } "
      />
      <view class="been-sign">已连续签到1天</view>
      <view class="tips">在连续签到6天立得50金</view>
    </view>
    <view class="content dir-left-wrap">
      <view
        v-for="(item,index) in sign"
        :key="index"
        class="item main-center cross-center"
        :class="{active: index === 0}"
      >
        <view class="left-box dir-top-wrap cross-center">
          <text class="title">{{ item.name }}</text>
          <view class="icon">
            <image src="@/static/image/gold.png" />
          </view>
          <view class="number">{{ item.number }}金币</view>
        </view>
        <view v-if="(index + 1) === sign.length" class="right-box">
          <image src="@/static/image/gold-bag.png" />
        </view>
      </view>
    </view>
    <view class="btn">立即签到</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sign: [
        { name: '第一天', number: 3 },
        { name: '第二天', number: 3 },
        { name: '第三天', number: 3 },
        { name: '第四天', number: 3 },
        { name: '第五天', number: 3 },
        { name: '第六天', number: 3 },
        { name: '第七天', number: 3 }
      ]
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
    .sign-container{
      padding: 20rpx;
      font-size: 28rpx;
      .header{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 300rpx;
        border-radius: 10rpx;
        position: relative;
        margin-top: 100rpx;
        padding-top: 80rpx;
        .icon{
          background-repeat: no-repeat;
          background-size: 100%;
          height: 180rpx;
          width: 240rpx;
          position: absolute;
          top: -50%;
          transform: translateY(30%) translateX(-50%);
          left: 50%;
        }
        .been-sign{
          background: linear-gradient(303deg, #FF74B9, #6EEBE8, #FFFFFF);
          -webkit-background-clip: text;
          color: transparent;
          text-align: center;
          margin-bottom: 30rpx;
          font-size: 46rpx;
          font-weight: bold;
        }
        .tips{
          color: $info-color;
          text-align: center;
          width: 500rpx;
          margin: 0 auto;
          border-radius: 30rpx;
          padding: 12rpx 0;
          background: #1f2336;
          font-size: 26rpx;
        }
      }
      .content{
        margin-top: 40rpx;
        .item{
          color: $default-color;
          width: calc(#{660rpx}/4);
          background: #1B1E32;
          border-radius: 10rpx;
          padding: 40rpx 0;
          margin-bottom: 20rpx;
          margin-right: 20rpx;
          &.active{
            background: linear-gradient(221deg, #6EEBE8, #FF74B9);
          }
          &:nth-child(4){
            margin-right: 0;
          }
          &:last-child{
            flex: 1;
            margin-right: 0;
          }
          .left-box{
            .icon{
              image{
                width: 100rpx;
                height: 100rpx;
              }
            }
            .number{
              color: $primary-color;
            }
          }
          .right-box{
            margin-bottom: -100rpx;
            margin-right: -20rpx;
            margin-left: 40rpx;
            image{
              width: 160rpx;
              height: 160rpx;
            }
          }
        }
      }
      .btn{
        width: 690rpx;
        margin: 80rpx auto 0;
        padding: 24rpx 0;
        color: $default-color;
        background: linear-gradient(270deg, #FB3651 0%, #FF8999 100%);
        border-radius: 45px;
        text-align: center;
      }
    }
</style>