Situation-Awareness-Platform-Frontend/src/components/LicenseInfo/SidePanel.vue

<template>
  <d-layout class="dlayout">
    <d-header class="dheader">
      <div class="title">
        <h1>{{ data.licenseName }}</h1>
        <d-icon style="cursor: pointer;" name="icon-close" @click="emit('close')"></d-icon>
      </div>
      <div class="sub-title">
        <span>分数</span>
        <span>3</span>
        <span>类型</span>
        <d-tag color="#3ac295" size="sm">{{ data.category }}</d-tag>
      </div>
    </d-header>
    <d-content class="dcontent">
      <div class="dcontent-title">
        <h1>许可证属性</h1>
      </div>
      <div class="dcontent-body">
        <d-row :gutter="10">
          <d-col :span="8">
            <div class="content-body-col">
              <div class="dcontent-body-col-title dcontent-body-col-title-1">
                <div class="dcontent-body-col-title-icon">
                  <img src="@/assets/imgs/jyh/license/allow.webp">
                </div>
                <span>允许的</span>
              </div>
              <span>Commercial Use</span>
              <span>Modify</span>
              <span>Distribute</span>
              <span>Sublicense</span>
              <span>Private Use</span>
            </div>
          </d-col>
          <d-col :span="8">
            <div class="content-body-col">
              <div class="dcontent-body-col-title dcontent-body-col-title-2">
                <div class="dcontent-body-col-title-icon">
                  <img src="@/assets/imgs/jyh/license/warning.webp">
                </div>
                <span>必要的</span>
              </div>
              <span>Include Copyright</span>
              <span>Include License</span>
              <span>State changes</span>
              <span>Include Notice</span>
            </div>
          </d-col>
          <d-col :span="8">
            <div class="content-body-col">
              <div class="dcontent-body-col-title dcontent-body-col-title-3">
                <div class="dcontent-body-col-title-icon">
                  <img src="@/assets/imgs/jyh/license/notAllow.webp">
                </div>
                <span>受限的</span>
              </div>
              <span>Place Warranty</span>
              <span>Hold Liable</span>
              <span>Use Trademark</span>
            </div>
          </d-col>
        </d-row>
      </div>
    </d-content>
    <d-footer class="dfooter">
      <div>
        <span>影响组件：</span>
        <span>request</span>
      </div>
      <div>
        <span>当前版本：</span>
        <span>2.0</span>
      </div>
    </d-footer>
  </d-layout>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
const props = defineProps({
  data: {
    type: Object
  }
})
const emit = defineEmits(['close']);
</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.dlayout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  .dheader {
    width: 100%;
  }

  .dcontent {
    border-radius: 8px;
    border: 1px solid #EEF0F5;
    margin: 20px 0;
    width: 100%;
    &-title {
      height: 40px;
      background-color: $devui-area;
      display: flex;
      justify-content: left;
      align-items: center;
      h1 {
        padding-left: 20px;
        color: #252B3A;
        font-weight: 800;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
      }
    }

    &-body {
      padding: 20px;

      &-col-title {
        width: 100%;
        height: 23px;
        border-radius: 14px;
        border: 1px solid;
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
        }
        &-icon {
          height: 100%;
          width: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 14px 0 0 14px;
          margin-right: 8px;
        }

        &-1 {
          border-color: #24B286;
          .dcontent-body-col-title-icon {
            background-color: #24B286;
          }
        }
        &-2 {
          border-color: #FAC20A;
          .dcontent-body-col-title-icon {
            background-color: #FAC20A;
          }
        }
        &-3 {
          border-color: $devui-danger;
          .dcontent-body-col-title-icon {
            background-color: $devui-danger;
          }
        }
      }
    }
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    d-icon {
      cursor: pointer;
    }
  }

  .sub-title {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.content-body-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dfooter {
  border-radius: 8px;
  border: 1px solid #EEF0F5;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4px;
}

.side-panel {
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>