[电商项目]--商城首页(一)

淩亂°似流年 2022-12-28 01:38 174阅读 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]

效果图：  
![在这里插入图片描述][20201213194122566.png]

![在这里插入图片描述][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