|
|
@@ -25,13 +25,15 @@
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
<div class="more">
|
|
|
- <span style="padding-right: 5px; cursor: pointer" @click="handleMoreRedirect">更多</span>
|
|
|
- <img
|
|
|
+ <span class="more-text" @click="handleMoreRedirect">更多</span>
|
|
|
+ <el-icon class="more-icon" @click="handleMoreRedirect"><DArrowRight /></el-icon>
|
|
|
+
|
|
|
+ <!-- <img
|
|
|
style="cursor: pointer"
|
|
|
@click="handleMoreRedirect"
|
|
|
src="@/assets/images/security-confidientiality/overview-more.png"
|
|
|
alt=""
|
|
|
- />
|
|
|
+ /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -40,6 +42,8 @@
|
|
|
import { onUnmounted, ref, watch } from 'vue';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import type { RegulationItem } from '../types';
|
|
|
+ import { ElIcon } from 'element-plus';
|
|
|
+ import { DArrowRight } from '@element-plus/icons-vue';
|
|
|
import { getSecurityOverview, getConfidentialityOverview } from '@/api/security-confidentiality-overview';
|
|
|
|
|
|
const router = useRouter();
|
|
|
@@ -49,11 +53,15 @@
|
|
|
const confidentialityRegulationData = ref<RegulationItem[]>([]);
|
|
|
|
|
|
async function getSecurityRegulationData() {
|
|
|
- securityRegulationData.value = await getSecurityOverview();
|
|
|
+ const res = await getSecurityOverview();
|
|
|
+ if (!res) return [];
|
|
|
+ return res.length > 4 ? res.slice(0, 4) : res;
|
|
|
}
|
|
|
|
|
|
async function getConfidentialityRegulationData() {
|
|
|
- confidentialityRegulationData.value = await getConfidentialityOverview();
|
|
|
+ const res = await getConfidentialityOverview();
|
|
|
+ if (!res) return [];
|
|
|
+ return res.length > 4 ? res.slice(0, 4) : res;
|
|
|
}
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
@@ -62,11 +70,11 @@
|
|
|
|
|
|
watch(
|
|
|
() => activeName.value,
|
|
|
- (val) => {
|
|
|
+ async (val) => {
|
|
|
if (val === 'security') {
|
|
|
- getSecurityRegulationData();
|
|
|
+ securityRegulationData.value = await getSecurityRegulationData();
|
|
|
} else if (val === 'confidentiality') {
|
|
|
- getConfidentialityRegulationData();
|
|
|
+ confidentialityRegulationData.value = await getConfidentialityRegulationData();
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
@@ -141,17 +149,33 @@
|
|
|
.item-name {
|
|
|
max-width: calc(100% - 12px);
|
|
|
color: rgba($color: #000000, $alpha: 0.85);
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ .item-name:hover {
|
|
|
+ color: #1777ff;
|
|
|
+ }
|
|
|
.more {
|
|
|
- text-align: end;
|
|
|
- color: #007bff;
|
|
|
+ width: 50px;
|
|
|
font-size: 12px;
|
|
|
- padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ float: inline-end;
|
|
|
+ color: #007bff;
|
|
|
+ }
|
|
|
+ .more:hover {
|
|
|
+ color: #94c1ff;
|
|
|
+ }
|
|
|
+ .more-text {
|
|
|
+ cursor: pointer;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more-icon {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
:deep(.el-tabs__header) {
|