完成初步的样式的编写,低层的footer比较简单,大致完成初步的App.vue中的顶部导航栏和底部的css的编写;
<!--
* @Description: 项目根组件
* @Author:
* @Date: 2020-04-07
* @LastEditors:
* @LastEditTime:
-->
<template>
<div id="app" name="app">
<el-container>
<!--顶部的导航栏-->
<div class="topbar">
<div class="nav">
<!--子导航栏-->
<ul>
<li> <!--登录注册按钮-->
<el-button type="text">登录</el-button>
<span class="sep">|</span>
<el-button type="text">注册</el-button>
</li>
<li> <!--确认登录 or 退出按钮-->
</li>
<li> <!--我的订单-->
<router-link to="/order">我的订单</router-link>
</li>
<li> <!--我的收藏-->
<router-link to="/collect">我的收藏</router-link>
</li> <!--购物车-->
<router-link to="/shoppingCart">购物车</router-link>
<li>
</li>
</ul>
</div>
</div>
<!-- 顶部导航栏END -->
<!-- 顶栏容器 -->
<el-hearder>
<el-meun>
<div class="logo"> <!--logo-->
<router-link to="/">
<img src="./assets/imgs/logo.png" alt >
</router-link>
</div>
<el-meun-item index="/">首页</el-meun-item> <!--菜单的子菜单:首页-->
<el-meun-item index="goods">全部商品</el-meun-item> <!--菜单的子菜单:全部商品-->
<el-meun-item index="about">关于我们</el-meun-item> <!--菜单的子菜单:关于我们-->
<div class="so"> <!--搜索框-->
<el-input placeholder="请输入搜索内容"></el-input>
<ul-button icon="el-icon-search"></ul-button>
</div>
</el-meun>
</el-hearder>
<!-- 顶栏容器END -->
<!-- 登录模块 -->
<MyLogin></MyLogin>
<!-- 注册模块 -->
<MyRegister></MyRegister>
<!-- 主要区域容器:展示商品区域 -->
<el-main>
<keep-alive>
<!-- 显示的是当前路由地址所对应的内容 -->
<router-view></router-view>
</keep-alive>
</el-main>
<!-- 主要区域容器END -->
<!-- 底栏容器 -->
<el-footer>
<div class="footer">
<div class="ng-promise-box">
<div class="ng-promise">
<p class="text">
<a class="icon1" href="javascript:;">7天无理由退换货</a>
<a class="icon2" href="javascript:;">满99元全场免邮</a>
<a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
</p>
</div>
</div>
<div class="github" >
<a href="#" target="_blank">
<div class="github-but"></div>
</a>
</div>
<div class="mod_help">
<p>
<router-link to="/">首页</router-link>
<span>|</span>
<router-link to="/goods">全部商品</router-link>
<span>|</span>
<router-link to="/about">关于我们</router-link>
</p>
<p class="coty">商城版权所有 © 2012-2021</p>
</div>
</div>
</el-footer>
<!-- 底栏容器END -->
</el-container>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 全局CSS */
* {
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
#app .el-header {
padding: 0;
}
#app .el-main {
min-height: 300px;
padding: 20px 0;
}
#app .el-footer {
padding: 0;
}
a,
a:hover {
text-decoration: none;
}
/* 全局CSS END */
/* 顶部导航栏CSS */
.topbar {
height: 40px;
background-color: #3d3d3d;
margin-bottom: 20px;
}
.topbar .nav {
width: 1225px;
margin: 0 auto;
}
.topbar .nav ul {
float: right;
}
.topbar .nav li {
float: left;
height: 40px;
color: #b0b0b0;
font-size: 14px;
text-align: center;
line-height: 40px;
margin-left: 20px;
}
.topbar .nav .sep {
color: #b0b0b0;
font-size: 12px;
margin: 0 5px;
}
.topbar .nav li .el-button {
color: #b0b0b0;
}
.topbar .nav .el-button:hover {
color: #fff;
}
.topbar .nav li a {
color: #b0b0b0;
}
.topbar .nav a:hover {
color: #fff;
}
.topbar .nav .shopCart {
width: 120px;
background: #424242;
}
.topbar .nav .shopCart:hover {
background: #fff;
}
.topbar .nav .shopCart:hover a {
color: #ff6700;
}
.topbar .nav .shopCart-full {
width: 120px;
background: #ff6700;
}
.topbar .nav .shopCart-full a {
color: white;
}
/* 顶部导航栏CSS END */
/* 顶栏容器CSS */
.el-header .el-menu {
max-width: 1225px;
margin: 0 auto;
}
.el-header .logo {
height: 60px;
width: 189px;
float: left;
margin-right: 100px;
}
.el-header .so {
margin-top: 10px;
width: 300px;
float: right;
}
/* 顶栏容器CSS END */
/* 底栏容器CSS */
.footer {
width: 100%;
text-align: center;
background: #2f2f2f;
padding-bottom: 20px;
}
.footer .ng-promise-box {
border-bottom: 1px solid #3d3d3d;
line-height: 145px;
}
.footer .ng-promise-box {
margin: 0 auto;
border-bottom: 1px solid #3d3d3d;
line-height: 145px;
}
.footer .ng-promise-box .ng-promise p a {
color: #fff;
font-size: 20px;
margin-right: 210px;
padding-left: 44px;
height: 40px;
display: inline-block;
line-height: 40px;
text-decoration: none;
background: url("./assets/imgs/us-icon.png") no-repeat left 0;
}
.footer .github {
height: 50px;
line-height: 50px;
margin-top: 20px;
}
.footer .github .github-but {
width: 50px;
height: 50px;
margin: 0 auto;
background: url("./assets/imgs/github.png") no-repeat;
}
.footer .mod_help {
text-align: center;
color: #888888;
}
.footer .mod_help p {
margin: 20px 0 16px 0;
}
.footer .mod_help p a {
color: #888888;
text-decoration: none;
}
.footer .mod_help p a:hover {
color: #fff;
}
.footer .mod_help p span {
padding: 0 22px;
}
/* 底栏容器CSS END */
</style>
大概完成这样,继续努力吧。。
很丑。。