Vue 前台项目（电商）6

最新推荐文章于 2023-01-15 23:08:36 发布
最新推荐文章于 2023-01-15 23:08:36 发布
阅读量583 收藏 1
点赞数
分类专栏： 实战 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46287150/article/details/122134062
版权
该博客介绍了如何在电商网站的首页实现商品排行、猜你喜欢和楼层展示等组件。商品排行组件包括热卖、特价和新品排行，每个商品都有图片、名称和价格信息。猜你喜欢组件展示了多个商品图片及价格，鼓励用户浏览和购买。楼层组件则包含了家用电器的不同分类，如热门、大家电等，每个分类下有具体的产品推荐和广告图。这些组件都旨在提升用户体验和促进销售。
摘要由CSDN通过智能技术生成

商品排行组件 Rank

在 Home 文件夹下创建 Rank 文件夹 并在里创建 images 文件夹和 index.vue 文件
在这里插入图片描述
index.vue

<template>
  <!-- 商品排行 -->
    <div class="rank">
        <div class="tab">
            <div class="tab-tit clearfix">
                <a href="javascript:;" class="on">
                    <p class="img">
                        <i></i>
                    </p>
                    <p class="text">热卖排行</p>
                </a>
                <a href="javascript:;">
                    <p class="img">
                        <i></i>
                    </p>
                    <p class="text">特价排行</p>
                </a>
                <a href="javascript:;">
                    <p class="img">
                        <i></i>
                    </p>
                    <p class="text">新品排行</p>
                </a>
            </div>

        </div>
        <div class="content">
            <ul>
                <li>
                    <div class="img-item">
                        <p class="tab-pic">
                            <a href="#">
                                <img src="./images/1.jpg" />
                            </a>
                        </p>
                        <div class="tab-info">
                            <div class="info-title">
                                <a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
                            </div>
                            <p class="info-price">定金：¥100.00</p>
                        </div>
                    </div>
                    <div class="img-item">
                        <p class="tab-pic">
                            <a href="#">
                                <img src="./images/1.jpg" />
                            </a>
                        </p>
                        <div class="tab-info">
                            <div class="info-title">
                                <a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
                            </div>
                            <p class="info-price">定金：¥100.00</p>
                        </div>
                    </div>
                    <div class="img-item">
                        <p class="tab-pic">
                            <a href="#">
                                <img src="./images/1.jpg" />
                            </a>
                        </p>
                        <div class="tab-info">
                            <div class="info-title">
                                <a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
                            </div>
                            <p class="info-price">定金：¥100.00</p>
                        </div>
                    </div>
                    <div class="img-item">
                        <p class="tab-pic">
                            <a href="#">
                                <img src="./images/1.jpg" />
                            </a>
                        </p>
                        <div class="tab-info">
                            <div class="info-title">
                                <a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
                            </div>
                            <p class="info-price">定金：¥100.00</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'',
}
</script>

<style scoped lang="less">
.rank {
        width: 1200px;
        margin: 0 auto;

        .tab {
            margin: 0 auto;
            overflow: hidden;
            width: 312px;

            .tab-tit {
                text-align: center;

                a {
                    display: block;
                    padding: 0 18px;
                    float: left;
                    text-decoration: none;
                    font-size: 16px;
                    color: #999;

                    p {
                        margin: 5px 0;
                    }

                    .img {
                        i {
                            width: 35px;
                            height: 35px;
                            display: block;
                            background: url(./images/bg0.png);
                            margin-left: 10px;
                        }
                    }

                    .text {
                        line-height: 28px;
                    }
                }

                .on {
                    color: #e60012;

                    .img {
                        i {
                            background-position: -35px 0;
                        }
                    }
                }
            }
        }

        .content {
            overflow: hidden;
            padding: 10px;

            ul {
                li {
                    overflow: hidden;
                    list-style: none;
                    line-height: 18px;

                    .img-item {
                        border: 1px solid #e1251b;
                        width: 269px;
                        float: left;
                        overflow: hidden;
                        margin: 0 12px 10px;
                        background: #fff;

                        .tab-pic {
                            width: 230px;
                            height: 210px;
                            overflow: hidden;
                            text-align: center;
                            margin: 5px auto 18px;

                            a {
                                img {
                                    width: 200px;
                                    height: 200px;
                                }
                            }
                        }

                        .tab-info {
                            background: #fafafa;

                            .info-title {
                                height: 50px;
                                line-height: 28px;
                                overflow: hidden;
                                margin: 0 auto;
                                padding-left: 10px;

                                a {
                                    color: #333;
                                    text-decoration: none;
                                }
                            }

                            .info-price {
                                font-size: 20px;
                                color: #e1251b;
                                height: 35px;
                                padding-left: 10px;
                                display: block;
                                line-height: 24px;
                                margin: 10px auto 0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

猜你喜欢组件 Like

在 Home 文件夹下创建 Like文件夹 并在里创建 images 文件夹和 index.vue 文件
在这里插入图片描述
index.vue

<template>
<!-- 猜你喜欢 -->
    <div class="like">
        <div class="py-container">
            <div class="title">
                <h3 class="fl">猜你喜欢</h3>
                <a href="javascript:;" class="fr tip changeBnt">换一换</a>
            </div>
            <div class="bd">
                <ul class="favourate">
                    <li>
                        <img src="./images/like_02.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li>
                        <img src="./images/like_03.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li>
                        <img src="./images/like_01.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li>
                        <img src="./images/like_02.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li>
                        <img src="./images/like_03.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li>
                        <img src="./images/like_01.png" alt="" />
                        <div class="like-text">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:''
}
</script>

<style scoped lang="less">
.like {
        margin-top: 15px;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .title {
                overflow: hidden;

                .fl {
                    float: left;
                    font-size: 20px;
                    line-height: 30px;
                }

                .fr {
                    float: right;
                    background-image: url(./images/icons.png);
                    width: 66px;
                    height: 25px;
                    background-position: 182px -104px;
                    line-height: 30px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #666;
                    text-decoration: none;
                }
            }

            .bd {
                .favourate {
                    border: 1px solid #e4e4e4;
                    overflow: hidden;
                    padding: 0 10px;
                    box-sizing: border-box;
                    display: flex;

                    li {
                        height: 250px;
                        margin: 0 -1px;
                        overflow: hidden;
                        background: #fff;
                        position: relative;
                        width: 16.667%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 142px;
                            height: 142px;
                            transition: all 400ms;

                            &:hover {
                                opacity: 0.8;
                                transform: scale(1.1)
                            }
                        }

                        .like-text {
                            padding: 0;
                            width: 142px;
                            border-right: 1px solid #e4e4e4;

                            p {
                                margin: 5px 0;
                            }

                            h3 {
                                color: #df3033;
                                font-size: 20px;
                                line-height: 30px;
                                margin: 9px 0;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
        }
    }

</style>

楼层组件 Floor

在 Home 文件夹下创建 Floor 文件夹 并在里创建 images 文件夹和 index.vue 文件
在这里插入图片描述
index.vue

<template>
  <!--楼层-->
    <div class="floor">
        <div class="py-container">
            <div class="title clearfix">
                <h3 class="fl">家用电器</h3>
                <div class="fr">
                    <ul class="nav-tabs clearfix">
                        <li class="active">
                            <a href="#tab1" data-toggle="tab">热门</a>
                        </li>
                        <li>
                            <a href="#tab2" data-toggle="tab">大家电</a>
                        </li>
                        <li>
                            <a href="#tab3" data-toggle="tab">生活电器</a>
                        </li>
                        <li>
                            <a href="#tab4" data-toggle="tab">厨房电器</a>
                        </li>
                        <li>
                            <a href="#tab5" data-toggle="tab">应季电器</a>
                        </li>
                        <li>
                            <a href="#tab6" data-toggle="tab">空气/净水</a>
                        </li>
                        <li>
                            <a href="#tab7" data-toggle="tab">高端电器</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane">
                    <div class="floor-1">
                        <div class="blockgary">
                            <ul class="jd-list">
                                <li>节能补贴</li>
                                <li>4K电视</li>
                                <li>空气净化器</li>
                                <li>IH电饭煲</li>
                                <li>滚筒洗衣机</li>
                                <li>电热水器</li>
                            </ul>
                            <img src="./images/floor-1-1.png" />
                        </div>
                        <div class="floorBanner">
                            <div class="swiper-container" id="floor1Swiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="./images/floor-1-b01.png">
                                    </div>
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="swiper-pagination"></div>

                                <!-- 如果需要导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                        <div class="split">
                            <span class="floor-x-line"></span>
                            <div class="floor-conver-pit">
                                <img src="./images/floor-1-2.png" />
                            </div>
                            <div class="floor-conver-pit">
                                <img src="./images/floor-1-3.png" />
                            </div>
                        </div>
                        <div class="split center">
                            <img src="./images/floor-1-4.png" />
                        </div>
                        <div class="split">
                            <span class="floor-x-line"></span>
                            <div class="floor-conver-pit">
                                <img src="./images/floor-1-5.png" />
                            </div>
                            <div class="floor-conver-pit">
                                <img src="./images/floor-1-6.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:''
}
</script>

<style scoped lang="less">
.floor {
        margin-top: 15px;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .title {
                .fl {
                    float: left;
                    color: #c81623;
                    font-size: 20px;
                    line-height: 30px;
                    margin: 9px 0;
                    font-weight: 700;
                }

                .fr {
                    float: right;

                    .nav-tabs {
                        margin: 10px 0 0;
                        display: inline-block;

                        li {
                            float: left;
                            line-height: 18px;

                            a {
                                padding-top: 1px;
                                font-weight: 400;
                                background-color: #fff;

                                &::after {
                                    content: "|";
                                    padding: 0 10px;
                                }
                            }

                            &:nth-child(7) {
                                a {
                                    &::after {
                                        content: "";
                                    }
                                }
                            }

                            &.active {
                                a {
                                    color: #e1251b;
                                }
                            }
                        }
                    }
                }
            }

            .tab-content {
                border-top: 2px solid #c81623;
                border-bottom: 1px solid #e4e4e4;

                .tab-pane {
                    .floor-1 {
                        height: 360px;
                        display: flex;

                        .blockgary {
                            width: 210px;
                            height: 100%;
                            background: #f7f7f7;

                            .jd-list {
                                padding: 15px 0;
                                overflow: hidden;

                                li {
                                    list-style-type: none;
                                    float: left;
                                    width: 40%;
                                    margin: 0 10px;
                                    border-bottom: 1px solid #e4e4e4;
                                    text-align: center;
                                    line-height: 26px;
                                }
                            }

                            img {
                                width: 100%;
                            }
                        }

                        .floorBanner {
                            width: 330px;
                            height: 100%;
                        }

                        .split {
                            width: 220px;
                            height: 100%;
                            position: relative;

                            .floor-x-line {
                                position: absolute;
                                background: #e4e4e4;
                                width: 220px;
                                height: 1px;
                                top: 180px;
                            }

                            .floor-conver-pit {
                                width: 100%;
                                height: 50%;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    transition: all 400ms;

                                    &:hover {
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }

                        .center {
                            border: 1px solid #e4e4e4;
                        }
                    }
                }
            }
        }
    }
</style>

商标组件 Brand

在 Home 文件夹下创建 Brand文件夹 并在里创建 images 文件夹和 index.vue 文件
在这里插入图片描述
index.vue

<template>
  <!--商标-->
    <div class="brand">
        <div class="py-container">
            <ul class="brand-list">
                <li class="brand-item">
                    <img src="./images/brand_21.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_03.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_05.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_07.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_09.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_11.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_13.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_15.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_17.png" />
                </li>
                <li class="brand-item">
                    <img src="./images/brand_19.png" />
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:''
}
</script>

<style scoped lang="less">
.brand {
        margin: 10px 0;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .brand-list {
                overflow: hidden;
                padding: 15px 0;
                background: #f7f7f7;
                line-height: 18px;

                .brand-item {
                    width: 120px;
                    float: left;
                    height: 37px;

                    img {
                        border-left: 1px dotted #ccc;
                        padding: 0 10px;
                    }

                    &:first-child {
                        img {
                            border-left: 0;
                        }
                    }
                }
            }
        }
    }
</style>

在 Home 文件夹下的 index.vue 中注册并使用 商品排行组件 、 猜你喜欢组件、楼层组件

Home / index.vue

<template>
  <div>
      <!--三级联动全局组件：三级联动已注册为全局组件，所以不需要再引入-->
      <TypeNav></TypeNav>
      <!--轮播图组件-->
      <ListContainer></ListContainer>
      <!--今日推荐组件-->
      <Recommend></Recommend>
      <!-- 商品排行组件 -->
      <Rank></Rank>
      <!-- 猜你喜欢组件 -->
      <Like></Like>
      <!--楼层组件 * 2-->
      <Floor></Floor>
      <Floor></Floor>
      <!--商标组件-->
      <Brand></Brand>
  </div>
</template>

<script>
//引入其余组件
import ListContainer from '@/pages/Home/ListContainer'
import Recommend from '@/pages/Home/Recommend'
import Rank from '@/pages/Home/Rank'
import Like from '@/pages/Home/Like'
import Floor from '@/pages/Home/Floor'
import Brand from '@/pages/Home/Brand'
export default {
    name:'',
    components:{
      ListContainer,
      Recommend,
      Rank,
      Like,
      Floor,
      Brand
    }
}
</script>

<style scoped>

</style>

至此，Home 页面的组件已配置完成
在这里插入图片描述

皮蛋solo粥！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 3.2 电商前台项目（一）—— 搭建项目、编程规范、报错整理
ailsa_csdn的博客
03-14 3029
vue3.2 电商前台项目初始篇：搭建初始化、编程规范、以及项目中报错整理
vue电商项目前端原型
08-01
项目其他依赖都弄好了,下载下来后进入项目目录下，输入npm run dev回车后就启动项目了，页面访问http://localhost:8080
Vue 前台项目（电商）8
weixin_46287150的博客
12-28 1450
vuex 模块式开发 vuex 是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据。 如果项目很小，完全不需要 vuex 如果项目很大，组件很多、数据很多、数据维护很费劲，就用 vuex 安装 vuex npm install --save vuex vuex的基本使用 在 src 文件夹下创建 store 文件夹，并在里面创建 home 文件夹、search 文件夹和相应的 index.js 文件 home/index.js //home 模块的小仓库 //state：仓库存储数据的地
Vue 前台项目（电商）4
weixin_46287150的博客
12-24 478
Footer 组件的显示与隐藏 显示或隐藏组件：v-if | v-show Footer 组件：在 Home、Search 显示 Footer 组件 Footer 组件：在登录、注册的时候是隐藏的 打开 router 文件下的 index.js 改为下图 打开 App.vue 改为下图 路由传参 params 参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位 query 参数：不路径当中的一部分，类似于 ajax 中的 queryString，不需要占位 使用对象的方式传参 先双向
Vue 前台项目（电商）2
weixin_46287150的博客
12-24 572
在 Header 文件夹下创建 image 文件夹和 index.vue 组件 index.vue <template> <header class="header"> <!-- 头部的第一行 --> <div class="top"> <div class="container"> <div class="loginList"> <p&
Vue 前台项目（电商）3
weixin_46287150的博客
12-24 724
路由组件的搭建 Home首页路由组件 Search 路由组件 Login 登录路由 Refister 注册路由 基于 vue-router 实现路由搭建，需要下载依赖 cnpm install --save vue-router 在 src 文件夹下创建 pages 文件夹，并在 pages 文件夹下创建4个文件，分别是 Home、Search、Login、Refister 在这刚创建好的4个文件夹下分别都创建 index.vue 文件 在相应的文件夹下的 index.vue 做好标识 示例 H
基于Vue的完整电商系统
01-10
前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、...
vue大型电商项目尚品汇（前台篇）day02.doc
07-09
Vue 大型电商项目尚品汇（前台篇）day02 本文是对 Vue 大型电商项目尚品汇（前台篇）day02 的总结，主要涵盖了 Vue 项目中的技术要点。 一、重写 push/replace 方法 在 Vue 项目中，我们需要重写 push/replace ...
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
通过学习黑马电商后台管理系统，开发者不仅可以提升Vue.js和Node.js的实战技能，还能了解到电商后台的常见业务流程和设计模式，为今后的项目开发打下坚实基础。无论是初学者还是有经验的开发者，都能从中获益匪浅。
Vue2.x 全家桶+Vant 搭建大型单页面电商项目 (页面齐全, 数据源与项目完整)
01-02
2020年1月2日 11:15:26 ;...本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 vant-ui，所有的请求数据都使用Mock.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助
硅谷项目vue网站前台后台
12-26
一个很好的vue学习模板，包括前台后台，安装都有教程，很适合初中级学者
《谷粒商城》2020基础篇前端vue模板代码及图片
11-23
此资源为与视频匹配的基础篇前端vue模板代码及后台系统所需图片资源。 项目采用SpringCloudAlibaba技术栈。由业务集群系统+后台管理系统构成，打通了微服务分布式开发及全栈开发技能，包含前后分离全栈开发、Restful接口、数据校验、网关、注册发现、配置中心、熔断、限流、降级、链路 追踪、性能监控、压力测试、系统预警、集群部署、持续集成、持续部署... 包括前台商城系统以及后台管理系统，基于 SpringCloud + SpringCloudAlibaba + MyBatis-Plus等技术实现。
前端学习（2682）：重读vue电商网站2之前台启动
歌谣的博客
12-07 227
前台vue的使用简单小结
weixin_33836223的博客
03-19 504
前台vue的使用简单小结 本项目要求：安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue-resource安装element-ui:npm i element-ui -S 说明：一个基本的前端项目除了基本的HTML/Css/JS等外，不同的框架的组成部...
前端开发基础——Vue
ZKS、执的博客
07-09 659
Vue的特点 MVVM 常用指令 v-model原理 Vue监视数据（双向绑定） computed和watch 绑定样式 v-if和v-show key new Vue()后的流程 生命周期 组件通信 nextTick 插槽 Vuex VueRouter keep-alive 路由守卫 路由器hash和history工作模式 Vue中diff算法理解 Vue的特点 采用组件化模式，提高代码复用率，且让代码更好维护。 声明式编码，让编码人员无需直接操作DOM，提高开发效率。 使用虚拟DOM+优秀的Diff算法
Vue2电商前台项目（一）：项目前的初始化及搭建
weixin_42044763的博客
09-07 4290
文件夹：放置项目的依赖public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面src文件夹​ —assets文件夹：一般放置的是静态资源（一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面​ —components文件夹：一般放置的是非路由组件（全局组件）
Vue前台网站项目总结
qq_45163356的博客
12-20 859
前言：本篇文章总结一下使用vue开发的一些项目配置以及一些开发技巧 ESLint检测： package.json : 全局规则配置文件 'rules': { 'no-new': 'off' } 在js/vue文件中修改局部规则 /* eslint-disable no-new */ new Vue({ el: 'body', components: { App } }) vue.config.js...
【Vue2项目(尚品汇前台)】(一）项目初搭建
matmacchiato的博客
01-15 571
（1）路由组件与非路由组件的区别？路由组件一般放置在pages|views文件夹中，非路由组件一般放置在components文件夹中路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用注册完路由，不管路由组件，还是非路由组件身上都有$route\ $router属性【 $route:一般获取路由信息（路径、query、params等等）】【 $router:一般进行编程式导航进行路由跳转（push | replace）】
vue项目学习travel：8-热销推荐的实现
simoon's的博客
05-09 395
实现效果：代码如下：&lt;div&gt; &lt;div class="title"&gt; 热销推荐 &lt;/div&gt; &lt;ul&gt; &lt;li v-for="item of recommendList" :key="item.id" class="item border-bottom"&
vue电商前台项目完整版
最新发布
06-06
Vue电商前台项目完整版是一个基于Vue框架开发的电商前端项目，包括首页、商品列表、商品详情、购物车、订单确认、我的订单等多个功能模块。该项目针对不同用户需求，提供了全面的商品分类、搜索、推荐、评价等功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值