<!-- 链接 -->
<template>
  <div
    class="links"
    :style="{'background-color':datas.componentData['backgroundColor'],'color':datas.componentData['fontColor'],
    'text-align':datas.componentData['arrowsSite'],'line-height':datas.componentData['initcharSize']+'em'}"
    @click="onclickHandle"
  >
    <span
      :style="{'font-size':datas.componentData['initcharSize']+'em'}"
    >{{datas.componentData['title']}}</span>
    <span class="jt" v-if="datas.componentData['arrowShow']"></span>
  </div>
</template>
<script>
const app = getApp()
export default {
  name: "links",
  props: {
    datas: {
      type: Object,
      default: {}
    },
    render: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    onclickHandle(e) {
      app.trackCpn(e, this.datas.componentName, this.datas.componentData.link)
      app.$themeToLink(this.datas.componentData.link);
    }
  },
  computed: {},
  components: {}
};
</script>
<style lang="scss" scoped>
.links {
  font-size: 16px;
  padding-right: 10px;
  // height: 35px;
  // line-height: 35px;
  .jt {
    display: inline-block;
    border-top: 1px solid;
    border-right: 1px solid;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(405deg);
    margin-left: 10px;
    // vertical-align: middle;
  }
}
</style>