HNKDBOSS-WEB/hn-website/components/web-footer/index.vue

<template>
  <view class="web-foot">
    <view
      v-show="bottom"
      class="r_flex_zy home_lianxi"
      style="text-align: left"
    >
      <view style="width: 329rpx">
        <view
          style="color: #333; font-size: 13rpx; margin-bottom: 14rpx"
          class="r_wzjc"
          >联系我们
        </view>
        <view style="color: #65676a; font-size: 12rpx" class=""
          >欢迎任何形式的媒体与商务合作<br />
          企业邮箱：cs@hninfornet.com<br />
          联系地址：海南省海口市美兰区国兴大道5号海南大厦46层
        </view>
      </view>
      <view style="width: 177rpx">
        <view
          style="color: #333; font-size: 12rpx; margin-bottom: 14rpx"
          class="r_wzjc"
          >增值电信业务经营许可证
        </view>
        <view style="color: #65676a; font-size: 12rpx" class="">
          <view class="r_flex_align"><i></i> 编号：A2.B1.B2-20235652</view>
          <view class="r_flex_align"><i></i> 编号：A2.B1.B2-20235652</view>
        </view>
      </view>
    </view>

    <!-- 尾部 -->
    <div class="web-footer r_flex_space">
      <img
        class=""
        src="/static/web/Slice 11@2x.png"
        style="width: 100%; height: auto; margin: 0rpx; margin-top: -1rpx"
      />
    </div>
  </view>
</template>

<script>
export default {
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    right: {
      type: Number,
      default: 30,
    },
    bottom: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      // 弹窗显示控制
      isShow: false,
      transparent: true,
    };
  },

  computed: {
    rightPx() {
      return uni.upx2px(this.right);
    },
    bottomPx() {
      return uni.upx2px(this.bottom);
    },
  },

  methods: {
    /**
     * 导航菜单切换事件
     */
    onToggleShow() {
      const app = this;
      app.isShow = !app.isShow;
      app.transparent = false;
    },

    /**
     * 导航页面跳转
     */
    onTargetPage(index = 0) {
      const tabLinks = getTabBarLinks();
      this.$navTo(tabLinks[index]);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 快捷导航 */
.web-footer {
  width: 100%;
}
.home_lianxi {
  width: 750rpx;
  height: 178rpx;
  text-align: left;
  padding: 0rpx 75rpx;
  padding-bottom: 120rpx;
  padding-top: 40rpx;
  position: relative;
  font-size: 26rpx;
  background-image: url("/static/web/Slice 10@2x.png");
  background-size: cover; /* 或 contain */
  // background-position-x: 50rpx;
  i {
    display: block;
    margin-right: 6rpx;
    margin-top: 2rpx;
    width: 3rpx;
    height: 3rpx;
    border-radius: 100%;
    background: #65676a;
  }
}
</style>