181 lines
4.3 KiB
Vue
181 lines
4.3 KiB
Vue
<template>
|
||
<d-layout class="dlayout">
|
||
<d-header class="dheader">
|
||
<div class="title">
|
||
<h1>openssl</h1>
|
||
<d-icon style="cursor: pointer" name="icon-close" @click="emit('close')"></d-icon>
|
||
</div>
|
||
<div class="sub-title">
|
||
<span>安全漏洞：</span>
|
||
<span class="val">3</span>
|
||
<span class="split"></span>
|
||
<span>许可证</span>
|
||
<d-tag color="#3ac295" size="sm" class="ml-2">获准的</d-tag>
|
||
</div>
|
||
</d-header>
|
||
<div class="card-box">
|
||
<div class="card-body">
|
||
<d-row :gutter="10">
|
||
<d-col :span="24" class="flex">
|
||
<label style="flex: 0.2">简介</label>
|
||
<p>request</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="24" class="flex">
|
||
<label style="flex: 0.2">关联漏洞编号</label>
|
||
<p>CNVD-201105-215</p>
|
||
</d-col>
|
||
</d-row>
|
||
</div>
|
||
</div>
|
||
<div class="card-box">
|
||
<div class="card-header">组件详情</div>
|
||
<div class="card-body">
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>当前版本</label>
|
||
<p>2.0</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>最新版本</label>
|
||
<p>3.0</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>深度</label>
|
||
<p>1</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>供应商</label>
|
||
<p>-</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>包管理器平台</label>
|
||
<p>NOT_SPECIFIED</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>范围</label>
|
||
<p>-</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>程序语言</label>
|
||
<p>cpp</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>活跃度</label>
|
||
<p>-</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>下载量</label>
|
||
<p>-</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>识别方法</label>
|
||
<p>BOM定义文件</p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>匹配度</label>
|
||
<p>100%</p>
|
||
</d-col>
|
||
<d-col :span="12" class="flex">
|
||
<label>生命周期终点/服务终止</label>
|
||
<p><d-tag type="danger" size="sm">已停止维护</d-tag></p>
|
||
</d-col>
|
||
</d-row>
|
||
<d-row :gutter="10">
|
||
<d-col :span="12" class="flex">
|
||
<label>组件依赖关系</label>
|
||
<p>openssl</p>
|
||
</d-col>
|
||
</d-row>
|
||
</div>
|
||
</div>
|
||
</d-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, defineEmits } from 'vue';
|
||
|
||
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%;
|
||
}
|
||
|
||
.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: 2px;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
margin-top: 6px;
|
||
color: #808080;
|
||
.val {
|
||
color: var(--devui-text);
|
||
}
|
||
.split {
|
||
width: 1px;
|
||
height: 14px;
|
||
background-color: #ddd;
|
||
}
|
||
}
|
||
|
||
.card-box {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
border: 1px solid #eef0f5;
|
||
font-size: 14px;
|
||
margin-top: 15px;
|
||
.card-header {
|
||
padding: 10px 16px;
|
||
background-color: #f5f5f5;
|
||
border-bottom: 1px solid #eef0f5;
|
||
font-weight: bold;
|
||
}
|
||
.card-body {
|
||
margin: 10px 16px;
|
||
.flex {
|
||
margin: 10px 0;
|
||
label,
|
||
p {
|
||
flex: 1;
|
||
}
|
||
label {
|
||
color: #595959;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|