vue+element简单实现商城网站首页，模仿电商商城

1.安装启动vue项目可参考

vue+element简单实现商城网站首页，模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544242

本项目源码下载https://download.csdn.net/download/lucky_fang/85161752

2.产品效果图

3.项目结构图

4.src/page/top/index.vue

<template><div style="border-bottom: 1px solid #dfdfdf;font-size: 14px;"><div style="display: flex;height: 40px;padding: 0 200px;background-color: #19b4ea;"><div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;">手机版</div><div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;margin-left: 20px;">留言反馈</div><div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;margin-left: 20px;">会员中心</div><div class="top-title" style="line-height: 40px;color: #FFFFFF;margin-left: 20px;">收藏本站</div><div style="flex: 1;display: flex;"><div style="flex: 1;"></div><div style="width: 170px;display: flex;"><el-button type="text" style="color: #FFFFFF;" class="top-title">登录</el-button><el-button type="text" style="color: #FFFFFF;margin-right: 10px;" class="top-title">注册</el-button><div style="background-color: rgb(223 221 221 / 40%);display: flex;width: 100px;padding: 0 10px;" class="top-title"><img src="../../../public/img/shop_car.png" style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;"><el-button type="text" style="color: #FFFFFF;" class="top-title">购物车</el-button></div></div></div></div><div style="margin: 0 200px;height: 80px;line-height: 80px;"><div style="display: flex;"><img src="../../../public/img/logo.jpeg" style="cursor: pointer;height: 60px;margin-top: 10px;"><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;margin-left: 30px;">首页</div><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">电子数码</div><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">家居百货</div><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">母婴用品</div><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">关于我们</div><div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">联系我们</div><div style="flex: 1;text-align: right;"><el-input placeholder="请输入内容" v-model="input" style="width: 300px;"><el-button slot="append" icon="el-icon-search"></el-button></el-input></div></div></div></div>
</template>ge<script>export default {data() {return {input:''};},mounted() {},methods: {homePage(){this.$router.push({path: '/home/index'});},}};
</script><style>.top-title:hover{cursor: pointer;color: #e5e5e5!important;}.title{font-weight: bold;font-size: 18px;}.title:hover{color: #c250c6!important;}
</style>

5.src/page/index/index.vue

<template><div id="body" style="width: 100%;height: 100%;overflow: auto;"><top></top><router-view></router-view><foot></foot></div>
</template><script>import top from "../top/index.vue";import foot from "../foot/index";export default {components: {top,foot},name: "index",data() {return {};},mounted() {},methods: {}};
</script><style>#body{background-size: 100% 100%;background-repeat: no-repeat;}
</style>

6.src/page/foot/index.vue

<template><div style="font-size: 14px;"><div style="margin: 50px 200px 50px 200px;"><div style="display: flex;"><div style="flex: 1;display: flex;"><div style=""><div class="foot-title">帮助中心</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">服务支持</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">线下门店</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">支付方式</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div></div><div style="width: 250px;border-left: 1px solid #dfdfdf;text-align: center;"><div style="color: #19b4ea;font-weight: bold;font-size: 18px;line-height: 40px;">000-123456789</div><div style="color: gray;">周一至周日8:00~18:00</div><div style="color: gray;margin-bottom: 10px;">（节假日不休）</div><el-button type="success" round icon="el-icon-headset">24小时客服在线</el-button></div></div></div><div style="background-color: #19b4ea;height: 40px;text-align: center;line-height: 40px;color: #FFFFFF;">申明：本网页仅供学习参考 @XXX XXX XXX</div></div></template><script>
</script><style>.foot-title{height: 40px;line-height: 40px;}.foot-item{height: 25px;line-height: 25px;color: gray;}.foot-item:hover{cursor: pointer;color: #e37a2f;}
</style>

vue+element简单实现商城网站首页，模仿电商商城相关推荐

电商商城小程序开发|电商商城小程序怎么玩？
电商商城其实我们都比较熟悉,比如淘宝.京东.拼多多之类的,都是电商商城,我们如果也想做类似的拼团,其实比较推荐大家去做小程序. 因为我们没有淘宝他们那么大的用户基础,所以我们做APP是不会有什么客户的 ...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
php开源商城 yii,Yii2开源电商商城Fecshop
项目状态: Fecshop开源项目已经全部开发完毕,一共六大入口:pc端(appfront),wap端(apphtml5),后台(appadmin) ,vue端(appserver),第三方系统对接端 ...
小程序电商商城怎么搭建？
做电商的企业商家都会首先搭建好自己的电商商城,尤其是现在小程序盛行的时代,小程序电商商城更是做电商的企业商家的必备媒介.那么小程序电商商城怎么搭建?下面给大家说说一些流程作为参考. 一.准备事项搭建 ...
Vue + Element + animate.css 音乐网站（网易云版）
Vue + Element + animate.css 音乐网站一.前言这是小弟的毕业设计,也是第一次用vue框架独立开发网站,现在接入了网易云api,到后面我还会做对应的后端和管理端.因为是第一 ...
springboot+vue搭建简单的聊天网站，从0到上线（腾讯云）
springboot+vue搭建简单的聊天网站,从0到上线整体架构简单梳理云服务器 nginx的基础配置 springboot-eureka简单梳理聊天功能实现的基础流程 ws的实现整体架构简 ...
HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品网购网站模板
HTML5期末大作业:蛋糕团购商城网站设计--蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品一.作品展示二.文件目录三.代码实现 <!doct ...
HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码学生网页课程设计期末作业下载商城网页大学生网页设计制作成临近期末, 你 ...
HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码学生网页课程设计期末作业下载商城网页大学生网页设计制作成临近期末, 你 ...

vue+element简单实现商城网站首页，模仿电商商城

1.安装启动vue项目可参考

vue+element简单实现商城网站首页，模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544242

2.产品效果图

3.项目结构图

4.src/page/top/index.vue

5.src/page/index/index.vue

6.src/page/foot/index.vue

vue+element简单实现商城网站首页，模仿电商商城相关推荐

最新文章

热门文章