02- 小米页面-头部尾部
1 抽组件
抽组件主要是为了复用
首页 抽取 头部和尾部
2 引入一些样式
2.1 引入rest.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;
}版心1226px,有一个安全距离，防止缩小变形： 记得设置一个最小宽度， min-width: 1226px;
引入样式：
2.2 config.css
/*样式规范表
*/
$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; //订单标题背景色sass的好处是预编译：可以提前定义变量。可以通过加载变量来实现一个样式的功能
3 navHeader.vue
分上下两个部分，导航栏 和下边的 导航菜单
3.1 导航栏
小的导航都会用a标签，添加margin-right
小图标用背景 设置
购物车（）.icon-cart {display: inline-block;width: 16px;height: 12px;background: url('@/assets/imgs/icon-cart-checked.png') no-repeat center;background-size: contain;margin-left: 15px;margin-right: 2px;}
2 登录的时候显示名字， 没有登录显示请登录
跳转购物车： 路由跳转
login () {this.$router.push('/login')},goToCart () {this.$router.push('/cart')}3.2 导航菜单
1 小米logo
相当于相框和相册的关系（类似轮播图）
2 菜单导航
2.1 菜单下边有子区域，用a就不太合适了，我们用div
2.2 设置下边的搜索框
1 先实现静态页面 2 获取最近6条数据 3 要查种类下的数据
1因为要循环数据，用ul li更合适
ul 宽高-》li宽高-》 图片，文字
2 边框： 不能加border-right, 用伪类添加一条线
最后一个边框去除：
&:last-child::after {
width: 0px;
}
3图片和文字水平居中对齐： 给父盒子添加text-align:center
4 &:hover {
color:orange;
.children {
height: 220px;
opacity: 1;
}
}
调用接口：
getProductList () {this.axios.get('/products', {params: {categoryId: '100012',pageSize: 6}}).then(res => {window.console.log(res)this.phoneList = res.list})},前端也可以截取6条数据： this.phoneList = res.list.slice(0,6)
渲染：
添加过滤器处理钱 ：
filters: {currency (val) {if (!val) return '0.00'return '￥' + val.toFixed(2) + '元'}},3 搜索框
div > (input + a) : 搜索图标 带手而且可以跳转，所以用a
4 抽取公共样式
base.scss
会把base.css的代码都加载到 vue当中
5 抽取公共方法
mixin.scss
4 narFooter
父盒子： text-align:center 使得都水平居中
a|b|c : 给|添加margin
5 服务条
1好多页面都使用了，进行封装，单弄出一个组件 serviceBar
2平分四份， 防止变形 设置宽度width: 24.9%
3 高度和线的高度一致，用border-right
或者给li添加margin : 33px 0px
目标： 使得盒子(li)就字体那么高
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！