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

<template>
  <Card title="项目信息">
    <div class="container">
      <vue-scroll style="height: 100%;">
        <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>
      </vue-scroll>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
export default {
  components: { Card },
  data: () => ({
    list: [
      { name: '项目位置', content: '建宁路与热河交叉路口' },
      { name: '用地面积', content: '112768.21㎡' },
      { 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 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    // overflow-y: scroll;

    .list-item {
      position: relative;
      display: flex;
      box-sizing: border-box;
      border-left: 4px solid #66d3d8;
      margin-bottom: 5px;
      padding: 10px 0;
      width: 100%;
      background-image: linear-gradient(to right, #3b7589, #212c3e);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;

      &:hover {
        padding: 20px 0;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 8px;
          display: inline-block;
          transform: translate(0, -50%);
          width: 8px;
          height: 14px;
          background-image: url('../assets/images/command-center/triangle.png');
          background-size: 100% 100%;
          transition: all .3s;
        }
      }

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

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

      .label,
      .value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .label {
        box-sizing: border-box;
        width: 25%;
        padding-left: 20px;
      }

      .value {
        width: 75%;
      }
    }
  }
}
</style>