首先安排一个大的布局。修改app.vue：
<template>
<div class="wrapper"></div>
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
<router-view />
</template>
<style lang="scss">
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
background: #1fa4fc;
}
.docker {
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid #f1f1f1;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
image.png
这里还需要2个图标
image.png
修改app.vue
......
<div class="wrapper">
<div class="position">
<span>
<i class="custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂
<i class="custom-icon custom-icon-bell"></i>
</div>
</div>
......
效果如下：
image.png
接下来进行精细化优化：
<template>
<div class="wrapper">
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂
<i class="custom-icon custom-icon-bell"></i>
</div>
</div>
......
</template>
<style lang="scss">
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
background: #1fa4fc;
padding: 0 0.18rem;
}
.position {
padding: 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
&__icon {
font-size: 0.2rem;
}
}
.....
</style>
效果如下：
image.png
这里发现，
position__icon的优先级会被iconfont覆盖，解决方案如下：
......
.position {
padding: 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
.position__icon {
font-size: 0.2rem;
}
}
......
image.png
这样写最终会解析成
.position .position__icon。调整一下图片上下的位置：
.position {
padding: 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
.position__icon {
position: relative;
top:0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
}
image.png
接下来调整通知铃铛图标：
<template>
<div class="wrapper">
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
</div>
......
</template>
<style lang="scss">
......
.position {
position: relative;
padding: 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.01rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
......
</style>
效果发现跑右上角了：
image.png
这是因为我们有一个居中的div
image.png
所以这样显示是正常的。
这样top需要加上之前的顶部间距：
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
image.png
这时候展示文字很长需要显示一个省略号：
<template>
<div class="wrapper">
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
</div>
......
</template>
<style lang="scss">
......
.position {
//文字显示省略号配置
overflow: hidden; //没有滚动条，超出给定的宽度和高度属性，超出的部分会被隐藏，不占位
white-space: nowrap; //不允许换行
text-overflow: ellipsis; //当文本溢出包含元素时:ellipsis-显示省略符号来代表被修剪的文本。
}
.....
</style>
image.png
这里还有个问题 ，省略号覆盖到铃铛上面了。设置一个padding属性即可(别纠结为什么是用padding，在实际开发中我是尝试过margin之后发现不行，再换的padding，而不是我css理论知识学得有多好)：
.position {
//文字显示省略号配置
overflow: hidden; //没有滚动条，超出给定的宽度和高度属性，超出的部分会被隐藏，不占位
white-space: nowrap; //不允许换行
text-overflow: ellipsis; //当文本溢出包含元素时:ellipsis-显示省略符号来代表被修剪的文本。
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
......
}
image.png
再优化一下字体颜色,去掉背景色，到目前为止，整体代码如下：
<template>
<div class="wrapper">
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
</div>
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
<router-view />
</template>
<style lang="scss">
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
}
.position {
//文字显示省略号配置
overflow: hidden; //没有滚动条，超出给定的宽度和高度属性，超出的部分会被隐藏，不占位
white-space: nowrap; //不允许换行
text-overflow: ellipsis; //当文本溢出包含元素时:ellipsis-显示省略符号来代表被修剪的文本。
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: #333;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.docker {
color: #333;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid #f1f1f1;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
image.png
像我们这种项目，一般文字的颜色都是
#333，这样我们可以抽取这个颜色，做一个单独的文件。新建src\style\viriables.scss编写内容：
/**
* 内容主体文字颜色
**/
$content-font-color: #333;
怎么引入和使用：
@import './style/viriables';
......
color: $content-font-color;
整体css代码如下：
......
<style lang="scss">
@import './style/viriables';
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
}
.position {
//文字显示省略号配置
overflow: hidden; //没有滚动条，超出给定的宽度和高度属性，超出的部分会被隐藏，不占位
white-space: nowrap; //不允许换行
text-overflow: ellipsis; //当文本溢出包含元素时:ellipsis-显示省略符号来代表被修剪的文本。
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid #f1f1f1;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
还可以抽取出一个嵌入mixin。新建文件src\style\mixins.scss:
// 超出长度以省略号显示而不会出现换行
//文字的自动展示
@mixin ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
引入：
src\App.vue:
<style lang="scss">
......
@import './style/mixins';
......
.position {
//文字显示省略号配置
@include ellipsis;
......
}
......
</style>
