yicangzongtai_app_240321/pages/home/module/care-top.vue

<template>
  <view class="top-box" :style="{ 'height': swiperHeight + 'rpx'}">
    <view class="nav-top" :style="navScrollStyle">
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}" />
      <view class="status-title">
        <u-icon name="arrow-left" class="left-icon" @click="home.init(1)"></u-icon>
        <text>关爱模式</text>
        <!-- <view class="convention_btn" v-if="scrollStyle">常规版</view> -->
      </view>
    </view>

    <view class="top-advertising" @click.stop="home.init(1)">
      <!-- <image :src="convention_Img" mode="aspectFill"></image> -->
      <text>常规版</text>
    </view>

    <view class="swiper-content" :style="{ 'height': swiperHeight + 'rpx'}">
      <zw-swiper :height="swiperHeight" :keyword="$keys.GA_BANNER" />
    </view>
  </view>
</template>

<script>
  import Mixin from "./Mixin.js";
  const convention_Img = require('../convention_btn.png');
  export default {
    props: {
      swiperHeight: {
        type: Number,
        default: 577
      },
      scrollTop: {
        type: Number,
        default: 0
      },
    },
    mixins: [Mixin],
    inject: ["home"],
    data() {
      return {
        navScrollStyle: {},
        scrollStyle: false,
        convention_Img: convention_Img
      }
    },
    watch: {
      scrollTop: {
        handler: function(newNum, oldNum) {
          const Num = Number(newNum) || 0
          this.scrollStyle = Num > 114 ? true : false;
          if (Num < 11) {
            this.navScrollStyle = {}
          }
          if (Num >= 11 && Num < 57) {
            const op = Num / 57;
            this.navScrollStyle = {
              opacity: 1 - op,
            }
          }
          if (Num >= 57 && Num < 114) {
            const op = (Num - 57) / 57;
            this.navScrollStyle = {
              backgroundColor: `rgba(255, 255, 255, ${op})`,
              opacity: op,
            }
          }
          if (Num >= 114) {
            this.navScrollStyle = {
              backgroundColor: `rgba(255, 255, 255 ,1)`,
            }
          }

        }
      },
      immediate: true
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .top-box {
    width: 100%;
    overflow: hidden;
    position: relative;

    .nav-top {
      position: fixed;
      z-index: 3;
      left: 0;
      top: 0;
      right: 0;
      padding: 0 $zw-padding;
    }

    .status-title {
      position: relative;
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: #1A1A1A;
      font-size: 44rpx;

      .left-icon {
        float: left;
        height: 100%;
        font-size: 40rpx;
      }

      .convention_btn {
        position: absolute;
        top: 50%;
        right: 30rpx;
        transform: translateY(-50%);
        z-index: 2;
      }
    }

    .top-advertising {
      position: absolute;
      right: 12rpx;
      bottom: 146rpx;
      width: 238rpx;
      height: 130rpx;
      padding-top: 25rpx;
      text-align: center;
      font-size: 44rpx;
      color: #fff;
      background: url('../convention_btn.png') no-repeat;
      background-size: 100% 100%;
      z-index: 1;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>