老师帮忙看一下为啥会有一道缝隙

来源:2-7 Vue项目首页 - 图标区域页面布局

小杨同学呀

2020-09-10 18:42:03

http://img.mukewang.com/climg/5f5a02de09e290ac14380636.jpghttp://img.mukewang.com/climg/5f5a02ed095b868d06740476.jpg

<template>

      <div class="header">

           <div class="header-left">

             <span class="iconfont back-icon">&#xe609;</span>

           </div>

            <div class="header-input">

               <span class="iconfont">&#xe616;</span>

              输入城市/景点/游玩主题

              </div>

            <div class="header-right">城市

              <span class="iconfont arrow-icon">&#xe61a;</span>

            </div>

      </div>

</template>


<script>

export default {

    name:'HomeHeader'

}

</script>


<style lang="stylus" scoped>

    @import '~@/assets/styles/varibles.styl'

    .header

      display: flex

      line-height: .86rem

      background: $bgColor

      color: #fff

    .header-left

      width: .64rem

      float: left

      .back-icon

        text-align: center

        font-size: .4rem

    .header-input

      flex: 1

      height: .64rem

      line-height: .64rem

      margin-top: .12rem

      margin-left: .2rem

      padding-left: .2rem

      background: #fff

      border-radius: .1rem

      color: #ccc

    .header-right

      width: 1.24rem

      float: right

      text-align: center

      .arrow-icon

        margin-left: -.04rem

        font-size: .24rem

</style>


写回答

1回答

好帮手慕星星

2020-09-10

同学你好,代码不完整,老师这边测试没有间隙

http://img.mukewang.com/climg/5f5a13c309b52e8404310277.jpg

建议将swiper.vue文件以及icons.vue文件代码粘贴上来,老师帮助进行测试。

祝学习愉快!

0

0 学习 · 10739 问题

查看课程