页面布局组件除了列表、图文、视频、轮播、应用、时间轴、统计图表、页面内嵌外,还包括哪些
时间: 2023-10-23 20:10:20 浏览: 29
除列表、图文、视频、轮播、应用、时间轴、统计图表、页面内嵌之外,页面布局组件还包括:
1. 搜索框:用于方便用户搜索网站或应用中的内容。
2. 分享按钮:用于方便用户将当前页面分享到社交媒体或其他平台。
3. 标签页:用于在同一个页面中展示多个内容模块,方便用户切换不同的内容。
4. 导航栏:用于在网站或应用中进行页面间的导航。
5. 按钮组:用于在同一个页面中展示多个操作按钮,方便用户快速进行操作。
6. 卡片式布局:用于在同一个页面中展示多个相关的内容块,方便用户浏览和选择。
7. 表格:用于在页面中展示复杂数据,方便用户查看和比较。
8. 菜单栏:用于在网站或应用中进行功能分类和操作导航。
9. 转场动画:用于页面切换时的过渡效果,提升用户体验。
10. 二维码:用于方便用户扫描二维码进行相关操作。
相关问题
提供一个vue前端页面示例,样式使用elementui,页面包括轮播图、公告、图片展示、图文卡片、返回顶部
以下是一个简单的Vue前端页面示例,样式使用ElementUI,包括轮播图、公告、图片展示、图文卡片、返回顶部:
```html
<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>
```
提供一个vue前端页面示例,样式使用elementui,页面包括大轮播图、公告、侧边滚动定位导航、图片展示、小走马灯、图文卡片、返回顶部、页面底部
以下是一个基于ElementUI的Vue前端页面示例,包括大轮播图、公告、侧边滚动定位导航、图片展示、小走马灯、图文卡片、返回顶部、页面底部。
```html
<template>
<div class="page">
<!-- 大轮播图 -->
<el-carousel :autoplay="true" :interval="4000" arrow="never">
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
<img :src="item.imageUrl" alt="">
</el-carousel-item>
</el-carousel>
<!-- 公告 -->
<div class="notice">
<i class="el-icon-information"></i>
<el-marquee :speed="20">{{ noticeText }}</el-marquee>
</div>
<!-- 侧边滚动定位导航 -->
<div class="aside">
<el-menu
:default-active="activeMenu"
class="menu"
:collapse-transition="false"
mode="vertical"
@select="handleMenuSelect"
>
<el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.id">{{ item.name }}</el-menu-item>
</el-menu>
</div>
<!-- 图片展示 -->
<div class="gallery">
<el-image
v-for="(item, index) in galleryList"
:key="index"
:src="item.imageUrl"
:preview-src-list="item.previewList"
fit="cover"
class="gallery-item"
></el-image>
</div>
<!-- 小走马灯 -->
<div class="carousel-small">
<el-carousel :autoplay="true" :interval="3000" arrow="never" type="card">
<el-carousel-item v-for="(item, index) in smallCarouselList" :key="index">
<img :src="item.imageUrl" alt="">
</el-carousel-item>
</el-carousel>
</div>
<!-- 图文卡片 -->
<div class="card-list">
<el-card
v-for="(item, index) in cardList"
:key="index"
:header="item.title"
:body-style="{ padding: '0px' }"
>
<img :src="item.imageUrl" class="image" slot="cover" />
<div style="padding: 14px;">
<span>{{ item.description }}</span>
<div class="bottom clearfix">
<div class="price">{{ item.price }}</div>
<div class="button-wrapper">
<el-button type="primary" size="small">购买</el-button>
</div>
</div>
</div>
</el-card>
</div>
<!-- 返回顶部 -->
<div class="back-to-top" @click="scrollToTop">
<i class="el-icon-arrow-up"></i>
</div>
<!-- 页面底部 -->
<div class="footer">
<span>版权所有 © 2021 xxx公司</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
bannerList: [], // 大轮播图列表
noticeText: '', // 公告文字
menuList: [], // 侧边滚动导航菜单列表
activeMenu: '0', // 当前选中的导航菜单项
galleryList: [], // 图片展示列表
smallCarouselList: [], // 小走马灯列表
cardList: [], // 图文卡片列表
};
},
mounted() {
// 初始化数据
this.initData();
// 监听滚动事件,判断是否显示返回顶部按钮
window.addEventListener('scroll', this.handleScroll);
},
methods: {
// 初始化数据
initData() {
// TODO: 获取数据
},
// 处理侧边导航菜单选中事件
handleMenuSelect(index) {
this.activeMenu = index;
// TODO: 根据选中的菜单项跳转到相应的位置
},
// 处理滚动事件
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 200) {
this.showBackToTop = true;
} else {
this.showBackToTop = false;
}
},
// 滚动到页面顶部
scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
},
},
};
</script>
<style lang="scss" scoped>
.page {
.notice {
margin: 20px 0;
display: flex;
align-items: center;
i {
margin-right: 10px;
font-size: 16px;
color: #f56c6c;
}
.el-marquee {
font-size: 14px;
color: #333;
white-space: nowrap;
}
}
.aside {
position: fixed;
top: 100px;
left: 0;
width: 180px;
height: 100%;
.menu {
background: #f5f5f5;
border-right: 1px solid #e0e0e0;
}
}
.gallery {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
.gallery-item {
width: calc(25% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
}
.carousel-small {
margin-bottom: 20px;
.el-carousel__item {
height: 150px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.card-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
.el-card {
width: calc(33.3% - 10px);
margin-right: 10px;
margin-bottom: 10px;
.image {
height: 150px;
object-fit: cover;
}
.bottom {
margin-top: 10px;
.price {
float: left;
font-size: 16px;
color: #f60;
}
.button-wrapper {
float: right;
}
}
}
}
.back-to-top {
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #f60;
color: #fff;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.3s;
i {
font-size: 20px;
}
&:hover {
opacity: 0.8;
}
}
.footer {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
span {
font-size: 14px;
color: #666;
}
}
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)