Ly.Offical.HYL/src/views/Layout.vue

<script>
export default {
  data() {
    return {
      data: {},
      activeName: 'first',
      buttonsite: 100,
    };
  },
  methods: {
    handleTabClick() {
      // 根据选中的 tab 切换路由
      switch (this.activeName) {
        case 'first':
          this.$router.push({ name: 'Home' });
          history.pushState(null, '', '/');
          break;
        case 'second':
          this.$router.push({ name: 'Business' });
          break;
        case 'third':
          this.$router.push({ name: 'About' });
          break;
        case 'fourth':
          this.$router.push({ name: 'News' });
          break;
        case 'fifth':
          this.$router.push({ name: 'Partners' });
          break;
        case 'sixth':
          this.$router.push({ name: 'Contact' });
          break;
        default:
          break;
      }
    },
    tothebottom() {
      const targetsite = 250;
      const initsite = 100;
      const step = 5;

      // 定义一个通用的动画函数
      const animateButtonSite = (direction) => {
        const intervalId = setInterval(() => {
          if ((direction === 'up' && this.buttonsite < targetsite) ||
            (direction === 'down' && this.buttonsite > initsite)) {
            this.buttonsite += (direction === 'up' ? step : -step);
          } else {
            clearInterval(intervalId);
          }
        }, 3);
      };

      window.addEventListener('scroll', () => {
        const scrollHeight = document.documentElement.scrollHeight;
        const clientHeight = window.innerHeight;
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop + clientHeight >= scrollHeight) {
          animateButtonSite('up'); // 向上动画
        } else {
          animateButtonSite('down'); // 向下动画
        }
      });
    }
  },
  mounted() {
    this.tothebottom();
    this.$api.post('SysConfig/GetCompanyInfo')
      .then(data => {
        this.data = data;
        this.$ls.set('CompanyEmail', data.CompanyEmail);
        this.$ls.set('CompanyPhone', data.CompanyPhone);
        this.$ls.set('CompanyAddress', data.CompanyAddress);
      }).catch(err => {
        console.log(err.Message);
      });
  }
};

</script>

<template>
  <div class="layout">
    <div class="tab">
      <div class="widbox">
        <img src="/images/logo.png" alt="">
        <el-tabs v-model="activeName" @tab-click="handleTabClick" class="t-tabs">
          <el-tab-pane label="首  页" name="first"></el-tab-pane>
          <el-tab-pane label="业务领域" name="second"></el-tab-pane>
          <el-tab-pane label="关于我们" name="third"></el-tab-pane>
          <el-tab-pane label="企业动态" name="fourth"></el-tab-pane>
          <el-tab-pane label="合作伙伴" name="fifth"></el-tab-pane>
          <el-tab-pane label="联系我们" name="sixth"></el-tab-pane>
        </el-tabs>
      </div>

    </div>

    <router-view></router-view>

    <div class="placeholder">

    </div>
    <div class="btm">
      <div class="widbox">
        <div class="top">
          <div class="btm-i">
            <img src="/images/btm-logo.png" alt="" style="height: 111px;margin-right: 19px;">
            <div class="btm-font">
              <span>
                <a href="#/Business">业务领域</a> | <a href="#/About">关于我们</a> | <a href="#/News">企业动态</a> | <a
                  href="#/Partners">合作伙伴</a>
              </span>
              <span>
                浙江好运徕品牌运营管理有限公司
              </span>
            </div>
          </div>
          <div class="btm-font">
            <div>
              <img src="/images/btm-i1.png" alt="" style="height: 34px;">
              <span>电子邮箱：{{ data.CompanyEmail }}</span>
            </div>
            <div>
              <img src="/images/btm-i2.png" alt="" style="height: 34px;">
              <span>联系电话：{{ data.CompanyPhone }}</span>
            </div>
            <div>
              <img src="/images/btm-i3.png" alt="" style="height: 34px;">
              <span>公司地址：{{ data.CompanyAddress }}</span>
            </div>
          </div>
          <div class="btm-code">
            <div>
              <img src="/images/btm-i4.png" alt="" style="height: 109px;">
              <span>微信公众号</span>
            </div>
            <div>
              <img src="/images/btm-i5.png" alt="" style="height: 109px;">
              <span>好运徕数字生活+</span>
            </div>
            <div>
              <img src="/images/btm-i6.png" alt="" style="height: 109px;">
              <span>好运徕数字生活</span>
            </div>
          </div>
        </div>
        <div class="down">
          <span>
            Copyright©2016-2024 浙江好运徕品牌运营管理有限公司 版权所有
          </span>
          <span style="margin-left: 10px;">
            {{ data.SiteRecordNumber }}
          </span>
        </div>
      </div>

    </div>
  </div>

  <el-backtop :bottom="buttonsite" id="upbotton">
    <div style="
        height: 100%;
        width: 100%;
        background-color: #f2404e;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #fff;
      ">
      <el-icon>
        <ArrowUp />
      </el-icon>
    </div>
  </el-backtop>
</template>