给选中盒子添加4角边框

给盒子添加 tabindex="1"

效果

 <div
  class="card-item"
  v-for="(item, index) in cardList"
  :key="index"
>
// tabindex="1" 盒子类card-item_focus
  <div tabindex="1" class="card-item_focus">
    <van-row>
      <van-col span="6">
        <img src="../assets/alarm.png" />
        <p class="card-count">
          {{ item.factorKey ? item.factorKey : "--" }}
        </p>
      </van-col>
      <van-col span="18">
        <p style="font-size: 16px; color: #524f4f">
          {{ item.name ? item.name : "--" }}
        </p>
        <p>风向：{{ item.wind ? item.wind : "--" }}</p>
        <p>时间：{{ item.time ? item.time : "--" }}</p>
      </van-col>
    </van-row>
  </div>
</div>

.card-item_focus {
  width: 100%;
  padding-left: 20px;
}
.card-item_focus:focus {
  background: linear-gradient(to top, #1bf82f, #1bf82f) left top no-repeat,
    //上左
    linear-gradient(to right, #1bf82f, #1bf82f) left top no-repeat,
    //左上
    linear-gradient(to left, #1bf82f, #1bf82f) right top no-repeat,
    //上右
    linear-gradient(to bottom, #1bf82f, #1bf82f) right top no-repeat,
    //上右
    linear-gradient(to left, #1bf82f, #1bf82f) left bottom no-repeat,
    //下左
    linear-gradient(to bottom, #1bf82f, #1bf82f) left bottom no-repeat,
    //左下
    linear-gradient(to top, #1bf82f, #1bf82f) right bottom no-repeat,
    //下右
    linear-gradient(to left, #1bf82f, #1bf82f) right bottom no-repeat; //右下
  background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
}