<template>
	<div class="footer-container">
		<div class="foot-content">
			<div class="footer">
				<div>
					<p class="links-title">
						<span>LINK</span>
						<span>友情链接</span>
					</p>
					<ul class="link-list">
						<li v-for="(item,index) in list" :key="index">
							<a :href="item.linkUrl" :title="item.brief">{{ item.name }}</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom-main">
			<div class="hot-tel">
				<p>24小时客服竭诚为您服务</p>
				<p>
					<span class="iconfont icon24xiaoshi"></span>4000-369-369
				</p>
			</div>
			<div class="adress">
				<p>
					<span class="iconfont iconditu"></span>广东省东莞市松山湖工业西路12号 欣新房车控股集团(东莞)股份有限公司
				</p>
				<p>
					©欣新房车控股集团（东莞）股份有限公司2019保留一切权利
					备案号：
					粤ICP备19072339号-1
				</p>
			</div>
		</div>
		<!-- <nuxt-link :to="item.linkUrl">{{ item.name }}</nuxt-link> -->

		<!-- <div class="footer">
      <div class="flex-aic-jcb" style="height: 200px;width: 100%;border-bottom: 1px solid #323737">
        <div class="flex-aic">
          <div class="footer-scan">
            <img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat.jpg" alt="欣新房车，让生活更美好"/>
            <p class="ft-12 tc color-ccc">欣新房车微信公众号</p>
          </div>
          <div class="footer-scan">
            <img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt="欣新房车，让生活更美好"/>
            <p class="ft-12 tc color-ccc">欣新房车助手小程序</p>
          </div>
          <div class="footer-scan">
            <img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt="欣新房车，让生活更美好"/>
            <p class="ft-12 tc color-ccc">滴房车App(欣新旗下)</p>
          </div>
        </div>
        <div class="r-contant">
          <div class="ft-30 flex-aic r-contant-i"><img src="https://mgmt.dfangche.com/xxfccn/image/home/phone.png" style="width: 30px;" alt="欣新房车，让生活更美好"/>4000-369-369</div>
          <div class="ft-16 flex-aic r-contant-i"><img src="https://mgmt.dfangche.com/xxfccn/image/home/address.png" alt="欣新房车，让生活更美好"/>广东省东莞市松山湖工业西路12号</div>
          <div class="ft-16 flex-aic r-contant-i"><img src="https://mgmt.dfangche.com/xxfccn/image/home/company.png" alt="欣新房车，让生活更美好"/>欣新房车控股集团（东莞）股份有限公司</div>
        </div>
      </div>
    </div>
    <div class=" flex-aic-jcc">
      <ul class="fri" v-if="listShow">
         <li v-for="(item,index) in list" :key="index">
           <a :href="item.linkUrl" :title="item.brief">{{ item.name }}</a>
           <span>|</span>
          </li>
        </ul>
    </div>
    <div class="link-f flex-aic-jcc">
      ©欣新房车控股集团（东莞）股份有限公司2019保留一切权利
      <span style="margin-left: 5px;">备案号：</span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备19072339号-2</a>
		</div>-->
	</div>
</template>

<script>
import axios from '../plugins/axios'
export default {
	transition: 'bounce',
	name: 'footerModal',
	props: [],
	data() {
		return {
			list: [],
			listShow: false
		}
	},
	created() {
		this.getAll()
	},
	methods: {
		async getAll() {
			let {
				data: { data }
			} = await axios.get('/api/uccn/app/unauth/friend_link/list')
			if (data.length == 0) {
				this.listShow = false
			} else {
				this.listShow = true
			}
			this.list = data
		}
	}
}
</script>
<style>
.footer {
	display: block;
}
.foot-content {
	width: 100%;
	border-bottom: 1px solid #444;
}
.links-title {
	display: inline-block;
	width: 169px;
}
.links-title span:nth-child(1) {
	font-weight: bold;
	color: #1bbb9f;
	font-size: 40px;
	font-style: italic;
}
.links-title span:nth-child(2) {
	position: relative;
	top: -8px;
	left: 4px;
}
.link-list {
	margin-top: 15px;
	overflow: hidden;
	display: inline-block;
}
.link-list li {
	float: left;
	margin-right: 95px;
	line-height: 25px;
}
.link-list li a {
	font-size: 16px;
	color: #cccccc;
}
.link-list li a:hover {
	color: #1bbb9f;
}
.bottom-main {
	width: 1120px;
	margin: 0 auto;
	margin-top: 30px;
}
.hot-tel {
	display: inline-block;
}
.hot-tel p:nth-child(1) {
	color: #999;
}
.hot-tel p:nth-child(2) {
	display: inline-block;
	font-size: 29px;
	background: #1bbb9f;
	padding: 16px 15px;
	border-radius: 10px;
	margin-top: 15px;
}
.hot-tel p:nth-child(2) span {
	font-size: 29px;
	margin-right: 10px;
}
.bottom-main .adress {
  display: inline-block;
  float: right;
  text-align: center;
  margin-top: 44px;
}
.bottom-main .adress p:nth-child(1){
  font-size: 16px;
  color: #ccc;
}
.bottom-main .adress p:nth-child(2){
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}
</style>