• vue实现的商品列表网页


    一、商品列表效果如下

    二、代码;

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

    1. <template>
    2. <div class="common-layout">
    3. <el-container>
    4. <el-header>
    5. <el-menu
    6. mode="horizontal"
    7. background-color="#0aa1ed" text-color="#fff"
    8. active-text-color="#ff0" default-active="3"
    9. class="el-menu-demo"
    10. :ellipsis="false"
    11. @select="handleSelect">
    12. <el-menu-item index="1">精彩活动el-menu-item>
    13. <el-menu-item index="2">精彩女装el-menu-item>
    14. <el-menu-item index="3">品牌男装el-menu-item>
    15. <el-menu-item index="4">母婴产品el-menu-item>
    16. <el-menu-item index="5">数码科技el-menu-item>
    17. el-menu>
    18. el-header>
    19. <el-main>
    20. <el-carousel style="height: 240px">
    21. <el-carousel-item v-for="urlItem in bannerArr" :key="urlItem">
    22. <img :src="urlItem" style="width: 100%; height: 100%;"/>
    23. el-carousel-item>
    24. el-carousel>
    25. <el-row :gutter="10">
    26. <el-col :span="6" v-for="product in productArr" style="margin: 10px 0;">
    27. <el-card style="padding-bottom: 20px">
    28. <img :src="product.url" style="width:100%;height:100%;"/>
    29. <p>{{product.title}}p>
    30. <div>
    31. <span style="float: left; color: red;">¥{{product.price}} <s>{{product.oldPrice}}s> span>
    32. <span style="float: right;">销量:{{product.saleCount}}span>
    33. div>
    34. el-card>
    35. el-col>
    36. el-row>
    37. el-main>
    38. <el-footer style="background-color: #282c30; color:#666; height:200px; padding-top:40px;">
    39. <p>Copyright © 北京金桥科技有限公司版权所有 京ICP备42003601号-3 京公网安备 71010882049531号p>
    40. <p>涵盖20余门课程体系,致力于打造权威的IT职业教育学习平台p>
    41. <p>在线WWW.baidu.CN 专注于IT职业技能培训p>
    42. el-footer>
    43. el-container>
    44. div>
    45. template>
    46. <script setup>
    47. import { ref } from 'vue'
    48. //1.准备轮播图数组
    49. const bannerArr=ref(["/imgs/banner3.jpg", "/imgs/banner4.jpg", "/imgs/banner5.jpg"]);
    50. //2.准备商品对象数组
    51. const productArr = ref([
    52. {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
    53. {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "/imgs/b.jpg", saleCount: 2342},
    54. {title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季", price: 233, oldPrice: 598, url: "/imgs/c.jpg", saleCount: 2342},
    55. {title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚", price: 233, oldPrice: 598, url: "/imgs/d.jpg", saleCount: 2342},
    56. {title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花", price: 233, oldPrice: 598, url: "/imgs/e.jpg", saleCount: 2342},
    57. {title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领", price: 233, oldPrice: 598, url: "/imgs/f.jpg", saleCount: 2342},
    58. {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "/imgs/g.jpg", saleCount: 2342},
    59. {title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
    60. {title: "imone2021秋款黑色小西装外套女韩版学生宽松学", price: 233, oldPrice: 598, url: "/imgs/i.jpg", saleCount: 2342},
    61. {title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫", price: 233, oldPrice: 598, url: "/imgs/j.jpg", saleCount: 2342},
    62. {title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修", price: 233, oldPrice: 598, url: "/imgs/k.jpg", saleCount: 2342},
    63. {title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色", price: 233, oldPrice: 598, url: "/imgs/l.jpg", saleCount: 2342}]);
    64. const handleSelect = (key,keyPath) => {
    65. console.log(key, keyPath);
    66. }
    67. script>
    68. <style>
    69. p{
    70. /* 强制文本不允许换行 */
    71. white-space: nowrap;
    72. /* 溢出隐藏 */
    73. overflow: hidden;
    74. /* 超出去的文本替换成省略号 */
    75. text-overflow: ellipsis;
    76. }
    77. style>

  • 相关阅读:
    Python最新学习路线
    14.5 类集对枚举的支持------ EnumMap类 与 EnumSet 类(血干JAVA系类)
    vue中iframe传参/绕过跨域/绕过src不刷新问题解决
    回归预测模型:MATLAB神经网络回归模型
    【算法与数据结构】46、47、LeetCode全排列I, II
    计算机字符编码方式
    mysql数据库简介
    SpringCloud - 流量控制(一):基于RequestRateLimiterGatewayFilterFactory的限流
    P1586 四方定理
    Linux ARM平台开发系列讲解(调试篇) 1.6.4 NVIDIA AGX Xavier以太网MAC TO MAC模式
  • 原文地址:https://blog.csdn.net/gulanga5/article/details/139855261