提供一个vue前端页面示例，样式使用elementui，页面包括轮播图、公告、图片展示、图文卡片、返回顶部

以下是一个简单的Vue前端页面示例，样式使用ElementUI，包括轮播图、公告、图片展示、图文卡片、返回顶部：

<template>
  <div class="home">
    <el-carousel :interval="5000">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.src" alt="">
      </el-carousel-item>
    </el-carousel>

    <div class="notice">
      <i class="el-icon-bell"></i>
      <marquee>{{ notice }}</marquee>
    </div>

    <div class="card-container">
      <div class="card" v-for="(item, index) in cardItems" :key="index">
        <img :src="item.src" alt="">
        <div class="card-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </div>

    <el-row class="pic-container">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in picItems" :key="index">
        <img :src="item.src" alt="">
      </el-col>
    </el-row>

    <div class="back-to-top" v-if="showBackToTop" @click="backToTop">
      <i class="el-icon-arrow-up"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        {
          src: require('@/assets/images/carousel1.jpg')
        },
        {
          src: require('@/assets/images/carousel2.jpg')
        },
        {
          src: require('@/assets/images/carousel3.jpg')
        }
      ],
      notice: '这里是公告，这里是公告，这里是公告，这里是公告，这里是公告，这里是公告',
      cardItems: [
        {
          src: require('@/assets/images/card1.jpg'),
          title: '这是一张图片',
          desc: '这是一段描述'
        },
        {
          src: require('@/assets/images/card2.jpg'),
          title: '这是一张图片',
          desc: '这是一段描述'
        },
        {
          src: require('@/assets/images/card3.jpg'),
          title: '这是一张图片',
          desc: '这是一段描述'
        },
        {
          src: require('@/assets/images/card4.jpg'),
          title: '这是一张图片',
          desc: '这是一段描述'
        }
      ],
      picItems: [
        {
          src: require('@/assets/images/pic1.jpg')
        },
        {
          src: require('@/assets/images/pic2.jpg')
        },
        {
          src: require('@/assets/images/pic3.jpg')
        },
        {
          src: require('@/assets/images/pic4.jpg')
        },
        {
          src: require('@/assets/images/pic5.jpg')
        },
        {
          src: require('@/assets/images/pic6.jpg')
        },
        {
          src: require('@/assets/images/pic7.jpg')
        },
        {
          src: require('@/assets/images/pic8.jpg')
        }
      ],
      showBackToTop: false
    }
  },
  methods: {
    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.showBackToTop = window.scrollY > 500
    })
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.notice {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fffbe6;
  margin-bottom: 20px;

  i {
    font-size: 20px;
    margin-right: 10px;
    color: #f0ad4e;
  }

  marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;

  .card {
    width: calc(25% - 10px);
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card-content {
      padding: 10px;

      h3 {
        margin: 0;
        font-size: 16px;
        color: #333;
      }

      p {
        margin: 10px 0 0;
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.pic-container {
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  background-color: #f0ad4e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.7;

  i {
    font-size: 30px;
    color: #fff;
  }

  &:hover {
    opacity: 1;
  }
}
</style>