我有.hero{
background-color:#5FCF80;
height: 80vh;
top: 0;
margin: 0;
}
body{
margin: 0;
/*
font-family: 'Varela Round', sans-serif;
*/
font-family: 'Roboto', sans-serif;
}
header{
display: block;
padding: 20px;
background-color: white;
width: 100%;
top: 0;
}
title{
padding: px 20px;
display:table-cell;
vertical-align:middle;
font-size: 19px;
}
需要数据库中的一些数据,这些数据包括图片标题和一些文字。我使用foundation orbit
如下:
vue component
我需要从api中获取所有信息,它会获取第一个信息并将其余部分堆积在其下而不是滑动。我可以在哪里放置...
<template>
<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>
<div v-for="development in components.other_developments">
<ul class="orbit-container" style="height: 500px">
<h1 class="other-developments-orbit-title">{{development.name}}</h1>
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<p class="other-developments-orbit-text">{{development.description}}</p>
<a class="other-developments-orbit-button button" id="custom-button">VISIT WEBSITE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
<li class="is-active orbit-slide" data-use-m-u-i="false">
<img class="other-developments-image orbit-image" :src="development.image_url" alt="Space">
</li>
</ul>
</div>
</div>
</template>
...
以使其与所有数据一起滑动。