<template>
  <div id="proginn-footer">
    <div id="friend-links">
      <div class="links">
        <a href="/">
          <img class="logo" src="https://www.proginn.com/Public/image/common/logo_new.png">
        </a>
        <div class="items">
          <div class="item">
            <span class="name">城市</span>
            <div class="list" :class="{expand: isCity}">
              <a href="https://www.proginn.com/cat/beijing/" target="_blank">北京程序员</a>
              <a href="https://www.proginn.com/cat/shanghai/" target="_blank">上海程序员</a>
              <a href="https://www.proginn.com/cat/shenzhen/" target="_blank">深圳程序员</a>
              <a href="https://www.proginn.com/cat/hangzhou/" target="_blank">杭州程序员</a>
              <a href="https://www.proginn.com/cat/guangzhou/" target="_blank">广州程序员</a>
              <a href="https://www.proginn.com/cat/chengdu/" target="_blank">成都程序员</a>
              <a href="https://www.proginn.com/cat/nanjing/" target="_blank">南京程序员</a>
              <a href="https://www.proginn.com/cat/wuhan/" target="_blank">武汉程序员</a>
              <a href="https://www.proginn.com/cat/xian/" target="_blank">西安程序员</a>
              <a href="https://www.proginn.com/cat/chongqing/" target="_blank">重庆程序员</a>
              <a href="https://www.proginn.com/cat/changsha/" target="_blank">长沙程序员</a>
              <a href="https://www.proginn.com/cat/xiamen/" target="_blank">厦门程序员</a>
              <a href="https://www.proginn.com/cat/zhengzhou/" target="_blank">郑州程序员</a>
              <a href="https://www.proginn.com/cat/tianjin/" target="_blank">天津程序员</a>
              <a href="https://www.proginn.com/cat/jinan/" target="_blank">济南 程序员</a>
              <a href="https://www.proginn.com/cat/suzhou/" target="_blank">苏州程序员</a>
              <a href="https://www.proginn.com/cat/hefei/" target="_blank">合肥程序员</a>
              <a href="https://www.proginn.com/cat/fuzhou/" target="_blank">福州程序员</a>
              <a href="https://www.proginn.com/cat/qingdao/" target="_blank">青岛程序员</a>
              <a href="https://www.proginn.com/cat/dalian/" target="_blank">大连程序员</a>
              <a href="https://www.proginn.com/cat/shenyang/" target="_blank">沈阳程序员</a>
              <a href="https://www.proginn.com/cat/shijiazhuang/" target="_blank">石家庄程序员</a>
              <a href="https://www.proginn.com/cat/zhuhai/" target="_blank">珠海程序员</a>
              <a href="https://www.proginn.com/cat/wuxi/" target="_blank">无锡程序员</a>
              <a href="https://www.proginn.com/cat/taiyuan/" target="_blank">太原程序员</a>
              <a href="https://www.proginn.com/cat/nanchang/" target="_blank">南昌程序员</a>
              <a href="https://www.proginn.com/cat/haerbin/" target="_blank">哈尔滨程序员</a>
              <a href="https://www.proginn.com/cat/nanning/" target="_blank">南宁程序员</a>
              <a href="https://www.proginn.com/cat/ningbo/" target="_blank">宁波程序员</a>
              <a href="https://www.proginn.com/cat/kunming/" target="_blank">昆明程序员</a>
              <a href="https://www.proginn.com/cat/dongguan/" target="_blank">东莞程序员</a>
              <a href="https://www.proginn.com/cat/guiyang/" target="_blank">贵阳程序员</a>
              <a href="https://www.proginn.com/cat/america/" target="_blank">美国程序员</a>
              <a href="https://www.proginn.com/cat/wenzhou/" target="_blank">温州程序员</a>
              <a href="https://www.proginn.com/cat/changchun/" target="_blank">长春程序员</a>
              <a href="https://www.proginn.com/cat/foshan/" target="_blank">佛山程序员</a>
              <a href="https://www.proginn.com/cat/changzhou/" target="_blank">常州程序员</a>
              <a href="https://www.proginn.com/cat/lanzhou/" target="_blank">兰州程序员</a>
              <a href="https://www.proginn.com/cat/huhehaote/" target="_blank">呼和浩特程序员</a>
              <a href="https://www.proginn.com/cat/wulumuqi/" target="_blank">乌鲁木齐程序员</a>
              <a href="https://www.proginn.com/cat/zhongshan/" target="_blank">中山程序员</a>
              <a href="https://www.proginn.com/cat/haikou/" target="_blank">海口程序员</a>
              <a href="https://www.proginn.com/cat/shantou/" target="_blank">汕头程序员</a>
              <a href="https://www.proginn.com/cat/yantai/" target="_blank">烟台程序员</a>
              <a href="https://www.proginn.com/cat/jiaxing/" target="_blank">嘉兴程序员</a>
              <a href="https://www.proginn.com/cat/ganzhou/" target="_blank">赣州程序员</a>
              <a href="https://www.proginn.com/cat/shaoxing/" target="_blank">绍兴程序员</a>
              <a href="https://www.proginn.com/cat/quanzhou/" target="_blank">泉州程序员</a>
              <a href="https://www.proginn.com/cat/hongkong/" target="_blank">香港程序员</a>
              <a href="https://www.proginn.com/cat/guilin/" target="_blank">桂林程序员</a>
              <a href="https://www.proginn.com/cat/luoyang/" target="_blank">洛阳程序员</a>
              <a href="https://www.proginn.com/cat/xuzhou/" target="_blank">徐州程序员</a>
              <a href="https://www.proginn.com/cat/singapore/" target="_blank">新加坡程序员</a>
              <a href="https://www.proginn.com/cat/taizhou/" target="_blank">台州程序员</a>
              <a href="https://www.proginn.com/cat/yangzhou/" target="_blank">扬州程序员</a>
              <a href="https://www.proginn.com/cat/yinchuan/" target="_blank">银川程序员</a>
              <a href="https://www.proginn.com/cat/newzealand/" target="_blank">新西兰程序员</a>
            </div>
            <span
              class="more"
              style="display: inline;"
              @click="clickMore('city')"
            >{{isCity ? '收起' : '更多'}}</span>
          </div>
          <div class="item">
            <span class="name">方向</span>
            <div class="list" :class="{expand: isDirection}">
              <a href="https://www.proginn.com/cat/houduan/" target="_blank">后端工程师</a>
              <a href="https://www.proginn.com/cat/yidongduan/" target="_blank">移动端工程师</a>
              <a href="https://www.proginn.com/cat/qianduan/" target="_blank">前端工程师</a>
              <a href="https://www.proginn.com/cat/dba/" target="_blank">DBA工程师</a>
              <a href="https://www.proginn.com/cat/sheji/" target="_blank">设计师</a>
              <a href="https://www.proginn.com/cat/chanpin/" target="_blank">产品经理</a>
              <a href="https://www.proginn.com/cat/fxqita/" target="_blank">其他</a>
              <a href="https://www.proginn.com/cat/ceshi/" target="_blank">测试</a>
              <a href="https://www.proginn.com/cat/yunwei/" target="_blank">运维工程师</a>
              <a href="https://www.proginn.com/cat/game/" target="_blank">游戏工程师</a>
              <a href="https://www.proginn.com/cat/xiaochengxu/" target="_blank">小程序</a>
              <a href="https://www.proginn.com/cat/java/" target="_blank">Java</a>
              <a href="https://www.proginn.com/cat/cpp/" target="_blank">C++</a>
              <a href="https://www.proginn.com/cat/php/" target="_blank">PHP</a>
              <a href="https://www.proginn.com/cat/c/" target="_blank">C</a>
              <a href="https://www.proginn.com/cat/csharp/" target="_blank">C#</a>
              <a href="https://www.proginn.com/cat/python/" target="_blank">Python</a>
              <a href="https://www.proginn.com/cat/ruby/" target="_blank">Ruby</a>
              <a href="https://www.proginn.com/cat/nodejs/" target="_blank">Node.js</a>
              <a href="https://www.proginn.com/cat/android/" target="_blank">Android</a>
              <a href="https://www.proginn.com/cat/ios/" target="_blank">iOS</a>
              <a href="https://www.proginn.com/cat/dqianduan/" target="_blank">前端工程师</a>
              <a href="https://www.proginn.com/cat/ui/" target="_blank">UI设计师</a>
              <a href="https://www.proginn.com/cat/yhs/" target="_blank">原画师</a>
              <a href="https://www.proginn.com/cat/cpjl/" target="_blank">产品经理</a>
              <a href="https://www.proginn.com/cat/xmjl/" target="_blank">项目经理</a>
              <a href="https://www.proginn.com/cat/chanpinqita/" target="_blank">产品其它</a>
              <a href="https://www.proginn.com/cat/operation/" target="_blank">运营</a>
              <a href="https://www.proginn.com/cat/hr/" target="_blank">HR</a>
              <a href="https://www.proginn.com/cat/architect/" target="_blank">架构师</a>
              <a href="https://www.proginn.com/cat/cto/" target="_blank">CTO</a>
              <a href="https://www.proginn.com/cat/creator/" target="_blank">创始人</a>
              <a href="https://www.proginn.com/cat/partner/" target="_blank">合伙人</a>
              <a href="https://www.proginn.com/cat/fullstack/" target="_blank">全栈</a>
              <a href="https://www.proginn.com/cat/ue/" target="_blank">UE设计师</a>
              <a href="https://www.proginn.com/cat/go/" target="_blank">Go</a>
              <a href="https://www.proginn.com/cat/hdqt/" target="_blank">后端其他</a>
              <a href="https://www.proginn.com/cat/ydqt/" target="_blank">移动其他</a>
              <a href="https://www.proginn.com/cat/csgcs/" target="_blank">测试工程师</a>
              <a href="https://www.proginn.com/cat/ywgcs/" target="_blank">运维工程师</a>
              <a href="https://www.proginn.com/cat/ddba/" target="_blank">DBA工程师</a>
              <a href="https://www.proginn.com/cat/shejiqita/" target="_blank">设计其它</a>
              <a href="https://www.proginn.com/cat/unity3d/" target="_blank">Unity3D</a>
              <a href="https://www.proginn.com/cat/cocos2dx/" target="_blank">cocos2d-x</a>
              <a href="https://www.proginn.com/cat/yxqt/" target="_blank">游戏其它</a>
              <a href="https://www.proginn.com/cat/xiaochengxu1/" target="_blank">小程序</a>
            </div>
            <span
              class="more"
              style="display: inline;"
              @click="clickMore('direction')"
            >{{isDirection ? '收起' : '更多'}}</span>
          </div>
          <div class="item">
            <span class="name">推荐</span>
            <div class="list" :class="{expand: isRecommend}">
              <a href="https://www.proginn.com/wo/267040" target="_blank">中联慧云高级后端工程师</a>
              <a href="https://www.proginn.com/wo/266824" target="_blank">广州佰锐网络科技有限公司Web前端开发工程师</a>
              <a href="https://www.proginn.com/wo/266791" target="_blank">北京中佳信科技发展有限公司高级产品经理</a>
              <a href="https://www.proginn.com/wo/266535" target="_blank">环宇智行集成与仿真测试工程师</a>
              <a href="https://www.proginn.com/wo/266478" target="_blank">北京力鼎创软高级架构师</a>
              <a href="https://www.proginn.com/wo/266153" target="_blank">北京辰安科技有限公司前端组长,高级前端开发工程师</a>
              <a href="https://www.proginn.com/wo/266124" target="_blank">上海芯点信息技术有限公司高级架构师</a>
              <a href="https://www.proginn.com/wo/266088" target="_blank">前慕华(北京)网络技术有限公司高级前端工程师</a>
              <a href="https://www.proginn.com/wo/265978" target="_blank">共享财经产品经理</a>
              <a href="https://www.proginn.com/wo/265973" target="_blank">北京满惠UI设计</a>
              <a href="https://www.proginn.com/wo/265831" target="_blank">北京磐实捷讯技术有限公司高级后端工程师</a>
              <a href="https://www.proginn.com/wo/265807" target="_blank">Freewheel软件工程师</a>
              <a href="https://www.proginn.com/wo/265757" target="_blank">腾讯高级后端工程师</a>
              <a href="https://www.proginn.com/wo/265617" target="_blank">郑州三生石科技有限公司高级后端工程师</a>
              <a href="https://www.proginn.com/wo/265478" target="_blank">广州市御财互联网金融信息服务有限公司高级后端工程师</a>
              <a href="https://www.proginn.com/wo/265295" target="_blank">Marvell高级测试开发工程师</a>
              <a href="https://www.proginn.com/wo/265268" target="_blank">脉云高级运维</a>
              <a href="https://www.proginn.com/wo/265162" target="_blank">北京深湾科技有限公司高级移动端工程师</a>
              <a
                href="https://www.proginn.com/wo/265046"
                target="_blank"
              >华尔街见闻(上海阿牛信息科技有限责任公司)高级移动端工程师</a>
              <a href="https://www.proginn.com/wo/264950" target="_blank">杭州边锋网络技术有限公司游戏后端</a>
            </div>
            <span
              class="more"
              style="display: inline;"
              @click="clickMore('recommend')"
            >{{isRecommend ? '收起' : '更多'}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" id="footer">
      <div class="footer-container">
        <div class="footer-links">
          <a class="item" href="/index/app" rel="nofollow">APP下载</a>
          <a class="item" href="http://support.proginn.com/" rel="nofollow">帮助</a>
          <a class="item" href="/about" rel="nofollow">关于我们</a>
          <a class="item" href="/about/mediareports" rel="nofollow">媒体报道</a>
          <a class="item" href="https://inn.proginn.com/sites/" rel="nofollow">合作伙伴</a>
          <a class="item" href="/about/suggestion" rel="nofollow">意见反馈</a>
          <span style="color: rgb(204, 204, 204);" class="ui item">© 程序员客栈</span>
        </div>
        <div class="safe">
          <a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">浙ICP备15029175号</a>
          <div>
            <a
              style="display: flex;"
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002011566"
              rel="nofollow"
            >
              <img
                width="20"
                height="20"
                src="https://www.proginn.com/Public/image/common/badge.png"
              >
              <span
                style="height:20px;line-height:20px;margin: 0px 0px 0px 5px;"
              >浙公网安备 33011002011566号</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCity: false,
      isBusiness: false,
      isDirection: false,
      isRecommend: false,
    }
  },
  methods: {
    clickMore(type) {
      switch(type) {
        case 'city': this.isCity = !this.isCity
          break
        case 'business': this.isBusiness = !this.isBusiness
          break
        case 'direction': this.isDirection = !this.isDirection
          break
        case 'recommend': this.isRecommend = !this.isRecommend
          break
      }
    }
  }
}
</script>

<style scoped>
#proginn-footer {
  width: 100%;
}
#friend-links,
#footer {
  display: flex;
  justify-content: center;
  background: white;
}
#friend-links {
  padding: 50px 0 40px;
}
.links,
.footer-container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  font-size: 12px;
  color: #4a4a4a;
}
.logo {
  width: 115px;
  height: 38px;
  margin-top: 10px;
}
.items {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 840px;
}
.item {
  display: flex;
}
.name {
  line-height: 30px;
  font-weight: 800;
}
.list {
  --height: 30px;
  flex: 1;
  height: var(--height);
  line-height: var(--height);
  overflow: hidden;
  margin: 0 50px 0 20px;
}
.list a {
  display: inline-block;
  margin: 0 0 0 15px;
}
.expand {
  height: auto;
}
.footer-container a,
.list a {
  color: #4a4a4a;
}
.footer-container {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  padding: 20px 0 10px;
}
.footer-links {
  display: flex;
  align-items: center;
}
.footer-container a {
  margin: 0 30px 0 0;
}
.safe {
  text-align: right;
}
.safe a {
  margin: 0;
}
.more {
  line-height: 30px;
  cursor: pointer;
}
.more:hover {
  color: #1782d9;
}
</style>
