vue style的:bofore中border设置无效

小豆包
  • 12

list.vue

<template>
  <div class="list">
    <div class="area">
      <div class="title" border-topbottom>当前城市</div>
    </div>
    <div class="area">
      <div class="title" border-topbottom>热门城市</div>
    </div>
    <div class="area">
      <div class="title" border-topbottom>A</div>
    </div>
  </div>



</template>

<script>
export default {
  name: "CityList"
}
</script>

<style lang="stylus" scoped>
@import "~css/varibles.styl";
  .border-topbottom
    &:before
      border-color red
    &:after
      border-color red
.list
  border .02rem red
  .title
    background #eee
    height .44rem
    padding-left .2rem
    font-size .26rem
    border-bottom .1rem !important
    // margin-top .1rem
</style>

varibles.styl

$bgColor=#00bcd4;
$darkTextColor=#333;
$headerHeight=.86rem;

控制台展示

border无效.PNGborder-style.PNGborder 模型.PNG

评论
阅读 1.1k
2 个回答
✓ 已被采纳
border-topbottom 放到 class里试试
<template>
  <div class="list">
    <div class="area">
      <div class="title border-topbottom">当前城市</div>
    </div>
    <div class="area">
      <div class="title border-topbottom">热门城市</div>
    </div>
    <div class="area">
      <div class="title border-topbottom">A</div>
    </div>
  </div>

</template>

:before:contentcontent: ''没有?

// 例:
.xxx:after{
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  background: red;
}
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏