使用vue语言写一个旅游网页代码还要有样式代码

以下是一个简单的旅游网站的Vue.js代码及其样式代码：

<template>
  <div class="app">
    <header class="header">
      <h1 class="title">{{ title }}</h1>
      <nav class="nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Destinations</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
        </ul>
      </nav>
    </header>
    <main class="main">
      <section class="featured-destination">
        <h2 class="section-title">{{ featuredDestination.title }}</h2>
        <img :src="featuredDestination.image" :alt="featuredDestination.title" class="featured-image" />
        <p class="featured-description">{{ featuredDestination.description }}</p>
      </section>
      <section class="popular-destinations">
        <h2 class="section-title">Popular Destinations</h2>
        <ul class="destination-list">
          <li v-for="destination in popularDestinations" :key="destination.id" class="destination-item">
            <img :src="destination.image" :alt="destination.title" class="destination-image" />
            <h3 class="destination-title">{{ destination.title }}</h3>
            <p class="destination-description">{{ destination.description }}</p>
          </li>
        </ul>
      </section>
    </main>
    <footer class="footer">
      <p class="footer-text">&copy; 2021 My Travel Site</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Travel Site',
      featuredDestination: {
        title: 'Featured Destination',
        image: '/images/featured-destination.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tristique magna, vel tempus dui suscipit ac.'
      },
      popularDestinations: [
        {
          id: 1,
          title: 'Tokyo, Japan',
          image: '/images/tokyo.jpg',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tristique magna, vel tempus dui suscipit ac.'
        },
        {
          id: 2,
          title: 'New York City, USA',
          image: '/images/new-york-city.jpg',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tristique magna, vel tempus dui suscipit ac.'
        },
        {
          id: 3,
          title: 'Paris, France',
          image: '/images/paris.jpg',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tristique magna, vel tempus dui suscipit ac.'
        },
        {
          id: 4,
          title: 'Sydney, Australia',
          image: '/images/sydney.jpg',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tristique magna, vel tempus dui suscipit ac.'
        }
      ]
    }
  }
}
</script>

<style>
.app {
  font-family: Arial, sans-serif;
}

.header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.title {
  margin: 0;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 1rem;
}

.nav-link {
  color: #fff;
  text-decoration: none;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.section-title {
  text-align: center;
}

.featured-destination {
  margin-bottom: 2rem;
}

.featured-image {
  max-width: 100%;
  height: auto;
}

.popular-destinations {
  margin-bottom: 2rem;
}

.destination-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.destination-item {
  flex-basis: calc(33.33% - 1rem);
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.destination-image {
  max-width: 100%;
  height: auto;
}

.footer {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
}

.footer-text {
  margin: 0;
}
</style>

上面的代码包括一个带有标题、导航菜单、特色目的地和热门目的地的完整网站，并使用CSS样式定义了网站的布局和外观。你可以根据自己的需求进行修改和扩展。