zhgdyun/src/views/projectAdmin/zjsj/command/leftOne.vue

<template>
  <Card title="项目信息">
    <div class="container">
      <div class="list">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <span class="label">{{ item.name }}</span>
          <span class="value">{{ item.content }}</span>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
export default {
  components: { Card },
  data: () => ({
    list: [
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
      { name: '项目位置', content: '测试测试测试测试' },
    ],
  }),
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  height: 100%;

  .list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    font-weight: 500;
    overflow-y: scroll;

    .list-item {
      box-sizing: border-box;
      border-left: 4px solid #66d3d8;
      margin-bottom: 5px;
      padding: 10px 30px;
      width: 100%;
      background-image: linear-gradient(to right , #3b7589, #212c3e);
      font-size: 13px;
      cursor: pointer;
      transition: all .3s;

      &:hover {
        padding: 30px;
      }

      &:hover .value {
        color: #c2805f;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        margin-right: 30px;
      }
    }
  }
}
</style>