<template>
  <div>
    <div class="footer">
      <div class="footList content">
        <div v-for="(item,index) in footList" :key="index">
          <div class="t4">{{item.title}}</div>
          <ul>
            <li class="t1" v-for="(item,index) in item.list" :key="index">
              <a :href="item.url" class="textcolor">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="flex-center copyright">
      <div>Copyright © 2019 技术支持：北京捷安采供应链管理有限公司 版权所有</div>
    </div>
  </div>
</template>

<script>
import {getMessagephone} from '@/common/list.js'
  export default {
      mounted(){
          getMessagephone()
          console.log("111111111111")
      },
    data() {
      return {
         /*  email:'605664467@qq.com', */
        footList: [{
            title: "友情链接",
            list: [{name:'教育部学校规划建设发展',
            url:'https://www.csdp.edu.cn/index.aspx?AspxAutoDetectCookieSupport=1'
            }, 
            {
                name:'北京市教委',
                url:'http://jw.beijing.gov.cn/'
            },
             {
                name:'全国农产品批发市场价格信息网',
                url:'http://pfscnew.agri.gov.cn/'
            }
            ],
          },
          {
            title: "关于我们",
            list: [{name:"诚招英才"}, {name:"联系我们"}]
          },
          {
            title: "客服中心",
            list: [{name:"帮助中心"}, {name:"在线客服"}]
          },
          /*  */
          {
            title: "联系方式",
            list: [{name:"客服联系电话 : 13810057696"}, {name:"电子邮箱: 13810057696@139.com"},]
          },
        ]
      }
    },
    mothods:{
        async getMessagephone(){
            console.log("111111111111")
            const {data} = await getMessagephone()
            console.log(data)
            console.log("111111111111")
            this.footList[3].list[0].name=`客服联系电话 : ${data.phone}`
            this.footList[3].list[1].name=`电子邮箱 : ${data.email}`
        }
    }
  }
</script>

<style>
  .footList {
    display: flex;
    justify-content: space-between;
  }

  .footer {
    width: 100%;
    box-sizing: border-box;
    padding-top: 6%;
    padding-bottom: 0.39rem;
    /* border-top: .01rem solid #D6D6D6; */
    /* border-bottom: .01rem solid #D6D6D6; */
  }

  .t4 {
    margin-bottom: 0.36rem;
    text-align: center;
  }

  ul>.t1 {
    margin-bottom: 0.39rem;
    text-align: center;
    color: #323232
  }
  .copyright{
    height:.61rem;
    font-size:.16rem;
    color:rgba(153,153,153,1);
  }
  .textcolor{
      color: #323232
  }
</style>
