【vue3.0】3.0 某东到家（三）——首页顶部布局位置栏的实现

首先安排一个大的布局。修改app.vue：

image.png

这里还需要2个图标

image.png

修改app.vue

......
  

    

      
        
      
      西安交通大学兴庆校区梧桐苑食堂
        
    
  
......

效果如下：

image.png

接下来进行精细化优化：

效果如下：

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

接下来调整通知铃铛图标：

效果发现跑右上角了：

image.png

这是因为我们有一个居中的div

image.png

所以这样显示是正常的。
这样top需要加上之前的顶部间距：

  .position__notice {
    top: 0.17rem;
    right: 0;
    position: absolute;
    font-size: 0.2rem;
  }

image.png

这时候展示文字很长需要显示一个省略号：

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

再优化一下字体颜色,去掉背景色，到目前为止，整体代码如下：

image.png

像我们这种项目，一般文字的颜色都是#333，这样我们可以抽取这个颜色，做一个单独的文件。新建src\style\viriables.scss
编写内容：

/**
* 内容主体文字颜色
**/
$content-font-color: #333;

怎么引入和使用：

@import './style/viriables';
......
  color: $content-font-color;

整体css代码如下：

......

还可以抽取出一个嵌入mixin。新建文件src\style\mixins.scss:

// 超出长度以省略号显示而不会出现换行
//文字的自动展示
@mixin ellipsis {
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

引入：
src\App.vue: