uniapp 商城首页CSS代码

最新推荐文章于 2024-07-29 09:26:59 发布

youngcave2

最新推荐文章于 2024-07-29 09:26:59 发布

阅读量1.6k

点赞数 1

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/yougcave/article/details/116722861

版权

这篇博客分享了uni-app框架下商城首页的CSS代码实现，主要关注页面布局设计。内容包括index.vue、api.js（数据接口）、字体文件以及配置文件，虽然CSS复杂到需要复制，但其他部分相对简单。

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

商马商城的首页代码，重点是页面布局，CSS代码

效果是这样子的，只有一页，只写了CSS，跳转都还没写

文件目录

index.vue

<template>
	<view class="home">
		<swiper>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>

	
	<!-- 放置整个导航模块-->
		<view class="nav">
			<!-- 单个小模块 复制四份 -->
			<view class="nav_item">
				<!-- 完全按照 -->
				<view class="iconfont icon-ziyuan"></view>
				<text>资源代码</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>关于我们</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-tupian"></view>
				<text>模板图片</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-shipin"></view>
				<text>教学视频</text>
			</view>
			
		</view>

	
	
	<view class="hot_goods">
		
		<view class="tit">推荐商品</view>
		
		<!-- 商品列表 -->
		<view class="goods_list">
			
			<!-- 单个商品 -->
			<view class="goods_item">
				<image src="https://img-blog.csdnimg.cn/img_convert/2d97212bbe73a31880ae9386db1de6c0.png"></image>
				<view class="price">
					<text>￥2199</text>
					<text>￥2499</text>
				</view>
				<view class="name">
					华为(HUAWEI) 荣耀6 Plus 16G 5G版
				</view>
			</view>
			
			<view class="goods_item">
				<image src="https: