forestProduct-trace-H5-UI/src/view/invest.vue

<template>
  <div class="body-invest">
    <main-title>使用的投入品</main-title>
    <div class="list-box animated fadeInUpBig">
      <h4>投入品清单</h4>
      <ul class="list">
        <li v-for="(x,key) in inputsList" :key="key" class>
          <span v-for="(c,i) in x" :key="i">{{c.inputsProcessName}}</span>
        </li>
      </ul>
      <h6>
        <span>经检验未使用违禁品</span>
      </h6>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    inputsList() {
      let arr = [], list = this.$store.state.info.inputsList || [];
      for (let i = 0, x = 0; x = list[i]; i++) {
        arr.push([x, list[++i] || {}]);
      }
      return arr;
    }
  }
}
</script>

<style lang="less">
.body-invest {
  .list-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f9;
    border-radius: 0.08rem;
    margin: 0.4rem 0.3rem;
    padding: 0.3rem;
    box-shadow: 0.05rem 0.05rem 0.1rem 0 rgba(0, 0, 0, 0.05);
    h4 {
      font-size: 0.24rem;
      padding-bottom: 0.2rem;
      position: relative;
      color: #00933b;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        display: block;
        width: 80%;
        left: 0;
        right: 0;
        margin: auto;
        background: #00933b;
        height: 2px;
      }
    }
    > .list {
      margin: 0.4rem 0;
      font-size: 0.2rem;
      color: #242b31;
      width: 100%;
      > li {
        background: transparent;
        border-radius: 0.08rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.15rem 0.4rem;
        &:nth-child(odd) {
          background: #eaebed;
        }
        > span {
          width: 45%;
        }
      }
    }
    > h6 {
      font-size: 0.16rem;
      display: block;
      line-height: 1em;
      padding: 0 1em;
      position: relative;
      color: #3f8f46;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 1px;
        background: #3f8f46;
        left: -50%;
        right: -50%;
        z-index: -1;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 0;
      }
      > span {
        position: relative;
        z-index: 1;
      }
    }
  }
}
</style>