h5-shangjinyaojiang/pages/index/index.vue

<template>
	<view>
    <view class="icon">
      <u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="$refs['popover'].show()"></u-image>
      <u-image style="margin-top: 28rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
    </view>
    <view class="bkg">
      <u-image width="100%" height="100vh" :src="require('@/static/home-bkg.jpg')"></u-image>
    </view>

    <view class="content">
      <view class="logo">
        <u-image mode="heightFix" height="54rpx" :src="require('@/static/guangdian-logo.png')"></u-image>
      </view>

      <view class="title">
        <u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="220rpx" :src="require('@/static/title.png')"></u-image>
      </view>

      <view class="notice">
        恭喜192****1774获得1.99元红包
      </view>

      <view class="present">
        <u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="720rpx" :src="require('@/static/present.png')"></u-image>
      </view>

      <view class="login">
        <view class="login-bkg">
          <u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="100%" height="448rpx" :src="require('@/static/yellow-phone-bkg.png')"></u-image>
        </view>

        <view class="login-text">
          短信验证
        </view>

        <view class="login-phone">
          <u-icon width="30rpx" height="46rpx" name="/static/phone.png" ></u-icon>

          <span>192</span>

          <u-input placeholder-style="color:#969696" :custom-style="{ 'margin-left': '8rpx','color': '#969696' }" placeholder="请填写手机后8位"></u-input>
        </view>

        <view class="login-validate">
          <u-input placeholder-style="color:#969696" :custom-style="{ 'color': '#969696' }"></u-input>
          <u-button :disabled="true" :ripple="true" :hair-line="false" :custom-style="{ 'height': '100%','background': '#969696','color': '#fff' }" shape="circle">发送验证码</u-button>
        </view>

        <view class="login-tip">
          仅限中国广电（苏州地区用户）手机号参与活动
        </view>
      </view>

      <view class="footer">
        江苏省广电有线信息网络股份有限公司苏州分公司
      </view>

      <popover :icon="getIcon" height="1128rpx" ref="popover">
        <view slot="box-content">
          <view v-if="popoverType === 1">
            <view class="box-text__title">活动规则</view>
            <view class="box-text__top">
              一、 参与方式及参与对象
            </view>
            <view class="box-text__content">
              本次活动奖品数量有限，仅限中国广电（苏州地区用户）手机号参与活动，输入其他手机号均无效。
            </view>
            <view class="box-text__top">
              二、 活动规则
            </view>
            <view class="box-text__content">
              1. 活动期间，每个号码每日可有三次抽奖机会 2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。 3. 每个手机号每天最多6次抽奖机会。 4. 实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。
            </view>
          </view>

          <view v-if="popoverType === 2">
            <view class="box-text__title">验证失败</view>
            <u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx' }">重新验证</u-button>
          </view>
        </view>
      </popover>
    </view>
	</view>
</template>

<script>
import popover from "@/component/popover/index.vue";
	export default {
    components: {
      popover
    },
		data() {
			return {
        popoverType: 1,//1为规则，2为验证失败
			}
		},
		onLoad() {
		},
		methods: {
      toMe() {
        uni.navigateTo({
          url: '/pages/me/index'
        })
      }
		},
    computed: {
      getIcon() {
        switch (this.popoverType) {
          case 1:
            return 'smile';
          case 2:
            return 'frown';
        }
      }
    }
	}
</script>

<style lang="scss">
.bkg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.icon {
  display: flex;
  flex-direction: column;

  z-index: 3;
  position: fixed;
  top: 30vh;
  right: 24rpx;
}
.content {
  min-height: 100vh;

  position: relative;

  & .logo {

    margin-top: 4vh;
    margin-left: 40rpx;
  }

  & .title {

    margin-top: 4vh;
  }

  & .notice {
    background: rgba(254, 210, 141, 0.6);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3,46,63,0.45);
    border-radius: 28rpx;
    color: #fff;
    text-align: center;

    margin: .2vh 140rpx 0 140rpx;
  }

  .present {

    margin-top: 0.75vh;
  }

  .login {
    height: 448rpx;
    position: relative;

    margin: -5.6vh 60rpx 0 60rpx;
    padding: 0 52rpx 3.5vh 40rpx;
    &-bkg {
      filter: drop-shadow(14rpx 14rpx 4rpx rgba(0,0,0,0.3));

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &-text {
      font-size: 34rpx;
      font-weight: 500;
      color: #C82F34;
      text-align: center;

      padding-top: 90rpx;
      position: relative;
      z-index: 2;
    }

    &-phone {
      height: 70rpx;
      background: #E2DFD6;
      opacity: 0.3;
      border-radius: 34rpx;
      display: flex;
      align-items: center;

      padding: 0 0 0 38rpx;
      margin-top: 34rpx;

      & > span {
        font-size: 28rpx;
        line-height: 22rpx;
        font-weight: 500;
        color: #333333;
        border-right: 2rpx solid #333;

        padding-left: 30rpx;
        padding-right: 8rpx;
      }
    }
    &-validate {
      height: 70rpx;
      background: #E2DFD6;
      opacity: 0.3;
      border-radius: 34rpx;
      display: flex;
      align-items: center;

      margin-top: 28rpx;
      padding-left: 38rpx;
    }
    &-tip {
      text-align: center;
      font-size: 22rpx;
      zoom: 0.85;
      font-weight: 400;
      color: #333333;

      padding-top: 1.5vh;
      position: relative;
    }
  }

  .footer {
    font-size: 22rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32rpx;
    text-align: center;

    padding-top: 6.9vh;
    padding-bottom: 2.28vh;
  }
}


.box-text {
  &__title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;

    padding-top: 104rpx;
    padding-bottom: 56rpx;
  }

  &__top {
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
    text-align: left;

    padding: 20rpx 0;
  }
  &__content {
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    text-align: left;
  }
}
</style>