hi-ucs/front/src/views/personalCenter/components/PutOnTheShelf .vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-07-12 09:42:44
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-07-14 16:25:57
 * @Description:我的申请 能力申请 查看详情
-->
<template>
  <div class="top">
    <div class="title">基本信息</div>
    <div class="main">
      <div>
        <p class="item">
          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
          <span>能力名称：{{ props.refObj.dto.name }}</span>
          <span>能力类型：{{ props.refObj.dto.type }}</span>
        </p>
        <p class="item">
          <span>共享条件：{{ props.refObj.dto.shareCondition }}</span>
          <span>能力描述：{{ props.refObj.dto.description }}</span>
          <span>归属部门：{{ props.refObj.dto.deptName }}</span>
        </p>
        <p v-for="item in props.refObj.dto.infoList" :key="item.attrType">
          <span>{{ item.attrType + '：' + item.attrValue }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, defineProps } from 'vue'
  const props = defineProps({
    refObj: { type: Object, default: null },
  })
  console.log(props.refObj, '=====================================')
  // if (props.refObj.resourceApplication) {
  //   showArr.value = []
  //   for (const key in props.refObj.resourceApplication) {
  //     if (props.refObj.resourceApplication[key].length > 0) {
  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
  //       obj.name = key
  //       props.refObj.resourceApplication[key].map((item) => {
  //         obj.instanceId = item.instanceId
  //         if (item.resources.length > 0) {
  //           item.resources.map((val) => {
  //             obj.list.push(val)
  //           })
  //         } else {
  //           item.camera.map((val) => {
  //             obj.list2.push(val)
  //           })
  //         }
  //       })
  //       showArr.value.push(obj)
  //     }
  //   }
  // }
</script>
<style lang="less" scoped>
  .title {
    font-size: 0.18rem;
    color: #000;
    font-weight: bold;
    margin-bottom: 0.2rem;
    padding-left: 0.1rem;
    border-left: 0.06rem #0058e1 solid;
  }
  .top {
    margin-bottom: 0.1rem;
    .main {
      background: #eee;
      padding: 0.2rem 0.2rem 0.1rem;
      p {
        display: flex;
        justify-content: space-between;
        & > span {
          width: 100%;
        }
        .enclosure {
          width: 95%;
          padding: 0.05rem 0.1rem;
          background: #ddd;
          display: flex;
          justify-content: space-between;
          margin-top: 0.05rem;
        }
        .btn:hover {
          color: #0058e1;
          cursor: pointer;
        }
      }
      .item {
        span {
          width: 2.5rem;
        }
      }
    }
  }
  .bottom {
    .main {
      .item {
        border-top: 1px #eee solid;
        .deptName {
          color: #0058e1;
          font-size: 0.16rem;
          margin-top: 0.1rem;
          display: flex;
          align-items: center;
          .img {
            width: 0.05rem;
            height: 0.05rem;
            border-radius: 0.05rem;
            background: #0058e1;
            margin-right: 0.1rem;
          }
        }
        .oddNumbers {
          margin: 0.1rem 0 0 0.15rem;
        }
        .box {
          margin-left: 0.1rem;
          .ability {
            height: 1.3rem;
            display: flex;
            border-bottom: 1px #eee solid;
            padding: 0.1rem 0;
            .left {
              display: inline-block;
              width: 1.1rem;
              height: 1.1rem;
              margin-left: 0.1rem;
              background: url('~@/assets/home/sxt_square.png') no-repeat;
              background-size: 100%;
            }

            .sxt {
              background: url('~@/assets/home/sxt_square.png') no-repeat;
              background-size: 100%;
            }
            .yyzy {
              background: url('~@/assets/home/yyzy_square.png') no-repeat;
              background-size: 100%;
            }

            .znsf {
              background: url('~@/assets/home/znsf_square.png') no-repeat;
              background-size: 100%;
            }

            .tcfw {
              background: url('~@/assets/home/tcfw_square.png') no-repeat;
              background-size: 100%;
            }

            .kfzj {
              background: url('~@/assets/home/kfzj_square.png') no-repeat;
              background-size: 100%;
            }

            .ywzj {
              background: url('~@/assets/home/ywzj_square.png') no-repeat;
              background-size: 100%;
            }
            .btn {
              cursor: pointer;
              color: #0087ff;
              align-self: flex-end;
              padding: 5px 10px;
              border: 1px #0087ff solid;
              border-radius: 0.2rem;
            }
            .right {
              flex: 1;
              margin-left: 0.15rem;
              .ability-top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .name {
                  .type {
                    background: #0087ff;
                    color: #fff;
                    padding: 2px 10px;
                    border-radius: 10px;
                    margin-left: 0.1rem;
                  }
                }
              }
              .ability-bottom {
                margin-top: 0.15rem;
                // display: flex;
                // justify-content: space-between;
                .dec {
                  width: 7rem;
                  height: 0.44rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .result:hover {
                  color: #0058e1;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
</style>