frontend-feedingship-vue2/src/components/personal/ContactUs.vue

<template>
  <div class="repair">
    <div style="padding: 20px 0px 0px 30px">
      <el-button
        style="position: absolute; top: 20px; right: 66px"
        size="medium"
        round
        icon="el-icon-back"
        @click="handleBack()"
        >返回</el-button
      >
      <div class="repair-box-top">
        <span>联系我们</span>
        <div class="repair-xiantiao"></div>
      </div>
      <div class="repair-box-item">
        <span class="item1">官方电话</span>
        <div class="phone1">
          <span>18596992323</span>
        </div>
        <span class="item2">官方微信</span>
        <div class="phone2">
          <span>18596992323</span>
        </div>
        <span class="item3">公众号二维码</span>
        <img class="gzh" src="../../assets/img/gzh.png" alt="" />
        <span class="item4">抖音二维码</span>
        <img class="dy" src="../../assets/img/dy.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleBack() {
      this.$router.push({
        name: "personalCenter",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.repair::v-deep {
  width: 1594px;
  height: calc(100vh * 905 / 1080);
  background: #ffffff;
  border-radius: 12px;

  .repair-box-top {
    text-align: left;

    > span:first-child {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 22px;
      color: #000000;
      line-height: 50px;
      text-align: left;
    }

    .repair-xiantiao {
      width: 1534px;
      height: 2px;
      background: #eff2f6;
    }
  }

  .repair-box-item {
    position: relative;

    .item1 {
      position: absolute;
      top: 20px;
      left: 30px;
    }

    .phone1 {
      position: absolute;
      top: 90px;
      left: 15px;
    }

    .item2 {
      position: absolute;
      top: 20px;
      right: 700px;
    }

    .phone2 {
      position: absolute;
      top: 90px;
      right: 30px;
    }

    .item3 {
      position: absolute;
      top: 230px;
      left: 30px;
    }

    .item4 {
      position: absolute;
      right: 681px;
      top: 230px;
    }
    .gzh {
      width: 200px;
      height: 200px;
      position: fixed;
      top: 530px;
      left: 334px;
    }
    .dy {
      width: 200px;
      height: 200px;
      position: fixed;
      top: 530px;
      left: 1103px;
    }
    > span {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 20px;
      color: #000000;
      line-height: 50px;
    }

    .phone1,
    .phone2 {
      width: 752px;
      height: 76px;
      background: #f4f6f9;
      border-radius: 14px;
      text-align: left;

      > span {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #626262;
        line-height: 76px;
      }
    }
  }
}
</style>