<template>
  <view class="customservice">
    <u-navbar
      leftIconColor="#eee"
      bgColor="#0c0c0d"
      :placeholder="true"
      :fixed="true"
      height="60"
      @leftClick="back"
    ></u-navbar>
    <view class="cellBox">
      <view class="cell">
        <u--image
          :showLoading="false"
          :src="require('static/images/customservice.png')"
          width="100%"
          height="auto"
          mode="widthFix"
          class="icon"
        ></u--image>
        <u-link
          target="_blank"
          :href="customServiceUrl"
          text="Online service"
          class="lable"
        ></u-link>
      </view>
      <view class="cell">
        <u--image
          :showLoading="false"
          :src="require('static/images/line.png')"
          width="100%"
          height="auto"
          mode="widthFix"
          class="icon"
        ></u--image>
        <u-link target="_blank" :href="telegramUrl" text="Telegram" class="lable"></u-link>
      </view>
      <view class="cell">
        <u--image
          :showLoading="false"
          :src="require('static/images/telegram.png')"
          width="100%"
          height="auto"
          mode="widthFix"
          class="icon"
        ></u--image>
        <u-link target="_blank" :href="lineUrl" text="Line" class="lable"></u-link>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      customServiceUrl: state => state.app.customServiceUrl,
      telegramUrl: state => state.app.telegramUrl,
      lineUrl: state => state.app.lineUrl
    })
  },
  onLoad() {},
  methods: {
    back() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.customservice {
  background: #0b1520;
  width: 100%;
  min-height: 100vh;
  /deep/.u-navbar__content__title {
    color: #eee;
    font-weight: 600;
  }
  .cellBox {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
  }
  .cell {
    display: flex;
    padding: 15px;
    align-items: center;
    // background: #151617;
    color: #deb366;
    .icon {
      width: 35px;
      margin-right: 15px;
    }
    .lable {
      // border-bottom: 1px solid;
      color: #deb366 !important;
      font-size: 30px !important;
      line-height: 30px !important;
      /deep/span {
        border-bottom: 1px solid;
        padding-bottom: 4px;
      }
    }
  }
}
</style>
