cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 许可证信息页面更新

Browse Source
This commit is contained in:
@user8949
2025-03-15 12:01:11 +08:00
parent 31fbe58902
commit 26d04feae8
5 changed files with 137 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/LicenseInfo/SidePanel.vue
View File

@@ -13,12 +13,19 @@
</div>
</d-header>
<d-content class="dcontent">
<div class="content-title"></div>
<div class="content-body">
<d-row>
<div class="dcontent-title">
<h1>许可证属性</h1>
</div>
<div class="dcontent-body">
<d-row :gutter="10">
<d-col :span="8">
<div class="content-body-col">
<span class="color-allow">允许的</span>
<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>
@@ -28,7 +35,12 @@
</d-col>
<d-col :span="8">
<div class="content-body-col">
<span class="color-info">必要的</span>
<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>
@@ -37,7 +49,12 @@
</d-col>
<d-col :span="8">
<div class="content-body-col">
<span class="color-danger">受限的</span>
<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>
@@ -73,25 +90,84 @@ const emit = defineEmits(['close']);
display: flex;
flex-direction: column;
align-items: start;
gap: 8px;
padding: 12px;
.dheader, .dcontent{
.dheader {
width: 100%;
border-bottom: 1px solid gray;
padding: 12px;
}
.dfooter {
.dcontent {
border-radius: 8px;
border: 1px solid #EEF0F5;
margin: 20px 0;
width: 100%;
padding: 12px;
&-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;
}
@@ -111,6 +187,10 @@ const emit = defineEmits(['close']);
}
.dfooter {
border-radius: 8px;
border: 1px solid #EEF0F5;
padding: 20px;
width: 100%;
display: flex;
flex-direction: column;
align-items: start;
@@ -118,20 +198,7 @@ const emit = defineEmits(['close']);
}
.side-panel {
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.color-danger {
color: $devui-danger;
}
.color-info {
color: $devui-warning;
}
.color-allow {
color: $devui-success;
}
</style>