08 首页运动户外头部开发

最新推荐文章于 2024-10-18 17:49:11 发布

Dreamer_gwh

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量88

点赞数

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45529137/article/details/126675010

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中创建和使用组件。作者创建了两个组件：Banner.vue用于显示头图，使用静态图片；Icons.vue则展示了宫格布局，包含多个宫格项，每个宫格内包含图标和文字描述，所有图标都使用了相同的样式类。

摘要由CSDN通过智能技术生成

1. 效果图

在这里插入图片描述

2. 代码

在components/index目录中创建了Banner.vue和Icons.vue组件
组件说明Banner.vue就是头图的展示。Icons.vue就是大家看到的宫格
Banner.vue代码

<template>
	<view class='banner'>
		<image class='banner-img' src="../../static/img/banner1.jpg" mode=""></image>
	</view>
</template>

<script>
</script>

<style scoped>
.banner{
	width:100%;
	height: 300rpx;
}
.banner-img{
	width:100%;
	height: 300rpx;
}
</style>

Icos.vue代码

<template>
	<view class='icons'>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons1.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons2.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons3.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons4.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons5.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons6.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons7.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons8.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
.icons{
	display: flex;
	flex-wrap: wrap;
}
.icons-item{
	width:25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top:20rpx;
}
.icons-img{
	width:110rpx;
	height: 110rpx;
}
</style>