<!--
 * @Description: 友情链接
 * @Author: 空白格
 * @Date: 2022-08-17 16:24:25
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-29 17:34:28
 * @FilePath: \veterans_client_web\src\views\Home\components\FriendshipLink.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="friendship-link">
    <div class="friendship-link-box">
      <div class="friendship-link-box-label">友情链接</div>
      <div class="friendship-link-box-list">
        <div class="flbl-item" v-for="(item, index) in linkList" @click="jumpExtraLink(item.link)" :key="index">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FriendshipLink",
  data() {
    return {
      linkList: [
        { label: "贵阳市退役军人事务局", link: "http://tyjrj.guiyang.gov.cn/" },
        { label: "中国人民共和国退役军人事务部", link: "http://www.mva.gov.cn/" },
        { label: "中国军网", link: "http://www.81.cn/" },
        { label: "贵阳市人民政府", link: "http://www.guiyang.gov.cn/" },
        { label: "全国征兵网", link: "https://www.gfbzb.gov.cn/" },
        { label: "国防大学防务院", link: "http://www.cdsndu.org/" },
      ],
    };
  },
  methods: {
    jumpExtraLink(link) {
      window.open(link)
    }
  }
};
</script>

<style lang="scss" scoped>
.friendship-link {
  background-color: #d8f0e9;
  height: 115px;
  line-height: 115px;
  &-box {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    min-width: 600px;
    display: flex;
    align-items: center;
    &-label {
      background-color: #659789;
      color: #fff;
      height: 42px;
      line-height: 42px;
      padding: 0 20px;
      font-size: 14px;
      &::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url("./../../../assets/images/link-icon.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    &-list {
      display: flex;
      align-items: center;
      .flbl-item {
        padding: 0 14px;
        color: #fff;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        background: #7AAD9E;
        margin-right: 5px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
