HiDocs
Search K

Appearance

1.伪类元素实现非整个宽度的border边框 ​

实现让 一个div 是 100%，但是它的底边框是 65% 并居中的效果

不要直接用 border 来设置边框，而是使用伪类元素来做！

scss
> div {
      width: 85%;
      display: flex;
      justify-content: space-around;
      align-items: center;
   	  position: relative; //父元素必须是相对定位，这个必须有
}
> div:first-child::after {
  content: "";
  position: absolute;
  left: 50%; //居中
  transform: translateX(-50%);
  bottom: 0;
  width: 65%;
  height: 1px;
  background-color: #dee5f0;
  // border-bottom: 1px solid #dee5f0;
}

2.根据不同的情况配置不同的专属样式 ​

html
<div :class="['teamHonor' + posterData.teamHonorStatus]" class="teamHonor">

根据某一个标志量构建动态类名，在写了内部的具体的footer和 img 样式之后

还可以根据具体的teamHonor编号书写特定的样式！

scss
.teamHonor{
  &.teamHonor1 {
    main {
      padding-top: 462px;
    }
  }
  &.teamHonor2 {
    .otherStatus {
      footer {
        margin-top: 472px;
        img {
          top: -150px;
        }
      }
    }
  }
  &.teamHonor3 {
    .otherStatus {
      footer {
        margin-top: 380px;
        dl {
          position: relative;
          top: 40px;
        }
        img {
          top: -70px;
        }
      }
    }
  }
  .otherStatus{
    footer {
      margin-top: 590px;
      img {
        top: -270px;
      }
    }
  } 
}

或者在 js 中构造类名：利用计算属性

利用计算属性的好处：可以随时根据data 数据的改变进行计算，否则需要写在 update 钩子里面才行

js
computed: {
  // 获取状态css类
  statusCssClass() {
    let cssClass = "";
    //这里春季赛夏季赛的字段标志含义不一样
    if (this.isSpring) {
      if (this.status == 1) {
        cssClass = "noStart"; // 未开始
      } else if (this.status == 2) {
        cssClass = "onGoing"; // 进行中
      } else if (this.status == 3) {
        cssClass = "over"; // 已结束
      }
    } else {
      //夏季赛：0未开始,1进行中 2已结束,3已取消
      if (this.status == 0) {
        cssClass = "noStart"; // 未开始
      } else if (this.status == 1) {
        cssClass = "onGoing"; // 进行中
      } else if (this.status == 2) {
        cssClass = "over"; // 已结束
      } else if (this.status == 3) {
        cssClass = "over"; // 已取消
      }
    }
    return cssClass;
  },
html
<div class="pentagon" :class="[statusCssClass]"></div>

3.并排的类名的 scss 策略 ​

两个类名：一个动态一个静态

html
<div
     :class="['teamHonor' + posterData.teamHonorStatus]"
     class="teamHonor"
     >

scss：

scss
.teamHonor{
  &.teamHonor {} //不能不加&
}
//这样写相当于.teamHonor.teamHonor10{}
//注意：.teamHonor.teamHonor10 表示同时具有 .teamHonor 和 .teamHonor10 两个类名的元素。这意味着一个元素必须同时具有这两个类名才会匹配该选择器。

4.new Date()方法的参数 ​

在JavaScript中，new Date()构造函数可以接受多种参数形式：

  1. 无参数：如果不传递任何参数，new Date()将返回当前日期和时间的对象。
  2. 时间戳：可以传递一个表示时间戳的数字作为参数，例如 new Date(1624642094000)，它将根据给定的时间戳创建对应的日期和时间对象。
  3. 日期字符串：可以传递一个表示日期的字符串作为参数，例如 new Date('2022-06-26')，它将解析字符串并创建对应的日期对象。日期字符串的格式可以是ISO 8601格式（如'2022-06-26'）或其他常见的日期格式。
  4. 年、月、日等分开的参数：可以传递年、月、日等参数分开传递，例如 new Date(2022, 5, 26)，其中月份从0开始计数（0代表一月）。
  5. 其他支持的日期和时间表示形式：new Date()还支持其他日期和时间的表示形式，例如传递多个参数表示年、月、日、小时、分钟和秒等。

需要注意的是，根据传递的参数形式，new Date()将创建对应的日期和时间对象。如果参数无效或无法解析，则返回一个表示"Invalid Date"的对象。

注意：date对象的 getDay 方法是得到星期几，而getDate 方法才是得到日期