CSS_self

vue 使用:style

:style="{'background-image': 'url('+data.image_url+')'}"

Scss文件

背景色
_mixins.scss

公共sass文件
src\assets\scss\variable.scss
background: url('~@/assets/images/6001/small_bg.jpg') no-repeat;

scss 使用deep 需要容器包起来

/deep/ .job {
  .van-grid-item__content {
    padding: 5px !important;
  }
}

css点点点

overflow: hidden;    
display: -webkit-box;              
text-overflow: ellipsis;           
-webkit-box-orient: vertical;       
-webkit-line-clamp: 2;

CSS实现移动端横向滑动

.parent {
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar{
            width:0;
            height:0;
            display: none;
    }
}

实现高斯模糊效果

.bg {
  background: rgba(7,17,27,0.3);
  backdrop-filter: blur(9px);
}

选择除了第一个的元素

<template>
  <div class="dom">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>
<style>
  .dom  div:not(:first-child){
    background:red;
  }
  // 排除最后两个的元素
 .tags-item:not(:nth-last-child(-n+2)){
  border-right: 1px solid #ebeef5;
}
</style>

移动端容器左右滑动

<template>
  <div class="parent">
    <div v-for="(item, index) in 8" :key="`_${index}`" class="item">{{ item }}</div>
  </div>
</template>

<style lang="scss">
.parent {
  width: 100%;
  height: 500px;
  // 重点
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling:touch;
  flex-wrap: nowrap;

  &::-webkit-scrollbar{
    width:0;
    height:0;
    display: none;
  }

  >.item {
    width: 480px;
    height: 425px;
    background: #00a3ff;
    margin-right: 10px;
  }
}
</style>