vue实现的商品列表网页

一、商品列表效果如下

二、代码;

vue实现的商品列表网页  ,  图片在vue项目的Public文件夹里的 imgs中

<template><div class="common-layout"><!--  el-container:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。  --><el-container><!-- 1.头部: 顶部导航栏--><el-header><el-menumode="horizontal"background-color="#0aa1ed" text-color="#fff"active-text-color="#ff0" default-active="3"class="el-menu-demo":ellipsis="false"@select="handleSelect"><el-menu-item index="1">精彩活动</el-menu-item><el-menu-item index="2">精彩女装</el-menu-item><el-menu-item index="3">品牌男装</el-menu-item><el-menu-item index="4">母婴产品</el-menu-item><el-menu-item index="5">数码科技</el-menu-item></el-menu></el-header><!-- 2.内容部分 --><el-main><!-- 4.编写主体轮播图 --><el-carousel style="height: 240px"><el-carousel-item v-for="urlItem in bannerArr" :key="urlItem"><img :src="urlItem"  style="width: 100%; height: 100%;"/></el-carousel-item></el-carousel><!-- 5.商品列表 --><el-row :gutter="10"><el-col :span="6" v-for="product in productArr"  style="margin: 10px 0;"><el-card style="padding-bottom: 20px"><img :src="product.url" style="width:100%;height:100%;"/><p>{{product.title}}</p><div><span style="float: left; color: red;">¥{{product.price}} <s>{{product.oldPrice}}</s> </span><span style="float: right;">销量:{{product.saleCount}}</span></div></el-card></el-col></el-row></el-main><!-- 3.尾部 --><el-footer style="background-color: #282c30; color:#666; height:200px; padding-top:40px;"><p>Copyright © 北京金桥科技有限公司版权所有 京ICP备42003601号-3 京公网安备 71010882049531号</p><p>涵盖20余门课程体系,致力于打造权威的IT职业教育学习平台</p><p>在线WWW.baidu.CN 专注于IT职业技能培训</p></el-footer></el-container></div>
</template><script setup>
import { ref } from 'vue'//1.准备轮播图数组
const bannerArr=ref(["/imgs/banner3.jpg", "/imgs/banner4.jpg", "/imgs/banner5.jpg"]);//2.准备商品对象数组
const productArr = ref([{title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},{title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "/imgs/b.jpg", saleCount: 2342},{title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季", price: 233, oldPrice: 598, url: "/imgs/c.jpg", saleCount: 2342},{title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚", price: 233, oldPrice: 598, url: "/imgs/d.jpg", saleCount: 2342},{title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花", price: 233, oldPrice: 598, url: "/imgs/e.jpg", saleCount: 2342},{title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领", price: 233, oldPrice: 598, url: "/imgs/f.jpg", saleCount: 2342},{title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "/imgs/g.jpg", saleCount: 2342},{title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},{title: "imone2021秋款黑色小西装外套女韩版学生宽松学", price: 233, oldPrice: 598, url: "/imgs/i.jpg", saleCount: 2342},{title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫", price: 233, oldPrice: 598, url: "/imgs/j.jpg", saleCount: 2342},{title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修", price: 233, oldPrice: 598, url: "/imgs/k.jpg", saleCount: 2342},{title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色", price: 233, oldPrice: 598, url: "/imgs/l.jpg", saleCount: 2342}]);const handleSelect = (key,keyPath) => {console.log(key, keyPath);
}
</script><style>
p{/* 强制文本不允许换行 */white-space: nowrap;/* 溢出隐藏 */overflow: hidden;/* 超出去的文本替换成省略号 */text-overflow: ellipsis;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/857421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql:简单理解mysql mvcc的可重复读

# 原理 假设有这样的sql begin select&#xff08;或update、insert、delete&#xff09; ... commit当执行【begin】的时候&#xff0c;标记有一个新事务要开始&#xff0c;但是事务还没有真正开始&#xff0c;事务id还没有产生当执行事务里面的第一个sql语句时&#xff08;…

java之url任意跳转漏洞

1 漏洞介绍 URLRedirect url重定向漏洞也称url任意跳转漏洞&#xff0c;网站信任了用户的输入导致恶意攻击&#xff0c;url重定向主要用来钓鱼&#xff0c;比如url跳转中最常见的跳转在登陆口&#xff0c;支付口&#xff0c;也就是一旦登陆将会跳转任意自己构造的网站&#xf…

Xshell7免费版下载安装使用

​一、下载安装​ 1.打开官网下载 https://www.xshell.com/zh/free-for-home-school/ 2.选择合适的下载路径&#xff0c;点击下载按钮&#xff0c;然后按照提示完成安装。 二、Xshell7的使用&#xff0c;Xhell连接Linux 1.连接之前&#xff0c;确保在Linux中开启SSH。参考&a…

Ubuntu 查看设备温度

要在Ubuntu中查看设备的温度&#xff0c;可以使用一些命令行工具来获取系统硬件的温度信息。下面列出了几种常用的方法&#xff1a; 方法 1: 使用 sensors 命令 sensors 命令用于读取和显示系统中的传感器数据&#xff0c;包括CPU温度和其他硬件传感器的信息。首先需要安装 l…

HAL-按键-MultiButton使用记录

title: HAL-按键-MultiButton使用记录 tags: STM32HalCubemax 文章目录 HAL-按键-MultiButton使用记录值得注意的是注意源函数里面有个类似“心跳“的东西 往期内容基础库HAL cubemax VSCODE GCC HAL-按键-MultiButton使用记录 MultiButton 是一个开源的轻量的按键判断的函数…

LANG、LC_MESSAGES和LC_ALL

在Linux系统中&#xff0c;环境变量LANG、LC_MESSAGES和LC_ALL用于控制系统和应用程序的语言和区域设置&#xff08;locale&#xff09;。它们的具体作用如下&#xff1a; LANG&#xff1a; LANG是最基本的环境变量&#xff0c;用于指定系统的默认语言和区域设置。它是一个全局…

YOLOv8中的C2f模块

文章目录 一、结构概述二、模块功能 一、结构概述 C2f块:首先由一个卷积块(Conv)组成&#xff0c;该卷积块接收输入特征图并生成中间特征图特征图拆分:生成的中间特征图被拆分成两部分&#xff0c;一部分直接传递到最终的Concat块&#xff0c;另一部分传递到多个Botleneck块进…

QT基础 - 文本文件读写

目录 零. 前言 一.读取文件 二. 写入文件 三. 和二进制读写的区别 零. 前言 在 Qt 中&#xff0c;对文本文件进行读写操作是常见的任务之一。这对于保存和加载配置信息、处理数据文件等非常有用。 Qt 提供了多种方式来读写文本文件&#xff0c;使得文件操作变得相对简单和…

SwiftUI 6.0(iOS 18)ScrollView 全新的滚动位置(ScrollPosition)揭秘

概览 在只有方寸之间大小的手持设备上要想体面的向用户展示海量信息&#xff0c;滚动视图&#xff08;ScrollView&#xff09;无疑是绝佳的“东牀之选”。 在 SwiftUI 历史的长河中&#xff0c;总觉得苹果对于 ScrollView 视图功能的升级是在“挤牙膏”。这不&#xff0c;在本…

“浔川AI翻译机v3.0”即将上线!

1 浔川AI翻译机简介&#xff1a; 浔川AI翻译机是一种基于人工智能技术开发的翻译设备。它能够实时将一种语言的文本或口语翻译成另一种语言&#xff0c;使得不同语言之间的交流更加便捷。浔川AI翻译机利用深度学习算法和大数据训练模型&#xff0c;能够自动识别和理解输入的语…

spire.Pdf 将pdf转成image

一、nuget安装 <ItemGroup><PackageReference Include"Spire.PDF" Version"10.6.7" /></ItemGroup> 二、直接上代码 using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Logging; using System; using System.IO;namespace …

Mysql常用函数及技巧

开源项目SDK&#xff1a;https://github.com/mingyang66/spring-parent 个人文档&#xff1a;https://mingyang66.github.io/raccoon-docs/#/ 一、round()函数 round()函数用于将数字四射侮辱到指定的小数位&#xff0c;语法如下&#xff1a; round(number, decimals)number…

乱弹篇(35)掩耳盗铃与两三十年

成语“ 掩耳盗铃 ”&#xff0c;比喻自己欺骗自己&#xff0c;明明是掩盖不住的事情偏要想法子掩盖。它多用来讽刺那些做事不想让别人知道&#xff0c;却偏偏又引起他人注意的人。 现在网络上以新浪微博和邪恶的“800727”为典型的自媒体平台和其掌控者&#xff0c;就是现代版…

【Linux基础】基础环境配置

设置APT源 进入源文本设置&#xff1a; vim /etc/apt/sources.list 配置源&#xff1a; #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib deb-src http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib#阿里云 deb http:…

提升研发效率:三品PLM解决方案在汽车汽配行业的实践

随着全球汽车市场的快速发展&#xff0c;中国汽车汽配行业迎来了前所未有的发展机遇。然而&#xff0c;在这一过程中&#xff0c;企业也面临着诸多挑战&#xff0c;如研发能力的提升、技术资料管理的复杂性、以及跨部门协作的困难等。为了应对这些挑战&#xff0c;三品产品生命…

Flink assignTimestampsAndWatermarks 深度解析:时间语义与水印生成

目录 概述 时间语义 时间戳分配 水印的作用 最佳实践 案例分析 注意事项 应用场景 概述 在Apache Flink中,assignTimestampsAndWatermarks是一个重要的方法,它允许数据流处理程序根据事件时间(event time)分配时间戳和生成水印(watermarks)。这个方法通常用于处理…

模式分解算法-满足3NF的无损且保持函数依赖的分解算法、满足BCNF的无损连接分解算法

一、引言 1、对指定的关系模式&#xff0c;若范式级别较低&#xff0c;为第一范式或第二范式&#xff0c;由于存在数据冗余或更新异常问题&#xff0c;在实际中一般是不可用的&#xff0c;关系模式的规范化就是将满足低一级的关系模式分解为若干满足高一级范式的关系模式的集合…

金融与教育领域的等保测评分析

简介 等保测评是指信息系统安全等级保护测评&#xff0c;它是根据国家相关法律法规和标准&#xff0c;对信息系统安全等级进行的评估和认证。金融与教育领域作为关键信息基础设施的重要组成部分&#xff0c;其信息系统安全尤为重要。本文将对这两个领域的等保测评进行分析&…

Python轻松设置Excel单元格数字显示格式

Excel作为强大的数据处理与分析工具&#xff0c;不仅能够存储大量数据&#xff0c;还支持复杂的数据处理与可视化功能。而如何恰当地展示Excel表格中的数据是Excel文件制作的关键之一。这便涉及到Excel单元格数字格式的设置。数字格式不仅关乎数据的美学呈现&#xff0c;如货币…

聊聊 C# dynamic 类型,并分享一个将 dynamic 类型变量转为其它类型的技巧和实例

前言 dynamic 是一种有别于传统变量类型的动态类型声明&#xff0c;刚开始接触可能在理解上会有些困难&#xff0c;可以简单地把它理解为一个盲盒&#xff0c;你可以任意猜测盒子有什么东西&#xff0c;并认为这些东西真正存在而进行处理&#xff0c;等到真正打开时&#xff0…