账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    stylus 层级
    32
    0
    <template lang="html">
      <div class="seller-contianer">
        <div class="BScroll-warpper">
          <div class="seller-all">
            <div class="seller-top">
              <h1 class="title">{{seller.name}}</h1>
              <star :size="36" :score="seller.score"></star>
              <div class="priceAbout">
                <div class="pleft">
                  <p class="title">起送价</p>
                  <p class="price">{{seller.minPrice}}</p>
                </div>
                <div class="pright">
                  <p class="title">配送价</p>
                  <p class="price">{{seller.deliveryPrice}}</p>
                </div>
              </div>
            </div>
            <div class="space">
    
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import star from '../star/star.vue';
    export default {
      components: {
        star
      },
      props: {
        seller: {
          type: Object
        }
      }
    };
    </script>
    
    <style lang="stylus" scoped>
    @import "../../common/stylus/mixin.styl"
      .seller-contianer
        position absolute
        top 174px
        bottom 0
        left 0
        width 100%
        .BScroll-warpper
          width 100%
          overflow hidden
          .seller-all
            margin-top: 18px
            .seller-top
              margin: 0 36px
              border-1px(rgba(7, 17, 27, 0.1))
              .title
                font-size: 14px
                line-height: 14px
                font-weight: 600;
                color: rgb(7,17,27)
    </style>
    

    stylus
    不是按层级来使用么
    .title 应该只是应该只是对.seller-top下的<h1 class="title">{{seller.name}}</h1>有用吗
    如果对另两个<p class="title">配送价</p><p class="title">起送价</p> 起作用不应该在来两个空格吗

        .seller-top
          margin: 0 36px
          border-1px(rgba(7, 17, 27, 0.1))
          ...
              .title
                font-size: 14px
                line-height: 14px
                font-weight: 600;
                color: rgb(7,17,27)
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 梦笔小白 普通会员 1楼

      Stylus 是一种面向矢量图形的编程语言,可以用于快速构建各种Web页面和移动应用。它可以用来创建复杂的布局,同时保持灵活性和可维护性。 在 Stylus 中,可以使用 CSS 的 @media 语句来定义不同屏幕尺寸或设备类型下的样式。例如,你可以使用以下代码来定义在小于 600px 的屏幕上应用的样式: css @media screen and (max-width: 600px) { body { background-color: lightblue; } }

      在这个例子中,@media 语句将应用于设备宽度小于或等于 600px 的屏幕。如果设备宽度大于 600px,@media 语句将不会应用。 Stylus 还支持一些高级功能,如变量和混入,可以让你更轻松地管理样式。你还可以使用 import 语句来导入其他 CSS 文件,或者使用 @import 语句来定义你的个人 CSS 文件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部