vue商城项目学习实战第三篇

1、footer部分功能开发，创建组件footer.vue

1.1、代码开发

<div class="footer">
        <div class="footerTitle warp">
            <div class="moreTitle">
                <div class="s1">
                    <dl>
                        <dt>
                            <p class="title">购物指南</p>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <a href="#">享0分期利息</a>
                                </li>
                                <li>
                                    <a href="#">以旧换新</a>
                                </li>
                                <li>
                                    <a href="#">众测活动</a>
                                </li>
                                <li>
                                    <a href="#">企业购</a>
                                </li>
                                <li>
                                    <a href="#">O2O采购</a>
                                </li>
                                <li>
                                    <a href="#">教育购</a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
                <div class="s2">
                    <dl>
                        <dt>
                            <p class="title">售后服务</p>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <a href="#">门店维修</a>
                                </li>
                                <li>
                                    <a href="#">保修政策</a>
                                </li>
                                <li>
                                    <a href="#">防伪查询</a>
                                </li>
                                <li>
                                    <a href="#">退换货政策</a>
                                </li>
                                <li>
                                    <a href="#">手机寄修服务</a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
                <div class="s3">
                    <dl>
                        <dt>
                            <p class="title">服务支持</p>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <a href="#">服务店查询</a>
                                </li>
                                <li>
                                    <a href="#">维修备件价格</a>
                                </li>
                                <li>
                                    <a href="#">维修服务</a>
                                </li>
                                <li>
                                    <a href="#">上门安装</a>
                                </li>
                                <li>
                                    <a href="#">问题排查</a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
                <div class="s4">
                    <dl>
                        <dt>
                            <p class="title">特色服务</p>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <a href="#">防伪查询</a>
                                </li>
                                <li>
                                    <a href="#">补购保障</a>
                                </li>
                                <li>
                                    <a href="#">以旧换新</a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
                <div class="s5">
                    <dl>
                        <dt>
                            <p class="title">关于我们</p>
                        </dt>
                        <dd>
                            <ol>
                                <li>
                                    <a href="#">公司介绍</a>
                                </li>
                                <li>
                                    <a href="#">华为零售店</a>
                                </li>
                                <li>
                                    <a href="#">商家中心</a>
                                </li>
                                <li>
                                    <a href="#">意见反馈</a>
                                </li>
                                <li>
                                    <a href="#">规则中心</a>
                                </li>
                            </ol>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="contact">
                <div class="line"></div>
                <div class="servicePhone">
                    <div class="phoneNum">950805</div>
                    <div class="phoneDec">7 x 24 小时客服热线 (仅收市话费)</div>
                    <div class="online">
                        <span>在线客服</span>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>

2.2、样式

/* 底部样式 */
.footer {
  width: auto;
  height: 310px;
  background-color: rgb(255, 255, 255);
}

.footerTitle {
  display: flex;
  justify-content: space-between;
  padding: 56px 40px 40px 40px;
}

.footerTitle .moreTitle {
  display: flex;
  flex: 4;
}

.footerTitle .moreTitle dt {
  font-size: 14px;
  margin-bottom: 32px;
}

.footerTitle .moreTitle dd {
  font-size: 12px;
  margin-bottom: 10px;
}

.footerTitle .moreTitle dd li {
  font-size: 12px;
  margin-bottom: 10px;
}

.footerTitle .moreTitle dd a {
  color: rgb(155, 150, 150);
}

.footerTitle .moreTitle dd a:hover {
  color: rgb(212, 47, 47);
}

.footerTitle .moreTitle .s1 {
  display: flex;
  width: 159px;
  height: 213px;
}

.footerTitle .moreTitle .s2 {
  display: flex;
  width: 159px;
  height: 213px;
}

.footerTitle .moreTitle .s3 {
  display: flex;
  width: 159px;
  height: 213px;
}

.footerTitle .moreTitle .s4 {
  display: flex;
  width: 159px;
  height: 213px;
}

.footerTitle .moreTitle .s5 {
  display: flex;
  width: 159px;
  height: 213px;
}

/* 底部联系方式 */
.footerTitle .contact {
  display: flex;
  flex-direction: row;
}

.footerTitle .contact .line {
  border-left: 1px dashed rgb(240, 9, 9);
  margin-right: 30px;
}

.footerTitle .contact .servicePhone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 131px;
}

.footerTitle .contact .servicePhone .phoneNum {
  font-size: 24px;
  text-align: center;
}

.footerTitle .contact .servicePhone .phoneDec {
  font-size: 13px;
}

.footerTitle .contact .online {
  background-color: black;
  border-radius: 20px;
  display: flex;
}

.footerTitle .contact .online span {
  display: inline-block;
  font-size: 12px;
  color: white;
  width: 170px;
  height: 34px;
  line-height: 34px;
  justify-content: center;
  text-align: center;
}

3.1 APP.vue引入组件

<template>
  <div>
    <Header></Header>
    <Home></Home>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Home from './components/Home.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,Home,Footer
  }
}
</script>

4.1 运行npm run serve 可看见底部效果