[电商项目]--商城首页(一) 淩亂°似流年 2022-12-28 01:38 137阅读 0赞 # 前言 # 商城首页开发 -------------------- # Nav-Header组件 # 图片地址: [https://download.csdn.net/download/qq\_32370913/13677467][https_download.csdn.net_download_qq_32370913_13677467] 编写config.scss文件: /* 样式规范表 */ $min-width:1226px; //容器安全区域宽度 // 常规字体大小设置 $fontA: 80px; //产品站大标题 $fontB: 38px; //产品站标题 $fontC: 28px; //导航标题 $fontD: 26px; //产品站副标题 $fontE: 24px; $fontF: 22px; $fontG: 20px; //用在较为重要的文字、操作按钮 $fontH: 18px; //用于大多数文字 $fontI: 16px; //用于辅助性文字 $fontJ: 14px; //用于一般文字 $fontK: 12px; //系统默认大小 // 常规配色设置 $colorA: #FF6600 !default; //用于需要突出和强调的文字、按钮和icon $colorB: #333333 !default; //用于较为重要的文字信息、内页标题等 $colorC: #666666 !default; //用于普通段落信息 引导词 $colorD: #999999 !default; //用于辅助、此要的文字信息、普通按钮的描边 $colorE: #cccccc !default; //用于特别弱的文字 $colorF: #d7d7d7 !default; //用于列表分割线、标签秒变 $colorG: #ffffff !default; //用于导航栏文字、按钮文字、白色背景 $colorH: #e5e5e5 !default; //用于上下模块分割线 $colorI: #000000 !default; //纯黑色背景,用于遮罩层 $colorJ: #F5F5F5 !default; //弹框标题背景色 $colorK: #FFFAF7 !default; //订单标题背景色 * 编写 reset.scss body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{ margin: 0; padding: 0; outline: none; } html,body{ font-family:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; color: #333333; background-color: #ffffff; min-width: 1226px; font-size: 12px; } a{ text-decoration: none; } ul,li{ list-style: none; } input{ font: normal; } input:focus,a:focus{ outline: none; } ![在这里插入图片描述][20201213170902128.png] * 清除浏览器样式,渲染我们也没样式: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70] * 首页编写: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1] <template> <div class="header"> <div class="nav-topbar"> <!--创建顶部菜单栏上面的小菜单栏--> <!--创建容器--> <div class="container"> <!--创建菜单--> <div class="topbar-menu"> <a href="javascript:;">小米商城</a> <a href="javascript:;">MUI</a> <a href="javascript:;">云服务</a> <a href="javascript:;">协议规则</a> </div> <div class="nav-header"> <a href="javascript:;">登录</a> <a href="javascript:;">注册</a> <a href="javascript:;" class="my-cart"><span class="icon-cart"></span>购物车</a> </div> </div> </div> <div class="nav-header"></div> </div> </template> <script> export default { name: 'nav-header' } </script> <style lang="scss"> .header{ .nav-topbar{ height:39px; line-height:39px; background-color:#333333; color:#B0B0B0; } .container{ width:1226px; margin-right:auto; margin-left:auto; display:flex; justify-content:space-between; align-items: center; a{ display: inline-block; color:#B0B0B0; margin-right: 17px; } .my-cart{ width:110px; background-color:#FF6600; text-align: center; color:#ffffff; .icon-cart{ display:inline-block; width:16px; height:12px; background:url('/imgs/icon-cart-checked.png') no-repeat center; background-size: contain; margin-right:4px ; } } } } </style> 效果图: ![在这里插入图片描述][20201213194122566.png] <template> <div class="header"> <div class="nav-topbar"> <!--创建顶部菜单栏上面的小菜单栏--> <!--创建容器--> <div class="container"> <!--创建菜单--> <div class="topbar-menu"> <a href="javascript:;">小米商城</a> <a href="javascript:;">MUI</a> <a href="javascript:;">云服务</a> <a href="javascript:;">协议规则</a> </div> <div class="nav-header"> <a href="javascript:;">登录</a> <a href="javascript:;">注册</a> <a href="javascript:;" class="my-cart"><span class="icon-cart"></span>购物车</a> </div> </div> </div> <div class="nav-header"> <div class="container"> <div class="header-logo"> <a href="/#/index"></a> </div> <div class="header-menu"> <div class="item-menu"> <span>小米手机</span> <div class="children"></div> </div> <div class="item-menu"> <span>ReadMi红米</span> <div class="children"></div> </div> <div class="item-menu"> <span>电视</span> <div class="children"></div> </div> </div> <div class="header-search"> <div class="wrapper"> <input type="text" name="keyword"> <a href="javascript:;"></a> </div> </div> </div> </div> </div> </template> <script> export default { name: 'nav-header' } </script> <style lang="scss"> @import './../assets/scss/base.scss'; @import './../assets/scss/mixin.scss'; .header{ .nav-topbar{ height:39px; line-height:39px; background-color:#333333; color:#B0B0B0; .container{ @include flex(); a{ display: inline-block; color:#B0B0B0; margin-right: 17px; } .my-cart{ width:110px; background-color:#FF6600; text-align: center; color:#ffffff; .icon-cart{ @include bgImg(16px,12px,'/imgs/icon-cart-checked.png'); margin-right:4px ; } } } } .nav-header{ .container{ height:112px; @include flex(); .header-logo{ display:inline-block; width:55px; height:55px; background-color:#FF6600; a{ display:inline-block; width:110px; height:55px; &:before{ content: ''; @include bgImg(55px,55px,'/imgs/mi-logo.png',55px); transition:margin .2s; } &:after{ content: ''; @include bgImg(55px,55px,'/imgs/mi-home.png',55px); } &:hover:before{ margin-left: -55px; transition: margin .2s; } } } } .header-menu{ display:inline-block ; width:264px; padding-left:209px; .item-menu { display: inline-block; color: #333333; font-weight: bold; font-size: 16px; line-height: 112px; margin-right: 20px; span { cursor: pointer; } &:hover { } } .header-search{ width:319px; .wrapper{ height:50px; border:1px solid #E0E0E0; display:flex; align-items:center; input{ border: none; box-sizing:border-box; border-right:1px solid #E0E0E0; width:264px; height:50px; padding-left: 14px; } a{ @include bgImg(18px,18px,'/imgs/icon-search.png'); margin-left: 17px; } } } } } } </style> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3] ![在这里插入图片描述][20201213215818384.png] # 首页交互 # <template> <div class="header"> <div class="nav-topbar"> <!--创建顶部菜单栏上面的小菜单栏--> <!--创建容器--> <div class="container"> <!--创建菜单--> <div class="topbar-menu"> <a href="javascript:;">小米商城</a> <a href="javascript:;">MUI</a> <a href="javascript:;">云服务</a> <a href="javascript:;">协议规则</a> </div> <div class="topbar-user"> <a href="javascript:;" v-if="username">{ { username}}</a> <a href="javascript:;" v-if="!username" @click="login">登录</a> <a href="javascript:;" v-if="username">我的订单</a> <a href="javascript:;" class="my-cart" @click="goToCart"><span class="icon-cart"></span>购物车</a> </div> </div> </div> <div class="nav-header"> <div class="container"> <div class="header-logo"> <a href="/#/index"></a> </div> <div class="header-menu"> <div class="item-menu"> <span>小米手机</span> <div class="children"> <ul> <li class="product" v-for="(item,index) in phoneList" :key="index"> <a v-bind:href="'/#/product/'+item.id" target="_blank"> <div class="pro-img"> <img :src="item.mainImage" :alt="item.subtitle"/> </div> <div class="pro-name">{ { item.name }}</div> <div class="pro-price">{ { item.price | currency}}</div> </a> </li> </ul> </div> </div> <div class="item-menu"> <span>ReadMi红米</span> <div class="children"></div> </div> <div class="item-menu"> <span>电视</span> <div class="children"> <ul> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> <li class="product"> <a href="" target="_blank"> <div class="pro-img"> <img src="/imgs/nav-img/nav-3-1.jpg" alt=""/> </div> <div class="pro-name">小米CC9</div> <div class="pro-price">1799¥</div> </a> </li> </ul> </div> </div> </div> <div class="header-search"> <div class="wrapper"> <input type="text" name="keyword"> <a href="javascript:;"></a> </div> </div> </div> </div> </div> </template> <script> export default { name: 'nav-header', data(){ return{ username:'', phoneList:[] } }, filters:{ currency(val){ if(!val){ return '0.00'; }else{ return '¥' +val.toFixed(2)+ '元'; } } }, mounted(){ this.getProductList(); }, methods:{ login(){ this.$router.push('/login'); }, getProductList(){ this.axios.get('/products',{ params:{ categoryId:'100012', //pageSize:6 } }).then((res) =>{ //res.list; //数组截取 if(res.list.length>6){ this.phoneList = res.list.slice(0,6); } }) }, goToCart(){ /*路由跳转*/ this.$router.push('/cart'); } } } </script> <style lang="scss"> @import './../assets/scss/base.scss'; @import './../assets/scss/mixin.scss'; @import './../assets/scss/config.scss'; .header{ .nav-topbar{ height:39px; line-height:39px; background-color:#333333; color:#B0B0B0; .container{ @include flex(); a{ display: inline-block; color:#B0B0B0; margin-right: 17px; } .my-cart{ width:110px; background-color:#FF6600; text-align: center; color:#ffffff; .icon-cart{ @include bgImg(16px,12px,'/imgs/icon-cart-checked.png'); margin-right:4px ; } } } } .nav-header{ .container{ position:relative; height:112px; @include flex(); .header-logo{ display:inline-block; width:55px; height:55px; background-color:#FF6600; a{ display:inline-block; width:110px; height:55px; &:before{ content: ''; @include bgImg(55px,55px,'/imgs/mi-logo.png',55px); transition:margin .2s; } &:after{ content: ''; @include bgImg(55px,55px,'/imgs/mi-home.png',55px); } &:hover:before{ margin-left: -55px; transition: margin .2s; } } } } .header-menu{ display:inline-block ; width:264px; padding-left:209px; .item-menu { display: inline-block; color: #333333; font-weight: bold; font-size: 16px; line-height: 112px; margin-right: 20px; span { cursor: pointer; } &:hover { color: $colorA; .children{ height: 220px; /*添加动画效果*/ opacity: 1; } } .children{ position:absolute; top:112px; left: 0; width: 1226px; height: 220px; opacity: 0; /*隐藏*/ overflow: hidden; border-top: 1px; solid: #5555; box-shadow: 0px 7px 6px 0px rgba(0,0,0,0.11); z-index: 10; /*添加动画:控制某个属性进行*/ transition: height .5s; .product{ /*防止决定定位跑,*/ position:relative; float:left; width: 16.6%; height: 220px; font-size: 12px; line-height: 12px; text-align: center; a{ display: inline-block; } img{ width: auto; height: 111px; margin-top: 26px; } .pro-img{ height: 137px; } .pro-name{ font-weight: bold; margin-top: 19px; margin-bottom: 8px; color: $colorB; } .pro-price{ color: $colorA; } /*添加伪类*/ &:before{ content: ''; position:absolute; top: 28px; right: 0; border-left: 1px solid $colorF; height: 100px; width: 1px; } /*去掉最后一个元素*/ &:last-child:before{ display: none; } } } } .header-search{ width:319px; .wrapper{ height:50px; border:1px solid #E0E0E0; display:flex; align-items:center; input{ border: none; box-sizing:border-box; border-right:1px solid #E0E0E0; width:264px; height:50px; padding-left: 14px; } a{ @include bgImg(18px,18px,'/imgs/icon-search.png'); margin-left: 17px; } } } } } } </style> # Nav-Footer组件开发 # <template> <div class="footer"> <div class="footer-logo"> <img src="/imgs/logo-footer.png" alt=""> <p>小米商城</p> </div> <div class="footer-link"> <a href="https://blog.csdn.net/qq_32370913?spm=1010.2135.3001.5113" target="_blank">zcw</a> <a href="">Vue全栈</a><span>|</span> <a href="">React全家桶</a><span>|</span> <a href="">微信支付</a><span>|</span> </div> <div class="copyright">xxxxxxxxxxxxxxxxxxxxxx</div> </div> </template> <script> export default { name: 'nav-footer' } </script> <style lang="scss" scoped> .footer{ height:234px; border-top:4px solid #FF6600; background-color:#333333; color:#999999; font-size:16px; text-align:center; .footer-logo{ margin-top:46px; margin-bottom:31px; img{ width:53px; height:36px; margin-bottom:13px; } } .footer-link{ a{ color:#999999; display:inline-block; } span{ margin:0 10px; } margin-bottom:13px; } .copyright{ .domain{ color:#FF6600; } } } </style> # Service-Bar组件开发 # <template> <div class="service"> <div class="container"> <ul> <li><span class="icon-setting"></span>预约维修服务</li> <li><span class="icon-7day"></span>7天无理由退货</li> <li><span class="icon-15day"></span>15天免费换货</li> <li><span class="icon-post"></span>满150元包邮</li> </ul> </div> </div> </template> <script> export default { name: 'service-bar' } </script> <style lang="scss"> @import "./../assets/scss/mixin.scss"; .service{ padding:33px 0; color:#666666; font-size: 16px; li{ display: inline-block; width: 24.8%; text-align: center; border-right: 1px solid #e5e5e5; span{ display: inline-block; width: 20px; height: 20px; vertical-align:middle; margin-right: 8px; } .icon-setting{ @include bgImg(20px,20px,'/imgs/icon-setting.png'); } .icon-7day{ @include bgImg(20px,20px,'/imgs/icon-7day.png'); } .icon-15day{ @include bgImg(20px,20px,'/imgs/icon-15day.png'); } .icon-post{ @include bgImg(20px,20px,'/imgs/icon-post.png'); } } } </style> ![在这里插入图片描述][20201215221904357.png] # 首页轮播功能实现 # * 安装插件 npm install vue-awesome-swiper --save ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5] <template> <div class="index"> <div class="container"> <!-- 轮播 --> <div class="swiper-box"> <swiper v-bind:options="swiperOption"> <swiper-slide v-for="(item, index) in slideList" v-bind:key="index"> <a v-bind:href="'/#/product'+item.id"><img v-bind:src="item.img"></a> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> <!-- 广告位 --> <div class="ads-box"> </div> <div class="banner"></div> <div class="product-box"></div> </div> <ServiceBar></ServiceBar> </div> </template> <script> import ServiceBar from './../components/ServiceBar' import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' export default { name:'index', components:{ swiper, swiperSlide, ServiceBar }, data(){ return { swiperOption:{ autoplay:true, loop:true, effect:'cube', cubeEffect:{ slideShadows: true, shadow:true, shadowOffset:100, shadowScale:0.6 }, pagination:{ el: '.swiper-pagination', clickable:true }, navigation:{ nextEl: '.swiper-button-next', prevEl:'.swiper-button-prev', }, }, slideList:[ { id:'42', img:'/imgs/slider/slide-1.jpg' }, { id:'45', img:'/imgs/slider/slide-2.jpg' }, { id:'46', img:'/imgs/slider/slide-3.jpg' }, { id:'', img:'/imgs/slider/slide-4.jpg' }, { id:'', img:'/imgs/slider/slide-1.jpg' } ] } } } </script> <style lang="scss"> /*覆盖空间样式*/ .index{ .swiper-box{ .swiper-container{ height: 451px; img{ width: 100%; height: 100%; } } } } </style> [https_download.csdn.net_download_qq_32370913_13677467]: https://download.csdn.net/download/qq_32370913/13677467 [20201213170902128.png]: /images/20221120/18fec974eff848fbab91f7be516c2a7d.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]: /images/20221120/1e477f77c54a41ddb5ee73435a0871df.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]: /images/20221120/d8d13739e9a448989ee121cb53dd70ad.png [20201213194122566.png]: /images/20221120/132bcd38a24f4f1fbea3e3bc82cfc074.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201213215719667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201213215733516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70 [20201213215818384.png]: https://img-blog.csdnimg.cn/20201213215818384.png [20201215221904357.png]: https://img-blog.csdnimg.cn/20201215221904357.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/202012152224078.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201215231233952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70
还没有评论,来说两句吧...