HNKDBOSS-WEB/hn-website/pages/web/contact/index.vue

<template>
  <view id="contact">
    <!-- 快捷导航 -->
    <webHeader />
    <img
      src="/static/web/Slice 25@2x.png"
      style="width: 100%; margin: 0px; display: block"
    />

    <view class="contact_content">
      <view style="color: #000; font-size: 13rpx; margin: 0px"> 联系我们 </view>
      <view class="r_flex_space">
        <view class="left">
          <view class="" style="font-weight: 600">客服电话</view>
          <view
            style="color: #3f7ce5; font-size: 13rpx; margin: 8rpx 0rpx 18rpx"
            ><u-icon name="phone" color="#3F7CE5" size="13"></u-icon>
            0898—65366726</view
          >
          <view class="r_flex_align" style="color: #616161; font-size: 7rpx">
            <i></i> 海南省海口市美兰区国兴大道5号海南大厦46层
          </view>
          <view class="r_flex_align" style="color: #616161; font-size: 7rpx">
            <i></i>cs@hninfornet.com
          </view>
        </view>

        <view class="right">
          <input class="input" type="text" placeholder="姓名" />
          <input class="input" type="text" placeholder="电话" />
          <input class="input" type="text" placeholder="邮箱" />
          <textarea
            class="input textarea"
            placeholder="请简单描述您的问题..."
            rows="2"
          ></textarea>
          <view class="button r_cursor"> 提交内容 </view>
        </view>
      </view>
    </view>

    <view class="contact_content2">
      <view style="color: #000; font-size: 13rpx; padding: 20rpx 0rpx 10rpx">
        更多服务
      </view>
      <view class="r_flex_center">
        <view class="nav_item">
          <u-icon name="file-text-fill" color="#2979ff" size="28"></u-icon>
          <view class="text1">在线工单</view>
          <view class="text2">云产品及业务问题，专业工程师为您解答</view>
          <view class="text3"
            >点击进入
            <u-icon name="arrow-rightward" color="#2979ff" size="8"></u-icon>
          </view>
        </view>
        <view class="nav_item">
          <u-icon name="file-text-fill" color="#2979ff" size="28"></u-icon>
          <view class="text1">自助服务</view>
          <view class="text2"
            >多样化自助服务，您可自助解决账号、财务、备案等</view
          >
          <view class="text3"
            >点击进入
            <u-icon name="arrow-rightward" color="#2979ff" size="8"></u-icon>
          </view>
        </view>

        <view class="nav_item">
          <u-icon name="file-text-fill" color="#2979ff" size="28"></u-icon>
          <view class="text1">帮助中心</view>
          <view class="text2"
            >海量帮助文档，涵盖产品简介、购买指导、缦作指南
            问题，等，助您快速部唇上云</view
          >
          <view class="text3"
            >点击进入
            <u-icon name="arrow-rightward" color="#2979ff" size="8"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="contact_content2 contact_content3">
      <view style="color: #000; font-size: 13rpx; padding: 20rpx 0rpx 10rpx">
        常见问题
      </view>
      <view class="r_flex_center">
        <view class="nav_item3">
          <view class="text31">注册与登录</view>
          <view class="text32 r_flex_align">
            <i></i> 移动云炸号被响定怎么办？</view
          >
          <view class="text32 r_flex_align">
            <i></i> 为什么要进行实名认证？</view
          >
          <view class="text32 r_flex_align"> <i></i> 对像存储安全吗？</view>
          <view class="text32 r_flex_align"> <i></i> 如何设置告都策略？</view>
        </view>
        <view class="nav_item3">
          <view class="text31">实名认证</view>
          <view class="text32 r_flex_align">
            <i></i> 忘记移动云登录账号，如何找国账导？</view
          >
          <view class="text32 r_flex_align">
            <i></i> 如何完成个人用户实名认证？</view
          >
          <view class="text32 r_flex_align">
            <i></i> SDK与REST接口分别在什么时候使用？</view
          >
          <view class="text32 r_flex_align">
            <i></i> 提供哪些告警进知方式？</view
          >
        </view>
        <view class="nav_item3">
          <view class="text31">对象储存</view>
          <view class="text32 r_flex_align">
            <i></i> 如何兜成实名认证信息变更?</view
          >
          <view class="text32 r_flex_align">
            <i></i> 可以栓测系统灑润并修复吗？</view
          >
          <view class="text32 r_flex_align">
            <i></i> 关于SDK与REST对外接口的区别？</view
          >
          <view class="text32 r_flex_align"> <i></i> 如何找回够动云窗码？</view>
        </view>
        <view class="nav_item3">
          <view class="text31">云监控</view>
          <view class="text32 r_flex_align">
            <i></i> 甫次叠陆使用手机号码及离码无法整随？</view
          >
          <view class="text32 r_flex_align"> <i></i> 如何壳成企业认证?</view>
          <view class="text32 r_flex_align">
            <i></i> 对象存槎SDK与REST对外接口地址？</view
          >
          <view class="text32 r_flex_align">
            <i></i> 公有策略、私有策略的区刷？</view
          >
        </view>
      </view>
    </view>

    <!-- ·移动云炸号被响定怎么办？
◆为什么要进行实名认证？
◆对像存储安全吗？
*如何设置告都策略？

◆忘记移动云登录账号，如何找国账导？
◆如何完成个人用户实名认证？
◆SDK与REST接口分别在什么时候使用？
・提供哪些告警进知方式？

*如何兜成实名认证信息变更?
▪可以栓测系统灑润并修复吗？
◆关于SDK与REST对外接口的区别？
·如何找回够动云窗码？

·甫次叠陆使用手机号码及离码无法整随？
*如何壳成企业认证?
◆对象存槎SDK与REST对外接口地址？
·公有策略、私有策略的区刷？ -->

    <webFooter />
  </view>
</template>

<script>
import webHeader from "@/components/web-header";
import webFooter from "@/components/web-footer";
import storage from "@/utils/storage";
import store from "@/store/index";

export default {
  components: {
    webHeader,
    webFooter,
  },
  data() {
    return {};
  },
  computed: {
    appStore: () => store.getters.app,
    mesText: () => store.getters.app.verifymsg,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLaunch({ path, query, scene }) {
    console.log("empty - onLaunch");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(options) {},

  methods: {},
};
</script>

<style lang="scss" scoped>
#contact {
  .dynamic_content {
    margin: 0 36rpx;
    text-align: left;
    font-size: 13rpx;
    color: #898888;
  }

  .contact_content {
    background: #fff;
    width: 100%;
    text-align: center;
    padding: 26rpx 87rpx 10rpx;
  }
  .contact_content2 {
    padding-bottom: 40rpx;
    text-align: center;
    background: #f6f8fc;
    .nav_item {
      padding-top: 10rpx;
      width: 157rpx;
      height: 110rpx;
      background: #fff;
      box-shadow: 4px 4px 4px #ececec;
      margin-left: 7.5rpx;
    }
    .text1 {
      font-size: 8rpx;
      margin-top: 2rpx;
      margin-bottom: 4rpx;
    }
    .text2 {
      padding: 0 20rpx;
      height: 20rpx;
      font-size: 6rpx;
    }
    .text3 {
      margin: 10rpx 0rpx;
      font-size: 6rpx;
      color: #2979ff;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .contact_content3 {
    background: #fff;
    .nav_item3 {
      position: relative;
      width: 135rpx;
      height: 89rpx;
      box-shadow: 0px 0px 12px #d2d2d2;
      text-align: left;
      margin: 0 4rpx;
      .text31 {
        margin-bottom: 8rpx;
        width: 135rpx;
        font-size: 8rpx;
        color: #fff;
        padding: 6rpx 0rpx;
        padding-left: 10rpx;
        background: url("/static/web/10006.jpg");
        background-size: cover; /* 或 contain */
      }
      .text32 {
        padding: 0 10rpx;
        margin-top: 4rpx;
        font-size: 6rpx;
        color: #7b7b7b;
        i {
          margin-right: 2rpx;
          margin-top: 1rpx;
        }
      }
    }
  }

  .left {
    text-align: left;

    font-size: 11rpx;
  }
  .right {
    .input {
      width: 154rpx;
      height: auto;
      text-align: left;
      background: #fafafa;
      display: block;
      color: #333;
      border-radius: 6px;
      text-align: left;
      border: 1px solid #ccc;
      margin-bottom: 6rpx;
      font-size: 6rpx;
      padding: 4rpx 4rpx;
    }
    input:hover::placeholder {
      color: #ccc;
    }
    .textarea {
      padding: 4rpx 4rpx;
      height: 30rpx;
    }
    .button {
      width: 154rpx;
      padding: 4rpx 4rpx;
      font-size: 6rpx;
      background: #016fff;
      border-radius: 6px;
      color: #fff;
    }
  }

  .item_new {
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    border-top: 1px solid #dcdee0;
    .p1 {
      font-size: 17rpx;
      color: #343b47;
    }
    .time1 {
      font-weight: 300;
      font-size: 11rpx;
      color: #9ca1a8;
      margin: 9rpx 0rpx 10rpx;
    }
    .text1 {
      font-weight: 300;
      font-size: 13rpx;
      color: #6c717a;
      padding-right: 30rpx;
    }
  }
  i {
    display: block;
    margin-right: 6rpx;
    width: 2rpx;
    height: 2rpx;
    border-radius: 100%;
    background: #65676a;
  }
}
</style>