常用前端代码整理

// 手机适配

// 弹性布局
display: flex;
flex-wrap: wrap;
justify-content: space-between;

// 字符串一行显示
.text_ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
关于文本的截取，解决方案有两种：                                                                             方案1：纯css                                                                                                                    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;                                                                                                   方案二：vue filter截取方案                                                                                             export default {
    ...
    filters : {
        lineClamp(value){
            return value.length > 200 ? value.slice(0, 200) + '...' : value
        }
    }
    ...
}  

// 圆形图标（带阴影）
.icon{
          width: 60px;
          height: 60px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 60px;
          padding: 10px;
          background-color: #fff;
          border-radius: 50% 50%;
          box-shadow: 2px 4px 4px #cccccc7a;
}

// 两个item一行的盒子效果
div.container
{
    width:30em;
    border:1em solid;
}
div.box
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border:1em solid red;
    float:left;
}

// 文本左侧图标
.bg_icon {
    padding-left: 43px;
    background-size: 39px;
    background-repeat: no-repeat;
    background-position: left;
}

// 一行多item滚动效果
.container {
    display: flex;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;
    overflow-scrolling: touch;
    white-space: nowrap;

    .item {

        margin-right: 20px;
        width: 280px; // 必须设置
        display: inline-block;
    }
}

// 隐藏滚动条
// 方法一：
::-webkit-scrollbar{
  display: none;
}

// 方法二：
::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

// :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
// p:last-child 等同于 p:nth-last-child(1)。
p:last-child
{ 
background:#ff0000;
}

// &是指找到符合条件的选择器进行设置
&.active{
          border-bottom: 8px solid #ff3371
        }
// 查找第一个对象
&:nth-child(1) {
        .body_rank {
            background-color: rgb(221, 123, 210);
        }
    }

// vue语法
// 根据条件绑定类名
:class="{'active':currentIndex === index}"

// 绑定方法
@switch="switchItem"
// 传入值的方法
methods: {
      switchItem (index) {
        this.$emit('switch', index)
      }
    }
// 绑定行为
@click="switchItem(index)"

// vue绑定style
:style="`background-image:url(${leagueTableModel.type === 1 ? leagueTableModel.imgUrl : 'https://img3.doubanio.com/img/files/file-1508395738-0.jpg'})`

// 跳转
// 跳转页面


// route/index.js
path: '/register', // 活动报名
          component: resolve => require(['@/pages/Home/subpages/register.vue'], resolve), // 报名页面
          children: [
            {
              path: 
              component:
            }
          ]