急! 老师，帮忙看看我做的案例的问题。我不知道怎么解决

相关代码：

<template>
  <div class="wrapper">
    <div class="header">
      <div class="header__span">
        <span></span>
      </div>
      <div class="header__text">
        <h2>违规车辆监测</h2>
      </div>
    </div>
    <div class="subject">
      <div class="subject__banner">
        <div class="subject__banner__select">
          <span style="font-size: 0.14rem">全部类型</span>
          <select name="" id="sel" style="background: none"></select>
        </div>
        <div class="subject__banner__search">
          <input type="text" id="ipt" placeholder="搜索车牌号..." />
          <i class="iconfont icon-search">&#xe61c;</i>
        </div>
      </div>
    </div>
    <div class="content">
      <ul class="content__list">
        <li 
        class="content__list__items"
        v-for="item in DockerList"
        :key="item.id"
        >
          <p class="content__list__item">
            <span class="content__list__span"
            v-for="(innerItem, innerIndex) in item.tags"
            :key="innerIndex">{{innerItem}}</span>
          </p>
          <p class="icontent__list__item">
            <span class="iconfont icon-site"
            v-for="(innerItem, innerIndex) in item.times"
            :key="innerIndex">{{innerItem}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Docker',
  setup() {
    const DockerList = [{
      id: 1,
      tags:['超速','陕M·A3P55','超速行驶'],
      times:['&#xe7f1;','生产区 - 运输主干道','2021-02-27 10:23:45']
    }, {
      id: 2,
      tags:['超速','陕M·M4859','超速行驶'],
      times:['&#xe7f1;','生活区 - 主干道','2021-02-28 18:15:40']
    }, {
      id: 3,
      tags:['黑名单','陕M·7A833','黑名单车辆驶入'],
      times:['&#xe7f1;','生活区 - 主干道','2021-02-29 22:17:45']
    }, {
      id: 4,
      tags:['违停','陕M·71587','车辆违规停车'],
      times:['&#xe7f1;','生活区 - 停车场西侧','2021-02-25 16:23:45']
    },{
      id: 5,
      tags:['超速','陕M·M4859','超速行驶'],
      times:['&#xe7f1;','生活区 - 主干道','2021-02-28 18:15:40']
    },{
      id: 6,
      tags:['黑名单','陕M·7A833','黑名单车辆驶入'],
      times:['&#xe7f1;','生活区 - 主干道','2021-02-29 22:17:45']
    },{
      id: 7,
      tags:['违停','陕M·71587','车辆违规停车'],
      times:['&#xe7f1;','生活区 - 停车场西侧','2021-02-25 16:23:45']
    },{
      id: 8,
      tags:['超速','陕M·M4859','超速行驶'],
      times:['&#xe7f1;','生活区 - 主干道','2021-02-28 18:15:40']
    }];
      return  { DockerList };
  }
}
</script>

<style lang="scss" scoped>
@import "./style/base.scss";
@import "./style/iconfont.css";

.wrapper {
  width: 3.5rem;
  height: 6.2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
}
.wrapper .header {
  display: flex;
  align-items: center;
  width: 3.4rem;
  height: 0.4rem;
  background: rgba(0, 0, 0, 0.6);
  &__span {
    display: inline-block;
    width: 0.03rem;
    height: 0.18rem;
    background: rgb(1, 245, 225);
    margin-right: 0.11rem;
    margin-left: 0.1rem;
  }
  &__text {
    color: #fff;
  }
}
.subject {
  width: 3.4rem;
  height: 0.6rem;
  margin-top: 0.1rem;
  background-color: rgb(20, 72, 150);
  &__banner {
    display: flex;
    width: 3.4rem;
    height: 0.6rem;
    background: blueviolet;
    &__select {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1rem;
      height: 0.34rem;
      margin: 0.15rem 0.1rem 0 0.15rem;
      background: chocolate;
    }
    &__search {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.15rem;
      width: 2rem;
      height: 0.34rem;
      background: brown;
    }
  }
}
#sel {
  border: 0;
  background: transparent;
}
#ipt {
  width: 1.5rem;
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.14rem;
  background: none;
  border: none;
  color: #ccc5c5;
}
.content {
  height: 5.1rem;
  width: 3.4rem;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-y: scroll;
  &__list {
    overflow-y: scroll;
    &__item {
      width: 3.1rem;
      height: 0.6rem;
      background: olive;
    }
  }
}
</style>

相关截图：

相关截图：

p元素里面的内容循环渲染，第二行的p内容渲染到外面去了，不知道怎么改正，下面的图是例图

​