vue-H5全屏图片背景实例

最新推荐文章于 2023-09-22 22:22:37 发布

gqzydh

最新推荐文章于 2023-09-22 22:22:37 发布

阅读量822

点赞数

分类专栏： Vue.js H5 实例文章标签： vue vue-H5

本文链接：https://blog.csdn.net/gqzydh/article/details/100540265

版权

Vue.js 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

实例

11 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

<style lang="scss" scoped>
  .oreal-hra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: url(../../assets/hra_bg_v2.jpg) no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000011;

    .oreal-hra-content {
      .logo-box {
        text-align: center;

        img.logo {
          height: 5rem;
        }

        .title {
          color: #ffffff;
          font-size: 1.8rem;
        }
      }

      .btn-group {
        display: flex;
        width: 16rem;
        justify-content: space-between;
        margin: 10rem auto 0;

        /deep/ button {
          background-color: rgba(255, 255, 255, 0.9);
          color: #56ADDE;
          border-radius: 2rem;
          width: 43%;
          font-size: 1.1rem;
          font-weight: 700;

          &:active {
            background: rgba(255, 255, 255, 0.9) !important;
            border: none !important;
            outline: none !important;
          }
        }

        /deep/ .cube-btn {
          padding: 0.5rem 0;
          line-height: normal;
        }

        /deep/ .cube-btn.cube-btn_active:after, .cube-btn:active:after {
          border: none;
        }
      }
    }
  }
</style>

<template>
  <div class="oreal-hra">
    <div class="oreal-hra-content">
      <div class="logo-box">
        <img class="logo" src="@/assets/hra_logo_v2.png" alt="hra">
        <p class="title">{{ $t('hra_home_title') }}</p>
      </div>
      <div class="btn-group">
        <cube-button @click="startEvaluation">{{ $t('btn_start_evaluation') }}</cube-button>
        <cube-button @click="checkReport">{{ $t('btn_check_report') }}</cube-button>
      </div>
      <AuthDialogHra :params="params" @handleAccept="agree"></AuthDialogHra>
    </div>
  </div>
</template>

<script lang="ts">
    import {Getter,Action,} from 'vuex-class';
    import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
    import AuthDialogHra from '@/views/home/wellness/AuthDialogHra.vue';
    import {api} from '@/service';

    @Component({
        components: {
            AuthDialogHra,
        }
    })
    export default class Home extends Vue {
        @Getter public _user;
        @Action public _loadUser;

        private params = {
            seen: false,
            terms: "",
            rejectLink: "",
            isSso: true
        };

        private service: any = "";

        private async mounted() {
            // this.service = <HTMLElement>document.querySelector('#udesk_container #udesk_btn a');
            // this.service.style.display = 'none';
            await this._loadUser();
            await this.handleAuthorize();
        }

        // @Watch('service')
        // public listenToService() {
        //     this.service.style.display = 'none';
        // }

        private agree(val) {
            this.params.seen = val;
        }

        private async handleAuthorize() { // 获取验证状态
            try {
                const result: any = await api.getAcceptTermsStatus();
                if (!result.hasAcceptedTerms) {
                    this.params.terms = result.terms;
                    this.params.seen = !result.hasAcceptedTerms;
                    this.params.rejectLink = result.rejectLink;
                    this.params.isSso = this._user.loginType.isSSO;
                } else {
                    this.params.seen = !result.hasAcceptedTerms;
                }
            } catch (e) {
                (this.$createToast({
                    type: 'warn',
                    time: 1000,
                    // txt: e.message,
                    txt: this.$t('system_busy'),
                    zIndex: 1000000020,
                }) as any)
                    .show();
            }
        }

        private startEvaluation() {
            window.location.href = '/wellness/lifestyleAgeing/ageYourself';
        }

        private checkReport() {
            window.location.href = '/wellness/lifestyleAgeing/results';
        }
    }
</script>