提供一个vue前端页面示例,样式使用elementui,页面包括带文字描述的轮播图、光标悬停放大的图片展示、光标悬停有提示的返回顶部
时间: 2023-11-22 15:54:09 浏览: 42
以下是一个简单的vue前端页面示例,使用了element-ui库,包括带文字描述的轮播图、光标悬停放大的图片展示、光标悬停有提示的返回顶部。
```
<template>
<div class="home">
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in carouselItems" :key="item.id">
<img :src="item.image" alt="">
<div class="carousel-desc">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
</el-carousel-item>
</el-carousel>
<div class="image-container">
<div class="image-wrapper">
<img src="/static/images/sample.jpg" alt="" class="image" @mouseover="showImagePreview=true" @mouseleave="showImagePreview=false">
<div class="image-preview" v-if="showImagePreview">
<img src="/static/images/sample.jpg" alt="" class="preview">
</div>
</div>
</div>
<div class="back-to-top" v-show="showBackToTop" @click="scrollToTop">
<i class="el-icon-arrow-up"></i>
<span>返回顶部</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
carouselItems: [
{
id: 1,
image: '/static/images/carousel1.jpg',
title: '标题1',
description: '描述1'
},
{
id: 2,
image: '/static/images/carousel2.jpg',
title: '标题2',
description: '描述2'
},
{
id: 3,
image: '/static/images/carousel3.jpg',
title: '标题3',
description: '描述3'
}
],
showImagePreview: false,
showBackToTop: false
}
},
methods: {
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
},
mounted() {
window.addEventListener('scroll', () => {
this.showBackToTop = window.scrollY > 300
})
}
}
</script>
<style scoped>
.home {
padding: 20px;
}
.carousel-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
.carousel-desc h3 {
margin: 0;
font-size: 24px;
}
.carousel-desc p {
margin: 5px 0 0;
font-size: 14px;
}
.image-container {
margin-top: 30px;
text-align: center;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.image {
max-width: 100%;
height: auto;
transition: transform 0.3s;
}
.image-preview {
position: absolute;
top: -150px;
left: calc(50% - 150px);
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
}
.preview {
max-width: 100%;
max-height: 100%;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #999;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.back-to-top:hover {
background-color: #333;
}
.back-to-top i {
margin-right: 5px;
}
</style>
```