<template>
  <div>
    <Carousel class="carousel"/>
    <ProductCenter class="productCenter"/>
    <ClassicCase class="classicCase"/>
    <NewsCenter class="newsCenter"/>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import Carousel from './carousel'
import ProductCenter from './productCenter'
import ClassicCase from './classicCase'
import NewsCenter from './newsCenter'
import ContactUs from './contactUs'
import Copyright from '@/components/copyright'

export default {
  name: 'Index',
  components: {
    Carousel,
    ProductCenter,
    ClassicCase,
    NewsCenter,
    ContactUs,
    Copyright
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.carousel {
  width: 100%;
  height: 650px;
}

.productCenter {
  width: 100%;
}

.classicCase {
  width: 100%;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url("~@/assets/image/bg.jpg");
  background-size: 100% 36.41vw;
  background-repeat: no-repeat;
}

.newsCenter {
  width: 100%;
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}
.copyright{
  width: 100%;
  background-color: #1d3348;
}
</style>
