<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-01-13 17:21:29
 * @LastEditors: wally
 * @LastEditTime: 2021-01-21 09:33:25
-->
<template>
  <div class="friend">
    <div class="inner">
      {{ str }}
      <span
        :key="index"
        @click="jump(item.url)"
        class="mx-2 item-friend"
        v-for="(item, index) in lists"
      >{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '友情链接:',
      lists: [
        {
          name: '科技部',
          url: 'http://www.most.gov.cn/',
        },
        {
          name: '发改委',
          url: 'https://www.ndrc.gov.cn/',
        },
        {
          name: '工信部',
          url: 'https://www.miit.gov.cn/',
        },
        {
          name: '山西综改区',
          url: 'http://zgq.shanxi.gov.cn/',
        },
        {
          name: '山西省科技厅',
          url: 'http://kjt.shanxi.gov.cn/',
        },
        {
          name: '山西省工信厅',
          url: 'http://gxt.shanxi.gov.cn/',
        },
        {
          name: '山西省发改委',
          url: 'http://fgw.shanxi.gov.cn/',
        },
        {
          name: '太原市科技局',
          url: 'http://kjj.taiyuan.gov.cn/',
        },
        {
          name: '太原市发改委',
          url: 'http://fgw.taiyuan.gov.cn/',
        },
      ],
    };
  },
  methods: {
    jump(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="stylus" scoped>
.friend {
  line-height: 64px;
  background: #fff;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.item-friend {
  cursor: pointer;
}

.item-friend:hover {
  color: #13ACC4;
}
</style>
