持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

前言

实战已经开始了，上一篇主要是对首页tabbar的样式进行了编写，本章节则会对首页顶部栏进行布局，使用到的Scss会有些多，而且内容看起来有些复杂，所以还需要大家耐心观看。

整体布局

首页的整个页面是分为内容区域和tabbar区域两个区块。

⭐️ 内容区域可以在一个div标签下去完成渲染。

<div class="wrapper">
    内容区域
</div>

.wrapper{
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  background-color: red;
}

在id为app的div标签下面已经分为了内容区域和tabbar区域了。

地址栏布局

🌀 内容区域确定之后，就可以细分区块来写样式布局了。

1. 先确定左右间距padding

.wrapper{
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  padding: 0 0.18rem;
}

2. 确定地址栏的内容和间距padding

<div class="wrapper">
    <div class="position">
      北京理工大学国防科技园2号楼10层
    </div>
</div>

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
}

3. 地址栏icon

地址栏中有一个定位的icon和一个消息提醒的icon，在上一篇文章中，我们使用过iconfont来渲染页面上的icon。

由于点击生成iconfont的CDN有问题，所以我们还是采用下载至本地的方式来使用iconfont。如果大家在实战过程中，发现生成CDN已经可以使用了，那么最好还是使用CDN，这样就不用每次都去替换新的字体了。

iconfont添加完成并下载至本地之后，需要替换assets目录下面的font的字体文件。

<div class="wrapper">
    <div class="position">
        <span class="iconfont position__icon">&#xe8ae;</span>
        北京理工大学国防科技园2号楼10层
        <span class="iconfont position__info">&#xe62f;</span>
    </div>
</div>

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  &__icon{
    font-size: .2rem;
  }
}

当我们想给icon的字体大小为.2rem（20像素）的时候，会发现字体大小的样式并没有改变，还是使用的iconfont中的16px。
这是因为我们在页面上将iconfont和position__icon两个样式名都写在一个class里面，而样式中我们使用的是& 拼接的。
这时候就不能使用&拼接了，可以直接写成全部的类名。

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  
  .position__icon{
    font-size: .2rem;
  }
}

⭐️ 根据稿图，我们可以看出消息提醒的icon是在地址栏中居右的。所以我们可以使用绝对定位的方式让它靠右显示。

.position{
  position: relative;
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;

  .position__icon{
    font-size: .2rem;
  }

  .position__info{
    position: absolute;
    right: 0;
    top: .16rem;
    font-size: .2rem;
  }
}

大致的样式都已经调完了，但是icon和文字肉眼看起来好像不在同一高度似的，所以我们在给icon的top额外增加0.01rem。

.position{
  position: relative;
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;

  .position__icon{
    position: relative;
    top: 0.01rem;
    font-size: .2rem;
  }

  .position__info{
    position: absolute;
    right: 0;
    top: .17rem;
    font-size: .2rem;
  }
}

4. 样式变量

无论是顶部栏的地址内容，还是tabbar的文字描述，他们的字体颜色都是#333，所以可以把这一部分提取出来放到一个单独的scss文件中去统一管理。

👉 在style文件夹中新建一个viriables.scss文件，然后在里面定义一个变量$content-font-color: #333;用来设置文本内容的字体颜色。

@import './style/viriables.scss';

在App.vue中就要引入定义的scss文件了。

<style lang="scss">
@import './style/viriables.scss';
.position{
  color: $content-font-color; // 定义的变量

}
.tabbar {
  color: $content-font-color; // 定义的变量
}
</style>

在地址栏和tabbar的样式中就可以直接去使用定义的变量了。

5. 样式混入

在地址栏中如果文本超长了，我们需要截断隐藏并使用...来显示隐藏部分。但是在后面的内容中，可能还会有类似的隐藏文本的样式需要写，所以这次我们就把这个会经常用到的样式封装起来，混入到需要的地方去。

👉 在style文件夹中新建一个mixins.scss文件，然后将常用的样式通过@mixin封装起来。

@mixin ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

同样需要在App.vue里面引入scss文件。

@import './style/mixins.scss';

在地址栏的样式中可以通过@include xxx的方式混入样式。

<style lang="scss">
@import './style/mixins.scss';
.position{
  @include ellipsis;
}
</style>

总结

本篇文章主要是对地址栏部分的内容进行布局，而且对一些常用的css进行了封装和混入，更多内容会在后面的文章中展现出来，敬请期待哦！！！

【Vue3从零开始-实战】S2：使用Scss对顶部栏进行布局

前言