<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> -->
					<vue-seamless-scroll :data="list" :class-option="optionLeft" class="seamless-warp2" style="width:864px;">
						<ul class="item" style="overflow: hidden;">
							<li v-for="(item,index) in list" :key="index">
								<a target="_blank" style="color:#fff" :href="item.linkUrl" v-text="item.name"></a>
							</li>
						</ul>
					</vue-seamless-scroll>
				</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>
	</div>
</template>
<script>
import axios from '../plugins/axios'

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	transition: 'bounce',
	name: 'footerModal',
	props: [],
	data() {
		return {
			list: [],
			listShow: false,
			newsList: [
				{
					title: '11111111111'
				},
				{
					title: '2222222'
				}
			]
		}
	},
	computed: {
		optionLeft() {
			return {
				direction: 2,
				limitMoveNum: 2
			}
		}
	},
	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>
.seamless-warp2 {
	overflow: hidden;
	height: 25px;
	width: 870px;
	display: inline-block;
	margin-left:80px;
}
.seamless-warp2 ul.item {
	width: 580px;
}
.seamless-warp2 ul.item li {
	float: left;
	margin-right: 95px;
}
.footer {
	display: block;
	overflow: hidden;
}
.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;
	display: inline-block;
	position: relative;
	top: -27px;
	left: 80px;
}
.link-list li {
	float: left;
	width: 200px;
	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>