态势感知平台-增加武汉市开源建设生态页面展示
This commit is contained in:
fmk1023
@@ -0,0 +1,606 @@
|
||||
<template>
|
||||
<div class="chat-sidebar">
|
||||
<div class="top-section">
|
||||
<div class="new-chat-btn" @click="handleNewChat">
|
||||
<div class="btn-content">
|
||||
<d-icon name="icon-edit" size="16px"></d-icon>
|
||||
<span class="btn-text">新对话</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-container">
|
||||
|
||||
<div class="menu-section">
|
||||
<div
|
||||
v-for="menu in menuList"
|
||||
:key="menu.id"
|
||||
class="menu-item"
|
||||
@click="handleMenuClick(menu)"
|
||||
>
|
||||
<d-icon :name="menu.icon" size="16px" class="menu-icon"></d-icon>
|
||||
<span class="menu-text">{{ menu.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="search-section">
|
||||
<d-search icon-position="left" style="width: 100%" placeholder="搜索历史对话" v-model="searchText" @change="loadData" @search="loadData"></d-search>
|
||||
</div>
|
||||
|
||||
<div class="history-section">
|
||||
<div class="section-title">历史对话</div>
|
||||
|
||||
<div v-if="dhlsList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in dhlsList"
|
||||
:key="item.conversationId"
|
||||
:class="['history-item', { 'active': props.CONV_ID === item.conversationId }]"
|
||||
@click="handleSelect(item)"
|
||||
@mouseenter="hoverIndex = index"
|
||||
@mouseleave="hoverIndex = null"
|
||||
>
|
||||
<template v-if="item.isEditing">
|
||||
<d-input
|
||||
v-model="item.tempTitle"
|
||||
autofocus
|
||||
class="edit-input"
|
||||
@keypress.enter="confirmEdit(item)"
|
||||
@blur="cancelEdit(item)"
|
||||
/>
|
||||
<div class="edit-actions">
|
||||
<d-icon name="icon-right" class="action-icon success" @click.stop="confirmEdit(item)"/>
|
||||
<d-icon name="icon-error" class="action-icon danger" @click.stop="cancelEdit(item)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<d-icon name="icon-message" size="16px" class="item-icon"></d-icon>
|
||||
|
||||
<div class="item-content" @dblclick="startEdit(item)">
|
||||
<span class="item-title text-ellipsis">{{ item.title || '新对话' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<d-icon v-if="item.is_collected" name="icon-star-o" size="14px" class="pin-icon" style="color: #f7ba2a;"></d-icon>
|
||||
|
||||
<d-icon v-if="item.isPinned" name="icon-pin-fill" size="14px" class="pin-icon"></d-icon>
|
||||
|
||||
<div class="hover-actions" v-show="hoverIndex === index">
|
||||
<d-dropdown trigger="click" :close-on-click="true" align="start">
|
||||
<d-icon name="icon-more-operate" size="16px" class="more-btn"></d-icon>
|
||||
<template #menu>
|
||||
<ul class="dropdown-menu">
|
||||
<li @click.stop="handlePin(item)">
|
||||
{{ item.isPinned ? '取消置顶' : '置顶' }}
|
||||
</li>
|
||||
<li @click.stop="toggleCollect(item)">
|
||||
{{ item.is_collected ? '取消收藏' : '收藏' }}
|
||||
</li>
|
||||
<li @click.stop="startEdit(item)">重命名</li>
|
||||
<li @click.stop="handleDelete([item.conversationId])" class="danger">删除</li>
|
||||
</ul>
|
||||
</template>
|
||||
</d-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-state">
|
||||
暂无历史对话
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-section">
|
||||
<div class="bottom-controls">
|
||||
<div class="limit-select">
|
||||
<span>保存条数</span>
|
||||
<d-select
|
||||
v-model="historyLimit"
|
||||
size="sm"
|
||||
class="mini-select"
|
||||
@value-change="handleHistoryLimitChange"
|
||||
>
|
||||
<d-option value="10">10</d-option>
|
||||
<d-option value="20">20</d-option>
|
||||
<d-option value="30">30</d-option>
|
||||
<d-option value="0">不限</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
<div class="batch-btn" @click="openBatchManageModal">
|
||||
<d-icon name="icon-property-setting"></d-icon>
|
||||
<span>批量管理</span>
|
||||
</div>
|
||||
</div>
|
||||
<BatchManageModal :username="props.username" @loadData="loadData" ref="BatchManageModalRef"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, defineEmits, defineExpose, defineProps } from 'vue';
|
||||
import BatchManageModal from './BatchManageModal.vue';
|
||||
import { Message } from 'vue-devui/message';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
import {
|
||||
fetchChangeConversationTitle,
|
||||
fetchConversationList,
|
||||
fetchDeleteConversation,
|
||||
fetchToggleConversationCollect
|
||||
} from '@/api/jyh';
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
// --- Props & Emits ---
|
||||
const props = defineProps(['username', 'CONV_ID']);
|
||||
const emit = defineEmits(['select-conv','onNewConvo']);
|
||||
|
||||
// --- State ---
|
||||
const searchText = ref('');
|
||||
const historyLimit = ref('30');
|
||||
const hoverIndex = ref(null);
|
||||
const BatchManageModalRef = ref(null);
|
||||
const dhlsList = ref([]); // 历史对话列表
|
||||
const page = ref({
|
||||
pageNum: 1,
|
||||
size: 30 // 默认 30，与 historyLimit 对应
|
||||
});
|
||||
|
||||
// 静态菜单数据
|
||||
const menuList = [
|
||||
{ id: 'write', title: 'SBOM分析', icon: 'icon-accelerations' },
|
||||
{ id: 'create', title: '许可证合规检测', icon: 'icon-add-example' },
|
||||
{ id: 'app', title: '供应链安全检测', icon: 'icon-branch-merge-o' },
|
||||
{ id: 'cloud', title: '代码安全审计', icon: 'icon-add-token' },
|
||||
{ id: 'more', title: '漏洞智能修复', icon: 'icon-assembly-new' },
|
||||
];
|
||||
|
||||
const { formatTime } = useTimeFormat();
|
||||
|
||||
// --- Methods ---
|
||||
|
||||
// 1. 加载数据
|
||||
const loadData = async () => {
|
||||
await getQuestionHistory();
|
||||
};
|
||||
|
||||
const getQuestionHistory = async () => {
|
||||
if (props.username) {
|
||||
const { data } = await fetchConversationList({
|
||||
"userId": props.username,
|
||||
"list_type": "history", // 或者根据需求调整，例如同时获取收藏
|
||||
"is_manage": false,
|
||||
"page": page.value.pageNum,
|
||||
"size": page.value.size,
|
||||
"search": searchText.value
|
||||
});
|
||||
if (data.code === 200) {
|
||||
// 处理数据，补充前端状态字段
|
||||
dhlsList.value = data.data.map(item => ({
|
||||
...item,
|
||||
isEditing: false,
|
||||
tempTitle: '',
|
||||
isPinned: item.isPinned || false // 如果后端有置顶字段则使用，否则默认 false
|
||||
}));
|
||||
} else {
|
||||
// Message.error(data.msg || '接口异常！');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 2. 新建对话
|
||||
const handleNewChat = () => {
|
||||
emit('select-conv', null);
|
||||
emit('onNewConvo', null);
|
||||
};
|
||||
|
||||
// 3. 选中对话
|
||||
const handleSelect = (item) => {
|
||||
if (item.isEditing) return; // 编辑中不触发选中
|
||||
emit('select-conv', item.conversationId);
|
||||
};
|
||||
const router = useRouter();
|
||||
// 4. 菜单点击 - 修改为跳转逻辑
|
||||
const handleMenuClick = (menu) => {
|
||||
console.log('点击菜单:', menu.title);
|
||||
|
||||
// 使用 router.push 跳转，并通过 query 传递参数
|
||||
router.push({
|
||||
path: '/model-chat', // 对应路由中的 path
|
||||
query: {
|
||||
id: menu.id,
|
||||
title: menu.title
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 5. 编辑/重命名逻辑
|
||||
const startEdit = (item) => {
|
||||
item.isEditing = true;
|
||||
item.tempTitle = item.title;
|
||||
};
|
||||
|
||||
const confirmEdit = async (item) => {
|
||||
if (!item.tempTitle.trim()) {
|
||||
Message.error('标题不能为空');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetchChangeConversationTitle({
|
||||
conversationId: item.conversationId,
|
||||
newTitle: item.tempTitle,
|
||||
userId: props.username,
|
||||
});
|
||||
|
||||
if (res.data.code === 200 || res.data.code === 20001 || res.data.code === 20000) {
|
||||
item.title = item.tempTitle;
|
||||
item.isEditing = false;
|
||||
Message.success('标题修改成功');
|
||||
} else {
|
||||
Message.error(res.data.msg || '修改失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('编辑失败:', error);
|
||||
item.tempTitle = item.title;
|
||||
item.isEditing = false;
|
||||
}
|
||||
};
|
||||
|
||||
const cancelEdit = (item) => {
|
||||
item.isEditing = false;
|
||||
item.tempTitle = item.title;
|
||||
};
|
||||
|
||||
// 6. 收藏逻辑
|
||||
const toggleCollect = async (item) => {
|
||||
if (!props.username) {
|
||||
return Message.error('请先登录');
|
||||
}
|
||||
try {
|
||||
const res = await fetchToggleConversationCollect({
|
||||
userId: props.username,
|
||||
conversationIdList: [item.conversationId]
|
||||
});
|
||||
|
||||
if (res.data.code === 200 || res.data.code === 20000) {
|
||||
await loadData(); // 重新加载以更新状态
|
||||
Message.success(res.data.msg || '操作成功');
|
||||
} else {
|
||||
Message.error(res.data.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('收藏操作失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 7. 删除逻辑
|
||||
const handleDelete = async (conversationIds) => {
|
||||
if (!props.username) {
|
||||
return Message.error('请先登录');
|
||||
}
|
||||
try {
|
||||
const res = await fetchDeleteConversation({
|
||||
userId: props.username,
|
||||
conversationIdList: conversationIds
|
||||
}
|
||||
);
|
||||
|
||||
if (res.data.code === 200 || res.data.code === 20000) {
|
||||
Message.success(res.data.message || '删除成功');
|
||||
loadData();
|
||||
} else {
|
||||
Message.error(res.data.msg || '删除对话失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除对话失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 8. 置顶逻辑 (前端模拟)
|
||||
const handlePin = (item) => {
|
||||
item.isPinned = !item.isPinned;
|
||||
// 本地排序：置顶的排前面
|
||||
dhlsList.value.sort((a, b) => (b.isPinned ? 1 : 0) - (a.isPinned ? 1 : 0));
|
||||
// 如果有后端置顶接口，请在这里调用
|
||||
};
|
||||
|
||||
// 9. 批量管理 & 分页条数
|
||||
const openBatchManageModal = () => {
|
||||
if (BatchManageModalRef.value) {
|
||||
BatchManageModalRef.value.openModal();
|
||||
}
|
||||
};
|
||||
|
||||
const handleHistoryLimitChange = (val) => {
|
||||
page.value.size = Number(val) || 10000; // 0 为不限
|
||||
page.value.pageNum = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// --- Lifecycle ---
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
getQuestionHistory,
|
||||
loadData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 容器样式：固定宽度，高度适配 */
|
||||
.chat-sidebar {
|
||||
width: 260px;
|
||||
height: 85vh; /* 或 100% */
|
||||
background-color: #f7f8fa; /* 浅灰背景 */
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #333;
|
||||
position: fixed; /* 保持原来的固定定位 */
|
||||
top: 64px;
|
||||
left: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 1. 顶部：新对话按钮 */
|
||||
.top-section {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #eef4ff; /* 浅蓝背景 */
|
||||
color: #2563eb; /* 蓝色文字 */
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2. 中间滚动区域 */
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条但保持功能 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能菜单 */
|
||||
.menu-section {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #4b5563;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 10px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
margin: 8px 4px;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-section {
|
||||
padding: 0 4px 8px 4px;
|
||||
}
|
||||
|
||||
/* 历史对话列表 */
|
||||
.history-section {
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background-color 0.2s;
|
||||
height: 40px; /* 固定高度 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e5e7eb;
|
||||
|
||||
.item-actions .pin-icon {
|
||||
display: none; /* 悬停时隐藏置顶/收藏图标，显示更多操作 */
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e5e7eb; /* 选中态背景 */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
margin-right: 10px;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 20px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.hover-actions {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #e5e7eb;
|
||||
padding-left: 4px;
|
||||
|
||||
.more-btn {
|
||||
color: #6b7280;
|
||||
&:hover { color: #374151; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 编辑框样式 */
|
||||
.edit-input {
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 4px;
|
||||
.action-icon {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
&.success { color: #50d4ab; }
|
||||
&.danger { color: #f66f6a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 3. 底部区域：批量管理等 */
|
||||
.bottom-section {
|
||||
flex-shrink: 0;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.bottom-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding: 0 4px;
|
||||
|
||||
.limit-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
:deep(.devui-select) {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
&:hover { color: #2563eb; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 下拉菜单样式 */
|
||||
.dropdown-menu {
|
||||
list-style: none;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
min-width: 100px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
|
||||
li {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
|
||||
&:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
src/views/Jyh/Community/StatsBar.vue
Normal file
137
src/views/Jyh/Community/StatsBar.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="stats-glass-bar">
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">150+</span>
|
||||
<span class="stat-desc">开源企业</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">12</span>
|
||||
<span class="stat-desc">武汉开源社区数量</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">70W+</span>
|
||||
<span class="stat-desc">武汉开源开发者数量</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">500+</span>
|
||||
<span class="stat-desc">武汉开源项目数量</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "StatsBar"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stats-glass-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 布局控制：撑满容器并增加内边距 */
|
||||
width: 100%;
|
||||
padding: 2rem 4rem;
|
||||
//margin: 2rem 0;
|
||||
|
||||
/* 深色玻璃拟态背景 */
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
|
||||
/* 极细微的边框勾勒 */
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* 外阴影与内发光，增加悬浮感 */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.02);
|
||||
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(56, 189, 248, 0.4);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
.stat-value {
|
||||
text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
/* 科技感亮蓝渐变 */
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
/* 基础发光效果 */
|
||||
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
/* 在黑底上使用半透明白色，更有高级感 */
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-separator {
|
||||
/* 渐隐分割线 */
|
||||
width: 1px;
|
||||
height: 3rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-glass-bar {
|
||||
padding: 2rem;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-glass-bar {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
.stat-separator {
|
||||
width: 50%;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1483
src/views/Jyh/Community/index.vue
Normal file
1483
src/views/Jyh/Community/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
1408
src/views/Jyh/Community/indexOld.vue
Normal file
1408
src/views/Jyh/Community/indexOld.vue
Normal file
File diff suppressed because it is too large
Load Diff
236
src/views/Jyh/Dashboard/Header.vue
Normal file
236
src/views/Jyh/Dashboard/Header.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<button class="logo-btn" aria-label="Home">
|
||||
<a aria-current="page" href="/" class="router-link-active router-link-exact-active logo">
|
||||
<img src="@/assets/imgs/logo3.png" alt="Tcode">
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="agent-text"><router-link to="/ai/home">金银湖大模型</router-link></div>
|
||||
|
||||
<button class="user-avatar-btn" @click="toggleDropdown" aria-label="User Account">
|
||||
用
|
||||
</button>
|
||||
|
||||
<transition name="dropdown">
|
||||
<div v-if="isDropdownOpen" class="user-dropdown-menu">
|
||||
<div class="dropdown-header">
|
||||
<div class="user-name">用户名</div>
|
||||
<div class="user-email">123456@gmail.com</div>
|
||||
</div>
|
||||
<hr class="dropdown-divider">
|
||||
|
||||
<a href="#" class="dropdown-item download-link">
|
||||
下载适用于 Windows 的版本
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
|
||||
<button @click="logout" class="dropdown-item logout-btn">
|
||||
退出登录
|
||||
<span class="logout-icon">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import {toLogout} from "@/api/user";
|
||||
import {reqCatch} from "@/utils/catch";
|
||||
import {devLogout} from "@/api/org/devIndex";
|
||||
import {useAccount} from "@/utils/hooks/useAccount";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
// 控制下拉菜单的显示/隐藏状态
|
||||
const isDropdownOpen = ref(false);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isDropdownOpen.value = !isDropdownOpen.value;
|
||||
};
|
||||
|
||||
// 点击外部关闭下拉菜单的逻辑
|
||||
const closeDropdown = (event) => {
|
||||
// 检查点击事件是否发生在下拉菜单或其触发按钮之外
|
||||
const header = document.querySelector('.app-header');
|
||||
if (header && !header.contains(event.target)) {
|
||||
isDropdownOpen.value = false;
|
||||
}
|
||||
};
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { accountInfo, RemoveInfo } = useAccount();
|
||||
const logout = async () => {
|
||||
RemoveInfo(); // 目前先强制清除用户信息，后面接口通了再调
|
||||
const res = await toLogout();
|
||||
await reqCatch(devLogout, {}); // 清除社区登录
|
||||
if (!res.error) {
|
||||
RemoveInfo();
|
||||
router.push('/');
|
||||
}
|
||||
// 退出系统刷新页面
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', closeDropdown);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', closeDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 56px; /* 常见 Header 高度 */
|
||||
padding: 0 16px;
|
||||
background-color: rgb(20, 18, 11);
|
||||
color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* ------------------- 左侧 Logo ------------------- */
|
||||
.logo-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo-btn svg circle {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/* ------------------- 右侧区域 ------------------- */
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative; /* 用于定位下拉菜单 */
|
||||
}
|
||||
|
||||
.agent-text {
|
||||
font-size: 14px;
|
||||
margin-right: 12px;
|
||||
color: #ccc; /* 略微浅灰色 */
|
||||
}
|
||||
|
||||
/* 用户头像/首字母按钮 */
|
||||
.user-avatar-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #333; /* 头像背景色 */
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
border: 1px solid #666; /* 模仿图片的圆形边框 */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ------------------- 下拉菜单样式 ------------------- */
|
||||
.user-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 48px; /* 位于 header 底部下方 */
|
||||
right: 0;
|
||||
min-width: 250px;
|
||||
background-color: #2b2b2b; /* 下拉菜单背景色 */
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
padding: 8px 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/* 头部信息 (姓名和邮箱) */
|
||||
.dropdown-header {
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.dropdown-divider {
|
||||
border: none;
|
||||
border-top: 1px solid #3c3c3c;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* 菜单项基础样式 (链接和按钮) */
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #3c3c3c; /* 悬停背景色 */
|
||||
}
|
||||
|
||||
/* 下载链接样式 */
|
||||
.download-link {
|
||||
color: #58a6ff; /* 蓝色突出 */
|
||||
}
|
||||
|
||||
/* 退出登录样式 */
|
||||
.logout-btn {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Vue 过渡动画 */
|
||||
.dropdown-enter-active, .dropdown-leave-active {
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
.dropdown-enter-from, .dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 86px
|
||||
}
|
||||
</style>
|
||||
260
src/views/Jyh/Dashboard/Integration.vue
Normal file
260
src/views/Jyh/Dashboard/Integration.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="integration-container">
|
||||
|
||||
<div class="header">集成</div>
|
||||
|
||||
<div class="integration-list">
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon github-icon">
|
||||
<svg viewBox="0 0 16 16" width="24" height="24" fill="#EAEAEA"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitHub</div>
|
||||
<div class="inte-desc">连接 GitHub 以获取云代理、Bugbot和增强的代码库上下文</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon gitlab-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitLab</div>
|
||||
<div class="inte-desc">连接 GitLab 以用于云代理、Bugbot和增强的代码库上下文</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon slack-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">松弛</div>
|
||||
<div class="inte-desc">通过 Slack 与云代理协作</div>
|
||||
</div>
|
||||
<d-button class="connect-btn disabled-btn" disabled>连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon linear-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">线性</div>
|
||||
<div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="api-section">
|
||||
<div class="api-header">用户 API 密钥</div>
|
||||
<p class="api-description">
|
||||
用户 API 密钥提供对您的 **金银湖大模型 账户**的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card">
|
||||
<div class="api-status">
|
||||
<div class="status-icon">🔑</div>
|
||||
<div class="status-text">
|
||||
<div class="status-title">暂无 API 密钥</div>
|
||||
<div class="status-subtitle">尚未创建任何 API 密钥</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="new-key-btn">
|
||||
<i class="d-icon d-icon-add"></i> + 新 API 密钥
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</d-content >
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 静态页面，无需特殊逻辑
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 定义核心暗色变量 */
|
||||
$bg-primary: #1e1e1e;
|
||||
$bg-secondary: #141414;
|
||||
$text-primary: #eaeaea;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$highlight-blue: #4a90e2; // 链接颜色
|
||||
$highlight-yellow: #f5a623; // 黄色提示
|
||||
|
||||
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
//overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.integration-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.integration-container {
|
||||
//max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* --- 集成列表样式 --- */
|
||||
.integration-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.integration-item {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.inte-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inte-info {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.inte-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.inte-desc {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $text-secondary !important;
|
||||
border-color: $border-color !important;
|
||||
background: transparent !important;
|
||||
|
||||
&:hover {
|
||||
border-color: #555555 !important;
|
||||
}
|
||||
|
||||
.d-icon-link-external {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-btn {
|
||||
/* 模拟松弛的灰色禁用按钮 */
|
||||
background-color: #2b2b2b !important;
|
||||
color: #666666 !important;
|
||||
border: 1px solid #444444 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
/* --- API 密钥部分样式 --- */
|
||||
.api-header {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.api-description {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.highlight-text {
|
||||
color: $highlight-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.api-card {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.api-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.status-subtitle {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.new-key-btn {
|
||||
background-color: $highlight-blue !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($highlight-blue, 5%) !important;
|
||||
}
|
||||
|
||||
.d-icon-add {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
258
src/views/Jyh/Dashboard/billing.vue
Normal file
258
src/views/Jyh/Dashboard/billing.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="billing-container">
|
||||
|
||||
<div class="billing-header">
|
||||
<span class="main-title">账单和发票</span>
|
||||
<d-button class="manage-subscription-btn" variant="outline">
|
||||
管理订阅 <i class="d-icon d-icon-link-external"></i>
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
<div class="section-card on-demand-section">
|
||||
|
||||
<div class="card-header">
|
||||
<span class="card-title">按需使用</span>
|
||||
<div class="cycle-selector">
|
||||
<span class="cycle-text">Cycle Starting 2025年12月2日</span>
|
||||
<i class="d-icon d-icon-arrow-down-filling"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-area">
|
||||
<div class="cycle-period">2025年12月2日 - 2026年1月2日</div>
|
||||
<div class="total-amount">0.00 <span class="currency">美元</span></div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<span class="col-type">类型</span>
|
||||
<span class="col-token">代币</span>
|
||||
<span class="col-cost">成本</span>
|
||||
<span class="col-quantity">数量</span>
|
||||
<span class="col-total">全部的</span>
|
||||
</div>
|
||||
|
||||
<div class="subtotal-row">
|
||||
<span class="subtotal-label">小计:</span>
|
||||
<span class="subtotal-value">0.00 <span class="currency">美元</span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="invoices-section">
|
||||
<div class="section-title">发票</div>
|
||||
<p class="invoice-status">
|
||||
未找到发票。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg-primary: #1e1e1e; // 卡片/区块背景
|
||||
$bg-secondary: #141414; // 页面背景
|
||||
$text-primary: #eaeaea; // 主要文本色
|
||||
$text-secondary: #aaaaaa; // 次要文本色，如日期
|
||||
$text-light-gray: #c9c9c9; // 浅灰色文本，如表格头部
|
||||
$border-color: #333333; // 分隔线颜色
|
||||
|
||||
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
//overflow-y: auto;
|
||||
}
|
||||
|
||||
.billing-container {
|
||||
//max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 头部样式 --- */
|
||||
.billing-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.main-title {
|
||||
font-size: 20px; /* 标题字体略小，与图片匹配 */
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.manage-subscription-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $text-secondary !important;
|
||||
border-color: $border-color !important;
|
||||
background: transparent !important;
|
||||
|
||||
.d-icon-link-external {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 按需使用卡片 --- */
|
||||
.section-card {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.on-demand-section {
|
||||
padding-bottom: 0; /* 小计行在卡片内部，所以不需要底部额外内边距 */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-secondary;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
// 模拟深色下拉菜单样式
|
||||
&:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.d-icon-arrow-down-filling {
|
||||
margin-left: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-area {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cycle-period {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: $text-primary;
|
||||
|
||||
.currency {
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* --- 表格样式 (使用 Flex/Grid 模拟) --- */
|
||||
.table-header {
|
||||
display: flex;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $text-light-gray; /* 浅灰色字体 */
|
||||
}
|
||||
|
||||
.col-type {
|
||||
flex: 3; /* 类型占比较大 */
|
||||
}
|
||||
.col-token {
|
||||
flex: 2;
|
||||
}
|
||||
.col-cost {
|
||||
flex: 2;
|
||||
}
|
||||
.col-quantity {
|
||||
flex: 2;
|
||||
}
|
||||
.col-total {
|
||||
flex: 1; /* 总计靠右对齐，占位较小 */
|
||||
text-align: right;
|
||||
padding-right: 24px; // 留出空间给小计的右侧对齐
|
||||
}
|
||||
|
||||
/* --- 小计行 --- */
|
||||
.subtotal-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* 将小计行整体靠右 */
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid $border-color;
|
||||
background-color: #242424; /* 模拟小计行的背景颜色比卡片背景稍亮 */
|
||||
margin-top: 1px; /* 避免表格与小计行的边框重叠 */
|
||||
|
||||
// 确保小计行和卡片圆角自然衔接
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
|
||||
// 调整外边距以覆盖卡片本身的内边距
|
||||
margin: 0 -24px;
|
||||
padding-right: 24px; // 保持右侧对齐的内边距
|
||||
}
|
||||
|
||||
.subtotal-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin-right: 40px; /* 标签与值的间距 */
|
||||
}
|
||||
|
||||
.subtotal-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
width: 10%; /* 保证与表格最后一列宽度大致对齐 */
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
|
||||
.currency {
|
||||
font-weight: 400;
|
||||
color: $text-secondary;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 发票部分 --- */
|
||||
.invoices-section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.invoice-status {
|
||||
font-size: 14px;
|
||||
color: $text-secondary; /* 浅绿色文字 */
|
||||
}
|
||||
|
||||
</style>
|
||||
102
src/views/Jyh/Dashboard/expense.vue
Normal file
102
src/views/Jyh/Dashboard/expense.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="page-container">
|
||||
|
||||
<h2 class="title">按需使用</h2>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="card-content">
|
||||
<div class="text-area">
|
||||
<h3 class="card-title">按需使用</h3>
|
||||
<p class="card-description">启用按需使用功能，即可超出套餐包含的流量，此功能需要付费套餐。</p>
|
||||
</div>
|
||||
|
||||
<button class="upgrade-button">
|
||||
升级到专业版
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
|
||||
|
||||
.page-container {
|
||||
/* 使用深色背景，模拟图片中的深黑/灰色 */
|
||||
/*background-color: #1c1c1c;*/
|
||||
min-height: 100vh; /* 保证至少覆盖整个视口高度 */
|
||||
/*padding: 20px 40px; !* 内部留白 *!*/
|
||||
color: #ffffff; /* 默认文本颜色为白色 */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px; /* 标题与内容卡片的间距 */
|
||||
color: #f0f0f0; /* 略微亮一点的白色 */
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex; /* 启用 Flex 布局 */
|
||||
justify-content: space-between;
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
}
|
||||
|
||||
.text-area {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: #c7a2e8;
|
||||
}
|
||||
|
||||
.upgrade-button {
|
||||
/* 按钮的通用样式 */
|
||||
background-color: transparent; /* 背景透明 */
|
||||
color: #f0f0f0; /* 按钮文字颜色 */
|
||||
border: 1px solid #7c7c7c; /* 浅灰色边框，模拟图片中的效果 */
|
||||
border-radius: 20px; /* 较大的圆角，看起来像药丸形状 */
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
/* 保持按钮宽度不随内容变化 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.upgrade-button:hover {
|
||||
background-color: #3b3b3b;
|
||||
border-color: #a0a0a0;
|
||||
}
|
||||
</style>
|
||||
310
src/views/Jyh/Dashboard/index.vue
Normal file
310
src/views/Jyh/Dashboard/index.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<d-header class="dheader">
|
||||
<Header />
|
||||
</d-header>
|
||||
<d-layout class="main-layout">
|
||||
<d-aside class="sidebar">
|
||||
<div class="user-profile">
|
||||
<div class="avatar-area">
|
||||
<span class="username">用户名</span>
|
||||
<d-icon name="edit" size="14px" color="#666" />
|
||||
</div>
|
||||
<div class="user-email">免费计划 · 123456@gmail.com</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'overview' }"
|
||||
@click="activeMenu = 'overview'"
|
||||
>
|
||||
<i class="icon-end-new"></i> 概述
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'setting' }"
|
||||
@click="activeMenu = 'setting'"
|
||||
>
|
||||
<i class="icon-setting"></i> 设置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'integration' }"
|
||||
@click="activeMenu = 'integration'"
|
||||
>
|
||||
<i class="icon-assembly-new"></i> 集成
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'proxy' }"
|
||||
@click="activeMenu = 'proxy'"
|
||||
>
|
||||
<i class="icon-cloud"></i> 云代理
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="spacer"></div>-->
|
||||
|
||||
<div class="nav-menu bottom-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'usage' }"
|
||||
@click="activeMenu = 'usage'"
|
||||
>
|
||||
<i class="icon-chart"></i> 用法
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'expense' }"
|
||||
@click="activeMenu = 'expense'"
|
||||
>
|
||||
<i class="icon-time"></i> 开支
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'billing' }"
|
||||
@click="activeMenu = 'billing'"
|
||||
>
|
||||
<i class="icon-remove-member"></i> 账单和发票
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'docs' }"
|
||||
@click="activeMenu = 'docs'"
|
||||
>
|
||||
<i class="icon-doc"></i> 文档
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'contact' }"
|
||||
@click="activeMenu = 'contact'"
|
||||
>
|
||||
<i class="icon-mail"></i> 联系我们
|
||||
</div>
|
||||
</div>
|
||||
</d-aside>
|
||||
|
||||
<!-- 动态内容区域 -->
|
||||
<component :is="currentComponent" />
|
||||
|
||||
</d-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import OverView from './overview/index.vue';
|
||||
import Setting from './setting/index.vue';
|
||||
import Integration from './Integration.vue';
|
||||
import Proxy from './proxy.vue';
|
||||
import Usage from './usage.vue';
|
||||
import Expense from './expense.vue';
|
||||
import Billing from './billing.vue';
|
||||
import Header from './Header.vue';
|
||||
|
||||
// 定义菜单映射关系
|
||||
const menuComponents = {
|
||||
overview: OverView,
|
||||
setting: Setting,
|
||||
integration: Integration,
|
||||
proxy: Proxy,
|
||||
usage: Usage,
|
||||
expense: Expense,
|
||||
billing: Billing,
|
||||
};
|
||||
|
||||
// 选中的菜单
|
||||
const activeMenu = ref('overview');
|
||||
|
||||
// 根据选中的菜单获取当前组件
|
||||
const currentComponent = computed(() => {
|
||||
return menuComponents[activeMenu.value] || OverView;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 全局暗黑重置 */
|
||||
.app-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: rgb(20, 18, 11);
|
||||
color: #fff;
|
||||
//min-height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
min-height: calc(100% - 56px);
|
||||
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
max-width: 1344px;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: rgb(20, 18, 11);
|
||||
width: 260px;
|
||||
border-right: 1px solid #252525;
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
margin-bottom: 24px;
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
.user-email {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #252525;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #252525;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
/* 简单的 CSS 图标模拟 */
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 不同图标的特殊样式 */
|
||||
.icon-overview {
|
||||
border-radius: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.icon-setting {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-cube {
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.icon-cloud {
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.icon-chart {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-time {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bill {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.icon-doc {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-mail {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
width: 60%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #252525;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
92
src/views/Jyh/Dashboard/overview/InviteMemberModal.vue
Normal file
92
src/views/Jyh/Dashboard/overview/InviteMemberModal.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<d-modal
|
||||
:modelValue="visible"
|
||||
title="邀请团队成员"
|
||||
:close-on-click-overlay="true"
|
||||
:show-close="true"
|
||||
@close="$emit('update:visible', false)"
|
||||
class="TeamSetupModal"
|
||||
>
|
||||
<div class="invite-member-content">
|
||||
|
||||
<div class="form-group">
|
||||
<label>输入成员的邮箱</label>
|
||||
<input type="email" placeholder="member@example.com" v-model="inviteEmail">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-actions-footer">
|
||||
<button class="primary-btn" @click="sendInvite">邀请</button>
|
||||
</div>
|
||||
</template>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['update:visible', 'invite-sent']);
|
||||
const inviteEmail = ref('');
|
||||
|
||||
const sendInvite = () => {
|
||||
if (inviteEmail.value) {
|
||||
alert(`邀请已发送给: ${inviteEmail.value}`);
|
||||
emit('invite-sent', inviteEmail.value);
|
||||
emit('update:visible', false); // 关闭模态框
|
||||
} else {
|
||||
alert('请输入有效的邮箱地址');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #2b2b2b;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮排版，使用 footer 插槽需要自定义样式 */
|
||||
.modal-actions-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%; /* 使按钮占满宽度 */
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
254
src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
Normal file
254
src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<d-modal
|
||||
class="TeamSetupModal"
|
||||
:modelValue="visible"
|
||||
title="组建团队"
|
||||
:close-on-click-overlay="true"
|
||||
:show-close="true"
|
||||
@close="$emit('update:visible', false)"
|
||||
>
|
||||
<div class="team-setup-content">
|
||||
|
||||
<div class="form-group">
|
||||
<label>您当前登录身份为:</label>
|
||||
<input type="text" :value="userEmail" disabled class="disabled-input">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>团队名称</label>
|
||||
<input type="text" placeholder="请输入您的团队名称">
|
||||
</div>
|
||||
|
||||
<div class="form-group seats-group">
|
||||
<label>你们需要多少个座位?</label>
|
||||
<div class="seat-controls">
|
||||
<button @click="adjustSeats(-1)" :disabled="seats === 2">-</button>
|
||||
<span>{{ seats }}</span>
|
||||
<button @click="adjustSeats(1)">+</button>
|
||||
<span class="seat-note">至少需要 2 个座位</span>
|
||||
</div>
|
||||
<p class="small-text">您可以根据需要稍后添加更多团队成员。</p>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" v-model="agreeToTerms">
|
||||
我的团队的代码和使用数据将用于改进 金银湖大模型。
|
||||
</label>
|
||||
<span class="link-text">改变</span>
|
||||
</div>
|
||||
|
||||
<div class="plan-info">
|
||||
团队计划 ({{ seats }}个席位) <span>每月{{ seats * 40 }}美元</span>
|
||||
</div>
|
||||
|
||||
<div class="annual-billing">
|
||||
年度结算
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" id="annual" v-model="annualBilling">
|
||||
<label for="annual"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-actions-footer">
|
||||
<button class="primary-btn" @click="$emit('create-team'); $emit('update:visible', false);">创建团队</button>
|
||||
<button class="secondary-btn">使用其他帐户登录</button>
|
||||
</div>
|
||||
</template>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
// 假设 DevUI 组件库已全局或局部注册，这里无需额外导入 d-modal
|
||||
|
||||
const props = defineProps({
|
||||
// 必须使用 modelValue 来匹配 v-model
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userEmail: {
|
||||
type: String,
|
||||
default: 'fukang10032@gmail.com'
|
||||
}
|
||||
});
|
||||
|
||||
// 使用 update:visible 事件来实现 v-model 双向绑定
|
||||
const emit = defineEmits(['update:visible', 'create-team']);
|
||||
|
||||
const seats = ref(2);
|
||||
const agreeToTerms = ref(false);
|
||||
const annualBilling = ref(false);
|
||||
|
||||
const adjustSeats = (delta) => {
|
||||
if (seats.value + delta >= 2) {
|
||||
seats.value += delta;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input[type="text"], .disabled-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #2b2b2b;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
cursor: not-allowed;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.seat-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.seat-controls button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #3b3b3b;
|
||||
border: 1px solid #555;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.seat-controls button:disabled {
|
||||
background-color: #2b2b2b;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.seat-note {
|
||||
font-size: 14px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #58a6ff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.plan-info {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.plan-info span {
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.annual-billing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
/* 简化开关样式 (Toggle Switch) */
|
||||
.toggle-switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.toggle-switch label {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #444;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.toggle-switch label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.toggle-switch input:checked + label {
|
||||
background-color: #58a6ff;
|
||||
}
|
||||
.toggle-switch input:checked + label:after {
|
||||
left: calc(100% - 18px);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
/* 底部按钮排版，使用 footer 插槽需要自定义样式 */
|
||||
.modal-actions-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%; /* 使按钮占满宽度 */
|
||||
}
|
||||
|
||||
.primary-btn, .secondary-btn {
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
</style>
|
||||
294
src/views/Jyh/Dashboard/overview/index.vue
Normal file
294
src/views/Jyh/Dashboard/overview/index.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
|
||||
<div class="plan-cards-container">
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">专业版 <span class="price">20美元/月</span></div>
|
||||
<div class="card-desc">入门级套餐，可访问高级模型、无限次 Tab 键自动补全等功能。</div>
|
||||
<d-button class="card-btn white-btn">
|
||||
<router-link to="/CheckoutPage">免费试用7天</router-link>
|
||||
</d-button>
|
||||
</d-card>
|
||||
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">专业+ <span class="price">60美元/月</span></div>
|
||||
<div class="card-desc">使用量是专业版的 3 倍，解锁代理程序更高的限制等等。</div>
|
||||
<d-button class="card-btn white-btn">
|
||||
<router-link to="/CheckoutPayPage">升级到专业版+</router-link>
|
||||
</d-button>
|
||||
</d-card>
|
||||
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">超级版 <span class="price">200美元/月</span></div>
|
||||
<div class="card-desc">并行运行代理，享受 20 倍使用限制，并获得高级功能的优先使用权，从而获得最大价值。</div>
|
||||
<d-button class="card-btn white-btn">
|
||||
<router-link to="/CheckoutPayPage">升级到超级版</router-link>
|
||||
</d-button>
|
||||
</d-card>
|
||||
</div>
|
||||
|
||||
<div class="invite-section">
|
||||
<div class="invite-text">
|
||||
<h3>邀请团队成员</h3>
|
||||
<p>利用管理控制、分析和企业级安全功能，加速您的团队发展</p>
|
||||
</div>
|
||||
<d-button class="invite-btn" variant="outline" @click="handleInviteClick">邀请您的团队</d-button>
|
||||
</div>
|
||||
|
||||
<TeamSetupModal
|
||||
v-model:visible="showSetupModal"
|
||||
@create-team="handleTeamCreation"
|
||||
/>
|
||||
<InviteMemberModal
|
||||
v-model:visible="showInviteModal"
|
||||
@invite-sent="handleInviteSent"
|
||||
/>
|
||||
|
||||
<div class="integration-list">
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon github-icon"><svg viewBox="0 0 16 16" width="24" height="24" fill="white"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitHub</div>
|
||||
<div class="inte-desc">连接 GitHub 以获取云代理、Bugbot 和增强的代码库上下文</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon gitlab-icon"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg></div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitLab</div>
|
||||
<div class="inte-desc">连接 GitLab 以用于云代理、Bugbot 和增强的代码库上下文</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon slack-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg></div> <div class="inte-info">
|
||||
<div class="inte-name">松弛</div>
|
||||
<div class="inte-desc">通过 Slack 与云代理协作</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="connect-btn disabled" disabled>LINK <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon linear-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg></div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">线性</div>
|
||||
<div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import TeamSetupModal from './TeamSetupModal.vue';
|
||||
import InviteMemberModal from './InviteMemberModal.vue';
|
||||
|
||||
// 状态管理
|
||||
const showSetupModal = ref(false);
|
||||
const showInviteModal = ref(false);
|
||||
|
||||
// 模拟团队状态：true表示用户已经有团队，false表示没有
|
||||
const hasTeam = ref(false);
|
||||
|
||||
// 处理邀请团队按钮点击
|
||||
const handleInviteClick = () => {
|
||||
if (hasTeam.value) {
|
||||
showInviteModal.value = true;
|
||||
} else {
|
||||
showSetupModal.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTeamCreation = () => {
|
||||
alert('团队创建成功！');
|
||||
hasTeam.value = true;
|
||||
};
|
||||
|
||||
const handleInviteSent = (email) => {
|
||||
console.log(`邀请已发送给: ${email}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
//overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 顶部卡片 */
|
||||
.plan-cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
background-color: #161616 !important; /* 强制覆盖 DevUI 默认白底 */
|
||||
border: 1px solid #252525 !important;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 200px;
|
||||
color: #fff;
|
||||
|
||||
:deep(.devui-card__header) {
|
||||
padding: 0 0 12px 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
.price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
width: fit-content;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.white-btn {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
&:hover {
|
||||
background-color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 中间邀请部分 */
|
||||
.invite-section {
|
||||
background-color: #121212;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.invite-text {
|
||||
margin-bottom: 20px;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部集成列表 */
|
||||
.integration-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.integration-item {
|
||||
background-color: #161616;
|
||||
border: 1px solid #252525;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.inte-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.inte-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inte-info {
|
||||
.inte-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e5e5e5;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.inte-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.disabled {
|
||||
background-color: #252525 !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
407
src/views/Jyh/Dashboard/proxy.vue
Normal file
407
src/views/Jyh/Dashboard/proxy.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="agent-container">
|
||||
|
||||
<div class="header">
|
||||
<span class="main-title">云代理</span>
|
||||
<span class="subtitle">创建代理异步方式编辑和运行代码</span>
|
||||
</div>
|
||||
|
||||
<div class="section-title">集成</div>
|
||||
<div class="integration-list">
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon github-icon">
|
||||
<svg viewBox="0 0 16 16" width="24" height="24" fill="#EAEAEA"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitHub</div>
|
||||
<div class="inte-desc">连接 GitHub 以获取云代理、Bugbot和增强的代码库上下文</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon gitlab-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitLab</div>
|
||||
<div class="inte-desc">连接 GitLab 以用于云代理、Bugbot和增强的代码库上下文</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon slack-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">松弛</div>
|
||||
<div class="inte-desc">通过 Slack 与云代理协作</div>
|
||||
</div>
|
||||
<d-button class="connect-btn disabled-btn" disabled>连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-icon linear-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg>
|
||||
</div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">线性</div>
|
||||
<div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
|
||||
</div>
|
||||
<d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="upgrade-card">
|
||||
<div class="upgrade-text">
|
||||
<div class="upgrade-title">升级以解锁云代理</div>
|
||||
<div class="upgrade-subtitle">升级至云代理，无限次完成、MAX模式等功能</div>
|
||||
</div>
|
||||
<d-button class="trial-btn">免费试用7天</d-button>
|
||||
</div>
|
||||
|
||||
<div class="api-section">
|
||||
<div class="section-title">用户 API 密钥</div>
|
||||
<p class="api-description">
|
||||
用户 API 密钥提供对您的 金银湖大模型 账户的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card">
|
||||
<div class="api-status">
|
||||
<div class="status-icon">🔑</div>
|
||||
<div class="status-text">
|
||||
<div class="status-title">暂无 API 密钥</div>
|
||||
<div class="status-subtitle">尚未创建任何 API 密钥</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="new-key-btn">
|
||||
<i class="d-icon d-icon-add"></i> + 新 API 密钥
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="env-section">
|
||||
<div class="env-header">
|
||||
<div class="section-title">全局环境变量</div>
|
||||
<d-button class="reset-btn" variant="outline"><i class="d-icon d-icon-refresh"></i> 重置密钥</d-button>
|
||||
</div>
|
||||
|
||||
<p class="env-description">
|
||||
将密钥作为环境变量注入到后台云代理环境中。您的密钥将覆盖团队的密钥。
|
||||
</p>
|
||||
|
||||
<div class="env-status-card">
|
||||
<div class="status-left">
|
||||
<div class="status-title">目前还没有任何秘钥</div>
|
||||
<div class="status-subtitle">添加或导入 .env 文件，以用作后台代理远程的环境变量。</div>
|
||||
</div>
|
||||
<d-button class="add-env-btn">添加秘钥</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 静态页面，无需特殊逻辑
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 定义核心暗色变量 */
|
||||
$bg-primary: #1e1e1e;
|
||||
$bg-secondary: #141414;
|
||||
$text-primary: #eaeaea;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$highlight-blue: #4a90e2; // 链接/主要按钮颜色
|
||||
$highlight-yellow: #f5a623; // 黄色提示
|
||||
$upgrade-bg: #222222; // 升级卡片背景色
|
||||
$button-bg: #444444; // 试用按钮背景色
|
||||
|
||||
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
//overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cloud-agent-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.agent-container {
|
||||
//max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 基础结构样式 --- */
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
.main-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.integration-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.integration-item {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inte-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inte-info {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.inte-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.inte-desc {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $text-secondary !important;
|
||||
border-color: $border-color !important;
|
||||
background: transparent !important;
|
||||
|
||||
.d-icon-link-external {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-btn {
|
||||
background-color: #2b2b2b !important;
|
||||
color: #666666 !important;
|
||||
border: 1px solid #444444 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* --- 升级卡片 --- */
|
||||
.upgrade-card {
|
||||
background-color: $upgrade-bg;
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #383838;
|
||||
}
|
||||
|
||||
.upgrade-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.upgrade-subtitle {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.trial-btn {
|
||||
background-color: $button-bg !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($button-bg, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.api-section {
|
||||
padding-top: 10px; /* 调整间距 */
|
||||
}
|
||||
|
||||
.api-description {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.highlight-text {
|
||||
color: $highlight-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.api-card {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.api-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.status-subtitle {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.new-key-btn {
|
||||
background-color: $highlight-blue !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.d-icon-add {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 环境变量部分 --- */
|
||||
.env-section {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.env-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.section-title {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: $text-secondary !important;
|
||||
border-color: $border-color !important;
|
||||
background: transparent !important;
|
||||
|
||||
.d-icon-refresh {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.env-description {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
line-height: 1.6;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.env-status-card {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.status-left {
|
||||
// 覆盖 API 密钥部分的样式，使其更贴合图片
|
||||
.status-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.status-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-env-btn {
|
||||
background-color: #333333 !important;
|
||||
color: $text-primary !important;
|
||||
border: 1px solid #555 !important;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: #444444 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
241
src/views/Jyh/Dashboard/setting/PrivacySettingsModal.vue
Normal file
241
src/views/Jyh/Dashboard/setting/PrivacySettingsModal.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<d-modal
|
||||
:modelValue="visible"
|
||||
title="隐私设置"
|
||||
:close-on-click-overlay="true"
|
||||
:show-close="true"
|
||||
@close="$emit('update:visible', false)"
|
||||
class="TeamSetupModal"
|
||||
>
|
||||
<p class="modal-subtitle">
|
||||
选择 Cursor 如何存储和使用数据。您可以随时修改此设置。<a href="#" class="learn-more-link">了解更多</a>
|
||||
</p>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="setting-option" :class="{ 'is-selected': selectedMode === 'private' }" @click="selectedMode = 'private'">
|
||||
<div class="option-content">
|
||||
<div class="option-header">
|
||||
<span class="mode-title">隐私模式</span>
|
||||
</div>
|
||||
<p class="mode-description">无需训练。代码可能存储用于云代理、团队规则和其他功能。</p>
|
||||
</div>
|
||||
<div class="radio-indicator">
|
||||
<div class="custom-radio" :class="{ 'is-checked': selectedMode === 'private' }">
|
||||
<svg v-if="selectedMode === 'private'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-option" :class="{ 'is-selected': selectedMode === 'shared' }" @click="selectedMode = 'shared'">
|
||||
<div class="option-content">
|
||||
<div class="option-tag">1小时后激活</div>
|
||||
<p class="mode-description">代码数据共享旨在帮助所有人改进 Cursor。</p>
|
||||
</div>
|
||||
<div class="radio-indicator">
|
||||
<div class="custom-radio" :class="{ 'is-checked': selectedMode === 'shared' }">
|
||||
<svg v-if="selectedMode === 'shared'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-more" @click="showMore = !showMore">
|
||||
<span>{{ showMore ? '收起选项' : '更多选项' }}</span>
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ transform: showMore ? 'rotate(180deg)' : 'rotate(0deg)' }">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-if="showMore" class="setting-option more-option" :class="{ 'is-selected': selectedMode === 'legacy' }" @click="selectedMode = 'legacy'">
|
||||
<div class="option-content">
|
||||
<div class="option-header">
|
||||
<span class="mode-title">隐私模式 (传统版)</span>
|
||||
</div>
|
||||
<p class="mode-description">不提供训练或存储。禁用云代理和其他需要代码存储的功能。</p>
|
||||
</div>
|
||||
<div class="radio-indicator">
|
||||
<div class="custom-radio" :class="{ 'is-checked': selectedMode === 'legacy' }">
|
||||
<svg v-if="selectedMode === 'legacy'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer-actions">
|
||||
<d-button class="finish-btn" @click="handleFinish">完成</d-button>
|
||||
</div>
|
||||
</template>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref,defineProps,defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'mode-selected']);
|
||||
|
||||
const selectedMode = ref('shared');
|
||||
const showMore = ref(false);
|
||||
|
||||
const handleFinish = () => {
|
||||
emit('mode-selected', selectedMode.value);
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-custom-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.modal-subtitle {
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.learn-more-link {
|
||||
color: #58a6ff; /* 蓝色链接 */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ------------------- 选项卡样式 ------------------- */
|
||||
.setting-option {
|
||||
background-color: #1a1a1a; /* 保持背景一致 */
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.setting-option.is-selected {
|
||||
border-color: #58a6ff; /* 选中时边框变蓝 */
|
||||
background-color: #252525; /* 选中时背景略深 */
|
||||
}
|
||||
.setting-option.more-option {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
flex-grow: 1;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.option-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mode-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-description {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.option-tag {
|
||||
display: inline-block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px; /* 标签在描述之上 */
|
||||
}
|
||||
|
||||
.radio-indicator {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-radio {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #555;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.custom-radio.is-checked {
|
||||
border-color: #58a6ff; /* 选中时外圈变蓝 */
|
||||
background-color: #58a6ff; /* 填充蓝色 */
|
||||
}
|
||||
|
||||
.custom-radio.is-checked svg {
|
||||
color: #fff; /* 勾选图标为白色 */
|
||||
}
|
||||
|
||||
.toggle-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 14px;
|
||||
color: #58a6ff;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.toggle-more span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.toggle-more svg {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.modal-footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.finish-btn {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
358
src/views/Jyh/Dashboard/setting/index.vue
Normal file
358
src/views/Jyh/Dashboard/setting/index.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="settings-container">
|
||||
|
||||
<div class="header">设置</div>
|
||||
|
||||
<div class="section-title">隐私</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">共享数据</span>
|
||||
<span class="status-tag">1小时后激活</span>
|
||||
</div>
|
||||
<p class="item-description">您的代码库、提示、编辑和其他使用数据将被 金银湖大模型 存储和训练，以改进产品。</p>
|
||||
</div>
|
||||
<d-button class="action-btn edit-btn" @click="showPrivacyModal = true">编辑</d-button>
|
||||
</div>
|
||||
|
||||
<PrivacySettingsModal v-model:visible="showPrivacyModal" @mode-selected="handleModeChange"/>
|
||||
|
||||
<div class="info-note">
|
||||
<span class="highlight-text">首次使用时，数据共享功能将暂停，</span>共享功能将在1小时后激活。<a href="#" class="learn-more">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">学生验证</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">学生身份</span>
|
||||
</div>
|
||||
<p class="item-description">只有 .edu 邮箱和特定教育领域人才可进行学生身份验证。</p>
|
||||
</div>
|
||||
<d-button class="action-btn disabled-btn" disabled>不符合条件</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">活跃会话</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content session-content">
|
||||
<div class="custom-checkbox"></div>
|
||||
<div>
|
||||
<div class="item-header">
|
||||
<span class="item-title">网站</span>
|
||||
</div>
|
||||
<p class="item-description">创建于 6 天前</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-popover :visible="revokePopoverVisible" trigger="click" @visible-change="toggleRevokePopover">
|
||||
<d-button class="action-btn revoke-btn">撤销</d-button>
|
||||
<template #content>
|
||||
<div class="popover-content">
|
||||
<p>确定撤销当前会话吗？</p>
|
||||
<footer>
|
||||
<d-button @click="toggleRevokePopover(false)" size="sm">取消</d-button>
|
||||
<d-button @click="confirmRevoke" size="sm" variant="solid">确认</d-button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</d-popover>
|
||||
</div>
|
||||
|
||||
<div class="session-note">
|
||||
撤销会话可能需要最多 10 分钟才能完成。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">更多的</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">删除账户</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-popover :visible="deletePopoverVisible" trigger="click" @visible-change="toggleDeletePopover">
|
||||
<d-button class="action-btn delete-btn">删除</d-button>
|
||||
<template #content>
|
||||
<div class="popover-content delete-popover">
|
||||
<p>
|
||||
<strong>警告：</strong>删除账户将不可逆转，您确定要继续吗？
|
||||
</p>
|
||||
<footer>
|
||||
<d-button @click="toggleDeletePopover(false)" size="sm">取消</d-button>
|
||||
<d-button @click="confirmDelete" size="sm" color="danger" variant="solid">确认删除</d-button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</d-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import PrivacySettingsModal from './PrivacySettingsModal.vue';
|
||||
|
||||
const showPrivacyModal = ref(false);
|
||||
|
||||
// Popover 状态
|
||||
const revokePopoverVisible = ref(false);
|
||||
const deletePopoverVisible = ref(false);
|
||||
|
||||
const handleModeChange = (newMode: string) => {
|
||||
console.log("新的隐私模式已选择:", newMode);
|
||||
// 在这里执行更新后端或前端状态的逻辑
|
||||
};
|
||||
|
||||
// --- 撤销会话逻辑 ---
|
||||
const toggleRevokePopover = (visible: boolean) => {
|
||||
revokePopoverVisible.value = visible;
|
||||
};
|
||||
|
||||
const confirmRevoke = () => {
|
||||
console.log("会话已确认撤销！");
|
||||
// 实际的撤销 API 调用逻辑
|
||||
revokePopoverVisible.value = false;
|
||||
};
|
||||
|
||||
// --- 删除账户逻辑 ---
|
||||
const toggleDeletePopover = (visible: boolean) => {
|
||||
deletePopoverVisible.value = visible;
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
console.log("账户已确认删除！");
|
||||
// 实际的删除账户 API 调用逻辑
|
||||
deletePopoverVisible.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 定义核心暗色变量 */
|
||||
$bg-primary: #1e1e1e;
|
||||
$bg-secondary: #141414;
|
||||
$text-primary: #ffffff;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$highlight-orange: #f5a623;
|
||||
$delete-red: #a93b4d;
|
||||
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
}
|
||||
|
||||
|
||||
.settings-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 基础结构样式 --- */
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.setting-block {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --- 列表项样式 --- */
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
background-color: #333333;
|
||||
color: $text-secondary;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- 信息和提示样式 --- */
|
||||
.info-note, .session-note {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
padding: 12px 24px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.info-note {
|
||||
border-top: none;
|
||||
background-color: darken($bg-primary, 2%);
|
||||
|
||||
.highlight-text {
|
||||
color: $highlight-orange;
|
||||
}
|
||||
|
||||
.learn-more {
|
||||
color: #4a90e2;
|
||||
text-decoration: none;
|
||||
margin-left: 4px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-note {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* --- 按钮样式 --- */
|
||||
.action-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
/* 默认按钮 (编辑/撤销) - 灰色背景 */
|
||||
&.edit-btn, &.revoke-btn {
|
||||
background-color: #333333 !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #444444 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除按钮 - 红色背景 */
|
||||
&.delete-btn {
|
||||
background-color: $delete-red !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($delete-red, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 不符合条件 (Disabled) */
|
||||
&.disabled-btn {
|
||||
background-color: #333333 !important;
|
||||
color: #666666 !important;
|
||||
border: 1px solid #444444 !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::before {
|
||||
content: '🗋 ';
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 活跃会话区域定制 --- */
|
||||
.session-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
background-color: #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 🚀 Popover 内容样式 */
|
||||
.popover-content {
|
||||
padding: 8px 12px;
|
||||
//color: #333; /* Popover 默认是白色背景 */
|
||||
max-width: 200px;
|
||||
|
||||
p {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// 适配删除 Popover 的警告文字
|
||||
&.delete-popover {
|
||||
p {
|
||||
color: #CC0000; /* 警告文字红色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
281
src/views/Jyh/Dashboard/usage.vue
Normal file
281
src/views/Jyh/Dashboard/usage.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="usage-container">
|
||||
|
||||
<div class="control-bar">
|
||||
|
||||
<d-range-date-picker-pro
|
||||
v-model="rangeDatePickerProValue"
|
||||
:maxDate="today"
|
||||
:format="dateFormat"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
class="dark-picker"
|
||||
/>
|
||||
|
||||
<div class="filter-tabs-container">
|
||||
|
||||
<d-tabs type="slider" v-model="activeDaysStr" class="custom-tabs-group time-tabs">
|
||||
<d-tab id="1天" title="1天"></d-tab>
|
||||
<d-tab id="7天" title="7天"></d-tab>
|
||||
<d-tab id="30天" title="30天"></d-tab>
|
||||
</d-tabs>
|
||||
|
||||
</div>
|
||||
|
||||
<d-button class="export-btn" variant="text">
|
||||
<i class="d-icon icon-download"></i> 导出 CSV 文件
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
<div class="data-content">
|
||||
<div class="no-events-found">
|
||||
<p class="main-text">No Events Found</p>
|
||||
<p class="sub-text">No usage events found for the selected filters</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
// 辅助函数：根据天数设置日期范围
|
||||
const today = new Date();
|
||||
today.setHours(23, 59, 59, 999); // 确保 maxDate 覆盖今天全天
|
||||
|
||||
const getRangeByDays = (days: number): Date[] => {
|
||||
const endDate = new Date(today); // 确保结束日期是今天
|
||||
const startDate = new Date(today);
|
||||
// 注意：如果是 1天，实际是今天这 24小时，所以减 1 天
|
||||
startDate.setDate(today.getDate() - (days - 1));
|
||||
startDate.setHours(0, 0, 0, 0); // 开始日期从当天 0点开始
|
||||
return [startDate, endDate];
|
||||
};
|
||||
|
||||
const dateFormat = 'MM月DD日';
|
||||
|
||||
// 默认值：30天
|
||||
const rangeDatePickerProValue = ref<Date[]>(getRangeByDays(30));
|
||||
|
||||
const activeTag = ref('Bug Bot');
|
||||
const activeDaysStr = ref('30天'); // 默认选中 30天
|
||||
|
||||
watch(activeDaysStr, (newVal) => {
|
||||
let days: number;
|
||||
|
||||
// 从字符串 'X天' 中提取天数
|
||||
switch (newVal) {
|
||||
case '1天':
|
||||
days = 1;
|
||||
break;
|
||||
case '7天':
|
||||
days = 7;
|
||||
break;
|
||||
case '30天':
|
||||
days = 30;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新日期范围
|
||||
rangeDatePickerProValue.value = getRangeByDays(days);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 定义核心暗色变量 */
|
||||
$bg-secondary: #141414;
|
||||
$bg-card: #1e1e1e;
|
||||
$text-primary: #eaeaea;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$active-tag-bg: #444444;
|
||||
|
||||
|
||||
.content-area {
|
||||
background-color: rgb(20, 18, 11);
|
||||
padding: 40px 60px;
|
||||
//overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.usage-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.usage-container {
|
||||
//max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 顶部控制栏样式 --- */
|
||||
.control-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* 日期范围选择器样式重写 (d-range-date-picker-pro) */
|
||||
:deep(.d-range-date-picker-pro) {
|
||||
width: 180px;
|
||||
|
||||
.devui-input-wrap, .devui-input-affix-wrapper {
|
||||
background-color: $bg-card !important;
|
||||
border: 1px solid $border-color !important;
|
||||
border-radius: 6px !important;
|
||||
height: 36px !important;
|
||||
padding: 0 8px !important;
|
||||
|
||||
.devui-input {
|
||||
color: $text-primary !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon-calendar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.devui-separator {
|
||||
color: $text-primary !important;
|
||||
margin: 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 筛选标签区域样式 (d-tabs) --- */
|
||||
.filter-tabs-container {
|
||||
display: flex;
|
||||
gap: 8px; /* 保持两个 Tab 组之间的间隔 */
|
||||
flex-grow: 1; /* 占据中间空间 */
|
||||
}
|
||||
|
||||
// 统一对 Tab 组进行样式覆盖，以实现标签的外观
|
||||
:deep(.custom-tabs-group) {
|
||||
height: 36px; /* 保持与日期选择器高度一致 */
|
||||
|
||||
// 隐藏 Tab 的底部边框
|
||||
.devui-nav-container {
|
||||
border-bottom: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// 针对每个 Tab Item 进行样式覆盖
|
||||
.devui-nav-item {
|
||||
margin-right: 8px; /* 调整 Tab Item 之间的间距 */
|
||||
}
|
||||
|
||||
// Tab 内容：实现卡片/标签样式
|
||||
.devui-nav-item__link {
|
||||
color: $text-primary !important;
|
||||
background-color: $bg-card !important;
|
||||
border: 1px solid $border-color !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 6px 12px !important;
|
||||
height: 36px;
|
||||
line-height: 24px;
|
||||
transition: none;
|
||||
|
||||
// 隐藏 slider 类型自带的底部滑块
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
&:hover {
|
||||
border-color: #555555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中 Tab 的样式
|
||||
.devui-nav-item.active .devui-nav-item__link {
|
||||
background-color: $active-tag-bg !important;
|
||||
border-color: $active-tag-bg !important;
|
||||
color: $text-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 导出按钮样式 */
|
||||
.export-btn {
|
||||
color: $text-secondary !important;
|
||||
font-size: 14px;
|
||||
padding: 0 8px !important;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary !important;
|
||||
}
|
||||
|
||||
.d-icon-upload {
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* --- 数据内容区样式 --- */
|
||||
.data-content {
|
||||
background-color: $bg-card;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
margin-top: 20px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-events-found {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
|
||||
.main-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.devui-range-date-picker-pro__range-picker) {
|
||||
background-color: black;
|
||||
|
||||
.devui-input__wrapper {
|
||||
background-color: black;
|
||||
color: white;
|
||||
.devui-input__inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.devui-tabs__nav) {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
:deep(.devui-tabs__nav--slider) {
|
||||
li:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
span {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
:deep(.devui-tab__content) {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
149
src/views/Jyh/Home/component/ComAuthority.vue
Normal file
149
src/views/Jyh/Home/component/ComAuthority.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="com-authority">
|
||||
<!-- 主文案 -->
|
||||
<h5 class="main-title wow xsddhxg animated" style="visibility: visible;">
|
||||
准备好构建您的软件安全免疫系统了吗？
|
||||
</h5>
|
||||
<!-- 描述文本 -->
|
||||
<p class="sub-desc wow xsddhxg animated" style="visibility: visible;">
|
||||
无论您是初创团队还是关基单位，Tcode 灵活的订阅模式都能满足您的安全需求。
|
||||
</p>
|
||||
<!-- 按钮组 -->
|
||||
<div class="btn-group wow xsddhxg animated" style="visibility: visible;">
|
||||
<a
|
||||
class="btn-trial LNK"
|
||||
@click="handleLogin('login')"
|
||||
>
|
||||
免费试用基础版
|
||||
<span class="tag">（面向中小企业）</span>
|
||||
</a>
|
||||
<a
|
||||
class="btn-custom LNK"
|
||||
@click="handleLogin('login')"
|
||||
>
|
||||
联系专家定制方案
|
||||
<span class="tag">（面向大型关基单位）</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
|
||||
import {emitEvent} from "@/utils/eventBus";
|
||||
|
||||
const handleLogin = (type) => {
|
||||
emitEvent('login', {type, triggerType: '主动注册'});
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-authority {
|
||||
background-color: #f5f5f5;
|
||||
padding: 80px 20px; // 优化内边距，提升视觉效果
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 主标题样式
|
||||
.main-title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
line-height: 48px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
// 描述文本样式
|
||||
.sub-desc {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 40px;
|
||||
max-width: 800px; // 限制宽度，避免文字过宽
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px; // 按钮间距
|
||||
flex-wrap: wrap; // 响应式换行
|
||||
}
|
||||
|
||||
// 按钮通用样式
|
||||
.btn-group a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap; // 防止文字换行
|
||||
}
|
||||
|
||||
// 免费试用按钮样式
|
||||
.btn-trial {
|
||||
background-color: #4bad52;
|
||||
color: #fff;
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #7aba4a;
|
||||
transform: translateY(-2px); // 轻微上浮效果
|
||||
box-shadow: 0 4px 12px rgba(75, 173, 82, 0.2); // 阴影增强
|
||||
}
|
||||
}
|
||||
|
||||
// 定制方案按钮样式
|
||||
.btn-custom {
|
||||
background-color: #fff;
|
||||
color: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f9f1;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 173, 82, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配（移动端）
|
||||
@media (max-width: 768px) {
|
||||
.main-title {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.sub-desc {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.btn-group a {
|
||||
padding: 14px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/Jyh/Home/component/ComAuthorityOld.vue
Normal file
157
src/views/Jyh/Home/component/ComAuthorityOld.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="com-authority"><h5 class="wow xsddhxg animated" style="visibility: visible;">屡获国际权威认证，硬核技术驱动智能安全</h5>
|
||||
<ul class="wow xsddhxg animated" style="visibility: visible;">
|
||||
<li><img
|
||||
src="http://chaitin-marketing-public.oss-cn-beijing.aliyuncs.com/images/2025/06/20/42f9989f44fb422db95349647b15409c">
|
||||
<p class="num">/ 01</p>
|
||||
<p class="title MultiLine">Tcode雷池：WAF 软硬件市场营收规模，国内安全厂商第一</p>
|
||||
<p class="line"></p>
|
||||
<p class="desc MultiLine">近日，国际权威咨询机构 IDC 发布针对中国 Web 应用防火墙产品的市场份额系列研究报告。报告显示，在 2024 年中国硬件 WAF 市场份额排名中，Tcode科技以
|
||||
10.6% 的市场份额跃居至第二，全面领先于市场主流水平；在 2024 年私有云WAF市场份额排名中，Tcode科技位列第三，连续三年稳居前三，持续占据领先地位；与此同时，2024 年国内 WAF
|
||||
软硬件市场总营收规模，Tcode科技位列安全厂商第一。</p><a class="EASE btn-more LNK"
|
||||
href="https://mp.weixin.qq.com/s/0oEiHBJuIALEcEcXqjK-iA" target="_blank">了解更多
|
||||
<i class="EASE ICO ic-arow"></i></a></li>
|
||||
<li><img
|
||||
src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/06/94e1522a576e485abaa30473984a07db.jpg">
|
||||
<p class="num">/ 02</p>
|
||||
<p class="title MultiLine">攻防技术标杆Tcode荣获 Gartner 三项权威认可</p>
|
||||
<p class="line"></p>
|
||||
<p class="desc MultiLine">Tcode科技在攻击面管理（ASM）、入侵和攻击模拟（BAS）、云工作负载保护平台（CWPP）领域的技术被列入报告，被 Gartner 认可为推荐厂商（Sample
|
||||
Vendor）。</p><a class="EASE btn-more LNK" href="https://mp.weixin.qq.com/s/EKov7PEEhkyHP9tOd600hQ"
|
||||
target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a></li>
|
||||
<li><img
|
||||
src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/03/6d7c4427b1874cb2950764d5ff12c9a0.jpg">
|
||||
<p class="num">/ 03</p>
|
||||
<p class="title MultiLine">安全咨询能力获认可！Tcode入选国际权威报告</p>
|
||||
<p class="line"></p>
|
||||
<p class="desc MultiLine">全球权威咨询机构 Forrester 发布报告《The Cybersecurity Consulting Services Landscape In Asia
|
||||
Pacific, Q3 2023》，Tcode科技安全咨询服务得到国际权威专家的高度认可。</p><a class="EASE btn-more LNK"
|
||||
href="https://mp.weixin.qq.com/s/oFXXhpP2RjBAo6UWH5JVyQ"
|
||||
target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComAuthority"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-authority {
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 50px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.com-authority h5 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
.com-authority ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 54px 0 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.com-authority li {
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50,50,50,.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
list-style: none;
|
||||
margin: 0 14px;
|
||||
padding: 33px;
|
||||
text-align: left;
|
||||
width: 436px
|
||||
}
|
||||
|
||||
.com-authority li img {
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
height: 327px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-authority li .num {
|
||||
color: #969696;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin: 47px 0 0
|
||||
}
|
||||
|
||||
.com-authority li .title {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
height: 60px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 30px;
|
||||
margin: 14px 0 0
|
||||
}
|
||||
|
||||
.com-authority li .desc {
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 96px;
|
||||
line-height: 24px;
|
||||
-webkit-line-clamp: 4;
|
||||
letter-spacing: .5px
|
||||
}
|
||||
|
||||
.com-authority li .line {
|
||||
background-color: #969696;
|
||||
height: 2px;
|
||||
margin: 21px 0 29px
|
||||
}
|
||||
|
||||
.com-authority li .btn-more {
|
||||
background-color: #4bad52;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 20px 0 0;
|
||||
text-align: center;
|
||||
width: 155px
|
||||
}
|
||||
|
||||
.com-authority li .btn-more:hover {
|
||||
background-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-authority li .btn-more:hover .ICO {
|
||||
left: 15px
|
||||
}
|
||||
|
||||
.com-authority li .btn-more .ICO {
|
||||
left: 7px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.MultiLine {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
91
src/views/Jyh/Home/component/ComBank.vue
Normal file
91
src/views/Jyh/Home/component/ComBank.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="com-bank">
|
||||
<!-- 第一组滚动（从左到右，对应原 duration: 222.105s） -->
|
||||
<Marquee
|
||||
class="marquee-group"
|
||||
:duration="222.105"
|
||||
direction="normal"
|
||||
:pause-on-hover="false"
|
||||
:pause-on-click="false"
|
||||
:iteration-count="Infinity"
|
||||
>
|
||||
<div class="bank-item">
|
||||
<img src="@/assets/v3/brand/cm.jpg" alt="中国移动">
|
||||
<img src="@/assets/v3/brand/gnzs.png" alt="国能智深">
|
||||
<img src="@/assets/v3/brand/htkgjt.png" alt="航天科工">
|
||||
<img style="height: 40px" src="@/assets/v3/brand/why.png" alt="武汉云计算">
|
||||
<img src="@/assets/v3/brand/zyhlw.png" alt="中移互联网">
|
||||
<img src="@/assets/v3/brand/zywq.png" alt="中移湾区">
|
||||
<img src="@/assets/v3/brand/ynjf.png" alt="上海元年">
|
||||
<img src="@/assets/v3/brand/qianxin.png" alt="奇安信">
|
||||
<img src="@/assets/v3/brand/whrq.png" alt="武汉燃气">
|
||||
<img src="@/assets/v3/brand/bjdftwx.png" alt="北京东方通网信">
|
||||
<img src="@/assets/v3/brand/mfwl.png" alt="墨菲未来">
|
||||
</div>
|
||||
</Marquee >
|
||||
|
||||
<!-- 第二组滚动-->
|
||||
<Marquee
|
||||
class="marquee-group"
|
||||
:duration="205.02"
|
||||
direction="normal"
|
||||
:pause-on-hover="false"
|
||||
:pause-on-click="false"
|
||||
:iteration-count="Infinity"
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div class="bank-item">
|
||||
<img src="@/assets/v3/brand/yakj.png" alt="亚信科技">
|
||||
<img src="@/assets/v3/brand/ziran.png" alt="武汉自然资源城乡建设局">
|
||||
<img style="height: 56px" src="@/assets/v3/brand/hkws.png" alt="海康威视">
|
||||
<img style="height: 56px" src="@/assets/v3/brand/zgdx.png" alt="中国电信">
|
||||
<img src="@/assets/v3/brand/csdn.png" alt="CSDN">
|
||||
<img src="@/assets/v3/brand/gitcode.png" alt="GitCode">
|
||||
<img src="@/assets/v3/brand/ht.png" alt="航天科工第三院">
|
||||
<img src="@/assets/v3/brand/gjny.png" alt="国家能源">
|
||||
<img src="@/assets/v3/brand/fenhuo.png" alt="烽火通信">
|
||||
<img src="@/assets/v3/brand/cjb.png" alt="超聚变">
|
||||
</div>
|
||||
</Marquee>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Marquee } from 'vue-fast-marquee';
|
||||
import 'vue-fast-marquee/style.css';
|
||||
|
||||
export default {
|
||||
name: "ComBank",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.com-bank {
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
max-width: 1440px;
|
||||
overflow: hidden; /* 隐藏滚动溢出部分 */
|
||||
padding: 61px 0 71px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 滚动容器样式 */
|
||||
.marquee-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 图标容器样式 */
|
||||
.bank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bank-item img {
|
||||
height: 66px;
|
||||
margin: 8px 22px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
482
src/views/Jyh/Home/component/ComEntry.vue
Normal file
482
src/views/Jyh/Home/component/ComEntry.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<div class="com-entry">
|
||||
<div class="com-slider">
|
||||
<div class="swiper swiper-creative swiper-3d" ref="swiperContainer">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide" data-swiper-slide-index="0">
|
||||
<div class="banner-container">
|
||||
<div class="sImg">
|
||||
<img src="@/assets/v3/bg3.png" class="bg-image" />
|
||||
<div class="overlay-mask"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="title-group animate-up">
|
||||
<h1 class="main-headline">
|
||||
Tcode：构建数字世界的<span class="gradient-text">免疫系统</span>
|
||||
</h1>
|
||||
<h2 class="sub-headline">
|
||||
AI 驱动的软件供应链安全全链路治理平台
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="description animate-up delay-1">
|
||||
以<span class="highlight">金银湖安全大模型</span>为核心，打通
|
||||
<span class="tech-tag">开源感知</span> -
|
||||
<span class="tech-tag">代码审计</span> -
|
||||
<span class="tech-tag">供应链治理</span> -
|
||||
<span class="tech-tag">终端监测</span>
|
||||
<br>全生命周期，让每一行代码都可信、可控、可追溯。
|
||||
</p>
|
||||
|
||||
<div class="cta-group animate-up delay-2">
|
||||
<button class="btn btn-primary" @click="handleLogin('login')">
|
||||
<span class="btn-text">立即体验 SaaS 版</span>
|
||||
<span class="btn-glow"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" @click="handleLogin('login')">
|
||||
<span class="btn-text">申请私有化演示</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="swiper-slide" data-swiper-slide-index="1">-->
|
||||
<!-- <div class="sVdo">-->
|
||||
<!-- <video-->
|
||||
<!-- class="full-bg-video"-->
|
||||
<!-- loop muted autoplay-->
|
||||
<!-- playsinline-->
|
||||
<!-- src="@/assets/v3/ab622e07e5f14b23be0d5c2e620ea4be.mp4">-->
|
||||
<!-- </video>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="swiper-slide" data-swiper-slide-index="2">-->
|
||||
<!-- <div class="sImg">-->
|
||||
<!-- <img src="@/assets/v3/09d1ab34dd334323a1bb50e4a298bcfb.jpg" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev swiper-button-white" ref="prevButton"></div>
|
||||
<div class="swiper-button-next swiper-button-white" ref="nextButton"></div>
|
||||
|
||||
<div class="swiper-pagination" ref="paginationEl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref,onBeforeUnmount} from 'vue';
|
||||
import Swiper from 'swiper';
|
||||
// 导入 Swiper 样式和模块
|
||||
import 'swiper/swiper-bundle.css';
|
||||
import { Navigation, Pagination, EffectCreative,Autoplay } from 'swiper/modules';
|
||||
import {emitEvent} from "@/utils/eventBus";
|
||||
|
||||
const featureCards = [
|
||||
{
|
||||
title: 'SBOM 自动化分析',
|
||||
description1: '生成标准 CycloneDX/SPDX',
|
||||
description2: '物料清单，透视组件资产。',
|
||||
link: '/sbom-analysis',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '供应链漏洞检测分析',
|
||||
description1: '深度解析依赖树，精准定位',
|
||||
description2: 'CVE 漏洞与传播路径。',
|
||||
link: '/supply-chain-vulnerability',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '恶意代码投毒检测',
|
||||
description1: '识别依赖混淆、组件篡改',
|
||||
description2: '及后门植入攻击。',
|
||||
link: '/malware-detection',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
];
|
||||
|
||||
// 1. 定义 ref 引用到 DOM 元素
|
||||
const swiperContainer = ref(null);
|
||||
const prevButton = ref(null);
|
||||
const nextButton = ref(null);
|
||||
const paginationEl = ref(null);
|
||||
let mySwiper = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (swiperContainer.value) {
|
||||
// 2. 初始化 Swiper 实例
|
||||
new Swiper(swiperContainer.value, {
|
||||
// 3. 注册使用的模块（必须）
|
||||
modules: [Navigation, Pagination, EffectCreative,Autoplay],
|
||||
|
||||
// 4. 配置 Swiper 选项
|
||||
loop: true, // 确保轮播循环
|
||||
|
||||
// 5. 配置 3D Creative 效果（必须）
|
||||
effect: 'creative',
|
||||
creativeEffect: {
|
||||
prev: {
|
||||
shadow: true,
|
||||
translate: ['-100%', 0, -1],
|
||||
},
|
||||
next: {
|
||||
translate: ['100%', 0, -1],
|
||||
},
|
||||
},
|
||||
|
||||
// 6. 配置 Navigation (导航按钮)
|
||||
navigation: {
|
||||
// 使用 ref 引用或 CSS 类名指向按钮元素
|
||||
nextEl: nextButton.value, // 使用 ref 引用更精确
|
||||
prevEl: prevButton.value, // 使用 ref 引用更精确
|
||||
// 也可以使用: nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',
|
||||
// 但使用 ref 在 Vue 中更稳定。
|
||||
},
|
||||
|
||||
// 7. 配置 Pagination (分页器)
|
||||
pagination: {
|
||||
el: paginationEl.value, // 使用 ref 引用指向分页器容器
|
||||
clickable: true, // 确保点击分页点可以切换
|
||||
},
|
||||
|
||||
// 自动播放（可选，如果需要）
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
// 其他配置，如速度、初始化索引等...
|
||||
initialSlide: 2, // 假设您想从 index=2 的 Slide 开始
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const handleLogin = (type) => {
|
||||
emitEvent('login', {type, triggerType: '主动注册'});
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mySwiper) {
|
||||
mySwiper.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-entry {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in {
|
||||
background: #9696964d;
|
||||
border-radius: 12px;
|
||||
bottom: 68px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
padding: 34px 0;
|
||||
position: absolute;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.com-entry .entry-in li {
|
||||
border-right: 1px solid #979797;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
list-style: none;
|
||||
padding: 7px 36px 0 40px;
|
||||
width: 314px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .ic-arow {
|
||||
left: 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover h5 {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover a {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover .ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAAKhQTFRFAAAAAP8AgICAVapVVapVSbZJQJ9gRqJdSaRbUa5RRq5RTKpVSa1SSK9QSa9QSq5RSKpVS65RTK5RS6tUSa5RSa9QSqxTTK5RS6xTS6xTTKxTTK1SS65RS61SSq1STKxTS61SS61SSq1STK1SS65RS61SSq1SSq5RS61SS6xTS65RS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SEkaAMAAAADd0Uk5TAAECAwYHCAsOExYbHCAjJicsOTpCSVlhYmlyeYGCiZGSmaGiqbGyucjP1dze4Obq7/L1+Pv8/muR6mgAAACNSURBVHichZLXDoJQEERXUBALRcGuFEWl2p3//zMTY+LL3b3zeiZbh+gv1yRBvbqMBOxXwCngeXd1xSsd8AYneeK2toQOR6CZdXhDWADnKc+NRQscxrzB3t7x2PV5w2j/xmVpEnngVUY6rNYw+xVXjrYRRjPm0mLfs0wY6OfCUZ1YeIn8UE0cNGFSRfEDg08bjv6UEeIAAAAASUVORK5CYII=);
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:last-child {
|
||||
border: none
|
||||
}
|
||||
|
||||
.com-entry .entry-in li h5 {
|
||||
color: #4bad52;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 19px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .txt {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 24px
|
||||
}
|
||||
|
||||
.com-slider {
|
||||
background-color: #0c0c0f
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
height: 540px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo video {
|
||||
max-height: 900px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo .btn-play {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////+/379/v49Pr08/rz7vfv6vXr6fXq2O3a1+3Zz+nRxeXHxOTHu+C+ut+9pdaopNanmtGemdGdmNCckM2Uj8yUhsiKhceKfMOBe8OAabtvabtuaLpuZ7ptYrhoXLViWbNgV7JeVrJdT69WT69VTK5TS61ST2RNRwAAABZ0Uk5TAAEJDBYXI1Jyf4KDpaqrv9PZ6PLz/pJYTDUAAAEkSURBVHjanZXHcsMwDERXJbKoqItiepzi9N6chv//rlwyMnvo7JF4QwxAYAkoyvKy6QbeNWWewam0aIWktkitWMK40MRZYnKzXljUzzQsYqOwamSRzMW1cKqKpfsq4VG9upMJr9hUx+gHx9+Kkl78oT4xEl8uz7dcyVO5z59ET3MT5CmATfmEiOj7YtsgCwCtDhK9HulgC2TCBImudzQyQ24F6e1YBXOUdpDodk8OlGhcIL2fSoEGnRMkut+fAh24B6TnKTBg8IEvEuhL/XAgpXYX87FQinG2505rj6vhJ3rD7U94s2s8YfBQhI+ZMrhfRI+HjsFVVuFqeeZchfDlCl7XcANAVPu4SrKp2GM+dfwf2ws30jWsGcBGmNmvvg9u+z5+AJMEhmRVU6aXAAAAAElFTkSuQmCC) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sImg {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.MultiLine {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////6urq6+vr8vLy8/Pz6urq6+vr7e3t7+/v7e3t8fHx8fHx7e3t8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw7+/v8PDw8PDw8PDw8PDw8PDw8PDw7+/v7+/v8PDw8PDw7+/v8PDw8PDw8PDw8PDw7+/v7+/v8PDw7+/v7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v4uiVIAAAADx0Uk5TAAECAwYHDA0UFRgZHR8qNTc4RlNUVldkZWZnc3R2d4SGh5OUlpekpqe2t8PExsvR093f5+nw8fb3+/z+BY9v3gAAAJtJREFUKM99UkcWglAQ+wKKDcGGXVTsXbGT+5/L0Y0bM9kmb14miTE/eFmjILM/NxW6dAB2Vc5b7QRYeFyQi+54jFwuKM9TXDo2F/hb4FhTPDZOwKrCead/xWta4IJ8/MRtIDG54JCYVDpkxydyfEg6cHpibcas1eWxNXvM3yixfEPt2kolY1KJ1UqQLlmhxc8cAm1MoTa2P1N8A11AHbmJaAv2AAAAAElFTkSuQmCC);
|
||||
margin: 10px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.ic-arow, .ic-down {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.EASE {
|
||||
-webkit-transition: all .4s ease-out;
|
||||
transition: all .4s ease-out;
|
||||
}
|
||||
|
||||
.ICO {
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.banner-container {
|
||||
position: relative;
|
||||
width: 84vw;
|
||||
margin: 0 auto;
|
||||
height: 540px;
|
||||
overflow: hidden;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
/* 背景图样式优化 */
|
||||
.sImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//object-fit: cover; /* 确保图片覆盖整个区域且不变形 */
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
/* 暗色遮罩：防止背景过亮导致文字看不清 */
|
||||
.overlay-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
|
||||
}
|
||||
|
||||
/* 内容层布局 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 10; /* 确保内容在背景之上 */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
//margin-top: -50px; /* 视觉微调，稍微向上提一点 */
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.main-headline {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 16px;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.gradient-text {
|
||||
/* 科技感蓝紫渐变 */
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #e0e0e0;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 描述文字样式 */
|
||||
.description {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: #cccccc;
|
||||
max-width: 800px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.highlight {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮组样式 */
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 14px 40px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 主要按钮：SaaS 体验 (高亮) */
|
||||
.btn-primary {
|
||||
background: linear-gradient(90deg, #2b5876 0%, #4e4376 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(78, 67, 118, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba(78, 67, 118, 0.6);
|
||||
background: linear-gradient(90deg, #356b8f 0%, #5f5291 100%);
|
||||
}
|
||||
|
||||
/* 次要按钮：私有化演示 (玻璃拟态/描边) */
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 简单的入场动画 */
|
||||
.animate-up {
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.delay-1 { animation-delay: 0.2s; }
|
||||
.delay-2 { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.banner-container { height: 800px; }
|
||||
.main-headline { font-size: 36px; }
|
||||
.sub-headline { font-size: 20px; }
|
||||
.cta-group { flex-direction: column; gap: 15px; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
497
src/views/Jyh/Home/component/ComEntryOld.vue
Normal file
497
src/views/Jyh/Home/component/ComEntryOld.vue
Normal file
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div class="com-entry">
|
||||
<div class="com-slider">
|
||||
<div class="swiper swiper-creative swiper-3d" ref="swiperContainer">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide" data-swiper-slide-index="0">
|
||||
<div class="banner-container">
|
||||
<div class="sImg">
|
||||
<img src="@/assets/v3/bg3.png" class="bg-image" />
|
||||
<div class="overlay-mask"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="title-group animate-up">
|
||||
<h1 class="main-headline">
|
||||
Tcode：构建数字世界的<span class="gradient-text">免疫系统</span>
|
||||
</h1>
|
||||
<h2 class="sub-headline">
|
||||
AI 驱动的软件供应链安全全链路治理平台
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="description animate-up delay-1">
|
||||
以<span class="highlight">金银湖安全大模型</span>为核心，打通
|
||||
<span class="tech-tag">开源感知</span> -
|
||||
<span class="tech-tag">代码审计</span> -
|
||||
<span class="tech-tag">供应链治理</span> -
|
||||
<span class="tech-tag">终端监测</span>
|
||||
<br>全生命周期，让每一行代码都可信、可控、可追溯。
|
||||
</p>
|
||||
|
||||
<div class="cta-group animate-up delay-2">
|
||||
<button class="btn btn-primary" @click="handleLogin('login')">
|
||||
<span class="btn-text">立即体验 SaaS 版</span>
|
||||
<span class="btn-glow"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" @click="handleLogin('login')">
|
||||
<span class="btn-text">申请私有化演示</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide" data-swiper-slide-index="1">
|
||||
<div class="sVdo">
|
||||
<video
|
||||
class="full-bg-video"
|
||||
loop muted autoplay
|
||||
playsinline
|
||||
src="@/assets/v3/ab622e07e5f14b23be0d5c2e620ea4be.mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="swiper-slide" data-swiper-slide-index="2">-->
|
||||
<!-- <div class="sImg">-->
|
||||
<!-- <img src="@/assets/v3/09d1ab34dd334323a1bb50e4a298bcfb.jpg" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev swiper-button-white" ref="prevButton"></div>
|
||||
<div class="swiper-button-next swiper-button-white" ref="nextButton"></div>
|
||||
|
||||
<div class="swiper-pagination" ref="paginationEl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="entry-in new-feature-cards">
|
||||
<li v-for="(item, index) in featureCards" :key="index" class="feature-card">
|
||||
|
||||
<h5 class="card-title">{{ item.title }}</h5>
|
||||
|
||||
<a class="EASE LNK MultiLine txt" target="_blank" :href="item.link">
|
||||
{{ item.description1 }}
|
||||
<br>
|
||||
{{ item.description2 }}
|
||||
</a>
|
||||
|
||||
<a class="EASE LNK MultiLine card-link" target="_blank" :href="item.link"><i class="EASE ICO ic-arow"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref,onBeforeUnmount} from 'vue';
|
||||
import Swiper from 'swiper';
|
||||
// 导入 Swiper 样式和模块
|
||||
import 'swiper/swiper-bundle.css';
|
||||
import { Navigation, Pagination, EffectCreative,Autoplay } from 'swiper/modules';
|
||||
import {emitEvent} from "@/utils/eventBus";
|
||||
|
||||
const featureCards = [
|
||||
{
|
||||
title: 'SBOM 自动化分析',
|
||||
description1: '生成标准 CycloneDX/SPDX',
|
||||
description2: '物料清单，透视组件资产。',
|
||||
link: '/sbom-analysis',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '供应链漏洞检测分析',
|
||||
description1: '深度解析依赖树，精准定位',
|
||||
description2: 'CVE 漏洞与传播路径。',
|
||||
link: '/supply-chain-vulnerability',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '恶意代码投毒检测',
|
||||
description1: '识别依赖混淆、组件篡改',
|
||||
description2: '及后门植入攻击。',
|
||||
link: '/malware-detection',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
];
|
||||
|
||||
// 1. 定义 ref 引用到 DOM 元素
|
||||
const swiperContainer = ref(null);
|
||||
const prevButton = ref(null);
|
||||
const nextButton = ref(null);
|
||||
const paginationEl = ref(null);
|
||||
let mySwiper = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (swiperContainer.value) {
|
||||
// 2. 初始化 Swiper 实例
|
||||
new Swiper(swiperContainer.value, {
|
||||
// 3. 注册使用的模块（必须）
|
||||
modules: [Navigation, Pagination, EffectCreative,Autoplay],
|
||||
|
||||
// 4. 配置 Swiper 选项
|
||||
loop: true, // 确保轮播循环
|
||||
|
||||
// 5. 配置 3D Creative 效果（必须）
|
||||
effect: 'creative',
|
||||
creativeEffect: {
|
||||
prev: {
|
||||
shadow: true,
|
||||
translate: ['-100%', 0, -1],
|
||||
},
|
||||
next: {
|
||||
translate: ['100%', 0, -1],
|
||||
},
|
||||
},
|
||||
|
||||
// 6. 配置 Navigation (导航按钮)
|
||||
navigation: {
|
||||
// 使用 ref 引用或 CSS 类名指向按钮元素
|
||||
nextEl: nextButton.value, // 使用 ref 引用更精确
|
||||
prevEl: prevButton.value, // 使用 ref 引用更精确
|
||||
// 也可以使用: nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',
|
||||
// 但使用 ref 在 Vue 中更稳定。
|
||||
},
|
||||
|
||||
// 7. 配置 Pagination (分页器)
|
||||
pagination: {
|
||||
el: paginationEl.value, // 使用 ref 引用指向分页器容器
|
||||
clickable: true, // 确保点击分页点可以切换
|
||||
},
|
||||
|
||||
// 自动播放（可选，如果需要）
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
// 其他配置，如速度、初始化索引等...
|
||||
initialSlide: 2, // 假设您想从 index=2 的 Slide 开始
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const handleLogin = (type) => {
|
||||
emitEvent('login', {type, triggerType: '主动注册'});
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mySwiper) {
|
||||
mySwiper.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-entry {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in {
|
||||
background: #9696964d;
|
||||
border-radius: 12px;
|
||||
bottom: 68px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
padding: 34px 0;
|
||||
position: absolute;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.com-entry .entry-in li {
|
||||
border-right: 1px solid #979797;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
list-style: none;
|
||||
padding: 7px 36px 0 40px;
|
||||
width: 314px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .ic-arow {
|
||||
left: 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover h5 {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover a {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover .ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAAKhQTFRFAAAAAP8AgICAVapVVapVSbZJQJ9gRqJdSaRbUa5RRq5RTKpVSa1SSK9QSa9QSq5RSKpVS65RTK5RS6tUSa5RSa9QSqxTTK5RS6xTS6xTTKxTTK1SS65RS61SSq1STKxTS61SS61SSq1STK1SS65RS61SSq1SSq5RS61SS6xTS65RS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SEkaAMAAAADd0Uk5TAAECAwYHCAsOExYbHCAjJicsOTpCSVlhYmlyeYGCiZGSmaGiqbGyucjP1dze4Obq7/L1+Pv8/muR6mgAAACNSURBVHichZLXDoJQEERXUBALRcGuFEWl2p3//zMTY+LL3b3zeiZbh+gv1yRBvbqMBOxXwCngeXd1xSsd8AYneeK2toQOR6CZdXhDWADnKc+NRQscxrzB3t7x2PV5w2j/xmVpEnngVUY6rNYw+xVXjrYRRjPm0mLfs0wY6OfCUZ1YeIn8UE0cNGFSRfEDg08bjv6UEeIAAAAASUVORK5CYII=);
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:last-child {
|
||||
border: none
|
||||
}
|
||||
|
||||
.com-entry .entry-in li h5 {
|
||||
color: #4bad52;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 19px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .txt {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 24px
|
||||
}
|
||||
|
||||
.com-slider {
|
||||
background-color: #0c0c0f
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
height: 990px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo video {
|
||||
max-height: 900px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo .btn-play {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////+/379/v49Pr08/rz7vfv6vXr6fXq2O3a1+3Zz+nRxeXHxOTHu+C+ut+9pdaopNanmtGemdGdmNCckM2Uj8yUhsiKhceKfMOBe8OAabtvabtuaLpuZ7ptYrhoXLViWbNgV7JeVrJdT69WT69VTK5TS61ST2RNRwAAABZ0Uk5TAAEJDBYXI1Jyf4KDpaqrv9PZ6PLz/pJYTDUAAAEkSURBVHjanZXHcsMwDERXJbKoqItiepzi9N6chv//rlwyMnvo7JF4QwxAYAkoyvKy6QbeNWWewam0aIWktkitWMK40MRZYnKzXljUzzQsYqOwamSRzMW1cKqKpfsq4VG9upMJr9hUx+gHx9+Kkl78oT4xEl8uz7dcyVO5z59ET3MT5CmATfmEiOj7YtsgCwCtDhK9HulgC2TCBImudzQyQ24F6e1YBXOUdpDodk8OlGhcIL2fSoEGnRMkut+fAh24B6TnKTBg8IEvEuhL/XAgpXYX87FQinG2505rj6vhJ3rD7U94s2s8YfBQhI+ZMrhfRI+HjsFVVuFqeeZchfDlCl7XcANAVPu4SrKp2GM+dfwf2ws30jWsGcBGmNmvvg9u+z5+AJMEhmRVU6aXAAAAAElFTkSuQmCC) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sImg {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.MultiLine {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////6urq6+vr8vLy8/Pz6urq6+vr7e3t7+/v7e3t8fHx8fHx7e3t8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw7+/v8PDw8PDw8PDw8PDw8PDw8PDw7+/v7+/v8PDw8PDw7+/v8PDw8PDw8PDw8PDw7+/v7+/v8PDw7+/v7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v4uiVIAAAADx0Uk5TAAECAwYHDA0UFRgZHR8qNTc4RlNUVldkZWZnc3R2d4SGh5OUlpekpqe2t8PExsvR093f5+nw8fb3+/z+BY9v3gAAAJtJREFUKM99UkcWglAQ+wKKDcGGXVTsXbGT+5/L0Y0bM9kmb14miTE/eFmjILM/NxW6dAB2Vc5b7QRYeFyQi+54jFwuKM9TXDo2F/hb4FhTPDZOwKrCead/xWta4IJ8/MRtIDG54JCYVDpkxydyfEg6cHpibcas1eWxNXvM3yixfEPt2kolY1KJ1UqQLlmhxc8cAm1MoTa2P1N8A11AHbmJaAv2AAAAAElFTkSuQmCC);
|
||||
margin: 10px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.ic-arow, .ic-down {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.EASE {
|
||||
-webkit-transition: all .4s ease-out;
|
||||
transition: all .4s ease-out;
|
||||
}
|
||||
|
||||
.ICO {
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.banner-container {
|
||||
position: relative;
|
||||
width: 84vw;
|
||||
margin: 0 auto;
|
||||
height: 840px;
|
||||
overflow: hidden;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
/* 背景图样式优化 */
|
||||
.sImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 确保图片覆盖整个区域且不变形 */
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
/* 暗色遮罩：防止背景过亮导致文字看不清 */
|
||||
.overlay-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
|
||||
}
|
||||
|
||||
/* 内容层布局 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 10; /* 确保内容在背景之上 */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
margin-top: -50px; /* 视觉微调，稍微向上提一点 */
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.main-headline {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 16px;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.gradient-text {
|
||||
/* 科技感蓝紫渐变 */
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #e0e0e0;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 描述文字样式 */
|
||||
.description {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: #cccccc;
|
||||
max-width: 800px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.highlight {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮组样式 */
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 14px 40px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 主要按钮：SaaS 体验 (高亮) */
|
||||
.btn-primary {
|
||||
background: linear-gradient(90deg, #2b5876 0%, #4e4376 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(78, 67, 118, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba(78, 67, 118, 0.6);
|
||||
background: linear-gradient(90deg, #356b8f 0%, #5f5291 100%);
|
||||
}
|
||||
|
||||
/* 次要按钮：私有化演示 (玻璃拟态/描边) */
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 简单的入场动画 */
|
||||
.animate-up {
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.delay-1 { animation-delay: 0.2s; }
|
||||
.delay-2 { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.banner-container { height: 800px; }
|
||||
.main-headline { font-size: 36px; }
|
||||
.sub-headline { font-size: 20px; }
|
||||
.cta-group { flex-direction: column; gap: 15px; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
src/views/Jyh/Home/component/ComFooter.vue
Normal file
340
src/views/Jyh/Home/component/ComFooter.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="comFooter">
|
||||
<div class="footer-top">
|
||||
<div class="footer-l"><p class="form-tip">立即预约，开启智能安全之旅！</p>
|
||||
<form class="form"><input placeholder="请输入您的电话 +86" class="form-ipt" type="tel" maxlength="11"><!---->
|
||||
<button class="EASE form-sbmt" type="submit">预约 <i class="EASE ICO ic-arow"></i></button>
|
||||
</form>
|
||||
<p class="contact-tip">联系我们</p>
|
||||
<div class="contact-item"><i class="ICO ic-phone-g"></i> 电话：027-83391083</div>
|
||||
<div class="contact-item"><i class="ICO ic-mail-g"></i> 邮箱：jyhlab@jyhlab.org.cn</div>
|
||||
<div class="contact-item"><i class="ICO ic-addr-g"></i> 地址：武汉市东西湖区G347国家网络安全人才与创新基地</div>
|
||||
<div class="contact-media">
|
||||
<div class="media-item EASE"><img src="@/assets/imgs/gzh.jpg" alt="公众号"> 公众号</div>
|
||||
<!-- <div class="media-item m-sph EASE"><img src="https://www.chaitin.cn/_nuxt/shipinhao.BWbq9rer.png" alt="视频号">-->
|
||||
<!-- 视频号-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="media-item m-bz EASE"><img src="https://www.chaitin.cn/_nuxt/bzhan.CjlwQaqe.png" alt="B站"> B站-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-r">
|
||||
<div class="r-links"><h5>产品与服务</h5>
|
||||
<ul>
|
||||
<li><a href="javascript:;" class="">SBOM 分析</a></li>
|
||||
<li><a href="javascript:;" class="">供应链漏洞检测</a></li>
|
||||
<li><a href="javascript:;" class="">恶意代码检测</a></li>
|
||||
<li><a href="javascript:;" class="">未知漏洞检测</a></li>
|
||||
<li><a href="javascript:;" class="">合规性检测</a></li>
|
||||
</ul><!----></div>
|
||||
<div class="r-links"><h5>解决方案</h5>
|
||||
<ul>
|
||||
<li><a href="javascript:;" class="">能源行业</a></li>
|
||||
<li><a href="javascript:;" class="">金融行业</a></li>
|
||||
<li><a href="javascript:;" class="">交通行业</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="r-links"><h5>资源中心</h5>
|
||||
<ul>
|
||||
<li><a target="_blank" href="javascript:;">漏洞数据库</a><!----></li>
|
||||
<li><a target="_blank" href="javascript:;">威胁情报库</a><!----></li>
|
||||
<li><a target="_blank" href="javascript:;">安全事件中心</a><!----></li>
|
||||
<li><a target="_blank" href="javascript:;">开发者文档</a><!----></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="r-links"><h5>关于我们</h5>
|
||||
<ul>
|
||||
<li><!----><a href="javascript:;" class="">公司简介</a></li>
|
||||
<li><a target="_self" class="LNK" href="javascript:;">加入我们</a><!----></li>
|
||||
<li><!----><a href="javascript:;" class="">联系方式</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="r-links"><h5>Tcode站点</h5>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://tcode.com.cn/openRepoPortal/home">可信开源代码库</a><!----></li>
|
||||
<li><a target="_blank" href="https://zzjh.org.cn/#/">创新资助计划平台</a><!----></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-botm">
|
||||
<div class="Wrap">
|
||||
<div class="beian"> © 2025 武汉金银湖实验室 ｜ <a href="" target="_blank" rel="noreferrer">京ICP备xxxxxxx号</a>
|
||||
｜ <a href="" target="_blank"
|
||||
rel="noreferrer"> 京公网安备 京ICP备xxxxxxx号 </a> ｜ <a href="/html/legal.html" target="_blank"
|
||||
rel="noreferrer">法律声明</a> ｜ <a
|
||||
href="/html/privacy.html" target="_blank" rel="noreferrer">隐私政策</a> ｜ <a
|
||||
href="/html/privacy.html" target="_blank" rel="noreferrer">服务条款</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComFooter"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comFooter {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.comFooter.EN .r-links {
|
||||
margin-right: 30px
|
||||
}
|
||||
|
||||
.comFooter.EN .contact-item {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start
|
||||
}
|
||||
|
||||
.comFooter.EN .contact-item .ICO {
|
||||
position: relative;
|
||||
top: 9px
|
||||
}
|
||||
|
||||
.comFooter.EN .contact-item .ic-addr-g {
|
||||
top: 6px
|
||||
}
|
||||
|
||||
.comFooter .contact-media {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 40px 0 0
|
||||
}
|
||||
|
||||
.comFooter .contact-media .media-item {
|
||||
margin: 0 30px 0 0;
|
||||
text-align: center;
|
||||
width: 80px
|
||||
}
|
||||
|
||||
.comFooter .contact-media .media-item img {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 2px 11px 2px rgba(0,0,0,.08);
|
||||
box-shadow: 0 2px 11px 2px #00000014;
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
padding: 10px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.comFooter .footer-l {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.comFooter .footer-l:after {
|
||||
background-color: gray;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: 0;
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.comFooter .footer-top {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
padding: 50px 45px
|
||||
}
|
||||
|
||||
.comFooter .footer-botm {
|
||||
background-color: #252525;
|
||||
color: #b0b0b0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 17px
|
||||
}
|
||||
|
||||
.comFooter .footer-botm .Wrap {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
padding: 18px 45px
|
||||
}
|
||||
|
||||
.comFooter .form-tip {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 35px;
|
||||
margin: 0 0 24px
|
||||
}
|
||||
|
||||
.comFooter .form {
|
||||
position: relative;
|
||||
width: 363px
|
||||
}
|
||||
|
||||
.comFooter .form-ipt {
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 41px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.comFooter .form-ipt:focus-visible {
|
||||
border: none
|
||||
}
|
||||
|
||||
.comFooter .form-sbmt {
|
||||
background: #4bad52;
|
||||
border: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
height: 41px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 41px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 119px
|
||||
}
|
||||
|
||||
.comFooter .form-sbmt .ICO {
|
||||
left: 6px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.comFooter .form-sbmt:hover {
|
||||
background: #7aba4a
|
||||
}
|
||||
|
||||
.comFooter .form-sbmt:hover .ICO {
|
||||
left: 15px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.comFooter .footer-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0 0 0 100px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.comFooter .r-links {
|
||||
margin: 0 55px 0 0;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.comFooter .r-links:last-child {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.comFooter .r-links h5 {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px
|
||||
}
|
||||
|
||||
.comFooter .r-links ul {
|
||||
margin: 17px 0 0
|
||||
}
|
||||
|
||||
.comFooter .r-links li {
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.comFooter .r-links a:link,.comFooter .r-links a:visited {
|
||||
color: gray;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.comFooter .r-links a:hover {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.comFooter .contact-tip {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: 51px 0 12px
|
||||
}
|
||||
|
||||
.comFooter .contact-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px
|
||||
}
|
||||
|
||||
.comFooter .contact-item .ICO {
|
||||
margin-right: 12px;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.comFooter .contact-item .ic-phone-g {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAMAAABAUVr7AAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAP8AgICAVapVQL9AM5lmVapVSbZJQJ9gVapVVapVTrFOSaRbRKpVUK9QS7RLR6pVUa5RTbNNSapVRq5RTrFOSqpVTrFOTKpVSa1ST7BPTKpVSq1SSK9QTapVS61TTKxTSKpVS65RSrBPTqxTTK5RSq9QUKpVSaxTS69QSrFOSqxTSqxTTK5RTrFSSa1SSq1STa5VTa5RTKtUS6lWS61TS6lTTq5VSa9QS6xTSKxTSq5RTKxTSq5RTatUSq5RS65RSK5RTK1SSa1PSapSSqxTS6xTSq1SS65RS69QS61SSq1SSqxTTK5RSqxTSqxRTKxTTK9TSqxTS61STK5RTKxTTK1QSa1SS6xTTK9QS61USq9STK1SS65RSa5RTK1STKxTS65TTK5RSq5RS6xTS61SSq5RTK5RS61TTK5RS61STK5RSqxTS61QS61TTK1SSq5RS65RS65RS61STKxSTK1STKxTS65RSq1SS6xTS61SS65SS61SSq5RS61STK1RSq1SSa5RTK1SS61SS61SS6xTS6xSSqxTTK1SS61SS65RS61STK1SSq1SS61TS61STKxSSq5RS65RS61SS61RSq1SS65TS6xTS61TS61SS61RTK1SS61SS61STK5TTK5RTKxTTKxRS65RTK1SSq1SS61SSq1SS65RSqxSS61SSq1RS61SS6xTS6xSTK5RTK1STK1RS61SS6xTS65SS65RTK1SS65SS61SS61SS6xSTK5STK5RTK1SSq1SS6xTS6xSSqxSS65RS61STK5SS65RTK1SS61SS61TS61SS61TS65SS65RS61SSq1TS6xSS6xTS61STK5STK1SS61SSqxTTK1SS61RTK1STKxSS61SS65SS61SS65SS61TS61SSq1SS6xTS65RSq1STK1SS61STKxTTK5STK1SS61STKxTTKxSS6xSS65SS61SSq1RS61SOBldxgAAAO90Uk5TAAECAwQFBgcICQwNDg8QERITFBUWFxgaGxwdHh8gISIlJyktLi8wMDEzNDQ3OTs7Pj8/QEFEREVGR0dISkxMT1JSVFRUWVxgYmNjZGhra2tsb29wdXV2dnt8fX+DhISGh4iKiouMjZCTlJWXl5mcnp6go6Slq6ytr7C1t7e5ur2+v8PExcXFxcbGycnKy8zNzs/Q0NDR0tLT09PU1NbY2NjY2dvc3d3f3+Dg4eHh4uLi5OTl5eXm5ufn6Ojp6urq6uvr7Ozs7O3t7u/v7/Dw8fLz8/T09fX29vf4+Pn6+vr6+/v8/Pz9/f39/f3+/v7UCC1AAAAB+ElEQVR42mNgIBYI6lpa6wjgUcDp27/99u1Nvd4cuFSI77n8ZPX0metfn68Rw65CqvX9mgQVfkG13JPvl2NXk/7uuB2E5bDpSTw2FSKz74bC2JEvp/JjUWJ0YqUyjK29dYcuFiW2j2fCPcI795IlFiWm16bBDZddvFkbixL9PQvFYezge1OEsCiRnn9QH8p0OPkwiRGLEpbu9z4QluG+9+2CWMMl7X0dWKvMqrfzRLGHrvGhpYogmq3/jT+uSGx5nwxmlL4vxxWN3jfny4Fol4sb1HAo4et4X8bKwMDA3/m+Be4YAQVNBVaEGsdjp91BtPP+5xWQqNbImbhk3aKuEC64vwtfzJQFMVIuPJ5jwsjAEH7i/Z21y868v96oDlMj2fW+FmQFY/SW99uqPWMOPWhzV5Yxjtr7/ooMTI3WnGdVwiCGfdP59++vPjwgAomcGe/L4HGst+BJJThkuWyK+lZs5IYKW+06agF3stnORxdUIUxmObgrmXveJyIF8tL3k2wwAiT/fTEST6Xx/qYILjQlde9zkLn8mQdvNDuh5CWBOQ88ULQwuU24d6relBORUPKezpJHM1cobOarI32pBuwQbuDhs+GYaUwibvK59wenNhQnBPlxBGzPYMMWqwLm2VN2v3v//v0tL2YlnOUAj65rbFZBCSQAAenMpeRemUEEAAAAAElFTkSuQmCC);
|
||||
height: 16px;
|
||||
width: 17px
|
||||
}
|
||||
|
||||
.comFooter .contact-item .ic-addr-g {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAAAXNSR0IArs4c6QAABX9JREFUeNrVWGuMFEUQXhRfaHzjA4QgRBRfwfiKiYYzenDb1bM3Xb3jcRgM+EPhj4lGNPFJEP2lf9QfoIkoEjhmu3rugJzyUCKIQBRNEI2KCAIBJQGjIARO7kzNNsve3s7ea8/ESubPTPdU9Vf1fVUzqdT/zjpSgx4Mg4syLZkrZRiMTEf+mDThNekwGBqEwQUD5pcdCqvqJOm3JOF6QfgTkD4oCE8Aqd+AcJu0eqVHOEdG/l3pRQ9fWBXH3nLvckH4OFj1DRB2uOsoGL1dEG4Cg58C4RawaieQ/if/XLWBVatELiv7jkpHalBdGNwDVq9zTtuE0SuFVbOgqWEcI+JH/sVBGJwHK+ASEQZX8XqRw9fAqs3xHqNPgNVLgaaM7rVzsGoyEO5xzteDVcjOerKdAwKjZ4JV3zlEvgXC+3vsX1g1HQweAUKGdB6/sC8gymXBSLC6OR+E3icjv6bbTTHspPeyc0n48sSFU8/vTw0pqy4Dq4mDkAa3eYsbb6hYcGBVnHNh9dv9dV7EoGGCcEWMRC7bwjQuDz1Xez7nn/cV9sS6oCmjgfBXSXhSRH5jWZ47qjGFsCeFVt9cP2KSabxJhsHwbgPuSA1KEz6XT4XeyGiXFl6dO/0qb7k3pEKahggKpnKqBOHvQNgOhHvB6jUZq4KatTWDK4mZJNzOe2TkP9ApOlY4DsCz6tmkF9w+/7Gz0hHOj1HKB3sSCA8WCdRxj/BVXldufxAGZwrChW7tm+w3fsCCwvIqSR9Nh8GNibSy2UdiahrNFF0gwmA8F5i06l4wMd3apcXDjGYixSO/MS9SuIH9ntb5WNtxOytaorjkGdIuCZ8JwuDs4ufxIaxqdTleWDhdKc2b8M44AKt2FHxxV3ONZVMhqhLjguOcC6O3MrcTTjfeIbQuqRl5YXCtMPqYJPyrLvJHxTe5pYJVbdxYkuSWq93lfHXp6QtrCK8GgwcE4cZKBwGj/2QUMmFwffFNLqbNSRvjl1u1UxDurm3JDCuLQKhqHbxLuOASZH5szByjjxQQiOlh1Q9gcR9zutxGhhQIbayShMsyJUGAbRgHRn8Zo2TVo4mFHGI2rhPSp2sg3Zo+Rxi9LH7QiZ+drXaJvgMI97tTrhNGz/KMr8GquUC4y91fU0nChdFvOBp+1CndYPTz7sG82bNnn5GkZl7kPwRWf1XE/Q6HyjHeq6y6optesyWPAL7SGeJWf4xkZbNqR1KOC2vDYGg8L1g9F6x+B3LZp2UuW8NIVmzzRmtH48P1YXBLF5UDo993avhSEo/7avHpCb9waVpcs2DauV0X5fw0yylYtUs0NYytmveiRgSEf3AtlV3HUUnC99wEE1ZrzPYoVr8D/N600XMrNaxUOmoYwxNvTKdIz+xvKpi+wuhWNxt+1qUNV2g63PH2ZIy+tT/QS6Ofcs4PQXP2vp4WzBCwalG+YDB5hOrG8r1B7XO5fzFJHcujYPR1YPFnNx8+magNCcb1I42OnPPVk8Lg0t6fgPxp+VTo/dxGe7NXWj3Daf4B0Vx/d1+5y6n40J3i46RGVWqqqeFmYdXuPHpqVm/R65qKPCtYPl/oLo9x0zKnPkZwRU+D7iYVODX+4CR9yLNqQtI6Pqmr+nYuvnRL5raqCBl3LZHDD5xAbZiY0HA419JNyp5VT1RVzt2HxY8O2tdLpyIe0yThJ64zRlX7P1DC60Zh+IcE/i2N9goSvrZmMBDOcUW3u0unq5ZxKmTO9QqjttYvmTyC72esqnVz3klh9Ixqd9JO5kf+KCD1fZ4V2XflcjncjWIc1NIB/U90yvgTTBp9XBh9Qri8S8JfClPuQBu3bTB6ftFI1iZyanrqvzTOvzT4tfsX1Fx2whloi/8TWjWhr92S7V9fD3PQ+dnr/wAAAABJRU5ErkJggg==);
|
||||
height: 21px;
|
||||
width: 16px
|
||||
}
|
||||
|
||||
.comFooter .contact-item .ic-mail-g {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAMAAAAz6Z0tAAAAAXNSR0IArs4c6QAAAadQTFRFAAAAAP8AgICAVapVQL9AM5lmVapVSbZJVapVTbNNRqJdVapVSaRbRKpVUK9QS7RLVapVR6pVUa5RTbNNSapVRq5RTrFOSrVKR61STrFOSa1ST7BPTKpVTapVS61TSa9QTqpVSq5RSqhXTaxTTK5XSrFOSK1SSKpVS6tUTq1SSa1STK5VTK5RTKpVS7BUS7BPSa5RTapVS61TSqpRSq5RTK1SSq9QSq1VTK5PS69QSq5TSqxTS6tUS65RS6tRTK1SS7BSS61USq1STKtSS65RSqtSTKxTTK5RSqxRS6xTSa1SS61SS6xRS6xTTK1STK1SSq1SS61SSq5RSa1RSq5RS61STK1TS65TSq1SSqxTSq5RS61SSq1STK1STKxTSq1SS65RS61TS61SSqxTS6xTSq5RS61TS61TS6xTS61SS6xSS61SS61STKxTSq5RS61SS6xSTK5SS65RS61SSq1SS61SS6xSTK1STK1SS61SS65TS61SS61SS61SS61RS61STK1TTK1SS61SSq1SS6xTTK1SS61SSqxSTK5RS61SS61SS61SS61SBebJyQAAAIx0Uk5TAAECAwQFBgcJCgsMDg8QERISExQVFhcYGRocHR4hIiMkJiYrLzQ1OTo7Ozw8PD09Pz9ESE9UWV1hY2hucHR0eXp6fICEhoqNkZaWnJ2foqSlp6mrra6vsLKys7S3vcLIyczQ0tXY2drb3Nzd3t7f4eHl5eXp6urr7Ozu7/Lz8/X29vb39/j5+vv8/f77eWZPAAABOUlEQVR42q3T1VMCURTH8R/ILgaCsmBgLHaL3Yrd3R2oCHa3IibC+aN9EHCH3TvDg9/nz9w558xcIKoE0cpMFDUAyja9xO6hGzCu0/stq2eiXiDLc1OVwajmgMb0gJW2BcaQlW4aN+CXqEpzVXJhc9NEMoIkZ/esTmZs+zRpRIhwo3Rdr5aJKSP4ga7gLIYRumuIkYpyF00LQObFaWjcxGG6b5SYEhfNCAAsl+fhjXSDgcdmTVjs0awJEQQJ/f6nFi4s5kyQEcT3fXtb+aBYMEOBIK7H99ahBYqdtJgKRYLYzq9PO1/kpOWQkBFo2z98Qzu0kgYmgbbtlWj1TygQcE1r80mSC1quZARqHS89ssIrkf0jyX45ydMzq/AcAuYtOtpgdkxLAGodAfYf8TsKASC9oJpZfgqi6AdDypbgcduQAQAAAABJRU5ErkJggg==);
|
||||
height: 14px;
|
||||
width: 17px
|
||||
}
|
||||
|
||||
.layout {
|
||||
padding: 64px 0 0
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
-webkit-user-select: auto;
|
||||
}
|
||||
|
||||
.ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////6urq6+vr8vLy8/Pz6urq6+vr7e3t7+/v7e3t8fHx8fHx7e3t8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw7+/v8PDw8PDw8PDw8PDw8PDw8PDw7+/v7+/v8PDw8PDw7+/v8PDw8PDw8PDw8PDw7+/v7+/v8PDw7+/v7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v4uiVIAAAADx0Uk5TAAECAwYHDA0UFRgZHR8qNTc4RlNUVldkZWZnc3R2d4SGh5OUlpekpqe2t8PExsvR093f5+nw8fb3+/z+BY9v3gAAAJtJREFUKM99UkcWglAQ+wKKDcGGXVTsXbGT+5/L0Y0bM9kmb14miTE/eFmjILM/NxW6dAB2Vc5b7QRYeFyQi+54jFwuKM9TXDo2F/hb4FhTPDZOwKrCead/xWta4IJ8/MRtIDG54JCYVDpkxydyfEg6cHpibcas1eWxNXvM3yixfEPt2kolY1KJ1UqQLlmhxc8cAm1MoTa2P1N8A11AHbmJaAv2AAAAAElFTkSuQmCC);
|
||||
margin: 10px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
</style>
|
||||
145
src/views/Jyh/Home/component/ComNews.vue
Normal file
145
src/views/Jyh/Home/component/ComNews.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="com-news"><h4 class="wow animated" style="visibility: visible;">最新动态</h4>
|
||||
<ul class="wow animated" style="visibility: visible;">
|
||||
<li><a href="https://mp.weixin.qq.com/s/gFi3Lo1KFcjt0gwhetaT5w" rel="nofollow" class="EASE" target="_blank"><img
|
||||
src="@/assets/v3/6b8d01d61f9a40d2b0c74bc6783ff296.png"
|
||||
alt="“Tcode外”夺冠！网络攻防从此“攻守易形”，AI 智能体才是终极胜负手" class="EASE"></a>
|
||||
<div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/11/21</span></div>
|
||||
<h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/gFi3Lo1KFcjt0gwhetaT5w" rel="nofollow"
|
||||
class="EASE" target="_blank">“Tcode外”夺冠！网络攻防从此“攻守易形”，AI 智能体才是终极胜负手</a></h5>
|
||||
<p class="desc MultiLine">在近日结束的“腾讯云黑客松-智能渗透挑战赛”线上赛中，Tcode科技旗下“Tcode外”战队，力压 238 支全球顶尖战队，以全程稳定高分斩获第一名！</p></li>
|
||||
<li><a href="https://mp.weixin.qq.com/s/rczHE9BYY_VRMo_DgJMV-w" rel="nofollow" class="EASE" target="_blank"><img
|
||||
src="@/assets/v3/2fde85b65bc84c01b5d280151a5fb555.png"
|
||||
alt="Tcode科技上榜国家专精特新“小巨人”，以 AI 安全创新领跑网络安全新赛道" class="EASE"></a>
|
||||
<div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/10/27</span></div>
|
||||
<h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/rczHE9BYY_VRMo_DgJMV-w" rel="nofollow"
|
||||
class="EASE" target="_blank">Tcode科技上榜国家专精特新“小巨人”，以 AI 安全创新领跑网络安全新赛道</a></h5>
|
||||
<p class="desc MultiLine">近日，北京市经济和信息化局公示了北京市第七批专精特新“小巨人”企业名单，Tcode科技凭借其卓越的科技创新能力和专业化的技术实力成功入选。</p></li>
|
||||
<li><a href="https://mp.weixin.qq.com/s/9KfUvw3zmrH3CfVbXzdLhg" rel="nofollow" class="EASE" target="_blank"><img
|
||||
src="@/assets/v3/ee5c7cb6d2ef4504b0e47a2bed942d7f.png"
|
||||
alt="蝉联第一！Tcode科技再次问鼎“天网杯”" class="EASE"></a>
|
||||
<div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/09/23</span></div>
|
||||
<h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/9KfUvw3zmrH3CfVbXzdLhg" rel="nofollow"
|
||||
class="EASE" target="_blank">蝉联第一！Tcode科技再次问鼎“天网杯”</a></h5>
|
||||
<p class="desc MultiLine">9 月 23 日，在 2025 年第三届“天网杯”网络安全大赛的赛场上，Tcode科技再次展现其在漏洞挖掘领域的顶尖实力，在关键产品漏洞挖掘挑战赛中拔得头筹，获得一等奖。</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComNews"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.com-news {
|
||||
margin: 0 auto;
|
||||
padding: 100px 0 50px;
|
||||
width: 1364px
|
||||
}
|
||||
|
||||
.com-news h4 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 57px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.com-news ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.com-news li {
|
||||
list-style: none;
|
||||
margin: 0 28px 0 0;
|
||||
width: 33.333%
|
||||
}
|
||||
|
||||
.com-news li img {
|
||||
border-radius: 10px;
|
||||
height: 338px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-news li:hover img {
|
||||
-webkit-transform: scale(1.02);
|
||||
transform: scale(1.02)
|
||||
}
|
||||
|
||||
.com-news li:hover h5 {
|
||||
color: #4bb752
|
||||
}
|
||||
|
||||
.com-news .ptime {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 20px 0 0;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
.com-news .ptime span {
|
||||
color: #969696;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 17px
|
||||
}
|
||||
|
||||
.com-news li .ic-air {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAQAAAD/5HvMAAAAAXNSR0IArs4c6QAABFVJREFUeNrNmkloFFkYx4tMCB68itRXtImRqEzAZYLLQRRbBAUPCnEJfXCmIQw4kww0fRAVccFDqwh2VBQRPbkcBioEhY6oB/EyE5AOAWG2nsElM0NrYjSHHJK/dHVXpZd6Ve+rJVT9IXS/qn71y1u+73vve4ri7WpSuyhJGdIpTwUq0gzNUJEKlCedMpRUu5QmZWGuGFEf6TRBcNEE6dQXoxBR2hapCcrRrCtKtWYppybaFgUOs2QxpWmchVKtcUovWRwcTbOWoqJnGFNFLaU0B0CjbqFR3zCmRtUtvmA6WyhLc4HhlDRH2c4WjzhL22kkUBhTI0vbPeBocXUyFBwQ1EktzsXZTzNh4Ria0fZzBnIv09p40azaK9864eMYSFKtpMVD7qzajou7zqzwhrL98HaccZ0tIU10RyPgYJcou+A4JWXFTmIujBe24QiGHK23vUNpDtBnWdqAS3iDaeRcfJyN29VSwaJo6MYgpjBtKOv2dKox3ikGB7MSRzFWQSnriGtwUhcvUToomG24if9rYEra7v7LdE1w6iMatLQMSTxrQCnpI1olosqqQFdN+IVZg3P4yxampJdyRjIx32E5PzB7cB8fhTAl3ZWrKTe/sPHoTFfgJ4w4opR1UtLZVhZN1O8FZjMGMC4A+L1uWB+QrbWvDDTItTA9eITPwvZ4hpd1JWtl69aNRbHEKtTSapzAK8fuuQe9ruS1/D87oTQpapfs4ztwB+9dRstlXG4oe8wJR7oUSro/1orv8dx16H7GMaRsygc4AyKpUMb5kfU4j38kZtIkenHQdvr/wAHKKKSLb+/Dzy4WxtR/2IftNi6jpB0cIF2hvPh2D/6QwvkbcazDnwK30cYByitUcHqgA7ccJnhZY9iADvzqy21YKijuYcdex4n+Al8jhofC+/d5QEVFZtHTjgF8sn3dEFaAcMMB+BRzYaTIrsJ2I9/wstuIgXDcsUMPsYGkI8VWXKiZc+eN0m8FbWdqHbvLCpwfxPGL8ZoppIzvu1B0xHnLddoFx2lvHxeexr84bHze6Goyn3CB8o6GUaTlxt9VNqOqXle4deuurkOsaxIm80durRkp5yrqvIvWukukndxak4zww94YjDngTFU6lxV+8AK0am2qxNXXhc4lz61zwsiQcENYUzncQofxqVvgWB/wh7T3IJ8wjGn8hu7KjLtrA3SGW2efr2XQcOW1Zjt9Z+xzVKuHV+OslTvytlA0gT4hUSlZg6EaoG94NeZ8LqVNoFRNab8VN77jzrCEz82GMtDZhvKNeFpZn7HqG6/JqnnZjikBXbW9o+EEPuAar7607w2rYdyDJry7FXtZYUdDgo+/pXccy3zY+Lo2TS3QpqekRm1zjWFtC7tqTphnjNjGeQRTC5FLvkQwPRXBBF4EU5wRTAJHME0ewYMEETxqEcHDKKbbjdRxHSteitCBJivQjdCRr/krRtRPg1KH4gZDPhRXc30V1rHBL/3JmVpOd2CzAAAAAElFTkSuQmCC);
|
||||
height: 36px;
|
||||
margin-right: 14px;
|
||||
width: 36px
|
||||
}
|
||||
|
||||
.com-news li:last-child {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.com-news li h5 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
height: 60px;
|
||||
line-height: 30px;
|
||||
margin: 20px 0 0
|
||||
}
|
||||
|
||||
.com-news li .desc,.com-news li h5 {
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px
|
||||
}
|
||||
|
||||
.com-news li .desc {
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin: 18px 0 0;
|
||||
-webkit-line-clamp: 4
|
||||
}
|
||||
|
||||
.ICO {
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
140
src/views/Jyh/Home/component/ComProject/index.vue
Normal file
140
src/views/Jyh/Home/component/ComProject/index.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="secondEdition">
|
||||
<p class="theTitle">核心产品</p>
|
||||
<div>
|
||||
<div class="" style="">
|
||||
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
|
||||
<div class="ant-anchor">
|
||||
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
|
||||
|
||||
<li
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="changeTab(index)"
|
||||
>
|
||||
<a>{{ item.name }}</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-content">
|
||||
|
||||
<div v-if="activeIndex === 0" class="component-box">
|
||||
<Product1 />
|
||||
</div>
|
||||
|
||||
<div v-if="activeIndex === 1" class="component-box">
|
||||
<Product2 />
|
||||
</div>
|
||||
|
||||
<div v-if="activeIndex === 2" class="component-box">
|
||||
<Product3 />
|
||||
</div>
|
||||
|
||||
<div v-if="activeIndex === 3" class="component-box">
|
||||
<Product4 />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Product1 from './product1.vue';
|
||||
import Product2 from './product2.vue';
|
||||
import Product3 from './product3.vue';
|
||||
import Product4 from './product4.vue';
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
// 定义菜单列表数据
|
||||
const menuList = [
|
||||
{ name: '可信开源态势感知平台（源感）' },
|
||||
{ name: '金银湖代码安全大模型（源鉴）' },
|
||||
{ name: '供应链安全检测系统（源链）' },
|
||||
{ name: '智能终端应用安全监测平台（源端）' }
|
||||
];
|
||||
|
||||
const changeTab = (index) => {
|
||||
activeIndex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.secondEdition .theTitle {
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
margin: 42px 0 30px !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-affix {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||||
padding: 18px 19px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||||
color: #333 !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background-color: #466aff;
|
||||
content: "";
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active a {
|
||||
color: #466aff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
//width: 1200px;
|
||||
//margin: 40px auto;
|
||||
//min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
833
src/views/Jyh/Home/component/ComProject/product1.vue
Normal file
833
src/views/Jyh/Home/component/ComProject/product1.vue
Normal file
@@ -0,0 +1,833 @@
|
||||
<template>
|
||||
<div class="secondEditionContent">
|
||||
|
||||
<div class="hadoop" id="hadoop">
|
||||
<div class="hadoopCon">
|
||||
<div class="descBox">
|
||||
<p class="desc1">产品介绍</p>
|
||||
|
||||
<p class="desc2">
|
||||
<b>📍 定位</b><br>
|
||||
国家级开源安全数据底座 • 全景风险感知 • 实时情报监测
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>👥 目标客户与合作伙伴</b><br>
|
||||
G端（政府/事业单位）、B端（关基单位/大中企业）、生态伙伴（开源社区/代码托管平台/安全厂商）
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>💼 使用场景</b><br>
|
||||
行业监管中心、主动威胁情报、安全风险阻断
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
|
||||
<img src="@/assets/v3/Line/sec2.png" alt="态势感知运行结果" class="activeImg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
|
||||
<div class="oneStopContent">
|
||||
<div class="osLeftMain" style=" position: relative;">
|
||||
|
||||
<img src="@/assets/v3/Line/sec3.jpeg" alt="" width=700px class="osleftPosi">
|
||||
<img
|
||||
src="@/assets/v3/Line/sec3_2.png"
|
||||
alt="叠加图标"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: -100px; /* 让图片向下超出 px */
|
||||
right: -50px; /* 让图片向右超出 px */
|
||||
width: 80%;
|
||||
height: auto;
|
||||
z-index: 10; /*确保在最上层*/
|
||||
"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="@/assets/v3/Line/sec3_5.png"
|
||||
alt="新增叠加图标"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: -180px; /* 根据需要调整位置 */
|
||||
right: -90px; /* 根据需要调整位置 */
|
||||
width: 60%; /* 根据实际需求调整尺寸 */
|
||||
height: auto; /* 维持宽高比 */
|
||||
z-index: 11; /* 确保在最上层 */
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="osRightMain">
|
||||
<p class="osRightTitle">技术优势</p>
|
||||
|
||||
<p>平台架构遵循 <b>"安全数据湖仓 -> AI智能引擎 -> 智能态势应用"</b> 的演进路线</p>
|
||||
|
||||
<p><b>a.安全数据湖仓：</b>基于国家网安基地云平台，聚合全球主流开源社区，NVD/CNNVD等多源漏洞库，以及21个行业投毒威胁情报库</p>
|
||||
|
||||
<p><b>b.AI智能引擎：</b>知识图谱构建、跨域标签引擎、智能态势应用</p>
|
||||
<p><b>c.智能态势应用：</b> 对外提供SaaS订阅、API数据流、可视化大屏及私有化一体机交付</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
|
||||
</div>
|
||||
|
||||
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
|
||||
<div class="highDoTitle"><span>⚡ 创新点</span></div>
|
||||
|
||||
<div class="highDoSubtitle">
|
||||
<b>a.全景安全态势感知：</b>聚合全球开源社区，实时监控开源组件安全漏洞，以及21个行业投毒威胁情报库<br>
|
||||
<b>b.主动式漏洞挖掘：</b>通过AI驱动的补丁代码与自动化测试，挖掘0day漏洞，助建高质量CVE库<br>
|
||||
<b>c.精确溯源-组件关联：</b>借助SBOM与溯源技术，一键生成供应链图谱，自动追踪高危漏洞<br>
|
||||
<b>d.实时风险预警与应急响应：</b>智能感知异常事件的人工分析与现场处置，可视化决策支持
|
||||
</div>
|
||||
<div class="highDoContent">
|
||||
<div><img src="@/assets/v3/Line/sec10.png" alt="" width="1200px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
|
||||
<span class="title">📈 性能指标</span>
|
||||
<div class="maContent">
|
||||
</div>
|
||||
|
||||
<p class="desc">
|
||||
<b>数据提速：</b>11种主流编程语言，全球Top5开源社区全量<br>
|
||||
<b>情报时效：</b>分钟级简报，小时级预警<br>
|
||||
<b>检测能力：</b>SCA组件识别覆盖≥95%，投毒检测覆盖≥5%<br>
|
||||
<b>系统开发：</b>API接口支持方式QPS，大屏数据秒级刷新
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="multidimensional" style="opacity: 1">
|
||||
<div style="height: 168px;"></div>
|
||||
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
|
||||
<div class="multidimensinalhalf">
|
||||
<div>
|
||||
<p class="halfTitle">📊 产品功能</p>
|
||||
<p class="halfsubTitle"><b>数据标签服务：</b>行业属性、技术领域、开源贡献、组件画像<br>
|
||||
<b>风险感知服务：</b>态势大屏、情报推送、攻击面管理
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/sec5.png" alt=""
|
||||
width="820px"></div>
|
||||
</div>
|
||||
<div class="multidimensinalPart">
|
||||
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/sec11.png" alt=""
|
||||
width="614px"></div>
|
||||
<div>
|
||||
<p><b>数据定制服务：</b>情报订阅、深度分析、API对接<br><br>
|
||||
<b>安全预警与应急响应服务：</b>分级预警、应急处置、协同指挥
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
|
||||
// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
|
||||
const targetElements = ref({});
|
||||
// 2. 存储交叉观察者实例
|
||||
let observer = null;
|
||||
|
||||
// 3. 规范的 ref 收集函数：处理元素挂载/卸载
|
||||
const setTargetRef = (el, key) => {
|
||||
if (el) {
|
||||
// 元素挂载：存入对象
|
||||
targetElements.value[key] = el;
|
||||
} else {
|
||||
// 元素卸载：从对象中移除
|
||||
delete targetElements.value[key];
|
||||
}
|
||||
};
|
||||
|
||||
// 4. 初始化交叉观察者（批量监听）
|
||||
const initObserver = () => {
|
||||
// 获取所有元素的数组
|
||||
const elements = Object.values(targetElements.value);
|
||||
if (elements.length === 0) return;
|
||||
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observerCallback = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('activeCode');
|
||||
} else {
|
||||
// 可选：离开视口时移除类
|
||||
// entry.target.classList.remove('activeCode');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
observer = new IntersectionObserver(observerCallback, observerOptions);
|
||||
// 批量监听所有元素
|
||||
elements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
// 5. 组件挂载时：等待DOM渲染完成后初始化
|
||||
onMounted(async () => {
|
||||
// 清空原有元素（防止重渲染重复）
|
||||
targetElements.value = {};
|
||||
await nextTick(); // 等待DOM渲染完成
|
||||
initObserver();
|
||||
});
|
||||
|
||||
// 6. 组件卸载时：批量销毁观察者
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
// 停止监听所有元素
|
||||
Object.values(targetElements.value).forEach((el) => {
|
||||
observer.unobserve(el);
|
||||
});
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.secondEdition .theTitle {
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
margin: 42px 0 30px !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-affix {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||||
bottom: 0;
|
||||
top: auto
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||||
padding: 18px 19px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #466aff;
|
||||
content: "";
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent {
|
||||
padding: 65px 0;
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop {
|
||||
background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
min-height: 753px;
|
||||
padding: 50px 56px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopCon {
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox {
|
||||
max-width: 352px;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(90deg, #50edff, #557cff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
|
||||
height: 72px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #69daf5;
|
||||
line-height: 36px;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
|
||||
height: 108px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 36px;
|
||||
margin-top: 100px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 40px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop {
|
||||
text-align: center;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 182px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
|
||||
margin-left: 22px;
|
||||
text-align: left;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-top: 28px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
|
||||
font-size: 20px;
|
||||
color: #637497;
|
||||
line-height: 36px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0 !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .imgring,
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi {
|
||||
transition: 3s;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi1,
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
position: absolute;
|
||||
right: -200px;
|
||||
top: 102px;
|
||||
transition: 2s;
|
||||
opacity: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
top: 317px;
|
||||
right: 10px;
|
||||
transition: 2.5s;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode,
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi,
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1,
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
|
||||
right: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
top: 217px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
|
||||
bottom: 62px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
|
||||
bottom: 215px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle {
|
||||
position: relative;
|
||||
padding: 2px;
|
||||
width: 384px;
|
||||
height: 90px;
|
||||
margin: 7px auto 0;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle span {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
border-radius: 10px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
top: 2px;
|
||||
left: 2px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
|
||||
color: #637497;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
max-width: 950px;
|
||||
margin: 30px auto 28px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent {
|
||||
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 920px;
|
||||
padding: 20px 0 114px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent img {
|
||||
opacity: 0;
|
||||
transition: 2.4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: 1s;
|
||||
transition-delay: 1s;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
transition: 2s;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 39px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse {
|
||||
background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 850px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
|
||||
transform: rotateY(1turn)
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .title {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 46px;
|
||||
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 50px;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
|
||||
height: 400px;
|
||||
width: 1000px;
|
||||
background: url(@/assets/v3/Line/sec7.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 26px 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .desc {
|
||||
text-align: center;
|
||||
max-width: 869px;
|
||||
line-height: 30px;
|
||||
color: #69daf5;
|
||||
font-weight: 400;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional {
|
||||
background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 1139px;
|
||||
padding: 100px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 447px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 70px !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: #000;
|
||||
max-width: 350px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
|
||||
left: 0;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
height: 396px;
|
||||
transition: 4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart img {
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p {
|
||||
max-width: 422px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: #000;
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
|
||||
margin-bottom: 55px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
margin-left: -4px;
|
||||
padding-left: 4px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
padding-left: 2px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper .ant-anchor-ink:before {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.ant-anchor {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.ant-anchor-ink {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-anchor-ink::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #e8e8e8;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.ant-anchor-ink-ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #466aff;
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
html li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #466aff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
div,
|
||||
img,
|
||||
tr,
|
||||
td,
|
||||
table {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: none;
|
||||
height: revert-layer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
margin-left: 32px;
|
||||
//box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hadoopCode>img {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
width: 805px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.activeCode>img.activeImg {
|
||||
right: 0;
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
transition: 1s;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
934
src/views/Jyh/Home/component/ComProject/product2.vue
Normal file
934
src/views/Jyh/Home/component/ComProject/product2.vue
Normal file
@@ -0,0 +1,934 @@
|
||||
<template>
|
||||
<div class="secondEditionContent">
|
||||
|
||||
<div class="hadoop" id="hadoop">
|
||||
<div class="hadoopCon">
|
||||
<div class="descBox">
|
||||
<p class="desc1">产品介绍</p>
|
||||
|
||||
<p class="desc2">
|
||||
<b>📍 定位</b><br>
|
||||
安全领域智能专家，强化安全基座能力，驱动上层安全应用的核心大脑。
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>👥 目标客户</b><br>
|
||||
关基单位、互联网企业、软件开发商
|
||||
</p>
|
||||
|
||||
<p class="desc3" style="margin-top: 50px;">
|
||||
<b>💼 使用场景</b><br>
|
||||
DevSecOps软件安全开发、系统安全运维、合规审计与治理
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
|
||||
<img src="@/assets/v3/Line/1.png" alt="金银湖安全大模型架构示意图" class="activeImg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p class="hadoopdesc">懂代码，更懂安全的 AI 专家！</p> -->
|
||||
</div>
|
||||
|
||||
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
|
||||
<div class="oneStopContent">
|
||||
<div class="osLeftMain"><img src="@/assets/v3/Line/1-1.png" alt="" width="520px"
|
||||
class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
|
||||
width="213px" style="margin-left: -12px;"><img
|
||||
src="@/assets/v3/Line/1-3.png" alt="" width="653px" class="mt-[100px] osleftPosi1"><img
|
||||
src="@/assets/v3/Line/1-5.png" alt="" width="367px" class="mt-[250px] osleftPosi2"></div>
|
||||
<div class="osRightMain">
|
||||
<p class="osRightTitle">💡 创新亮点</p>
|
||||
|
||||
<p><b>01.全面漏洞数据集：</b>已收集高质量漏洞代码样本349547条，涵盖30余种编程语言，总规模约48.7GB，其中CWE漏洞提交信息87279条</p>
|
||||
|
||||
<p><b>02.专家经验融合：</b>将安全专家经验以COT思维链形式嵌入训练，构建具备可解释推理链的安全AI基座</p>
|
||||
|
||||
<p><b>03.仓库级漏洞检测：</b>基于AST语法树与函数调用图，结合静态分析、AI语义理解，自动完成漏洞精准定位与去重</p>
|
||||
|
||||
<p><b>04.智能检测修复：</b>支持漏洞检测识别与自动修复，通过领域知识输入降低误报率，提升修复代码质量</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
|
||||
</div>
|
||||
|
||||
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
|
||||
<div class="highDoTitle"><span>系统优势</span></div>
|
||||
|
||||
|
||||
<div class="highDoContent">
|
||||
<table class="comparisonTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="headerCol">对比维度</th>
|
||||
<th class="highlightCol">金银湖安全大模型</th>
|
||||
<th>传统工具<br><span style="font-size: 14px; font-weight: 400;">(Fortify SCA、coverity等)</span></th>
|
||||
<th>类似大模型平台<br><span style="font-size: 14px; font-weight: 400;">(BiDeepSeek、Chat金银湖大模型等)</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="headerCol">功能定位</td>
|
||||
<td class="highlightCol">专注代码安全、实现可信组件的智能组装</td>
|
||||
<td>静态分析工具主要就是为了在不运行代码的情况下发现潜在的错误和安全漏洞</td>
|
||||
<td>覆盖文本生成、问答等广泛场景</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">代码生成能力</td>
|
||||
<td class="highlightCol">可信组件智能组合，减少人工干预</td>
|
||||
<td>它们是分析工具，不是生成工具，所以不具备代码生成能力</td>
|
||||
<td>有限的代码生成能力，不涉及组件级别的生成与复合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">报告输出</td>
|
||||
<td class="highlightCol">结构化报告（含漏洞类型、风险等级、修复代码）一键生成下载</td>
|
||||
<td>输出详细的缺陷报告，但通常是列表形式，不如智能平台"翻译"和"一键生成修复建议"</td>
|
||||
<td>无标准化报告生成功能，需人工整理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">检测范围</td>
|
||||
<td class="highlightCol">仓库级代码扫描，突破上下文长度限制，精准识别跨文件漏洞</td>
|
||||
<td>在处理大型、复杂项目时，特别是在跨文件、跨模块分析方面可能遇到限制，容易产生误报或漏报</td>
|
||||
<td>受限于Token长度，仅支持单文件片段分析</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">工具链集成</td>
|
||||
<td class="highlightCol">提供IDE插件、MCP接口，无缝集成DevOps流程</td>
|
||||
<td>DevOps流程（如CI/CD管道）集成时，通常需要更多的手动配置和脚本支持</td>
|
||||
<td>无工具链集成能力，需额外开发对接</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">安全能力矩阵</td>
|
||||
<td class="highlightCol">静态审计+动态扫描+修复验证，形成完整安全工具链</td>
|
||||
<td>只做静态分析，不涉及动态测试或自动修复验证</td>
|
||||
<td>单一模型能力，缺乏工具协同</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">行业定制</td>
|
||||
<td class="highlightCol">支持金融、政务等场景的定制化私有部署</td>
|
||||
<td>大多数传统静态分析工具是通用型的，缺乏针对特定行业（如金融、医疗等）的合规性要求及特定风险模式的深度定制能力</td>
|
||||
<td>无法满足单独行业特殊需求</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="headerCol">智能决策能力</td>
|
||||
<td class="highlightCol">基于多智能体协作和专业知识库优化学习，生成改进策略与漏洞利用建议</td>
|
||||
<td>只是发现问题，不具备"智能"地提供优化建议或漏洞利用建议的能力，需要安全专家的人工分析</td>
|
||||
<td>单一模型，缺乏专业知识库</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
|
||||
<span class="title">落地案例</span>
|
||||
<div class="maContent">
|
||||
</div>
|
||||
|
||||
<p class="desc">
|
||||
<b>01.国家关键信息基础设施开源组件治理</b><br>
|
||||
深耕电力、交通、通信等国家命脉领域，深度审计核心系统开源组件；累计检出185个未知高危漏洞，智能生成合规修复方案；构建漏洞安全主动防御体系，实现漏洞治理率超90%。<br>
|
||||
<b>02.湖北电信核心业务系统智能漏洞治理</b><br>
|
||||
覆盖全省业务系统与云平台环境，支持Java/Python/Go等多语言自动扫描；平均修复周期由30天缩短至7天，平均修复周期提升60%；保障电信核心业务安全稳定上线，筑牢数字基础设施安全防线。<br>
|
||||
|
||||
<b>03.某研究所保密业务系统源码审计</b><br>
|
||||
聚焦C/C++核心模块复杂业务逻辑，深度审计多级指针操作关键代码；精准识别到空指针解引用、缓冲区溢出等传统工具检测盲区；构建保密场景智能审计标准流程，树立关键系统安全治理行业标杆。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="multidimensional" style="opacity: 1">
|
||||
<div style="height: 168px;"></div>
|
||||
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
|
||||
<div class="multidimensinalhalf">
|
||||
<div>
|
||||
<p class="halfTitle">🎯 市场推广</p>
|
||||
<p class="halfsubTitle">
|
||||
<b>面向客户：</b><br>
|
||||
强合规型：能源、金融、运营商、政务（信创）等。<br>
|
||||
高敏捷型：互联网大厂、车联网、AI厂商等。
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/1-7.jpg" alt=""
|
||||
width="820px"></div>
|
||||
</div>
|
||||
<div class="multidimensinalPart">
|
||||
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/1-6.jpg" alt=""
|
||||
width="614px"></div>
|
||||
<div>
|
||||
<p class="halfsubTitle">
|
||||
<b>收费模式：</b><br><br>
|
||||
<b>● SaaS型：</b>按用户数、用量或功能计费，灵活低门槛，快速覆盖中小企业与互联网客户。<br><br>
|
||||
<b>● 软硬件一体化部署：</b>私有化部署满足安全性，金融等高点业务对数据安全、模型可控与高创新配的高要求，形成高价值单。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
|
||||
// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
|
||||
const targetElements = ref({});
|
||||
// 2. 存储交叉观察者实例
|
||||
let observer = null;
|
||||
|
||||
// 3. 规范的 ref 收集函数：处理元素挂载/卸载
|
||||
const setTargetRef = (el, key) => {
|
||||
if (el) {
|
||||
// 元素挂载：存入对象
|
||||
targetElements.value[key] = el;
|
||||
} else {
|
||||
// 元素卸载：从对象中移除
|
||||
delete targetElements.value[key];
|
||||
}
|
||||
};
|
||||
|
||||
// 4. 初始化交叉观察者（批量监听）
|
||||
const initObserver = () => {
|
||||
// 获取所有元素的数组
|
||||
const elements = Object.values(targetElements.value);
|
||||
if (elements.length === 0) return;
|
||||
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observerCallback = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('activeCode');
|
||||
} else {
|
||||
// 可选：离开视口时移除类
|
||||
// entry.target.classList.remove('activeCode');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
observer = new IntersectionObserver(observerCallback, observerOptions);
|
||||
// 批量监听所有元素
|
||||
elements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
// 5. 组件挂载时：等待DOM渲染完成后初始化
|
||||
onMounted(async () => {
|
||||
// 清空原有元素（防止重渲染重复）
|
||||
targetElements.value = {};
|
||||
await nextTick(); // 等待DOM渲染完成
|
||||
initObserver();
|
||||
});
|
||||
|
||||
// 6. 组件卸载时：批量销毁观察者
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
// 停止监听所有元素
|
||||
Object.values(targetElements.value).forEach((el) => {
|
||||
observer.unobserve(el);
|
||||
});
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.secondEdition .theTitle {
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
margin: 42px 0 30px !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-affix {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||||
bottom: 0;
|
||||
top: auto
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||||
padding: 18px 19px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #466aff;
|
||||
content: "";
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent {
|
||||
padding: 65px 0;
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop {
|
||||
background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
min-height: 753px;
|
||||
padding: 50px 56px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopCon {
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox {
|
||||
max-width: 352px;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(90deg, #50edff, #557cff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
|
||||
height: 72px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #69daf5;
|
||||
line-height: 36px;
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
|
||||
height: 108px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 36px;
|
||||
margin-top: 130px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 40px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop {
|
||||
text-align: center;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 182px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
|
||||
margin-left: 22px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-top: 28px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
|
||||
font-size: 20px;
|
||||
color: #637497;
|
||||
line-height: 36px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0 !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
|
||||
transition: 3s;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
position: absolute;
|
||||
right: -200px;
|
||||
top: 102px;
|
||||
transition: 2s;
|
||||
opacity: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
top: 317px;
|
||||
right: 10px;
|
||||
transition: 2.5s;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
|
||||
right: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
top: 217px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
|
||||
bottom: 62px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
|
||||
bottom: 215px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle {
|
||||
position: relative;
|
||||
padding: 2px;
|
||||
width: 384px;
|
||||
height: 90px;
|
||||
margin: 7px auto 0;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle span {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
border-radius: 10px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
top: 2px;
|
||||
left: 2px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
|
||||
color: #637497;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
max-width: 950px;
|
||||
margin: 30px auto 28px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent {
|
||||
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
min-height: 920px;
|
||||
padding: 40px 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comparisonTable {
|
||||
width: 100%;
|
||||
max-width: 1160px;
|
||||
border-collapse: collapse;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.comparisonTable thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comparisonTable th {
|
||||
padding: 18px 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.comparisonTable th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.comparisonTable tbody tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.comparisonTable tbody tr:hover {
|
||||
background-color: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
.comparisonTable tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.comparisonTable td {
|
||||
padding: 16px 12px;
|
||||
text-align: left;
|
||||
color: #374151;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.comparisonTable td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.comparisonTable .headerCol {
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.comparisonTable .highlightCol {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
font-weight: 500;
|
||||
color: #92400e;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comparisonTable .highlightCol::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #059669;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent img {
|
||||
opacity: 0;
|
||||
transition: 2.4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: 1s;
|
||||
transition-delay: 1s;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
transition: 2s;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 39px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse {
|
||||
background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 710px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
|
||||
transform: rotateY(1turn)
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .title {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0px;
|
||||
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 50px;
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
|
||||
height: 400px;
|
||||
width: 723px;
|
||||
background: url(@/assets/v3/Line/1-8.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 26px 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .desc {
|
||||
text-align: center;
|
||||
//max-width: 869px;
|
||||
line-height: 30px;
|
||||
color: #69daf5;
|
||||
font-weight: 400;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional {
|
||||
background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 1139px;
|
||||
padding: 100px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 447px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 70px !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: #000;
|
||||
max-width: 350px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
|
||||
left: 0;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
height: 396px;
|
||||
transition: 4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart img {
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p {
|
||||
max-width: 422px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: #000;
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
|
||||
margin-bottom: 55px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
margin-left: -4px;
|
||||
padding-left: 4px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
padding-left: 2px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper .ant-anchor-ink:before {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.ant-anchor {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.ant-anchor-ink {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-anchor-ink::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #e8e8e8;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.ant-anchor-ink-ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #466aff;
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
html li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #466aff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
div, img, tr, td, table {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img, video {
|
||||
max-width: none;
|
||||
height: revert-layer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
margin-left: 32px;
|
||||
//box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hadoopCode>img {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
width: 805px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.activeCode>img.activeImg {
|
||||
right: 0;
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
transition: 1s;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
851
src/views/Jyh/Home/component/ComProject/product3.vue
Normal file
851
src/views/Jyh/Home/component/ComProject/product3.vue
Normal file
@@ -0,0 +1,851 @@
|
||||
<template>
|
||||
<div class="secondEditionContent">
|
||||
|
||||
<div class="hadoop" id="hadoop">
|
||||
<div class="hadoopCon">
|
||||
<div class="descBox">
|
||||
<p class="desc1">产品介绍</p>
|
||||
|
||||
<p class="desc2">
|
||||
<b>📍 定位</b><br>
|
||||
深度洞察软件成分 • 一键识别安全合规风险
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>👥 目标客户</b><br>
|
||||
关基行业、政府、企业（软件开发企业、网安及互联网企业等）
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>💼 使用场景</b><br>
|
||||
软件采购与引入前、软件开发与构建中、内部资产管理与治理、合规审计与响应
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
|
||||
<img src="@/assets/v3/Line/jiance.png" alt="软件供应链检测平台资产视图" class="activeImg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p class="hadoopdesc">透视黑盒，溯源无忧</p> -->
|
||||
</div>
|
||||
|
||||
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
|
||||
<div class="oneStopContent">
|
||||
<div class="osLeftMain">
|
||||
<img src="@/assets/v3/Line/jishu4.png" alt="技术优势图4" width="500px" height="300px" class="img1">
|
||||
<!-- <img src="@/assets/v3/Line/jishu3.png" alt="技术优势图3" width="180px" class="img2"> -->
|
||||
<img src="@/assets/v3/Line/jishu2.png" alt="技术优势图2" width="540px" height="350px" class="img3">
|
||||
<img src="@/assets/v3/Line/jishu1.png" alt="技术优势图1" width="360px" height="300px" class="img4">
|
||||
</div>
|
||||
<div class="osRightMain">
|
||||
<p class="osRightTitle">💡 技术优势</p>
|
||||
|
||||
<p><b>01.供应链溯源检测能力：</b>全景软件依赖图谱、精准软件成分识别，经第三方测试自研供应链溯源检测引擎检测准确率为95%</p>
|
||||
|
||||
<p><b>02.代码合规检测能力：</b>许可证兼容性检测、许可证兼容性关联检测，支持多种主流许可证格式</p>
|
||||
|
||||
<p><b>03.恶意代码检测能力：</b>首创11种语言跨组件投毒分析能力，集成21个行业投毒情报库</p>
|
||||
|
||||
<p><b>04.漏洞可达性分析能力：</b>识别漏洞影响路径，精准定位受影响组件；判断组件补丁状态，跟踪已修复路径</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
|
||||
</div>
|
||||
|
||||
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
|
||||
<div class="highDoTitle"><span>⚡ 创新点</span></div>
|
||||
|
||||
<div class="highDoSubtitle">
|
||||
<b>01.</b>融合函数调用图的结构化语义表达与哈希精确匹配，弥补哈希仅依赖特征值匹配、缺乏语义关联的短板<br>
|
||||
<b>02.</b>引入中心性分析量化函数，为哈希精确匹配中的核心函数筛选提供量化依据，提升匹配针对性<br>
|
||||
<b>03.</b>以组件知识图谱与漏洞知识图谱为核心，构建影响软件版本节点与组件节点的关联，形成完整供应链知识图谱
|
||||
</div>
|
||||
<div class="highDoContent">
|
||||
<div>
|
||||
<img src="@/assets/v3/Line/chuangxin2.png" alt="" width="600px">
|
||||
<img src="@/assets/v3/Line/kehu.png" alt="" style="margin-top: 100px" width="600px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
|
||||
<span class="title">🎯 技术路线</span>
|
||||
<div class="maContent">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multidimensional" style="opacity: 1">
|
||||
<div style="height: 168px;"></div>
|
||||
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
|
||||
<div class="multidimensinalhalf">
|
||||
<div>
|
||||
<p class="halfTitle">📊 产品功能</p>
|
||||
<p class="halfsubTitle"><b>平台展示及用户交互模块：</b>Web界面和API、项目管理、扫描任务配置、结果可视化和自定义报告<br>
|
||||
<b>数据管理模块：</b>负责内部和外部数据的采集、存储、清洗和更新，包括漏洞数据库、组件信息、许可证文本和恶意代码特征<br>
|
||||
<b>包管理器SCA引擎：</b>针对常见包管理器（如npm、PyPI、Maven）的依赖分析引擎，自动识别组件及其版本
|
||||
</p>
|
||||
</div>
|
||||
<div><img style="margin-left: 100px;" src="@/assets/v3/Line/chanpin1.png" alt=""
|
||||
width="620px"></div>
|
||||
</div>
|
||||
<div class="multidimensinalPart">
|
||||
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/chanpin2.png" alt=""
|
||||
width="620px" class="wdsdsf"></div>
|
||||
<div>
|
||||
<p><b>C/C++ SCA引擎：</b>处理C/C++项目成分分析，支持源代码和编译依赖扫描<br><br>
|
||||
<b>二进制SCA引擎：</b>针对二进制文件分析，通过反编译和特征匹配识别成分和漏洞<br><br>
|
||||
<b>供应链溯源检测：</b>综合多数据源和引擎结果，检测供应链安全漏洞<br><br>
|
||||
<b>许可证兼容性检测：</b>分析组件许可证信息，检查兼容性和合规性<br><br>
|
||||
<b>恶意代码检测：</b>集成恶意代码扫描，识别供应链恶意组件
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
|
||||
// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
|
||||
const targetElements = ref({});
|
||||
// 2. 存储交叉观察者实例
|
||||
let observer = null;
|
||||
|
||||
// 3. 规范的 ref 收集函数：处理元素挂载/卸载
|
||||
const setTargetRef = (el, key) => {
|
||||
if (el) {
|
||||
// 元素挂载：存入对象
|
||||
targetElements.value[key] = el;
|
||||
} else {
|
||||
// 元素卸载：从对象中移除
|
||||
delete targetElements.value[key];
|
||||
}
|
||||
};
|
||||
|
||||
// 4. 初始化交叉观察者（批量监听）
|
||||
const initObserver = () => {
|
||||
// 获取所有元素的数组
|
||||
const elements = Object.values(targetElements.value);
|
||||
if (elements.length === 0) return;
|
||||
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observerCallback = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('activeCode');
|
||||
} else {
|
||||
// 可选：离开视口时移除类
|
||||
// entry.target.classList.remove('activeCode');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
observer = new IntersectionObserver(observerCallback, observerOptions);
|
||||
// 批量监听所有元素
|
||||
elements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
// 5. 组件挂载时：等待DOM渲染完成后初始化
|
||||
onMounted(async () => {
|
||||
// 清空原有元素（防止重渲染重复）
|
||||
targetElements.value = {};
|
||||
await nextTick(); // 等待DOM渲染完成
|
||||
initObserver();
|
||||
});
|
||||
|
||||
// 6. 组件卸载时：批量销毁观察者
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
// 停止监听所有元素
|
||||
Object.values(targetElements.value).forEach((el) => {
|
||||
observer.unobserve(el);
|
||||
});
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.secondEdition .theTitle {
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
margin: 42px 0 30px !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-affix {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||||
bottom: 0;
|
||||
top: auto
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||||
padding: 18px 19px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #466aff;
|
||||
content: "";
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent {
|
||||
padding: 65px 0;
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop {
|
||||
background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
min-height: 753px;
|
||||
padding: 50px 56px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopCon {
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox {
|
||||
max-width: 352px;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(90deg, #50edff, #557cff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
|
||||
height: 72px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #69daf5;
|
||||
line-height: 36px;
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
|
||||
height: 108px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 36px;
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 40px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop {
|
||||
text-align: center;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 182px;
|
||||
margin-left: 290px;
|
||||
width: 450px;
|
||||
height: 320px;
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
|
||||
margin-left: 30px;
|
||||
text-align: left;
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
|
||||
font-size: 20px;
|
||||
color: #637497;
|
||||
line-height: 36px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0 !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .imgring {
|
||||
transition: 3s;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osLeftMain img {
|
||||
opacity: 0;
|
||||
transition: all 2s ease-out;
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osLeftMain .img1 {
|
||||
left: -150px;
|
||||
top: 10px;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osLeftMain .img2 {
|
||||
right: -150px;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
transition-delay: 0.3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osLeftMain .img3 {
|
||||
left: -150px;
|
||||
bottom: -50px;
|
||||
z-index: 2;
|
||||
transition-delay: 0.2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osLeftMain .img4 {
|
||||
right: -150px;
|
||||
bottom: 20px;
|
||||
z-index: 4;
|
||||
transition-delay: 0.4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain img {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img1 {
|
||||
left: -190px;
|
||||
top: 15px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img2 {
|
||||
right: 30px;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img3 {
|
||||
left: -150px;
|
||||
bottom: 15px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img4 {
|
||||
right: 15px;
|
||||
bottom: 20px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
|
||||
opacity: 1;
|
||||
padding-top:10px;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
|
||||
bottom: 62px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
|
||||
bottom: 215px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle {
|
||||
position: relative;
|
||||
padding: 2px;
|
||||
width: 384px;
|
||||
height: 90px;
|
||||
margin: 7px auto 0;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle span {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
border-radius: 10px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
top: 2px;
|
||||
left: 2px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
|
||||
color: #637497;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
max-width: 950px;
|
||||
margin: 30px auto 28px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent {
|
||||
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 920px;
|
||||
padding: 20px 0 114px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent img {
|
||||
opacity: 0;
|
||||
transition: 2.4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: 1s;
|
||||
transition-delay: 1s;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
transition: 2s;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 39px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse {
|
||||
background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 710px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
|
||||
transform: rotateY(1turn)
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .title {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 66px;
|
||||
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 50px;
|
||||
margin-top: -20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
background: url(@/assets/v3/Line/chuangxin1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 26px 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .desc {
|
||||
text-align: center;
|
||||
max-width: 869px;
|
||||
line-height: 30px;
|
||||
color: #69daf5;
|
||||
font-weight: 400;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional {
|
||||
background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 1139px;
|
||||
padding: 100px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 447px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 70px !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: #000;
|
||||
max-width: 350px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
top:10
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
height: 396px;
|
||||
transition: 4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart img {
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p {
|
||||
max-width: 422px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: #000;
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
|
||||
margin-bottom: 55px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
margin-left: -4px;
|
||||
padding-left: 4px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
padding-left: 2px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper .ant-anchor-ink:before {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.ant-anchor {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.ant-anchor-ink {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-anchor-ink::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #e8e8e8;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.ant-anchor-ink-ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #466aff;
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
.wdsdsf{
|
||||
margin-left: -100px;
|
||||
}
|
||||
html li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #466aff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
div,
|
||||
img,
|
||||
tr,
|
||||
td,
|
||||
table {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: none;
|
||||
height: revert-layer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
margin-left: 32px;
|
||||
//box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hadoopCode>img {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
width: 805px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.activeCode>img.activeImg {
|
||||
right: 0;
|
||||
top: 30px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
transition: 1s;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
807
src/views/Jyh/Home/component/ComProject/product4.vue
Normal file
807
src/views/Jyh/Home/component/ComProject/product4.vue
Normal file
@@ -0,0 +1,807 @@
|
||||
<template>
|
||||
<div class="secondEditionContent">
|
||||
|
||||
<div class="hadoop" id="hadoop">
|
||||
<div class="hadoopCon">
|
||||
<div class="descBox">
|
||||
<p class="desc1">产品介绍</p>
|
||||
<p class="desc2">
|
||||
<b>📍 定位</b><br>
|
||||
多端安全智能防护、全场景风险感知、实时安全监测
|
||||
</p>
|
||||
|
||||
<p class="desc3">
|
||||
<b>👥 目标客户</b><br>
|
||||
车联网APP安全、无人机安全、具身智能安全、工业IoT安全
|
||||
</p>
|
||||
|
||||
<p class="desc3" style="margin-top: 50px;">
|
||||
<b>💼 核心技术路线</b><br>
|
||||
轻量级语义模型 → 深度图谱分析 → 持续演化学习
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
|
||||
<img src="@/assets/v3/Line/zhineng.png" alt="智能终端安全监测平台威胁分析界面" class="activeImg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p class="hadoopdesc">守护终端，运行无界</p> -->
|
||||
</div>
|
||||
|
||||
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
|
||||
<div class="oneStopContent">
|
||||
<div class="osLeftMain"><img src="@/assets/v3/Line/znzd3.png" alt="" width="520px"
|
||||
class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
|
||||
width="213px" style="margin-left: -12px;"><img
|
||||
src="@/assets/v3/Line/znzd2.png" alt="" width="653px" class="osleftPosi1"><img
|
||||
src="@/assets/v3/Line/znzd10.png" alt="" height="330px" width="367px" class="osleftPosi2"></div>
|
||||
<div class="osRightMain">
|
||||
<p class="osRightTitle">💡 平台概述</p>
|
||||
|
||||
<p><b>智能终端安全检测平台专注于移动应用程序和终端设备的安全防护，</b>提供从应用上架审核到实时运行监控的全生命周期安全治理方案</p>
|
||||
|
||||
<p><b>● 毫秒级检测审核速度：</b>支持海量应用快速扫描</p>
|
||||
|
||||
<p><b>● 实时阻断恶意代码：</b>主动挖掘零日威胁</p>
|
||||
|
||||
<p><b>● 主动挖掘零日威胁：</b>持续发现新型攻击手段</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
|
||||
</div>
|
||||
|
||||
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
|
||||
<div class="highDoTitle"><span>⚡ 核心技术路线</span></div>
|
||||
|
||||
<div class="highDoSubtitle">
|
||||
<b>采用"轻量级语义模型 → 深度图谱分析 → 持续演化学习"技术路线</b><br><br>
|
||||
以轻量级高效预处理、或数据调用与权限列表关系，实现用户应用快速检测；通过动态抗拒技术，实现对恶意API调用的监控；基于AI的行为分析模型，识别已知和未知威胁；提供实时告警与自启动应对机制
|
||||
</div>
|
||||
<div class="highDoContent">
|
||||
<div><img src="@/assets/v3/Line/znzd4.png" alt="" width="794px">
|
||||
<div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
|
||||
src="@/assets/v3/Line/znzd11.png" alt="" width="520px"></div>
|
||||
<img src="@/assets/v3/Line/znzd9.png" alt="" width="427px" class="highImg2"><img
|
||||
src="@/assets/v3/Line/znzd8.png" alt="" width="413px" class="highImg1"></div>
|
||||
<!-- <p class="highDoBottondesc">实现 <b>终端安全事件的可视化、可追溯、可阻断</b>！</p> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
|
||||
<span class="title">📊 核心优势</span>
|
||||
<div class="maContent">
|
||||
</div>
|
||||
|
||||
<p class="desc">
|
||||
<b>● 检测精度：</b>95% - 高精确下实现零误杀工业化检测，显著优于主流工具<br>
|
||||
<b>● Zero-day样本：</b>530 - 在Google Play实战中发现的现有防护体系未发现的样本<br>
|
||||
<b>● 跨平台特征覆盖：</b>免人工干预应急响应，不依赖已知特征库的零日挖掘能力<br>
|
||||
<b>● 毫秒级检测速度：</b>轻量级语义模型与高效预处理理论，实现用户应用快速检测审核，极大提升大规模检测效率<br>
|
||||
<b>● 零日威胁挖掘：</b>不依赖已知特征库的零日挖掘能力，主动发现未知威胁，提前防护下一代攻击<br>
|
||||
<b>● 社会动力学识别：</b>首创基于社会动力学（中心度、亲密度、同质性）识别恶意软件，提高购买性恶意软件检测率<br>
|
||||
<b>● 持续演化学习：</b>构建抗拒概念漂移的持续演化检测框架，随着恶意软件变化自动调整检测策略，保持长期有效性
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="multidimensional" style="opacity: 1">
|
||||
<div style="height: 168px;"></div>
|
||||
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
|
||||
<div class="multidimensinalhalf">
|
||||
<div>
|
||||
<p class="halfTitle">🚗 应用场景</p>
|
||||
<p class="halfsubTitle">
|
||||
<b>车联网安全：</b><br>
|
||||
● 车载系统组件生命周期安全全检测<br>
|
||||
● 车载软件供应链风险检测<br>
|
||||
● 运行安全监测与漏洞修复
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/znzd5.png" alt=""
|
||||
width="820px"></div>
|
||||
</div>
|
||||
<div class="multidimensinalPart">
|
||||
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/znzd6.png" alt=""
|
||||
width="614px"></div>
|
||||
<div>
|
||||
<p class="halfsubTitle">
|
||||
<b>无人机安全：</b><br>
|
||||
● 飞控系统代码安全审计<br>
|
||||
● 防止与飞行器通讯安全监测<br>
|
||||
● 通信链路劫持风险身份认证<br><br>
|
||||
<b>工业IoT安全：</b><br>
|
||||
● 工业控制系统(ICS)安全监测<br>
|
||||
● 物联网设备固件安全分析<br>
|
||||
● OT与IT融合安全防护
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
|
||||
// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
|
||||
const targetElements = ref({});
|
||||
// 2. 存储交叉观察者实例
|
||||
let observer = null;
|
||||
|
||||
// 3. 规范的 ref 收集函数：处理元素挂载/卸载
|
||||
const setTargetRef = (el, key) => {
|
||||
if (el) {
|
||||
// 元素挂载：存入对象
|
||||
targetElements.value[key] = el;
|
||||
} else {
|
||||
// 元素卸载：从对象中移除
|
||||
delete targetElements.value[key];
|
||||
}
|
||||
};
|
||||
|
||||
// 4. 初始化交叉观察者（批量监听）
|
||||
const initObserver = () => {
|
||||
// 获取所有元素的数组
|
||||
const elements = Object.values(targetElements.value);
|
||||
if (elements.length === 0) return;
|
||||
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observerCallback = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('activeCode');
|
||||
} else {
|
||||
// 可选：离开视口时移除类
|
||||
// entry.target.classList.remove('activeCode');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
observer = new IntersectionObserver(observerCallback, observerOptions);
|
||||
// 批量监听所有元素
|
||||
elements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
// 5. 组件挂载时：等待DOM渲染完成后初始化
|
||||
onMounted(async () => {
|
||||
// 清空原有元素（防止重渲染重复）
|
||||
targetElements.value = {};
|
||||
await nextTick(); // 等待DOM渲染完成
|
||||
initObserver();
|
||||
});
|
||||
|
||||
// 6. 组件卸载时：批量销毁观察者
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
// 停止监听所有元素
|
||||
Object.values(targetElements.value).forEach((el) => {
|
||||
observer.unobserve(el);
|
||||
});
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.secondEdition .theTitle {
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
margin: 42px 0 30px !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-affix {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||||
bottom: 0;
|
||||
top: auto
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||||
padding: 18px 19px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||||
color: #333 !important
|
||||
}
|
||||
|
||||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #466aff;
|
||||
content: "";
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent {
|
||||
padding: 65px 0;
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop {
|
||||
background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
min-height: 753px;
|
||||
padding: 50px 56px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopCon {
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox {
|
||||
max-width: 352px;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(90deg, #50edff, #557cff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
|
||||
height: 72px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #69daf5;
|
||||
line-height: 36px;
|
||||
margin-top: 18px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
|
||||
height: 108px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 36px;
|
||||
margin-top: 70px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
|
||||
color: #fff;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 40px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop {
|
||||
text-align: center;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 182px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
|
||||
margin-left: 22px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-top: 28px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
|
||||
font-size: 20px;
|
||||
color: #637497;
|
||||
line-height: 36px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0 !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
|
||||
transition: 3s;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
position: absolute;
|
||||
right: -200px;
|
||||
top: 102px;
|
||||
transition: 2s;
|
||||
opacity: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||||
top: 317px;
|
||||
right: 10px;
|
||||
transition: 2.5s;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
|
||||
right: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||||
top: 217px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
|
||||
bottom: 62px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
|
||||
bottom: 215px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle {
|
||||
position: relative;
|
||||
padding: 2px;
|
||||
width: 384px;
|
||||
height: 90px;
|
||||
margin: 7px auto 0;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle span {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
border-radius: 10px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
top: 2px;
|
||||
left: 2px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
|
||||
color: #637497;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
max-width: 950px;
|
||||
margin: 30px auto 28px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
|
||||
color: #000;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent {
|
||||
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 920px;
|
||||
padding: 20px 0 114px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent img {
|
||||
opacity: 0;
|
||||
transition: 2.4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: 1s;
|
||||
transition-delay: 1s;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
transition: 2s;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 39px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse {
|
||||
background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 710px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 2s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
|
||||
transform: rotateY(1turn)
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .title {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 26px;
|
||||
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 50px;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
|
||||
height: 400px;
|
||||
width: 723px;
|
||||
background: url(@/assets/v3/Line/znzd7.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 26px 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multipleAnalyse .desc {
|
||||
text-align: center;
|
||||
max-width: 869px;
|
||||
line-height: 30px;
|
||||
color: #69daf5;
|
||||
font-weight: 400;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional {
|
||||
background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
|
||||
background-size: cover;
|
||||
height: 1139px;
|
||||
padding: 100px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: .3;
|
||||
transition: 1s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 447px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 70px !important
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: #000;
|
||||
max-width: 350px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
|
||||
left: 0;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
height: 396px;
|
||||
transition: 4s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart img {
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p {
|
||||
max-width: 422px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: #000;
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p span {
|
||||
color: #637497;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
|
||||
margin-bottom: 55px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
margin-left: -4px;
|
||||
padding-left: 4px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper {
|
||||
padding-left: 2px !important
|
||||
}
|
||||
|
||||
.ant-anchor-wrapper .ant-anchor-ink:before {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.ant-anchor {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.ant-anchor-ink {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-anchor-ink::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #e8e8e8;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.ant-anchor-ink-ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #466aff;
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
html li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #466aff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
div, img, tr, td, table {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img, video {
|
||||
max-width: none;
|
||||
height: revert-layer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
margin-left: 32px;
|
||||
//box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hadoopCode>img {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
width: 805px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.activeCode>img.activeImg {
|
||||
right: 0;
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
transition: 1s;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
|
||||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||||
left: 380px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
78
src/views/Jyh/Home/component/ComRank.vue
Normal file
78
src/views/Jyh/Home/component/ComRank.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="com-rank">
|
||||
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<h5 class="JBFont">
|
||||
<span class="comStatistic" data-animation-running="false">95</span>%
|
||||
</h5>
|
||||
<p>漏洞识别**高**准确率<br>确保威胁分析的可靠性</p>
|
||||
</div>
|
||||
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<h5 class="JBFont">
|
||||
<span class="comStatistic" data-animation-running="false">15</span>+
|
||||
</h5>
|
||||
<p>覆盖**车联网、IoT、金融**<br>等 15+ 行业场景</p>
|
||||
</div>
|
||||
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<h5 class="JBFont">
|
||||
<span class="comStatistic" data-animation-running="false">60</span>+
|
||||
</h5>
|
||||
<p>SaaS订阅企业目标<br>助力中小企业实现安全左移</p>
|
||||
</div>
|
||||
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<h5 class="JBFont">
|
||||
≥<span class="comStatistic" data-animation-running="false">98</span>%
|
||||
</h5>
|
||||
<p>**零**风险场景仿真相似度<br>高度还原真实攻击环境</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComSystem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 样式保持不变，以确保排版一致
|
||||
.com-rank {
|
||||
background-color: #f5f5f5;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 100px 0 50px;
|
||||
text-align: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
background: url(@/assets/v3/index-top-bg.D8cqOFJJ.png) no-repeat bottom;
|
||||
background-size: cover;
|
||||
justify-content: center; /* 确保内容居中 */
|
||||
}
|
||||
|
||||
.com-rank .rank-item {
|
||||
padding: 0 40px; /* 调整间距以容纳四个指标 */
|
||||
width: 360px; /* 调整宽度以容纳四个指标 */
|
||||
}
|
||||
|
||||
.com-rank .rank-item h5 {
|
||||
font-family: Avenir;
|
||||
font-size: 70px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
line-height: 109px
|
||||
}
|
||||
|
||||
.com-rank .rank-item p {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 24px;
|
||||
margin: 30px 0 0
|
||||
}
|
||||
</style>
|
||||
198
src/views/Jyh/Home/component/ComSafe.vue
Normal file
198
src/views/Jyh/Home/component/ComSafe.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="com-safe">
|
||||
<div class="safe-tit wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="safe-swip"><span>从</span>
|
||||
<div class="swiper swiper-initialized swiper-vertical swiper-backface-hidden">
|
||||
<div class="swiper-wrapper"
|
||||
style="transition-duration: 0ms; transform: translate3d(0px, -70px, 0px); transition-delay: 0ms;">
|
||||
<div class="swiper-slide swiper-slide-next swiper-slide-prev" data-swiper-slide-index="0"
|
||||
style="height: 70px;"><h5><span class="JBFont">技术驱动</span></h5><!----></div>
|
||||
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" style="height: 70px;"><h5><span
|
||||
class="JBFont">实战攻防</span></h5><!----></div>
|
||||
</div><!----><!----><!----></div>
|
||||
<span>到</span>
|
||||
<div class="swiper swiper-initialized swiper-vertical swiper-backface-hidden">
|
||||
<div class="swiper-wrapper"
|
||||
style="transition-duration: 0ms; transform: translate3d(0px, -70px, 0px); transition-delay: 0ms;">
|
||||
<div class="swiper-slide swiper-slide-next swiper-slide-prev" data-swiper-slide-index="0"
|
||||
style="height: 70px;"><h5><span class="JBFont">场景沉淀</span></h5><!----></div>
|
||||
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" style="height: 70px;"><h5><span
|
||||
class="JBFont">智能安全</span></h5><!----></div>
|
||||
</div><!----><!----><!----></div>
|
||||
</div><!----></div>
|
||||
<div class="safe-item wow xsddhxg animated" style="visibility: visible;"><span class="num">/ 01</span><img
|
||||
src="@/assets/v3/7a87c819de3a45f69d1697d6344f5483.gif">
|
||||
<div class="item-r"><h6 class="MultiLine"><a class="EASE" href="https://www.chaitin.cn/solutions">防勒索专项解决方案</a>
|
||||
</h6>
|
||||
<div class="desc-out MultiLine"><p class="desc"><a class="EASE" href="https://www.chaitin.cn/solutions">此方案针对勒索攻击特点和企业在防护过程中的薄弱点，借鉴
|
||||
IPDRR 架构，建立风险识别、防御、检测、响应与恢复的能力；提升应对勒索攻击的能力，覆盖事前安全布防、事中监测处置和事后复盘优化；同时具备对防范勒索攻击体系有效性的验证能力。</a></p></div>
|
||||
<a class="EASE btn-more LNK" href="https://www.chaitin.cn/solutions">了解更多 <i class="EASE ICO ic-arow"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="safe-item wow xsddhxg animated" style="visibility: visible;"><span class="num">/ 02</span><img
|
||||
src="@/assets/v3/b173212bc7814f28b4674b9cff1097ed.gif">
|
||||
<div class="item-r"><h6 class="MultiLine"><a class="EASE"
|
||||
href="https://www.chaitin.cn/solutions?tab=hot&catId=3">实战攻防常态化保障方案</a>
|
||||
</h6>
|
||||
<div class="desc-out MultiLine"><p class="desc"><a class="EASE"
|
||||
href="https://www.chaitin.cn/solutions?tab=hot&catId=3">通过组建高质量远程值守团队“虚拟坐席”，无需客户数据出网提供远程值守，同时基于云图、御衡、万象等自动化平台降低人工成本；提供弹性演练策略，消除监控真空期；针对一系列专项，推出勒索演练、两高一弱自查、0
|
||||
Day演练等方案，可在演练期兼顾各类专项工作，保障总体成效。</a></p></div>
|
||||
<a class="EASE btn-more LNK" href="https://www.chaitin.cn/solutions?tab=hot&catId=3">了解更多 <i
|
||||
class="EASE ICO ic-arow"></i></a></div>
|
||||
</div>
|
||||
<div class="safe-item wow xsddhxg animated" style="visibility: visible;"><span class="num">/ 03</span><img
|
||||
src="@/assets/v3/a631f17938ec427eb0efcaf7ef19d716.gif">
|
||||
<div class="item-r"><h6 class="MultiLine"><a class="EASE"
|
||||
href="https://www.chaitin.cn/solutions?tab=hot&catId=2">CTEM-漏洞运营解决方案</a>
|
||||
</h6>
|
||||
<div class="desc-out MultiLine"><p class="desc"><a class="EASE"
|
||||
href="https://www.chaitin.cn/solutions?tab=hot&catId=2">此方案结合企业现状及漏洞管理成熟度，针对性地建立常态化漏洞巡检、突发漏洞响应、专项漏洞管理、漏洞优先级排序、漏洞闭环流转等机制，实现资产、暴露面、漏洞的精准发现，进而建立覆盖漏洞全生命周期的自动化管理体系，实现风险处置的快速闭环。</a>
|
||||
</p></div>
|
||||
<a class="EASE btn-more LNK" href="https://www.chaitin.cn/solutions?tab=hot&catId=2">了解更多 <i
|
||||
class="EASE ICO ic-arow"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComSafe"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.com-safe {
|
||||
padding-top: 50px
|
||||
}
|
||||
|
||||
.com-safe .safe-tit {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
height: 40px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 40px;
|
||||
overflow: hidden;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.com-safe .safe-tit span {
|
||||
margin: 0 20px
|
||||
}
|
||||
|
||||
.com-safe .safe-tit .safe-swip {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.com-safe .safe-tit .safe-swip .swiper {
|
||||
height: 40px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.com-safe .safe-item {
|
||||
border-top: 1px solid #969696;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 63px 0 63px 177px;
|
||||
position: relative;
|
||||
width: 1351px
|
||||
}
|
||||
|
||||
.com-safe .safe-item .desc-out {
|
||||
-webkit-line-clamp: 3
|
||||
}
|
||||
|
||||
.com-safe .safe-item:hover img {
|
||||
-webkit-transform: scale(1.08);
|
||||
transform: scale(1.08)
|
||||
}
|
||||
|
||||
.com-safe .safe-item:hover .item-r .btn-more {
|
||||
background-color: #4bad52;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-safe .safe-item:hover .item-r .btn-more .ICO {
|
||||
left: 15px
|
||||
}
|
||||
|
||||
.com-safe .safe-item .num {
|
||||
color: #1a1a1a;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
left: 0;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
top: 76px
|
||||
}
|
||||
|
||||
.com-safe .safe-item img {
|
||||
height: auto;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
width: 160px;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r {
|
||||
padding: 6px 177px 0 148px
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r h6 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
height: 30px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 27px;
|
||||
-webkit-line-clamp: 1
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r .desc {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 24px
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r .btn-more {
|
||||
background: #7aba4a;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
margin: 51px 0 0;
|
||||
text-align: center;
|
||||
width: 140px
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r .btn-more .ICO {
|
||||
left: 7px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r .btn-more:hover {
|
||||
background-color: #4bad52;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-safe .safe-item .item-r .btn-more:hover .ICO {
|
||||
left: 15px
|
||||
}
|
||||
</style>
|
||||
39
src/views/Jyh/Home/component/ComSystem.vue
Normal file
39
src/views/Jyh/Home/component/ComSystem.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="com-system"><p class="tip wow xsddhxg animated" style="margin: 0px; visibility: visible;">
|
||||
知攻善防，由攻击视角构建防御体系</p>
|
||||
<p class="tip tip2 wow xsddhxg animated" style="visibility: visible;">智能安全，以 AI 驱动重塑安全范式</p><img
|
||||
class="wow xsddhxg animated" src="@/assets/v3/system-zh.png" alt="立足于攻防，打造智能安全运营体系"
|
||||
style="visibility: visible;"><!----></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComSystem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-system {
|
||||
background-color: #050705;
|
||||
padding: 97px 0 125px;
|
||||
position: relative;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.com-system img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 1200px
|
||||
}
|
||||
|
||||
.com-system .tip {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 46px;
|
||||
text-align: center;
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
53
src/views/Jyh/Home/component/ComVideo.vue
Normal file
53
src/views/Jyh/Home/component/ComVideo.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="com-video"><h5 class="wow xsddhxg animated" style="visibility: visible;">4000+ 客户信赖之选</h5>
|
||||
<div class="v-in wow xsddhxg animated" style="visibility: visible;">
|
||||
<video class="video" preload="none" controls="" controlslist="nodownload" loop=""
|
||||
poster=""
|
||||
src="https://chaitin-marketing-public.oss-cn-beijing.aliyuncs.com/%E9%95%BF%E4%BA%AD%E6%A1%88%E4%BE%8B_250402.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ComVideo"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.com-video {
|
||||
padding: 23px 0 0
|
||||
}
|
||||
|
||||
.com-video h5 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.com-video .v-in {
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
padding: 40px 0 100px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-video .v-in > * {
|
||||
display: block;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
|
||||
.pg-home .video {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
max-width: 1440px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
625
src/views/Jyh/Insights/index.vue
Normal file
625
src/views/Jyh/Insights/index.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<d-breadcrumb class="secret-breadcrumb">
|
||||
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
|
||||
<gc-breadcrumb-item>
|
||||
<span class="cur-title">安全情报与动态</span>
|
||||
</gc-breadcrumb-item>
|
||||
</d-breadcrumb>
|
||||
|
||||
<div class="page-wrap">
|
||||
<!-- 情报分类标签页 -->
|
||||
<Card class="info-main-card">
|
||||
<div class="info-title">安全情报与动态</div>
|
||||
|
||||
<d-tabs v-model="activeTab" @change="handleTabChange" class="info-tabs">
|
||||
<!-- 漏洞预警 -->
|
||||
<d-tab id="vulnerability" title="漏洞预警">
|
||||
<div class="info-stats">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">高危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.critical }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.critical > 0, down: vulnerabilityTrends.critical < 0 }">
|
||||
{{ vulnerabilityTrends.critical > 0 ? '+' : '' }}{{ vulnerabilityTrends.critical }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">中危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.high }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.high > 0, down: vulnerabilityTrends.high < 0 }">
|
||||
{{ vulnerabilityTrends.high > 0 ? '+' : '' }}{{ vulnerabilityTrends.high }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">低危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.medium }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.medium > 0, down: vulnerabilityTrends.medium < 0 }">
|
||||
{{ vulnerabilityTrends.medium > 0 ? '+' : '' }}{{ vulnerabilityTrends.medium }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">本月新增</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.total }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.total > 0, down: vulnerabilityTrends.total < 0 }">
|
||||
{{ vulnerabilityTrends.total > 0 ? '+' : '' }}{{ vulnerabilityTrends.total }}% 较上月
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
:data="vulnerabilityList"
|
||||
class="jyh-table "
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="漏洞名称" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="cveId" header="CVE编号"></d-column>
|
||||
<d-column field="severity" header="危险等级">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getSeverityType(scope.row.severity)">{{ scope.row.severity }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="affectScope" header="影响范围" :width="200">
|
||||
<template #default="scope">{{ scope.row.affectScope }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 政策解读 -->
|
||||
<d-tab id="policy" title="政策解读">
|
||||
<d-table
|
||||
:data="policyList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="政策标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="department" header="发布部门"></d-column>
|
||||
<d-column field="level" header="政策级别">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getPolicyLevelType(scope.row.level)">{{ scope.row.level }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="effectiveDate" header="生效日期">
|
||||
<template #default="scope">{{ formatTime(scope.row.effectiveDate) }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 技术专栏 -->
|
||||
<d-tab id="technology" title="技术专栏">
|
||||
<d-table
|
||||
:data="technologyList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="文章标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="author" header="作者/机构"></d-column>
|
||||
<d-column field="category" header="技术分类">
|
||||
<template #default="scope">
|
||||
<d-tag type="info">{{ scope.row.category }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="readCount" header="阅读量">
|
||||
<template #default="scope">{{ scope.row.readCount }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 新闻发布 -->
|
||||
<d-tab id="news" title="新闻发布">
|
||||
<d-table
|
||||
:data="newsList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="新闻标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="source" header="新闻来源"></d-column>
|
||||
<d-column field="category" header="新闻分类">
|
||||
<template #default="scope">
|
||||
<d-tag type="secondary">{{ scope.row.category }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="importance" header="重要程度">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getImportanceType(scope.row.importance)">{{ scope.row.importance }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container" v-if="currentList.length > 0">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<NoData v-if="!loading && currentList.length === 0" :small="false"></NoData>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<d-drawer
|
||||
v-model="detailVisible"
|
||||
:width="800"
|
||||
:title="currentDetail?.title || '详情'"
|
||||
>
|
||||
<div class="detail-content">
|
||||
<div class="detail-meta">
|
||||
<div class="meta-item"><span class="meta-label">发布时间：</span>{{ formatTime(currentDetail?.publishTime) }}</div>
|
||||
<div class="meta-item" v-if="currentDetail?.source"><span class="meta-label">来源：</span>{{ currentDetail.source }}</div>
|
||||
<div class="meta-item" v-if="currentDetail?.severity || currentDetail?.level || currentDetail?.importance">
|
||||
<span class="meta-label">级别：</span>
|
||||
<d-tag
|
||||
:type="getDetailTagType()"
|
||||
>{{ currentDetail.severity || currentDetail.level || currentDetail.importance }}</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-body" v-html="currentDetail?.content || '暂无详情内容'"></div>
|
||||
</div>
|
||||
</d-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import dayjs from 'dayjs';
|
||||
// 假设引入情报相关接口（实际项目中替换为真实接口）
|
||||
// import { getVulnerabilityList, getPolicyList, getTechnologyList, getNewsList } from '@/api/jyh/securityInfo';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
// 标签页状态
|
||||
const activeTab = ref('vulnerability');
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页配置
|
||||
const pager = ref({
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 漏洞预警数据
|
||||
const vulnerabilityStats = ref({
|
||||
critical: 28, // 高危
|
||||
high: 76, // 中危
|
||||
medium: 134, // 低危
|
||||
total: 238 // 本月新增
|
||||
});
|
||||
|
||||
// 漏洞趋势数据
|
||||
const vulnerabilityTrends = ref({
|
||||
critical: 12, // 较上周变化百分比
|
||||
high: 8,
|
||||
medium: -5,
|
||||
total: 15
|
||||
});
|
||||
|
||||
// 模拟漏洞列表数据
|
||||
const vulnerabilityList = ref([
|
||||
{
|
||||
id: 'vuln-1',
|
||||
title: 'Apache Log4j2 远程代码执行漏洞 (CVE-2021-44228)',
|
||||
cveId: 'CVE-2021-44228',
|
||||
severity: '高危',
|
||||
publishTime: '2024-06-15T09:30:00',
|
||||
affectScope: 'Apache Log4j 2.0-2.14.1',
|
||||
content: `<p>Apache Log4j2 存在远程代码执行漏洞，攻击者可通过构造特殊请求触发漏洞，执行任意代码。</p>
|
||||
<p><strong>影响范围：</strong>Apache Log4j 2.0 至 2.14.1 版本</p>
|
||||
<p><strong>修复建议：</strong>升级至 Log4j 2.15.0 及以上版本，或采取临时缓解措施。</p>`
|
||||
},
|
||||
{
|
||||
id: 'vuln-2',
|
||||
title: 'Chrome 浏览器类型混淆漏洞 (CVE-2024-2625)',
|
||||
cveId: 'CVE-2024-2625',
|
||||
severity: '中危',
|
||||
publishTime: '2024-06-12T14:20:00',
|
||||
affectScope: 'Chrome < 123.0.6312.105',
|
||||
content: `<p>Google Chrome 存在类型混淆漏洞，攻击者可通过精心构造的网页利用该漏洞执行任意代码。</p>
|
||||
<p><strong>影响范围：</strong>版本低于 123.0.6312.105 的 Chrome 浏览器</p>
|
||||
<p><strong>修复建议：</strong>及时更新 Chrome 浏览器至最新版本。</p>`
|
||||
},
|
||||
{
|
||||
id: 'vuln-3',
|
||||
title: 'Windows 内核权限提升漏洞 (CVE-2024-21303)',
|
||||
cveId: 'CVE-2024-21303',
|
||||
severity: '高危',
|
||||
publishTime: '2024-06-10T11:45:00',
|
||||
affectScope: 'Windows 10/11, Windows Server 2019/2022',
|
||||
content: `<p>Microsoft Windows 内核存在权限提升漏洞，本地攻击者可利用该漏洞提升至系统权限。</p>
|
||||
<p><strong>影响范围：</strong>Windows 10、Windows 11、Windows Server 2019/2022</p>
|
||||
<p><strong>修复建议：</strong>安装微软 2024 年 6 月安全更新补丁。</p>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟政策解读数据
|
||||
const policyList = ref([
|
||||
{
|
||||
id: 'policy-1',
|
||||
title: '《网络安全等级保护基本要求》(GB/T 22239-2025) 修订解读',
|
||||
department: '国家网络安全标准化技术委员会',
|
||||
level: '国家标准',
|
||||
publishTime: '2024-05-20T10:00:00',
|
||||
effectiveDate: '2024-12-01T00:00:00',
|
||||
content: `<p>本次修订进一步完善了网络安全等级保护的基本要求，新增了云计算、大数据、人工智能等新兴技术场景的安全控制点。</p>
|
||||
<p><strong>主要变化：</strong></p>
|
||||
<ul>
|
||||
<li>强化了数据安全保护要求，新增数据全生命周期安全控制</li>
|
||||
<li>增加了供应链安全管理相关条款</li>
|
||||
<li>完善了应急响应与灾备恢复要求</li>
|
||||
</ul>`
|
||||
},
|
||||
{
|
||||
id: 'policy-2',
|
||||
title: '《关键信息基础设施安全保护条例》实施指南',
|
||||
department: '工信部网络安全管理局',
|
||||
level: '部门规章',
|
||||
publishTime: '2024-04-15T09:30:00',
|
||||
effectiveDate: '2024-05-01T00:00:00',
|
||||
content: `<p>指南明确了关键信息基础设施的识别范围、安全责任与保护措施，为运营者提供了具体实施参考。</p>
|
||||
<p><strong>核心内容：</strong></p>
|
||||
<ul>
|
||||
<li>关键信息基础设施识别流程与标准</li>
|
||||
<li>安全防护体系建设要求</li>
|
||||
<li>安全评估与监测预警机制</li>
|
||||
</ul>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟技术专栏数据
|
||||
const technologyList = ref([
|
||||
{
|
||||
id: 'tech-1',
|
||||
title: '基于大语言模型的恶意代码检测技术研究',
|
||||
author: '安全研究院 张教授团队',
|
||||
category: '人工智能安全',
|
||||
publishTime: '2024-06-05T16:20:00',
|
||||
readCount: 2356,
|
||||
content: `<p>本文探讨了利用大语言模型（LLM）进行恶意代码检测的可行性，提出了基于Transformer架构的检测模型。</p>
|
||||
<p><strong>研究亮点：</strong></p>
|
||||
<ul>
|
||||
<li>将恶意代码转换为结构化文本序列，利用LLM进行特征学习</li>
|
||||
<li>在10万级样本集上测试准确率达98.7%</li>
|
||||
<li>对未知变种恶意代码的检测率提升32%</li>
|
||||
</ul>`
|
||||
},
|
||||
{
|
||||
id: 'tech-2',
|
||||
title: '零信任架构在企业网络中的实践路径',
|
||||
author: '某大型科技公司 网络安全部',
|
||||
category: '网络安全架构',
|
||||
publishTime: '2024-05-28T14:10:00',
|
||||
readCount: 1892,
|
||||
content: `<p>本文结合实际案例，阐述了零信任架构从规划到落地的全流程，包括身份认证、权限管理、持续验证等关键环节。</p>
|
||||
<p><strong>实践要点：</strong></p>
|
||||
<ul>
|
||||
<li>基于最小权限原则的动态访问控制</li>
|
||||
<li>多因素认证与持续信任评估</li>
|
||||
<li>零信任与现有安全体系的融合策略</li>
|
||||
</ul>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟新闻发布数据
|
||||
const newsList = ref([
|
||||
{
|
||||
id: 'news-1',
|
||||
title: '2024年国家网络安全宣传周将于9月在郑州举办',
|
||||
source: '央视新闻',
|
||||
category: '行业动态',
|
||||
publishTime: '2024-06-18T08:30:00',
|
||||
importance: '重要',
|
||||
content: `<p>2024年国家网络安全宣传周将于9月16日至22日在河南省郑州市举办，主题为"网络安全为人民，网络安全靠人民"。</p>
|
||||
<p>活动将包括开幕式、网络安全博览会、网络安全技术高峰论坛以及系列主题日活动，聚焦人工智能、数据安全、关键信息基础设施保护等热点领域。</p>`
|
||||
},
|
||||
{
|
||||
id: 'news-2',
|
||||
title: '全球网络攻击事件同比下降12%，勒索软件攻击减少明显',
|
||||
source: '安全产业报',
|
||||
category: '全球态势',
|
||||
publishTime: '2024-06-15T11:20:00',
|
||||
importance: '一般',
|
||||
content: `<p>根据最新全球安全报告，2024年第一季度全球网络攻击事件同比下降12%，其中勒索软件攻击减少23%，归因于企业安全防护意识提升和防护措施加强。</p>
|
||||
<p>报告同时指出，针对工业控制系统和医疗行业的定向攻击有所增加，需引起相关行业重视。</p>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 详情抽屉状态
|
||||
const detailVisible = ref(false);
|
||||
const currentDetail = ref(null);
|
||||
|
||||
// 当前列表（根据标签页动态切换）
|
||||
const currentList = computed(() => {
|
||||
switch (activeTab.value) {
|
||||
case 'vulnerability': return vulnerabilityList.value;
|
||||
case 'policy': return policyList.value;
|
||||
case 'technology': return technologyList.value;
|
||||
case 'news': return newsList.value;
|
||||
default: return [];
|
||||
}
|
||||
});
|
||||
|
||||
// 标签页切换
|
||||
const handleTabChange = (key) => {
|
||||
activeTab.value = key;
|
||||
pager.value.pageIndex = 1; // 切换标签重置页码
|
||||
fetchCurrentList(); // 重新获取数据
|
||||
};
|
||||
|
||||
// 分页切换
|
||||
const handlePageChange = (pageIndex) => {
|
||||
pager.value.pageIndex = pageIndex;
|
||||
fetchCurrentList();
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (pageSize) => {
|
||||
pager.value.pageSize = pageSize;
|
||||
pager.value.pageIndex = 1;
|
||||
fetchCurrentList();
|
||||
};
|
||||
|
||||
// 获取当前标签页数据（实际项目中替换为接口调用）
|
||||
const fetchCurrentList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 模拟接口请求延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// 实际项目中根据activeTab调用对应接口
|
||||
// 示例：
|
||||
// if (activeTab.value === 'vulnerability') {
|
||||
// const res = await getVulnerabilityList({ page: pager.value.pageIndex, size: pager.value.pageSize });
|
||||
// vulnerabilityList.value = res.data.records;
|
||||
// pager.value.total = res.data.total;
|
||||
// }
|
||||
|
||||
// 模拟总数
|
||||
pager.value.total = currentList.value.length;
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const showDetail = (item) => {
|
||||
currentDetail.value = item;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time) => {
|
||||
return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
|
||||
};
|
||||
|
||||
// 漏洞危险等级标签类型
|
||||
const getSeverityType = (severity) => {
|
||||
const typeMap = {
|
||||
'高危': 'danger',
|
||||
'中危': 'warning',
|
||||
'低危': 'info'
|
||||
};
|
||||
return typeMap[severity] || 'default';
|
||||
};
|
||||
|
||||
// 政策级别标签类型
|
||||
const getPolicyLevelType = (level) => {
|
||||
const typeMap = {
|
||||
'国家标准': 'primary',
|
||||
'部门规章': 'info',
|
||||
'地方规定': 'secondary'
|
||||
};
|
||||
return typeMap[level] || 'default';
|
||||
};
|
||||
|
||||
// 新闻重要程度标签类型
|
||||
const getImportanceType = (importance) => {
|
||||
const typeMap = {
|
||||
'重要': 'warning',
|
||||
'一般': 'info'
|
||||
};
|
||||
return typeMap[importance] || 'default';
|
||||
};
|
||||
|
||||
// 详情页标签类型
|
||||
const getDetailTagType = () => {
|
||||
if (currentDetail.value?.severity) {
|
||||
return getSeverityType(currentDetail.value.severity);
|
||||
}
|
||||
if (currentDetail.value?.level) {
|
||||
return getPolicyLevelType(currentDetail.value.level);
|
||||
}
|
||||
if (currentDetail.value?.importance) {
|
||||
return getImportanceType(currentDetail.value.importance);
|
||||
}
|
||||
return 'default';
|
||||
};
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
fetchCurrentList();
|
||||
});
|
||||
|
||||
// 监听分页和标签变化
|
||||
watch([() => pager.value.pageIndex, () => pager.value.pageSize], () => {
|
||||
fetchCurrentList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-wrap {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.info-main-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #191919;
|
||||
}
|
||||
|
||||
.info-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// 统计卡片样式
|
||||
.info-stats {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #191919;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
font-size: 14px;
|
||||
&.up {
|
||||
color: #f53f3f; // 上升趋势红色
|
||||
}
|
||||
&.down {
|
||||
color: #00b42a; // 下降趋势绿色
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式
|
||||
.info-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.title-link {
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式
|
||||
.pagination-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// 详情抽屉样式
|
||||
.detail-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
ul {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
strong {
|
||||
color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
// 复用安全检测中心的面包屑样式
|
||||
.secret-breadcrumb {
|
||||
padding: 7px 20px 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
227
src/views/Jyh/Intro/component/ItemPower.vue
Normal file
227
src/views/Jyh/Intro/component/ItemPower.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="item-power">
|
||||
<h4 class="wow xsddhxg animated" style="visibility: visible;">我们的实力</h4>
|
||||
<div class="power-slider wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="power-list"> <!-- Flex布局容器 -->
|
||||
<!-- 第一个模块 -->
|
||||
<div class="power-item">
|
||||
<div class="s-item">
|
||||
<img src="@/assets/v3/first.png" alt="演练成绩">
|
||||
<div class="s-txt">
|
||||
<h5>演练成绩</h5>
|
||||
<div class="ul-out">
|
||||
<ul class="EASE">
|
||||
<li>2024 武汉市东西湖区网络安全实战攻防演练第一名</li>
|
||||
<li>2023 "磐石行动"东西湖区工业和信息化领域网络安全实战攻防第一名</li>
|
||||
<li>2022、2023 湖北省数字政府网络安全攻防演练第一名</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二个模块 -->
|
||||
<div class="power-item">
|
||||
<div class="s-item">
|
||||
<img src="@/assets/v3/sl5.png" alt="国家级漏洞库全支撑">
|
||||
<div class="s-txt">
|
||||
<h5>国家级漏洞库全支撑</h5>
|
||||
<div class="ul-out">
|
||||
<ul class="EASE">
|
||||
<li>国家信息安全漏洞共享平台（CNVD）技术组支撑单位</li>
|
||||
<li>国家信息安全漏洞库（CNNVD）技术支撑单位等级证书（一级）</li>
|
||||
<li>工业和信息化部网络安全威胁和漏洞信息共享平台（NVDB）</li>
|
||||
<li>通用网络产品安全漏洞专业库（三星级）</li>
|
||||
<li>信创政务产品安全漏洞专业库-技术支撑单位（三级）</li>
|
||||
<li>工业和信息化部移动互联网 APP 产品安全漏洞库-技术支撑单位</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第三个模块 -->
|
||||
<div class="power-item">
|
||||
<div class="s-item">
|
||||
<img src="@/assets/v3/sl6.png" alt="权威漏洞机构能力认可">
|
||||
<div class="s-txt">
|
||||
<h5>权威漏洞机构能力认可</h5>
|
||||
<div class="ul-out">
|
||||
<ul class="EASE">
|
||||
<li>NVDB 2023 年度漏洞治理合作最具贡献单位、优秀漏洞合作治理单位、优秀漏洞报送机构</li>
|
||||
<li>CNVD 2023 年度漏洞信息报送贡献单位、2022 年度漏洞应急工作突出贡献单位</li>
|
||||
<li>CNVD 2020 年度原创漏洞发现贡献单位、最具价值漏洞奖</li>
|
||||
<li>CNNVD 2023 年度（第一期）漏洞激励一级贡献奖、二级贡献奖</li>
|
||||
<li>CNNVD 2024 年度（第一期）漏洞激励一级贡献奖</li>
|
||||
<li>CNNVD 2023 年度重大漏洞消控优秀贡献奖</li>
|
||||
<li>CNNVD 2023 年度、2022 年度优秀技术支撑单位</li>
|
||||
<li>2023 年提交漏洞 1500+，原创漏洞 290+，63%为高危以上漏洞</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ItemPower"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-intro .item-power {
|
||||
background-color: #f1f2f5;
|
||||
padding: 80px 0;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.pg-intro .item-power h4 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-slider {
|
||||
margin: 50px auto 0;
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item {
|
||||
width: calc(33.333% - 20px);
|
||||
min-width: 320px;
|
||||
height: 490px;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-item {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-item .hd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-item>img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 核心：s-txt 基础样式 + 过渡动画
|
||||
.pg-intro .item-power .power-item .s-txt {
|
||||
background-color: #fffffff5;
|
||||
bottom: 0;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 179px; /* 默认高度 */
|
||||
left: 0;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
padding: 33px 36px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
transition: height 0.4s ease-out; /* 仅过渡高度，保证动画流畅 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 鼠标悬浮到s-item（整个模块）时，s-txt 高度变为340px
|
||||
.pg-intro .item-power .power-item .s-item:hover .s-txt {
|
||||
height: 340px; /* 悬浮延伸高度 */
|
||||
}
|
||||
|
||||
// 基础状态：ul-out 高度限制，隐藏多余内容
|
||||
.pg-intro .item-power .power-item .s-txt .ul-out {
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
transition: height 0.4s ease-out; /* 内容高度也加过渡 */
|
||||
}
|
||||
|
||||
// 悬浮时：ul-out 高度自动，显示全部内容
|
||||
.pg-intro .item-power .power-item .s-item:hover .s-txt .ul-out {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-txt .ul-out ul {
|
||||
margin: 16px 0 0;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-txt .ul-out ul:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-txt h5 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
margin: 0 0 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-txt li {
|
||||
font-style: normal;
|
||||
padding: 0 0 0 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
transition: all .4s ease-out;
|
||||
}
|
||||
|
||||
.pg-intro .item-power .power-item .s-txt li:after {
|
||||
background: #4bad52;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 6px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 1200px) {
|
||||
.pg-intro .item-power .power-item {
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pg-intro .item-power .power-item {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
// 移动端悬浮高度适当调整（可选）
|
||||
height: auto;
|
||||
}
|
||||
.pg-intro .item-power .power-item .s-txt {
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/views/Jyh/Intro/component/ItemRank.vue
Normal file
103
src/views/Jyh/Intro/component/ItemRank.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="item-rank">
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">90</span><i>+</i></div>
|
||||
<p class="name">发明专利</p></div>
|
||||
<!-- <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
|
||||
<!-- <div class="JBFont"><span class="comStatistic" data-animation-running="false">120</span><i>+</i></div>-->
|
||||
<!-- <p class="name">软件著作权</p></div>-->
|
||||
<!-- <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
|
||||
<!-- <div class="JBFont"><span class="comStatistic" data-animation-running="false">20</span></div>-->
|
||||
<!-- <p class="name">标准制定</p></div>-->
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">12</span></div>
|
||||
<p class="name">网络安全资质</p></div>
|
||||
<!-- <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
|
||||
<!-- <div class="JBFont"><span class="comStatistic" data-animation-running="false">80</span><i>+</i></div>-->
|
||||
<!-- <p class="name">产品资质</p></div>-->
|
||||
<!-- <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
|
||||
<!-- <div class="JBFont"><span class="comStatistic" data-animation-running="false">140</span><i>+</i></div>-->
|
||||
<!-- <p class="name">产品兼容性认证</p></div>-->
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont">数百个</div>
|
||||
<p class="name">高质量漏洞贡献</p></div>
|
||||
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">500</span><i>+</i></div>
|
||||
<p class="name">关基客户</p>
|
||||
</div>
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">10亿</span><i>+</i></div>
|
||||
<p class="name">组件扫描</p>
|
||||
</div>
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">99.9</span><i>%</i></div>
|
||||
<p class="name">检出率</p>
|
||||
</div>
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;">
|
||||
<div class="JBFont"><span class="comStatistic" data-animation-running="false">7x24</span></div>
|
||||
<p class="name">应急响应</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ItemRank"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-intro .item-rank {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 60px 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.pg-intro .item-rank .rank-item {
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pg-intro .item-rank .rank-item:last-child:after {
|
||||
display: none
|
||||
}
|
||||
|
||||
.pg-intro .item-rank .rank-item:after {
|
||||
border: 1px solid #d8d8d8;
|
||||
content: "";
|
||||
height: 63px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.pg-intro .item-rank .rank-item>div {
|
||||
font-size: 42px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 57px;
|
||||
min-width: 100px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pg-intro .item-rank .rank-item .name {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: -1px 0 0;
|
||||
text-align: center
|
||||
}
|
||||
</style>
|
||||
335
src/views/Jyh/Intro/component/ItemTrip.vue
Normal file
335
src/views/Jyh/Intro/component/ItemTrip.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="pg-intro item-trip">
|
||||
<h4 class="main-title">实验室里程碑</h4>
|
||||
|
||||
<div class="trip-slider" ref="tripSliderRef" @mousemove="handleMouseMove">
|
||||
<swiper
|
||||
:slides-per-view="'auto'"
|
||||
:grab-cursor="true"
|
||||
class="mySwiper"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) in rawTimelineData" :key="index">
|
||||
<div :class="['s-item', item.className, { 'ON': true }]">
|
||||
<div class="imgMask">
|
||||
<img :src="item.image" :alt="item.year">
|
||||
</div>
|
||||
|
||||
<div class="s-txt">
|
||||
<h5>
|
||||
{{ item.year }}
|
||||
<span></span> <!-- 年份下方的圆点 -->
|
||||
</h5>
|
||||
<ul>
|
||||
<li v-for="(txt, i) in item.details" :key="i">{{ txt }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="timeline-svg">
|
||||
<line v-if="index === 0" x1="0" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
|
||||
<template v-else-if="index === 1">
|
||||
<line x1="0" y1="290" x2="250" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
<line x1="250" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
</template>
|
||||
|
||||
<template v-else-if="index === 2">
|
||||
<line x1="0" y1="290" x2="250" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
<line x1="250" y1="290" x2="800" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
</template>
|
||||
|
||||
<template v-else-if="index === 3">
|
||||
<line x1="0" y1="290" x2="250" y2="280" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
<line x1="250" y1="280" x2="500" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
</template>
|
||||
|
||||
<template v-else-if="index === 4">
|
||||
<line x1="0" y1="290" x2="250" y2="300" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
<line x1="250" y1="300" x2="500" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
</template>
|
||||
|
||||
<template v-else-if="index === 5">
|
||||
<line x1="0" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
|
||||
</template>
|
||||
</svg>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
||||
<div
|
||||
class="btn-tip EASE drop"
|
||||
:class="{ 'drag': isDragging }"
|
||||
:style="cursorStyle"
|
||||
>
|
||||
<i class="ICO"></i>
|
||||
<span>点击并拖动</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
|
||||
// 鼠标跟随逻辑
|
||||
const tripSliderRef = ref(null);
|
||||
const mouseX = ref(0);
|
||||
const mouseY = ref(0);
|
||||
const isDragging = ref(false);
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (tripSliderRef.value) {
|
||||
const rect = tripSliderRef.value.getBoundingClientRect();
|
||||
mouseX.value = event.clientX - rect.left;
|
||||
mouseY.value = event.clientY - rect.top;
|
||||
}
|
||||
};
|
||||
|
||||
const cursorStyle = computed(() => {
|
||||
return {
|
||||
left: `${mouseX.value}px`,
|
||||
top: `${mouseY.value}px`,
|
||||
opacity: mouseX.value > 0 && mouseY.value > 0 ? 1 : 0,
|
||||
transform: `translate(-50%, -50%) scale(${isDragging.value ? 1.2 : 1})`,
|
||||
};
|
||||
});
|
||||
|
||||
import pic1 from '@/assets/v3/intro/1.png'
|
||||
import pic2 from '@/assets/v3/intro/2.png'
|
||||
import pic3 from '@/assets/v3/intro/3.png'
|
||||
import pic4 from '@/assets/v3/intro/4.png'
|
||||
|
||||
// 时间线数据
|
||||
const rawTimelineData = ref([
|
||||
{
|
||||
year: 'intro_our_journey',
|
||||
image: '1.png',
|
||||
className: 'blank-left',
|
||||
details: []
|
||||
},
|
||||
{
|
||||
year: '2020',
|
||||
image: pic1,
|
||||
className: 's1 ON',
|
||||
details: [
|
||||
'武汉金银湖实验室正式注册成立，落户武汉临空港经开区',
|
||||
'组建完成核心研发团队，规模超50人，聚焦漏洞检测技术',
|
||||
'与华中科技大学、武汉大学共建网络安全联合实验室',
|
||||
'承接湖北省网络安全专项课题，启动软件供应链安全预研'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '2021',
|
||||
image: pic2,
|
||||
className: 's2 ON',
|
||||
details: [
|
||||
'发布首款核心产品：软件成分分析（SCA）系统V1.0',
|
||||
'获得国家网络安全等级保护测评机构资质',
|
||||
'申请软件供应链漏洞检测相关发明专利8项',
|
||||
'为武汉本地30余家政企单位提供安全合规检测服务',
|
||||
'入选湖北省"专精特新"中小企业培育库'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
image: pic3,
|
||||
className: 's3 ON',
|
||||
details: [
|
||||
'完成Pre-A轮数千万元融资，由国资背景创投机构领投',
|
||||
'实验室场地扩建至5000㎡，研发团队规模突破200人',
|
||||
'发布漏洞挖掘平台，累计发现通用型漏洞超100个',
|
||||
'牵头制定《湖北省软件供应链安全地方标准》',
|
||||
'与中国信科、长江计算达成深度战略合作'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '2025',
|
||||
image: pic4,
|
||||
className: 's4 ON',
|
||||
details: [
|
||||
'推出网络安全态势感知中心，覆盖政企全场景安全监测',
|
||||
'迭代发布SCA系统V3.0，新增恶意代码投毒检测模块',
|
||||
'首次商业化发布漏洞扫描系统：洞察（D-Sensor）',
|
||||
'核心团队参加世界黑客防御赛 DEFCON CTF 获得全球亚军',
|
||||
'获批国家级网络安全应急技术支撑单位资质',
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '',
|
||||
image: '1.png',
|
||||
className: 'blank-right',
|
||||
details: []
|
||||
}
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 原有样式保持不变，新增2015/2016圆点的单独样式 */
|
||||
.pg-intro .item-trip {
|
||||
background: linear-gradient(180deg, #000, #1a2c3a);
|
||||
overflow: hidden;
|
||||
padding: 83px 0 66px
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .main-title {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider {
|
||||
margin: 50px 0 0;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide {
|
||||
padding-right: 100px !important;
|
||||
width: 500px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:first-child {padding-top: 74px;}
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(2) {padding-top: 33px;}
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(3) {padding-top: 29px;}
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(4) {padding-top: 29px;}
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(5) {padding-top: 29px;}
|
||||
.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(6) {padding-top: 29px;}
|
||||
|
||||
.pg-intro .item-trip .trip-slider svg {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .blank-left, .pg-intro .item-trip .trip-slider .blank-right {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .btn-tip {
|
||||
background: #4bad52;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .btn-tip .ICO {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAYCAQAAADgvTPPAAAAAXNSR0IArs4c6QAAAMVJREFUeJzNzr0JQlEMQOGAhQPYvBnEDQRXUCuxdBHB0gmcwFZsBDewtRNLsXOEh3JsrmjxfnIhCaZLuNzzifznsOJO3/C/NVcGOc+hNAVsgIeSkPJju7wIXQ5Kgkc+g+CVVxI88wqCd76FkPITz3wDISpfQ4jMVxCYAa+4fCIcgRsdEWHEE1iGAgouwOmzzmMJKX+m9z0FEirykYSafBShIR9BaMl7ExR5T4Iy70XIyP8QhoaAXUZeRIQpewpDwIJtRj5y3lb5MPSwyxcQAAAAAElFTkSuQmCC);
|
||||
display: block;
|
||||
height: 12px;
|
||||
margin: 34px auto 7px;
|
||||
width: 32px
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item h5 {
|
||||
background: linear-gradient(15deg, #49ac8c, #79ba49);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/* 通用圆点样式 */
|
||||
.pg-intro .item-trip .trip-slider .s-item h5 span {
|
||||
background: #4bad52;
|
||||
border-radius: 50%;
|
||||
bottom: -20px;
|
||||
height: 14px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%);
|
||||
width: 14px;
|
||||
z-index: 2; /* 确保圆点在线上方 */
|
||||
}
|
||||
|
||||
/* 2015的圆点：在线上方抬高 */
|
||||
.pg-intro .item-trip .trip-slider .s-item.s3 h5 span {
|
||||
bottom: -10px; /* 比默认高10px，位于线（y=280）的上方 */
|
||||
}
|
||||
|
||||
/* 2016的圆点：在线下方降低 */
|
||||
.pg-intro .item-trip .trip-slider .s-item.s4 h5 span {
|
||||
bottom: -30px; /* 比默认低10px，位于线（y=300）的下方 */
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item .imgMask {
|
||||
height: 176px;
|
||||
margin: 0 auto 26px;
|
||||
width: 176px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item .imgMask img {
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
transition: height .4s ease-out, width .4s ease-out;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item.ON .imgMask img {
|
||||
height: 176px;
|
||||
width: 176px;
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider .s-item .s-txt ul {
|
||||
margin: 50px 0 0
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider li {
|
||||
padding: 0 0 0 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
transition: all .4s ease-out
|
||||
}
|
||||
|
||||
.pg-intro .item-trip .trip-slider li:after {
|
||||
background: #4bad52;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 6px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 6px
|
||||
}
|
||||
</style>
|
||||
51
src/views/Jyh/Intro/component/ModBanner.vue
Normal file
51
src/views/Jyh/Intro/component/ModBanner.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xyCenter"><p class="zh wow animated" style="visibility: visible;">守护每一行代码的安全</p>
|
||||
<p class="en wow animated" style="visibility: visible;">Profile</p></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-intro .mod-banner {
|
||||
background: url(@/assets/v3/banner.C9fFbpMH.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
height: 400px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-intro .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%
|
||||
}
|
||||
|
||||
.pg-intro .mod-banner .txt .zh {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px
|
||||
}
|
||||
|
||||
.pg-intro .mod-banner .txt .en {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 9px;
|
||||
line-height: 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.xyCenter {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
85
src/views/Jyh/Intro/component/ModCenter.vue
Normal file
85
src/views/Jyh/Intro/component/ModCenter.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="mod-center">
|
||||
<div class="item-who" data-aos="slide-up">
|
||||
<div class="in"><h4 class="wow animated" style="visibility: visible;">我们是谁</h4>
|
||||
<div class="txt wow animated" style="visibility: visible;">
|
||||
<div class="txt-item">
|
||||
<p>武汉金银湖实验室成立于数字安全产业高速发展的关键阶段，是聚焦网络安全、数据安全、人工智能安全等前沿领域的新型研发机构，依托武汉科教资源优势与产业基础，打造集技术攻关、成果转化、人才培养于一体的国家级数字安全创新平台。</p>
|
||||
<p>实验室汇聚了来自国内顶尖高校、科研院所及龙头企业的核心研发团队，深耕实战化网络安全防护、零信任架构、数据安全治理、工业控制系统安全等关键领域，在国家级网络安全攻防演练、关键信息基础设施保护、数字安全技术标准制定等方面成果显著，为区域乃至全国数字安全保障提供核心支撑。</p>
|
||||
</div>
|
||||
<div class="txt-item">
|
||||
<p>面向数字经济时代的安全挑战，武汉金银湖实验室立足"实战导向、技术突破、产业赋能"的核心理念，构建以网络安全攻防验证平台、数据安全治理体系、工业互联网安全防护系统、AI安全风险监测平台等为核心的技术体系，通过政产学研用深度融合，为政府、金融、能源、交通等关键行业提供定制化、体系化的数字安全解决方案与技术服务。</p>
|
||||
<p>金银湖，得名于武汉东西湖核心生态地标，寓意实验室如湖水般包容创新、稳守安全底线；实验室以"守护数字空间安全，赋能数字经济发展"为使命，致力于攻克数字安全领域"卡脖子"技术，推动安全技术创新与产业落地，筑牢数字时代安全屏障。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building wow animated" style="visibility: visible;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModCenter"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-intro .item-who {
|
||||
background: #f5f5f5;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-intro .item-who .building {
|
||||
background: url(@/assets/v3/building.DsPJNC9Y.png) no-repeat top;
|
||||
background-size: 100% 100%;
|
||||
bottom: 0;
|
||||
height: 95%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 461px
|
||||
}
|
||||
|
||||
.pg-intro .item-who .in {
|
||||
margin: 0 auto;
|
||||
max-width: 1236px;
|
||||
padding: 90px 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-intro .item-who h4 {
|
||||
color: #4bad52;
|
||||
font-size: 28px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
.pg-intro .item-who .txt,.pg-intro .item-who h4 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-intro .item-who .txt {
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.pg-intro .item-who .txt .txt-item {
|
||||
margin: 0 66px 0 0;
|
||||
text-align: justify;
|
||||
width: 453px
|
||||
}
|
||||
|
||||
.pg-intro .item-who .txt p {
|
||||
margin: 20px 0 0;
|
||||
text-indent: 2em
|
||||
}
|
||||
</style>
|
||||
25
src/views/Jyh/Intro/index.vue
Normal file
25
src/views/Jyh/Intro/index.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="pg-intro">
|
||||
<ModBanner />
|
||||
<ModCenter />
|
||||
<ItemRank />
|
||||
<ItemPower />
|
||||
<ItemTrip />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import ModBanner from './component/ModBanner.vue'
|
||||
import ModCenter from './component/ModCenter.vue'
|
||||
import ItemRank from './component/ItemRank.vue'
|
||||
import ItemPower from './component/ItemPower.vue'
|
||||
import ItemTrip from './component/ItemTrip.vue'
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
279
src/views/Jyh/KnowledgeHub/Components/AIModal.vue
Normal file
279
src/views/Jyh/KnowledgeHub/Components/AIModal.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<d-modal
|
||||
v-model="visible"
|
||||
title="AI问答"
|
||||
@ok="handleClose"
|
||||
:cancel="handleClose"
|
||||
style="width: 900px;"
|
||||
>
|
||||
<div class="log-content">
|
||||
<McLayout>
|
||||
<!-- <McLayoutHeader>
|
||||
<McHeader :logoImg="'/logo.svg'" :title="'MateChat'"></McHeader>
|
||||
</McLayoutHeader>-->
|
||||
<McLayoutContent v-if="visible" style="margin: 16px 0;">
|
||||
<div ref="conversationRef" class="conversation-area">
|
||||
<!-- 欢迎提示 -->
|
||||
<div v-if="messages.length === 0" class="welcome-message">
|
||||
|
||||
<div class="welcome-page">
|
||||
<div class="home-title">
|
||||
<img src="@/assets/imgs/jyh/aiLogo2.png" alt="logo" />
|
||||
<h1>TcodeAI助手</h1>
|
||||
</div>
|
||||
<div class="home-detail">
|
||||
<div class="home-detail-1">Hi，欢迎使用TcodeAI助手</div>
|
||||
<div class="home-detail-2">TcodeAI助手 可以辅助研发人员进行软件查询、批量校验、查看软件详情等。</div>
|
||||
<div class="home-detail-2">作为AI模型，TcodeAI助手 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 TcodeAI助手 做得更好。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="welcome-icon">-->
|
||||
<!-- <i class="fa fa-comment-dots"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="welcome-text">-->
|
||||
<!-- <h3>请输入你想问的内容</h3>-->
|
||||
<!-- <p>与AI助手开始对话，获取智能回答</p>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<template v-for="(msg, idx) in messages" :key="idx">
|
||||
<McBubble v-if="msg.role === 'user'" :content="msg.content" :align="'right'"></McBubble>
|
||||
<McBubble v-else :loading="msg.loading ?? false">
|
||||
<McMarkdownCard :content="msg.content" :theme="theme"></McMarkdownCard>
|
||||
</McBubble>
|
||||
</template>
|
||||
</div>
|
||||
</McLayoutContent>
|
||||
<McLayoutSender>
|
||||
<McInput :value="inputValue" :maxLength="2000" @submit="onSubmit" showCount></McInput>
|
||||
</McLayoutSender>
|
||||
</McLayout>
|
||||
</div>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch,nextTick } from 'vue';
|
||||
import { Message } from 'vue-devui';
|
||||
import axios from 'axios';
|
||||
import {uvdV1Chat} from "@/api/inboundTask/inboundTaskApi";
|
||||
|
||||
const messages = ref([]);
|
||||
const history = ref([]);
|
||||
const resultInfo = ref(null);
|
||||
const inputValue = ref('');
|
||||
const conversationRef = ref(null);
|
||||
|
||||
// 组件状态
|
||||
const visible = ref(false);
|
||||
const VITE_AI_API_HOST = import.meta.env.VITE_AI_API_HOST;
|
||||
// 打开弹框时调用接口
|
||||
const open = async (id) => {
|
||||
if (!id) return Message.error('缺少result_id参数');
|
||||
visible.value = true;
|
||||
resultInfo.value = id
|
||||
};
|
||||
|
||||
const onSubmit = (e) => {
|
||||
if(e === '') {
|
||||
return;
|
||||
}
|
||||
if(messages.value[messages.value.length-1]?.loading) return;
|
||||
inputValue.value = '';
|
||||
messages.value.push({
|
||||
role: 'user',
|
||||
content: e,
|
||||
});
|
||||
nextTick(() => {
|
||||
conversationRef.value?.scrollTo({
|
||||
top: conversationRef.value.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
});
|
||||
getAIAnswer(e);
|
||||
};
|
||||
|
||||
const getAIAnswer = async (content) => {
|
||||
messages.value.push({
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
loading: true,
|
||||
});
|
||||
|
||||
const res = await uvdV1Chat({
|
||||
"resultInfo": resultInfo.value,
|
||||
"query": content,
|
||||
"history": history.value || []
|
||||
});
|
||||
|
||||
let reply = res?.data?.data?.reply || '';
|
||||
history.value.push({role: "user", content: content});
|
||||
history.value.push({role: "assistant", content: reply});
|
||||
messages.value[messages.value.length - 1].content = reply;
|
||||
messages.value[messages.value.length - 1].loading = false;
|
||||
nextTick(() => {
|
||||
conversationRef.value?.scrollTo({
|
||||
top: conversationRef.value.scrollHeight
|
||||
});
|
||||
});
|
||||
/* 模拟流式数据返回 */
|
||||
// setTimeout(async () => {
|
||||
// messages.value.at(-1).loading = false;
|
||||
// for (let i = 0; i < reply.length;) {
|
||||
// await new Promise(r => setTimeout(r, 300 * Math.random()));
|
||||
// messages.value[messages.value.length - 1].content = reply.slice(0, i += Math.random() * 10);
|
||||
// nextTick(() => {
|
||||
// conversationRef.value?.scrollTo({
|
||||
// top: conversationRef.value.scrollHeight
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// }, 1000);
|
||||
};
|
||||
|
||||
// 暴露给父组件的方法
|
||||
defineExpose({
|
||||
open // 通过ref调用open方法传递resultId
|
||||
});
|
||||
|
||||
// 关闭弹框
|
||||
const handleClose = () => {
|
||||
messages.value = [];
|
||||
history.value = [];
|
||||
result_id.value = null;
|
||||
inputValue.value = '';
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.log-content {
|
||||
padding: 24px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap; // 保留日志换行
|
||||
word-break: break-all; // 自动换行长单词
|
||||
min-height: 200px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-area,
|
||||
.welcome-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
padding: 0 12px;
|
||||
min-height: 400px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.conversation-area {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
|
||||
.welcome-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: #e6f4ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
i {
|
||||
font-size: 28px;
|
||||
color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-title {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
h1 {
|
||||
color: #191919;
|
||||
font-family: Huawei Sans;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
//filter: brightness(0);
|
||||
}
|
||||
}
|
||||
|
||||
.home-detail {
|
||||
.home-detail-1 {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: medium;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.home-detail-2 {
|
||||
color: #777777;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-page {
|
||||
//height: 90%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.welcome-page {
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
605
src/views/Jyh/KnowledgeHub/Components/BatchVerify.vue
Normal file
605
src/views/Jyh/KnowledgeHub/Components/BatchVerify.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<template>
|
||||
<div class="BatchVerify">
|
||||
<div class="search-form" v-if="isLogin">
|
||||
<FileUploadButton buttonText="批量导入匹配" accept=".xlsx" :onFileUpload="handleFileUpload" />
|
||||
<d-search
|
||||
class="mt-0 mb-2"
|
||||
style="width: 400px"
|
||||
:delay="1000"
|
||||
@search="onSearch($event)"
|
||||
placeholder="请输入软件名称"
|
||||
></d-search>
|
||||
<div class="tjsj">
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>可使用：</span>
|
||||
<span class="green" @click="filterVerifyResult(1)">{{ useNum }}</span>
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>有风险：</span>
|
||||
<span class="red" @click="filterVerifyResult(2)">{{ riskNum }}</span>
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>未治理：</span>
|
||||
<span class="yellow" @click="filterVerifyResult(0)">{{ noNum }}</span>
|
||||
</div>
|
||||
<div class="left-btn">
|
||||
<a v-if="isLogin" class="cursor-pointer" href="/file/软件存在及可信校验模版.xlsx" download
|
||||
><i class="icon icon-download-2"></i>下载excel模板</a
|
||||
>
|
||||
<span v-if="isLogin" style="height: 14px" class="split"></span>
|
||||
<d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text" @click="exportResult"
|
||||
>导出</d-button
|
||||
>
|
||||
<span v-if="isLogin" style="height: 14px" class="split"></span>
|
||||
<TableSetting
|
||||
:columns="columns"
|
||||
@setDefult="setDefult"
|
||||
@updateTableKey="updateTableKey"
|
||||
:show-column-list="showColumnList"
|
||||
@update:show-column-list="updateShowColumnList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-20">
|
||||
<d-table
|
||||
class="jyh-table"
|
||||
v-if="tableData.length"
|
||||
:striped="false"
|
||||
:data="tableData"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<!-- 索引列 -->
|
||||
<d-column type="index" width="40"></d-column>
|
||||
|
||||
<!-- 动态渲染列 -->
|
||||
<template v-for="column in columns" :key="column.key">
|
||||
<d-column v-if="column.visible" :field="column.key" :header="column.label">
|
||||
<!-- 自定义列内容 -->
|
||||
<template #default="scope">
|
||||
<template v-if="column.key === 'validStatus'">
|
||||
<div v-if="scope.row.validStatus == 1" style="display: flex; align-items: center">
|
||||
<d-icon class="mr-1" name="icon-right-o" style="font-size: 14px; color: rgb(80, 212, 171)"></d-icon>
|
||||
<span>可使用</span>
|
||||
</div>
|
||||
<div v-else-if="scope.row.validStatus == 2" style="display: flex; align-items: center">
|
||||
<d-icon class="mr-1" name="icon-warning-o" style="font-size: 14px; color: rgb(250, 194, 10)"></d-icon>
|
||||
<span>有风险</span>
|
||||
</div>
|
||||
<div v-else style="display: flex; align-items: center">
|
||||
<d-icon class="mr-1" name="icon-error-o" style="font-size: 14px; color: rgb(246, 111, 106)"></d-icon>
|
||||
<span>未治理</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'versionName'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.versionName }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'softwareName'">
|
||||
<a v-if="scope.row.validStatus===1" @click="gotoDetail(scope.row)">{{ scope.row.softwareName }}</a>
|
||||
<span v-else>{{ scope.row.softwareName }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'softwareVersion'">
|
||||
<a v-if="scope.row.validStatus===1" @click="gotoDetail(scope.row)">{{ scope.row.softwareVersion }}</a>
|
||||
<span v-else>{{ scope.row.softwareVersion }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'versionCode'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.versionCode }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'smStatus'">
|
||||
<a>{{ scope.row.smStatus }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'type'">
|
||||
<d-tag type="success">{{ scope.row.type }}</d-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'license'">
|
||||
<span class="mr-2">{{ scope.row.license }}</span>
|
||||
<d-tag color="gray">+3</d-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'url'">
|
||||
<a>{{ scope.row.url }}</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[column.key] }}
|
||||
</template>
|
||||
</template>
|
||||
</d-column>
|
||||
</template>
|
||||
<d-column header="操作" width="200" fixed-right="0px">
|
||||
<!--TODO:申请入口只有校验不通过的才显示-->
|
||||
<template #default="scope">
|
||||
<d-button @click="showApplyDialog(scope.row)" variant="text" v-if="scope.row.validStatus == 0" :disabled="scope.row.validStatus !== 0">
|
||||
申请入库
|
||||
</d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
|
||||
<!-- <DataPanel v-else skeleton :card="false" :empty="true">-->
|
||||
<!-- </DataPanel>-->
|
||||
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</div>
|
||||
|
||||
<!-- 新增申请入库提示弹窗 -->
|
||||
<d-modal v-model="applyDialogVisible" title="申请入库提示" style="width: 400px">
|
||||
<div class="text-G900 text-sm leading-[24px]">
|
||||
如需提交治理申请，请邮件联系平台运营团队：<br>
|
||||
<a class="text-blue-500 cursor-pointer" @click="openEmailClient">luoxunzhao@jyhlab.org.cn</a>
|
||||
</div>
|
||||
<template #footer>
|
||||
<d-modal-footer style="text-align: right; padding-right: 20px;">
|
||||
<d-button @click="hidden">取消</d-button>
|
||||
<d-button @click="hidden">确认</d-button>
|
||||
</d-modal-footer>
|
||||
</template>
|
||||
</d-modal>
|
||||
<!-- 删除组件 -->
|
||||
<GModal
|
||||
v-model="deletevModels"
|
||||
ref="deleteModal"
|
||||
title="删除?"
|
||||
@confirm="confirmDelete"
|
||||
showWarnIcon
|
||||
confirmColor="danger"
|
||||
>
|
||||
<span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all"
|
||||
>你确认删除此项：{{ item.cla_name }} ？</span
|
||||
>
|
||||
</GModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
|
||||
import SettingText from '@/components/Setting/SettingText/index.vue';
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { GModal } from '@/components/Setting/index';
|
||||
import { reqCatch } from '@/utils/catch';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import { Message } from 'vue-devui';
|
||||
import { useAccountStore } from '@/stores/user';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import TableSetting from '@/components/TableSetting/index.vue';
|
||||
import FileUploadButton from '@/components/FileUploadButton/index.vue';
|
||||
import { releasePage, repoImport } from '@/api/jyh';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
const hidden = () => {
|
||||
applyDialogVisible.value = false;
|
||||
};
|
||||
// 新增弹窗状态
|
||||
const applyDialogVisible = ref(false);
|
||||
|
||||
// 显示申请入库提示弹窗
|
||||
const showApplyDialog = (row: any) => {
|
||||
applyDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 打开邮件客户端
|
||||
const openEmailClient = () => {
|
||||
try {
|
||||
window.location.href = 'mailto:luoxunzhao@jyhlab.org.cn';
|
||||
} catch (error) {
|
||||
Message.error('无法打开邮件客户端，请手动复制邮箱地址联系');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const downloadTemplate = async () => {
|
||||
try {
|
||||
const response = await fetch('/static/软件存在及可信校验模版.xlsx');
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = '软件存在及可信校验模版.xlsx';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('下载失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const useNum = computed(() => {
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 1).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const riskNum = computed(() => {
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 2).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const noNum = computed(() => {
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 0).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const setDefult = () => {
|
||||
columns.value = defultColumns.value;
|
||||
};
|
||||
|
||||
// 处理文件上传
|
||||
const handleFileUpload = async (file) => {
|
||||
// 1. 校验文件类型
|
||||
const allowedExtensions = ['.xlsx'];
|
||||
const fileExtension = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
|
||||
|
||||
if (!allowedExtensions.includes(fileExtension)) {
|
||||
Message.error('仅支持上传 .xlsx 格式的Excel文件');
|
||||
return Promise.reject(new Error('文件格式不正确'));
|
||||
}
|
||||
|
||||
const { data, error } = await repoImport({ file });
|
||||
if (!error && data) {
|
||||
currentReusltFilter.value = null;
|
||||
allTableData.value = data.data.data;
|
||||
tableData.value = [...allTableData.value];
|
||||
}
|
||||
|
||||
// 模拟文件上传逻辑
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log('文件上传成功:', file.name);
|
||||
resolve();
|
||||
}, 2000); // 模拟 2 秒上传时间
|
||||
});
|
||||
};
|
||||
const userInfo = useAccountStore();
|
||||
const { isLogin } = storeToRefs(userInfo);
|
||||
|
||||
const { namespace } = getOrgInfo();
|
||||
const allTableData = ref([]);
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const columns = ref([
|
||||
{ key: 'validStatus', label: '校验结果', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'securityScore', label: '软件评分', visible: true, filterable: false, sortable: true },
|
||||
{ key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false }
|
||||
]);
|
||||
const defultColumns = ref([
|
||||
{ key: 'validStatus', label: '校验结果', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'securityScore', label: '软件评分', visible: true, filterable: false, sortable: true },
|
||||
{ key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false }
|
||||
]);
|
||||
const validStatusMap = {
|
||||
0: '未治理',
|
||||
1: '可使用',
|
||||
2: '有风险'
|
||||
};
|
||||
const formData = ref({
|
||||
title: '',
|
||||
type: '',
|
||||
useType: '',
|
||||
formData: '',
|
||||
select: '',
|
||||
time1: null,
|
||||
name: '',
|
||||
versionCode: '',
|
||||
pulishTime: ''
|
||||
});
|
||||
const typeOptions = reactive(['主软件', '依赖软件']);
|
||||
const riskOptions = reactive(['低', '中', '高']);
|
||||
const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
|
||||
const isUseOptions = reactive(['是', '否']);
|
||||
const currentReusltFilter = ref(null);
|
||||
const searchStr = ref('');
|
||||
// 定义 tableKey，用于强制刷新表格
|
||||
const tableKey = ref(0);
|
||||
const pager = ref({
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const loadingStatus = reactive({
|
||||
batchMigrating: false
|
||||
});
|
||||
|
||||
// 删除弹窗
|
||||
const item = ref('');
|
||||
const deleteModal = ref();
|
||||
const deletevModels = ref(false);
|
||||
const openDelete = (row: any) => {
|
||||
item.value = row;
|
||||
deleteModal.value.showFlag = true;
|
||||
deletevModels.value = true;
|
||||
};
|
||||
|
||||
const getReleaseList = async () => {
|
||||
if (!isLogin.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const { data, error } = await releasePage({ current: pager.value.pageIndex, size: pager.value.pageSize });
|
||||
if (!error && data) {
|
||||
loading.value = false;
|
||||
allTableData.value = data.data.records;
|
||||
tableData.value = [...allTableData.value];
|
||||
pager.value.total = data.data.total;
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// getReleaseList();
|
||||
});
|
||||
|
||||
const filterTable = () => {
|
||||
tableData.value = allTableData.value.filter((item) => {
|
||||
if (currentReusltFilter.value !== null) {
|
||||
return (
|
||||
item.softwareName.trim().toLowerCase().includes(searchStr.value.trim().toLowerCase()) &&
|
||||
item.validStatus === currentReusltFilter.value
|
||||
);
|
||||
} else {
|
||||
return item.softwareName.trim().toLowerCase().includes(searchStr.value.trim().toLowerCase());
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const filterVerifyResult = (type) => {
|
||||
if (currentReusltFilter.value === type) {
|
||||
currentReusltFilter.value = null;
|
||||
} else {
|
||||
currentReusltFilter.value = type;
|
||||
}
|
||||
filterTable();
|
||||
};
|
||||
|
||||
const onSearch = (str: string) => {
|
||||
searchStr.value = str;
|
||||
filterTable();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const updateTableKey = () => {
|
||||
tableKey.value++; // 更新 tableKey，强制刷新表格
|
||||
};
|
||||
|
||||
// 定义 showColumnList 状态
|
||||
const showColumnList = ref(false);
|
||||
|
||||
// 更新 showColumnList 的方法
|
||||
const updateShowColumnList = (newValue) => {
|
||||
showColumnList.value = newValue;
|
||||
// tableKey.value++; // 更新 tableKey，强制刷新表格
|
||||
};
|
||||
|
||||
const handleBatchImport = async () => {
|
||||
// 多个项目导入
|
||||
// importRepo.value = queryTable.value.filter((val) => val.checked);
|
||||
loadingStatus.batchMigrating = true;
|
||||
// await batchMigrate();
|
||||
loadingStatus.batchMigrating = false;
|
||||
};
|
||||
|
||||
const exportResult = () => {
|
||||
if (!allTableData.value.length) {
|
||||
Message.info('暂无结果');
|
||||
return;
|
||||
}
|
||||
|
||||
const exportData = allTableData.value.map((item) => {
|
||||
let res = {};
|
||||
columns.value.forEach((col) => {
|
||||
if (col.key === 'validStatus') {
|
||||
res[col.label] = validStatusMap[item[col.key]] ? validStatusMap[item[col.key]] : '';
|
||||
} else {
|
||||
res[col.label] = item[col.key] ? item[col.key] : '';
|
||||
}
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
try {
|
||||
const workSheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workBook: any = { Sheets: { 校验结果: workSheet }, SheetNames: ['校验结果'] };
|
||||
const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
|
||||
|
||||
const link = document.createElement('a');
|
||||
const blob = new Blob([excelBuffer]);
|
||||
link.setAttribute('href', window.URL.createObjectURL(blob));
|
||||
link.setAttribute('download', '软件存在及可信校验结果.xlsx');
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
Message.success('导出成功');
|
||||
} catch {
|
||||
// Message.error('导出失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转
|
||||
const gotoDetail = (row) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'repoDetail/' + row.softwareId
|
||||
});
|
||||
};
|
||||
// 分页
|
||||
const changeIndex = () => {
|
||||
// getReleaseList();
|
||||
};
|
||||
|
||||
const changeSize = () => {
|
||||
pager.value.pageIndex = 1;
|
||||
// getReleaseList();
|
||||
};
|
||||
|
||||
const repoFun = (arr: any) => {
|
||||
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const editRow = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'cla/edit/' + row.object_id,
|
||||
query: { cla: row.cla, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async (e: any) => {
|
||||
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
|
||||
// if (!res.error) {
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
// 去成员页
|
||||
const goMember = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去,注意路由有个:claID
|
||||
router.push({
|
||||
path: 'cla/claId/member',
|
||||
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
const getGroupClaListData = async () => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// page: pager.value.pageIndex,
|
||||
// per_page: pager.value.pageSize
|
||||
// };
|
||||
// const res = await reqCatch(getGroupClaList, params);
|
||||
// if (!res.error) {
|
||||
// tableData.value = res?.data?.data?.content;
|
||||
// pager.value.total = res.data.data.total;
|
||||
// }
|
||||
};
|
||||
getGroupClaListData();
|
||||
|
||||
const setClaStatus = async (row: any) => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// cla_id: row.object_id,
|
||||
// status: row.status
|
||||
// };
|
||||
// const res = await reqCatch(setGroupClaStatus, params);
|
||||
// if (!res.error) {
|
||||
// Message.success('操作成功!');
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
const signCla = (row: any) => {
|
||||
router.push('/cla/' + row.object_id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.BatchVerify {
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
|
||||
.secret-op {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $devui-contrast;
|
||||
}
|
||||
|
||||
:deep(.devui-table__row td) {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.devui-tag .devui-tag--default) {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #e3e3ee;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9a9b9c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cur-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2d2d2e;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
//background: #F2F5FC;
|
||||
|
||||
.left-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.output-btn {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.secret-breadcrumb {
|
||||
padding: 7px 20px 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.tjsj {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
84
src/views/Jyh/KnowledgeHub/Components/CountryModal.vue
Normal file
84
src/views/Jyh/KnowledgeHub/Components/CountryModal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<d-modal
|
||||
title="贡献者分布"
|
||||
v-model="visible"
|
||||
class="file-search-modal"
|
||||
:style="{ width: '800px' }"
|
||||
@close="handleClose"
|
||||
>
|
||||
<Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
|
||||
<d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
|
||||
<p class="text-center mt-translate-y">国家/地球分布</p>
|
||||
</Card>
|
||||
<template #footer>
|
||||
<d-modal-footer style="text-align: center;">
|
||||
<d-button variant="solid" color="primary" @click="handleClose">确认</d-button>
|
||||
<d-button @click="handleClose">取消</d-button>
|
||||
</d-modal-footer>
|
||||
</template>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineExpose, reactive } from 'vue';
|
||||
import { DChart } from 'vue-devui/echarts';
|
||||
|
||||
const optionConChart = reactive({
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
|
||||
},
|
||||
yAxis: {
|
||||
// 给y轴添加单位后缀
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
name: '单位',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
// 给label添加单位后缀
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2070F3',
|
||||
borderRadius: [5, 5, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 控制模态框显示/隐藏
|
||||
const visible = ref(false);
|
||||
|
||||
// 打开模态框
|
||||
const openModal = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法，供父组件调用
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<div class="intelligence-detail">
|
||||
<!-- 头部信息 -->
|
||||
<div class="detail-header">
|
||||
<h2 class="title">{{ intelligence?.title }}</h2>
|
||||
<div class="header-tags">
|
||||
<d-tag :color="typeColorMap[intelligence?.intelligenceType]">
|
||||
{{ intelligence?.intelligenceType }}
|
||||
</d-tag>
|
||||
<d-tag :color="urgencyColorMap[intelligence?.urgency]">
|
||||
{{ intelligence?.urgency }}
|
||||
</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息卡片 -->
|
||||
<d-card class="detail-card mt-4">
|
||||
<div slot="header" class="card-header">基本信息</div>
|
||||
<d-descriptions column="2" bordered>
|
||||
<d-description-item term="情报ID">{{ intelligence?.intelligenceId }}</d-description-item>
|
||||
<d-description-item term="情报类型">{{ intelligence?.intelligenceType }}</d-description-item>
|
||||
<d-description-item term="情报来源">{{ intelligence?.source }}</d-description-item>
|
||||
<d-description-item term="发布时间">
|
||||
{{ intelligence?.publishDate ? dayjs(intelligence.publishDate).format('YYYY-MM-DD HH:mm:ss') : '--' }}
|
||||
</d-description-item>
|
||||
<d-description-item term="紧急程度">{{ intelligence?.urgency }}</d-description-item>
|
||||
<d-description-item term="情报版本">{{ intelligence?.version || '1.0' }}</d-description-item>
|
||||
</d-descriptions>
|
||||
</d-card>
|
||||
|
||||
<!-- 情报摘要 -->
|
||||
<d-card class="detail-card mt-4">
|
||||
<div slot="header" class="card-header">情报摘要</div>
|
||||
<div class="summary-content">
|
||||
{{ intelligence?.summary || '暂无摘要信息' }}
|
||||
</div>
|
||||
</d-card>
|
||||
|
||||
<!-- 详细内容 -->
|
||||
<d-card class="detail-card mt-4">
|
||||
<div slot="header" class="card-header">
|
||||
详细内容
|
||||
<d-button size="sm" variant="text" @click="toggleContentExpand">
|
||||
{{ isContentExpanded ? '收起' : '全文展开' }}
|
||||
</d-button>
|
||||
</div>
|
||||
<div class="detail-content" :class="{ 'expanded': isContentExpanded }">
|
||||
<pre v-if="intelligence?.content">{{ formatContent(intelligence.content) }}</pre>
|
||||
<p v-else>暂无详细内容</p>
|
||||
</div>
|
||||
</d-card>
|
||||
|
||||
<!-- 相关IOCs -->
|
||||
<d-card class="detail-card mt-4" v-if="intelligence?.relatedIocs && intelligence.relatedIocs.length">
|
||||
<div slot="header" class="card-header">
|
||||
相关IOCs
|
||||
<d-button size="sm" variant="text" @click="copyAllIocs">
|
||||
<i class="fa fa-copy mr-1"></i>复制全部
|
||||
</d-button>
|
||||
</div>
|
||||
<d-table :data="intelligence.relatedIocs" table-layout="auto">
|
||||
<d-column field="type" header="类型" :width="100"></d-column>
|
||||
<d-column field="value" header="值"></d-column>
|
||||
<d-column header="操作" :width="100">
|
||||
<template #default="scope">
|
||||
<d-button
|
||||
size="sm"
|
||||
variant="text"
|
||||
@click="copyIoc(scope.row.value)"
|
||||
>
|
||||
<i class="fa fa-copy"></i>复制
|
||||
</d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-card>
|
||||
|
||||
<!-- 参考信息 -->
|
||||
<d-card class="detail-card mt-4" v-if="intelligence?.references && intelligence.references.length">
|
||||
<div slot="header" class="card-header">参考信息</div>
|
||||
<ul class="reference-list">
|
||||
<li v-for="(ref, idx) in intelligence.references" :key="idx">
|
||||
<a :href="ref.url" target="_blank" class="reference-link">
|
||||
{{ ref.title || `参考链接 ${idx + 1}` }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</d-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="detail-actions mt-6">
|
||||
<d-button @click="$emit('close')" variant="secondary">关闭</d-button>
|
||||
<d-button @click="exportReport" class="ml-2">
|
||||
<i class="fa fa-download mr-1"></i>导出报告
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 接收父组件传入的情报数据
|
||||
const props = defineProps({
|
||||
intelligence: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
// 组件内部状态
|
||||
const isContentExpanded = ref(false);
|
||||
const toast = ref();
|
||||
|
||||
// 类型颜色映射（与列表页保持一致）
|
||||
const typeColorMap = {
|
||||
'威胁情报': '#165DFF',
|
||||
'漏洞情报': '#f66f6a',
|
||||
'事件情报': '#fac20a',
|
||||
'APT情报': '#722ED1',
|
||||
'恶意代码情报': '#f5319d'
|
||||
};
|
||||
|
||||
// 紧急程度颜色映射（与列表页保持一致）
|
||||
const urgencyColorMap = {
|
||||
'紧急': '#c7000b',
|
||||
'高': '#f66f6a',
|
||||
'中': '#fac20a',
|
||||
'低': '#5e7ce0'
|
||||
};
|
||||
|
||||
// 切换内容展开/收起状态
|
||||
const toggleContentExpand = () => {
|
||||
isContentExpanded.value = !isContentExpanded.value;
|
||||
};
|
||||
|
||||
// 格式化内容（处理换行和缩进）
|
||||
const formatContent = (content: string) => {
|
||||
return content.replace(/\\n/g, '\n').replace(/ /g, ' ');
|
||||
};
|
||||
|
||||
// 复制单个IOC
|
||||
const copyIoc = (value: string) => {
|
||||
navigator.clipboard.writeText(value).then(() => {
|
||||
toast.success({ content: '已复制到剪贴板', duration: 2000 });
|
||||
}).catch(() => {
|
||||
toast.error({ content: '复制失败，请手动复制', duration: 2000 });
|
||||
});
|
||||
};
|
||||
|
||||
// 复制所有IOCs
|
||||
const copyAllIocs = () => {
|
||||
if (!props.intelligence.relatedIocs || !props.intelligence.relatedIocs.length) return;
|
||||
|
||||
const allIocs = props.intelligence.relatedIocs
|
||||
.map(item => `${item.type}: ${item.value}`)
|
||||
.join('\n');
|
||||
|
||||
navigator.clipboard.writeText(allIocs).then(() => {
|
||||
toast.success({ content: '全部IOC已复制到剪贴板', duration: 2000 });
|
||||
}).catch(() => {
|
||||
toast.error({ content: '复制失败，请手动复制', duration: 2000 });
|
||||
});
|
||||
};
|
||||
|
||||
// 导出报告
|
||||
const exportReport = () => {
|
||||
// 模拟导出功能
|
||||
toast.info({ content: '正在准备导出报告...', duration: 2000 });
|
||||
// 实际应用中应调用后端导出接口
|
||||
// const reportData = { ...props.intelligence };
|
||||
// exportIntelligenceReport(reportData).then(() => {
|
||||
// toast.success({ content: '报告导出成功', duration: 2000 });
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.intelligence-detail {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--devui-text-primary);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
--devui-card-padding: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--devui-text-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
padding: 8px 0;
|
||||
line-height: 1.6;
|
||||
color: var(--devui-text-secondary);
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
|
||||
&.expanded {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.6;
|
||||
color: var(--devui-text-secondary);
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reference-list {
|
||||
padding: 8px 0 8px 20px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
color: var(--devui-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
//padding-top: 16px;
|
||||
border-top: 1px solid var(--devui-border);
|
||||
}
|
||||
|
||||
// 滚动条美化
|
||||
.detail-content::-webkit-scrollbar,
|
||||
.intelligence-detail::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-thumb,
|
||||
.intelligence-detail::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: var(--devui-scrollbar-thumb-color);
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-track,
|
||||
.intelligence-detail::-webkit-scrollbar-track {
|
||||
background-color: var(--devui-scrollbar-track-color);
|
||||
}
|
||||
</style>
|
||||
327
src/views/Jyh/KnowledgeHub/Components/IntelligenceList/index.vue
Normal file
327
src/views/Jyh/KnowledgeHub/Components/IntelligenceList/index.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<div class="search-form">
|
||||
<d-form layout="horizontal" :label-align="'end'">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="6">
|
||||
<d-form-item field="intelligenceId" label="情报ID">
|
||||
<d-input placeholder="请输入情报ID" v-model="newFormData.intelligenceId" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-form-item field="intelligenceType" label="情报类型">
|
||||
<d-select
|
||||
:options="typeArray"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.intelligenceType"
|
||||
placeholder="请选择情报类型"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-form-item field="source" label="情报来源">
|
||||
<d-select
|
||||
:options="sourceArray"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.source"
|
||||
placeholder="请选择情报来源"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-form-item field="urgency" label="紧急程度">
|
||||
<d-select
|
||||
:options="urgencyArray"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.urgency"
|
||||
placeholder="请选择紧急程度"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</d-form>
|
||||
<div class="jyh-form-operation">
|
||||
<d-button @click="getList(1)" class="mr-2" variant="solid">搜索</d-button>
|
||||
<d-button variant="solid" color="secondary" @click="clear">清空</d-button>
|
||||
</div>
|
||||
</div>
|
||||
<Card class="mt-3">
|
||||
<d-table :show-loading="loading" class="jyh-table" :data="dataLists" v-if="dataLists.length > 0" table-layout="auto">
|
||||
<d-column type="index" width="40"></d-column>
|
||||
<d-column field="intelligenceId" header="情报ID"></d-column>
|
||||
<d-column field="title" header="情报标题"></d-column>
|
||||
<d-column field="intelligenceType" header="情报类型">
|
||||
<template #default="scope">
|
||||
<d-tag :color="typeColorMap[scope.row.intelligenceType]">{{ scope.row.intelligenceType }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="source" header="情报来源"></d-column>
|
||||
<d-column field="publishDate" header="发布时间">
|
||||
<template #default="scope">
|
||||
{{ scope.row.publishDate
|
||||
? dayjs(scope.row.publishDate).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '--'
|
||||
}}
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="urgency" header="紧急程度">
|
||||
<template #default="scope">
|
||||
<d-tag :color="urgencyColorMap[scope.row.urgency]">{{ scope.row.urgency }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column header="操作" fixed-right="0px" width="130">
|
||||
<template #default="scope">
|
||||
<a style="margin-right: 8px" class="devui-link" @click="openIntelligenceDetail(scope.row)">详情</a>
|
||||
<d-button @click="handleViewAIModal(scope.row)" variant="text" color="primary"> AI问答 </d-button>
|
||||
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
<NoData v-else :small="false"></NoData>
|
||||
<div class="mt-20 mb-20 flex justify-end" v-if="dataLists.length > 0">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="getList()"
|
||||
@page-size-change="getList()"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 情报详情抽屉 -->
|
||||
<d-drawer v-model="detailVisible" style="width: 900px">
|
||||
<IntelligenceDetail :intelligence="currentIntelligence" @close="detailVisible = false"></IntelligenceDetail>
|
||||
</d-drawer>
|
||||
|
||||
|
||||
<AIModal ref="AIModalRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import AIModal from '../AIModal.vue';
|
||||
// 假设存在情报详情组件
|
||||
import IntelligenceDetail from './IntelligenceDetail.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const title = computed(() => route.meta?.title || '情报列表');
|
||||
|
||||
// 打开弹框方法
|
||||
const AIModalRef = ref(null);
|
||||
const handleViewAIModal = (resultId) => {
|
||||
AIModalRef.value.open(resultId); // 传递result_id参数
|
||||
};
|
||||
|
||||
// 分页配置
|
||||
const pager = ref({
|
||||
total: 50,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 搜索表单数据
|
||||
const newFormData = ref({
|
||||
intelligenceId: '',
|
||||
intelligenceType: '',
|
||||
source: '',
|
||||
urgency: ''
|
||||
});
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 情报列表数据
|
||||
const dataLists = ref([]);
|
||||
|
||||
// 详情抽屉状态
|
||||
const detailVisible = ref(false);
|
||||
const currentIntelligence = ref(null);
|
||||
|
||||
// 类型选项与颜色映射
|
||||
const typeArray = [
|
||||
{ value: '威胁情报', name: '威胁情报' },
|
||||
{ value: '漏洞情报', name: '漏洞情报' },
|
||||
{ value: '事件情报', name: '事件情报' },
|
||||
{ value: 'APT情报', name: 'APT情报' },
|
||||
{ value: '恶意代码情报', name: '恶意代码情报' }
|
||||
];
|
||||
|
||||
const typeColorMap = {
|
||||
'威胁情报': '#165DFF',
|
||||
'漏洞情报': '#f66f6a',
|
||||
'事件情报': '#fac20a',
|
||||
'APT情报': '#722ED1',
|
||||
'恶意代码情报': '#f5319d'
|
||||
};
|
||||
|
||||
// 来源选项
|
||||
const sourceArray = [
|
||||
{ value: '内部监测', name: '内部监测' },
|
||||
{ value: '合作伙伴', name: '合作伙伴' },
|
||||
{ value: '公开渠道', name: '公开渠道' },
|
||||
{ value: '威胁情报平台', name: '威胁情报平台' },
|
||||
{ value: 'CERT/CC', name: 'CERT/CC' }
|
||||
];
|
||||
|
||||
// 紧急程度选项与颜色映射
|
||||
const urgencyArray = [
|
||||
{ value: '紧急', name: '紧急' },
|
||||
{ value: '高', name: '高' },
|
||||
{ value: '中', name: '中' },
|
||||
{ value: '低', name: '低' }
|
||||
];
|
||||
|
||||
const urgencyColorMap = {
|
||||
'紧急': '#c7000b',
|
||||
'高': '#f66f6a',
|
||||
'中': '#fac20a',
|
||||
'低': '#5e7ce0'
|
||||
};
|
||||
|
||||
// 清空搜索条件
|
||||
const clear = () => {
|
||||
newFormData.value = {
|
||||
intelligenceId: '',
|
||||
intelligenceType: '',
|
||||
source: '',
|
||||
urgency: ''
|
||||
};
|
||||
getList();
|
||||
};
|
||||
|
||||
// 打开情报详情
|
||||
const openIntelligenceDetail = (row) => {
|
||||
currentIntelligence.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 获取情报列表数据
|
||||
const getList = async (current?) => {
|
||||
loading.value = true;
|
||||
if (current) pager.value.pageIndex = current;
|
||||
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
// 模拟情报数据
|
||||
const mockData = Array.from({ length: pager.value.pageSize }, (_, i) => {
|
||||
const id = (pager.value.pageIndex - 1) * pager.value.pageSize + i + 1;
|
||||
const types = ['威胁情报', '漏洞情报', '事件情报', 'APT情报', '恶意代码情报'];
|
||||
const sources = ['内部监测', '合作伙伴', '公开渠道', '威胁情报平台', 'CERT/CC'];
|
||||
const urgencies = ['紧急', '高', '中', '低'];
|
||||
const randomType = types[Math.floor(Math.random() * types.length)];
|
||||
|
||||
return {
|
||||
id: id,
|
||||
intelligenceId: `INT-${2024}${String(id).padStart(5, '0')}`,
|
||||
title: `${randomType}：关于${['某APT组织', '新型勒索病毒', '重大漏洞', '网络攻击事件'][Math.floor(Math.random() * 4)]}的分析`,
|
||||
intelligenceType: randomType,
|
||||
source: sources[Math.floor(Math.random() * sources.length)],
|
||||
publishDate: dayjs().subtract(Math.floor(Math.random() * 30), 'day').toISOString(),
|
||||
urgency: urgencies[Math.floor(Math.random() * urgencies.length)],
|
||||
summary: '这是一份重要的安全情报，包含潜在威胁的详细分析和应对建议...',
|
||||
content: '【情报详情】\n近期监测到相关威胁活动频繁发生，主要影响范围包括政府、金融和能源行业...\n【影响范围】\n...\n【应对建议】\n1. 及时更新系统补丁\n2. 加强网络边界防护\n3. 部署威胁检测设备',
|
||||
relatedIocs: [
|
||||
{ type: 'IP', value: `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}` },
|
||||
{ type: '域名', value: `malicious-${id}.com` }
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
dataLists.value = mockData;
|
||||
pager.value.total = 50; // 模拟总条数
|
||||
loading.value = false;
|
||||
}, 600);
|
||||
|
||||
// 实际接口调用示例
|
||||
/*
|
||||
const { data } = await getIntelligenceList({
|
||||
intelligenceId: newFormData.value.intelligenceId,
|
||||
intelligenceType: newFormData.value.intelligenceType,
|
||||
source: newFormData.value.source,
|
||||
urgency: newFormData.value.urgency,
|
||||
current: current || pager.value.pageIndex,
|
||||
size: pager.value.pageSize
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
dataLists.value = data?.data?.data?.records || [];
|
||||
pager.value.total = data.data.data?.total || 0;
|
||||
*/
|
||||
};
|
||||
|
||||
// 页面挂载时加载数据
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
// 搜索触发
|
||||
const search = () => {
|
||||
pager.value.pageIndex = 1;
|
||||
getList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
.page-wrap {
|
||||
margin: 16px;
|
||||
.page-title {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: medium;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
.g-content-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
margin-right: 20px;
|
||||
|
||||
.left-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.output-btn {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jyh-form-operation {
|
||||
margin-left: 20px !important;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 适配情报标题较长的情况
|
||||
::v-deep .devui-table-cell {
|
||||
&.devui-table-cell-ellipsis {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/views/Jyh/KnowledgeHub/Components/OrgModal.vue
Normal file
84
src/views/Jyh/KnowledgeHub/Components/OrgModal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<d-modal
|
||||
title="贡献者分布"
|
||||
v-model="visible"
|
||||
class="file-search-modal"
|
||||
:style="{ width: '800px' }"
|
||||
@close="handleClose"
|
||||
>
|
||||
<Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
|
||||
<d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
|
||||
<p class="text-center mt-translate-y">组织/公司分布</p>
|
||||
</Card>
|
||||
<template #footer>
|
||||
<d-modal-footer style="text-align: center;">
|
||||
<d-button variant="solid" color="primary" @click="handleClose">确认</d-button>
|
||||
<d-button @click="handleClose">取消</d-button>
|
||||
</d-modal-footer>
|
||||
</template>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineExpose, reactive } from 'vue';
|
||||
import { DChart } from 'vue-devui/echarts';
|
||||
|
||||
const optionOrgChart = reactive({
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
|
||||
},
|
||||
yAxis: {
|
||||
// 给y轴添加单位后缀
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
name: '单位',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
// 给label添加单位后缀
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2CB8C9',
|
||||
borderRadius: [5, 5, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 控制模态框显示/隐藏
|
||||
const visible = ref(false);
|
||||
|
||||
// 打开模态框
|
||||
const openModal = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法，供父组件调用
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
</style>
|
||||
839
src/views/Jyh/KnowledgeHub/Components/OssQuery.vue
Normal file
839
src/views/Jyh/KnowledgeHub/Components/OssQuery.vue
Normal file
@@ -0,0 +1,839 @@
|
||||
<template>
|
||||
<div class="secret-container">
|
||||
<div class="search-form">
|
||||
<d-form layout="horizontal" :label-align="'end'">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="8">
|
||||
<d-form-item field="name" label="组件名称">
|
||||
<d-input placeholder="请输入组件名称" v-model="newFormData.softwareName" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="version" label="组件版本">
|
||||
<d-input placeholder="请输入组件版本" v-model="newFormData.softwareVersion" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="language" label="编程语言">
|
||||
<d-select
|
||||
:options="languageList"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.programmingLanguage"
|
||||
placeholder="请选择编程语言"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<!-- <d-col :span="8">-->
|
||||
<!-- <d-form-item field="license" label="license">-->
|
||||
<!-- <d-input placeholder="请输入license名称" v-model="newFormData.licenseName" />-->
|
||||
<!-- </d-form-item>-->
|
||||
<!-- </d-col>-->
|
||||
</d-row>
|
||||
<d-row :gutter="16">
|
||||
<!-- <d-col :span="8">-->
|
||||
<!-- <d-form-item field="dependency" label="依赖组件名称">-->
|
||||
<!-- <d-input placeholder="请输入依赖组件名称" v-model="newFormData.dependentSoftware" />-->
|
||||
<!-- </d-form-item>-->
|
||||
<!-- </d-col>-->
|
||||
<d-col :span="8">
|
||||
<d-form-item field="date" label="版本发布日期">
|
||||
<d-range-date-picker-pro
|
||||
v-model="newFormData.dateRange"
|
||||
style="width: 100%"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
:limitDateRange="limitDateRange"
|
||||
/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="industry" label="行业">
|
||||
<d-select
|
||||
:key="newFormData.industry"
|
||||
:options="industryList"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.industry"
|
||||
placeholder="请选择行业"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<!-- <d-row :gutter="16">-->
|
||||
<!--<!– <d-col :span="8">–>-->
|
||||
<!--<!– <d-form-item field="interestTag" label="属性标签">–>-->
|
||||
<!--<!– <d-input placeholder="请输入属性标签" v-model="newFormData.interestTag" />–>-->
|
||||
<!--<!– </d-form-item>–>-->
|
||||
<!--<!– </d-col>–>-->
|
||||
<!-- <d-col :span="8">-->
|
||||
<!-- <d-form-item field="industry" label="行业">-->
|
||||
<!-- <d-select-->
|
||||
<!-- :key="newFormData.industry"-->
|
||||
<!-- :options="industryList"-->
|
||||
<!-- :allow-clear="true"-->
|
||||
<!-- v-model="newFormData.industry"-->
|
||||
<!-- placeholder="请选择行业"-->
|
||||
<!-- ></d-select>-->
|
||||
<!-- </d-form-item>-->
|
||||
<!-- </d-col>-->
|
||||
<!-- </d-row>-->
|
||||
</d-form>
|
||||
<div class="jyh-form-operation">
|
||||
<d-button @click="getReleaseList" class="mr-2" variant="solid">搜索</d-button>
|
||||
<d-button variant="solid" color="secondary" @click="clear">清空</d-button>
|
||||
</div>
|
||||
<div class="left-btn">
|
||||
<d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text" @click="exportResult"
|
||||
>导出</d-button
|
||||
>
|
||||
<span v-if="isLogin" style="height: 14px" class="split"></span>
|
||||
<TableSetting
|
||||
:columns="columns"
|
||||
@setDefult="setDefult"
|
||||
@updateTableKey="updateTableKey"
|
||||
:show-column-list="showColumnList"
|
||||
@update:show-column-list="updateShowColumnList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-20">
|
||||
<d-table
|
||||
:key="tableKey"
|
||||
ref="filterTableRef"
|
||||
class="jyh-table"
|
||||
v-if="tableData.length"
|
||||
:striped="false"
|
||||
:data="tableData"
|
||||
>
|
||||
<d-column type="checkable" width="40" reserve-check align="center"></d-column>
|
||||
<!-- 索引列 -->
|
||||
<!-- <d-column type="index" width="40"></d-column> -->
|
||||
|
||||
<!-- 动态渲染列 -->
|
||||
<template v-for="column in columns" :key="column.key">
|
||||
<d-column v-if="column.visible" :field="column.key" :header="column.label" :width="column.width||120" :show-overflow-tooltip="!column.tooltip">
|
||||
<!-- 自定义列内容 -->
|
||||
<template #default="scope">
|
||||
<template v-if="column.key === 'softwareName'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.softwareName }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'versionName'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.versionName }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'version'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.version }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'securityScore'">
|
||||
<!-- <a @click="gotoDetail(scope.row)" style="-->
|
||||
<!-- <a style="-->
|
||||
<!-- font-weight: bold;-->
|
||||
<!-- color: #409EFF;-->
|
||||
<!-- font-size: 16px;-->
|
||||
<!-- ">{{ scope.row.securityScore }}</a>-->
|
||||
<d-popover :content="scope.row.securityScore || '--'" trigger="hover" style="background-color: #7693f5; color: #fff">
|
||||
<d-tag color="#ef4444">{{ '非常重要' || '--' }}</d-tag>
|
||||
</d-popover>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'trustScore'">
|
||||
<d-popover trigger="hover" >
|
||||
<template #default>
|
||||
<d-tag color="#ef4444">{{ '高度可信' || '--' }}</d-tag>
|
||||
</template>
|
||||
<template #content>
|
||||
<div style="padding: 4px">
|
||||
<div style="display: flex;justify-content: space-between;"><span>低</span><span>中</span><span>高</span></div>
|
||||
<d-progress height="8px" bar-bg-color="#ef4444" style="width: 150px" :percentage="100" percentageText=""></d-progress>
|
||||
</div>
|
||||
</template>
|
||||
</d-popover>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'releaseDate'">
|
||||
<span>{{ formatTime(scope.row.releaseDate, 'YYYY-MM-DD') }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'eolDate'">
|
||||
<span>{{ formatTime(scope.row.eolDate, 'YYYY-MM-DD') }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'softwareVersion'">
|
||||
<a @click="gotoDetail(scope.row)">{{ scope.row.softwareVersion }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'smStatus'">
|
||||
<a>{{ scope.row.smStatus }}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'industryCategory'">
|
||||
<d-tag type="success">{{ getIndustryName(scope.row.industryCategory) }}</d-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'programmingLanguage'">
|
||||
<d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'primaryLanguage'">
|
||||
<d-tag type="primary">{{ scope.row.primaryLanguage }}</d-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'contributorCountries'">
|
||||
<!-- <div style="cursor: pointer" @click="openCountryModal(column)">-->
|
||||
<!-- <span class="mr-2">美国 3.57%</span>-->
|
||||
<!-- <d-tag color="gray">+3</d-tag>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
<template v-else-if="column.key === 'contributorOrganizations'">
|
||||
<!-- <div style="cursor: pointer" @click="openOrgModal(column)">-->
|
||||
<!-- <span class="mr-2">microsoft 3.57%</span>-->
|
||||
<!-- <d-tag color="gray">+3</d-tag>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
<template v-else-if="column.key === 'sourceDownloadUrl'">
|
||||
<a :href="scope.row.sourceDownloadUrl">{{ scope.row.sourceDownloadUrl }}</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[column.key] }}
|
||||
</template>
|
||||
</template>
|
||||
</d-column>
|
||||
</template>
|
||||
<d-column header="操作" fixed-right="0px" width="130">
|
||||
<template #default="scope">
|
||||
<!-- <a class="devui-link" style="margin-right: 8px" @click="openVulnDetail(scope.row)">详情</a>-->
|
||||
<d-button @click="handleViewAIModal(scope.row)" variant="text" color="primary"> AI问答 </d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
|
||||
<!-- <DataPanel v-else skeleton :card="false" :empty="true">-->
|
||||
<!-- </DataPanel>-->
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 mb-20 flex justify-end">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="getReleaseList()"
|
||||
@page-size-change="getReleaseList()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<GModal
|
||||
v-model="deletevModels"
|
||||
ref="deleteModal"
|
||||
title="删除?"
|
||||
@confirm="confirmDelete"
|
||||
showWarnIcon
|
||||
confirmColor="danger"
|
||||
>
|
||||
<span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all"
|
||||
>你确认删除此项：{{ item.cla_name }} ？</span
|
||||
>
|
||||
</GModal>
|
||||
|
||||
<!-- 引入子组件 -->
|
||||
<CountryModal ref="countryModalRef" />
|
||||
|
||||
<!-- 引入子组件 -->
|
||||
<OrgModal ref="orgModalRef" />
|
||||
|
||||
|
||||
<AIModal ref="AIModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
|
||||
import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
|
||||
import SettingText from '@/components/Setting/SettingText/index.vue';
|
||||
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
|
||||
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { GModal } from '@/components/Setting/index';
|
||||
import TableSetting from '@/components/TableSetting/index.vue';
|
||||
import { reqCatch } from '@/utils/catch';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import { Message } from 'vue-devui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import CountryModal from './CountryModal.vue';
|
||||
import OrgModal from './OrgModal.vue';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import AIModal from './AIModal.vue';
|
||||
import { useAccountStore } from '@/stores/user';
|
||||
import * as XLSX from 'xlsx';
|
||||
const { formatTime } = useTimeFormat();
|
||||
import { getReleaseExport, releasePage, searchLanguageList } from '@/api/jyh';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
import { useGlobalInfoStore } from '@/stores/Global';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const filterTableRef = ref();
|
||||
const AIModalRef = ref();
|
||||
const { namespace } = getOrgInfo();
|
||||
const userInfo = useAccountStore();
|
||||
const { isLogin } = storeToRefs(userInfo);
|
||||
// 定义 tableKey，用于强制刷新表格
|
||||
const tableKey = ref(0);
|
||||
const countryVisible = ref(false);
|
||||
const orgVisible = ref(false);
|
||||
const allTableData = ref([]);
|
||||
const tableData = ref([
|
||||
{
|
||||
"id": 7085,
|
||||
"userId": 372,
|
||||
"softwareName": "killbill-embeddeddb-common",
|
||||
"softwareVersion": "0.26.5",
|
||||
"releaseVersionDate": "2024-03-21 00:00:00",
|
||||
"releaseDate": null,
|
||||
"primaryLanguage": "Java",
|
||||
"contributorCount": 0,
|
||||
"contributorCountries": null,
|
||||
"organizationDistribution": null,
|
||||
"developer": "org.kill-bill.commons",
|
||||
"officialWebsite": null,
|
||||
"integrationRiskLevel": 1,
|
||||
"securityScore": 0.0,
|
||||
"codeLines": 0,
|
||||
"businessDomain": null,
|
||||
"industryCategory": null,
|
||||
"sourceDownloadUrl": "http://222.20.126.185:9030/test/software-packages/org.kill-bill.commons:killbill-embeddeddb-common:0.26.5.jar",
|
||||
"repoHostingUrl": null,
|
||||
"eolNoticeUrl": null,
|
||||
"repoTagCommitId": null,
|
||||
"eolDate": null,
|
||||
"entityFilename": null,
|
||||
"entityDownloadUrl": null,
|
||||
"storageTime": null,
|
||||
"communityName": null,
|
||||
"communityWebsite": null,
|
||||
"communityContact": null,
|
||||
"communityDescription": null,
|
||||
"softwareType": "1",
|
||||
"deleted": 0,
|
||||
"isTrust": 1,
|
||||
"isCritical": 0,
|
||||
"isGitcode": 0,
|
||||
"status": 2,
|
||||
"createBy": null,
|
||||
"updateBy": null,
|
||||
"createTime": "2025-10-15 09:38:22",
|
||||
"updateTime": "2025-10-30 15:35:22",
|
||||
"licenseUseCases": null,
|
||||
"mainLicenseName": null,
|
||||
"licenseName": null,
|
||||
"mainLicenseDescription": null,
|
||||
"licenseDescription": null,
|
||||
"securityHelpChannel": null,
|
||||
"vulnDisclosureUrl": null,
|
||||
"sourceSoftwareInfo": null,
|
||||
"copyrightReportName": null,
|
||||
"copyrightEntryTime": null,
|
||||
"copyrightReportUrl": null,
|
||||
"link": "https://gitcode.com/baomidou/mybatis-plus.git",
|
||||
"isImport": 1,
|
||||
"componentCount": 2,
|
||||
"licenseCount": 0,
|
||||
"vulnerabilityCount": 0,
|
||||
"vulnScore": 100,
|
||||
"licenseScore": 0,
|
||||
"malScore": null,
|
||||
"trustScore": null,
|
||||
"gitcodeLink": null,
|
||||
"gitcodeDownloadUrl": null,
|
||||
"taskId": null,
|
||||
"taskType": null,
|
||||
"softwareId": null,
|
||||
"userName": null,
|
||||
"contributorGeoDistribution": null,
|
||||
"contributorOrgDistribution": null,
|
||||
"communityHash": null,
|
||||
"copyright": null,
|
||||
"externalVulnerabilitySources": null,
|
||||
"versionDescription": null,
|
||||
"compatibilityRiskDescription": null,
|
||||
"softwareTrustLevel": 3,
|
||||
"entryTime": null,
|
||||
"taskStatus": null,
|
||||
"approvalComment": null
|
||||
}
|
||||
]);
|
||||
// const languageList = ref([]);
|
||||
const globalInfo = useGlobalInfoStore();
|
||||
const languageList = globalInfo.languageList;
|
||||
const headerSearch = ref(globalInfo.headerSearch);
|
||||
const industryList = ref(globalInfo.industryList);
|
||||
const newFormData = ref({
|
||||
licenseName: '',
|
||||
searchType: 'software',
|
||||
softwareName: '',
|
||||
softwareVersion: '',
|
||||
dependentSoftware: '',
|
||||
programmingLanguage: '',
|
||||
interestTag: '',
|
||||
industry: '',
|
||||
dateRange: ['', '']
|
||||
});
|
||||
const currentDate = new Date(); // 获取当前时间
|
||||
const limitDateRange = ref<Date[]>([new Date(2000, 1, 1), currentDate]); // 结束日期设置为当前时间
|
||||
|
||||
// watch(() => globalInfo.headerSearch, (newVal: any) => {
|
||||
// headerSearch.value = newVal;
|
||||
// console.log(newVal)
|
||||
// newFormData.value.searchType = newVal.searchType;
|
||||
// newFormData.value.softwareName = newVal.softwareName;
|
||||
// getReleaseList();
|
||||
// }, { deep: true })
|
||||
|
||||
|
||||
// 打开弹框方法
|
||||
const handleViewAIModal = (resultId) => {
|
||||
AIModalRef.value.open(resultId); // 传递result_id参数
|
||||
};
|
||||
|
||||
|
||||
const pager = ref({
|
||||
total: 10,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 删除弹窗
|
||||
const item = ref('');
|
||||
const deleteModal = ref();
|
||||
const deletevModels = ref(false);
|
||||
const openDelete = (row: any) => {
|
||||
item.value = row;
|
||||
deleteModal.value.showFlag = true;
|
||||
deletevModels.value = true;
|
||||
};
|
||||
|
||||
const defultColumns = ref([
|
||||
{ key: 'softwareName', label: '组件名称', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareVersion', label: '组件版本', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'trustScore', label: '组件可信等级', visible: true, filterable: false, sortable: true, tooltip: true },
|
||||
// { key: 'securityScore', label: '组件重要性评分', visible: true, filterable: false, sortable: true },
|
||||
{ key: 'licenseNum', label: 'License数量', visible: true, filterable: false, sortable: false,width: 140 },
|
||||
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'sourceDownloadUrl', label: '源码包下载地址', visible: true, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'releaseDate', label: '版本发布时间', visible: false, filterable: true, sortable: true,width: 160 },
|
||||
// { key: 'dependencyCount', label: '依赖组件数', visible: false, filterable: false, sortable: false },
|
||||
// { key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false,width: 160 },
|
||||
{ key: 'vulnerabilityCount', label: '漏洞数量', visible: false, filterable: false, sortable: false },
|
||||
{ key: 'developer', label: '开发商', visible: false, filterable: true, sortable: false },
|
||||
{ key: 'contributorCountries', label: '贡献者国家/地区分布', visible: false, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false,width: 160 },
|
||||
{ key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false },
|
||||
{
|
||||
key: 'externalVulnerabilitySource',
|
||||
label: '外部漏洞源的组件名称',
|
||||
visible: false,
|
||||
filterable: true,
|
||||
sortable: false,width: 200
|
||||
},
|
||||
{ key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
|
||||
{ key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false ,width: 160},
|
||||
{ key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true,width: 160 }
|
||||
]);
|
||||
// 定义 columns 数据
|
||||
const columns = ref([
|
||||
{ key: 'softwareName', label: '组件名称', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'softwareVersion', label: '组件版本', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'trustScore', label: '组件可信等级', visible: true, filterable: false, sortable: true, tooltip: true },
|
||||
// { key: 'securityScore', label: '组件重要性评分', visible: true, filterable: false, sortable: true },
|
||||
{ key: 'licenseNum', label: 'License数量', visible: true, filterable: false, sortable: false,width: 140 },
|
||||
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'sourceDownloadUrl', label: '源码包下载地址', visible: true, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'releaseDate', label: '版本发布时间', visible: false, filterable: true, sortable: true,width: 160 },
|
||||
// { key: 'dependencyCount', label: '依赖组件数', visible: false, filterable: false, sortable: false },
|
||||
// { key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false,width: 160 },
|
||||
{ key: 'vulnerabilityCount', label: '漏洞数量', visible: false, filterable: false, sortable: false },
|
||||
{ key: 'developer', label: '开发商', visible: false, filterable: true, sortable: false },
|
||||
{ key: 'contributorCountries', label: '贡献者国家/地区分布', visible: false, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false,width: 200 },
|
||||
{ key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false,width: 160 },
|
||||
{ key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false },
|
||||
{
|
||||
key: 'externalVulnerabilitySource',
|
||||
label: '外部漏洞源的组件名称',
|
||||
visible: false,
|
||||
filterable: true,
|
||||
sortable: false,width: 200
|
||||
},
|
||||
{ key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
|
||||
{ key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false ,width: 160},
|
||||
{ key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true,width: 160 }
|
||||
]);
|
||||
|
||||
// 定义 showColumnList 状态
|
||||
const showColumnList = ref(false);
|
||||
// 获取子组件的引用
|
||||
const countryModalRef = ref(null);
|
||||
const orgModalRef = ref(null);
|
||||
|
||||
const getIndustryName = (value) => {
|
||||
const industry = industryList.value.find((item) => item.value === value);
|
||||
return industry ? industry.name : '未知行业'; // 如果找不到，返回默认值
|
||||
};
|
||||
|
||||
// 清空高级搜索
|
||||
const clear = () => {
|
||||
newFormData.value = {
|
||||
licenseName: '',
|
||||
searchType: 'software',
|
||||
softwareName: '',
|
||||
softwareVersion: '',
|
||||
dependentSoftware: '',
|
||||
programmingLanguage: '',
|
||||
interestTag: '',
|
||||
industry: '',
|
||||
dateRange: ['', '']
|
||||
};
|
||||
getReleaseList();
|
||||
};
|
||||
|
||||
// 打开模态框的方法
|
||||
const setDefult = () => {
|
||||
columns.value = defultColumns.value;
|
||||
};
|
||||
// 打开模态框的方法
|
||||
const openCountryModal = () => {
|
||||
if (countryModalRef.value) {
|
||||
countryModalRef.value.openModal(); // 调用子组件的方法
|
||||
}
|
||||
};
|
||||
// 打开模态框的方法
|
||||
const openOrgModal = () => {
|
||||
if (orgModalRef.value) {
|
||||
orgModalRef.value.openModal(); // 调用子组件的方法
|
||||
}
|
||||
};
|
||||
// 更新 showColumnList 的方法
|
||||
const updateTableKey = () => {
|
||||
tableKey.value++; // 更新 tableKey，强制刷新表格
|
||||
};
|
||||
|
||||
// 更新 showColumnList 的方法
|
||||
const updateShowColumnList = (newValue) => {
|
||||
showColumnList.value = newValue;
|
||||
// tableKey.value++; // 更新 tableKey，强制刷新表格
|
||||
};
|
||||
// 更新 showColumnList 的方法
|
||||
const openCountryChart = (row) => {
|
||||
// selectRow.value = row;
|
||||
countryVisible.value = true;
|
||||
};
|
||||
// 更新 showColumnList 的方法
|
||||
const openOrgChart = (row) => {
|
||||
// selectRow.value = row;
|
||||
orgVisible.value = true;
|
||||
};
|
||||
|
||||
// 跳转
|
||||
const gotoDetail = (row) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'repoDetail/' + row.id
|
||||
});
|
||||
};
|
||||
|
||||
const repoFun = (arr: any) => {
|
||||
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const editRow = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'cla/edit/' + row.object_id,
|
||||
query: { cla: row.cla, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async (e: any) => {
|
||||
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
|
||||
// if (!res.error) {
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
// 去成员页
|
||||
const goMember = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去,注意路由有个:claID
|
||||
router.push({
|
||||
path: 'cla/claId/member',
|
||||
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
const getGroupClaListData = async () => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// page: pager.value.pageIndex,
|
||||
// per_page: pager.value.pageSize
|
||||
// };
|
||||
// const res = await reqCatch(getGroupClaList, params);
|
||||
// if (!res.error) {
|
||||
// tableData.value = res?.data?.data?.content;
|
||||
// pager.value.total = res.data.data.total;
|
||||
// }
|
||||
};
|
||||
getGroupClaListData();
|
||||
|
||||
const setClaStatus = async (row: any) => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// cla_id: row.object_id,
|
||||
// status: row.status
|
||||
// };
|
||||
// const res = await reqCatch(setGroupClaStatus, params);
|
||||
// if (!res.error) {
|
||||
// Message.success('操作成功!');
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
const signCla = (row: any) => {
|
||||
router.push('/cla/' + row.object_id);
|
||||
};
|
||||
|
||||
const getReleaseList = async () => {
|
||||
const { data, error } = await releasePage({
|
||||
softwareName: newFormData.value.softwareName || '',
|
||||
searchType: newFormData.value.searchType || '',
|
||||
softwareVersion: newFormData.value.softwareVersion || '',
|
||||
programmingLanguage: newFormData.value.programmingLanguage || '',
|
||||
interestTag: newFormData.value.interestTag || '',
|
||||
industry: newFormData.value.industry || '',
|
||||
licenseName: newFormData.value.licenseName || '',
|
||||
dependentSoftware: newFormData.value.dependentSoftware || '',
|
||||
releaseDateStart:
|
||||
newFormData.value.dateRange && newFormData.value.dateRange.length > 0 ? newFormData.value.dateRange[0] : '',
|
||||
releaseDateEnd:
|
||||
newFormData.value.dateRange && newFormData.value.dateRange.length > 0 ? newFormData.value.dateRange[1] : '',
|
||||
current: pager.value.pageIndex,
|
||||
size: pager.value.pageSize
|
||||
});
|
||||
if (!error && data) {
|
||||
allTableData.value = data.data.records;
|
||||
tableData.value = data.data.records;
|
||||
pager.value.total = data.data.total;
|
||||
|
||||
console.log(tableData.value);
|
||||
}
|
||||
};
|
||||
|
||||
const getLanguageList = async () => {
|
||||
const res: any = await searchLanguageList();
|
||||
if (!res.error) {
|
||||
languageList.value = res.data.data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// await getLanguageList();
|
||||
newFormData.value.softwareName = route.query.softwareName || '';
|
||||
newFormData.value.searchType = route.query.searchType || '';
|
||||
newFormData.value.softwareVersion = route.query.softwareVersion || '';
|
||||
newFormData.value.programmingLanguage = route.query.programmingLanguage || '';
|
||||
newFormData.value.interestTag = route.query.interestTag || '';
|
||||
newFormData.value.industry = route.query.searchType || '';
|
||||
newFormData.value.licenseName = route.query.licenseName || '';
|
||||
newFormData.value.dependentSoftware = route.query.dependentSoftware || '';
|
||||
newFormData.value.dateRange = [route.query.releaseDateStart || '', route.query.releaseDateEnd || ''];
|
||||
nextTick(() => {
|
||||
getReleaseList();
|
||||
});
|
||||
// getReleaseList();
|
||||
});
|
||||
|
||||
const exportResult = async () => {
|
||||
const selectDatas = filterTableRef.value.store.getCheckedRows().map((d) => d.id);
|
||||
if (!allTableData.value.length || selectDatas.length <= 0) {
|
||||
Message.info('未选择任何数据');
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await getReleaseExport({
|
||||
list: selectDatas,
|
||||
});
|
||||
if (data && !error) {
|
||||
// 方法1：如果后端返回的是文件流（Blob）
|
||||
const blob = new Blob([data.data]);
|
||||
const downloadUrl = window.URL.createObjectURL(blob);
|
||||
|
||||
// 创建一个临时的a标签触发下载
|
||||
const link = document.createElement('a');
|
||||
link.href = downloadUrl;
|
||||
|
||||
// 从Content-Disposition头中获取文件名，或者使用默认文件名
|
||||
const contentDisposition = data.headers['content-disposition'];
|
||||
let fileName = 'export.xlsx'; // 默认文件名
|
||||
// if (contentDisposition) {
|
||||
// const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
|
||||
// if (fileNameMatch && fileNameMatch[1]) {
|
||||
// fileName = fileNameMatch[1].replace(/^[^0-9]*|[^0-9.xlsx]*$/g, "");
|
||||
// }
|
||||
// }
|
||||
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// 清理
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(downloadUrl);
|
||||
} else {
|
||||
console.error('导出失败:', error);
|
||||
// 这里可以添加错误提示，比如使用Element Plus的ElMessage
|
||||
// ElMessage.error('文件导出失败');
|
||||
}
|
||||
};
|
||||
|
||||
// onMounted(() => {
|
||||
// const query: any = route.query;
|
||||
// newFormData.value = {
|
||||
// ...query
|
||||
// };
|
||||
// });
|
||||
|
||||
// const exportResult = () => {
|
||||
//
|
||||
// if (!allTableData.value.length) {
|
||||
// Message.info('暂无结果');
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// const selectDatas = filterTableRef.value.store.getCheckedRows().map((d) => d.id);
|
||||
// if (!allTableData.value.length || selectDatas.length <= 0) {
|
||||
// Message.info('未选择任何数据');
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// const exportData = allTableData.value
|
||||
// .filter((d) => {
|
||||
// return selectDatas.includes(d.id);
|
||||
// })
|
||||
// .map((item) => {
|
||||
// let res = {};
|
||||
// columns.value.forEach((col) => {
|
||||
// if (col.key === 'validStatus') {
|
||||
// res[col.label] = validStatusMap[item[col.key]] ? validStatusMap[item[col.key]] : '';
|
||||
// } else {
|
||||
// res[col.label] = item[col.key] ? item[col.key] : '';
|
||||
// }
|
||||
// });
|
||||
// return res;
|
||||
// });
|
||||
//
|
||||
// try {
|
||||
// const workSheet = XLSX.utils.json_to_sheet(exportData);
|
||||
// const workBook: any = { Sheets: { 校验结果: workSheet }, SheetNames: ['校验结果'] };
|
||||
// const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
|
||||
//
|
||||
// const link = document.createElement('a');
|
||||
// const blob = new Blob([excelBuffer]);
|
||||
// link.setAttribute('href', window.URL.createObjectURL(blob));
|
||||
// link.setAttribute('download', '组件存在及可信校验结果.xlsx');
|
||||
// link.style.visibility = 'hidden';
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// Message.success('导出成功');
|
||||
// } catch {
|
||||
// Message.error('导出失败');
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.secret-container {
|
||||
position: relative;
|
||||
min-height: 600px;
|
||||
|
||||
.secret-op {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $devui-contrast;
|
||||
}
|
||||
|
||||
:deep(.devui-table__row td) {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.devui-tag .devui-tag--default) {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #e3e3ee;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9a9b9c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cur-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2d2d2e;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
//background: #F2F5FC;
|
||||
|
||||
.left-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.output-btn {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jyh-form-operation {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.secret-breadcrumb {
|
||||
padding: 7px 20px 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="vuln-detail-container">
|
||||
<div class="vuln-title mb-2">
|
||||
<span>漏洞预警详情</span>
|
||||
<div class="vuln-sub-title">
|
||||
<!-- <d-button @click="openWarningDetail()" variant="solid">预警发布</d-button>-->
|
||||
<!-- <span class="split-line"></span>-->
|
||||
<d-icon name="icon-close" @click="$emit('close')"></d-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<div class="card-title">漏洞信息</div>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="12">
|
||||
<span class="card-key width-90">漏洞名称</span>
|
||||
<span class="card-val">{{ valInfos.vulnId || '--' }}</span>
|
||||
</d-col>
|
||||
<d-col :span="12">
|
||||
<span class="card-key width-90">漏洞类型</span>
|
||||
<span class="card-val">{{ valInfos.vulnType || '--' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="12">
|
||||
<span class="card-key width-90">漏洞时间</span>
|
||||
<span class="card-val">{{
|
||||
valInfos.publishDate ? dayjs(valInfos.publishDate).format('YYYY-MM-DD') : '--'
|
||||
}}</span>
|
||||
</d-col>
|
||||
<d-col :span="12">
|
||||
<span class="card-key width-90">严重程度</span>
|
||||
<span class="card-val" v-if="tagMap[valInfos.severity]">
|
||||
<d-tag :color="tagMap[valInfos.severity].color" size="sm">{{ tagMap[valInfos.severity].text }}</d-tag>
|
||||
</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</Card>
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<div class="card-title">漏洞影响的软件列表</div>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="24">
|
||||
<div v-if="componentsLists.length>0">
|
||||
<d-table
|
||||
class="jyh-table jyh-table-2"
|
||||
:header-bg="true"
|
||||
:data="componentsLists"
|
||||
:span-method="spanMethod"
|
||||
>
|
||||
<d-column field="effectedComponentName" header="软件名称" show-overflow-tooltip></d-column>
|
||||
<d-column field="effectedComponentVersion" header="软件版本及范围" show-overflow-tooltip></d-column>
|
||||
<d-column field="isCriticalInfrastructureComponent" header="是否用户订阅" width="140" align="center">
|
||||
<template #default="scope">
|
||||
<div class="text-center" v-if="scope.row.isCriticalInfrastructureComponent==='是'">
|
||||
<d-icon name="icon-right-o" style="font-size: 14px; color: rgb(80, 212, 171)"></d-icon>
|
||||
</div>
|
||||
|
||||
<div class="text-center" v-else>
|
||||
<d-icon name="icon-error-o" style="font-size: 14px; color: rgb(246, 111, 106)"></d-icon>
|
||||
</div>
|
||||
</template>
|
||||
</d-column>
|
||||
<!-- <d-column field="fixVersion" header="补丁版本"></d-column>-->
|
||||
<!-- <d-column field="fixIssue" header="修复建议" show-overflow-tooltip></d-column>-->
|
||||
<template #empty>
|
||||
<NoData :small="false"></NoData>
|
||||
</template>
|
||||
</d-table>
|
||||
<div class="mt-20 mb-20 flex justify-end" >
|
||||
<d-pagination
|
||||
style="display: inline-flex"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:can-view-total="true"
|
||||
:can-change-page-size="true"
|
||||
:can-jump-page="true"
|
||||
:max-items="5"
|
||||
total-item-text="总计"
|
||||
@page-index-change="getComponentsList"
|
||||
@page-size-change="getComponentsList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</Card>
|
||||
<!-- <Card simple class="jyh-card mb-4">-->
|
||||
<!-- <div class="card-title">受影响的开源软件是否出库？</div>-->
|
||||
<!-- <d-row class="mb-3">-->
|
||||
<!-- <d-col :span="24">-->
|
||||
<!-- <d-radio-group direction="row" v-model="isOut" @change="onStorageStartTask">-->
|
||||
<!-- <d-radio :value="2">出库</d-radio>-->
|
||||
<!-- <d-radio :value="1">不出库</d-radio>-->
|
||||
<!-- </d-radio-group>-->
|
||||
<!-- </d-col>-->
|
||||
<!-- </d-row>-->
|
||||
<!-- </Card>-->
|
||||
<!-- <Card simple class="jyh-card mb-4">-->
|
||||
<!-- <div class="card-title">预警订阅人员列表</div>-->
|
||||
<!-- <d-row class="mb-3">-->
|
||||
<!-- <d-col :span="24">-->
|
||||
<!-- <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="alertsUsersLists">-->
|
||||
<!-- <d-column field="username" header="订阅人"></d-column>-->
|
||||
<!-- <d-column field="method" header="订阅方式"></d-column>-->
|
||||
<!-- <d-column field="notifiedStatus" header="通知状态">-->
|
||||
<!-- <template #default="scope, text">-->
|
||||
<!-- <d-tag v-if="scope.row.notifiedStatus === 0" type="danger" size="sm">未通知</d-tag>-->
|
||||
<!-- <d-tag v-if="scope.row.notifiedStatus === 1" type="success" size="sm">已通知</d-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-column>-->
|
||||
<!-- <template #empty>-->
|
||||
<!-- <NoData :small="false"></NoData>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-table>-->
|
||||
<!-- <!– <div class="invitation-pagination">-->
|
||||
<!-- <d-pagination-->
|
||||
<!-- style="display: inline-flex"-->
|
||||
<!-- :total="subscribePager.total"-->
|
||||
<!-- v-model:pageSize="subscribePager.pageSize"-->
|
||||
<!-- v-model:pageIndex="subscribePager.pageIndex"-->
|
||||
<!-- :can-view-total="true"-->
|
||||
<!-- :can-change-page-size="true"-->
|
||||
<!-- :can-jump-page="true"-->
|
||||
<!-- :max-items="5"-->
|
||||
<!-- />-->
|
||||
<!-- </div> –>-->
|
||||
<!-- </d-col>-->
|
||||
<!-- </d-row>-->
|
||||
<!-- </Card>-->
|
||||
</div>
|
||||
|
||||
<d-modal class="warning-modal" v-model="warningModalVisable" title="">
|
||||
<EarlyWarningDetail
|
||||
@close="colseWarningDetail"
|
||||
:softwareId="valInfos.softwareId"
|
||||
:valInfos="valInfos"
|
||||
:softwareIds="softwareIds"
|
||||
:isStartOutTask="isOut"
|
||||
type="system"
|
||||
></EarlyWarningDetail>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
getVulnAffected,
|
||||
getVulnDetail,
|
||||
getVulnerabilitiesAlertsUsers,
|
||||
getVulnerabilitiesComponents,
|
||||
getVulnerabilitiesDetails,
|
||||
getVulnPatch,
|
||||
storageStartOutTask
|
||||
} from '@/api/repo';
|
||||
import { computed, onMounted, ref, shallowReactive } from 'vue';
|
||||
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
|
||||
import { Message } from 'vue-devui/message';
|
||||
|
||||
const tagMap = {
|
||||
Critical: {
|
||||
text: '致命',
|
||||
color: '#c7000b'
|
||||
},
|
||||
High: {
|
||||
text: '高',
|
||||
color: '#f66f6a'
|
||||
},
|
||||
Medium: {
|
||||
text: '中',
|
||||
color: '#fac20a'
|
||||
},
|
||||
Low: {
|
||||
text: '低',
|
||||
color: '#5e7ce0'
|
||||
},
|
||||
high: {
|
||||
text: '高',
|
||||
color: '#f66f6a'
|
||||
},
|
||||
medium: {
|
||||
text: '中',
|
||||
color: '#fac20a'
|
||||
},
|
||||
low: {
|
||||
text: '低',
|
||||
color: '#5e7ce0'
|
||||
}
|
||||
};
|
||||
const subscribePager = shallowReactive({
|
||||
total: 1,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: [10, 20, 30, 40, 50]
|
||||
});
|
||||
const isOut = ref(1);
|
||||
const propsData = defineProps(['vulnId']);
|
||||
|
||||
const warningModalVisable = ref(false);
|
||||
|
||||
const softwareIds = computed(() => {
|
||||
let arr = [];
|
||||
alertsUsersLists.value?.map(i=>{
|
||||
if(i.notifiedStatus==0) {
|
||||
if(!arr.includes(i.softwareId)) {
|
||||
arr.push(i.softwareId)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr;
|
||||
});
|
||||
|
||||
const openWarningDetail = () => {
|
||||
if(valInfos.value?.effectedComponents.length>0&&softwareIds.value.length>0) {
|
||||
warningModalVisable.value = true;
|
||||
} else {
|
||||
Message.warning('当前暂无需要通知的用户');
|
||||
}
|
||||
};
|
||||
const colseWarningDetail = () => {
|
||||
warningModalVisable.value = false;
|
||||
};
|
||||
|
||||
const onStorageStartTask = async (e) => {
|
||||
if (!valInfos.value?.softwareId) return;
|
||||
await storageStartOutTask({
|
||||
softwareId: valInfos.value?.softwareId,
|
||||
taskType: isOut.value
|
||||
});
|
||||
};
|
||||
|
||||
const severityMap = {
|
||||
high: '高',
|
||||
medium: '中',
|
||||
low: '低'
|
||||
};
|
||||
|
||||
const valInfos: any = ref({});
|
||||
const componentsLists: any = ref([]);
|
||||
const alertsUsersLists: any = ref([]);
|
||||
|
||||
const getComponentsList = async () => {
|
||||
const response = await getVulnerabilitiesComponents({
|
||||
id:propsData.vulnId,
|
||||
current: pager.value.pageIndex,
|
||||
size: pager.value.pageSize
|
||||
});
|
||||
debugger
|
||||
if (response.data.data.code === 200) {
|
||||
// 假设接口返回格式为 { code, data: { records, total } }
|
||||
componentsLists.value = response.data.data.data.records || [];
|
||||
pager.value.total = response.data.data.data.total || 0;
|
||||
} else {
|
||||
// Message.error('获取组件列表失败');
|
||||
componentsLists.value = [];
|
||||
pager.value.total = 0;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const _valInfos = await getVulnerabilitiesDetails(propsData.vulnId);
|
||||
const _alertsUsersLists = await getVulnerabilitiesAlertsUsers(propsData.vulnId);
|
||||
valInfos.value = _valInfos?.data?.data?.data;
|
||||
alertsUsersLists.value = _alertsUsersLists?.data?.data?.data?.map((user) => {
|
||||
const alertMethod = JSON.parse(user.alertTypeExt ?? '{}');
|
||||
let method = '';
|
||||
if (alertMethod.webSwitch) {
|
||||
method = '站内通知';
|
||||
} else if (alertMethod.emailSwitch) {
|
||||
method = '邮件';
|
||||
} else if (alertMethod.mobileSwitch) {
|
||||
method = '短信';
|
||||
}
|
||||
return {
|
||||
...user,
|
||||
method
|
||||
};
|
||||
});
|
||||
await getComponentsList()
|
||||
});
|
||||
|
||||
const pager = ref({
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 分页事件处理
|
||||
function onPageIndexChange(newPageIndex) {
|
||||
pager.value.pageIndex = newPageIndex;
|
||||
}
|
||||
|
||||
function onPageSizeChange(newPageSize) {
|
||||
// 重置页码为1
|
||||
pager.value.pageIndex = 1;
|
||||
pager.value.pageSize = newPageSize;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vuln-detail-container {
|
||||
width: 800px;
|
||||
padding: 20px;
|
||||
|
||||
.vuln-title {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.vuln-sub-title {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: regular;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
|
||||
.split-line {
|
||||
width: 1px;
|
||||
display: inline-block;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
background-color: #eef0f5;
|
||||
}
|
||||
|
||||
.release-time {
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.card-val {
|
||||
display: inline-block;
|
||||
width: calc(100% - 90px);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.invitation-pagination {
|
||||
padding: 12px 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.warning-modal {
|
||||
width: auto;
|
||||
|
||||
.devui-modal__header {
|
||||
font-size: 20px;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.devui-modal__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<d-modal style="width: 1200px" v-model="visible" @close="close" class="software-modal">
|
||||
<template #header>
|
||||
<gc-modal-header>
|
||||
<span class="text-G900 text-base font-bold leading-[24px]">受影响软件清单</span>
|
||||
</gc-modal-header>
|
||||
<div class="line bg-G200"></div>
|
||||
</template>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="24">
|
||||
<!-- 批量预警按钮（保留） -->
|
||||
<div class="mb-4 flex justify-start">
|
||||
<d-button
|
||||
variant="solid"
|
||||
color="primary"
|
||||
@click="batchPublishWarning"
|
||||
:disabled="selectedRows.length === 0"
|
||||
>
|
||||
批量预警
|
||||
</d-button>
|
||||
<span class="ml-3 text-G600" v-if="selectedRows.length > 0">
|
||||
已选中 {{ selectedRows.length }} 条数据
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="componentsLists.length > 0">
|
||||
<d-table
|
||||
ref="tableRef"
|
||||
class="jyh-table jyh-table-2"
|
||||
:header-bg="true"
|
||||
:data="componentsLists"
|
||||
:span-method="spanMethod"
|
||||
row-key="effectedComponentVersion"
|
||||
@check-change="handleCheckChange"
|
||||
@check-all-change="handleCheckAllChange"
|
||||
>
|
||||
<!-- 1. 新增：复选框列（DevUI标准选中入口） -->
|
||||
<d-column
|
||||
type="checkable"
|
||||
width="40"
|
||||
reserve-check
|
||||
></d-column>
|
||||
|
||||
<!-- 原有列（保持不变） -->
|
||||
<d-column field="effectedSoftwareName" header="应用名称" show-overflow-tooltip width="200"></d-column>
|
||||
<d-column field="effectedComponentName" header="组件名称" show-overflow-tooltip width="200"></d-column>
|
||||
<d-column field="effectedComponentVersion" header="版本及范围" show-overflow-tooltip width="200"></d-column>
|
||||
<d-column field="develop" header="组件开发者" show-overflow-tooltip width="180"></d-column>
|
||||
<d-column field="responsibleTeam" header="责任单位" show-overflow-tooltip width="180"></d-column>
|
||||
<d-column header="操作" fixed-right="0px" width="160">
|
||||
<template #default="scope">
|
||||
<a class="devui-link mr-[8px]" @click="openWarningDetail(scope.row)">发布预警</a>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
|
||||
<!-- 分页组件（保留，新增选中状态重置逻辑） -->
|
||||
<div class="mt-20 mb-20 flex justify-end">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:can-view-total="true"
|
||||
:can-change-page-size="true"
|
||||
:can-jump-page="true"
|
||||
:max-items="5"
|
||||
total-item-text="总计"
|
||||
@page-index-change="handlePageChange"
|
||||
@page-size-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<template #footer>
|
||||
<div class="flex justify-end px-[24px] pb-[24px] gap-2">
|
||||
<d-button @click="handleCancel">取消</d-button>
|
||||
<d-button variant="solid" :disabled="disabled" @click="handleConfirm">确定</d-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <EarlyWarningDetail :warningData="currentWarning" type="system" @refresh="getAlertSubscribesPage"></EarlyWarningDetail>-->
|
||||
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import { getVulnerabilitiesComponents } from '@/api/repo';
|
||||
import { Message } from 'vue-devui/message';
|
||||
import { useGlobalInfoStore } from '@/stores/Global';
|
||||
import { getNoticeAdd } from '@/api/jyh';
|
||||
const globalStore = useGlobalInfoStore();
|
||||
|
||||
// -------------------------- 1. 核心状态调整 --------------------------
|
||||
const tableRef = ref(null); // 新增：表格Ref，用于主动操作（如清空选中）
|
||||
const vulnId = ref('');
|
||||
const vulnRow = ref({});
|
||||
const visible = ref(false);
|
||||
const componentsLists = ref([]);
|
||||
const disabled = ref(false);
|
||||
const pager = ref({ total: 0, pageIndex: 1, pageSize: 10 });
|
||||
const warningData = ref({});
|
||||
const currentWarning = ref();
|
||||
const selectedRows = ref([]); // 存储选中的行数据（核心）
|
||||
|
||||
// 暴露给父组件的方法
|
||||
defineExpose({ open, close, setDisabled });
|
||||
|
||||
// -------------------------- 2. 选中功能核心逻辑（适配DevUI标准） --------------------------
|
||||
/**
|
||||
* 可选：控制行是否允许选中（如过滤特定责任单位的行）
|
||||
* @param row 当前行数据
|
||||
* @param rowIndex 行索引
|
||||
* @returns 是否允许选中
|
||||
*/
|
||||
const isRowCheckable = (row, rowIndex) => {
|
||||
// 示例：所有行都允许选中（可自定义条件，如 row.responsibleUnit === '信支工程大学'）
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 单选事件（DevUI标准事件：@check-change）
|
||||
* @param checked 当前行是否选中（boolean）
|
||||
* @param row 当前行数据（object）
|
||||
* @param selection 所有选中的行数据（array）
|
||||
*/
|
||||
// 复选框选中状态变化
|
||||
const handleCheckChange = (checked, row, selection) => {
|
||||
if (checked) {
|
||||
if (!selectedRows.value.some(r => r.effectedComponentVersion === row.effectedComponentVersion)) {
|
||||
selectedRows.value.push(row);
|
||||
}
|
||||
} else {
|
||||
selectedRows.value = selectedRows.value.filter(r => r.effectedComponentVersion !== row.effectedComponentVersion);
|
||||
}
|
||||
};
|
||||
|
||||
// 全选状态变化
|
||||
const handleCheckAllChange = (checked, selection) => {
|
||||
if (checked) {
|
||||
selectedRows.value = [...selection];
|
||||
} else {
|
||||
selectedRows.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------- 3. 分页事件调整（重置选中状态） --------------------------
|
||||
/**
|
||||
* 分页切换事件（统一处理页码/页大小变化）
|
||||
*/
|
||||
const handlePageChange = async () => {
|
||||
// 分页切换时，清空上一页的选中状态（避免跨页残留）
|
||||
selectedRows.value = [];
|
||||
// 若需要保留跨页选中，可通过 tableRef 操作：tableRef.value.store.clearSelection()
|
||||
await getComponentsList();
|
||||
};
|
||||
|
||||
// -------------------------- 4. 原有业务逻辑（保持不变，仅适配选中数据） --------------------------
|
||||
/**
|
||||
* 单条发布预警
|
||||
*/
|
||||
const openWarningDetail = async (row) => {
|
||||
currentWarning.value = row;
|
||||
// Message.success(`已为【${row.softName}】发布预警`);
|
||||
const { data } = await getNoticeAdd({
|
||||
"softwareId": [row?.effectedSoftwareId],
|
||||
"username": globalStore.currentRoleKey,
|
||||
"vulId": row?.vulnId,
|
||||
}).catch((err) => {
|
||||
Message({
|
||||
type: 'error',
|
||||
message: '预警发送失败，请重试'
|
||||
});
|
||||
});
|
||||
if(data.ok) {
|
||||
Message({
|
||||
type: 'success',
|
||||
message: '预警发送成功'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量发布预警
|
||||
*/
|
||||
const batchPublishWarning = async () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
Message.warning('请先选择需要发布预警的数据');
|
||||
return;
|
||||
}
|
||||
const { data } = await getNoticeAdd({
|
||||
"softwareId": selectedRows.value.map(i=>i.effectedSoftwareId),
|
||||
"username": globalStore.currentRoleKey,
|
||||
"vulId": selectedRows.value[0]?.vulnId,
|
||||
}).catch((err) => {
|
||||
Message({
|
||||
type: 'error',
|
||||
message: '预警发送失败，请重试'
|
||||
});
|
||||
});
|
||||
if(data.ok) {
|
||||
Message({
|
||||
type: 'success',
|
||||
message: '预警发送成功'
|
||||
});
|
||||
// // 批量预警后，主动清空表格选中状态（联动UI）
|
||||
// if (tableRef.value) {
|
||||
// tableRef.value.store.clearSelection();
|
||||
// }
|
||||
// selectedRows.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取组件列表（模拟数据+真实接口）
|
||||
*/
|
||||
const getComponentsList = async () => {
|
||||
if (vulnRow.value.vulnId === 'CVE-2025-27507') {
|
||||
// 模拟数据（保持不变）
|
||||
componentsLists.value = [
|
||||
{
|
||||
id: '1',
|
||||
softName: '军工供应链管理系统 V2.0',
|
||||
effectedComponentName: 'Apache Commons Text',
|
||||
effectedComponentVersion: '1.9 - 1.11.0（含）',
|
||||
coder: 'Apache软件基金会',
|
||||
responsibleUnit: '信支工程大学'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
softName: '高校科研项目管理平台',
|
||||
effectedComponentName: 'Log4j',
|
||||
effectedComponentVersion: '2.0 - 2.14.1（含）',
|
||||
coder: 'Apache软件基金会',
|
||||
responsibleUnit: '华中科技大学'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
softName: '军工代码审计系统 V3.5',
|
||||
effectedComponentName: 'Jackson Databind',
|
||||
effectedComponentVersion: '2.9.0 - 2.15.2（含）',
|
||||
coder: 'FasterXML',
|
||||
responsibleUnit: '信支工程大学'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
softName: '高校教学管理系统 V5.0',
|
||||
effectedComponentName: 'Spring Framework',
|
||||
effectedComponentVersion: '5.3.0 - 5.3.23（含）',
|
||||
coder: 'Pivotal Software',
|
||||
responsibleUnit: '武汉大学'
|
||||
}
|
||||
];
|
||||
pager.value.total = componentsLists.value.length;
|
||||
} else {
|
||||
// 真实接口逻辑（保持不变）
|
||||
const response = await getVulnerabilitiesComponents({
|
||||
id: vulnId.value,
|
||||
current: pager.value.pageIndex,
|
||||
size: pager.value.pageSize
|
||||
});
|
||||
if (response.data.data.code === 200) {
|
||||
componentsLists.value = response.data.data.data.records?.map(item => ({
|
||||
...item,
|
||||
coder: item.coder || '未知',
|
||||
responsibleUnit: item.responsibleUnit || '未知单位'
|
||||
})) || [];
|
||||
pager.value.total = response.data.data.data.total || 0;
|
||||
} else {
|
||||
componentsLists.value = [];
|
||||
pager.value.total = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 打开/关闭模态框（重置选中状态）
|
||||
*/
|
||||
async function open(row) {
|
||||
if (row.id || row.vulnId) {
|
||||
vulnId.value = row.id;
|
||||
vulnRow.value = row;
|
||||
selectedRows.value = []; // 重置选中
|
||||
await getComponentsList();
|
||||
visible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
componentsLists.value = [];
|
||||
pager.value = { total: 0, pageIndex: 1, pageSize: 10 };
|
||||
vulnId.value = '';
|
||||
vulnRow.value = {};
|
||||
selectedRows.value = []; // 清空选中
|
||||
// if (tableRef.value) {
|
||||
// tableRef.value.store.clearSelection(); // 联动表格UI清空
|
||||
// }
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
// 其他原有方法（保持不变）
|
||||
function setComponentsList(list) { componentsLists.value = list; }
|
||||
function setDisabled(isDisabled) { disabled.value = isDisabled; }
|
||||
function handleConfirm() { close(); }
|
||||
function handleCancel() { close(); }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.software-modal {
|
||||
width: 1200px !important;
|
||||
}
|
||||
|
||||
:deep(.devui-btn) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.devui-table-cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 可选：调整复选框列样式（与表格对齐）
|
||||
:deep(.devui-table-checkable-column) {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="page-wrap">
|
||||
<!-- <h1 class="page-title">{{ title }}</h1> -->
|
||||
<div class="search-form">
|
||||
<!-- <d-search-->
|
||||
<!-- icon-position="left"-->
|
||||
<!-- @search="search"-->
|
||||
<!-- v-model="vulnId"-->
|
||||
<!-- style="width: 400px"-->
|
||||
<!-- placeholder="请输入漏洞编号"-->
|
||||
<!-- ></d-search>-->
|
||||
<d-form layout="horizontal" :label-align="'end'">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="6">
|
||||
<d-form-item field="vulnId" label="漏洞编号">
|
||||
<d-input placeholder="请输入漏洞编号" v-model="newFormData.vulnId" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-form-item field="severity" label="严重程度">
|
||||
<d-select
|
||||
:key="newFormData.severity"
|
||||
:options="tagArray"
|
||||
:allow-clear="true"
|
||||
v-model="newFormData.severity"
|
||||
placeholder="请选择严重程度"
|
||||
></d-select>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-form-item field="affectedComponentCount" label="受影响软件数">
|
||||
<d-input-number style="width: 100%;background: #ffffff" :min="0" :max="100" placeholder="请输入受影响软件数" :allowEmpty="true" v-model="newFormData.affectedComponentCount" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</d-form>
|
||||
<div class="jyh-form-operation">
|
||||
<d-button @click="getList(1)" class="mr-2" variant="solid">搜索</d-button>
|
||||
<d-button variant="solid" color="secondary" @click="clear">清空</d-button>
|
||||
</div>
|
||||
</div>
|
||||
<Card class="mt-3">
|
||||
<d-table :show-loading="loading" class="jyh-table" :data="dataLists" v-if="dataLists.length > 0" table-layout="auto">
|
||||
<d-column type="index" width="40"></d-column>
|
||||
<d-column field="vulnId" header="漏洞编号"></d-column>
|
||||
<d-column field="vulnType" header="漏洞类型"></d-column>
|
||||
<d-column field="publishDate" header="漏洞发布时间">
|
||||
<template #default="scope">
|
||||
{{ scope.row.publishDate
|
||||
? dayjs(scope.row.publishDate).add(5, 'month').format('YYYY-MM-DD HH:mm:ss')
|
||||
: '--'
|
||||
}}
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="severity" header="严重程度">
|
||||
<template #default="scope">
|
||||
<span class="card-val" v-if="tagMap[scope.row.severity]">
|
||||
<d-tag :color="tagMap[scope.row.severity].color" size="sm">{{ tagMap[scope.row.severity].text }}</d-tag>
|
||||
</span></template
|
||||
>
|
||||
</d-column>
|
||||
<d-column field="effectedComponentCount" header="受影响软件清单">
|
||||
<template #default="scope">
|
||||
<!--TODO:将受影响软件清单数量改为十个以下-->
|
||||
<a v-if="scope.row.vulnId==='CVE-2025-27507'" class="devui-link" @click="showModal(scope.row)">4个</a>
|
||||
<a v-else class="devui-link" @click="showModal(scope.row)">{{scope.row.effectedComponentCount? String(scope.row.effectedComponentCount)[0]:'0'}}个</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column header="操作" fixed-right="0px" width="130">
|
||||
<template #default="scope">
|
||||
<a class="devui-link" style="margin-right: 8px" @click="openVulnDetail(scope.row)">详情</a>
|
||||
<d-button @click="handleViewAIModal(scope.row)" variant="text" color="primary"> AI问答 </d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
<NoData v-else :small="false"></NoData>
|
||||
<div class="mt-20 mb-20 flex justify-end" v-if="dataLists.length > 0">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="getList()"
|
||||
@page-size-change="getList()"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 漏洞详情 -->
|
||||
<d-drawer v-model="vulnDetailVisable" style="width: auto">
|
||||
<VulnerabilityDetail :vulnId="currentVuln.id" @close="colseVulnDetail"></VulnerabilityDetail>
|
||||
</d-drawer>
|
||||
|
||||
<AIModal ref="AIModalRef" />
|
||||
<EffectedComponents ref="modalRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VulnerabilityDetail from './VulnerabilityDetail.vue';
|
||||
import EffectedComponents from './effectedComponents.vue';
|
||||
import { alertsPage } from '@/api/jyh/home';
|
||||
import dayjs from 'dayjs';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import AIModal from '../AIModal.vue';
|
||||
import { getVulnerabilitiespage } from '@/api/repo';
|
||||
const route = useRoute();
|
||||
const title = computed(() => route.meta?.reportTitle || '漏洞感知列表');
|
||||
const pager = ref({
|
||||
total: 10,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
const newFormData = ref({
|
||||
vulnId: '',
|
||||
affectedComponentCount: '',
|
||||
severity: '',
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const AIModalRef = ref(null);
|
||||
|
||||
|
||||
// 清空高级搜索
|
||||
const clear = () => {
|
||||
newFormData.value = {
|
||||
vulnId: '',
|
||||
affectedComponentCount: '',
|
||||
severity: '',
|
||||
};
|
||||
getList();
|
||||
};
|
||||
|
||||
const tagMap = {
|
||||
Critical: {
|
||||
text: '致命',
|
||||
color: '#c7000b'
|
||||
},
|
||||
High: {
|
||||
text: '高',
|
||||
color: '#f66f6a'
|
||||
},
|
||||
Medium: {
|
||||
text: '中',
|
||||
color: '#fac20a'
|
||||
},
|
||||
Low: {
|
||||
text: '低',
|
||||
color: '#5e7ce0'
|
||||
},
|
||||
critical: {
|
||||
text: '致命',
|
||||
color: '#c7000b'
|
||||
},
|
||||
high: {
|
||||
text: '高',
|
||||
color: '#f66f6a'
|
||||
},
|
||||
medium: {
|
||||
text: '中',
|
||||
color: '#fac20a'
|
||||
},
|
||||
low: {
|
||||
text: '低',
|
||||
color: '#5e7ce0'
|
||||
}
|
||||
};
|
||||
|
||||
const tagArray = [
|
||||
{ value: 'critical', name: '致命' },
|
||||
{ value: 'high', name: '高' },
|
||||
{ value: 'medium', name: '中' },
|
||||
{ value: 'low', name: '低' }
|
||||
]
|
||||
|
||||
const vulnDetailVisable = ref(false);
|
||||
const currentVuln = ref();
|
||||
const openVulnDetail = (row) => {
|
||||
vulnDetailVisable.value = true;
|
||||
currentVuln.value = row;
|
||||
};
|
||||
|
||||
|
||||
const modalRef = ref(null);
|
||||
|
||||
function showModal(row) {
|
||||
if (modalRef.value) {
|
||||
modalRef.value.setDisabled(false);
|
||||
modalRef.value.open(row);
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹框方法
|
||||
const handleViewAIModal = (resultId) => {
|
||||
AIModalRef.value.open(resultId); // 传递result_id参数
|
||||
};
|
||||
|
||||
const colseVulnDetail = () => {
|
||||
vulnDetailVisable.value = false;
|
||||
};
|
||||
const vulnId = ref('');
|
||||
const dataLists = ref([]);
|
||||
const getList = async (current) => {
|
||||
loading.value = true
|
||||
if(current) pager.value.pageIndex=current;
|
||||
const { data } = await getVulnerabilitiespage({
|
||||
vulnId: newFormData.value.vulnId,
|
||||
current: current || pager.value.pageIndex,
|
||||
affectedComponentCount: newFormData.value.affectedComponentCount,
|
||||
severity: newFormData.value.severity,
|
||||
size: pager.value.pageSize
|
||||
}).finally(()=>{
|
||||
loading.value = false
|
||||
});
|
||||
dataLists.value = data?.data?.data?.records || [
|
||||
{
|
||||
"id": 184783,
|
||||
"taskId": null,
|
||||
"softwareId": null,
|
||||
"componentId": null,
|
||||
"vulnId": "CVE-2024-31585",
|
||||
"cweId": "CWE-193",
|
||||
"severity": "medium",
|
||||
"vulnType": "CVE",
|
||||
"cvssScore": 5.3,
|
||||
"attackVector": null,
|
||||
"attackComplexity": null,
|
||||
"userInteraction": null,
|
||||
"privilegesRequired": null,
|
||||
"exploitabilityScore": null,
|
||||
"impactScore": null,
|
||||
"description": "FFmpeg version n5.1 to n6.1 was discovered to contain an Off-by-one Error vulnerability in libavfilter/avf_showspectrum.c. This vulnerability allows attackers to cause a Denial of Service (DoS) via a crafted input.",
|
||||
"extraInfo": "{\"refs\": [\"https://gist.github.com/1047524396/dc2c64ffe0c3934a6176bcd2c5cf5656\", \"https://github.com/FFmpeg/FFmpeg/commit/81df787b53eb5c6433731f6eaaf7f2a94d8a8c80\", \"https://github.com/ffmpeg/ffmpeg/commit/ab0fdaedd1e7224f7e84ea22fcbfaa4ca75a6c06\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/6G7EYH2JAK5OJPVNC6AXYQ5K7YGYNCDN/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/IPETICRXUOGRIM4U3BCRTIKE3IZWCSBT/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/LE3ASLH6QF2E5OVJI5VA3JSEPJFFFMNY/\"]}",
|
||||
"fixIssue": null,
|
||||
"patchLink": null,
|
||||
"source": "HUST",
|
||||
"publishDate": "2024-04-17T19:15:08.000+00:00",
|
||||
"fixVersion": null,
|
||||
"exploitability": null,
|
||||
"createTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"updateTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"componentName": null,
|
||||
"componentVersion": null,
|
||||
"effectedComponentCount": null,
|
||||
"effectedComponents": null
|
||||
},
|
||||
{
|
||||
"id": 184780,
|
||||
"taskId": null,
|
||||
"softwareId": null,
|
||||
"componentId": null,
|
||||
"vulnId": "CVE-2024-31578",
|
||||
"cweId": null,
|
||||
"severity": "high",
|
||||
"vulnType": "CVE",
|
||||
"cvssScore": 7.5,
|
||||
"attackVector": null,
|
||||
"attackComplexity": null,
|
||||
"userInteraction": null,
|
||||
"privilegesRequired": null,
|
||||
"exploitabilityScore": null,
|
||||
"impactScore": null,
|
||||
"description": "FFmpeg version n6.1.1 was discovered to contain a heap use-after-free via the av_hwframe_ctx_init function.",
|
||||
"extraInfo": "{\"refs\": [\"https://github.com/ffmpeg/ffmpeg/commit/3bb00c0a420c3ce83c6fafee30270d69622ccad7\", \"https://gist.github.com/1047524396/45400cce5859d78dcd3a62010df8d179\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/LE3ASLH6QF2E5OVJI5VA3JSEPJFFFMNY/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/IPETICRXUOGRIM4U3BCRTIKE3IZWCSBT/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/6G7EYH2JAK5OJPVNC6AXYQ5K7YGYNCDN/\"]}",
|
||||
"fixIssue": null,
|
||||
"patchLink": null,
|
||||
"source": "HUST",
|
||||
"publishDate": "2024-04-17T14:15:08.000+00:00",
|
||||
"fixVersion": null,
|
||||
"exploitability": null,
|
||||
"createTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"updateTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"componentName": null,
|
||||
"componentVersion": null,
|
||||
"effectedComponentCount": 1,
|
||||
"effectedComponents": null
|
||||
},
|
||||
{
|
||||
"id": 184781,
|
||||
"taskId": null,
|
||||
"softwareId": null,
|
||||
"componentId": null,
|
||||
"vulnId": "CVE-2024-31578",
|
||||
"cweId": null,
|
||||
"severity": "high",
|
||||
"vulnType": "CVE",
|
||||
"cvssScore": 7.5,
|
||||
"attackVector": null,
|
||||
"attackComplexity": null,
|
||||
"userInteraction": null,
|
||||
"privilegesRequired": null,
|
||||
"exploitabilityScore": null,
|
||||
"impactScore": null,
|
||||
"description": "FFmpeg version n6.1.1 was discovered to contain a heap use-after-free via the av_hwframe_ctx_init function.",
|
||||
"extraInfo": "{\"refs\": [\"https://github.com/ffmpeg/ffmpeg/commit/3bb00c0a420c3ce83c6fafee30270d69622ccad7\", \"https://gist.github.com/1047524396/45400cce5859d78dcd3a62010df8d179\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/LE3ASLH6QF2E5OVJI5VA3JSEPJFFFMNY/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/IPETICRXUOGRIM4U3BCRTIKE3IZWCSBT/\", \"https://lists.fedoraproject.org/archives/list/package-announce%40lists.fedoraproject.org/message/6G7EYH2JAK5OJPVNC6AXYQ5K7YGYNCDN/\"]}",
|
||||
"fixIssue": null,
|
||||
"patchLink": null,
|
||||
"source": "HUST",
|
||||
"publishDate": "2024-04-17T14:15:08.000+00:00",
|
||||
"fixVersion": null,
|
||||
"exploitability": null,
|
||||
"createTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"updateTime": "2025-10-14T21:00:03.000+00:00",
|
||||
"componentName": null,
|
||||
"componentVersion": null,
|
||||
"effectedComponentCount": null,
|
||||
"effectedComponents": null
|
||||
}
|
||||
];
|
||||
pager.value.total = data.data.data?.total;
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const search = () => {
|
||||
pager.value.pageIndex = 1;
|
||||
getList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
.page-wrap {
|
||||
margin: 16px;
|
||||
.page-title {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: medium;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
.g-content-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
margin-right: 20px;
|
||||
//background: #F2F5FC;
|
||||
|
||||
.left-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.output-btn {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jyh-form-operation {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
228
src/views/Jyh/KnowledgeHub/index.vue
Normal file
228
src/views/Jyh/KnowledgeHub/index.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="secret-container">
|
||||
<d-breadcrumb class="secret-breadcrumb">
|
||||
<gc-breadcrumb-item :to="{ name: 'home' }"
|
||||
><span class="title">首页</span></gc-breadcrumb-item>
|
||||
<gc-breadcrumb-item><span class="cur-title">安全知识库</span></gc-breadcrumb-item>
|
||||
</d-breadcrumb>
|
||||
<d-tabs class="jyh-tabs" type="wrapped" v-model="selectTab">
|
||||
<d-tab id="VulnerabilityList" title="多源漏洞库">
|
||||
<VulnerabilityList/>
|
||||
</d-tab>
|
||||
<d-tab id="OssQuery" title="可信组件库">
|
||||
<OssQuery/>
|
||||
</d-tab>
|
||||
<d-tab id="BatchVerify" title="威胁情报库">
|
||||
<IntelligenceList/>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
|
||||
import SettingText from '@/components/Setting/SettingText/index.vue';
|
||||
import { ref,reactive,watch } from 'vue';
|
||||
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { GModal } from '@/components/Setting/index';
|
||||
import { reqCatch } from '@/utils/catch';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import { Message } from 'vue-devui';
|
||||
import OssQuery from './Components/OssQuery.vue';
|
||||
import VulnerabilityList from './Components/VulnerabilityList/index.vue';
|
||||
import IntelligenceList from './Components/IntelligenceList/index.vue';
|
||||
import BatchVerify from './Components/BatchVerify.vue';
|
||||
import { useAccountStore } from '@/stores/user';
|
||||
const { namespace } = getOrgInfo();
|
||||
|
||||
const { isLogin } = useAccountStore();
|
||||
// 获取当前路由
|
||||
const route = useRoute();
|
||||
|
||||
const selectTab = ref(route.query.tab || 'VulnerabilityList');
|
||||
|
||||
// 监听 tab 值变化，更新 URL 参数
|
||||
watch(selectTab, (newTab) => {
|
||||
router.replace({
|
||||
name: route.name,
|
||||
params: route.params,
|
||||
query: { ...route.query, tab: newTab }
|
||||
});
|
||||
});
|
||||
|
||||
// 监听 URL 参数变化，更新 tab 值
|
||||
watch(
|
||||
() => route.query.tab,
|
||||
(newTab) => {
|
||||
if (newTab) {
|
||||
selectTab.value = newTab;
|
||||
}
|
||||
},
|
||||
{ immediate: true } // 初始化时执行一次
|
||||
);
|
||||
|
||||
|
||||
// 删除弹窗
|
||||
const item = ref('');
|
||||
const deleteModal = ref();
|
||||
const deletevModels = ref(false);
|
||||
const openDelete = (row: any) => {
|
||||
item.value = row;
|
||||
deleteModal.value.showFlag = true;
|
||||
deletevModels.value = true;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 分页
|
||||
const changeIndex = () => {
|
||||
// getGroupClaListData();
|
||||
};
|
||||
|
||||
const changeSize = () => {
|
||||
pager.value.pageIndex = 1;
|
||||
// getGroupClaListData();
|
||||
};
|
||||
|
||||
const repoFun = (arr: any) => {
|
||||
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const editRow = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'cla/edit/' + row.object_id,
|
||||
query: { cla: row.cla, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async (e: any) => {
|
||||
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
|
||||
// if (!res.error) {
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
// 去成员页
|
||||
const goMember = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去,注意路由有个:claID
|
||||
router.push({
|
||||
path: 'cla/claId/member',
|
||||
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
const getGroupClaListData = async () => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// page: pager.value.pageIndex,
|
||||
// per_page: pager.value.pageSize
|
||||
// };
|
||||
// const res = await reqCatch(getGroupClaList, params);
|
||||
// if (!res.error) {
|
||||
// tableData.value = res?.data?.data?.content;
|
||||
// pager.value.total = res.data.data.total;
|
||||
// }
|
||||
};
|
||||
getGroupClaListData();
|
||||
|
||||
const setClaStatus = async (row: any) => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// cla_id: row.object_id,
|
||||
// status: row.status
|
||||
// };
|
||||
// const res = await reqCatch(setGroupClaStatus, params);
|
||||
// if (!res.error) {
|
||||
// Message.success('操作成功!');
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
const signCla = (row: any) => {
|
||||
router.push('/cla/' + row.object_id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.secret-container {
|
||||
position: relative;
|
||||
|
||||
.secret-op {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $devui-contrast;
|
||||
}
|
||||
|
||||
:deep(.devui-table__row td) {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.devui-tag .devui-tag--default) {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #E3E3EE;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9a9b9c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cur-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2d2d2e;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
padding: 12px 20px 12px 0;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
background: #F2F5FC;
|
||||
|
||||
.output-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.secret-breadcrumb {
|
||||
padding: 7px 20px 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
357
src/views/Jyh/KnowledgeHub/license.vue
Normal file
357
src/views/Jyh/KnowledgeHub/license.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div class="secret-container pt-2 px-20">
|
||||
<d-breadcrumb>
|
||||
<gc-breadcrumb-item :to="{ name: 'home' }"
|
||||
><span class="title">首页</span></gc-breadcrumb-item>
|
||||
<gc-breadcrumb-item><span class="title">高级搜索</span></gc-breadcrumb-item>
|
||||
<gc-breadcrumb-item><span class="cur-title">License</span></gc-breadcrumb-item>
|
||||
</d-breadcrumb>
|
||||
<div class="search-form mt-2">
|
||||
<d-form
|
||||
class="jyh-form"
|
||||
ref="formRef"
|
||||
:data="formData"
|
||||
:pop-postion="['right']"
|
||||
:rules="formRules"
|
||||
>
|
||||
<d-row :gutter="25" type="flex" class="docs-devui-row mb-4">
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="搜索关键字" :show-feedback="false">
|
||||
<d-input
|
||||
style="width: 100%"
|
||||
v-model="formData.title"
|
||||
placeholder="关键字模糊搜索"
|
||||
maxLength="50"
|
||||
minLength="2"
|
||||
/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="License编码" :show-feedback="false">
|
||||
<d-input
|
||||
style="width: 100%"
|
||||
v-model="formData.title"
|
||||
placeholder="License编码模糊搜索"
|
||||
maxLength="50"
|
||||
minLength="2"
|
||||
/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="name" label="License名称" :show-feedback="false">
|
||||
<d-input
|
||||
style="width: 100%"
|
||||
v-model="formData.title"
|
||||
placeholder="License名称模糊搜索"
|
||||
maxLength="50"
|
||||
minLength="2"
|
||||
/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="类型" :show-feedback="false">
|
||||
<d-select v-model="formData.select" :options="typeOptions" :allow-clear="true" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="集成风险" :show-feedback="false">
|
||||
<d-select v-model="formData.select" :options="riskOptions" :allow-clear="true" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row :gutter="25" type="flex" class="docs-devui-row mb-5">
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="适用类型" :show-feedback="false">
|
||||
<d-select v-model="formData.select" :options="useTypeOptions" :allow-clear="true" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="是否可用" :show-feedback="false">
|
||||
<d-select v-model="formData.select" :options="isUseOptions" :allow-clear="true" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="name" label="键值" :show-feedback="false">
|
||||
<d-input
|
||||
style="width: 100%"
|
||||
v-model="formData.title"
|
||||
placeholder="请输入键值"
|
||||
maxLength="50"
|
||||
minLength="2"
|
||||
/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="创建时间" :show-feedback="false">
|
||||
<d-date-picker-pro v-model="formData.time1" :showTime="true"
|
||||
placeholder="请选择日期与时间"
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col style="flex: 1">
|
||||
<d-form-item field="title" label="更新时间" :show-feedback="false">
|
||||
<d-date-picker-pro v-model="formData.time1" :showTime="true"
|
||||
placeholder="请选择日期与时间"
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<gc-form-operation class="jyh-form-operation">
|
||||
<d-button class="mr-2" variant="solid">筛选</d-button>
|
||||
<d-button variant="solid" color="secondary">清空</d-button>
|
||||
</gc-form-operation>
|
||||
<d-button class="output-btn" icon="icon-share" variant="text">导出</d-button>
|
||||
</d-form>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<d-table class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
|
||||
<d-column type="index" width="40"></d-column>
|
||||
<d-column field="code" header="License编码">
|
||||
<a>05822156</a>
|
||||
</d-column>
|
||||
<d-column field="name" header="License名称"></d-column>
|
||||
<d-column field="type" header="类型"></d-column>
|
||||
<d-column field="risk" header="集成风险"></d-column>
|
||||
<d-column field="useType" header="适用类型"></d-column>
|
||||
<d-column field="status" header="状态">
|
||||
<d-status>未开始</d-status>
|
||||
</d-column>
|
||||
<d-column field="key" header="键值"></d-column>
|
||||
<d-column field="created" header="创建时间"></d-column>
|
||||
<d-column field="updated" header="更新时间"></d-column>
|
||||
<!-- <d-column header="操作" width="300">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <div class="flex">-->
|
||||
<!-- <div class="cursor-pointer flex items-center mr-[32px]" @click="editRow(scope.row)">-->
|
||||
<!-- <GIcon class="mr-[8px]" name="gt-plane-edit" />-->
|
||||
<!-- <span class="text-[#3B3E55] text-base font-normal">编辑</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="flex items-center mr-[32px]">-->
|
||||
<!-- <d-switch v-model="scope.row.status" class="mr-[8px]" @change="setClaStatus(scope.row)"-->
|
||||
<!-- :active-value="1" :inactive-value="0"> </d-switch>-->
|
||||
<!-- <span class="text-[#3B3E55] text-base font-normal">{{ scope.row.status === 0 ? '停用' : '启用' }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cursor-pointer flex items-center" @click="openDelete(scope.row)">-->
|
||||
<!-- <GIcon class="mr-[8px]" name="gt-plane-delete" />-->
|
||||
<!-- <span class="text-[#3B3E55] text-base font-normal">删除</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-column>-->
|
||||
</d-table>
|
||||
|
||||
<DataPanel v-else skeleton :card="false" :empty="true">
|
||||
</DataPanel>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 mb-20 flex justify-end">
|
||||
<d-pagination size="md" :page-size-options="[10, 20, 50]" :total="pager.total"
|
||||
v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="5"
|
||||
:can-change-page-size="true" :can-view-total="true" total-item-text="总计" @page-index-change="changeIndex()"
|
||||
@page-size-change="changeSize()" />
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<GModal v-model="deletevModels" ref="deleteModal" title="删除?" @confirm="confirmDelete" showWarnIcon
|
||||
confirmColor="danger">
|
||||
<span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all">你确认删除此项：{{ item.cla_name }}
|
||||
？</span>
|
||||
</GModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
|
||||
import SettingText from '@/components/Setting/SettingText/index.vue';
|
||||
import { ref,reactive } from 'vue';
|
||||
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { GModal } from '@/components/Setting/index';
|
||||
import { reqCatch } from '@/utils/catch';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import { Message } from 'vue-devui';
|
||||
const { namespace } = getOrgInfo();
|
||||
const text = `贡献者协议（CLA）允许外部开发者向组织的代码库提交变更请求时，系统会检查用户是否已签署CLA。如果已签署， "CLA-bot"会在变更请求评论区更新签署信息；如果未签署，"CLA-bot"会引导外部贡献者查看并签署贡献者协议。`;
|
||||
|
||||
const tableData = ref([
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
{code: '05822156', name:'联通智家通通中视频公司语音.',type:'客户指定预装软件（原预装软件）',risk:'中',useType:'软件',status:'未开始',key:'',created:'2025-03-10 17:25:19',updated:'2025-03-10 17:25:19'},
|
||||
]);
|
||||
const formData = ref({ title: '', md_content: '',select: '',time1:null });
|
||||
const typeOptions = reactive(['Options1', 'Options2', 'Options3']);
|
||||
const riskOptions = reactive(['低', '中', '高']);
|
||||
const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
|
||||
const isUseOptions = reactive(['是', '否']);
|
||||
|
||||
const pager = ref({
|
||||
total: 10,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 删除弹窗
|
||||
const item = ref('');
|
||||
const deleteModal = ref();
|
||||
const deletevModels = ref(false);
|
||||
const openDelete = (row: any) => {
|
||||
item.value = row;
|
||||
deleteModal.value.showFlag = true;
|
||||
deletevModels.value = true;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 分页
|
||||
const changeIndex = () => {
|
||||
// getGroupClaListData();
|
||||
};
|
||||
|
||||
const changeSize = () => {
|
||||
pager.value.pageIndex = 1;
|
||||
// getGroupClaListData();
|
||||
};
|
||||
|
||||
const repoFun = (arr: any) => {
|
||||
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const editRow = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去
|
||||
router.push({
|
||||
path: 'cla/edit/' + row.object_id,
|
||||
query: { cla: row.cla, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async (e: any) => {
|
||||
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
|
||||
// if (!res.error) {
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
// 去成员页
|
||||
const goMember = (row: any) => {
|
||||
// 后续请换成params，暂时params传参没传过去,注意路由有个:claID
|
||||
router.push({
|
||||
path: 'cla/claId/member',
|
||||
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
|
||||
});
|
||||
};
|
||||
const getGroupClaListData = async () => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// page: pager.value.pageIndex,
|
||||
// per_page: pager.value.pageSize
|
||||
// };
|
||||
// const res = await reqCatch(getGroupClaList, params);
|
||||
// if (!res.error) {
|
||||
// tableData.value = res?.data?.data?.content;
|
||||
// pager.value.total = res.data.data.total;
|
||||
// }
|
||||
};
|
||||
getGroupClaListData();
|
||||
|
||||
const setClaStatus = async (row: any) => {
|
||||
// const params = {
|
||||
// group_id: namespace.value,
|
||||
// cla_id: row.object_id,
|
||||
// status: row.status
|
||||
// };
|
||||
// const res = await reqCatch(setGroupClaStatus, params);
|
||||
// if (!res.error) {
|
||||
// Message.success('操作成功!');
|
||||
// getGroupClaListData();
|
||||
// }
|
||||
};
|
||||
|
||||
const signCla = (row: any) => {
|
||||
router.push('/cla/' + row.object_id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.secret-container {
|
||||
position: relative;
|
||||
|
||||
.secret-op {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $devui-contrast;
|
||||
}
|
||||
|
||||
:deep(.devui-table__row td) {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.devui-tag .devui-tag--default) {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #E3E3EE;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9a9b9c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cur-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2d2d2e;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
padding: 12px 20px 12px 0;
|
||||
border-radius: 8px 0px 8px 8px;
|
||||
background: #F2F5FC;
|
||||
|
||||
.output-btn {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 4px;
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
805
src/views/Jyh/LinePage/index.vue
Normal file
805
src/views/Jyh/LinePage/index.vue
Normal file
File diff suppressed because one or more lines are too long
318
src/views/Jyh/ModelChat/index.vue
Normal file
318
src/views/Jyh/ModelChat/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="model-chat-container">
|
||||
<div class="chat-header">
|
||||
<div class="left">
|
||||
<d-icon name="icon-arrow-left" class="back-icon" @click="goBack"></d-icon>
|
||||
<div class="model-info">
|
||||
<span class="title">{{ currentTitle }}</span>
|
||||
<span class="subtitle">智能辅助模型</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<d-button variant="text" icon="icon-delete" @click="clearHistory">清空</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-content" ref="scrollRef">
|
||||
<div v-if="messages.length === 0" class="empty-placeholder">
|
||||
<d-icon name="icon-robot" size="48px" color="#ccc"></d-icon>
|
||||
<p>我是 {{ currentTitle }} 助手，请告诉我您的需求。</p>
|
||||
</div>
|
||||
|
||||
<div v-for="(msg, index) in messages" :key="index" :class="['message-row', msg.role]">
|
||||
<div class="avatar">
|
||||
<d-icon :name="msg.role === 'user' ? 'icon-user' : 'icon-robot'" size="24px"></d-icon>
|
||||
</div>
|
||||
<div class="message-bubble">
|
||||
<div class="text">{{ msg.content }}</div>
|
||||
<div class="time" v-if="msg.time">{{ msg.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="message-row ai">
|
||||
<div class="avatar"><d-icon name="icon-robot" size="24px"></d-icon></div>
|
||||
<div class="message-bubble loading">
|
||||
<span>正在思考...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-footer">
|
||||
<div class="input-wrapper">
|
||||
<d-textarea
|
||||
v-model="inputText"
|
||||
placeholder="请输入您的问题..."
|
||||
:rows="2"
|
||||
class="chat-input"
|
||||
@keydown.enter.prevent="handleSend"
|
||||
></d-textarea>
|
||||
<d-button
|
||||
class="send-btn"
|
||||
variant="solid"
|
||||
:disabled="loading || !inputText.trim()"
|
||||
@click="handleSend"
|
||||
>
|
||||
<d-icon name="icon-publish" color="#fff"></d-icon>
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat'; // 假设你在这个路径有工具
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { formatTime } = useTimeFormat();
|
||||
|
||||
// 状态
|
||||
const currentTitle = ref('');
|
||||
const currentModelId = ref('');
|
||||
const inputText = ref('');
|
||||
const loading = ref(false);
|
||||
const scrollRef = ref(null);
|
||||
const messages = ref([]);
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 从路由参数获取当前选中的功能信息
|
||||
currentTitle.value = route.query.title || '智能对话';
|
||||
currentModelId.value = route.query.id || 'default';
|
||||
|
||||
// 模拟一条欢迎语
|
||||
messages.value.push({
|
||||
role: 'ai',
|
||||
content: `您好，欢迎使用 ${currentTitle.value} 功能，有什么可以帮您？`,
|
||||
time: getCurrentTime()
|
||||
});
|
||||
});
|
||||
|
||||
// 获取当前时间
|
||||
const getCurrentTime = () => {
|
||||
const now = new Date();
|
||||
return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 清空历史
|
||||
const clearHistory = () => {
|
||||
messages.value = [];
|
||||
};
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick();
|
||||
if (scrollRef.value) {
|
||||
scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const handleSend = async () => {
|
||||
const text = inputText.value.trim();
|
||||
if (!text || loading.value) return;
|
||||
|
||||
// 1. 添加用户消息
|
||||
messages.value.push({
|
||||
role: 'user',
|
||||
content: text,
|
||||
time: getCurrentTime()
|
||||
});
|
||||
inputText.value = '';
|
||||
scrollToBottom();
|
||||
|
||||
// 2. 模拟请求后端 API
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// TODO: 这里替换为你真实的 API 调用，传入 currentModelId.value
|
||||
// const res = await fetchModelChat({ model: currentModelId.value, prompt: text });
|
||||
|
||||
// 模拟延迟响应
|
||||
setTimeout(() => {
|
||||
messages.value.push({
|
||||
role: 'ai',
|
||||
content: `这是针对“${currentTitle.value}”功能的模拟回复：您发送了“${text}”。`,
|
||||
time: getCurrentTime()
|
||||
});
|
||||
loading.value = false;
|
||||
scrollToBottom();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
messages.value.push({
|
||||
role: 'ai',
|
||||
content: '服务暂时不可用，请稍后再试。',
|
||||
time: getCurrentTime()
|
||||
});
|
||||
loading.value = false;
|
||||
scrollToBottom();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model-chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* 或者 100% 视父容器而定 */
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.back-icon {
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
&:hover { background: #f0f0f0; border-radius: 4px; }
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title { font-weight: bold; font-size: 16px; color: #333; }
|
||||
.subtitle { font-size: 12px; color: #999; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.empty-placeholder {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
max-width: 80%;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
.time {
|
||||
font-size: 10px;
|
||||
color: rgba(0,0,0,0.4);
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* AI 样式 */
|
||||
&.ai {
|
||||
align-self: flex-start;
|
||||
.avatar { background: #e6f7ff; color: #1890ff; }
|
||||
.message-bubble {
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
color: #333;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户样式 */
|
||||
&.user {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
.avatar { background: #fff0f6; color: #eb2f96; }
|
||||
.message-bubble {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
border-top-right-radius: 0;
|
||||
.time { color: rgba(255,255,255,0.7); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
background: #fff;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 4px;
|
||||
/* 去除 DevUI textarea 默认样式 */
|
||||
::v-deep .devui-textarea {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/views/Jyh/News/ModBanner.vue
Normal file
48
src/views/Jyh/News/ModBanner.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xyCenter"><p class="zh Jdh">安全事件中心</p>
|
||||
<p class="en Jdh">Security Events Center</p></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-news .mod-banner {
|
||||
background: url(@/assets/v3/banner.C3KTEfES.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
height: 400px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-news .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 50%
|
||||
}
|
||||
|
||||
.pg-news .mod-banner .txt .zh {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px
|
||||
}
|
||||
|
||||
.pg-news .mod-banner .txt .en {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 9px;
|
||||
line-height: 20px
|
||||
}
|
||||
.xyCenter {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
336
src/views/Jyh/News/ModNews.vue
Normal file
336
src/views/Jyh/News/ModNews.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="pg-news">
|
||||
<div class="mod-news Jdh">
|
||||
<div
|
||||
class="news-item"
|
||||
v-for="(item, index) in newsList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="item.thumb"
|
||||
:alt="item.title"
|
||||
class="thumb"
|
||||
>
|
||||
<div class="thumb-r">
|
||||
<h3 class="MultiLine EASE">
|
||||
<a
|
||||
:href="item.link"
|
||||
rel="nofollow"
|
||||
class="EASE"
|
||||
target="_blank"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="desc MultiLine">{{ item.desc }}</div>
|
||||
<div class="meta">
|
||||
<i class="ICO"></i>
|
||||
<span class="time">发布时间：{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-pagination
|
||||
v-model:current-page="currentPage"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:show-page-sizes="false"
|
||||
:show-jumper="false"
|
||||
:show-total="false"
|
||||
class="comPaging"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #prev-text><</template>
|
||||
<template #next-text>></template>
|
||||
<template #total="{ total, pageCount }">
|
||||
<span class="total">共 {{ pageCount }} 页</span>
|
||||
</template>
|
||||
</d-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import newsPic from '@/assets/v3/newspic1.png';
|
||||
|
||||
const newsList = ref([
|
||||
{
|
||||
thumb: newsPic, // 使用引入的图片变量
|
||||
title: 'Log4j2 漏洞变种再现！开源组件供应链安全风险升级',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '2025年12月，安全研究人员发现Log4j2漏洞新型变种CVE-2025-XXXX，该变种绕过了传统防护规则，影响超过10万个开源项目。开源安全联盟已发布紧急修复指南，建议企业立即对开源组件进行全量扫描。',
|
||||
time: '2025/12/03'
|
||||
},
|
||||
{
|
||||
thumb: newsPic, // 所有项都用这个变量
|
||||
title: 'OSV漏洞数据库新增10万+开源组件漏洞数据，覆盖9大主流语言',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '近日，开源漏洞数据库OSV完成年度最大规模数据更新，新增10万+条开源组件漏洞记录，覆盖Java、Python、Go、C++等9大主流开发语言。本次更新首次纳入鸿蒙生态开源组件漏洞数据，进一步完善国产化开源安全体系。',
|
||||
time: '2025/12/03'
|
||||
},
|
||||
// 剩余8项的 thumb 全部替换为 newsPic
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '开源供应链安全平台上线！一键检测项目依赖漏洞与恶意包',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '在2025开源安全峰会上，国内首款开源供应链安全检测平台正式发布。该平台可自动化扫描项目依赖树，识别恶意开源包、漏洞组件及许可证合规风险，目前已接入Maven、NPM、PyPI等12大主流开源仓库。',
|
||||
time: '2025/11/25'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: 'PyPI仓库再现恶意包攻击！伪装成热门AI库窃取开发者数据',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '2025年11月，安全团队监测到PyPI开源仓库中出现一批仿冒热门AI框架的恶意包，累计下载量超5万次。该恶意包会在安装时窃取开发者本地配置文件及代码仓库密钥，开源安全应急响应中心已紧急下架相关包并发布预警。',
|
||||
time: '2025/11/19'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '开源安全奖励计划升级！最高悬赏50万元征集核心组件漏洞',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '2025年11月，开源安全奖励计划（OSRP）完成规则升级，将漏洞悬赏范围扩展至国产化开源组件，最高单笔悬赏金额提升至50万元。本次升级重点覆盖政务、金融领域常用开源中间件，鼓励白帽黑客参与开源生态安全建设。',
|
||||
time: '2025/11/14'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '进博会首发：开源安全治理AI平台，实现漏洞秒级检测',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '11月5日至10日，第八届进博会期间，开源安全领域首款AI治理平台正式发布。该平台基于大模型技术，可实时分析开源代码仓库变动，秒级识别漏洞、后门及合规风险，已在多家央企完成试点落地。',
|
||||
time: '2025/11/10'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '开源安全白皮书2025发布：90%企业存在开源组件合规风险',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '2025年11月，《中国开源安全发展白皮书》正式发布。报告显示，国内90%以上企业在使用开源组件时存在许可证合规风险，其中35%的企业曾因开源漏洞导致业务中断。白皮书同时提出了开源安全治理的“三全”标准：全生命周期、全场景、全链路。',
|
||||
time: '2025/11/03'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '开源安全企业入选专精特新“小巨人”，AI检测技术成核心优势',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '近日，北京市第七批专精特新“小巨人”企业名单公示，某开源安全企业凭借AI驱动的开源组件漏洞检测技术成功入选。该企业自研的开源安全扫描引擎，误报率低于0.5%，检测速度较行业平均水平提升3倍。',
|
||||
time: '2025/10/27'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '国资国企开源安全联盟成立，共建国产化开源安全体系',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '10月15日，国资国企开源安全联盟在北京正式成立，联盟成员涵盖30余家央企及开源安全企业。联盟将重点推进国产化开源组件的漏洞治理、合规审计及供应链安全建设，首批落地10个开源安全共性技术攻关项目。',
|
||||
time: '2025/10/21'
|
||||
},
|
||||
{
|
||||
thumb: newsPic,
|
||||
title: '“创客中国”开源安全赛道收官，AI渗透检测项目获一等奖',
|
||||
link: 'https://mp.weixin.qq.com/s/xxxxxx',
|
||||
desc: '近日，第十届“创客中国”创新创业大赛开源安全赛道决赛落幕，基于大模型的开源组件AI渗透检测项目斩获一等奖。该项目可自动化模拟黑客攻击，发现开源组件隐藏漏洞，目前已申请发明专利12项。',
|
||||
time: '2025/10/16'
|
||||
}
|
||||
]);
|
||||
|
||||
const currentPage = ref(1); // 当前页
|
||||
const pageSize = ref(10); // 每页条数（原有每页10条）
|
||||
const total = ref(70); // 总条数（7页×10条）
|
||||
|
||||
// 分页切换事件
|
||||
const handlePageChange = (page) => {
|
||||
console.log('切换到第', page, '页');
|
||||
// 此处可对接接口获取对应页数据
|
||||
// 示例：fetchNewsList(page);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-news {
|
||||
.mod-news {
|
||||
background-color: #fafafa;
|
||||
margin: 0 auto;
|
||||
max-width: 1259px;
|
||||
padding: 40px 0 0;
|
||||
|
||||
.news-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 35px 0;
|
||||
text-align: justify;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
&:hover h3 a {
|
||||
color: #4bad52;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
display: block;
|
||||
height: 191px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 340px;
|
||||
-ms-flex-negative: 0;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thumb-r {
|
||||
padding: 0 0 0 57px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
margin: 0 0 10px;
|
||||
max-height: 60px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #b0afaf;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: justify;
|
||||
|
||||
.ICO {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAAXNSR0IArs4c6QAAAddJREFUeNqtljtLw1AUxy/0C9jxnmh0EcGlLrp0EXEV6SKCzSg4+NhEcVInt+Kio+0qCk6CYIJDEVwUxEpx6CbioNAIohH/YohtHicvzDlDk9vbX+8597yECBE1L8uyKg1qkkkmNaUhq7Ks5kUakSXSySIwapEuS4kgVKQ6i3BrnYrRlJxSiYU4qlRELoQy0ENnSTG2ng308JhGKsyvNoKoXMrTdE7lMzC5bxhfeW4K/9DuDSa48Mhg6IZfip+NYhdbvjUnRElPCpnBKb4ALPq/0e2cCkkGjw5hAw/4k4lA4qh5IbU4yDgO8IaufEIN7JGaUGrhCBXzqHcAFt7tzzsuCGpCGjykgB08us7xhkvn6ZDZLQ1BzeDyFI7xCbc8Yx/fzvMm98dNQaZ3aQm38EsLK/jovM1yIFNQ27s0gWsf5gbTeHG9FzhQmzGtD9uOW39FxxhaHiOJN413dtFx7SEGceU53wULkoaQ1ZCsxjoq6MWJz9A9HlSNCUgt4PhlHlSOTZE5PHlAk2xvsdtUXNIOu8yz0M/t0ROXkQW82qB73rBSisI2gnMAR1GFLXmpXcVadKnNrPhn2I6ya5DZtewMh4gsx5osBy3X6KcpNffop9SkFj76/QC1at54IoZE9wAAAABJRU5ErkJggg==);
|
||||
display: block;
|
||||
height: 18px;
|
||||
margin: 0 10px 0 0;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DevUI分页组件样式覆盖（保持原有样式）
|
||||
.comPaging {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 36px 0 79px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
text-align: justify;
|
||||
|
||||
// 覆盖DevUI默认样式
|
||||
:deep(.devui-pagination) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.devui-pagination-item {
|
||||
margin: 0 3px;
|
||||
transition: all .4s ease-out;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
min-width: 32px;
|
||||
padding: 0 12px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&.devui-pagination-item-active {
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #4bad52;
|
||||
}
|
||||
|
||||
&.devui-pagination-prev,
|
||||
&.devui-pagination-next {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #cecece;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.devui-pagination-ellipsis {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.total {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式样式保留
|
||||
@media (max-width: 1023px) {
|
||||
.pg-news .comPaging {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
padding: 20px 0 40px;
|
||||
|
||||
&>* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.devui-pagination-item) {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
min-width: 28px;
|
||||
padding: 0 8px;
|
||||
|
||||
&.devui-pagination-prev,
|
||||
&.devui-pagination-next {
|
||||
font-size: 14px;
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.total) {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
src/views/Jyh/News/index.vue
Normal file
16
src/views/Jyh/News/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="pg-news">
|
||||
<ModBanner />
|
||||
<ModNews />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import ModBanner from './ModBanner.vue'
|
||||
import ModNews from './ModNews.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
1359
src/views/Jyh/OurTeam/index.vue
Normal file
1359
src/views/Jyh/OurTeam/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
530
src/views/Jyh/Payment/CheckoutPage.vue
Normal file
530
src/views/Jyh/Payment/CheckoutPage.vue
Normal file
@@ -0,0 +1,530 @@
|
||||
<template>
|
||||
<div class="checkout-page">
|
||||
|
||||
<div class="summary-panel">
|
||||
<div class="summary-content">
|
||||
<div class="back-button-placeholder">
|
||||
<button class="back-btn" @click="goBack">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 class="panel-title">试用 金银湖大模型 Pro</h1>
|
||||
<div class="trial-info">
|
||||
<span class="trial-days">7 天免费</span>
|
||||
<p class="trial-note">随后 US$20.00/月 (从 2025年12月17日开始)</p>
|
||||
</div>
|
||||
|
||||
<div class="plan-card">
|
||||
<div class="card-details">
|
||||
<div class="card-header">
|
||||
<span class="card-title">金银湖大模型 Pro</span>
|
||||
<span class="card-tag">7 天免费</span>
|
||||
</div>
|
||||
<div class="card-features">
|
||||
金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
|
||||
</div>
|
||||
<div class="card-price">US$20.00 / 月度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-row">
|
||||
<span class="toggle-label">采用年费计划</span>
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" id="annual" v-model="isAnnual">
|
||||
<label for="annual"></label>
|
||||
</div>
|
||||
<span class="toggle-discount">节省 US$4.00</span>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<div class="price-detail">
|
||||
<div class="detail-row">
|
||||
<span>小计</span>
|
||||
<span>US$20.00</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>税 <i class="icon-info"></i></span>
|
||||
<span>US$0.00</span>
|
||||
</div>
|
||||
<div class="detail-row total-row">
|
||||
<span>试用后总额</span>
|
||||
<span>US$20.00</span>
|
||||
</div>
|
||||
<div class="detail-row today-total">
|
||||
<span>今日合计</span>
|
||||
<span>US$0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-panel">
|
||||
<h2 class="form-title">输入付款详情</h2>
|
||||
|
||||
<div class="form-group email-group">
|
||||
<label>邮箱</label>
|
||||
<d-input
|
||||
size="lg"
|
||||
placeholder="fukang10032@gmail.com"
|
||||
v-model="formData.email"
|
||||
class="email-input-custom"
|
||||
></d-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group payment-group">
|
||||
<label>支付方式</label>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="card" v-model="formData.paymentMethod">
|
||||
<img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
|
||||
<span class="radio-label">银行卡</span>
|
||||
</d-radio>
|
||||
<!-- <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
|
||||
<!-- [Card Element Input Placeholder]-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
|
||||
<img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
|
||||
<span class="radio-label">微信支付</span>
|
||||
</d-radio>
|
||||
</div>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
|
||||
<img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
|
||||
<span class="radio-label">支付宝</span>
|
||||
</d-radio>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="save-info-text">
|
||||
保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
|
||||
</div>
|
||||
|
||||
<d-button class="start-trial-btn" @click="startTrial">开始试用</d-button>
|
||||
|
||||
<p class="terms-text">
|
||||
订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
|
||||
</p>
|
||||
<div class="powered-by">
|
||||
Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {useRouter} from "vue-router";
|
||||
const router = useRouter();
|
||||
const formData = ref({
|
||||
email: 'fukang10032@gmail.com',
|
||||
paymentMethod: 'card', // 默认选中银行卡
|
||||
});
|
||||
|
||||
const isAnnual = ref(false); // 控制年费月费切换
|
||||
|
||||
const startTrial = () => {
|
||||
alert('开始试用按钮被点击！');
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkout-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
flex: 1.1;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
/* ------------------- 左侧摘要样式 ------------------- */
|
||||
/* 优化点 3: 返回按钮样式 */
|
||||
.back-button-placeholder {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.panel-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.trial-info {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.trial-days {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.trial-note {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 计划卡片 */
|
||||
.plan-card {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
flex-grow: 1;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-features {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
background-color: transparent;
|
||||
color: #4CAF50;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
/* 年月切换 */
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
background-color: #111;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toggle-discount {
|
||||
font-size: 12px;
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 简化开关样式 (Toggle Switch) */
|
||||
.toggle-switch {
|
||||
margin: 0 15px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.toggle-switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.toggle-switch label {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #444;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
display: block;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.toggle-switch label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.toggle-switch input:checked + label {
|
||||
background-color: #58a6ff;
|
||||
}
|
||||
.toggle-switch input:checked + label:after {
|
||||
left: calc(100% - 18px);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
border-top: 1px solid #333;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* 价格明细 */
|
||||
.price-detail {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.detail-row span:last-child {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-row.total-row {
|
||||
border-top: 1px solid #333;
|
||||
padding-top: 20px;
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-row.today-total {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.detail-row.today-total span:last-child {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------- 右侧表单样式 ------------------- */
|
||||
.form-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
|
||||
.email-input-custom :deep(.devui-input-wrapper) {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.email-input-custom :deep(.devui-input-wrapper.focus) {
|
||||
border-color: #58a6ff;
|
||||
box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
|
||||
}
|
||||
|
||||
.email-input-custom :deep(.devui-input) {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 支付方式 */
|
||||
.payment-group {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.payment-group label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 支付选项容器 */
|
||||
.payment-option {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 10px 15px;
|
||||
/* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
|
||||
}
|
||||
.payment-option:hover {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
/* DevUI Radio 样式定制 */
|
||||
.payment-option :deep(.devui-radio-list) {
|
||||
display: block;
|
||||
}
|
||||
.payment-option :deep(.devui-radio) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.payment-option :deep(.devui-radio-input) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
.payment-option :deep(.devui-radio-input.checked) {
|
||||
background-color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.payment-option :deep(.devui-radio-label) {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* 银行卡图标组 */
|
||||
.card-icons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 银行卡具体颜色 */
|
||||
.visa-icon { background-color: #1a1f71; content: "V"; }
|
||||
.master-icon { background-color: #ff5f00; content: "M"; }
|
||||
.amex-icon { background-color: #007bc1; content: "A"; }
|
||||
|
||||
.card-input-placeholder {
|
||||
height: 44px;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部文本和按钮 */
|
||||
.save-info-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.start-trial-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: #000 !important;
|
||||
color: #fff !important;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.terms-text {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
max-width: 400px;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
.powered-by {
|
||||
font-size: 10px;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stripe-link {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep(.devui-radio__label) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
img {
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
margin-inline-end:8px;
|
||||
border-radius: 2px;
|
||||
max-width: 24px;
|
||||
}
|
||||
.wechart-icon {
|
||||
width: 16px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
530
src/views/Jyh/Payment/CheckoutPayPage.vue
Normal file
530
src/views/Jyh/Payment/CheckoutPayPage.vue
Normal file
@@ -0,0 +1,530 @@
|
||||
<template>
|
||||
<div class="checkout-page">
|
||||
|
||||
<div class="summary-panel">
|
||||
<div class="summary-content">
|
||||
<div class="back-button-placeholder">
|
||||
<button class="back-btn" @click="goBack">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 class="panel-title">订阅 金银湖大模型 Pro</h1>
|
||||
<div class="trial-info">
|
||||
<span class="trial-days">US$60.00</span>
|
||||
<p class="trial-note">每个月</p>
|
||||
</div>
|
||||
|
||||
<div class="plan-card">
|
||||
<div class="card-details">
|
||||
<div class="card-header">
|
||||
<span class="card-title">金银湖大模型 Pro</span>
|
||||
<span class="card-tag">7 天免费</span>
|
||||
</div>
|
||||
<div class="card-features">
|
||||
金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
|
||||
</div>
|
||||
<div class="card-price">US$20.00 / 月度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-row">
|
||||
<span class="toggle-label">采用年费计划</span>
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" id="annual" v-model="isAnnual">
|
||||
<label for="annual"></label>
|
||||
</div>
|
||||
<span class="toggle-discount">节省 US$4.00</span>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<div class="price-detail">
|
||||
<div class="detail-row">
|
||||
<span>小计</span>
|
||||
<span>US$20.00</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>税 <i class="icon-info"></i></span>
|
||||
<span>US$0.00</span>
|
||||
</div>
|
||||
<div class="detail-row total-row">
|
||||
<span>试用后总额</span>
|
||||
<span>US$20.00</span>
|
||||
</div>
|
||||
<div class="detail-row today-total">
|
||||
<span>今日合计</span>
|
||||
<span>US$0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-panel">
|
||||
<h2 class="form-title">输入付款详情</h2>
|
||||
|
||||
<div class="form-group email-group">
|
||||
<label>邮箱</label>
|
||||
<d-input
|
||||
size="lg"
|
||||
placeholder="fukang10032@gmail.com"
|
||||
v-model="formData.email"
|
||||
class="email-input-custom"
|
||||
></d-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group payment-group">
|
||||
<label>支付方式</label>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="card" v-model="formData.paymentMethod">
|
||||
<img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
|
||||
<span class="radio-label">银行卡</span>
|
||||
</d-radio>
|
||||
<!-- <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
|
||||
<!-- [Card Element Input Placeholder]-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
|
||||
<img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
|
||||
<span class="radio-label">微信支付</span>
|
||||
</d-radio>
|
||||
</div>
|
||||
|
||||
<div class="payment-option">
|
||||
<d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
|
||||
<img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
|
||||
<span class="radio-label">支付宝</span>
|
||||
</d-radio>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="save-info-text">
|
||||
保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
|
||||
</div>
|
||||
|
||||
<d-button class="start-trial-btn" @click="startTrial">订阅</d-button>
|
||||
|
||||
<p class="terms-text">
|
||||
订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
|
||||
</p>
|
||||
<div class="powered-by">
|
||||
Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {useRouter} from "vue-router";
|
||||
const router = useRouter();
|
||||
const formData = ref({
|
||||
email: 'fukang10032@gmail.com',
|
||||
paymentMethod: 'card', // 默认选中银行卡
|
||||
});
|
||||
|
||||
const isAnnual = ref(false); // 控制年费月费切换
|
||||
|
||||
const startTrial = () => {
|
||||
alert('订阅按钮被点击！');
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkout-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
flex: 1.1;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
/* ------------------- 左侧摘要样式 ------------------- */
|
||||
/* 优化点 3: 返回按钮样式 */
|
||||
.back-button-placeholder {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.panel-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.trial-info {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.trial-days {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.trial-note {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 计划卡片 */
|
||||
.plan-card {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
flex-grow: 1;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-features {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
background-color: transparent;
|
||||
color: #4CAF50;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
/* 年月切换 */
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
background-color: #111;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toggle-discount {
|
||||
font-size: 12px;
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 简化开关样式 (Toggle Switch) */
|
||||
.toggle-switch {
|
||||
margin: 0 15px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.toggle-switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.toggle-switch label {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #444;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
display: block;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.toggle-switch label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.toggle-switch input:checked + label {
|
||||
background-color: #58a6ff;
|
||||
}
|
||||
.toggle-switch input:checked + label:after {
|
||||
left: calc(100% - 18px);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
border-top: 1px solid #333;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* 价格明细 */
|
||||
.price-detail {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.detail-row span:last-child {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-row.total-row {
|
||||
border-top: 1px solid #333;
|
||||
padding-top: 20px;
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-row.today-total {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.detail-row.today-total span:last-child {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------- 右侧表单样式 ------------------- */
|
||||
.form-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
|
||||
.email-input-custom :deep(.devui-input-wrapper) {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.email-input-custom :deep(.devui-input-wrapper.focus) {
|
||||
border-color: #58a6ff;
|
||||
box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
|
||||
}
|
||||
|
||||
.email-input-custom :deep(.devui-input) {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 支付方式 */
|
||||
.payment-group {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.payment-group label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 支付选项容器 */
|
||||
.payment-option {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 10px 15px;
|
||||
/* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
|
||||
}
|
||||
.payment-option:hover {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
/* DevUI Radio 样式定制 */
|
||||
.payment-option :deep(.devui-radio-list) {
|
||||
display: block;
|
||||
}
|
||||
.payment-option :deep(.devui-radio) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.payment-option :deep(.devui-radio-input) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
.payment-option :deep(.devui-radio-input.checked) {
|
||||
background-color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.payment-option :deep(.devui-radio-label) {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* 银行卡图标组 */
|
||||
.card-icons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 银行卡具体颜色 */
|
||||
.visa-icon { background-color: #1a1f71; content: "V"; }
|
||||
.master-icon { background-color: #ff5f00; content: "M"; }
|
||||
.amex-icon { background-color: #007bc1; content: "A"; }
|
||||
|
||||
.card-input-placeholder {
|
||||
height: 44px;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部文本和按钮 */
|
||||
.save-info-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.start-trial-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: #000 !important;
|
||||
color: #fff !important;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.terms-text {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
max-width: 400px;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
.powered-by {
|
||||
font-size: 10px;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stripe-link {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep(.devui-radio__label) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
img {
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
margin-inline-end:8px;
|
||||
border-radius: 2px;
|
||||
max-width: 24px;
|
||||
}
|
||||
.wechart-icon {
|
||||
width: 16px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
src/views/Jyh/Pricing/component/PricingComparisonTable.vue
Normal file
340
src/views/Jyh/Pricing/component/PricingComparisonTable.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="comparison-table-container">
|
||||
<h2 class="main-title">比较不同套餐的功能</h2>
|
||||
|
||||
<div class="table-scroll-wrapper">
|
||||
<table class="features-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="feature-col-header"></th> <th v-for="plan in plans" :key="plan.name" class="plan-col-header">
|
||||
<div class="header-content">
|
||||
<span class="plan-name">{{ plan.name }}</span>
|
||||
<a href="#" class="get-plan-btn">
|
||||
{{ plan.btnText }}
|
||||
<span class="arrow">↗</span>
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<template v-for="(section, sIndex) in comparisonData" :key="sIndex">
|
||||
<tr
|
||||
class="category-row"
|
||||
v-if="section.category"
|
||||
>
|
||||
<td colspan="6" class="category-title">{{ section.category }}</td>
|
||||
</tr>
|
||||
|
||||
<tr v-for="(row, rIndex) in section.featureRows" :key="rIndex" class="data-row">
|
||||
<td class="feature-name">{{ row.name }}</td>
|
||||
<td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
|
||||
<span v-if="value === 'check'" class="check-icon">✓</span>
|
||||
<span v-else-if="value === 'dash'" class="dash-icon">—</span>
|
||||
<span v-else class="value-text">{{ value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr class="category-row">
|
||||
<td colspan="6" class="category-title">安全与行政管理</td>
|
||||
</tr>
|
||||
<tr v-for="(row, rIndex) in adminFeatures" :key="rIndex" class="data-row">
|
||||
<td class="feature-name">{{ row.name }}</td>
|
||||
<td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
|
||||
<span v-if="value === 'check'" class="check-icon">✓</span>
|
||||
<span v-else-if="value === 'dash'" class="dash-icon">—</span>
|
||||
<span v-else class="value-text">{{ value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="category-row">
|
||||
<td colspan="6" class="category-title">隐私</td>
|
||||
</tr>
|
||||
<tr v-for="(row, rIndex) in privacyFeatures" :key="rIndex" class="data-row">
|
||||
<td class="feature-name">{{ row.name }}</td>
|
||||
<td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
|
||||
<span v-if="value === 'check'" class="check-icon">✓</span>
|
||||
<span v-else-if="value === 'dash'" class="dash-icon">—</span>
|
||||
<span v-else class="value-text">{{ value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 定义数据接口
|
||||
interface PlanHeader {
|
||||
name: string;
|
||||
btnText: string;
|
||||
}
|
||||
|
||||
interface FeatureRow {
|
||||
name: string;
|
||||
values: string[];
|
||||
}
|
||||
|
||||
interface FeatureSection {
|
||||
category: string;
|
||||
featureRows: FeatureRow[];
|
||||
}
|
||||
|
||||
// 表头数据 (从截图 1 中提取)
|
||||
const plans = ref<PlanHeader[]>([
|
||||
{ name: '免费版', btnText: '获取免费版' },
|
||||
{ name: 'Plus 版', btnText: '获取 Plus' },
|
||||
{ name: 'Pro 版', btnText: '获取 Pro 版本' },
|
||||
{ name: 'Business 版', btnText: '获取 Business 版' },
|
||||
{ name: 'Enterprise 版', btnText: '联系销售人员' },
|
||||
]);
|
||||
|
||||
// 隐私分类数据 (来自新截图 4.png)
|
||||
const privacyFeatures = ref<FeatureRow[]>([
|
||||
{
|
||||
name: '内容用于训练模型',
|
||||
values: ['可选退出', '可选退出', '可选退出', '可选退出', '否，提供定制数据保留选项']
|
||||
},
|
||||
]);
|
||||
|
||||
// 安全与行政管理分类数据 (来自新截图 4.png)
|
||||
const adminFeatures = ref<FeatureRow[]>([
|
||||
{ name: 'SAML SSO', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '统一搜索', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '专属工作空间', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '金银湖大模型 分析与管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '管理员控制台', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '批量成员管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '管理员角色', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: 'Soc 2 Type 2 合规认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '已获 ISO 27001, 27017, 27018 和 27701 认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '域验证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: 'SCIM', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '企业密钥管理', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '基于角色的访问控制', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '分析控制面板', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '合规 API', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: 'IP 白名单', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '数据驻留地：美国、欧盟、英国、日本、新加坡、韩国、南非、印度、澳大利亚、巴西、阿联酋', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '品牌化工作空间', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '全局管理员控制台', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
{ name: '连接注册服务', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
|
||||
]);
|
||||
|
||||
// 整合其他所有分类 (核心功能、模型、功能)
|
||||
const comparisonData = ref<FeatureSection[]>([
|
||||
{
|
||||
category: '核心功能',
|
||||
featureRows: [
|
||||
{ name: '消息和互动', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
|
||||
{ name: '聊天历史记录', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
|
||||
{ name: '在网页、iOS 和 Android 设备上访问', values: ['check', 'check', 'check', 'check', 'check'] }
|
||||
]
|
||||
},
|
||||
{
|
||||
category: '模型',
|
||||
featureRows: [
|
||||
{ name: '金银湖大模型-5', values: ['check', '扩展', '无限制*', '无限制*', '无限制*'] },
|
||||
{ name: '金银湖大模型-5 Thinking', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
|
||||
{ name: '金银湖大模型-5 pro', values: ['dash', 'dash', 'check', '灵活**', '灵活**'] },
|
||||
{ name: '金银湖大模型-5 Thinking mini', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
|
||||
{ name: '金银湖大模型-4o', values: ['dash', '标准', '无限制*', '无限制*', '无限制*'] },
|
||||
{ name: '金银湖大模型-4.1', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
|
||||
{ name: '金银湖大模型-4.5', values: ['dash', 'dash', 'check', 'dash', '灵活**'] },
|
||||
{ name: 'OpenAI o3', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
|
||||
{ name: 'OpenAI o3 pro', values: ['dash', 'dash', '无限制*', 'dash', '灵活**'] },
|
||||
{ name: 'OpenAI o4-mini', values: ['dash', '无限制*', '无限制*', '灵活**', '灵活**'] },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: '', // 模型下方的无标题部分
|
||||
featureRows: [
|
||||
{ name: '联网访问', values: ['带限制可用性限', '快速', '快速', '快速', '最快'] },
|
||||
{ name: '上下文窗口处理', values: ['16K', '32K', '128K', '32K', '128K'] },
|
||||
{ name: '上下文窗口处理', values: ['196K', '196K', '196K', '196K', '196K'] },
|
||||
{ name: '跨越模型的视觉、跨模态和速度', values: ['check', 'check', 'check', 'check', 'check'] }
|
||||
]
|
||||
},
|
||||
{
|
||||
category: '功能',
|
||||
featureRows: [
|
||||
{ name: '高级语音对话', values: ['带限制', 'check', '无限制*', '标准', '灵活**'] },
|
||||
{ name: '高级视觉对话', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '标准语音对话', values: ['check', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '应用', values: ['check', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '记忆', values: ['带限制', '扩展', '扩展', '扩展', '扩展'] },
|
||||
{ name: '历史聊天记录', values: ['带限制', '随时删除', '随时删除', '随时删除', '随时删除'] },
|
||||
{ name: '搜索', values: ['check', 'check', 'check', 'check', 'check'] },
|
||||
{ name: 'Canvas', values: ['check', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '在 macOS 上进行代码编辑', values: ['check', 'check', 'check', 'check', 'check'] },
|
||||
{ name: 'Chat金银湖大模型 副驾驶', values: ['dash', '带限制', 'check', 'check', 'check'] },
|
||||
{ name: '项目', values: ['dash', 'dash', 'check', 'check', 'check'] },
|
||||
{ name: '共享链路', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '任务', values: ['dash', 'dash', 'check', 'check', 'check'] },
|
||||
{ name: '数据分析', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '视觉', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '连接内部资源的浏览器', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '公司知识库', values: ['dash', 'dash', 'dash', 'check', 'check'] },
|
||||
{ name: '自定义 GCF（由选定的开发者人员提供）', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: 'Chat金银湖大模型 考试模式', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '文件上传', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '发现并使用 金银湖大模型', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '创建和共享 金银湖大模型', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '与你的工作空间共享 金银湖大模型', values: ['dash', 'dash', 'check', 'check', 'check'] },
|
||||
{ name: '测试新功能的机会', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '图像生成', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
{ name: '交互式表格和图表', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||||
]
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ------------------------------------------- */
|
||||
/* 样式保持一致性 */
|
||||
/* ------------------------------------------- */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
.comparison-table-container {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 40px 20px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 主标题 */
|
||||
.main-title {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 60px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* 表格滚动容器 */
|
||||
.table-scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.features-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 1000px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* --- 表头样式 --- */
|
||||
.plan-col-header {
|
||||
padding-bottom: 40px;
|
||||
vertical-align: bottom;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 黑色圆角按钮 */
|
||||
.get-plan-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #BD2025;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 4px;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* --- 类别标题行 (核心功能/模型/功能/隐私/安全) --- */
|
||||
.category-row td {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* --- 数据行样式 --- */
|
||||
.data-row td {
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #e5e5e5; /* 细灰线 */
|
||||
font-size: 0.875rem;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
text-align: left;
|
||||
min-width: 280px;
|
||||
padding-right: 20px;
|
||||
vertical-align: top;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.feature-value {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* 特殊符号和文本样式 */
|
||||
.check-icon, .dash-icon {
|
||||
font-size: 1rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 0.875rem;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 移除表格最底部的线 */
|
||||
.features-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.feature-name, .category-title {
|
||||
min-width: 200px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
src/views/Jyh/Pricing/component/PricingFAQ.vue
Normal file
151
src/views/Jyh/Pricing/component/PricingFAQ.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="faq-container">
|
||||
<div class="footnotes">
|
||||
<p class="footnote-item">*使用方式必须符合我们的政策</p>
|
||||
<p class="footnote-item">**Enterprise 和 Business 可以购买积分以获得更多使用权限</p>
|
||||
</div>
|
||||
|
||||
<h2 class="main-title">常见问题解答</h2>
|
||||
|
||||
<div class="faq-list">
|
||||
<div v-for="(item, index) in faqItems" :key="index" class="faq-item">
|
||||
<button class="question-header" @click="toggleAnswer(index)">
|
||||
<span class="question-text">{{ item.question }}</span>
|
||||
<span class="toggle-icon">{{ activeIndex === index ? '—' : '+' }}</span>
|
||||
</button>
|
||||
|
||||
<div v-show="activeIndex === index" class="answer-content">
|
||||
<p>{{ item.answer }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 用于控制当前展开项的索引
|
||||
const activeIndex = ref<number | null>(null);
|
||||
|
||||
// FAQ 数据
|
||||
const faqItems = ref([
|
||||
{
|
||||
question: 'Chat金银湖大模型 如何定价?',
|
||||
answer: '每个人均可使用 Chat金银湖大模型 的免费版。付费套餐（Plus、Business 和 Enterprise 版本）按每个用户每月计算。Plus 和 Business 版本提供月度套餐，Business 和 Enterprise 版本提供年度套餐。',
|
||||
},
|
||||
{
|
||||
question: 'Chat金银湖大模型 是否免费使用?',
|
||||
answer: '是的，Chat金银湖大模型 免费版是永久免费的，但具有使用限制。付费套餐提供更多功能和更快的访问速度。'
|
||||
},
|
||||
{
|
||||
question: 'OpenAI 是否为教育机构提供 Chat金银湖大模型 套餐?',
|
||||
answer: '请联系我们的销售团队或访问教育相关页面了解针对教育机构的专属折扣和套餐信息。'
|
||||
},
|
||||
{
|
||||
question: 'OpenAI 是否为非盈利组织提供折扣?',
|
||||
answer: '是的，我们为符合条件的非盈利组织提供特别折扣。请访问我们的非盈利组织页面了解更多详情和申请流程。'
|
||||
},
|
||||
{
|
||||
question: '每个订阅套餐支持多少用户?',
|
||||
answer: '免费版和 Plus 版是针对个人用户的。Business 和 Enterprise 版本则支持多用户管理，具体数量请参考套餐详情或联系销售。'
|
||||
},
|
||||
{
|
||||
question: '有哪些付款方式?',
|
||||
answer: '我们接受主流的信用卡付款。年度套餐和企业级套餐可能支持更多支付方式，请在结账页面查看详细信息。'
|
||||
},
|
||||
{
|
||||
question: 'Chat金银湖大模型 的安全性如何?',
|
||||
answer: 'Chat金银湖大模型 采取了严格的安全措施来保护用户数据和隐私。Business 和 Enterprise 版本提供了更高级别的安全和行政管理功能。'
|
||||
},
|
||||
{
|
||||
question: 'Chat金银湖大模型 如何使用我的数据?',
|
||||
answer: '在免费版和 Plus 版中，您有权选择是否允许内容用于训练模型。Business 和 Enterprise 版本默认不会将您的数据用于模型训练。'
|
||||
},
|
||||
]);
|
||||
|
||||
// 切换手风琴项的函数
|
||||
const toggleAnswer = (index: number) => {
|
||||
activeIndex.value = activeIndex.value === index ? null : index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 字体保持一致性 */
|
||||
.faq-container {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 80px auto 100px; /* 增加上下边距 */
|
||||
padding: 0 20px;
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
/* 顶部脚注样式 */
|
||||
.footnotes {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footnote-item {
|
||||
font-size: 0.75rem; /* 字体非常小 */
|
||||
color: #6e6e80;
|
||||
}
|
||||
|
||||
/* 主标题 */
|
||||
.main-title {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* FAQ 列表容器 */
|
||||
.faq-list {
|
||||
border-top: 1px solid #e5e5e5; /* 顶部细线 */
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-bottom: 1px solid #e5e5e5; /* 底部细线 */
|
||||
}
|
||||
|
||||
/* 问题头部样式 */
|
||||
.question-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
/* 展开/收起图标 */
|
||||
.toggle-icon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
width: 20px; /* 固定宽度，防止跳动 */
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 答案内容样式 */
|
||||
.answer-content {
|
||||
padding: 0 40px 20px 0; /* 左侧留空，底部填充 */
|
||||
font-size: 0.95rem;
|
||||
color: #353541;
|
||||
line-height: 1.6;
|
||||
max-height: 500px; /* 确保内容在可见范围内 */
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
421
src/views/Jyh/Pricing/index.vue
Normal file
421
src/views/Jyh/Pricing/index.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div class="pricing">
|
||||
<div class="pricing-container">
|
||||
|
||||
|
||||
<div class="title-group text-center mb-16">
|
||||
<div class="flex justify-center items-center mb-6">
|
||||
<div class="title-arrow-left"></div>
|
||||
<h2 class="text-[36px] md:text-[42px] font-bold text-[#1a1a1a] px-6 tracking-tight">
|
||||
定价
|
||||
</h2>
|
||||
<div class="title-arrow-right"></div>
|
||||
</div>
|
||||
|
||||
<p class="text-[#888] text-[16px] leading-relaxed max-w-4xl mx-auto font-light">
|
||||
查看我们的个人、Business 和 Enterprise 套餐定价。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<div
|
||||
v-for="(plan, index) in plans"
|
||||
:key="index"
|
||||
class="plan-card"
|
||||
>
|
||||
<div class="card-header">
|
||||
<h2 class="plan-name">{{ plan.name }}</h2>
|
||||
<p class="plan-desc">{{ plan.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="plan-price-wrapper">
|
||||
<div class="price-line" v-if="plan.price !== null">
|
||||
<span class="currency">US${{ plan.price }}</span>
|
||||
<span class="unit" v-if="plan.unit">{{ plan.unit }}</span>
|
||||
</div>
|
||||
<div class="price-line" v-else>
|
||||
<span class="contact-text"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="action-btn">
|
||||
{{ plan.buttonText }}
|
||||
<span class="arrow-icon">↗</span>
|
||||
</button>
|
||||
|
||||
<div class="features-list">
|
||||
<p v-if="plan.featuresTitle" class="features-title">{{ plan.featuresTitle }}</p>
|
||||
|
||||
<ul>
|
||||
<li v-for="(feature, fIndex) in plan.features" :key="fIndex" class="feature-item">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span v-html="feature"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-footer" v-if="plan.footerLink">
|
||||
<a href="#">{{ plan.footerLink }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PricingComparisonTable />
|
||||
|
||||
|
||||
<PricingFAQ />
|
||||
|
||||
<div class="page-footer-link">
|
||||
<p>Have an existing plan? See <a href="#">billing help</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PricingComparisonTable from './component/PricingComparisonTable.vue';
|
||||
import PricingFAQ from './component/PricingFAQ.vue';
|
||||
|
||||
// 定义数据结构
|
||||
interface Plan {
|
||||
name: string;
|
||||
description: string;
|
||||
price: number | null; // null 用于企业版
|
||||
unit?: string;
|
||||
buttonText: string;
|
||||
featuresTitle?: string;
|
||||
features: string[];
|
||||
footerLink?: string;
|
||||
}
|
||||
|
||||
// 模拟数据：根据截图内容填充
|
||||
const plans = ref<Plan[]>([
|
||||
{
|
||||
name: '免费版',
|
||||
description: '日常任务的智能辅助方案',
|
||||
price: 0,
|
||||
unit: '/月',
|
||||
buttonText: '获取免费版本',
|
||||
features: [
|
||||
'有限使用高级模型',
|
||||
'判断和上传的数据有限',
|
||||
'回答生成速度：标准速度',
|
||||
'有限的记忆深入研究',
|
||||
'记忆与上下文支持受限'
|
||||
],
|
||||
footerLink: '已有账号？登录以继续'
|
||||
},
|
||||
{
|
||||
name: 'Plus',
|
||||
description: '更多先进智能模型权限',
|
||||
price: 20,
|
||||
unit: '/月',
|
||||
buttonText: '获取 Plus 版本',
|
||||
featuresTitle: '免费版中的全部内容，以及：',
|
||||
features: [
|
||||
'使用 金银湖大模型-4, 金银湖大模型-4o, 金银湖大模型-4o mini',
|
||||
'判断和上传的数据更高',
|
||||
'图片生成（DALL·E 3）',
|
||||
'更深入的记忆与高级数据分析功能',
|
||||
'记忆与上下文支持增强',
|
||||
'联网、语音和自定义 金银湖大模型',
|
||||
'抢先体验新功能'
|
||||
],
|
||||
footerLink: '查看适用范围'
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
description: '全面运用 Chat金银湖大模型 的最佳功能',
|
||||
price: 200,
|
||||
unit: '/月',
|
||||
buttonText: '获取 Pro 版本',
|
||||
featuresTitle: 'Plus 中的全部功能，以及：',
|
||||
features: [
|
||||
'使用 金银湖大模型-4o Pro 进行专业推理',
|
||||
'判断和上传数据无上限',
|
||||
'无限制的高级图片生成',
|
||||
'深度思考和复杂任务的最大支持',
|
||||
'最大记忆与上下文支持',
|
||||
'扩展限制、任务和自定义 金银湖大模型',
|
||||
'o1 (原 o1-preview) 的高级推理能力',
|
||||
'扩展的代码解释器',
|
||||
'更深层的研究浏览'
|
||||
],
|
||||
footerLink: '无限制、突发情况下的算力等，了解更多'
|
||||
},
|
||||
{
|
||||
name: 'Business Free',
|
||||
description: 'A secure way to try Chat金银湖大模型 at work',
|
||||
price: 0,
|
||||
unit: '/month',
|
||||
buttonText: 'Get Business Free',
|
||||
features: [
|
||||
'Limited access to our best model for work',
|
||||
'Privacy built in; data never used for training',
|
||||
'Limited video and image creation',
|
||||
'Tools for teams like projects, custom 金银湖大模型s',
|
||||
'Unlimited collaborator invites',
|
||||
'Integration with select business apps'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Business 版',
|
||||
description: '一个安全、协作的工作空间，专为初创企业和成长中的企业而设计',
|
||||
price: 25,
|
||||
unit: '/每位用户/每月 (按年计费)',
|
||||
buttonText: '购买订阅',
|
||||
featuresTitle: '包含 Plus 版套餐中的所有功能，并含：',
|
||||
features: [
|
||||
'无限制使用 金银湖大模型-4o 模型功能，并扩大使用 金银湖大模型-4 Turbo，以及对 金银湖大模型-4... 的访问',
|
||||
'企业级环境，提供更长久的历史记录与 Slack, Google Drive... 等工具集成',
|
||||
'安全的企业工作空间，拥有基本的管理控制、SAML SSO 和 MFA',
|
||||
'数据不会用于训练模型',
|
||||
'分享聊天、记录模式、Canvas、共享快捷指令和自定义工作区 金银湖大模型 等业务功能'
|
||||
],
|
||||
footerLink: '无限制、团队协作功能等，了解更多'
|
||||
},
|
||||
{
|
||||
name: '企业',
|
||||
description: '企业级 AI，安全与全面支持',
|
||||
price: null, // 代表联系销售
|
||||
buttonText: '联系销售人员',
|
||||
featuresTitle: 'Business 中的全部功能，以及：',
|
||||
features: [
|
||||
'扩展的上下文窗口，支持更长的输入和更大的文件',
|
||||
'企业级安全控制，包括 SCIM、EIKM、用户分级、域验证和更精细的权限控制',
|
||||
'高级数据分析：支持自定义数据保留策略、日志与保留审计功能...',
|
||||
'在多个地区支持数据驻留',
|
||||
'7x24 小时的优先支持、服务等级协议 (SLA)...',
|
||||
'按量计费，专属折扣'
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 引入通用字体，模仿 OpenAI 风格 */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
.pricing {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.pricing-container {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
color: #0d0d0d;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem; /* 48px */
|
||||
font-weight: 600; /* Semi-bold */
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: #6e6e80; /* 次级文本颜色 */
|
||||
}
|
||||
|
||||
/* 网格布局 */
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr); /* 3列 */
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 响应式：小于1024px变2列，小于768px变1列 */
|
||||
@media (max-width: 1024px) {
|
||||
.pricing-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.plan-card {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
transition: border-color 0.2s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.plan-card:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
min-height: 80px; /* 保持对齐 */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #6e6e80;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 价格区域 */
|
||||
.plan-price-wrapper {
|
||||
margin-bottom: 24px;
|
||||
min-height: 42px; /* 保持对齐 */
|
||||
}
|
||||
|
||||
.price-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 0.875rem;
|
||||
color: #6e6e80;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
background-color: #BD2025;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 16px;
|
||||
border-radius: 999px; /* 胶囊圆角 */
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #BD2025;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: 6px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 功能列表 */
|
||||
.features-list {
|
||||
flex-grow: 1; /* 让内容撑开，使 footer 对齐底部 */
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.features-list ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 0.875rem;
|
||||
color: #0d0d0d;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
color: #0d0d0d;
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* 底部链接 */
|
||||
.card-footer {
|
||||
margin-top: 24px;
|
||||
font-size: 0.75rem;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid transparent; /* 占位，如果需要分隔线可改为 #e5e5e5 */
|
||||
}
|
||||
|
||||
.card-footer a, .page-footer-link a {
|
||||
color: #BD2025;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.page-footer-link {
|
||||
text-align: left;
|
||||
margin-top: 40px;
|
||||
font-size: 0.875rem;
|
||||
color: #6e6e80;
|
||||
}
|
||||
|
||||
/* 标题装饰三角形：严格对齐图片比例 */
|
||||
.title-arrow-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 14px solid #C8161D;
|
||||
}
|
||||
.title-arrow-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-right: 14px solid #C8161D;
|
||||
}
|
||||
|
||||
/* 字体优化 */
|
||||
h2, h3 {
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
</style>
|
||||
103
src/views/Jyh/ProductServices/ModBanner.vue
Normal file
103
src/views/Jyh/ProductServices/ModBanner.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="banner-container">
|
||||
<div class="txt-content wow fadeInUp">
|
||||
<h1 class="zh-title">全栈式开源安全检测<br/>与治理工具链</h1>
|
||||
<p class="en-desc">
|
||||
构建国家级开源安全数据底座，聚合全球漏洞情报。基于安全数据湖仓，<br/>
|
||||
实现全景风险实时感知。
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="action-btn">
|
||||
了解研究方向
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mod-banner {
|
||||
/* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
|
||||
background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 520px; /* 增加高度以匹配大屏视觉 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中内容 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 增加一个深色遮罩，确保文字更清晰（可选） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zh-title {
|
||||
font-size: 48px; /* 增大字号 */
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.en-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
background-color: #C8161D;
|
||||
color: #ffffff;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #A01218;
|
||||
box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.mod-banner { height: 400px; }
|
||||
.zh-title { font-size: 32px; }
|
||||
.en-desc { font-size: 14px; }
|
||||
.banner-container { padding: 0 20px; }
|
||||
}
|
||||
</style>
|
||||
215
src/views/Jyh/ProductServices/ModContent.vue
Normal file
215
src/views/Jyh/ProductServices/ModContent.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="product-section">
|
||||
<div class="container">
|
||||
<div class="product-grid">
|
||||
<div
|
||||
v-for="(item, index) in products"
|
||||
:key="index"
|
||||
class="product-card-wrapper"
|
||||
>
|
||||
<div class="badge-number">{{ index + 1 }}</div>
|
||||
|
||||
<d-card class="custom-product-card">
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<h3 class="product-title">{{ item.title }}</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li v-for="(feature, fIdx) in item.features" :key="fIdx">
|
||||
<div class="feature-icon-wrapper">
|
||||
<span v-if="feature.emoji" class="feature-emoji">{{ feature.emoji }}</span>
|
||||
<div v-else class="icon-check-circle"></div>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<strong>{{ feature.label }}：</strong>
|
||||
<span>{{ feature.desc }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<div class="card-footer">
|
||||
<d-button
|
||||
variant="solid"
|
||||
color="danger"
|
||||
class="more-btn"
|
||||
@click="goToDetail(index + 1)"
|
||||
>
|
||||
了解详情 >
|
||||
</d-button>
|
||||
</div>
|
||||
</template>
|
||||
</d-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 编程式导航函数
|
||||
const goToDetail = (id) => {
|
||||
router.push(`/ProductServices/${id}`);
|
||||
};
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
title: '可信开源态势感知平台 (源感)',
|
||||
features: [
|
||||
{ emoji: '🕹️', label: '数据标签', desc: '基于机器学习与知识图谱技术，智能化为全量开源项目提供精准分类与多维度评分。' },
|
||||
{ emoji: '🛡️', label: '风险感知', desc: '基于3D地球与热力图技术，实时可视化展示全球开源漏洞、投毒攻击的爆发点及受影响行业分布。' },
|
||||
{ emoji: '📊', label: '数据定制', desc: '提供情报订阅中心、深度分析报告、API数据对接等服务，满足企业个性化威胁情报需求。' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '金银湖安全大模型 (源鉴)',
|
||||
features: [
|
||||
{ emoji: '🔍', label: '漏洞检测', desc: '基于AST与CPG图构建，结合静态分析、动态增量分析、AI语义理解，检测准确率提升85%以上。' },
|
||||
{ emoji: '🩹', label: '漏洞修复', desc: '基于多智能体协同修复技术，自动生成修复方案并完成验证测试，修复准确率提升75%以上。' },
|
||||
{ emoji: '💬', label: '安全知识问答', desc: '基于漏洞知识图谱与RAG检索增强技术，提供高质量、可解释的漏洞分析，问答准确率达92%以上。' },
|
||||
{ emoji: '🛠️', label: '安全工具调用', desc: '基于Function Calling技术，智能调用第三方安全工具，实现漏洞扫描、代码审计等自动化任务编排。' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '软件供应链检测平台 (源链)',
|
||||
features: [
|
||||
{ emoji: '⚙️', label: '平台管理与数据服务', desc: '提供用户友好的Web界面和API，确保数据准确性与时效性。' },
|
||||
{ emoji: '📦', label: '包管理器成分分析', desc: '针对常见包管理器（如npm、PyPI、Maven）的依赖分析引擎，自动识别组件及其版本。' },
|
||||
{ emoji: '💻', label: 'C/C++/项目成分分析', desc: '专门处理C/C++项目的成分分析，识别第三方库和潜在风险。' },
|
||||
{ emoji: '📑', label: '二进制文件成分分析', desc: '针对二进制文件的分析引擎，通过反编译和特征匹配识别成分和漏洞。' },
|
||||
{ emoji: '🛡️', label: '供应测链安全检测', desc: '精准漏洞检测、恶意代码防护、合规性保障。' },
|
||||
{ emoji: '⚖️', label: '合规性检测', desc: '分析软件组件的许可证信息，检查兼容性和合规性，避免法律冲突。' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '智能终端安全监测平台 (源端)',
|
||||
features: [
|
||||
{ emoji: '🔍', label: '极速扫描服务', desc: '百万级样本秒级初筛能力，支持海量应用快速筛查，检测准确率高达99%。' },
|
||||
{ emoji: '🔬', label: '深度分析服务', desc: '精准定位恶意逻辑核心，可视化展示攻击路径，分析准确率达88%以上。' },
|
||||
{ emoji: '🛡️', label: '持续免疫服务', desc: '自适应进化检测模型，秒级响应恶意变种，支持跨平台识别演进。' },
|
||||
{ emoji: '🌐', label: '威胁情报服务', desc: 'Zero-day预警能力，已挖掘498个普通及31个高隐蔽性Zero-day恶意软件。' }
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-section {
|
||||
background-color: #f8faff;
|
||||
padding: 80px 0;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-wrapper {
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
&:hover { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.badge-number {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 44px; height: 44px;
|
||||
background-color: #c8161d;
|
||||
color: white;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; font-weight: bold;
|
||||
border-bottom-right-radius: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.custom-product-card {
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
border: none !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
|
||||
border-radius: 8px !important;
|
||||
overflow: visible !important;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin: 15px 0 25px 25px;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0; margin: 0;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon-wrapper {
|
||||
margin-right: 12px;
|
||||
margin-top: 2px;
|
||||
min-width: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-emoji {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
strong { color: #444; }
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
background-color: #c8161d !important;
|
||||
border-color: #c8161d !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 20px !important;
|
||||
height: 36px !important;
|
||||
font-weight: bold !important;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #a01218 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
494
src/views/Jyh/ProductServices/ModTabs.vue
Normal file
494
src/views/Jyh/ProductServices/ModTabs.vue
Normal file
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<div class="mod-tabs">
|
||||
<ul class="tab-hd wow animated" style="visibility: visible;">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{ on: activeTab === index }"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-con con1 wow animated" v-show="activeTab === 0" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">SBOM 自动化分析</h4>
|
||||
<div class="l-desc">生成标准 CycloneDX/SPDX 物料清单，透视组件资产。 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>资产透明化</h6>
|
||||
<p>自动解析项目依赖，构建完整软件物料清单 (SBOM)，涵盖开源、第三方组件的名称、版本和许可证信息。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>格式标准化</h6>
|
||||
<p>支持生成 CycloneDX 和 SPDX 等国际公认标准格式的 SBOM，确保数据在不同安全工具和平台间的高效流通。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>供应链追溯</h6>
|
||||
<p>为软件组件提供唯一标识，便于在发生安全事件时快速定位受影响的组件和版本，大幅缩短应急响应时间。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con2 wow animated" v-show="activeTab === 1" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">供应链漏洞检测分析</h4>
|
||||
<div class="l-desc">深度解析依赖树，精准定位 CVE 漏洞与传播路径。 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">检测机制</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>依赖关系解析</h6>
|
||||
<p>构建项目的完整依赖关系图，深入到间接依赖层级，确保不遗漏任何潜在的漏洞组件。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>漏洞匹配与告警</h6>
|
||||
<p>集成全球主流漏洞数据库（如 NVD），将组件版本与已知 CVE 漏洞进行精确匹配，并进行实时告警。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">修复指导</h5>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>路径可视化</h6>
|
||||
<p>提供漏洞传播路径的可视化，帮助开发人员理解漏洞来源，并给出最小成本的修复（如版本升级或打补丁）建议。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con3 wow animated" v-show="activeTab === 2" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">恶意代码投毒检测</h4>
|
||||
<div class="l-desc">识别依赖混淆、组件篡改及后门植入攻击。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">关键防御点</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>依赖混淆识别</h6>
|
||||
<p>检测是否存在私有包与公共仓库包重名的情况，防御攻击者利用依赖混淆发起的投毒攻击。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>组件篡改监测</h6>
|
||||
<p>通过校验组件的哈希值或数字签名，确保下载和部署的组件未被中间人或仓库恶意篡改。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">主动拦截</h5>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>行为特征分析</h6>
|
||||
<p>对新增/变更组件进行深度行为分析，识别高风险的敏感操作（如网络连接、文件读写等），主动拦截后门植入。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con4 wow animated" v-show="activeTab === 3" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">未知漏洞检测分析</h4>
|
||||
<div class="l-desc">基于代码指纹与污点分析，发现 0-Day 及未披露风险。 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">技术手段</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>深度污点分析</h6>
|
||||
<p>追踪不可信数据（污点）从源头到汇点在代码中的流向，精准发现可能导致注入攻击和敏感信息泄露的路径。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>语义代码指纹</h6>
|
||||
<p>提取代码的结构和语义特征作为指纹，用于识别代码库中与已知高危漏洞相似的脆弱代码模式，发现变种和未公开漏洞。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">风险收益</h5>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>超前防御能力</h6>
|
||||
<p>在漏洞被公开披露前发现并修复，为企业提供了针对 0-Day 攻击的宝贵预警和防御时间，保障业务连续性。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con5 wow animated" v-show="activeTab === 4" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">许可证合规性检测</h4>
|
||||
<div class="l-desc">识别 GPL/MPL 等传染性协议，规避法律合规风险。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">风险识别</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>传染性协议警报</h6>
|
||||
<p>识别如 GPLv3 等强制要求用户公开源代码的“传染性”许可证，帮助企业避免不必要的知识产权风险。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>兼容性评估</h6>
|
||||
<p>评估项目所有组件的许可证组合是否相互兼容，确保整体合规性。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">治理支持</h5>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>定制化策略</h6>
|
||||
<p>支持根据公司内部政策，设置白名单和黑名单，实现许可证使用的自动化审批和管理，保障法律合规。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defaultTab: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const tabs = ref([
|
||||
{ title: 'SBOM 自动化分析' },
|
||||
{ title: '供应链漏洞检测分析' },
|
||||
{ title: '恶意代码投毒检测' },
|
||||
{ title: '未知漏洞检测分析' },
|
||||
{ title: '许可证合规性检测' },
|
||||
]);
|
||||
|
||||
const activeTab = ref(props.defaultTab);
|
||||
|
||||
const setActiveTab = (index) => {
|
||||
activeTab.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.defaultTab,
|
||||
(newVal) => {
|
||||
activeTab.value = newVal;
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值生效
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate .mod-tabs {
|
||||
margin: 0 auto;
|
||||
max-width: 1360px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 40px 0 20px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
-webkit-transition: all .4s ease-out;
|
||||
transition: all .4s ease-out
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li:after {
|
||||
background: #4bad52;
|
||||
bottom: -5px;
|
||||
content: "";
|
||||
display: none;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on,.pg-evaluate .mod-tabs .tab-hd li:hover {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on:after {
|
||||
display: block
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd.EN li {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50,50,50,.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 60px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l {
|
||||
position: relative;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 584px;
|
||||
width: 440px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt {
|
||||
color: #fff;
|
||||
left: 57px;
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 169px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-tit {
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-desc {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: 26px 0 0;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 50px 0 0 83px;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .item-list {
|
||||
padding-right: 78px;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-tit {
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item {
|
||||
margin: 0 0 40px;
|
||||
padding: 0 0 0 60px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item .ICO {
|
||||
background-size: 100% auto;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-con h6 {
|
||||
color: #4bad52;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 10px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-l {
|
||||
background: url(@/assets/v3/bg1.B9IGVx_y.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAAXNSR0IArs4c6QAAAtZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcFhYWGxsbGxsbGhoaGhoaHx8fGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGRkZGhoaGhoaGQes7QAAAPF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKistLi8vMDEyMjQ1Njg5Ojs8Pj9AQUJDREVGSUpLTE1OT1BSU1RVVldZWltdXl9gYWJjZGZnaWprbG5vcHFyc3R2d3h5ent9fn+AgIGDhIWFhoeIiYuMjY6PkJKVlpeYmZucnZ6foKGjpKWlpqeoqaqrrK2trq+wsbKztba3uLu8vb6/wMLDxMXGx8jJysvMzc7P0NHS09TV1tjZ2tzd3t7f4OHi4uPk5ebn6Onq6uvs7e7v7/Dx8vP09fb3+Pn6+/v8/f3+/jZlGfIAAARzSURBVBgZtcGJf84FAMfx77PjGRs2c2QUm6VoylFyLMdmmKOkiGooUY4cqSgVy1JKIoq2pMOoxCK1ImfMNCamaZjYxR5b6/n8B/1+z+/Zs2fHq9dGvd/6v4XqxgRltNcNeZUNuhGdSiFWN+BL4LC/rttI2A4zdb0aZZEZsI2CMDVMt66yPA/DFFXGGrn1i1A9tCq9cqtM4SWkSloK0XIZSrbqodlVFsn0GVcjJTXLZZ+vTKlkqD5SOOkjKQ4WyjQepsjQuozn9C8e6ipLPAyS7EfIDpTJ9h35LSU9jTNcloGxqmUwRbfIxe8sc6Vn4QFZelSwQtJ60mQZ4Kxoq5rCS0mWJW5tB7Ur5GtVegtnL6n3+i5y8T1Ijl21vAYD5bEORxdVCj1Puk0eU2GcamuSwwFV6g9LVGUSJKhS8EV2qC4PU2KXxfcAvw+Ztymj4BqUF/361ctHyQuRWxRl3eQlwC63+L5yS4Rr1LA/1ibL8D5yC7JJjU+f7aNqWk8/gsWZs+uT5G+Pl2M5sSBc1YwrTpOCCykapCo9NjqAv3OgaGELuQRNPQd/ngWc38SoyqQKDkmKKeJKvNw6pzjBuXVsIvzcXh4hWyA5fqMD2NZHbtPh1O0y9L2Eo6tMHVaVQ/6CcI2EbYHy4rMaZqrVMyeB1DtlGgOZ4XLpcY5hknxnFEPhwmDJfoxjoarGvoOC1lLAtLNQviRQ0hx+CZNb816Suu+Bq0tbyTAFhshyc6Qsnct4Q4aguRchK1byiW4kb9NKIe02uXzPDrmMz4H82b4yrSTPR6abksG5xF/VhG6CSxNtcmnj5AmZXsIlRaYYiJYl/hSkR8jLHZnwQ4TchkO4DD3L+XHYoFQYLYNfMdPlFvoFnB8gjwGXYYm/Kk2m3EeGF7jQXPI7xIcyZZAoj2kOHI/ILawYElVlHnkyJbNVhuXslWkn76vKZHDeK7exDhxT5PEkDpsMr3CmkaR0Nsh0mCR5jLoM8+Qx4DxsDJHbKAiToT9siopcDhNl8ClgltwClsGVcfLScTeciJUlAibItBKXNJsMfSBOlu574XgvVWNPAj5oIZf9bJbJb74DnG83kSmJy3aZGi8ug4+DVdPQU1AyO0CGOdBbLkHRMSFyaVfCezL4jP0NLiaoDk13A9kJflKTXPY0VjW2zymNkDTyILAhTHXpVMofwNHHgpQAH/nI2yJYLP/70zHFqE5bKG4/OB0oeLfvStjcTB7+78C2u17PA44+eorD/qrDCJgnadQeDBlZcDrBV5YRhyF3H4bMBD+NgRmqrVEWmQEydV92AUvJT2sWvbhq52Usxav722TYTkEb1TIf4uVmfzDlDDXkp05sKktUGWtUU4cSUuWt44QVhy7+hcFZkLF2cpRNVZKgn2r4lKuRqs3e9e5A1dIsl72+qiYOFqr+JsAUefM/Qnag6s+2i/yW8jILRqshelawQlXaFrJVDbOcinvksQ5HFzVM6HnSbXK7D06+2VAH4XFZfA9wffJC5DJi//V6Sv+BfwBIbvfBNZtweQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA6CAMAAADMWVqUAAAAAXNSR0IArs4c6QAAAkNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUICAgHh4eHBwcGhoaGBgYFxcXFRUVHx8fHR0dHBwcGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYFxcXHBwcHBwcGxsbGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZHBwcGxsbGhoaGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGxsbGhoaGhoaHR0dGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaZrZiaQAAAMB0Uk5TAAECAwQFBgcICQoMDRAREhQVFhgZGhsdHh8gISIjJCUmJygpKywtLi8zNDU2Nzg6Oz09Pj9AQUJDRUZHSEpMTU9QUVJTVFRVVldYWVpaXF1eX2BhYmJjZGRlZ2lqa21vcHJzdXd3ent8fn+AgYKCg4WJi42Oj5GSlZiZm5yfoaSnqKmqq6yvsbK0tba3uLq7vsDBwsPGyMvN0dLT1djZ3N3e3+Di4+Tl5+jq6+zt7vDx8vLz9PX29vf4+fr7/P3+nMc1QAAAAuJJREFUSMfVlulfTFEYx2fmtk1laDGtWqzTKksJES0itEipLJGxJEsoJEsSIilZsoUWoqQyg8bcaX5/mnvvuTPN5864nUkv+L2Z5znnfufznPM8zzlH4RtHIbVCqjhQaMUcYgXyERb/AYtTyCrpX8PW5ola4xbWZdu7R3OK+YcvdIX5aUT5TY95abWexIpttsD6bDPdltgV+0UIZKrSLUzZix8nUoreg42gxXQl+uONQD5nBhtwiQ7b1kv2aZLhvWZ00GCqRh4ZHzHgp4C1opsGuwAMFYZypQDs49xoI2oosHgrHmsE6zks9ZlVQ5hcRIG1YjyEWDH9JAFZFAnwMKLeZgdfHQU6UmjSHQrsmvY85zN0jaMDklwMz4TFA/E0mEdguKNbBIRNe2ptgEtMrf8M9J1k7ANNGLU7UTdYWLs3OmNMGymju97iQAKLJjs1LMxZypywGuDeps33gSPET+yDyR7zG0zWppYNgA2TYv1oU3It0o7h5IzSY1ceTAFnk0SVcicq94nWiAYJxiVJ6N2trg/nMWGVt/BQgi0AMvnfbNfYNxU/edupA5ghtHNTTCf6dKvzKuuaTcBlnahyoIT7JtKAWunaqrmay87pBI4Sf8lLWBNskz1gz2ccGIQpWop53yHhtCjFgUgjvxLxPwZJB+Q5p1ulfwsMHvKyD5wCq7HZ2utjQFeq65oM8lc6eGnAKodognzoSjkAyJlFB8wDts8CYyzQOxzsgRrK++0dWm1mxDUzLJ3pVFgDzDqR+iQkgC2iwcJMeEVup9cw1W3Y/wFm7iTLBXLlj9fDwNeDi5WKRKCYL/fvuKhQFJB2kNNpPjSTYQTjHrzbwtdNFpA109WR3kNKbkJFsCe0F1VUflV1HVDIr3UCZ9y6TV/AfG5dxQB+xbiFLfsohGrdSRKwJ1lWaeVbfMUz46YBeLre/ReeOsT/bx+GO5bLavf//DDcu1JWFXP7xJ4N5rOUQt5S6jcJyGZLl4Al1gAAAABJRU5ErkJggg==);
|
||||
height: 29px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAAXNSR0IArs4c6QAAAuVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaMeyWdgAAAPZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLjAxMjM0Njc5Ojs8PkBBQkNFRkdJSktMTU5PUFFSU1RVVldYWVpbXF5fYGJjZGVnaGlqa2xtbm9wcnR1dnd4ent9fn+BgoOEh4iJio6PkZKTlJaXl5iZmpubnJ2en6ChoqOkpqeoqaqrrK2trq+xsrO0tbe4ubq7u7y9vb6+wMHCwsPExcbHx8jIycnKy8zNzs/R0tLT09TV1tfY2drb3Nzd3t/f4OHi4+Tl5efo6err7Ozt7u7v7/Dx8vLz9PX29/j4+fr7/P3+/H7PQAAABYhJREFUWMPtmGlYVGUUxw+IoCC4YEkpqAQpuKJSKi5pWmq2uJVLruReiguWCFJomUvu1qSpDZJWkKWm5lJauWQa5IaCQpg6EwjT4Mz8Pvdh7r0wwzCD2dOHns6n/32fO7/nveec95zzjogHC4+JkPs2Hfr/AKTHis8Whd8nZIYNKImTBhGfsjey0d9itLnL+XXFWH7DbkV7UwYF3ytkCsXBMhAHs+wYEXAvjDo7KPaWaFg7NO5z9sYNSdh4A6AwocYfVmvUZeC9IQcxBWmO9em+8BxgmOxTI0b4YaAAgBmO0XksCzgeXQPG8wY4GOefVMSFMVVC/OQxMPbzhPBKBtMEEREJdJVs3qNKsc50z/B+F860d5uxHS/BR37uGCsho56HtG/yPUxyA1kE6XU8nZ3oIiwdq2c8C3pHRquX5+Vwec7YNhVLYbmYe1XPiDRwNqjSc8TiS1q6XkqLsi82/gnrc24ccoSySj6N2GAFLJdvYci1ANb1USJS7zCMc+OQF2GsEoCElBFjS6D07YENRIdeAgcsMYJpgvjuhFluGHVzOeolIiIzLQCUzmtcybGN5hnh/Q8gxV2KvAbdRUSkq42ik3CjtVN0Wh4CWOvlhuGTx1a7SuZKQ3mLcj/nEPt+Afra7jbSD3qov0oX6QvNnCHxsM99RfmQ88pGZ2FN6LyfAudkG2bjpPty0qCcBEUG/wnABCdIn3IuNnV/8vqAWifa2oDSKfZ9hU7NJX9GS5HYOxS08lAC5nJTdftirLEdfO3eTjQDUJ7U/gbFnTzVkZ18rCauFibx2Q7WnK+zLWDC3NNjPbupuaQDqKUrEbLCRSQsA2yDPTJqw0uKHI1NOYWhZrK87fXuENZIj5AQeEqRCzmnqKlYwxXZzKTt1HVx1+l0ugzI1NntAkWKyuWk9tYZ8pXV9F8+UZTu6CmdTqfTRYvEUL1t1iDfuHmrm0iEXq/X74EDertdwqiofE5U2kmBsnqLq4raC/v0er2+rfrN0EfUrM9XJwMsYWpxLmOuIrNZoKhe0KKyYwJgmCJHYVVOWYtyMpQM3IJVKY++JuKVN4eAY2e4rXm/HQzUAoW+mYg02QJLlbXeEKuNDibHGO3S0lRyWKVmzy4wnT/9axnsUbtAKvneitzAEUfI6+SpMomb9dUylGyvlNYlKiPgmrYnyWNhlZbzqCLb2zTXiUTOzqdgbpT2PKviayJhgCOkoZnZql5DaWg1HbCJsSJ3xmNznsC2cFqVLczs93MJqZ2JpbX6cIw9ztn/AnQR7dCw2iUkjYoj1LUiKzTzL2Sb9rAKVvlVgdROg01ax1jPNd8qB3EmDO75gF377YZ9TZ0gTTLhkH+lIXV+1dNc7wZgS61rHx9XQ8m8wEqQgFlG2OQvIj61RMTrSwwhVSEB14GKLjm9HAqX9PUTHXrx7Z16DSwJXtI85YLN+vOCB0fBRBd1ZSS2cY9swFZfmwoATDmF/J5tAtjcWqS/yX76bxs47O0CksQpkTbwuLbS6c0rWs3IXxorIn3N3N0U/8p2G1hdDkuTKYuSBK172mtr50mJF7m6ID7WW0SksZG8KBGRrkbyXM5+zYsxn4fr/tXPbK9CjF0NhOEui+0zRgAOhVQLySJLbU7ZldLRwULHJw57By60rQ6SQ6oqt5LppvhPs2EYXcs15ATLVJmudUyXNqgUfnzCJWSdlunBJt5w28hijgPpHVxAJsIce9SWay6udvKaXgwcmdTCARI27iBA8sMikWthjceuGjzfAJC9csbTXTL4qkv/acvPAPzxA9w9e84G23xrcOsJHLnb5tzp9o0JCtpovw6m+dXwFhcydNm3Jcrv73y3YvhDIiLSempqysSwe7qVejVtl8mBdqFe///h8I9Doru1lX/F/gIjzb047a6x0QAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAAAAXNSR0IArs4c6QAABsRJREFUeNrNWWlsFVUUHrayRgRt37vfmS6QlqIlIFSkkIKhwSJVUCRgWARSZTVGQRBBCCAoRUV2UIxFlIQlrLKLQhVFtEBAERQECRaBKmWrCKX1mntm5r3pvJnSVyhx7o/Ou9t377nfOee7U02rnKeKP9LXDNHJNbQ79aCOGCQ24R9ILv9iH00QsZUP+xxOm5D2ck282/CuSgPVa2O5AUTf02t4Eu38XTAcG3CNa4/o8ZUCm1yDchggV6SWbiEdH3HLX5UCjQ948g+TItxaaQCuq13fdoNTGsOuCNbENBAd/HGloCWkmHG797sXEqdQxwRpi4MmrfJpmFbFqBVLmGa3zvD4mlpVE7YVU2qgCTsEJaU4vcaARrSiGU2oCG9J9BMzsBFHUYAb7KWFOI1d2A+Jv/XaPH0i+/Dv1B9NRbrYyUsaZi5wAyT2hmfKpnoWzrt4aKCITWbPxZDiIulWBGPofLNtOCRKtOrlDH6iO/bYIE5iK2ZjjNgMiQs0UkzFClyFxHxz8kOQmBMcLjrzsvhk9Qzev16enXbliYzgJ3EC0YGW1yGRZ77/Boks8/0yJL1stxUDt+dFtFfv/vtvAipisd4EPUXz+W9X24R24F1BV8I3kFjpdKOYBvzeX73fxJfRCQUMVoDRcbWwVhnZcowQ4Dl8jtV48jfYOt3MlmjkQeKAuYiPIel42bAvoBgS1/G2Wqsvijk8sVQPO/AjfHZp6j2yHk4w9EqMwlxxERLFlGK4Hy5A0qwyoi4W8V7PUNtAzlFnE+cFnFwDZyFptXlEyQxtlatisDkik5eX4hkWsIMH7AuyD59CYr/DJjZgTcMktTNfI+NXZD0xFV/jEv2IbGpieQd+UCnEm1JLGHalFf443Sl3mVwWcKSfk192GVTtwezu63W2o9gcn9hpZCQAf+uygDWNZqk9I9Fj4qo4rLKTQcDQkJjBUXZPXK1SEBMhccU5xAnsi0IhJNZ57HcQb6in+24TcUlNFisc9dshsT2ktwNY0zCZjflo6MwxDfCnCj92O9pzag5z8MEQiEtOV3IH1mvjJCR+CZUC4PBD7ilR9OP1jnXWxwqu784/qjWurxMSRbL/YSyDxHk9gzpSCrXQExrX1zTxFPcd54BtxTGhmBOk80mK4AiTZ6Q2u5FoKE+2BftVFC6zFOJnzmBF9micFMFuVCDe4XnSnfsdzEOfNddYhzrSeGzlk6lI+SlIRTGVzdzfPIg9jtRHx43uOtFQmxy3SjF2IVu8ikzqpWeIDmhFTcRMSPxBup6gN9fbUEf0xmjMptXGYsX4QBRTwfYoWgaY3UJzeqqYgW020VKIL8QU9BZfQuIzFx8IIZdZ341HF/masZmtpCrpuD+LrkBigd3QS5UyCOTdXEz0t7Z0Ao4Ek3y5gFua8+zTqmOaobQ58qmtKYxCX12rb3VRbHY+glei4Yg41yHFi2EA3xuw2TrezHq+T/WgVWx0Bd/DMnQKm+I7QyWUfuLu9oo4XsCaphgiDpvg56J8gfpoTKciSJppGXqc0rvxNV2Dis5xuktYwMfUSeKMOjbnSKywZSilLijHI2nYFFO5gXMhsYjSUIK3XASGxA3zlDlvLHAH9rdmg7UMC/grzm8a9QwVsob0N6511bzow6buqDrqCWEBb4OkVR7z3ROgl8FCMxaHTtJVtUb6wwJeB0mbPfNyCSSLIV8j5u2b6ONa5rGpM0NbxBpWoG5jdjOr+3iUK2Ya0ZtXMB7fQuHLqp5w54ExzVAHij59fXXdCg1Urb6o0BahwuFptzF8CDvc5/PVVQKJRhqysxiShnqQ6wkDOCxybTQCpdsTX9NIkkbHc5A03kOkpYdK+ZsCK12+3MOdOBLqGUbHfZBY6gGcymS4Lyzgb70VtpGAzZyMueo+6GFqI9IkhwV80D2RataN47KpT6iXlzk1TY9nFnYKC/iUigseIVhZY0spHYk88UxpIc9psZYRQMIArsZkHeYqEZY5lCzLMFUuYAHaWd9ytAD1MKn8wCKGT/Exe12sEC/hgKXfotPtEfTpQINEPhZTL0uJcJLLDgOY6ag3N+wlUjEZe/kzhiqXMD0oDILn2Ua8xxdpq5zAUjGW9kCKnWEA9+Udj6RZ2M2fEU0lRzk0IKi2XBxcdMa8gOmDJQ876H0xBWPwPA0QPURn9VkJ+ZSGbugtBtEImiBmYC0OiRuOkVexgYbopJXv8ceJfmIhcvneVJFSjF+xFqOorftH1XI8UT6Rikxk0WocxCkUoMgFRn3hO4tj+FwspBH0OBIr5V8CSRF6QxHjT9Ifogf0+Eh/ZD2P6+f/8/kPaURwNOuwtMAAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHBwcGxsbFhYWFRUVGxsbGhoaFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGBgYGxsbGhoaGRkZGRkZHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoahQXVxQAAAKZ0Uk5TAAECAwQFBgcICQoLDA0ODxITFxgcHSEiIyUmJygqKywtLi8xMjQ1ODo8PUBDREVHSUpLTFBTVFVYXF1fYGFjZWZnaWxub3J1d3h9foCBiYqNjpGSlJeYmZqbnZ6foKKjpKWmqKqrrK2vsLG0tba3vL2+wMHDw8XGx8jMztLT1NXV1tfY2drc3t/h4uPk5eXm5ufo6err7fDx8fLz9PX29/j5+vz9/ud+XxgAAAIaSURBVHic7ZTpVxJRGIdHtJS0yELMNNtMaLPFLNuppKxIC8v2fU/KysJyKtvBpI3KqDAL5Pk7O3eGphEBGb54Ooffl+e+895nzl3mjCSly4yj3ba0zQxZMwiRFpNRbeYZIAq+amNeUwgCDTU+GGktzF6bdQXih8skyeQahr6F2Xobh+DVMnVceRui7qnZaNYuiLWb/5YFzjA8rp/Y2z5untULsbaSzJpNrOxA8so2DcHLpRk0U0sk9Vkop9VRms6r9sGvvUUpe+vF/axM2SpsHQFfjVYv7+zpPd+sfTnlZ4HjlvHegj4YdmnzLKdRcm+ONmNtEIKNSdoUdxTuVGr1tBfwuetSAH7M1R5ajgHnyvXekkcQdhb8e9AB7cXiciL06r7zFX74tEErS9pi4LXqXjQvTqc62gqbdY1Szyhcna0WxQ/EBc+v1eUQo/bE0E+3vlO7IwyhCkW0Yzgu9SCeGPW+VqlrNdU5HF844RCJclCgEfYLNsEewW2wRXA3rHPYzbpdv8Ot8De7BKZDs6ANGgTrYbHgaqgYe5F5MS/mxf9dXOXxRHjoEYlxV+AI3BI8BdcEL8IFwetw0uPUxH3G/lVenRh7/fF5v4j//TOFgbcK+geCKgffqAwOfB8jhqSsc2PyRFmWPxD/mXVifJNl2SxJRv//asqE2HPzqaHcv5wQnRNtKzmLJk3cWWQwdQkx51PNUazKKSbpDyfEdItE0oMXAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-l {
|
||||
background: url(@/assets/v3/bg2.ED2KfGoJ.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABACAMAAABvC9RJAAAAAXNSR0IArs4c6QAAAoVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYHh4eFxcXHR0dHBwcHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoawUAFEAAAANZ0Uk5TAAECAwQFBgcICQoLDA0ODxARExQVFhcYGRobHB0eHyAiIiMkJSYnKCorLC0uLzIzNDY3ODo7PD0/QEFCQ0RGR0hJSktMTk9RU1VWV1lbXF1fYGJjZWdpamtsbG1vcHFzdHV2d3h5ent8fX5/gIGCg4aHiImKi4yNjo+QkZKTlJWWl5iam5yen6Gio6WnqKmqrK2usLKztLW2t7m7vL2/wMHCw8TFyMnKzM3Oz9HT1NXX2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fL09fb3+Pn6+/z9/kKeQQUAAAOySURBVHjarZb5X1RVGIe/ICiorBoGGSSlIUtkYxZFSWakhUtESFIhZmbZHgUFhYGtKKHYRlKZlCmoLGVZsgYoiwhc7vP39MPMwMw4M1w+n56f5v2e89x75j0z9x7JBwk3aE4s3NpoTtRnB1sW7v54GAD6ylKtzF++twOg5bn9FwBOF0b7nx+S0zAF9FfcISkg47MRYLzu4Xk+BVvVFcD4etN8Z7I49wRAd0mSt/mxHw0AnC9e5p7f+vrfAH1PR7rnCzZ/awCXD6zxcrHAB2rGgbHD6wOnszsrBwGTiRBfS37K3sFLb6yUpEVF5wDaXniZMZ/fchukvdkJ0JQXqHRgqHqt9Ix/JVTzsmqvAYuVDsWhkgVFUtQHDiVdVhXl/H9KRP5rBTFzUh65AkxsmYOSdhWjfRIzw4pi1NTU1NR0MJCihIs0WFGcVEp6ka7ZlU0/2hnmkKRSK4qTVzGKEnOvUWVdib4IQE+CdUWxjSacTJUUv79y981WFGn5ulWSVDgJjOdYUuxkmYycGsNcY135ij9iFN9NQ0rKXotKHy9JKnVslj8l0eZ4YPxOlaTaWZW0n8H4ZqkklTH5fPorUG2z2Wy2QF/Kil4A2sMl3WjfoHOuTyMvyidcy719n8keSYr7zmCqNk7+lQHeklTPT/ZyadIS95Z4UQYpknSQM96b6E05QUesUi9TYV3ZAOMdBqPJ/pRkWOuS5RnA0EYfhp6A+VoG2a7hLfBFpC9DuxmSgqbY6RrOh+0+DVXQIamZWutKM4cllYPhil1ZYXgFCiRl4cl2SYn4IFFSYD9n891YZVfK8z3Z0ctvkqR9mHddt+hEyLwu3AqPSZIi/qXJkhL6Dy2O12Uh5HmMRr0H74d5hO/Cg46Pwc2MrHQbTBoAOOv2u1emyZGZGWOcWegyGPQXk+1/wveuRmwn3S5/hQKon3mp6yHIlnbD6pls0Wmm1rteohrKZ6piBiVFw4aZGx+DXW7rDDoO70xXT2LES5mwbnq8Dg56dCP8VyhxFktGacvd2cMl52KD66AuyLPpEafgU2e6wwQYd+5M+HE46uUIGNkEDc6tePQXzB/ucRRxLfCl10NjyFFone7RwukOZvRAWYC8ElgOI1s8woA9Bsaz8sm2UTiwwDWJOga998sPyW1w3uUct7ETTsbJL2G1YLztuFHU52CWBmk2cvqh9V5J2twFF+6bVZAUcwQ4dNPqRjA/XGTFkPR4F1w1oDXDoiAprGQChndZP/NL0m21lTFzEvzyH16BnDy4upTwAAAAAElFTkSuQmCC);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 25px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2CAMAAAChp3phAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAKysrJCQkHBwcGhoaFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGBgYHR0dHBwcGxsbGRkZGRkZFxcXHBwcHBwcGxsbGhoaGBgYFxcXHBwcGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHR0dGRkZHBwcHBwcGxsbGxsbGxsbGRkZGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGxsbGRkZGxsbGxsbGxsbGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGBgYGhoaGhoaGxsbGRkZGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaY4gg2QAAAKZ0Uk5TAAECAwQGBwkKDA0ODxAREhMVGhscHh8hJCUmKCssLTAxMzQ1Njg6PT4/QEFCQ0ZMUVRWV1hZWltdXl9hZGVoaWprbG9wcnR3eHp6e3x9gIKDhIWGiImMj5CRkpOUlZaXl5ucn6KjqKmqq6yvsLS2uLm6u7y9v8DCw8XHyMnMzc/Q0tLT1NXW19jb3N3e3+Dh4uPk5ufo6+zt7vP19vj5+fr6+/z9/hUAYDEAAAJLSURBVHja7ZT5U9NAGIa3UhU1guJ9At7We0VRxKNFKd7iiUXRKpcKKFYBUUSJWm9AraC21pLk/TudbLYtaZPSrY4zjj6/9Psm3zOz+35JCbGncNkckhOregG8KcvB9CpgNOeJmi4NH6tcex4DXkHT8QpvCwkhznZE5oqpxQBlxTxgn93Q4m4rngM83VEMW05sJaQUNkw31JDNYzdTO5rS6EmogwimP27SuFqafo0dCfUZLlpcM/b71WZV1QDVANBU9V22amtaJkPZq8HDfr97P6Pef7pDRL1r6mv/AfWy0peVOn+nx+OhRePVq+g3qSv3ejzuzVNT1eoYW2C40lbNbzd2/Hq5WXVp0KLRKDBWbKfWAUo0GgNeOLm6AlgvSX58XkAIWRrGWUm6xdVtF6rZ7xl8kCTpE9qmEeI4CKyVpB+6upG/awE2JRuNOWF+UlTozezk9xpXjemnmdTdejMrqa4Gaih9YFzLMYTblPamqJcwQun27zimNyXAKUqVZExVwB2fz9cNlOsxfX0ynhCL6T6+Nfp8DYOIFJgSntLPz9E1ye6jKwnz5lDKXvNPdMmyfM87mRBS2ZBKrX7URdf6ZHng5pYJ/mAm4r/6R9QNwGhIGNPrL4qbkDXAlePCKH/rctbNEGaMq7km/AtqQZkV54EjrNgVQZvlxEK7GK5jmFc3EBQKMG8E9bwsB5aIqC5gEy9nxlAjotbhizNed+KhiPoejYn6ALSibJyKgM4jYCAQpwd4yYpzmdWTGTbZmVmlLQatLUni9dGU2Z8vQHe3JjoBkgAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGRkZGRkZICAgGBgYFxcXFxcXHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHBwcGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoa7LJWmwAAAMR0Uk5TAAECAwQFBgcICQoLDA0OEhMUFRYXGBkaGxweHyAgISIlJigqKywtLjAxMjM0NTc4OTo8Pj9AQ0RKS01PUVNUVVdYWVpbXF1fYGFiY2RlZmhqa2xvcHFydHV2d3h6e3x+goOEhYaGh4iJiouMjo+TlZaZm5udo6SlpqeprKyur7Gys7e4ubu8vr/BwsLDxMbHyMvMzc/P0NHT1NXW2Nnc3N3e3+Hh4uPk5ebo6err7O3u7/Dw8fLz9PX29/f4+fr6+/z9/h/1AioAAAL8SURBVHja7Zb3UxNREMcXAqggIE0pig0VPRuggAURRUBARUVFBaUJKCLFw4Y99oqosYEUEQtEUBCICSYk3z/MyeUSknjx7jKOozN+f3l7b9/nbm/fvp1HJKhpDMMwUZzpF8swzHySpWyY1bacJtcbzdZzd3D0BR23GDJxLvgcIHMAV1fID96i9zgGpJK76sF5IMVdet6Y+bdPeshAvOPiAnlzkdaStlqrb0lcpBgeCqyzWIqnGNo5c/VdIJH3daFCOr4Q2ExEvl1g3cEzMT7FPNZB5Q6ej1FuLEP3H8N99NhmxU1fvhm+D49acc9h5IvuXAteBnPGEVjVb/EUAfGi+Fpg6JZSqXykA3RqGPoAfLimVCpbgRsSKuiAnv/oeOWkIqhpVYc1iofhgoBnnoNKLrWoVBro483xqon82oDXqic32V0OyxbbChVCOkg8TtMHhPwFdrjR4CgTBhQ2nPIAJ7/BEc9y+p9elNMEHgJsclow+Cvc24RsLo26d9zzV+yTjockbnD6nBqNyQsUkvA5d7jMbLVfPGKeGdwuAZ/Bp3mvPT5umSsUx89Bmzc7/A0a7OgYICs8vhljUaL4J5QRUS36gyfwE9D5E4UZkSGGBwHriWipCU22pQkmNJrHbpSK4SH8eT8DVHhbpla+xegs5/Mugge8AlRJXkRR1UaYUkkmTmEPAGg6zOdVk0ZS8Ylm5bO7l9stY9NckowHsGys1VYk5FceSg+yIVVsirSaF9dfjEdXOStDDp7wU2u6IAdf1uGsun8ndf9x6Xh9ukxpHHA39Ltw8nVHfCNlDhcLa4+lz3isceEvzlUQBWpdhqc7uz9tx9F21/EXEoUBIz2CGrfdrATdH8F1zntoEd7aqPLHn6Fvv5jsKejeAjBElAPEuKwOf4VL13W84FqzBjUkX9FG/sbBQhspHz8NTShnRGhwP0AunWtCCW8WAc+SZMGhNUDnVOtTKYCOy6xUnWrWAq0RE2/L6JRZ8PqGYPtovDZWX2mWqttsgfWS8wOVDhPNZXeUuAAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-l {
|
||||
background: url(@/assets/v3/bg3.DKgYKiLO.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA4CAMAAACbrRsRAAAAAXNSR0IArs4c6QAAAmRQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVJycnFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcGhoaGhoaGRkZGBgYGBgYHR0dFxcXHBwcHBwcGxsbGhoaGhoaGRkZHBwcGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZHBwcGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaM9yYTAAAAMt0Uk5TAAECAwQFBgcICQoMDQ0ODxARFRYXGBkaGxwdHh8gISIjJScoKSorLCwtLi8xMjM3Ojs9Pj9AQkNERUdISktMTU5PUFJUVVhZXF1eX2BhY2VmZ2lqa2xubm9xcnR1d3h6e3x9fn+Bg4WGh4iJiouMjY2Oj5CRkpOUlZeYmZqam5ydn6Olpqmqq62ys7S4ubq7vr6/wcLDx8fIycrLy8zN0dLT1NXW19jZ2tvc3d7f3+Dh4+Tl5ujp6uvr7e7v8PHy9fb39/j5+vv8/f7mLvP7AAADPklEQVR42r3W+V8McRgH8E8bSki6LJahcrOOxaZylVhX7jORW+5jkVtCypkz951io4RUrpBVn3/K6/vdZq9se3jx+WWe3X29Z78z8zwzgzC9DzGYTJ3RKnr6ltLIgCkfRf2BmrwueImwT6JbUz28JYXcSj6LCYz2yCJLuwdGkUmWaQOjWE6+6BkYxVLyZa/AKBaRFTq/qXGQyMZmvtP6Sx1Z9L9oxEg108lkv6gj8eTo1jRu24WC5aGimmrOAjDYbO4kV5t388xcTVs0rUEcyDMxW7l8AGAKKYZlmzzAS+0808h6fjpbTJ4CcIAPAUwmo4GxZHleCbnSM00nBwFb+DUY2K/SGGA3q8KA87zumWazBkASqRP0EYBJkhaxCMA6vvNM1/A9gPFkH2CfSmMFLbTv2CMVPyaSiqCPAUxsoUWS1npbsFFSs0q7A4WSrm6LLuNXjXpBzHwCYIKk+bwGcfosnuloclNUXAmrAexVqVbMd1OGdnwtCzzToGJbc8+X9Kmt57VAeKX8+ufQNrop+hzJxlWi3KNSMd8Jd0hWJ7fZw1BSjRGy6KaLBdBR1ytYfuybMqSlDZF8i7xrCGRyNsjFN6/wnxqaWbZjTyWtw/ym+awMByJrmOtOgxSnp5k8XLeUcpfYnGCJKw3Z8oUsT5G1JrOOfDNDlAcbrtppDbPFZjvLXOlJ23VNEnWOrc6Qf3HLGx1OFiSmv5Z9FPuLxUmTHrJeAxxXaYSi1HGnoijKUb5SlHAHXcjvIYCJzV3lkGuBMWR/QW/b6BrXJ/ViB13rNK+zyfZAgmycY96pbdQTVdpB9pxB0Dsq/ThvQbrRaDROW5BhdabZTqM+S9I4SY84aI3jMjW60lr7qM8kQyQdI+g9Z6rbvDnKnZrYFCsG3hoqb6B6II3sDRx2paPIAe5U18jS9XsbeAVAl3pWbdxaz3IIet8bxQp54j7Hi3pak6h/iOk65APFhPNvn+e1vCuMLKyynO4v71kXc52pvqKiX2vqJZ7P8L+lX+bY80vQKWSqj9S9EU2k6V9TTXuRgeQ4WWiAEeQI/94lDIG/hjjTaovlm9X6weJLqlypn7FTbY7I5Rs38nN8TG/8dX4D3Yb6f19FH58AAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAMAAABxwuT6AAAAAXNSR0IArs4c6QAAAtxQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaAklNYAAAAPN0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8hIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCREVGR0hJSktMTU5PUFFSU1RVVldYWltdXl9gYWJjZGVoaWprbG1ub3BxcnN0dXZ3eXp7fH1+f4CBgoOEhYaHiImLjI6Pj5CRkpOUlZaYmZqbnJ2en6Gio6SlpqeoqaqrrK2ur7Cxs7S1tre4ubq7vL2+wMHCw8TFxsfHyMnKysvMzc7Q0dLT1NXW19na29zd3t/g4eLi4+Tl5ufo6err7O3v8PHy8/T19vf4+fr7/P3+kWOxigAABYhJREFUeAGlwYtf1fUBx+HP4QAKqMecXGTesaHmLR2zxgrUHLZNl6tBbmOpqRW2spWmxiJza5QjlZxpXrAyZlhu4hR0W5tMWYkrFNwmigKFcj0czvsf2Ov7+3HwIAeh7XnUM8fQ0ZMnjnTpS7t96e7TjVjqTmxOjVafjVrzKV15i5a41BfDtngAzrzx9MI5M7/57bS1ey4DfL6qv3ozMLMR2oueitMNjpkbzgL//kmQbumhq+DeFKNuph4E/jFJPXNkgjcvTgEln4Tr89WTiP1QnqCeOBY14H1WgcWWQuEQ3cKUC7A7WAGElUBOsDpNWZ61/dCBLWvTh6tTVDHkKIC9sEo+M7Ir6VSyZrg6hObDo+pmNbyhDuPeBnBXnnj3QMklL9D88mDZIkppS9ZNvuulKFSW4I1tULd9Qbgs0YsPtELdItlGXaV2pLroV0FlpCy3HYaG9QPkZ9ROL2wMkiWxld3q4kmYI8vYzyA/WjeZdhYK+suShXe6/Ljq+L0srrPwokPduD6AXbK4ajksPxvwTpMR9AEsUSDOHfBzWTJgrjq5mnhLlrWwUT4RU+fNnuBUh9DjeJNlhJ7nuDotgUkyYhv5MEi2eQUtALXbJ8gWfZG/O2Q8DuPkc5RzsuTiHiPLsMP4eDaFyrII0mSMhPXqMMjDr2SM9fCaLHdchHPPzRw+Zk52PRwbJCPoNOccMk7xV3X4Dtwj4xnckTKiLtD+bIgsQ/Pg/SAZCyBBxlo8LtleotYp4wSHZHkX74Pq9Bo8JqPfNbJkTIW5suVzWEaMl2UyZkKWbnAWcXWAjH2ckeFs5QnZzpIjYx6MlpHL1Qj5SYA0GT+FcBllvC7bF6ySsZj2YBmXyVEXZeyRMQviZBwkXzYPS2U8T7UMF6TKuPNkwW0yNnNKRjx8S0YehbKEwSIZr3Naxu1wr4z3ktY9LmMdl2QMhgdlbOMvsjjhERkvUy4jFu6Xsbqg9B4Zv+RTGSMgRcZOjsnWRIaMDJpkONt4SpakibK8zxEZCTBFRj4FslXxCxkPwWAZRyiWv4HNPC9jAUTKOM4u2Y7ytowZcJ+M5ZAkP+tgoowsrjlk1LBetq18IiOomhwZYf+hfIg6faOFd2QpI0/GUEiTbRner8rI5aJDxkIoiVWHxBo+HyNjHKTJeBjGyxYPy2TcDwtleQFqnhgkSSNeddN2nyybcA+WsY/L8qnikAxnGf8MlmWlB1qL9+4vBWqTZYlzs0VGv2vsks8ruF0yvgfLZZteiM2TGyvbOzQOk5EC8+UzDZbKUkTz19Uh/pm3jny4bXG0OqyATFn2UhOiTse5FC4j/guqYhXQ7DZOhcu408uLuiERVsuS0k7ZWAWQUk/1CFkOU+uSn3zqI2VZCXWz1M3P2mm6S5a5kCF/4z1sky29Fc/mGHUx7Q9QNUOWsI85H6outsCjst19BRqy7pCPM2mXFz4aJlsepKqriNO0JcsW9Rs3UJ694oG77k198s1aoG5lqGxrIFc3G3mFurHqELenBT91L7nU4ftejoWom8RWKifLZ8APdla0Alw/80qSUz4/bKIiUgGke7m+QP6+MulrA+XHkQn1kxXQAw14n1PPIvZD+Xj1YEol/DFBgTlSz0HhEPUoqgjYF6cAZpUAOcG6hZAVV8C9Y364uoh6pBAoTVEvBr7QADTlp8eHyDJg+tPF7cCFHwepdzF/wtJWUVr8508uYcvpr74Y3czftpZzQ/vJX9fwcbD64nc0j5FiZy/fkPPmb1/NTL/bJT0MGeqDebBe3RylPka96vcZFWHqZlIbO9Sr1TBfAWRDonoxqpGDCmRQNaVO3dp+WuIU0I/gMd1keLa/9+Cj7B5U0bI1288GaTr/q2vShLIuLv6rrEfV58v8ndT/5b+wy5acLtE3wwAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA8CAMAAAAAPFkHAAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGhoaGhoaGBgYGBgYHBwcGxsbGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGhoaGhoaFxcXGhoaGhoaGRkZGRkZHBwcGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa4vkYlwAAAMR0Uk5TAAECBAUGBwgJCgsNDg8QERITFBUWFxgbHB0eHyAhIiMkJScoKisuLzAxMjM0NDU3ODk6Ozw9Pj9AQkNFRkhJSk1OTk9QUVJTU1VVVldZW1xeX2BhYmNkZ2hpbG1vcHFydXl6e3t+f4CBhoePkJGSlZaWmZucnZ6goqOkpaipqqutrq+wsbK1t7i7vL+/wMHCxMXGycrLzM7P0dPW19na29zd3t/g4eLj5Ofo6uvs7e7u7/Dx8vLz9PX29/j5+fr7+/z9/hwDx/gAAAMQSURBVHja1db5X4xBAMfx2drY3EcRKmfESrnlyH0kFLlyE7mv3Lco5IxCtI4kZMtNrsq2nz/Ma55ntYfnyuvl9eL7y8wz+7x3duaZnWdEpDM40cJynASnLvWPKU2rW0EzA37vLDccjLBGh4Ez8LpPOdy0NuBQKiJPw3OnFToTZoY05Xrx3DlvkmNCZEJm6NdN/45pXmlTsbm+9IJhHuhSEW4yzI2SLtKkZvlvadH2VucKHxX6R/mq0NqqVuc1X/65Ge6cMClrwbh+jlZSW/KOCt90eK6vi7dObRmPgmezeJhFOqYM+HAqa3Rc2w4DU9de9YD3RC8rdK0H7s8O2J66rK8D91hTGnEIarLDgvvouKORhuUm1HYGbvf8fVom1MEKY7oVTms+jngXjeON6Dwv1+zaiyDWTV2sPm33kiddhU7GNlKgT/NglNBNHozUo1GfOKsvRbsaSvToBpoGKBX70Mnd/aTv1L5qZSUM0aElFCvl8vdAYQ+1McUFuFJkNfILW7RpVDOrZLlJXbhP2yvSo/4JFFvIXW26CORK7d9A6cjYTc3skY0u3Okx6W5c8mIpRGnSXGplkcM3+Y48QKUcJ6QLIdJBjjcRRmjSvdyTxS4q1B68diHSIEYIEQNpQojolrdiCC3gYkCvB3ks1x9k+HsNayJHkxZzThb9GigdFZfrZbdvrBm9MnxjFfWs0+m1zNespEqZ4eQm9WySLC86qr/hF/W/JPOpUSvL3gHnfeeJZLlJuRQpEloWqkJnwAz1cg3eNmotPHFSN/9qik/7ta+lQe8A6mw5hoyGKcIwO3kbrkltzzhqKG0vOCyC6ZIUNcf57DCi82GN79b9PhqQHCNaGXKCCaZve+jLaaGHH8dgf+b+4JSudFRRPdx/76CQj7dDto4MOwmTDUbjeEhzlvbsHoYjhvMfV03zYo32hBtQZBfGtgbyZCW/WnnI5dXKzpEPl9sIk8yBiUL5M1ySRS25Qt0fOplJkQKDA6hbpdlg/8t0YVJSUtIVbsniDftksc0i1c5fpZFDdWIzpdbzE3Z4x2LkwqSqAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA+CAMAAAChgZ0aAAAAAXNSR0IArs4c6QAAAspQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGBgYGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaty+CnQAAAO10Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGRobHB0eHyAhIiMkJSYnKCkqKy0uLzAxMjM0NTY3OTs8PT4/QEFDREZHSElKS0xOUFFSU1RVVldYWVpbXF1eX2FiY2RlZmdoaWprbG1ub3BxcnN0dXh5e3x9fn+AgYKEhYaHiImKi4yNjo+QkZKTlJWXmJmam5ydnZ6foKGio6SmqKmqq6ytr7CxsrO0t7i7vL2+v8DBwsPExcbHyMrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4ePk5ebn6Onp6urr6+zt7u/w8fLz9PX29/j5+vr7/P3+lBpGjgAABH1JREFUGBmtwYl/zgUAx/Hv5jHP2OaYNYtoLETMNdcsQqzl6iBnUWIlcpvI0ZAZJaQtR6FSbQyJkjRjWHOFlmvGhrU9z+d/6Pk91zbz8uzZer9VLebWEX6qqUYbCuH26kDVSPcL2J3tqBoIPEvpiucHr7GQZVb1LcfaTzZxME/eatwivFXrtu3ad4j8h82y20mWvLWdMhNkN41iH3lpC2WmyW4+d+StVI7ERPfq0b1bl2wO+MrG9DsZ8lYK6XKYAMtMUp1kGCpvbWavnL6Dk8nrcmCbvLaJfXIK3ordxiB5bQMH5Bb79ckT2waqGtZzUP+DdRzS/yCZX1RVjfuPm/vB1BGRqiyJI6qSwMlppTicX9NND1jNUVWBaeIVbCwXcwoxbG+jClZyTJ41+xXYOzXCJCloUPJVKJ6o8hLJlEfd/oKMKLkFzCmAZJPKLCdLnjxzh9K3VEHz32CtyizlpDwIzuFOPz2g7k6Il9uHnJYHu7DGqZK6h7F0kMsicvRo0ZCghwi7wbXdP6TtyThw8OfDl/j3j6yTp878efbchUt5127kF9wpul+SO8VHLj9x3qyHicezb0PkEAnj5dCwX2xzlfG7zLnUlC8+3/jZJ2uTVq9a8dGyJYsXLpg/d/bMGdPfezd+yuQ398HFGNnNpshfhoB12KS3lNtCbpv1KLUSLFjm1ZLNIXbJUOcodgXhcukCA/RofS9Bepiku8TLsAASnwyZVEiG3IqYKg9Cd8PpYNWHYTKcJ0U2E6GFXLJZKk9837fwjlpDb9mEQKxsGsFQuaSTIo/a5DNfERAjmyArL8umKfSXy0HWy61tVF05Ne7zlFxibnK/o/xhpAzH2V9L0hIIlUsuCXJquQ+ujpLBZ9Zd+KaZ7EYXc2+EpOvMkmEs7B8+aBNskIv5PpPl0Pc6hjV+UtBODPmvSvJJgGu9ZPM9+2WXgl1mA7kMhC6ym1pKcXyf43CwacRx+LHT7GLYGmxOhexWMkzC2kR2Y05ZubjELLdPudyufYfIzl1T4UpPKWAr3C6CVSapUyZcPAR7GskuzMoCOQWFqZzQe7hZmskwrQTujZXBvNwKbPaT05cUPa6HWUWZYjm0mTMzXE4xublvyy38Pjt8VFl0CTt79ege1bVzxwWUyqNFsEiVPJFHXhM5vIFVHpl2w1wfVfT0GUqi5TQe5FmDLPiqocqLu4X1dbmMBV951jgNbs6oJ5eoNCgaJrfRYFIVmBItULhjQkzbpl1fWHwKyO6qMq+Bn6qk/S7KuTq5tsoZCf6qog5zDlsx3EoZUk8VvAL1VHUBrXoOiAxRJS9BoGpuONRXzQ2BhnILGTzqWbOqIQ6C5VR3tQXIHyfvxUKIHB7LxmGLvDYYQuWwFZLaB/XOgAny1iAIk10MzJGN714K/OWlgZC0dHniyo+TjpJfW4Ye0E9e6k+Z/bKrB2PkpV65OaezszKPHT3yN+dk1wZeVLWNhIEyJGJtomrzP0HeAMl3uoVk1UC3EshJvw65gaqJ7icw7ApVzZhHr9+24jlV8B9T0a94882ZyAAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-l {
|
||||
background: url(@/assets/v3/bg4.C7YndXK7.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA4CAMAAACBkfufAAAAAXNSR0IArs4c6QAAAjpQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGRkZFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa67X1NQAAAL10Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcZGhscHyEiIyUmJygqLS4vMDEyMzQ1Nzg5Ojs8Pj9AQkNFRkdJSktMTU5PUFFSU1RVVldYXF1eX2JmZ2hrbG1ub3JzdXZ3eHp7fX5/gIKDhIaHiImKj5CRkpWWl5iam5yen6CipKWmqausra+ys7W5u72/wsPExcfJyszNzs/R1NfZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dy8/T19vf4+fr7/P3+eSKkTgAAAttJREFUeNrtlvlfTGEUxs9UktJiC61SokmkhEoIKVsSGWtCkZKKbJOiGU1IWZPQokWhzTRpaJ7/zae578x9Z+beWfj4zfPTuc8935n33nPueV/yV4qKIaZ4zlQwL5LzgkgJUa0WbJwzfZn3kPO2S2MT7mAHhX9u5rFqwbvIY+2Cl8kwpeCr+UWeEYJ8HtMJQdh/TA5rVpvVzRdAChsS8ppky92kyxWCbTqdj2S5Y1pF1RAvL2+byzIucQNJyjvt2ouBn7+GXtZm+JK7mlc0Iq5nvHiBe1TaRwDf7pcWFly69xnA4C53qEIj8GQLey5FshYwFbumzgNfdvBGah9Q7Yraa0JHuK217Blw1DkVoUfPEntzYQeMCU6xBhjiHN3wUTy2s0JPWZVDCSZckfo1FZBBmWJmBN9cOqrFaLAU5tuDJlLbzZKpSUEaxQDqpBdfBr1fHUvT2344ROvmDEklzq2SKcwe2wcsksYURhyTxU5gmkVRD5gsL74Pl2WxUgywaL3l4S0N8wo3ZTEVDCxa1cKUxIxesTIOWC4QItMHMzguiyUC6dJUPJBljw33C6r3GkaNNHYBBv8qljZkN4J0dAsjAVKUTxe0tl2yosyqfNoIlEhhBUA25YiZ0Xb3NZiMdqSWD6ONnGn1D3Q6NLPfW8wmO8XoMNAeamsFvwHOkgtVAJ9SeGNtJ4B6L1fcuVlAY50BsWoT8B644QqjnXPDsbfm5IE8VdU7AGOH5rcAlS65gJJJsUTTlSFEAW0ylbGV/+67XXrA8KFhf5DwWl4DKj4j6pGoChs2kG/rpZ0wHSGiInOiUnp/u9PI5v7mxka2v63sxmwe0W1xBD3VmtXvfDeNHIQxi4q02haP9m6K/YrpNI+3fKKECXxP8hyjlCmMrfEQK39+ndJnUP4n55I9V//6OJMdZZaGL0CF4J3msVbB2yR7nPlnh97AraKsAzOVMy0n8zjOW+z6a5DUb7XEj2EfmeDdAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAMAAACycDqVAAAAAXNSR0IArs4c6QAAAg1QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUEhISICAgHh4eHBwcGxsbGhoaGBgYFxcXFRUVHR0dHBwcGxsbGhoaGRkZGBgYFxcXHR0dHBwcHBwcGxsbGRkZGBgYHBwcGRkZGBgYHBwcGxsbGhoaGRkZGBgYHBwcGxsbGRkZGRkZGRkZHBwcGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGRkZGxsbGhoaGhoaGRkZGxsbGxsbGRkZGxsbGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaino4mQAAAK50Uk5TAAECAwQFBgcICQoMDQ4QERITFBUWGBobHB0fICEjJCUmKSstMzU3OTs8P0BCRkdISk5PUlVWV1laW1xfYGJmbG5vcXV2eHt8fH2AgYKEhIaIiYyNjpCSk5SWl5mZmpucnp+goaKkp6iqq66vs7S1tra3uLq7vL2+v8HDxcbJzM3Oz9DR0tTV19jZ29zd3uDi4+Xm5ufp6uvr7O7v8fLz8/T09fb3+Pn5+vv7/P3+pK9UKQAAAoNJREFUeNrt1utXTFEYx/HfyIyaSqSbRlNpIsklhCiUa8n9FlEk1xAq1yKXhESpUJIQRTPfv9GLuVTUzJlWyyvPq+esZ33OPnufvZ+1ZXUEFybJQXBhmSrZYPirir3EIaOR54+E2mcGSdZ+4e3ioMhGJ9C/ZHKyK9cX67xiiJ8eEzlazT05wSKPeET7Y64OuE1qgP8y4hH2Rioy3WZCkmH1RZhkG6bdrkYqlDlAR6hMo1Xrpkmmn/vaLjVSIWV2LTa4YmHyEIUF8yvdRNNFLDabxTAJt9m8aezqgw03/JJXdbtXzPY+hOScawMYCPFDkgFczaeyJEkVAHRXb7P6IXHFtX0AFEiKdUFbQVLgucxI2/MBeiQlAvQXhgQk4YdGgAFJpl7uD0NTegCS/QY+PuWeJNVwJ/UuOI9F+iHzq4Hzse85IEk7+TrTlN8DnWsmIyGF/dC6TCmwSpKywCFFVwI1CyYk6U0wtDdUyoMYSQofYbMkLW2Bb9vNkqRFRz7RUZIiSYosdcLdVEkqo9X9kkeckSRZigahOUOaU+05b0ctUk4n9OSbJEkPqHKTjIUmzxfY68BVnvQC+houPxyEuuQaoDLaUzenp0mSOT7ePDrR9d3wA8ojJCXchF/QkjlatsbH66/NH1XmgrPu3PQEvhdZAp+X6/R7d5vNxX4jR6yFS778OReNkHeU+PJqbhkb5YIvf2ZslCo6vI0l0clWI2Q5HPGsWD3DiYY6TC2cCJcUdw0OGWtK815Cb/3pe1/httlgH5t7xb3HnMdnGW99GaWf6dqXOn3d8j/5N2TLynERM4YkjS8dnuQ+lj2G7DB2hQtIzAl/RqgkxSRESVLEX1VNJX4DmRADv7Vqo6QAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAZVQTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHBwcGxsbGhoaFxcXHBwcGxsbGhoaGRkZGBgYGxsbHBwcGRkZGRkZGxsbGBgYHBwcGhoaGRkZGxsbGRkZGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoa3tD9qQAAAIZ0Uk5TAAECAwUGBwgJDQ4PEBEVFhcYGxwdISUmJykqLzc8PkJJSlBRVltdXl5gYWNlZmprbG5xcnZ3eHx9f4SFh4iJkJGUlZaXmJqbnJ6goKKjpKanqKmtrbGztbm8vb/Aw8TFxsrLzc7P0tbX2Nna3N3f4eLj5efp6uvu7/Hz9PX3+Pn6+/z8/f7+aEnfAAAB/ElEQVR42s2WaVfTQBRAp1AoYhVRRHEJirumtbhUcVesuNPihrhjRVRwX1CpYi33d3sySSbhMJ5mAni8X5I3yc3kvZeZE4GiIoxYgHgt41AyFzPy2BtfrI0YUAiJRpRDYnUoMhNzRIMcz0ux1Otww1yM0UdHrCimzMRYLKrYuF5La12xXd/wPUsnJi3LusszS1Hgm2VZqyIVp8i9IDjMVOSqxhYHuR8Eeb7UEdPX/UROMx4Mn1FBx0Gt2DTKc8/cBxv84ebXDHneJMe0Mx7CN5dPM77CHUwUYavvkdXnGJgH4GmnfP0S3J7nzSuOY8pvq6EfvmeXJXvewSM5d3vYk+LPML+hz72Uq0B1BjiXkvFVeDOq+DRnIbtc8B66+4cTzV5udMOyZrMq5nyOfIZud42crMHX97PwYLUcOAGvLg4EHFWblRBizQTk3Nbcgo89CbF2BN7KKqWG4UqDbkMOe+I4DK+U3chDOak1ldj0Unltv3jc4l3vg53CNwe0M+6oep7YT61D3VDmjvDMmW1aUXT6J2cZC244xaR3lrL0ORosq/9DbLFt+wkvbMVNpm3bXldX/Msut3fpRJHQEq04Rj8PUWjdrthkJHYFOQ/+M3FL2uGSFLPNUdkIm+UTClI0YhHEXQbkw6IJXQsQxx46fDAXgz6akM4oukVc/gDJXaMPEeEHHQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAArVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGhoaGRkZGRkZGRkZGxsbGxsbHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaefXWRQAAAOZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ2Nzg5Ojs8PUBBQkRFR0hJSktMTU9QUVJTVFZXXF1fYGFiY2RlZmdpamttbnB0dXZ3eHl6e3x9foCBgoSFhoeIiYqKi4yNjo+QkZGSk5SVl5iZmpubnJ2en6GhoqOlpqeoqqusra6vsLKztLW2t7i5uru8vb6+v8DExcfIycrMzc3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6urr7O3u7/Dx8vP09fb3+Pn6+/z9/v6gHUxNAAAEWElEQVR42pXW6UNUZRTH8d8MKjFkijoTblGampiaqUkupS1ILpVbaWqZK6YilJrZohmmWKhJuZRFmeZuhSWYW9mYikCJbLLEcqfv39GLO+PMMKvn1TnnPp97n3ufu0mhIr5Pr1jdaYzc3wT1Xzx8R8jyJmY0z74TtQluLh2buqoBFkWvsuFIoiT1PgOLo1UfwSGbmTuidpaNXiXZi2BJNCwdDtu8pb0IXoys+hsct/k27L9TY4/ItlJ3v39nhBHFNMvIbt06zNFIygYzJUkxw194fqhVkrSG4kjMAeMlWeeWAhTPskh6napIzA7jpbgv3TcXn8dK86JiaYo7AIXP2B2pZ+Gb2GhYF5gQ9z3ktJOk2O2QH7uAykgsxiB9P2yxmKV1G+R/wh8RF+AM5ZBj9ZTWXKhjV0S2FNhq9dbWXGBSRNbhHxof8W1McPGzJSLT441UDPaWaU383TOykp72deObuJEcjTKde56p0alus9blHb1Y4sK46nRevlz2H0aJ88TuDbO7hTadF/9EyDi1pFNQFLewCjDOHchdnZWV+1Zm5sqVGRnvZq9YkZmTX2gAlfPvClSjr0HLvhmO4BNxTPvKgKsprfuzmmHfQz6NhGEJ7R/r4tNI/hoap/ur96FszO3KNiX3gouUZHDmzbj7dvvJcljlqxbCr909Rc+1lQCkJANwa3OSZ0vSGZjrVc8aHIt35zHz6oHCXSbbUwA0LPNci/YFtDzhUd1ruHKvO7/vR2jIGax+Jhuu/u/Vw1nPAbuWUOm5ap/y7yB32q8YDiZJXib12AM3RrgHDGtmvfsSGaxxNweV02J+mnyYNL2JuiHuIRtp6iVJ2kul+wZI+IvGCQpkGlXDdfftlVjLNkm6p5Gl7j3txZWqYEzjWjjpfnZXcytW0mToYzam+ixLK6ZX4WUzexSekrSDC2bdxklB21DMcoJy81Qs18iW9CfvmFumwViFYhps8JqZbeEXSQ2ehT/NSYVm+o5zZpJOmZQAE82VhCnh2EQYZi4HrrbqB3MkSS/hSgzH2tUzT5KUCV1lv0ZzmiRt55QC2MZF3iglT5LmwOl46cEyGsdKOsKOQOYflyRNdXHeIUnJN6kfKZ1nrQ8bByl9b7SKEqsmGzi7mkOGVFP3iipY4FVDq6nvpYBos7yF4tuPX8otKKzlYz81RlPT/WLzD0VXoKSvdy8DLgIc81cZwd57J3r4Hr3t9PwGfmutakp9w6B2R2rAR2Q51TH+qiDBb0ApWYFnq1EwNJzqC2lBWGwtH4ZRWkddxyBM66nvHFrFV7EpmNIDBm+HVFoBA4MybceoCaUGNrM7uFKXMkKpDkVUJIZgei6Ush0L+y+6+omgynEEMhUuMsDZWo0ugQ1hlSXLBTsH+LaS81wYb0T6Mxl5CTg4s7dZJc3+1gXXRyli2DKrAcqLDh06WwFQtaxjZCWp/dxTLs+DYhyf3yEqJEnqlJb+wc7P1i2Y1Dn49v8BUIfpizuTif0AAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAAuhQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoa8hNQ3AAAAPd0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaHB0eHyAiIyUmJygpKissLS4vMTIzNDU2Nzg5Ojs8PT4/QEFCREZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV9hYmNkZWdpamtsbW5yc3V2d3h5ent8fX5/gYSFhoeIiYqKi4yNjo+QkZGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i4ubq7vL2+v8DBwsPExcbHyMnKy8zMzc3Oz9DR0tPU1NXW19jZ2tvc3d7f4OLj5OXm5ufo6erq6+zt7u/w8fLz9PX29/j5+vv8/f3+/vwH9BgAAATrSURBVEjHpVZ7UFRVGP+duwvrZQVCZeUlqPlEfEw5+QgqozJTEx0bzJpMRxudTJ2mJk3/k0zTBh+oNb4gQHECDS0UsVFSBx9TNI6jaKnxRoFdwJUfEyu3Py4Ly+XCXqdvZ+fe33fu73uc75zzHRN6EuvgZ5qf4CnlxewGsu5AzFORxBdUpXHx07C2keVrXp2xrp5caZy1lTwRAgDPXiE/Mcr6hvzJT323FZGrjLG2kLl+bhRslLfak6XyFnhnjXIy3+qpCP6TNcFeadtZO6SrZpLTQJj3uE2ryuUprcqswX6huA4AMD03VLlb3AYAV98Y6o1mBeoASIu/DANQtukHBaiHv5Ym6VQAkNNSwgAg8rv9FkDp/o2kl5+cOR/FcyKj5t3AwlSLaql36U/OlnPIZF8AsOwmsywrWOWNZnJydTaZ3G5fSiGzdvK61wIUsYxM7ohd2kXW8qCRtcXtHhlLu0gmeKUF3KdjgqdiVjMLhfdFOcXBinGdcGYD/4kysgVed7BivBu81cDSaGP71IM3oweWJuqI+CHh4aH+YcJV6YKAPFB6UtNSVVn919nyHmn9F86b3GMI17Iz7Ho0ecn6IOBJSVlljQsR1S4oUBAg18AUGho5zgTYkw61dLP2UgnZlPm+Td+XbWGGk7zVLZhFjWTGqN4mKvow6Xivq24jee9lbzM8rYxc76n4mLw4yHtlBl8hl3bC6U6eshqpqP95Nr3iBoNqeHOgsZUQ/jcr3bO2g/axRvvDxEZ+1T5FTm4w3o22sGEoIIDURPtYu+4ngcstAgICEtSn+D075Lr/gZUAAhxco284sIBauQqs5wMLzIjvg1/0N+yPsbjTqkCBgjYoUDDS+gjI2xAQdxbYyz/0WfnU5nyOWwFRwq0wIxa5AA695rgjICCEO42oYdiUZHa1H94uAGgDACVvxWSYEYZKAGMHDBiu9ff1xqjDm09a0i8dT4hfUt+xYUoRDnOQHx4CaEJFIRQoaiqKAgU390w9Yjs4IWr2bMdmcT7xpvtUr0WIj9kGBAOoRtFSrbfE7y3/flY5H86s4KRh5xLPt3sLh7AhuISNM4FMpmtZQQ0sjwOO8RiQUMd7AgX8FlhCXrJKtbOqfDPi9bqKABTAJw6FgEWCS4ECgXdTcGveYwDR5ayLS2dGN96CBjZ++AI5VVpHVsUCZ5ic4OSNcHV4QjXrLjNT5+JVytq1rLc838Ti4QDyebGJtzta+6QakgU6JY+6ONc2dxmwLCcIAC6TvDuic3h0MXlBb6m4e7QJAPAbeSayy/AFHkVESsoQYGBSft66QGDivv1WYPTeotOfysCc9N3AaeZqjuM0HsEYciL63ybJazLeJvsh2k6SxwVWshQ4xR2a3q2of4EPIlvTshAzX0Wr5MadJ/FmLBS1HkITvAKh1i4G55ZjXPRIFY1H6lqfB/KIC73fFAR88Bh4BF83akZrKyStt84gJdW+4hFyR5MQni9dvXVRu1HHmus0qcmtXVuOKXHmGFSo6H7MrF8HB+ChV28/KyFn8vq25KsoBzEF+1BVqPUmab1d/qgJqFtUoqKjnzcDt95xdEuiXfYzB1K/IDMA3zGjTABMfjIA+I6MAAAhCeAE93TLzSSLFmHpA4Fy9FVPIVlAwA6b+1Ty1Sn3dLuRa3tvF0Pj9KmDoHj/tT24gf8j/wFtkTXADxi+NgAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico6 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa99eAlwAAAO90Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYqKywtLi8wMTIzNDU3ODo7PD9AQkNERUZHSElKS0xNTk9QUVJTVFVXWVpbXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqSmp6ipqqusra+wsbKztLi5uru8vb6/wMHCwsPDxMTFxcbGx8fIyMnKysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9fb3+Pn6+/v8/f7U/243AAAEC0lEQVR42q2WfUwbZRzHv1faCohACxtmRaEDJ25DQNRoFBx/TA3DQIKbMrJsi4uR6HyLiv7nNLLEJRjjNkxkyWQZuswQjZnRVIcvS1QW+aPwB87h7Chv0t4XSZpNurXm7vpyK3ftrvWXyz2/33PPfZ57nt/Lc1lIIfll+YEQMpKHh/ykp3dtBghrLxXxtqTPOEKOP/1AS4+P/vYMGB8WSFrtGP2Pp8Ww9JMHsxR9bZoUy0fkoayo5XRTTIPyLnnYHDedbvoajDIeJPvN6g7nOY5lG4Qc4+/2a3u2kAZdlDvPFxL7zvKgzmizdrfDijHFz3WOq5PjsvprZaUxSA4gSoiul6RAmdz3JQAiTwdi0u4Oy3fbyTflYKsY6DElW7z+QwG2oUYMb3Fu3DmFrgOmCNiAbCTvsp0mu+VJ8gfIXtM7/MkYpJTc/h35SsTM/ph87xg/NQbJOs/z5KsxW6LM8S2D6zlA8jWVnX2U5N0GIbdO01Ou7thJHjGcgC0i3c642SnyrM14Gm9TUzpEjpamU5W2inRHKvSTIkdvQZKQ0pLKhopVpSX5qxCcuyoAeUUILlz2zi6MDS9cJ8TR2bpeb87QmS9OBFJDCrv25gDL5/70iSHcPCunUbjoyiIsxcW3VQGY2/fZlVROmSRn+9oKdQJ5x3GSP9+eFCG8LFJ8vyzZkHuGyIubkwww95G/1aTyWpuX/t36j3vIT+ypfV/tptist7Edh3Hy2SAsBYLcL0CrDU0BJV+XBx4d14Tc6bK6mwNAzffJPsNbDaDKlee5/5JWZeu2ijsCci1NJj7pNrEHZbu0CnVjM96+KCl+4IMzcnhI17Xti03T8uBvPm/rPiGunOJbjloVbYa6mz/IQ4pS5efrK5dTUY/9y4oqolgP4sCSokwMYttKyCYEXbFlF+lBihBdw1dwrl8BeQSuxagDUKAHsUk7JsuPl7A5ESI04nS07x+oUsf6RGPcyMmN+S7gQk0ixH4DZuIQR/y9Zxab6mKGXXoYkXmUJUJWA3/HQ0G1sablYDwgC1WQGaxJhBQj/qYPqgTqc4yMxox8FaQcq7MSC+IFeu+N6K3kTTrVhoyW/DfIwRUHef0UPbWK2kCWa0M66I+8uJc8pfGncd80J+9QMpGs04Y8x0lF2U0OF2ok4C/b/7WfekzSFuXFa4ldCZPc/b2Y2LqokYD4YddR28DIyAVYgfZKVSExxQrKJmQ/D8u6h0rwR7tPVU/W9ceLzo1rzNd5sF1eCkXnEJbqzTnV6ZyO2apfWgvMYeA4E+rGhqIwQkBYvstXCILSzv+VUGfqWwXZFbXIQPbQA1MYmYogu1jIBBFO+gtqQKSN7WxKcs6kajdAkIPtqYy/JDirdTQYaMPE/yL/AQn/nlzVMLtOAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-l {
|
||||
background: url(@/assets/v3/bg5.EqAxWS0a.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWHx8fHBwcGxsbGhoaGRkZFxcXHR0dHBwcHBwcGhoaGRkZGBgYFxcXHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGBgYGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGhoaGRkZGxsbGhoaGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaYKSRzgAAAJB0Uk5TAAEDBAUHCAkMDQ4PEBETFBUWFxkbHB0eIiMkJSgpKiwuMTIzNDg5Ozw+P0FERkhJSktOT1FSU1RVVlhZWlxdXl9gYWJlZmtsbW93eHyBhIeIjpCRk5SVlpeZnZ6jp6mutrjCw8TFxsfIzNDR0dTV1tfY29vc3t7f4eLj5ufp6uvt7u/x8/T19vf4+fv7/P3+HFNa1wAAAi1JREFUSMft1vlbTFEcx/FPqQxG2m6MZQaNpGiUiazJVoRsyXIThWQZIaJl0rQwTNP7T/bD3CbPjOiebD/0+emc53tfz/O9555znyP9JLlWoEhmCdgxYOhKoXuacylJKrE61/gGzNxsrmnthmTYpT0MfVskSaFRpje6srnvGFnvjPfMcccVroZD6cltpvLd4IskPelJPexygzsZWJhY0OAG36VvYeKBYyv4z+BK27btQcbtdLqg17Zte82v8VEWy4Yl4Uc9b6Lve9J5GI0+7Xm5VPyj/sJ/Fa/aGd5sigPPgHvrjLBnCIAuI3yaueNFt6DcBF/llVQOIRPcSny7WmCrCbYm+ToKj3OMVrs+BkR8ht+5dIT7+cY7LMI1rWAX2NpU+G/OsxFe1g/QHPvOLpYC/T9ZGzLOXlVgnIll4/2WSdpTuMJosS58h/1hqaraKZwpkc47FzHvOck66RRqg9IRXyb2jyUaq6amU7qNSHEHvR5J8vbTbg3SkrqHxmPB5uSwLwsz+5k05iMLmBhpzEySLCz/BMTn224Dnsy3/Zx5K9UmYCyrbVXNwGyj80wHMFDi/BDeAu1OoXkOJoOZuHKKTxMkUnfM6zAEkUJJKh2ED3BZknQiyfgXYjsycNnr6Wr/WDQgSWpK9nra6M6TpIIHtHj7EwclScHYsC8Uf1GU2XbZbskfcLqr80gNealxwQHJu88pBH1STXHWO5tuklOVJun8DQfDHK8OGGfbN0W21rQF0iFVAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAMAAACvSe/GAAAAAXNSR0IArs4c6QAAAORQTFRFAAAAAAAAAAAAAAAAAAAAMzMzICAgGhoaFxcXFRUVFBQUHh4eHBwcHR0dGhoaGhoaGRkZGBgYHBwcHBwcGxsbGhoaGRkZGBgYGxsbGRkZGRkZGxsbGBgYGhoaGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGRkZGRkZGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaTYzvEwAAAEt0Uk5TAAECAwQFCAoLDA0REiMnKCkrLS4vMTM1OD0+QklPVGRtdnp7fH+DhImKi5CQlZydn6Cho6WnqaqusLK0t7e6vsHCy8/R3OLm6/D5JIZOigAAASJJREFUeNrt1VlPg0AUhuFDB9z3VlzQ1rpXxaVYtVqlo3X9/v//MQykAk0snKGpF76XkPMkc0IYIlXF5rVKUR/g9VUg4DIO0IgDu5S/nQCYcYI+ce7krBwBNvP0uC8Q2J7Pnx8HbMb+HooGFlqqAyLRGt7iILARLkYSWRn2tzkIrPiqUyLhD688gh1oA8sd1Qkb+FkiE1i6Ux2Nbwf/QIaByta6HuClvhFtoIvnavVCA3jtXyzjAh7RmQ3SW6LKBg5rYWfNq+ZlLZWTBNaix7048Gs3SeA4frEUA1CpnzCFKUqpjCRgpF9kzcvxt/qDwMS+FQL1Od78E9qWB2m4eGEJ5i3QvoZ0ATlNXOEN74CcYi4hEKAxHwka80Tmnt+YpJH0DZhq6TgD/Ay+AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAt9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGxsbGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaU0yUGgAAAPR0Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYoKissLS4vMDEyMzQ1Njc4Ojs8P0BCQ0RFRkdISUpLTE1OT1BRUlNUVVdZWltdXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqOkpqeoqaqrrK2vsLGys7S4ubq7vL2+v8DBwsLDw8TExcXGxsfHyMjJycrKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP19vf4+fr7+/z9/lcEE90AAARdSURBVHjarZdrTFtlGMf/pzcKQ6Bchs7q6NgG0zFgTGdMFMY08EHZmOhQYdGImWZL8BLjNRpNRoKJUwwmG5sBs1Uy1DgZH3TZhjo+zIVEQz906ibhMu500P7rCMXWD6eXQ3vOaSs+H/o+z/ue8zvvcznPe6pFFEnJSXF7sSKp7HaSYy3rZJZ0MSIMLRRlsip8Sd86N7orJsYX5O8vPlDVPE/nE2GMdpKu2tgYx1MBoPgKnXsjGLFQ9B3kEa2or1tO0beT58hwtAyjnTyqDVgWO13BG4R2sm0vudFO52OqkI/INkkCLHbOlwaMF9imqyETLPbhAjXGg2THsiRaBnnFGDAqdKghE2BRZaCTf6Uvn3mUlKaohkwI6Bp5RlIFWh3Lp85cRbnCExXq7nYDBsQ8l5iXrtoAAJfWb4gPkgTMAjAcfDUVwLV3vwPgQLICRMEdHwDA9O0HqQCQa23WqAVQeVGA6UwpLlSa8+pGcOCwxg+ObycaU3cRmnb3zV0/vb0bDR9rtCoYWTGT9T+Tr/tNo5X8tJNfK6RYQbRDHCLfCNpGKznLQ/FBcJjkmxLbeJLkvfEVGz75G85Oib1wAfjmcryNscpFuyVk7nPxNxPidAd4Ukqpc9FmRvwQ1Lpo93fop1203bF8taSpSRcqKTlZX5a72nxrShY8E/8IQHIGPNMLI+NTtnPT8nUZ+fLtq75LaXfei6e/dEeHpB1sTAQW/7g27fDitjHAB/gyluagz8zamA9g4r1TS9GSMkzOHNuTplDIz5wi2Z+vihBec9H12Vq1S7Z3k+MVKhfojpEDRdGytmeSzgbl5Wbyq/Toud9ip+sRpcDWHUHXfg/0qQIgAALkRu8IkH0+x/2QTRZS2GsYeNgNFPWpbWM0H8Cm3uShbTflmtJbBketG4BD1ZcZALA/i7XPye2krAeNnwPAqkm0XIRPrJCw8ZXyHvEQP1E9XyDztJ9oM4jaNBWD38WjorLJybcj3cktwaFFUXUgU7FtYl5U7FbURkJ2wvN90O0MJUhGMGI9sNwdAanE2Tm/OoI0JYgJs37tx5uoCIcIpTgfmJuXQgxPlYWMxCTc8KvusygKh6Qn4Hpgbg6SJnbgRvnWoJEOBLaLCeSEQ7KBqVApSAKrWfRoJN4EAguMYU04JAuhO2cgeYFazb/0B41UBN1BDlZrwxviKCfv8+vV5C0K3YYMtPx3yK6I8+aeCY4Vi2opmSMPqaPTf+NL5A8yXxr3T3FY7K2F5FZ5SCOHRaWB7JOtgx2zHNkFAHeSO+Qh7/NXAEj6kOyXBF/ypdRbf8JkvXxpEAbg8Q2SRqIJNpRyGF+GPq8sG39WzUje4ryOUNNZtSbWvw4LTm/gGYJziy6xAP9BjMaQrofOB5x0hPWNzZk+eAGv+At44YUgjpODYX1m224BKCSLsQLZzzFofFipCNAoHuoxik/1EzQO0fmA+p0q50y0cTME6AA8v+KdeMbljoY4Rp8D/4v8C2Rr2YaJzeY6AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-l {
|
||||
background: url(@/assets/v3/bg6.hlVmcDno.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAMAAADhcastAAAAAXNSR0IArs4c6QAAAtNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHh4eGxsbGhoaGBgYFxcXFhYWFRUVFBQUHR0dHBwcGhoaEhISGRkZGRkZGBgYFxcXHh4eFxcXHR0dHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGBgYHBwcGBgYGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGBgYGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGRkZGxsbGBgYGhoaGRkZGxsbGRkZGxsbGhoaGBgYGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGhoaGBgYGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbHBwcGhoaGRkZHBwcGhoaGxsbGhoaGhoaGxsbGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaHBwcGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaHBwcGxsbGRkZGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGRkZGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbHBwcGhoaGhoaGxsbGhoaGxsbGhoaGxsbGxsbGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGRkZGhoavoj1/gAAAPB0Uk5TAAECAwQFBwgJCgsMDQ4PERMUFRYXGBkaGx0dHh8gISIiIyUmKCkqKywtLjAxMzU2Njg5Ojs8P0BBQkNERUZHSElKTE1OUFFVV1hZWltcXV1eX2FjZWZnaGlqa3BxcnN0dHV3eXp7fH1+gIOEhYeIiYqLjY+QkZOUlZaam5yeoKGhoqOkpaWmpqenqqytrrCxsbKztLW1t7i5uru7vb6/v7/BwsLDxMXFx8nKzM3O0NHR0tPU1NXW1tbX2NnZ2tvc3d7f4OHh4+Pk5eXm5ufo6err7O3u7u/w8PHx8vLz9PX29/f4+Pn6+vv7/Pz9/f7+0IfVbQAAA+dJREFUeNqd1vt/W3Mcx/FPLWJh7S6oDd1GU9cwVlUUXeuyGcNqdZvbMJvLrJShC5u6TNvJ5s4uGGHMjKkapi6rYG4TMdpVl8qWNssie/0JHueW5iRNT+PzSx7fT87zkXPO953POSJ6HX1SchVKVrWS5IrPzfn/GJoOzAqv7DvrU73wYUH6QUP6gXmXNXV105jU2b8O/KWpxz0Y+6z2jJTe8F/UE33T1Lw2QuT2QlNtUg+7I7EeL7kez3rYtAx4x+PxzE7cqFI/abW9oT1p9ZuMVD46RBboneXDDF0QTLVd+VKdintoE5HnIPr6Rmg5ytCn3VfaVy9A8HCR82G+1nBruAVWiMiCOPfYHoDtZf3c09w47fkixRHip2ud2Rq+6h9VHxrnSpEZYaIz03HOj7hVyyLpwwVwk1PRxy2EI0WkZBt89WR9arUSurUsBt/U19dPM3Ah3C2KBvZVKt0xzVjU/SYsTj/09hK+5ArPK8eM8we8yeX7e+un7RADtnm93mAqluE3TB7mChAHIhVyQPLlbtB+rm7IhBvPUdbNaVitMuATiFWk2N/98H4iPRnwdDhRSUuy3gCd+fs9y0digR/nW1GzFikyWi8pVmQWFFjgR/W0wIt6Z6JmiyPExlrgUUFNf8xSvXM8XKplo9bqtNX9XiElUG102nh6qGIfE0usauWvWKWvHd9DqNtkM2Nx7kSJQ7hS5OqaSSNWa3ucbAfAMuph9wUTA4Qr1wP/wsJT5jwzRQaJ1XIF2Ad7lNmQPoKtsLj2Qufokzuokezxu9r+NvJF9vhyPRs97Mwez4QiLRvXZ4+dcLFqX5XssSPIrpd3g7rf2eDy8qEOPRvPK/stY6ceMlj8GoQCsHTOWz9fo+z33i3wR8XgsD5z3Ho2XN3q0jRbMmJlbpx9L5xlNFppqaoz60xYnTliC2hfi8hhMEOdDrFJVvhmPRshvMbdg9XabPk1zwIv5y9t5jDN2LMt2mxZrIzGgfF1REeKeW5os0VqaLdZ4GNh7VzzzFH1msVdvD3QNR/hEEd/c8N4ju2pFBnt6B8/we5VX8I6byRyV2rQW2hr2EFv0+dsPVdEfqDT5/P52hPYeB7lSO7BaWG2jRFx7Uik5ae+14pCmKfYjts202OXjPUI4cYGVX/NujvVukV5M7hQy0YxlGfGG2nS0lLRnIiQgpdp2SiJMy+jzYU1Wlo6NptwiEC+SHUUaqdnqioffCAiD8GfJgzviRTHrF4m1LScmXitSOD4rIsi1hZWTV1rwmK3j4uq3zxlH7hO2KUetsRutyXfjSlvRIi7xaqc30Hr/BFp/bzzJlhakYMmF5nW/wHDiRiDSjYLFgAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAMAAACsn+1dAAAAAXNSR0IArs4c6QAAAotQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOCgURgAAANh0Uk5TAAECAwQFBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYoKSorLC0uLzAxMjM0NTY4OTo7PD1AQUJDREVGR0hJS0xNTk9RUlNVVldZWltcXl9gYWJlZ2hpamtsb3Bxc3V2d3h5ent9fn+AgoSGh4iJiouMjY6PkJGSk5SVlpeam5yfoKGjpKepqqutrq+wsbKztLW2t7i5vL2+v8DBwsPFxsfKy8zNzs/Q0dLT1NXW19ja293e3+Dh4uTl5+jp6uvt7u/w8PHy8/T19vf4+fr7/P3+fNOr7AAAA5JJREFUeAHVwYlb0wUAx+Ev2zhcQZgZTIEyCo9MsYgE80wEs8ikpDKPMqjMzDCLLgU0ZKWUmlGmIRSm0qGWRyqp6SRImMixz5/Tw/ihO20bTz1P76sbi0nPsCpyqduc0LMnUxEqbsetZ41JkZgLnesfnfvaH7BSEbjld46nS9KIfVzJUPhepvdBuY1qxa7w7aFJhs2cU/iOUSnDMlwWhe0QtTKsoUvhq+FsjAY0cFDhmwVlciuCFxQBO66NVslc2sX3ZkUg8QR0HWi8DI6xioi10kW/XcmK1OS12z4rn67/J/P08h3f7Tc01VXOj1VYZh/Bx9lihWGVCy7W1VQP2nkGqLYoVMuh/RmzPD3SAlUK0T09HE2Rj4TdME+h+YSeTPkZeZGfFZJhTt5WAIthgkIxDTIVwE3dLFMoFoGrLxB4U6FYQlAbFIpxS4LK0X9utsORpKGYBzYNRR7YNBR5YNNQ5IFNQ5EHNoVs1Irq2g/mW+QhD2zyNG39VvuqsQokankn/Q5N0HUfwmO6LvkL+vW9FSM/UTvAdaKxDboKZBhWBfS+apJh4iVw7j/cCz9Z5et52HuHFLXQwYXb5JZ5DP50QmOa3KJ/oKvEIiXWwEb5SOqgPkr9JnVjlyRTaTfY40d/A21Pql8pFMqtAle2vC2FdA14F2eclFIPbQslmUquwscJko7ytQZYHVTIWxUtMsyDe1XYCg2pcsv8FU7nyNJHqQxf0Shvdg7I8ABkx52m+xWTDMOqYJ/iYbEMW2iWt3U4LRrwLKQq95f75SH/RJr0F+/L8CO75G0mPCc3y0GOSzLLi1nSds7fKrdcFyvkzdTA5amSFL0BFiqgKT3UxUvS3b9x5mb5GNNB36bCnGXN8KmCeANaXno4f50T1wz5md7CgG2JCiK6vA+39qcVQEJlG3DkCd1ATpMLrtSmKLDo9Mm36x8kTsyI078hbvyMOYMeSlNASVlzBs26L0Gepu504ulU2XD5iF15GE+99Qs0KHYLfloL5CXzFH72jpBbTCM4Xs+9K23Q+AW10FcsD7lOaHhqUtqgO7NePAknR6rfJvg8Sd7yz3E1S9fYLtCxNEperBUuvo2SNMXFbvkZ18V+XfMRFMhPORRJstM2Wv5KIFuG4T3UyF/cMZol0yXeUQDR7ZTJUARjFEAxpCgZtq4O5BTbZVhL5+pANsBMTSKoJhk2E9QiTTwf1JcyvHc+qMf/BiaidyHImEZ5AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABOCAMAAABG1vXNAAAAAXNSR0IArs4c6QAAAqZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGBgYGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaJuXLtAAAAOF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBobHB0eHyAiIyQlJigpKissLS4vMDEyMzQ2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlbXF1fYGNkZWZnaGlqbG1vcHN1dnd6e3x9f4CBgoOEhYeJiouMjY6PkJGTlJeYmZqcnZ+goaKkpaanqKipqqusrq+wsrO0tba3uLq7vL2+v8HCw8TFxsfJysvMzs/Q0tPV1tfY2drc3d7f4OHi4+Tl5ufo6err7O3u7/Dw8fHy8/T19vf4+fr7/P3+qN2dfQAABIBJREFUeNrdmPlfVFUYhy+LBIgigkKoWba4VCYpmGFmWCIKoWimpYaSkaQSFphGhVRuRRlRuFSYEBahljmhFqAi+xYEM8oyM89/0mdmmOGcOyvzY9+f3uU+nzvnvOe859xRFO8UF+8lOOGQ8cZ4r8ikBmhd4AUYWQwcm+zNOy9D3XPeDXSl/mCwl3Ok3O/RU+FLVo9qLMObftKAoMWek2v7wTt0Vj+6vbFRkTaN8xj9ib5HHCYmuiOjIdNhYlHv676u0aXwuMPE71A9xyWaCNEOE7N/haGce7xBFd+MPqixe/HCLKuOQq7Nmakq+GnaI9RoFg6VoH5ufapijxq7LfpXq+2xWL0OUAfKotsuNvP/jo4LmzEt1G+saFjKR+W3zTUx1H6fuzzIY1T3o0Gu6d0zHqH+J81Pd5TmbVm7YmXa9g/KdOZAtvu+8BdQmx/vNxoKWn2kHfglziU4rQo4b/+Mb+p1oMjFSbGoGf5McjyO9Gb4Y4YzctMA+kw/Z9nxhdDqpK+9Dd0uj4Mdwwyuc5R4Ba495HoOl3Vyd6F9OG6Qmknu5v/hbprsGsf0Frpmua96gp7fguSQzwWGn/WkNb8Bn8qRjbBTjgStyS8+d+LgqkAVexTDXNEPqOeyjxgIO6AbWb/9eaESOrmb71Q/Q1reCZ1AQ/nX5Y1A21J12xMCEzs4J2a36jEcn282Y4qMDG+SRtLAhVHvNVggT2NTrM17uo0h6Yr0Kjxpc6rQiOPspFlcrA+00zJB8EMGOGS174V3hNR7GGKl0T0DOaJ/hhar+TLEjCYCtXymKkgJ3eKhvBWsx81hbguVSZIHbtJTsFxwIw1kjJgXpdccoNFup3ewT/Q1thXVy24hXkrXWbMSFUVJsZg9FMkDqBxZH5AmxM9b+2C6Za1YVCaiedx02Nq/orPELNO2T7SYPRwW0V3WLj8PxGJk0+ajHmsvb4r+dvQWYy6IPTBRWqNmvQDLpE7DsMW4D1YIcb8milXoKep95B3QZTEmwQYx8S7IDTUNqQSKsp/6EauLvWIi5G8GfhiduLSyAWrkpvItFSNWNV/InVwPBTbvBAyqbl5XKRyxPqZFvrelgDFFUSKiw8xbzJioOl4sNTdpvTzFiqLoaQ0y3S6/VJQputF9YptgrA17qpH9cnLYvAvNqHKEBhV6VohUcF2N7rCh+9Ro6BDvi2fGYs/RDPHCGtxElQpt1Gg0Wv7RaDRtKjSk1bpvzNoGyTIqSkZzQDyy/K9xVTxYPywQJW3zKC0l6kru8eTIUXy+YfhBOVSBcY0naDbkq0JTb9I/zz2ZaqTS7ovlMS31Ue7IGC11EfbhF43cmu+aTNY6+Wk7DejWuSL3GNE+7ziV1IcxN9AZGFEMNx51lp1TB7c2O/xwCn6rF36e4vwnhZ8Grqyyu3YFbWkEfUGAy5lYdsl0LT2WLHxQh28uNd0OTs12u1w21JrW7Z3KT3Zte2lj+u7jF/Umv3qJJwvGP7H4jnyV7iiMUzxVQHx2yZU+I+i7Ln2e+YSvMlb5hHj9F4Jb/Qfbt6tIIlhQ6gAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 39px;
|
||||
width: 29px
|
||||
}
|
||||
|
||||
</style>
|
||||
66
src/views/Jyh/ProductServices/ModTotal.vue
Normal file
66
src/views/Jyh/ProductServices/ModTotal.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="mod-total"><h5>实验室已为超过 4000
|
||||
家客户提供卓越的安全服务</h5><h6>即刻行动，与实验室安全专家一同开启智能安全之旅！</h6><a href="javascript:;" class="EASE btn">申请试用</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModTotal"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-total {
|
||||
background-image: url(@/assets/v3/num-bg-wave.png);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 270px;
|
||||
padding: 67px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total h5 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
.mod-total h5,.mod-total h6 {
|
||||
color: #1a1a1a;
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.mod-total h6 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 29px
|
||||
}
|
||||
|
||||
.mod-total .btn {
|
||||
background: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 34px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 32px;
|
||||
margin: 0 30px;
|
||||
padding: 0 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total .btn:hover {
|
||||
background-color: #7aba4a;
|
||||
border-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
</style>
|
||||
102
src/views/Jyh/ProductServices/ProductServices1/ModBanner.vue
Normal file
102
src/views/Jyh/ProductServices/ProductServices1/ModBanner.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="banner-container">
|
||||
<div class="txt-content wow fadejinzhiInUp">
|
||||
<h1 class="zh-title">可信开源态势感知平台 (源感)</h1>
|
||||
<p class="en-desc">
|
||||
全网态势，一屏尽览
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="action-btn">
|
||||
了解研究方向
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mod-banner {
|
||||
/* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
|
||||
background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 520px; /* 增加高度以匹配大屏视觉 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中内容 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 增加一个深色遮罩，确保文字更清晰（可选） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zh-title {
|
||||
font-size: 48px; /* 增大字号 */
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.en-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
background-color: #C8161D;
|
||||
color: #ffffff;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #A01218;
|
||||
box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.mod-banner { height: 400px; }
|
||||
.zh-title { font-size: 32px; }
|
||||
.en-desc { font-size: 14px; }
|
||||
.banner-container { padding: 0 20px; }
|
||||
}
|
||||
</style>
|
||||
519
src/views/Jyh/ProductServices/ProductServices1/ModTabs.vue
Normal file
519
src/views/Jyh/ProductServices/ProductServices1/ModTabs.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<div class="mod-tabs">
|
||||
<ul class="tab-hd wow animated" style="visibility: visible">
|
||||
<li v-for="(tab, index) in tabs" :key="index" :class="{ on: activeTab === index }" @click="setActiveTab(index)">
|
||||
{{ tab.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 数据标签服务标签页 -->
|
||||
<div class="tab-con con1 wow animated" v-show="activeTab === 0" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">数据标签</h4>
|
||||
<div class="l-desc">
|
||||
基于<strong>机器学习与知识图谱</strong>技术，融合行业属性、技术领域、开源贡献、组件画像四大标签体系，可智能化为全量开源项目提供精准分类与多维度评分。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>多维标签体系</h6>
|
||||
<p>
|
||||
自动为开源项目提供行业属性、技术领域、开源贡献、组件画像四大类标签体系，覆盖金融、能源、政务等12大行业分类，支持AI框架、云原生、大数据等技术栈分类。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能画像分析</h6>
|
||||
<p>
|
||||
支持公司、地区维度的人才画像和贡献统计，提供组件维护活跃度、许可证合规性、开发者信誉度、供应链健康度等多维度评分。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>精准标签定位</h6>
|
||||
<p>
|
||||
无需人工标注，在全量开源项目中快速定位目标组件，可根据行业属性和技术栈自动分类，标签准确率达 90% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 风险感知标签页 -->
|
||||
<div class="tab-con con2 wow animated" v-show="activeTab === 1" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">风险感知</h4>
|
||||
<div class="l-desc">
|
||||
基于<strong>3D可视化与实时监控</strong>技术，通过全网态势大屏、实时情报推送、攻击面管理等功能，可全方位感知全球开源安全风险态势。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>全网态势监控</h6>
|
||||
<p>
|
||||
基于3D地球与热力图技术，实时可视化展示全球开源漏洞、投毒攻击的爆发点及受影响行业分布，提供全方位的安全态势。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能预警推送</h6>
|
||||
<p>
|
||||
支持通过 Webhook、邮件、短信等多渠道，按需推送用户关注组件的风险动态，基于 SBOM 清单自动映射威胁并生成受影响资产清单。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>实时风险感知</h6>
|
||||
<p>无需手动排查，在安全事件发生时，可快速定位受影响资产并推送预警信息，响应速度提升 80% 以上。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据定制服务标签页 -->
|
||||
<div class="tab-con con3 wow animated" v-show="activeTab === 2" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">数据定制</h4>
|
||||
<div class="l-desc">
|
||||
基于<strong>灵活订阅与API对接</strong>机制，提供情报订阅中心、深度分析报告、API数据对接等服务，可满足企业个性化威胁情报需求。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>情报订阅中心</h6>
|
||||
<p>
|
||||
支持按 CVE 编号、组件 PURL、厂商名称等维度订阅专属情报流，提供包含漏洞原理、PoC 验证代码、补丁对比的深度分析报告。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>API数据对接</h6>
|
||||
<p>提供 RESTful API 接口，支持企业将漏洞库、投毒库数据集成至自研的 DevOps 或安全平台，实现无缝数据对接。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>灵活数据集成</h6>
|
||||
<p>
|
||||
无需重复开发，在现有安全平台基础上快速集成威胁情报，可通过API实现自动化数据同步，集成效率提升70% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 安全预警与应急响应标签页 -->
|
||||
<div class="tab-con con4 wow animated" v-show="activeTab === 3" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">安全预警与应急响应</h4>
|
||||
<div class="l-desc">
|
||||
基于<strong>智能分级与协同指挥</strong>机制，提供智能分级预警、应急处置指引、行业协同指挥等功能，可快速响应安全事件并形成闭环管理。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能分级预警</h6>
|
||||
<p>
|
||||
结合漏洞危害程度与资产重要性，自动生成红、橙、黄、蓝四级预警信号，提供"临时止血"（WAF规则）与"根源修复"（版本升级）双重应对方案。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>协同应急指挥</h6>
|
||||
<p>支持监管机构一键下发排查指令，并接收企业端的处置反馈，形成闭环管理，实现行业级协同应急响应。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>高效应急响应</h6>
|
||||
<p>
|
||||
无需人工研判，在安全事件发生后自动分级预警并提供处置方案，可协助监管机构统一指挥，应急响应时间缩短 60% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defaultTab: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const tabs = ref([{ title: '数据标签' }, { title: '风险感知' }, { title: '数据定制' }, { title: '安全预警与应急响应' }]);
|
||||
|
||||
const activeTab = ref(props.defaultTab);
|
||||
|
||||
const setActiveTab = (index) => {
|
||||
activeTab.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.defaultTab,
|
||||
(newVal) => {
|
||||
activeTab.value = newVal;
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值生效
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate .mod-tabs {
|
||||
margin: 0 auto;
|
||||
max-width: 1360px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 40px 0 20px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
-webkit-transition: all 0.4s ease-out;
|
||||
transition: all 0.4s ease-out;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li:after {
|
||||
background: #4bad52;
|
||||
bottom: -5px;
|
||||
content: '';
|
||||
display: none;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on,
|
||||
.pg-evaluate .mod-tabs .tab-hd li:hover {
|
||||
color: #4bad52;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd.EN li {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50, 50, 50, 0.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l {
|
||||
position: relative;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 584px;
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt {
|
||||
color: #fff;
|
||||
left: 57px;
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 169px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-tit {
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-desc {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: 26px 0 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 50px 0 0 83px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .item-list {
|
||||
padding-right: 78px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-tit {
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item {
|
||||
margin: 0 0 40px;
|
||||
padding: 0 0 0 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item .ICO {
|
||||
background-size: 100% auto;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-con h6 {
|
||||
color: #4bad52;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-l {
|
||||
background: url(@/assets/v3/bg1.B9IGVx_y.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAAXNSR0IArs4c6QAAAtZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcFhYWGxsbGxsbGhoaGhoaHx8fGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGRkZGhoaGhoaGQes7QAAAPF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKistLi8vMDEyMjQ1Njg5Ojs8Pj9AQUJDREVGSUpLTE1OT1BSU1RVVldZWltdXl9gYWJjZGZnaWprbG5vcHFyc3R2d3h5ent9fn+AgIGDhIWFhoeIiYuMjY6PkJKVlpeYmZucnZ6foKGjpKWlpqeoqaqrrK2trq+wsbKztba3uLu8vb6/wMLDxMXGx8jJysvMzc7P0NHS09TV1tjZ2tzd3t7f4OHi4uPk5ebn6Onq6uvs7e7v7/Dx8vP09fb3+Pn6+/v8/f3+/jZlGfIAAARzSURBVBgZtcGJf84FAMfx77PjGRs2c2QUm6VoylFyLMdmmKOkiGooUY4cqSgVy1JKIoq2pMOoxCK1ImfMNCamaZjYxR5b6/n8B/1+z+/Zs2fHq9dGvd/6v4XqxgRltNcNeZUNuhGdSiFWN+BL4LC/rttI2A4zdb0aZZEZsI2CMDVMt66yPA/DFFXGGrn1i1A9tCq9cqtM4SWkSloK0XIZSrbqodlVFsn0GVcjJTXLZZ+vTKlkqD5SOOkjKQ4WyjQepsjQuozn9C8e6ipLPAyS7EfIDpTJ9h35LSU9jTNcloGxqmUwRbfIxe8sc6Vn4QFZelSwQtJ60mQZ4Kxoq5rCS0mWJW5tB7Ur5GtVegtnL6n3+i5y8T1Ijl21vAYD5bEORxdVCj1Puk0eU2GcamuSwwFV6g9LVGUSJKhS8EV2qC4PU2KXxfcAvw+Ztymj4BqUF/361ctHyQuRWxRl3eQlwC63+L5yS4Rr1LA/1ibL8D5yC7JJjU+f7aNqWk8/gsWZs+uT5G+Pl2M5sSBc1YwrTpOCCykapCo9NjqAv3OgaGELuQRNPQd/ngWc38SoyqQKDkmKKeJKvNw6pzjBuXVsIvzcXh4hWyA5fqMD2NZHbtPh1O0y9L2Eo6tMHVaVQ/6CcI2EbYHy4rMaZqrVMyeB1DtlGgOZ4XLpcY5hknxnFEPhwmDJfoxjoarGvoOC1lLAtLNQviRQ0hx+CZNb816Suu+Bq0tbyTAFhshyc6Qsnct4Q4aguRchK1byiW4kb9NKIe02uXzPDrmMz4H82b4yrSTPR6abksG5xF/VhG6CSxNtcmnj5AmZXsIlRaYYiJYl/hSkR8jLHZnwQ4TchkO4DD3L+XHYoFQYLYNfMdPlFvoFnB8gjwGXYYm/Kk2m3EeGF7jQXPI7xIcyZZAoj2kOHI/ILawYElVlHnkyJbNVhuXslWkn76vKZHDeK7exDhxT5PEkDpsMr3CmkaR0Nsh0mCR5jLoM8+Qx4DxsDJHbKAiToT9siopcDhNl8ClgltwClsGVcfLScTeciJUlAibItBKXNJsMfSBOlu574XgvVWNPAj5oIZf9bJbJb74DnG83kSmJy3aZGi8ug4+DVdPQU1AyO0CGOdBbLkHRMSFyaVfCezL4jP0NLiaoDk13A9kJflKTXPY0VjW2zymNkDTyILAhTHXpVMofwNHHgpQAH/nI2yJYLP/70zHFqE5bKG4/OB0oeLfvStjcTB7+78C2u17PA44+eorD/qrDCJgnadQeDBlZcDrBV5YRhyF3H4bMBD+NgRmqrVEWmQEydV92AUvJT2sWvbhq52Usxav722TYTkEb1TIf4uVmfzDlDDXkp05sKktUGWtUU4cSUuWt44QVhy7+hcFZkLF2cpRNVZKgn2r4lKuRqs3e9e5A1dIsl72+qiYOFqr+JsAUefM/Qnag6s+2i/yW8jILRqshelawQlXaFrJVDbOcinvksQ5HFzVM6HnSbXK7D06+2VAH4XFZfA9wffJC5DJi//V6Sv+BfwBIbvfBNZtweQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA6CAMAAADMWVqUAAAAAXNSR0IArs4c6QAAAkNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUICAgHh4eHBwcGhoaGBgYFxcXFRUVHx8fHR0dHBwcGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYFxcXHBwcHBwcGxsbGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZHBwcGxsbGhoaGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGxsbGhoaGhoaHR0dGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaZrZiaQAAAMB0Uk5TAAECAwQFBgcICQoMDRAREhQVFhgZGhsdHh8gISIjJCUmJygpKywtLi8zNDU2Nzg6Oz09Pj9AQUJDRUZHSEpMTU9QUVJTVFRVVldYWVpaXF1eX2BhYmJjZGRlZ2lqa21vcHJzdXd3ent8fn+AgYKCg4WJi42Oj5GSlZiZm5yfoaSnqKmqq6yvsbK0tba3uLq7vsDBwsPGyMvN0dLT1djZ3N3e3+Di4+Tl5+jq6+zt7vDx8vLz9PX29vf4+fr7/P3+nMc1QAAAAuJJREFUSMfVlulfTFEYx2fmtk1laDGtWqzTKksJES0itEipLJGxJEsoJEsSIilZsoUWoqQyg8bcaX5/mnvvuTPN5864nUkv+L2Z5znnfufznPM8zzlH4RtHIbVCqjhQaMUcYgXyERb/AYtTyCrpX8PW5ola4xbWZdu7R3OK+YcvdIX5aUT5TY95abWexIpttsD6bDPdltgV+0UIZKrSLUzZix8nUoreg42gxXQl+uONQD5nBhtwiQ7b1kv2aZLhvWZ00GCqRh4ZHzHgp4C1opsGuwAMFYZypQDs49xoI2oosHgrHmsE6zks9ZlVQ5hcRIG1YjyEWDH9JAFZFAnwMKLeZgdfHQU6UmjSHQrsmvY85zN0jaMDklwMz4TFA/E0mEdguKNbBIRNe2ptgEtMrf8M9J1k7ANNGLU7UTdYWLs3OmNMGymju97iQAKLJjs1LMxZypywGuDeps33gSPET+yDyR7zG0zWppYNgA2TYv1oU3It0o7h5IzSY1ceTAFnk0SVcicq94nWiAYJxiVJ6N2trg/nMWGVt/BQgi0AMvnfbNfYNxU/edupA5ghtHNTTCf6dKvzKuuaTcBlnahyoIT7JtKAWunaqrmay87pBI4Sf8lLWBNskz1gz2ccGIQpWop53yHhtCjFgUgjvxLxPwZJB+Q5p1ulfwsMHvKyD5wCq7HZ2utjQFeq65oM8lc6eGnAKodognzoSjkAyJlFB8wDts8CYyzQOxzsgRrK++0dWm1mxDUzLJ3pVFgDzDqR+iQkgC2iwcJMeEVup9cw1W3Y/wFm7iTLBXLlj9fDwNeDi5WKRKCYL/fvuKhQFJB2kNNpPjSTYQTjHrzbwtdNFpA109WR3kNKbkJFsCe0F1VUflV1HVDIr3UCZ9y6TV/AfG5dxQB+xbiFLfsohGrdSRKwJ1lWaeVbfMUz46YBeLre/ReeOsT/bx+GO5bLavf//DDcu1JWFXP7xJ4N5rOUQt5S6jcJyGZLl4Al1gAAAABJRU5ErkJggg==);
|
||||
height: 29px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAAXNSR0IArs4c6QAAAuVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaMeyWdgAAAPZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLjAxMjM0Njc5Ojs8PkBBQkNFRkdJSktMTU5PUFFSU1RVVldYWVpbXF5fYGJjZGVnaGlqa2xtbm9wcnR1dnd4ent9fn+BgoOEh4iJio6PkZKTlJaXl5iZmpubnJ2en6ChoqOkpqeoqaqrrK2trq+xsrO0tbe4ubq7u7y9vb6+wMHCwsPExcbHx8jIycnKy8zNzs/R0tLT09TV1tfY2drb3Nzd3t/f4OHi4+Tl5efo6err7Ozt7u7v7/Dx8vLz9PX29/j4+fr7/P3+/H7PQAAABYhJREFUWMPtmGlYVGUUxw+IoCC4YEkpqAQpuKJSKi5pWmq2uJVLruReiguWCFJomUvu1qSpDZJWkKWm5lJauWQa5IaCQpg6EwjT4Mz8Pvdh7r0wwzCD2dOHns6n/32fO7/nveec95zzjogHC4+JkPs2Hfr/AKTHis8Whd8nZIYNKImTBhGfsjey0d9itLnL+XXFWH7DbkV7UwYF3ytkCsXBMhAHs+wYEXAvjDo7KPaWaFg7NO5z9sYNSdh4A6AwocYfVmvUZeC9IQcxBWmO9em+8BxgmOxTI0b4YaAAgBmO0XksCzgeXQPG8wY4GOefVMSFMVVC/OQxMPbzhPBKBtMEEREJdJVs3qNKsc50z/B+F860d5uxHS/BR37uGCsho56HtG/yPUxyA1kE6XU8nZ3oIiwdq2c8C3pHRquX5+Vwec7YNhVLYbmYe1XPiDRwNqjSc8TiS1q6XkqLsi82/gnrc24ccoSySj6N2GAFLJdvYci1ANb1USJS7zCMc+OQF2GsEoCElBFjS6D07YENRIdeAgcsMYJpgvjuhFluGHVzOeolIiIzLQCUzmtcybGN5hnh/Q8gxV2KvAbdRUSkq42ik3CjtVN0Wh4CWOvlhuGTx1a7SuZKQ3mLcj/nEPt+Afra7jbSD3qov0oX6QvNnCHxsM99RfmQ88pGZ2FN6LyfAudkG2bjpPty0qCcBEUG/wnABCdIn3IuNnV/8vqAWifa2oDSKfZ9hU7NJX9GS5HYOxS08lAC5nJTdftirLEdfO3eTjQDUJ7U/gbFnTzVkZ18rCauFibx2Q7WnK+zLWDC3NNjPbupuaQDqKUrEbLCRSQsA2yDPTJqw0uKHI1NOYWhZrK87fXuENZIj5AQeEqRCzmnqKlYwxXZzKTt1HVx1+l0ugzI1NntAkWKyuWk9tYZ8pXV9F8+UZTu6CmdTqfTRYvEUL1t1iDfuHmrm0iEXq/X74EDertdwqiofE5U2kmBsnqLq4raC/v0er2+rfrN0EfUrM9XJwMsYWpxLmOuIrNZoKhe0KKyYwJgmCJHYVVOWYtyMpQM3IJVKY++JuKVN4eAY2e4rXm/HQzUAoW+mYg02QJLlbXeEKuNDibHGO3S0lRyWKVmzy4wnT/9axnsUbtAKvneitzAEUfI6+SpMomb9dUylGyvlNYlKiPgmrYnyWNhlZbzqCLb2zTXiUTOzqdgbpT2PKviayJhgCOkoZnZql5DaWg1HbCJsSJ3xmNznsC2cFqVLczs93MJqZ2JpbX6cIw9ztn/AnQR7dCw2iUkjYoj1LUiKzTzL2Sb9rAKVvlVgdROg01ax1jPNd8qB3EmDO75gF377YZ9TZ0gTTLhkH+lIXV+1dNc7wZgS61rHx9XQ8m8wEqQgFlG2OQvIj61RMTrSwwhVSEB14GKLjm9HAqX9PUTHXrx7Z16DSwJXtI85YLN+vOCB0fBRBd1ZSS2cY9swFZfmwoATDmF/J5tAtjcWqS/yX76bxs47O0CksQpkTbwuLbS6c0rWs3IXxorIn3N3N0U/8p2G1hdDkuTKYuSBK172mtr50mJF7m6ID7WW0SksZG8KBGRrkbyXM5+zYsxn4fr/tXPbK9CjF0NhOEui+0zRgAOhVQLySJLbU7ZldLRwULHJw57By60rQ6SQ6oqt5LppvhPs2EYXcs15ATLVJmudUyXNqgUfnzCJWSdlunBJt5w28hijgPpHVxAJsIce9SWay6udvKaXgwcmdTCARI27iBA8sMikWthjceuGjzfAJC9csbTXTL4qkv/acvPAPzxA9w9e84G23xrcOsJHLnb5tzp9o0JCtpovw6m+dXwFhcydNm3Jcrv73y3YvhDIiLSempqysSwe7qVejVtl8mBdqFe///h8I9Doru1lX/F/gIjzb047a6x0QAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAAAAXNSR0IArs4c6QAABsRJREFUeNrNWWlsFVUUHrayRgRt37vfmS6QlqIlIFSkkIKhwSJVUCRgWARSZTVGQRBBCCAoRUV2UIxFlIQlrLKLQhVFtEBAERQECRaBKmWrCKX1mntm5r3pvJnSVyhx7o/Ou9t377nfOee7U02rnKeKP9LXDNHJNbQ79aCOGCQ24R9ILv9iH00QsZUP+xxOm5D2ck282/CuSgPVa2O5AUTf02t4Eu38XTAcG3CNa4/o8ZUCm1yDchggV6SWbiEdH3HLX5UCjQ948g+TItxaaQCuq13fdoNTGsOuCNbENBAd/HGloCWkmHG797sXEqdQxwRpi4MmrfJpmFbFqBVLmGa3zvD4mlpVE7YVU2qgCTsEJaU4vcaARrSiGU2oCG9J9BMzsBFHUYAb7KWFOI1d2A+Jv/XaPH0i+/Dv1B9NRbrYyUsaZi5wAyT2hmfKpnoWzrt4aKCITWbPxZDiIulWBGPofLNtOCRKtOrlDH6iO/bYIE5iK2ZjjNgMiQs0UkzFClyFxHxz8kOQmBMcLjrzsvhk9Qzev16enXbliYzgJ3EC0YGW1yGRZ77/Boks8/0yJL1stxUDt+dFtFfv/vtvAipisd4EPUXz+W9X24R24F1BV8I3kFjpdKOYBvzeX73fxJfRCQUMVoDRcbWwVhnZcowQ4Dl8jtV48jfYOt3MlmjkQeKAuYiPIel42bAvoBgS1/G2Wqsvijk8sVQPO/AjfHZp6j2yHk4w9EqMwlxxERLFlGK4Hy5A0qwyoi4W8V7PUNtAzlFnE+cFnFwDZyFptXlEyQxtlatisDkik5eX4hkWsIMH7AuyD59CYr/DJjZgTcMktTNfI+NXZD0xFV/jEv2IbGpieQd+UCnEm1JLGHalFf443Sl3mVwWcKSfk192GVTtwezu63W2o9gcn9hpZCQAf+uygDWNZqk9I9Fj4qo4rLKTQcDQkJjBUXZPXK1SEBMhccU5xAnsi0IhJNZ57HcQb6in+24TcUlNFisc9dshsT2ktwNY0zCZjflo6MwxDfCnCj92O9pzag5z8MEQiEtOV3IH1mvjJCR+CZUC4PBD7ilR9OP1jnXWxwqu784/qjWurxMSRbL/YSyDxHk9gzpSCrXQExrX1zTxFPcd54BtxTGhmBOk80mK4AiTZ6Q2u5FoKE+2BftVFC6zFOJnzmBF9micFMFuVCDe4XnSnfsdzEOfNddYhzrSeGzlk6lI+SlIRTGVzdzfPIg9jtRHx43uOtFQmxy3SjF2IVu8ikzqpWeIDmhFTcRMSPxBup6gN9fbUEf0xmjMptXGYsX4QBRTwfYoWgaY3UJzeqqYgW020VKIL8QU9BZfQuIzFx8IIZdZ341HF/masZmtpCrpuD+LrkBigd3QS5UyCOTdXEz0t7Z0Ao4Ek3y5gFua8+zTqmOaobQ58qmtKYxCX12rb3VRbHY+glei4Yg41yHFi2EA3xuw2TrezHq+T/WgVWx0Bd/DMnQKm+I7QyWUfuLu9oo4XsCaphgiDpvg56J8gfpoTKciSJppGXqc0rvxNV2Dis5xuktYwMfUSeKMOjbnSKywZSilLijHI2nYFFO5gXMhsYjSUIK3XASGxA3zlDlvLHAH9rdmg7UMC/grzm8a9QwVsob0N6511bzow6buqDrqCWEBb4OkVR7z3ROgl8FCMxaHTtJVtUb6wwJeB0mbPfNyCSSLIV8j5u2b6ONa5rGpM0NbxBpWoG5jdjOr+3iUK2Ya0ZtXMB7fQuHLqp5w54ExzVAHij59fXXdCg1Urb6o0BahwuFptzF8CDvc5/PVVQKJRhqysxiShnqQ6wkDOCxybTQCpdsTX9NIkkbHc5A03kOkpYdK+ZsCK12+3MOdOBLqGUbHfZBY6gGcymS4Lyzgb70VtpGAzZyMueo+6GFqI9IkhwV80D2RataN47KpT6iXlzk1TY9nFnYKC/iUigseIVhZY0spHYk88UxpIc9psZYRQMIArsZkHeYqEZY5lCzLMFUuYAHaWd9ytAD1MKn8wCKGT/Exe12sEC/hgKXfotPtEfTpQINEPhZTL0uJcJLLDgOY6ag3N+wlUjEZe/kzhiqXMD0oDILn2Ua8xxdpq5zAUjGW9kCKnWEA9+Udj6RZ2M2fEU0lRzk0IKi2XBxcdMa8gOmDJQ876H0xBWPwPA0QPURn9VkJ+ZSGbugtBtEImiBmYC0OiRuOkVexgYbopJXv8ceJfmIhcvneVJFSjF+xFqOorftH1XI8UT6Rikxk0WocxCkUoMgFRn3hO4tj+FwspBH0OBIr5V8CSRF6QxHjT9Ifogf0+Eh/ZD2P6+f/8/kPaURwNOuwtMAAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHBwcGxsbFhYWFRUVGxsbGhoaFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGBgYGxsbGhoaGRkZGRkZHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoahQXVxQAAAKZ0Uk5TAAECAwQFBgcICQoLDA0ODxITFxgcHSEiIyUmJygqKywtLi8xMjQ1ODo8PUBDREVHSUpLTFBTVFVYXF1fYGFjZWZnaWxub3J1d3h9foCBiYqNjpGSlJeYmZqbnZ6foKKjpKWmqKqrrK2vsLG0tba3vL2+wMHDw8XGx8jMztLT1NXV1tfY2drc3t/h4uPk5eXm5ufo6err7fDx8fLz9PX29/j5+vz9/ud+XxgAAAIaSURBVHic7ZTpVxJRGIdHtJS0yELMNNtMaLPFLNuppKxIC8v2fU/KysJyKtvBpI3KqDAL5Pk7O3eGphEBGb54Ooffl+e+895nzl3mjCSly4yj3ba0zQxZMwiRFpNRbeYZIAq+amNeUwgCDTU+GGktzF6bdQXih8skyeQahr6F2Xobh+DVMnVceRui7qnZaNYuiLWb/5YFzjA8rp/Y2z5untULsbaSzJpNrOxA8so2DcHLpRk0U0sk9Vkop9VRms6r9sGvvUUpe+vF/axM2SpsHQFfjVYv7+zpPd+sfTnlZ4HjlvHegj4YdmnzLKdRcm+ONmNtEIKNSdoUdxTuVGr1tBfwuetSAH7M1R5ajgHnyvXekkcQdhb8e9AB7cXiciL06r7zFX74tEErS9pi4LXqXjQvTqc62gqbdY1Szyhcna0WxQ/EBc+v1eUQo/bE0E+3vlO7IwyhCkW0Yzgu9SCeGPW+VqlrNdU5HF844RCJclCgEfYLNsEewW2wRXA3rHPYzbpdv8Ot8De7BKZDs6ANGgTrYbHgaqgYe5F5MS/mxf9dXOXxRHjoEYlxV+AI3BI8BdcEL8IFwetw0uPUxH3G/lVenRh7/fF5v4j//TOFgbcK+geCKgffqAwOfB8jhqSsc2PyRFmWPxD/mXVifJNl2SxJRv//asqE2HPzqaHcv5wQnRNtKzmLJk3cWWQwdQkx51PNUazKKSbpDyfEdItE0oMXAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-l {
|
||||
background: url(@/assets/v3/bg2.ED2KfGoJ.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABACAMAAABvC9RJAAAAAXNSR0IArs4c6QAAAoVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYHh4eFxcXHR0dHBwcHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoawUAFEAAAANZ0Uk5TAAECAwQFBgcICQoLDA0ODxARExQVFhcYGRobHB0eHyAiIiMkJSYnKCorLC0uLzIzNDY3ODo7PD0/QEFCQ0RGR0hJSktMTk9RU1VWV1lbXF1fYGJjZWdpamtsbG1vcHFzdHV2d3h5ent8fX5/gIGCg4aHiImKi4yNjo+QkZKTlJWWl5iam5yen6Gio6WnqKmqrK2usLKztLW2t7m7vL2/wMHCw8TFyMnKzM3Oz9HT1NXX2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fL09fb3+Pn6+/z9/kKeQQUAAAOySURBVHjarZb5X1RVGIe/ICiorBoGGSSlIUtkYxZFSWakhUtESFIhZmbZHgUFhYGtKKHYRlKZlCmoLGVZsgYoiwhc7vP39MPMwMw4M1w+n56f5v2e89x75j0z9x7JBwk3aE4s3NpoTtRnB1sW7v54GAD6ylKtzF++twOg5bn9FwBOF0b7nx+S0zAF9FfcISkg47MRYLzu4Xk+BVvVFcD4etN8Z7I49wRAd0mSt/mxHw0AnC9e5p7f+vrfAH1PR7rnCzZ/awCXD6zxcrHAB2rGgbHD6wOnszsrBwGTiRBfS37K3sFLb6yUpEVF5wDaXniZMZ/fchukvdkJ0JQXqHRgqHqt9Ix/JVTzsmqvAYuVDsWhkgVFUtQHDiVdVhXl/H9KRP5rBTFzUh65AkxsmYOSdhWjfRIzw4pi1NTU1NR0MJCihIs0WFGcVEp6ka7ZlU0/2hnmkKRSK4qTVzGKEnOvUWVdib4IQE+CdUWxjSacTJUUv79y981WFGn5ulWSVDgJjOdYUuxkmYycGsNcY135ij9iFN9NQ0rKXotKHy9JKnVslj8l0eZ4YPxOlaTaWZW0n8H4ZqkklTH5fPorUG2z2Wy2QF/Kil4A2sMl3WjfoHOuTyMvyidcy719n8keSYr7zmCqNk7+lQHeklTPT/ZyadIS95Z4UQYpknSQM96b6E05QUesUi9TYV3ZAOMdBqPJ/pRkWOuS5RnA0EYfhp6A+VoG2a7hLfBFpC9DuxmSgqbY6RrOh+0+DVXQIamZWutKM4cllYPhil1ZYXgFCiRl4cl2SYn4IFFSYD9n891YZVfK8z3Z0ctvkqR9mHddt+hEyLwu3AqPSZIi/qXJkhL6Dy2O12Uh5HmMRr0H74d5hO/Cg46Pwc2MrHQbTBoAOOv2u1emyZGZGWOcWegyGPQXk+1/wveuRmwn3S5/hQKon3mp6yHIlnbD6pls0Wmm1rteohrKZ6piBiVFw4aZGx+DXW7rDDoO70xXT2LES5mwbnq8Dg56dCP8VyhxFktGacvd2cMl52KD66AuyLPpEafgU2e6wwQYd+5M+HE46uUIGNkEDc6tePQXzB/ucRRxLfCl10NjyFFone7RwukOZvRAWYC8ElgOI1s8woA9Bsaz8sm2UTiwwDWJOga998sPyW1w3uUct7ETTsbJL2G1YLztuFHU52CWBmk2cvqh9V5J2twFF+6bVZAUcwQ4dNPqRjA/XGTFkPR4F1w1oDXDoiAprGQChndZP/NL0m21lTFzEvzyH16BnDy4upTwAAAAAElFTkSuQmCC);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2CAMAAAChp3phAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAKysrJCQkHBwcGhoaFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGBgYHR0dHBwcGxsbGRkZGRkZFxcXHBwcHBwcGxsbGhoaGBgYFxcXHBwcGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHR0dGRkZHBwcHBwcGxsbGxsbGxsbGRkZGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGxsbGRkZGxsbGxsbGxsbGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGBgYGhoaGhoaGxsbGRkZGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaY4gg2QAAAKZ0Uk5TAAECAwQGBwkKDA0ODxAREhMVGhscHh8hJCUmKCssLTAxMzQ1Njg6PT4/QEFCQ0ZMUVRWV1hZWltdXl9hZGVoaWprbG9wcnR3eHp6e3x9gIKDhIWGiImMj5CRkpOUlZaXl5ucn6KjqKmqq6yvsLS2uLm6u7y9v8DCw8XHyMnMzc/Q0tLT1NXW19jb3N3e3+Dh4uPk5ufo6+zt7vP19vj5+fr6+/z9/hUAYDEAAAJLSURBVHja7ZT5U9NAGIa3UhU1guJ9At7We0VRxKNFKd7iiUXRKpcKKFYBUUSJWm9AraC21pLk/TudbLYtaZPSrY4zjj6/9Psm3zOz+35JCbGncNkckhOregG8KcvB9CpgNOeJmi4NH6tcex4DXkHT8QpvCwkhznZE5oqpxQBlxTxgn93Q4m4rngM83VEMW05sJaQUNkw31JDNYzdTO5rS6EmogwimP27SuFqafo0dCfUZLlpcM/b71WZV1QDVANBU9V22amtaJkPZq8HDfr97P6Pef7pDRL1r6mv/AfWy0peVOn+nx+OhRePVq+g3qSv3ejzuzVNT1eoYW2C40lbNbzd2/Hq5WXVp0KLRKDBWbKfWAUo0GgNeOLm6AlgvSX58XkAIWRrGWUm6xdVtF6rZ7xl8kCTpE9qmEeI4CKyVpB+6upG/awE2JRuNOWF+UlTozezk9xpXjemnmdTdejMrqa4Gaih9YFzLMYTblPamqJcwQun27zimNyXAKUqVZExVwB2fz9cNlOsxfX0ynhCL6T6+Nfp8DYOIFJgSntLPz9E1ye6jKwnz5lDKXvNPdMmyfM87mRBS2ZBKrX7URdf6ZHng5pYJ/mAm4r/6R9QNwGhIGNPrL4qbkDXAlePCKH/rctbNEGaMq7km/AtqQZkV54EjrNgVQZvlxEK7GK5jmFc3EBQKMG8E9bwsB5aIqC5gEy9nxlAjotbhizNed+KhiPoejYn6ALSibJyKgM4jYCAQpwd4yYpzmdWTGTbZmVmlLQatLUni9dGU2Z8vQHe3JjoBkgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGRkZGRkZICAgGBgYFxcXFxcXHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHBwcGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoa7LJWmwAAAMR0Uk5TAAECAwQFBgcICQoLDA0OEhMUFRYXGBkaGxweHyAgISIlJigqKywtLjAxMjM0NTc4OTo8Pj9AQ0RKS01PUVNUVVdYWVpbXF1fYGFiY2RlZmhqa2xvcHFydHV2d3h6e3x+goOEhYaGh4iJiouMjo+TlZaZm5udo6SlpqeprKyur7Gys7e4ubu8vr/BwsLDxMbHyMvMzc/P0NHT1NXW2Nnc3N3e3+Hh4uPk5ebo6err7O3u7/Dw8fLz9PX29/f4+fr6+/z9/h/1AioAAAL8SURBVHja7Zb3UxNREMcXAqggIE0pig0VPRuggAURRUBARUVFBaUJKCLFw4Y99oqosYEUEQtEUBCICSYk3z/MyeUSknjx7jKOozN+f3l7b9/nbm/fvp1HJKhpDMMwUZzpF8swzHySpWyY1bacJtcbzdZzd3D0BR23GDJxLvgcIHMAV1fID96i9zgGpJK76sF5IMVdet6Y+bdPeshAvOPiAnlzkdaStlqrb0lcpBgeCqyzWIqnGNo5c/VdIJH3daFCOr4Q2ExEvl1g3cEzMT7FPNZB5Q6ej1FuLEP3H8N99NhmxU1fvhm+D49acc9h5IvuXAteBnPGEVjVb/EUAfGi+Fpg6JZSqXykA3RqGPoAfLimVCpbgRsSKuiAnv/oeOWkIqhpVYc1iofhgoBnnoNKLrWoVBro483xqon82oDXqic32V0OyxbbChVCOkg8TtMHhPwFdrjR4CgTBhQ2nPIAJ7/BEc9y+p9elNMEHgJsclow+Cvc24RsLo26d9zzV+yTjockbnD6nBqNyQsUkvA5d7jMbLVfPGKeGdwuAZ/Bp3mvPT5umSsUx89Bmzc7/A0a7OgYICs8vhljUaL4J5QRUS36gyfwE9D5E4UZkSGGBwHriWipCU22pQkmNJrHbpSK4SH8eT8DVHhbpla+xegs5/Mugge8AlRJXkRR1UaYUkkmTmEPAGg6zOdVk0ZS8Ylm5bO7l9stY9NckowHsGys1VYk5FceSg+yIVVsirSaF9dfjEdXOStDDp7wU2u6IAdf1uGsun8ndf9x6Xh9ukxpHHA39Ltw8nVHfCNlDhcLa4+lz3isceEvzlUQBWpdhqc7uz9tx9F21/EXEoUBIz2CGrfdrATdH8F1zntoEd7aqPLHn6Fvv5jsKejeAjBElAPEuKwOf4VL13W84FqzBjUkX9FG/sbBQhspHz8NTShnRGhwP0AunWtCCW8WAc+SZMGhNUDnVOtTKYCOy6xUnWrWAq0RE2/L6JRZ8PqGYPtovDZWX2mWqttsgfWS8wOVDhPNZXeUuAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-l {
|
||||
background: url(@/assets/v3/bg3.DKgYKiLO.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA4CAMAAACbrRsRAAAAAXNSR0IArs4c6QAAAmRQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVJycnFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcGhoaGhoaGRkZGBgYGBgYHR0dFxcXHBwcHBwcGxsbGhoaGhoaGRkZHBwcGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZHBwcGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaM9yYTAAAAMt0Uk5TAAECAwQFBgcICQoMDQ0ODxARFRYXGBkaGxwdHh8gISIjJScoKSorLCwtLi8xMjM3Ojs9Pj9AQkNERUdISktMTU5PUFJUVVhZXF1eX2BhY2VmZ2lqa2xubm9xcnR1d3h6e3x9fn+Bg4WGh4iJiouMjY2Oj5CRkpOUlZeYmZqam5ydn6Olpqmqq62ys7S4ubq7vr6/wcLDx8fIycrLy8zN0dLT1NXW19jZ2tvc3d7f3+Dh4+Tl5ujp6uvr7e7v8PHy9fb39/j5+vv8/f7mLvP7AAADPklEQVR42r3W+V8McRgH8E8bSki6LJahcrOOxaZylVhX7jORW+5jkVtCypkz951io4RUrpBVn3/K6/vdZq9se3jx+WWe3X29Z78z8zwzgzC9DzGYTJ3RKnr6ltLIgCkfRf2BmrwueImwT6JbUz28JYXcSj6LCYz2yCJLuwdGkUmWaQOjWE6+6BkYxVLyZa/AKBaRFTq/qXGQyMZmvtP6Sx1Z9L9oxEg108lkv6gj8eTo1jRu24WC5aGimmrOAjDYbO4kV5t388xcTVs0rUEcyDMxW7l8AGAKKYZlmzzAS+0808h6fjpbTJ4CcIAPAUwmo4GxZHleCbnSM00nBwFb+DUY2K/SGGA3q8KA87zumWazBkASqRP0EYBJkhaxCMA6vvNM1/A9gPFkH2CfSmMFLbTv2CMVPyaSiqCPAUxsoUWS1npbsFFSs0q7A4WSrm6LLuNXjXpBzHwCYIKk+bwGcfosnuloclNUXAmrAexVqVbMd1OGdnwtCzzToGJbc8+X9Kmt57VAeKX8+ufQNrop+hzJxlWi3KNSMd8Jd0hWJ7fZw1BSjRGy6KaLBdBR1ytYfuybMqSlDZF8i7xrCGRyNsjFN6/wnxqaWbZjTyWtw/ym+awMByJrmOtOgxSnp5k8XLeUcpfYnGCJKw3Z8oUsT5G1JrOOfDNDlAcbrtppDbPFZjvLXOlJ23VNEnWOrc6Qf3HLGx1OFiSmv5Z9FPuLxUmTHrJeAxxXaYSi1HGnoijKUb5SlHAHXcjvIYCJzV3lkGuBMWR/QW/b6BrXJ/ViB13rNK+zyfZAgmycY96pbdQTVdpB9pxB0Dsq/ThvQbrRaDROW5BhdabZTqM+S9I4SY84aI3jMjW60lr7qM8kQyQdI+g9Z6rbvDnKnZrYFCsG3hoqb6B6II3sDRx2paPIAe5U18jS9XsbeAVAl3pWbdxaz3IIet8bxQp54j7Hi3pak6h/iOk65APFhPNvn+e1vCuMLKyynO4v71kXc52pvqKiX2vqJZ7P8L+lX+bY80vQKWSqj9S9EU2k6V9TTXuRgeQ4WWiAEeQI/94lDIG/hjjTaovlm9X6weJLqlypn7FTbY7I5Rs38nN8TG/8dX4D3Yb6f19FH58AAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAMAAABxwuT6AAAAAXNSR0IArs4c6QAAAtxQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaAklNYAAAAPN0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8hIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCREVGR0hJSktMTU5PUFFSU1RVVldYWltdXl9gYWJjZGVoaWprbG1ub3BxcnN0dXZ3eXp7fH1+f4CBgoOEhYaHiImLjI6Pj5CRkpOUlZaYmZqbnJ2en6Gio6SlpqeoqaqrrK2ur7Cxs7S1tre4ubq7vL2+wMHCw8TFxsfHyMnKysvMzc7Q0dLT1NXW19na29zd3t/g4eLi4+Tl5ufo6err7O3v8PHy8/T19vf4+fr7/P3+kWOxigAABYhJREFUeAGlwYtf1fUBx+HP4QAKqMecXGTesaHmLR2zxgrUHLZNl6tBbmOpqRW2spWmxiJza5QjlZxpXrAyZlhu4hR0W5tMWYkrFNwmigKFcj0czvsf2Ov7+3HwIAeh7XnUM8fQ0ZMnjnTpS7t96e7TjVjqTmxOjVafjVrzKV15i5a41BfDtngAzrzx9MI5M7/57bS1ey4DfL6qv3ozMLMR2oueitMNjpkbzgL//kmQbumhq+DeFKNuph4E/jFJPXNkgjcvTgEln4Tr89WTiP1QnqCeOBY14H1WgcWWQuEQ3cKUC7A7WAGElUBOsDpNWZ61/dCBLWvTh6tTVDHkKIC9sEo+M7Ir6VSyZrg6hObDo+pmNbyhDuPeBnBXnnj3QMklL9D88mDZIkppS9ZNvuulKFSW4I1tULd9Qbgs0YsPtELdItlGXaV2pLroV0FlpCy3HYaG9QPkZ9ROL2wMkiWxld3q4kmYI8vYzyA/WjeZdhYK+suShXe6/Ljq+L0srrPwokPduD6AXbK4ajksPxvwTpMR9AEsUSDOHfBzWTJgrjq5mnhLlrWwUT4RU+fNnuBUh9DjeJNlhJ7nuDotgUkyYhv5MEi2eQUtALXbJ8gWfZG/O2Q8DuPkc5RzsuTiHiPLsMP4eDaFyrII0mSMhPXqMMjDr2SM9fCaLHdchHPPzRw+Zk52PRwbJCPoNOccMk7xV3X4Dtwj4xnckTKiLtD+bIgsQ/Pg/SAZCyBBxlo8LtleotYp4wSHZHkX74Pq9Bo8JqPfNbJkTIW5suVzWEaMl2UyZkKWbnAWcXWAjH2ckeFs5QnZzpIjYx6MlpHL1Qj5SYA0GT+FcBllvC7bF6ySsZj2YBmXyVEXZeyRMQviZBwkXzYPS2U8T7UMF6TKuPNkwW0yNnNKRjx8S0YehbKEwSIZr3Naxu1wr4z3ktY9LmMdl2QMhgdlbOMvsjjhERkvUy4jFu6Xsbqg9B4Zv+RTGSMgRcZOjsnWRIaMDJpkONt4SpakibK8zxEZCTBFRj4FslXxCxkPwWAZRyiWv4HNPC9jAUTKOM4u2Y7ytowZcJ+M5ZAkP+tgoowsrjlk1LBetq18IiOomhwZYf+hfIg6faOFd2QpI0/GUEiTbRner8rI5aJDxkIoiVWHxBo+HyNjHKTJeBjGyxYPy2TcDwtleQFqnhgkSSNeddN2nyybcA+WsY/L8qnikAxnGf8MlmWlB1qL9+4vBWqTZYlzs0VGv2vsks8ruF0yvgfLZZteiM2TGyvbOzQOk5EC8+UzDZbKUkTz19Uh/pm3jny4bXG0OqyATFn2UhOiTse5FC4j/guqYhXQ7DZOhcu408uLuiERVsuS0k7ZWAWQUk/1CFkOU+uSn3zqI2VZCXWz1M3P2mm6S5a5kCF/4z1sky29Fc/mGHUx7Q9QNUOWsI85H6outsCjst19BRqy7pCPM2mXFz4aJlsepKqriNO0JcsW9Rs3UJ694oG77k198s1aoG5lqGxrIFc3G3mFurHqELenBT91L7nU4ftejoWom8RWKifLZ8APdla0Alw/80qSUz4/bKIiUgGke7m+QP6+MulrA+XHkQn1kxXQAw14n1PPIvZD+Xj1YEol/DFBgTlSz0HhEPUoqgjYF6cAZpUAOcG6hZAVV8C9Y364uoh6pBAoTVEvBr7QADTlp8eHyDJg+tPF7cCFHwepdzF/wtJWUVr8508uYcvpr74Y3czftpZzQ/vJX9fwcbD64nc0j5FiZy/fkPPmb1/NTL/bJT0MGeqDebBe3RylPka96vcZFWHqZlIbO9Sr1TBfAWRDonoxqpGDCmRQNaVO3dp+WuIU0I/gMd1keLa/9+Cj7B5U0bI1288GaTr/q2vShLIuLv6rrEfV58v8ndT/5b+wy5acLtE3wwAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA8CAMAAAAAPFkHAAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGhoaGhoaGBgYGBgYHBwcGxsbGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGhoaGhoaFxcXGhoaGhoaGRkZGRkZHBwcGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa4vkYlwAAAMR0Uk5TAAECBAUGBwgJCgsNDg8QERITFBUWFxgbHB0eHyAhIiMkJScoKisuLzAxMjM0NDU3ODk6Ozw9Pj9AQkNFRkhJSk1OTk9QUVJTU1VVVldZW1xeX2BhYmNkZ2hpbG1vcHFydXl6e3t+f4CBhoePkJGSlZaWmZucnZ6goqOkpaipqqutrq+wsbK1t7i7vL+/wMHCxMXGycrLzM7P0dPW19na29zd3t/g4eLj5Ofo6uvs7e7u7/Dx8vLz9PX29/j5+fr7+/z9/hwDx/gAAAMQSURBVHja1db5X4xBAMfx2drY3EcRKmfESrnlyH0kFLlyE7mv3Lco5IxCtI4kZMtNrsq2nz/Ma55ntYfnyuvl9eL7y8wz+7x3duaZnWdEpDM40cJynASnLvWPKU2rW0EzA37vLDccjLBGh4Ez8LpPOdy0NuBQKiJPw3OnFToTZoY05Xrx3DlvkmNCZEJm6NdN/45pXmlTsbm+9IJhHuhSEW4yzI2SLtKkZvlvadH2VucKHxX6R/mq0NqqVuc1X/65Ge6cMClrwbh+jlZSW/KOCt90eK6vi7dObRmPgmezeJhFOqYM+HAqa3Rc2w4DU9de9YD3RC8rdK0H7s8O2J66rK8D91hTGnEIarLDgvvouKORhuUm1HYGbvf8fVom1MEKY7oVTms+jngXjeON6Dwv1+zaiyDWTV2sPm33kiddhU7GNlKgT/NglNBNHozUo1GfOKsvRbsaSvToBpoGKBX70Mnd/aTv1L5qZSUM0aElFCvl8vdAYQ+1McUFuFJkNfILW7RpVDOrZLlJXbhP2yvSo/4JFFvIXW26CORK7d9A6cjYTc3skY0u3Okx6W5c8mIpRGnSXGplkcM3+Y48QKUcJ6QLIdJBjjcRRmjSvdyTxS4q1B68diHSIEYIEQNpQojolrdiCC3gYkCvB3ks1x9k+HsNayJHkxZzThb9GigdFZfrZbdvrBm9MnxjFfWs0+m1zNespEqZ4eQm9WySLC86qr/hF/W/JPOpUSvL3gHnfeeJZLlJuRQpEloWqkJnwAz1cg3eNmotPHFSN/9qik/7ta+lQe8A6mw5hoyGKcIwO3kbrkltzzhqKG0vOCyC6ZIUNcf57DCi82GN79b9PhqQHCNaGXKCCaZve+jLaaGHH8dgf+b+4JSudFRRPdx/76CQj7dDto4MOwmTDUbjeEhzlvbsHoYjhvMfV03zYo32hBtQZBfGtgbyZCW/WnnI5dXKzpEPl9sIk8yBiUL5M1ySRS25Qt0fOplJkQKDA6hbpdlg/8t0YVJSUtIVbsniDftksc0i1c5fpZFDdWIzpdbzE3Z4x2LkwqSqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA+CAMAAAChgZ0aAAAAAXNSR0IArs4c6QAAAspQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGBgYGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaty+CnQAAAO10Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGRobHB0eHyAhIiMkJSYnKCkqKy0uLzAxMjM0NTY3OTs8PT4/QEFDREZHSElKS0xOUFFSU1RVVldYWVpbXF1eX2FiY2RlZmdoaWprbG1ub3BxcnN0dXh5e3x9fn+AgYKEhYaHiImKi4yNjo+QkZKTlJWXmJmam5ydnZ6foKGio6SmqKmqq6ytr7CxsrO0t7i7vL2+v8DBwsPExcbHyMrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4ePk5ebn6Onp6urr6+zt7u/w8fLz9PX29/j5+vr7/P3+lBpGjgAABH1JREFUGBmtwYl/zgUAx/Hv5jHP2OaYNYtoLETMNdcsQqzl6iBnUWIlcpvI0ZAZJaQtR6FSbQyJkjRjWHOFlmvGhrU9z+d/6Pk91zbz8uzZer9VLebWEX6qqUYbCuH26kDVSPcL2J3tqBoIPEvpiucHr7GQZVb1LcfaTzZxME/eatwivFXrtu3ad4j8h82y20mWvLWdMhNkN41iH3lpC2WmyW4+d+StVI7ERPfq0b1bl2wO+MrG9DsZ8lYK6XKYAMtMUp1kGCpvbWavnL6Dk8nrcmCbvLaJfXIK3ordxiB5bQMH5Bb79ckT2waqGtZzUP+DdRzS/yCZX1RVjfuPm/vB1BGRqiyJI6qSwMlppTicX9NND1jNUVWBaeIVbCwXcwoxbG+jClZyTJ41+xXYOzXCJCloUPJVKJ6o8hLJlEfd/oKMKLkFzCmAZJPKLCdLnjxzh9K3VEHz32CtyizlpDwIzuFOPz2g7k6Il9uHnJYHu7DGqZK6h7F0kMsicvRo0ZCghwi7wbXdP6TtyThw8OfDl/j3j6yTp878efbchUt5127kF9wpul+SO8VHLj9x3qyHicezb0PkEAnj5dCwX2xzlfG7zLnUlC8+3/jZJ2uTVq9a8dGyJYsXLpg/d/bMGdPfezd+yuQ398HFGNnNpshfhoB12KS3lNtCbpv1KLUSLFjm1ZLNIXbJUOcodgXhcukCA/RofS9Bepiku8TLsAASnwyZVEiG3IqYKg9Cd8PpYNWHYTKcJ0U2E6GFXLJZKk9837fwjlpDb9mEQKxsGsFQuaSTIo/a5DNfERAjmyArL8umKfSXy0HWy61tVF05Ne7zlFxibnK/o/xhpAzH2V9L0hIIlUsuCXJquQ+ujpLBZ9Zd+KaZ7EYXc2+EpOvMkmEs7B8+aBNskIv5PpPl0Pc6hjV+UtBODPmvSvJJgGu9ZPM9+2WXgl1mA7kMhC6ym1pKcXyf43CwacRx+LHT7GLYGmxOhexWMkzC2kR2Y05ZubjELLdPudyufYfIzl1T4UpPKWAr3C6CVSapUyZcPAR7GskuzMoCOQWFqZzQe7hZmskwrQTujZXBvNwKbPaT05cUPa6HWUWZYjm0mTMzXE4xublvyy38Pjt8VFl0CTt79ege1bVzxwWUyqNFsEiVPJFHXhM5vIFVHpl2w1wfVfT0GUqi5TQe5FmDLPiqocqLu4X1dbmMBV951jgNbs6oJ5eoNCgaJrfRYFIVmBItULhjQkzbpl1fWHwKyO6qMq+Bn6qk/S7KuTq5tsoZCf6qog5zDlsx3EoZUk8VvAL1VHUBrXoOiAxRJS9BoGpuONRXzQ2BhnILGTzqWbOqIQ6C5VR3tQXIHyfvxUKIHB7LxmGLvDYYQuWwFZLaB/XOgAny1iAIk10MzJGN714K/OWlgZC0dHniyo+TjpJfW4Ye0E9e6k+Z/bKrB2PkpV65OaezszKPHT3yN+dk1wZeVLWNhIEyJGJtomrzP0HeAMl3uoVk1UC3EshJvw65gaqJ7icw7ApVzZhHr9+24jlV8B9T0a94882ZyAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-l {
|
||||
background: url(@/assets/v3/bg4.C7YndXK7.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA4CAMAAACBkfufAAAAAXNSR0IArs4c6QAAAjpQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGRkZFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa67X1NQAAAL10Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcZGhscHyEiIyUmJygqLS4vMDEyMzQ1Nzg5Ojs8Pj9AQkNFRkdJSktMTU5PUFFSU1RVVldYXF1eX2JmZ2hrbG1ub3JzdXZ3eHp7fX5/gIKDhIaHiImKj5CRkpWWl5iam5yen6CipKWmqausra+ys7W5u72/wsPExcfJyszNzs/R1NfZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dy8/T19vf4+fr7/P3+eSKkTgAAAttJREFUeNrtlvlfTGEUxs9UktJiC61SokmkhEoIKVsSGWtCkZKKbJOiGU1IWZPQokWhzTRpaJ7/zae578x9Z+beWfj4zfPTuc8935n33nPueV/yV4qKIaZ4zlQwL5LzgkgJUa0WbJwzfZn3kPO2S2MT7mAHhX9u5rFqwbvIY+2Cl8kwpeCr+UWeEYJ8HtMJQdh/TA5rVpvVzRdAChsS8ppky92kyxWCbTqdj2S5Y1pF1RAvL2+byzIucQNJyjvt2ouBn7+GXtZm+JK7mlc0Iq5nvHiBe1TaRwDf7pcWFly69xnA4C53qEIj8GQLey5FshYwFbumzgNfdvBGah9Q7Yraa0JHuK217Blw1DkVoUfPEntzYQeMCU6xBhjiHN3wUTy2s0JPWZVDCSZckfo1FZBBmWJmBN9cOqrFaLAU5tuDJlLbzZKpSUEaxQDqpBdfBr1fHUvT2344ROvmDEklzq2SKcwe2wcsksYURhyTxU5gmkVRD5gsL74Pl2WxUgywaL3l4S0N8wo3ZTEVDCxa1cKUxIxesTIOWC4QItMHMzguiyUC6dJUPJBljw33C6r3GkaNNHYBBv8qljZkN4J0dAsjAVKUTxe0tl2yosyqfNoIlEhhBUA25YiZ0Xb3NZiMdqSWD6ONnGn1D3Q6NLPfW8wmO8XoMNAeamsFvwHOkgtVAJ9SeGNtJ4B6L1fcuVlAY50BsWoT8B644QqjnXPDsbfm5IE8VdU7AGOH5rcAlS65gJJJsUTTlSFEAW0ylbGV/+67XXrA8KFhf5DwWl4DKj4j6pGoChs2kG/rpZ0wHSGiInOiUnp/u9PI5v7mxka2v63sxmwe0W1xBD3VmtXvfDeNHIQxi4q02haP9m6K/YrpNI+3fKKECXxP8hyjlCmMrfEQK39+ndJnUP4n55I9V//6OJMdZZaGL0CF4J3msVbB2yR7nPlnh97AraKsAzOVMy0n8zjOW+z6a5DUb7XEj2EfmeDdAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAMAAACycDqVAAAAAXNSR0IArs4c6QAAAg1QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUEhISICAgHh4eHBwcGxsbGhoaGBgYFxcXFRUVHR0dHBwcGxsbGhoaGRkZGBgYFxcXHR0dHBwcHBwcGxsbGRkZGBgYHBwcGRkZGBgYHBwcGxsbGhoaGRkZGBgYHBwcGxsbGRkZGRkZGRkZHBwcGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGRkZGxsbGhoaGhoaGRkZGxsbGxsbGRkZGxsbGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaino4mQAAAK50Uk5TAAECAwQFBgcICQoMDQ4QERITFBUWGBobHB0fICEjJCUmKSstMzU3OTs8P0BCRkdISk5PUlVWV1laW1xfYGJmbG5vcXV2eHt8fH2AgYKEhIaIiYyNjpCSk5SWl5mZmpucnp+goaKkp6iqq66vs7S1tra3uLq7vL2+v8HDxcbJzM3Oz9DR0tTV19jZ29zd3uDi4+Xm5ufp6uvr7O7v8fLz8/T09fb3+Pn5+vv7/P3+pK9UKQAAAoNJREFUeNrt1utXTFEYx/HfyIyaSqSbRlNpIsklhCiUa8n9FlEk1xAq1yKXhESpUJIQRTPfv9GLuVTUzJlWyyvPq+esZ33OPnufvZ+1ZXUEFybJQXBhmSrZYPirir3EIaOR54+E2mcGSdZ+4e3ioMhGJ9C/ZHKyK9cX67xiiJ8eEzlazT05wSKPeET7Y64OuE1qgP8y4hH2Rioy3WZCkmH1RZhkG6bdrkYqlDlAR6hMo1Xrpkmmn/vaLjVSIWV2LTa4YmHyEIUF8yvdRNNFLDabxTAJt9m8aezqgw03/JJXdbtXzPY+hOScawMYCPFDkgFczaeyJEkVAHRXb7P6IXHFtX0AFEiKdUFbQVLgucxI2/MBeiQlAvQXhgQk4YdGgAFJpl7uD0NTegCS/QY+PuWeJNVwJ/UuOI9F+iHzq4Hzse85IEk7+TrTlN8DnWsmIyGF/dC6TCmwSpKywCFFVwI1CyYk6U0wtDdUyoMYSQofYbMkLW2Bb9vNkqRFRz7RUZIiSYosdcLdVEkqo9X9kkeckSRZigahOUOaU+05b0ctUk4n9OSbJEkPqHKTjIUmzxfY68BVnvQC+houPxyEuuQaoDLaUzenp0mSOT7ePDrR9d3wA8ojJCXchF/QkjlatsbH66/NH1XmgrPu3PQEvhdZAp+X6/R7d5vNxX4jR6yFS778OReNkHeU+PJqbhkb5YIvf2ZslCo6vI0l0clWI2Q5HPGsWD3DiYY6TC2cCJcUdw0OGWtK815Cb/3pe1/httlgH5t7xb3HnMdnGW99GaWf6dqXOn3d8j/5N2TLynERM4YkjS8dnuQ+lj2G7DB2hQtIzAl/RqgkxSRESVLEX1VNJX4DmRADv7Vqo6QAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAZVQTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHBwcGxsbGhoaFxcXHBwcGxsbGhoaGRkZGBgYGxsbHBwcGRkZGRkZGxsbGBgYHBwcGhoaGRkZGxsbGRkZGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoa3tD9qQAAAIZ0Uk5TAAECAwUGBwgJDQ4PEBEVFhcYGxwdISUmJykqLzc8PkJJSlBRVltdXl5gYWNlZmprbG5xcnZ3eHx9f4SFh4iJkJGUlZaXmJqbnJ6goKKjpKanqKmtrbGztbm8vb/Aw8TFxsrLzc7P0tbX2Nna3N3f4eLj5efp6uvu7/Hz9PX3+Pn6+/z8/f7+aEnfAAAB/ElEQVR42s2WaVfTQBRAp1AoYhVRRHEJirumtbhUcVesuNPihrhjRVRwX1CpYi33d3sySSbhMJ5mAni8X5I3yc3kvZeZE4GiIoxYgHgt41AyFzPy2BtfrI0YUAiJRpRDYnUoMhNzRIMcz0ux1Otww1yM0UdHrCimzMRYLKrYuF5La12xXd/wPUsnJi3LusszS1Hgm2VZqyIVp8i9IDjMVOSqxhYHuR8Eeb7UEdPX/UROMx4Mn1FBx0Gt2DTKc8/cBxv84ebXDHneJMe0Mx7CN5dPM77CHUwUYavvkdXnGJgH4GmnfP0S3J7nzSuOY8pvq6EfvmeXJXvewSM5d3vYk+LPML+hz72Uq0B1BjiXkvFVeDOq+DRnIbtc8B66+4cTzV5udMOyZrMq5nyOfIZud42crMHX97PwYLUcOAGvLg4EHFWblRBizQTk3Nbcgo89CbF2BN7KKqWG4UqDbkMOe+I4DK+U3chDOak1ldj0Unltv3jc4l3vg53CNwe0M+6oep7YT61D3VDmjvDMmW1aUXT6J2cZC244xaR3lrL0ORosq/9DbLFt+wkvbMVNpm3bXldX/Msut3fpRJHQEq04Rj8PUWjdrthkJHYFOQ/+M3FL2uGSFLPNUdkIm+UTClI0YhHEXQbkw6IJXQsQxx46fDAXgz6akM4oukVc/gDJXaMPEeEHHQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAArVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGhoaGRkZGRkZGRkZGxsbGxsbHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaefXWRQAAAOZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ2Nzg5Ojs8PUBBQkRFR0hJSktMTU9QUVJTVFZXXF1fYGFiY2RlZmdpamttbnB0dXZ3eHl6e3x9foCBgoSFhoeIiYqKi4yNjo+QkZGSk5SVl5iZmpubnJ2en6GhoqOlpqeoqqusra6vsLKztLW2t7i5uru8vb6+v8DExcfIycrMzc3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6urr7O3u7/Dx8vP09fb3+Pn6+/z9/v6gHUxNAAAEWElEQVR42pXW6UNUZRTH8d8MKjFkijoTblGampiaqUkupS1ILpVbaWqZK6YilJrZohmmWKhJuZRFmeZuhSWYW9mYikCJbLLEcqfv39GLO+PMMKvn1TnnPp97n3ufu0mhIr5Pr1jdaYzc3wT1Xzx8R8jyJmY0z74TtQluLh2buqoBFkWvsuFIoiT1PgOLo1UfwSGbmTuidpaNXiXZi2BJNCwdDtu8pb0IXoys+hsct/k27L9TY4/ItlJ3v39nhBHFNMvIbt06zNFIygYzJUkxw194fqhVkrSG4kjMAeMlWeeWAhTPskh6napIzA7jpbgv3TcXn8dK86JiaYo7AIXP2B2pZ+Gb2GhYF5gQ9z3ktJOk2O2QH7uAykgsxiB9P2yxmKV1G+R/wh8RF+AM5ZBj9ZTWXKhjV0S2FNhq9dbWXGBSRNbhHxof8W1McPGzJSLT441UDPaWaU383TOykp72deObuJEcjTKde56p0alus9blHb1Y4sK46nRevlz2H0aJ88TuDbO7hTadF/9EyDi1pFNQFLewCjDOHchdnZWV+1Zm5sqVGRnvZq9YkZmTX2gAlfPvClSjr0HLvhmO4BNxTPvKgKsprfuzmmHfQz6NhGEJ7R/r4tNI/hoap/ur96FszO3KNiX3gouUZHDmzbj7dvvJcljlqxbCr909Rc+1lQCkJANwa3OSZ0vSGZjrVc8aHIt35zHz6oHCXSbbUwA0LPNci/YFtDzhUd1ruHKvO7/vR2jIGax+Jhuu/u/Vw1nPAbuWUOm5ap/y7yB32q8YDiZJXib12AM3RrgHDGtmvfsSGaxxNweV02J+mnyYNL2JuiHuIRtp6iVJ2kul+wZI+IvGCQpkGlXDdfftlVjLNkm6p5Gl7j3txZWqYEzjWjjpfnZXcytW0mToYzam+ixLK6ZX4WUzexSekrSDC2bdxklB21DMcoJy81Qs18iW9CfvmFumwViFYhps8JqZbeEXSQ2ehT/NSYVm+o5zZpJOmZQAE82VhCnh2EQYZi4HrrbqB3MkSS/hSgzH2tUzT5KUCV1lv0ZzmiRt55QC2MZF3iglT5LmwOl46cEyGsdKOsKOQOYflyRNdXHeIUnJN6kfKZ1nrQ8bByl9b7SKEqsmGzi7mkOGVFP3iipY4FVDq6nvpYBos7yF4tuPX8otKKzlYz81RlPT/WLzD0VXoKSvdy8DLgIc81cZwd57J3r4Hr3t9PwGfmutakp9w6B2R2rAR2Q51TH+qiDBb0ApWYFnq1EwNJzqC2lBWGwtH4ZRWkddxyBM66nvHFrFV7EpmNIDBm+HVFoBA4MybceoCaUGNrM7uFKXMkKpDkVUJIZgei6Ush0L+y+6+omgynEEMhUuMsDZWo0ugQ1hlSXLBTsH+LaS81wYb0T6Mxl5CTg4s7dZJc3+1gXXRyli2DKrAcqLDh06WwFQtaxjZCWp/dxTLs+DYhyf3yEqJEnqlJb+wc7P1i2Y1Dn49v8BUIfpizuTif0AAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAAuhQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoa8hNQ3AAAAPd0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaHB0eHyAiIyUmJygpKissLS4vMTIzNDU2Nzg5Ojs8PT4/QEFCREZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV9hYmNkZWdpamtsbW5yc3V2d3h5ent8fX5/gYSFhoeIiYqKi4yNjo+QkZGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i4ubq7vL2+v8DBwsPExcbHyMnKy8zMzc3Oz9DR0tPU1NXW19jZ2tvc3d7f4OLj5OXm5ufo6erq6+zt7u/w8fLz9PX29/j5+vv8/f3+/vwH9BgAAATrSURBVEjHpVZ7UFRVGP+duwvrZQVCZeUlqPlEfEw5+QgqozJTEx0bzJpMRxudTJ2mJk3/k0zTBh+oNb4gQHECDS0UsVFSBx9TNI6jaKnxRoFdwJUfEyu3Py4Ly+XCXqdvZ+fe33fu73uc75zzHRN6EuvgZ5qf4CnlxewGsu5AzFORxBdUpXHx07C2keVrXp2xrp5caZy1lTwRAgDPXiE/Mcr6hvzJT323FZGrjLG2kLl+bhRslLfak6XyFnhnjXIy3+qpCP6TNcFeadtZO6SrZpLTQJj3uE2ryuUprcqswX6huA4AMD03VLlb3AYAV98Y6o1mBeoASIu/DANQtukHBaiHv5Ym6VQAkNNSwgAg8rv9FkDp/o2kl5+cOR/FcyKj5t3AwlSLaql36U/OlnPIZF8AsOwmsywrWOWNZnJydTaZ3G5fSiGzdvK61wIUsYxM7ohd2kXW8qCRtcXtHhlLu0gmeKUF3KdjgqdiVjMLhfdFOcXBinGdcGYD/4kysgVed7BivBu81cDSaGP71IM3oweWJuqI+CHh4aH+YcJV6YKAPFB6UtNSVVn919nyHmn9F86b3GMI17Iz7Ho0ecn6IOBJSVlljQsR1S4oUBAg18AUGho5zgTYkw61dLP2UgnZlPm+Td+XbWGGk7zVLZhFjWTGqN4mKvow6Xivq24jee9lbzM8rYxc76n4mLw4yHtlBl8hl3bC6U6eshqpqP95Nr3iBoNqeHOgsZUQ/jcr3bO2g/axRvvDxEZ+1T5FTm4w3o22sGEoIIDURPtYu+4ngcstAgICEtSn+D075Lr/gZUAAhxco284sIBauQqs5wMLzIjvg1/0N+yPsbjTqkCBgjYoUDDS+gjI2xAQdxbYyz/0WfnU5nyOWwFRwq0wIxa5AA695rgjICCEO42oYdiUZHa1H94uAGgDACVvxWSYEYZKAGMHDBiu9ff1xqjDm09a0i8dT4hfUt+xYUoRDnOQHx4CaEJFIRQoaiqKAgU390w9Yjs4IWr2bMdmcT7xpvtUr0WIj9kGBAOoRtFSrbfE7y3/flY5H86s4KRh5xLPt3sLh7AhuISNM4FMpmtZQQ0sjwOO8RiQUMd7AgX8FlhCXrJKtbOqfDPi9bqKABTAJw6FgEWCS4ECgXdTcGveYwDR5ayLS2dGN96CBjZ++AI5VVpHVsUCZ5ic4OSNcHV4QjXrLjNT5+JVytq1rLc838Ti4QDyebGJtzta+6QakgU6JY+6ONc2dxmwLCcIAC6TvDuic3h0MXlBb6m4e7QJAPAbeSayy/AFHkVESsoQYGBSft66QGDivv1WYPTeotOfysCc9N3AaeZqjuM0HsEYciL63ybJazLeJvsh2k6SxwVWshQ4xR2a3q2of4EPIlvTshAzX0Wr5MadJ/FmLBS1HkITvAKh1i4G55ZjXPRIFY1H6lqfB/KIC73fFAR88Bh4BF83akZrKyStt84gJdW+4hFyR5MQni9dvXVRu1HHmus0qcmtXVuOKXHmGFSo6H7MrF8HB+ChV28/KyFn8vq25KsoBzEF+1BVqPUmab1d/qgJqFtUoqKjnzcDt95xdEuiXfYzB1K/IDMA3zGjTABMfjIA+I6MAAAhCeAE93TLzSSLFmHpA4Fy9FVPIVlAwA6b+1Ty1Sn3dLuRa3tvF0Pj9KmDoHj/tT24gf8j/wFtkTXADxi+NgAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico6 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa99eAlwAAAO90Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYqKywtLi8wMTIzNDU3ODo7PD9AQkNERUZHSElKS0xNTk9QUVJTVFVXWVpbXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqSmp6ipqqusra+wsbKztLi5uru8vb6/wMHCwsPDxMTFxcbGx8fIyMnKysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9fb3+Pn6+/v8/f7U/243AAAEC0lEQVR42q2WfUwbZRzHv1faCohACxtmRaEDJ25DQNRoFBx/TA3DQIKbMrJsi4uR6HyLiv7nNLLEJRjjNkxkyWQZuswQjZnRVIcvS1QW+aPwB87h7Chv0t4XSZpNurXm7vpyK3ftrvWXyz2/33PPfZ57nt/Lc1lIIfll+YEQMpKHh/ykp3dtBghrLxXxtqTPOEKOP/1AS4+P/vYMGB8WSFrtGP2Pp8Ww9JMHsxR9bZoUy0fkoayo5XRTTIPyLnnYHDedbvoajDIeJPvN6g7nOY5lG4Qc4+/2a3u2kAZdlDvPFxL7zvKgzmizdrfDijHFz3WOq5PjsvprZaUxSA4gSoiul6RAmdz3JQAiTwdi0u4Oy3fbyTflYKsY6DElW7z+QwG2oUYMb3Fu3DmFrgOmCNiAbCTvsp0mu+VJ8gfIXtM7/MkYpJTc/h35SsTM/ph87xg/NQbJOs/z5KsxW6LM8S2D6zlA8jWVnX2U5N0GIbdO01Ou7thJHjGcgC0i3c642SnyrM14Gm9TUzpEjpamU5W2inRHKvSTIkdvQZKQ0pLKhopVpSX5qxCcuyoAeUUILlz2zi6MDS9cJ8TR2bpeb87QmS9OBFJDCrv25gDL5/70iSHcPCunUbjoyiIsxcW3VQGY2/fZlVROmSRn+9oKdQJ5x3GSP9+eFCG8LFJ8vyzZkHuGyIubkwww95G/1aTyWpuX/t36j3vIT+ypfV/tptist7Edh3Hy2SAsBYLcL0CrDU0BJV+XBx4d14Tc6bK6mwNAzffJPsNbDaDKlee5/5JWZeu2ijsCci1NJj7pNrEHZbu0CnVjM96+KCl+4IMzcnhI17Xti03T8uBvPm/rPiGunOJbjloVbYa6mz/IQ4pS5efrK5dTUY/9y4oqolgP4sCSokwMYttKyCYEXbFlF+lBihBdw1dwrl8BeQSuxagDUKAHsUk7JsuPl7A5ESI04nS07x+oUsf6RGPcyMmN+S7gQk0ixH4DZuIQR/y9Zxab6mKGXXoYkXmUJUJWA3/HQ0G1sablYDwgC1WQGaxJhBQj/qYPqgTqc4yMxox8FaQcq7MSC+IFeu+N6K3kTTrVhoyW/DfIwRUHef0UPbWK2kCWa0M66I+8uJc8pfGncd80J+9QMpGs04Y8x0lF2U0OF2ok4C/b/7WfekzSFuXFa4ldCZPc/b2Y2LqokYD4YddR28DIyAVYgfZKVSExxQrKJmQ/D8u6h0rwR7tPVU/W9ceLzo1rzNd5sF1eCkXnEJbqzTnV6ZyO2apfWgvMYeA4E+rGhqIwQkBYvstXCILSzv+VUGfqWwXZFbXIQPbQA1MYmYogu1jIBBFO+gtqQKSN7WxKcs6kajdAkIPtqYy/JDirdTQYaMPE/yL/AQn/nlzVMLtOAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-l {
|
||||
background: url(@/assets/v3/bg5.EqAxWS0a.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWHx8fHBwcGxsbGhoaGRkZFxcXHR0dHBwcHBwcGhoaGRkZGBgYFxcXHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGBgYGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGhoaGRkZGxsbGhoaGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaYKSRzgAAAJB0Uk5TAAEDBAUHCAkMDQ4PEBETFBUWFxkbHB0eIiMkJSgpKiwuMTIzNDg5Ozw+P0FERkhJSktOT1FSU1RVVlhZWlxdXl9gYWJlZmtsbW93eHyBhIeIjpCRk5SVlpeZnZ6jp6mutrjCw8TFxsfIzNDR0dTV1tfY29vc3t7f4eLj5ufp6uvt7u/x8/T19vf4+fv7/P3+HFNa1wAAAi1JREFUSMft1vlbTFEcx/FPqQxG2m6MZQaNpGiUiazJVoRsyXIThWQZIaJl0rQwTNP7T/bD3CbPjOiebD/0+emc53tfz/O9555znyP9JLlWoEhmCdgxYOhKoXuacylJKrE61/gGzNxsrmnthmTYpT0MfVskSaFRpje6srnvGFnvjPfMcccVroZD6cltpvLd4IskPelJPexygzsZWJhY0OAG36VvYeKBYyv4z+BK27btQcbtdLqg17Zte82v8VEWy4Yl4Uc9b6Lve9J5GI0+7Xm5VPyj/sJ/Fa/aGd5sigPPgHvrjLBnCIAuI3yaueNFt6DcBF/llVQOIRPcSny7WmCrCbYm+ToKj3OMVrs+BkR8ht+5dIT7+cY7LMI1rWAX2NpU+G/OsxFe1g/QHPvOLpYC/T9ZGzLOXlVgnIll4/2WSdpTuMJosS58h/1hqaraKZwpkc47FzHvOck66RRqg9IRXyb2jyUaq6amU7qNSHEHvR5J8vbTbg3SkrqHxmPB5uSwLwsz+5k05iMLmBhpzEySLCz/BMTn224Dnsy3/Zx5K9UmYCyrbVXNwGyj80wHMFDi/BDeAu1OoXkOJoOZuHKKTxMkUnfM6zAEkUJJKh2ED3BZknQiyfgXYjsycNnr6Wr/WDQgSWpK9nra6M6TpIIHtHj7EwclScHYsC8Uf1GU2XbZbskfcLqr80gNealxwQHJu88pBH1STXHWO5tuklOVJun8DQfDHK8OGGfbN0W21rQF0iFVAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAMAAACvSe/GAAAAAXNSR0IArs4c6QAAAORQTFRFAAAAAAAAAAAAAAAAAAAAMzMzICAgGhoaFxcXFRUVFBQUHh4eHBwcHR0dGhoaGhoaGRkZGBgYHBwcHBwcGxsbGhoaGRkZGBgYGxsbGRkZGRkZGxsbGBgYGhoaGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGRkZGRkZGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaTYzvEwAAAEt0Uk5TAAECAwQFCAoLDA0REiMnKCkrLS4vMTM1OD0+QklPVGRtdnp7fH+DhImKi5CQlZydn6Cho6WnqaqusLK0t7e6vsHCy8/R3OLm6/D5JIZOigAAASJJREFUeNrt1VlPg0AUhuFDB9z3VlzQ1rpXxaVYtVqlo3X9/v//MQykAk0snKGpF76XkPMkc0IYIlXF5rVKUR/g9VUg4DIO0IgDu5S/nQCYcYI+ce7krBwBNvP0uC8Q2J7Pnx8HbMb+HooGFlqqAyLRGt7iILARLkYSWRn2tzkIrPiqUyLhD688gh1oA8sd1Qkb+FkiE1i6Ux2Nbwf/QIaByta6HuClvhFtoIvnavVCA3jtXyzjAh7RmQ3SW6LKBg5rYWfNq+ZlLZWTBNaix7048Gs3SeA4frEUA1CpnzCFKUqpjCRgpF9kzcvxt/qDwMS+FQL1Od78E9qWB2m4eGEJ5i3QvoZ0ATlNXOEN74CcYi4hEKAxHwka80Tmnt+YpJH0DZhq6TgD/Ay+AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAt9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGxsbGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaU0yUGgAAAPR0Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYoKissLS4vMDEyMzQ1Njc4Ojs8P0BCQ0RFRkdISUpLTE1OT1BRUlNUVVdZWltdXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqOkpqeoqaqrrK2vsLGys7S4ubq7vL2+v8DBwsLDw8TExcXGxsfHyMjJycrKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP19vf4+fr7+/z9/lcEE90AAARdSURBVHjarZdrTFtlGMf/pzcKQ6Bchs7q6NgG0zFgTGdMFMY08EHZmOhQYdGImWZL8BLjNRpNRoKJUwwmG5sBs1Uy1DgZH3TZhjo+zIVEQz906ibhMu500P7rCMXWD6eXQ3vOaSs+H/o+z/ue8zvvcznPe6pFFEnJSXF7sSKp7HaSYy3rZJZ0MSIMLRRlsip8Sd86N7orJsYX5O8vPlDVPE/nE2GMdpKu2tgYx1MBoPgKnXsjGLFQ9B3kEa2or1tO0beT58hwtAyjnTyqDVgWO13BG4R2sm0vudFO52OqkI/INkkCLHbOlwaMF9imqyETLPbhAjXGg2THsiRaBnnFGDAqdKghE2BRZaCTf6Uvn3mUlKaohkwI6Bp5RlIFWh3Lp85cRbnCExXq7nYDBsQ8l5iXrtoAAJfWb4gPkgTMAjAcfDUVwLV3vwPgQLICRMEdHwDA9O0HqQCQa23WqAVQeVGA6UwpLlSa8+pGcOCwxg+ObycaU3cRmnb3zV0/vb0bDR9rtCoYWTGT9T+Tr/tNo5X8tJNfK6RYQbRDHCLfCNpGKznLQ/FBcJjkmxLbeJLkvfEVGz75G85Oib1wAfjmcryNscpFuyVk7nPxNxPidAd4Ukqpc9FmRvwQ1Lpo93fop1203bF8taSpSRcqKTlZX5a72nxrShY8E/8IQHIGPNMLI+NTtnPT8nUZ+fLtq75LaXfei6e/dEeHpB1sTAQW/7g27fDitjHAB/gyluagz8zamA9g4r1TS9GSMkzOHNuTplDIz5wi2Z+vihBec9H12Vq1S7Z3k+MVKhfojpEDRdGytmeSzgbl5Wbyq/Toud9ip+sRpcDWHUHXfg/0qQIgAALkRu8IkH0+x/2QTRZS2GsYeNgNFPWpbWM0H8Cm3uShbTflmtJbBketG4BD1ZcZALA/i7XPye2krAeNnwPAqkm0XIRPrJCw8ZXyHvEQP1E9XyDztJ9oM4jaNBWD38WjorLJybcj3cktwaFFUXUgU7FtYl5U7FbURkJ2wvN90O0MJUhGMGI9sNwdAanE2Tm/OoI0JYgJs37tx5uoCIcIpTgfmJuXQgxPlYWMxCTc8KvusygKh6Qn4Hpgbg6SJnbgRvnWoJEOBLaLCeSEQ7KBqVApSAKrWfRoJN4EAguMYU04JAuhO2cgeYFazb/0B41UBN1BDlZrwxviKCfv8+vV5C0K3YYMtPx3yK6I8+aeCY4Vi2opmSMPqaPTf+NL5A8yXxr3T3FY7K2F5FZ5SCOHRaWB7JOtgx2zHNkFAHeSO+Qh7/NXAEj6kOyXBF/ypdRbf8JkvXxpEAbg8Q2SRqIJNpRyGF+GPq8sG39WzUje4ryOUNNZtSbWvw4LTm/gGYJziy6xAP9BjMaQrofOB5x0hPWNzZk+eAGv+At44YUgjpODYX1m224BKCSLsQLZzzFofFipCNAoHuoxik/1EzQO0fmA+p0q50y0cTME6AA8v+KdeMbljoY4Rp8D/4v8C2Rr2YaJzeY6AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-l {
|
||||
background: url(@/assets/v3/bg6.hlVmcDno.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAMAAADhcastAAAAAXNSR0IArs4c6QAAAtNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHh4eGxsbGhoaGBgYFxcXFhYWFRUVFBQUHR0dHBwcGhoaEhISGRkZGRkZGBgYFxcXHh4eFxcXHR0dHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGBgYHBwcGBgYGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGBgYGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGRkZGxsbGBgYGhoaGRkZGxsbGRkZGxsbGhoaGBgYGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGhoaGBgYGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbHBwcGhoaGRkZHBwcGhoaGxsbGhoaGhoaGxsbGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaHBwcGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaHBwcGxsbGRkZGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGRkZGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbHBwcGhoaGhoaGxsbGhoaGxsbGhoaGxsbGxsbGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGRkZGhoavoj1/gAAAPB0Uk5TAAECAwQFBwgJCgsMDQ4PERMUFRYXGBkaGx0dHh8gISIiIyUmKCkqKywtLjAxMzU2Njg5Ojs8P0BBQkNERUZHSElKTE1OUFFVV1hZWltcXV1eX2FjZWZnaGlqa3BxcnN0dHV3eXp7fH1+gIOEhYeIiYqLjY+QkZOUlZaam5yeoKGhoqOkpaWmpqenqqytrrCxsbKztLW1t7i5uru7vb6/v7/BwsLDxMXFx8nKzM3O0NHR0tPU1NXW1tbX2NnZ2tvc3d7f4OHh4+Pk5eXm5ufo6err7O3u7u/w8PHx8vLz9PX29/f4+Pn6+vv7/Pz9/f7+0IfVbQAAA+dJREFUeNqd1vt/W3Mcx/FPLWJh7S6oDd1GU9cwVlUUXeuyGcNqdZvbMJvLrJShC5u6TNvJ5s4uGGHMjKkapi6rYG4TMdpVl8qWNssie/0JHueW5iRNT+PzSx7fT87zkXPO953POSJ6HX1SchVKVrWS5IrPzfn/GJoOzAqv7DvrU73wYUH6QUP6gXmXNXV105jU2b8O/KWpxz0Y+6z2jJTe8F/UE33T1Lw2QuT2QlNtUg+7I7EeL7kez3rYtAx4x+PxzE7cqFI/abW9oT1p9ZuMVD46RBboneXDDF0QTLVd+VKdintoE5HnIPr6Rmg5ytCn3VfaVy9A8HCR82G+1nBruAVWiMiCOPfYHoDtZf3c09w47fkixRHip2ud2Rq+6h9VHxrnSpEZYaIz03HOj7hVyyLpwwVwk1PRxy2EI0WkZBt89WR9arUSurUsBt/U19dPM3Ah3C2KBvZVKt0xzVjU/SYsTj/09hK+5ArPK8eM8we8yeX7e+un7RADtnm93mAqluE3TB7mChAHIhVyQPLlbtB+rm7IhBvPUdbNaVitMuATiFWk2N/98H4iPRnwdDhRSUuy3gCd+fs9y0digR/nW1GzFikyWi8pVmQWFFjgR/W0wIt6Z6JmiyPExlrgUUFNf8xSvXM8XKplo9bqtNX9XiElUG102nh6qGIfE0usauWvWKWvHd9DqNtkM2Nx7kSJQ7hS5OqaSSNWa3ucbAfAMuph9wUTA4Qr1wP/wsJT5jwzRQaJ1XIF2Ad7lNmQPoKtsLj2Qufokzuokezxu9r+NvJF9vhyPRs97Mwez4QiLRvXZ4+dcLFqX5XssSPIrpd3g7rf2eDy8qEOPRvPK/stY6ceMlj8GoQCsHTOWz9fo+z33i3wR8XgsD5z3Ho2XN3q0jRbMmJlbpx9L5xlNFppqaoz60xYnTliC2hfi8hhMEOdDrFJVvhmPRshvMbdg9XabPk1zwIv5y9t5jDN2LMt2mxZrIzGgfF1REeKeW5os0VqaLdZ4GNh7VzzzFH1msVdvD3QNR/hEEd/c8N4ju2pFBnt6B8/we5VX8I6byRyV2rQW2hr2EFv0+dsPVdEfqDT5/P52hPYeB7lSO7BaWG2jRFx7Uik5ae+14pCmKfYjts202OXjPUI4cYGVX/NujvVukV5M7hQy0YxlGfGG2nS0lLRnIiQgpdp2SiJMy+jzYU1Wlo6NptwiEC+SHUUaqdnqioffCAiD8GfJgzviRTHrF4m1LScmXitSOD4rIsi1hZWTV1rwmK3j4uq3zxlH7hO2KUetsRutyXfjSlvRIi7xaqc30Hr/BFp/bzzJlhakYMmF5nW/wHDiRiDSjYLFgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAMAAACsn+1dAAAAAXNSR0IArs4c6QAAAotQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOCgURgAAANh0Uk5TAAECAwQFBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYoKSorLC0uLzAxMjM0NTY4OTo7PD1AQUJDREVGR0hJS0xNTk9RUlNVVldZWltcXl9gYWJlZ2hpamtsb3Bxc3V2d3h5ent9fn+AgoSGh4iJiouMjY6PkJGSk5SVlpeam5yfoKGjpKepqqutrq+wsbKztLW2t7i5vL2+v8DBwsPFxsfKy8zNzs/Q0dLT1NXW19ja293e3+Dh4uTl5+jp6uvt7u/w8PHy8/T19vf4+fr7/P3+fNOr7AAAA5JJREFUeAHVwYlb0wUAx+Ev2zhcQZgZTIEyCo9MsYgE80wEs8ikpDKPMqjMzDCLLgU0ZKWUmlGmIRSm0qGWRyqp6SRImMixz5/Tw/ihO20bTz1P76sbi0nPsCpyqduc0LMnUxEqbsetZ41JkZgLnesfnfvaH7BSEbjld46nS9KIfVzJUPhepvdBuY1qxa7w7aFJhs2cU/iOUSnDMlwWhe0QtTKsoUvhq+FsjAY0cFDhmwVlciuCFxQBO66NVslc2sX3ZkUg8QR0HWi8DI6xioi10kW/XcmK1OS12z4rn67/J/P08h3f7Tc01VXOj1VYZh/Bx9lihWGVCy7W1VQP2nkGqLYoVMuh/RmzPD3SAlUK0T09HE2Rj4TdME+h+YSeTPkZeZGfFZJhTt5WAIthgkIxDTIVwE3dLFMoFoGrLxB4U6FYQlAbFIpxS4LK0X9utsORpKGYBzYNRR7YNBR5YNNQ5IFNQ5EHNoVs1Irq2g/mW+QhD2zyNG39VvuqsQokankn/Q5N0HUfwmO6LvkL+vW9FSM/UTvAdaKxDboKZBhWBfS+apJh4iVw7j/cCz9Z5et52HuHFLXQwYXb5JZ5DP50QmOa3KJ/oKvEIiXWwEb5SOqgPkr9JnVjlyRTaTfY40d/A21Pql8pFMqtAle2vC2FdA14F2eclFIPbQslmUquwscJko7ytQZYHVTIWxUtMsyDe1XYCg2pcsv8FU7nyNJHqQxf0Shvdg7I8ABkx52m+xWTDMOqYJ/iYbEMW2iWt3U4LRrwLKQq95f75SH/RJr0F+/L8CO75G0mPCc3y0GOSzLLi1nSds7fKrdcFyvkzdTA5amSFL0BFiqgKT3UxUvS3b9x5mb5GNNB36bCnGXN8KmCeANaXno4f50T1wz5md7CgG2JCiK6vA+39qcVQEJlG3DkCd1ATpMLrtSmKLDo9Mm36x8kTsyI078hbvyMOYMeSlNASVlzBs26L0Gepu504ulU2XD5iF15GE+99Qs0KHYLfloL5CXzFH72jpBbTCM4Xs+9K23Q+AW10FcsD7lOaHhqUtqgO7NePAknR6rfJvg8Sd7yz3E1S9fYLtCxNEperBUuvo2SNMXFbvkZ18V+XfMRFMhPORRJstM2Wv5KIFuG4T3UyF/cMZol0yXeUQDR7ZTJUARjFEAxpCgZtq4O5BTbZVhL5+pANsBMTSKoJhk2E9QiTTwf1JcyvHc+qMf/BiaidyHImEZ5AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABOCAMAAABG1vXNAAAAAXNSR0IArs4c6QAAAqZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGBgYGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaJuXLtAAAAOF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBobHB0eHyAiIyQlJigpKissLS4vMDEyMzQ2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlbXF1fYGNkZWZnaGlqbG1vcHN1dnd6e3x9f4CBgoOEhYeJiouMjY6PkJGTlJeYmZqcnZ+goaKkpaanqKipqqusrq+wsrO0tba3uLq7vL2+v8HCw8TFxsfJysvMzs/Q0tPV1tfY2drc3d7f4OHi4+Tl5ufo6err7O3u7/Dw8fHy8/T19vf4+fr7/P3+qN2dfQAABIBJREFUeNrdmPlfVFUYhy+LBIgigkKoWba4VCYpmGFmWCIKoWimpYaSkaQSFphGhVRuRRlRuFSYEBahljmhFqAi+xYEM8oyM89/0mdmmOGcOyvzY9+f3uU+nzvnvOe859xRFO8UF+8lOOGQ8cZ4r8ikBmhd4AUYWQwcm+zNOy9D3XPeDXSl/mCwl3Ok3O/RU+FLVo9qLMObftKAoMWek2v7wTt0Vj+6vbFRkTaN8xj9ib5HHCYmuiOjIdNhYlHv676u0aXwuMPE71A9xyWaCNEOE7N/haGce7xBFd+MPqixe/HCLKuOQq7Nmakq+GnaI9RoFg6VoH5ufapijxq7LfpXq+2xWL0OUAfKotsuNvP/jo4LmzEt1G+saFjKR+W3zTUx1H6fuzzIY1T3o0Gu6d0zHqH+J81Pd5TmbVm7YmXa9g/KdOZAtvu+8BdQmx/vNxoKWn2kHfglziU4rQo4b/+Mb+p1oMjFSbGoGf5McjyO9Gb4Y4YzctMA+kw/Z9nxhdDqpK+9Dd0uj4Mdwwyuc5R4Ba495HoOl3Vyd6F9OG6Qmknu5v/hbprsGsf0Frpmua96gp7fguSQzwWGn/WkNb8Bn8qRjbBTjgStyS8+d+LgqkAVexTDXNEPqOeyjxgIO6AbWb/9eaESOrmb71Q/Q1reCZ1AQ/nX5Y1A21J12xMCEzs4J2a36jEcn282Y4qMDG+SRtLAhVHvNVggT2NTrM17uo0h6Yr0Kjxpc6rQiOPspFlcrA+00zJB8EMGOGS174V3hNR7GGKl0T0DOaJ/hhar+TLEjCYCtXymKkgJ3eKhvBWsx81hbguVSZIHbtJTsFxwIw1kjJgXpdccoNFup3ewT/Q1thXVy24hXkrXWbMSFUVJsZg9FMkDqBxZH5AmxM9b+2C6Za1YVCaiedx02Nq/orPELNO2T7SYPRwW0V3WLj8PxGJk0+ajHmsvb4r+dvQWYy6IPTBRWqNmvQDLpE7DsMW4D1YIcb8milXoKep95B3QZTEmwQYx8S7IDTUNqQSKsp/6EauLvWIi5G8GfhiduLSyAWrkpvItFSNWNV/InVwPBTbvBAyqbl5XKRyxPqZFvrelgDFFUSKiw8xbzJioOl4sNTdpvTzFiqLoaQ0y3S6/VJQputF9YptgrA17qpH9cnLYvAvNqHKEBhV6VohUcF2N7rCh+9Ro6BDvi2fGYs/RDPHCGtxElQpt1Gg0Wv7RaDRtKjSk1bpvzNoGyTIqSkZzQDyy/K9xVTxYPywQJW3zKC0l6kru8eTIUXy+YfhBOVSBcY0naDbkq0JTb9I/zz2ZaqTS7ovlMS31Ue7IGC11EfbhF43cmu+aTNY6+Wk7DejWuSL3GNE+7ziV1IcxN9AZGFEMNx51lp1TB7c2O/xwCn6rF36e4vwnhZ8Grqyyu3YFbWkEfUGAy5lYdsl0LT2WLHxQh28uNd0OTs12u1w21JrW7Z3KT3Zte2lj+u7jF/Umv3qJJwvGP7H4jnyV7iiMUzxVQHx2yZU+I+i7Ln2e+YSvMlb5hHj9F4Jb/Qfbt6tIIlhQ6gAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 39px;
|
||||
width: 29px;
|
||||
}
|
||||
</style>
|
||||
66
src/views/Jyh/ProductServices/ProductServices1/ModTotal.vue
Normal file
66
src/views/Jyh/ProductServices/ProductServices1/ModTotal.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="mod-total"><h5>实验室已为超过 4000
|
||||
家客户提供卓越的安全服务</h5><h6>即刻行动，与实验室安全专家一同开启智能安全之旅！</h6><a href="javascript:;" class="EASE btn">申请试用</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModTotal"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-total {
|
||||
background-image: url(@/assets/v3/num-bg-wave.png);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 270px;
|
||||
padding: 67px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total h5 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
.mod-total h5,.mod-total h6 {
|
||||
color: #1a1a1a;
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.mod-total h6 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 29px
|
||||
}
|
||||
|
||||
.mod-total .btn {
|
||||
background: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 34px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 32px;
|
||||
margin: 0 30px;
|
||||
padding: 0 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total .btn:hover {
|
||||
background-color: #7aba4a;
|
||||
border-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
</style>
|
||||
50
src/views/Jyh/ProductServices/ProductServices1/index.vue
Normal file
50
src/views/Jyh/ProductServices/ProductServices1/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product1 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
|
||||
import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
|
||||
import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
|
||||
import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
41
src/views/Jyh/ProductServices/ProductServices1/indexOld.vue
Normal file
41
src/views/Jyh/ProductServices/ProductServices1/indexOld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
102
src/views/Jyh/ProductServices/ProductServices2/ModBanner.vue
Normal file
102
src/views/Jyh/ProductServices/ProductServices2/ModBanner.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="banner-container">
|
||||
<div class="txt-content wow fadejinzhiInUp">
|
||||
<h1 class="zh-title">金银湖安全大模型 (源鉴)</h1>
|
||||
<p class="en-desc">
|
||||
懂代码，更懂安全的 AI 专家
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="action-btn">
|
||||
了解研究方向
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mod-banner {
|
||||
/* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
|
||||
background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 520px; /* 增加高度以匹配大屏视觉 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中内容 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 增加一个深色遮罩，确保文字更清晰（可选） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zh-title {
|
||||
font-size: 48px; /* 增大字号 */
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.en-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
background-color: #C8161D;
|
||||
color: #ffffff;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #A01218;
|
||||
box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.mod-banner { height: 400px; }
|
||||
.zh-title { font-size: 32px; }
|
||||
.en-desc { font-size: 14px; }
|
||||
.banner-container { padding: 0 20px; }
|
||||
}
|
||||
</style>
|
||||
631
src/views/Jyh/ProductServices/ProductServices2/ModTabs.vue
Normal file
631
src/views/Jyh/ProductServices/ProductServices2/ModTabs.vue
Normal file
@@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<div class="mod-tabs">
|
||||
<ul class="tab-hd wow animated" style="visibility: visible">
|
||||
<li v-for="(tab, index) in tabs" :key="index" :class="{ on: activeTab === index }" @click="setActiveTab(index)">
|
||||
{{ tab.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-con con1 wow animated" v-show="activeTab === 0" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">漏洞检测</h4>
|
||||
<div class="l-desc">
|
||||
基于 AST 语法树与 CPG 图构建技术，结合静态分析、动态增量分析、AI语义理解等多种检测手段，可自动化完成函数调用关系构建、漏洞精准定位与去重。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>函数调用图构建</h6>
|
||||
<p>
|
||||
基于AST语法树的函数调用图构建，支持 RAG 知识库、Agent 工作流、AI
|
||||
工具集等代码检索工具，实现自底向上分析、函数索引全格式化。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>项目 CPG 图构建</h6>
|
||||
<p>
|
||||
基于Joern的代码属性图构建，通过 Joern 环境初始化、CPG
|
||||
图构建、终端叶子节点获取、高风险函数排序等流程，提供完整的代码语义和控制流信息。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>漏洞扫描与验证</h6>
|
||||
<p>
|
||||
支持函数内嵌消除、基于 CPG
|
||||
图查询漏洞点、污点风险点代码路径识别等功能，结合Agent智能体实现代码片段索引、污点分析、可达性分析等深度检测，提供大模型与形式化双重验证机制。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>精准高效检测</h6>
|
||||
<p>
|
||||
无需人工逐行审计，在代码提交或构建阶段自动完成漏洞检测，可通过静态分析与大模型协同构建函数调用关系，检测准确率提升 85% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能去重降噪</h6>
|
||||
<p>
|
||||
无需手动筛选重复告警，在漏洞检测完成后自动识别并合并重复漏洞，可将误报率降低 70%，大幅提升安全团队工作效率。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>持续增量分析</h6>
|
||||
<p>
|
||||
无需全量重复扫描，在代码变更时仅处理变更部分及影响范围，可支持精准定位代码演进、持续更新缩环、快速迭代验证，检测速度提升 60% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con2 wow animated" v-show="activeTab === 1" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">漏洞修复</h4>
|
||||
<div class="l-desc">
|
||||
基于 NVD
|
||||
数据库与多智能体协同修复技术，结合高质量评估数据集、测试环境构建、RAG知识库等能力，可自动化完成漏洞修复方案生成、验证与测试。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>评估数据集构建</h6>
|
||||
<p>
|
||||
基于NVD数据库构建高质量评估数据集，涵盖漏洞项目、漏洞补丁、漏洞利用、测试套件等维度，支持测试环境构建、漏洞利用测试、补丁测试等全流程验证。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>多维漏洞知识提取与融合</h6>
|
||||
<p>
|
||||
通过软件漏洞特征多维漏洞知识提取与融合技术，整合全网、函数信息级、代码级、函数级、技术级等多层次知识，基于自注意力机制的漏洞行定位技术，保证漏洞知识相关性与可解释性。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>多智能体协同修复</h6>
|
||||
<p>
|
||||
基于RAG知识库的多智能体协同修复系统，包含漏洞修复智能体、供应链修复智能体、验证智能体、测试智能体等，支持记忆/决策、工具集、石线搜索工具、动态执行工具等协同工作。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能修复建议</h6>
|
||||
<p>
|
||||
无需人工编写修复代码，在漏洞检测完成后自动生成修复方案，可基于多维知识融合与大模型推理，修复准确率提升75%以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>自动化验证测试</h6>
|
||||
<p>
|
||||
无需手动构建测试环境，在修复方案生成后自动完成漏洞利用测试与补丁验证，可确保修复方案不引入新问题，测试覆盖率达 90% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>可解释性保障</h6>
|
||||
<p>
|
||||
无需担心黑盒修复风险，在修复过程中提供完整的知识溯源与决策路径，可清晰展示修复依据与影响范围，提升安全团队信任度。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con3 wow animated" v-show="activeTab === 2" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">安全知识问答</h4>
|
||||
<div class="l-desc">
|
||||
基于漏洞知识图谱构建与RAG检索增强技术，结合多Agent漏洞语义增强系统与COT指令集训练，可智能化回答安全领域专业问题，提供高质量、可解释的漏洞分析与修复建议。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>漏洞数据实时更新</h6>
|
||||
<p>直接提问“这段 Go 语言代码是否存在 SQL 注入风险？”，即时获得分析结果、安全建议与修复示例。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>漏洞知识图谱构建</h6>
|
||||
<p>
|
||||
针对每种漏洞类型，结合专业静态分析的漏洞底层知识提取技术，提取漏洞知识并构建知识图谱。基于大模型获取漏洞之间以及变量与补丁之间的联系，构建变量类型知识图谱。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>知识图谱增强检测</h6>
|
||||
<p>
|
||||
通过知识图谱的双阶段检测机制，分阶段检索知识图谱，获得漏洞与补丁知识，增强大模型漏洞检测能力。支持一阶段检测（漏洞节点、补丁节点）和二阶段检测（一阶段检测结果、补丁节点、知识图谱）。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>专业知识支撑</h6>
|
||||
<p>
|
||||
无需人工查阅大量文档，在遇到安全问题时可快速获取专业知识与修复建议，可基于知识图谱提供准确的漏洞分析，问答准确率达 92% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>可解释性保障</h6>
|
||||
<p>
|
||||
无需担心黑盒推理风险，在回答问题时提供完整的推理链路与知识溯源，可清晰展示答案依据与相关漏洞知识，提升安全团队信任度。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>持续学习更新</h6>
|
||||
<p>
|
||||
无需手动维护知识库，在漏洞数据更新后自动增强知识图谱与模型能力，可持续跟踪最新安全威胁，知识覆盖率提升85%以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con4 wow animated" v-show="activeTab === 3" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">安全工具调用</h4>
|
||||
<div class="l-desc">
|
||||
基于上下文构建、项目 CPG 图构建、漏洞扫描与分析验证等技术流程，结合 Agent 智能体与多种安全分析工具，可自动化完成代码安全检测、漏洞定位与修复验证。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>上下文构建</h6>
|
||||
<p>
|
||||
基于用户问题驱动的上下文环境构建，通过用户查询理解、Agent记忆检索、相关代码文件提取、上下文环境构建等流程，为后续分析提供完整的代码上下文信息。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>项目 CPG 图构建</h6>
|
||||
<p>
|
||||
基于Joern的代码属性图构建技术，通过Joern环境初始化、CPG 图构建、终端叶子节点获取、高风险函数排序等步骤，提供完整的代码语义和控制流信息。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>漏洞扫描与多工具协同</h6>
|
||||
<p>
|
||||
支持函数内嵌消除、基于 CPG 图查询漏洞点、污点风险点及漏洞路径识别等功能。集成静态分析工具、动态测试工具、符号执行工具等多种安全工具，支持工具链自动编排与结果融合。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>自动化工具编排</h6>
|
||||
<p>
|
||||
无需手动调用多个工具，在检测任务启动后自动选择合适的工具组合并编排执行流程，可根据代码特征智能调度工具，检测效率提升 70% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>调用链追踪分析能力</h6>
|
||||
<p>
|
||||
无需人工构建分析环境，在代码提交后自动完成 CPG 图构建、污点分析、可达性分析等深度检测，可精准定位漏洞路径与风险点，分析准确率达 88% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>智能结果融合</h6>
|
||||
<p>
|
||||
无需手动整合多工具结果，在检测完成后自动融合各工具输出并去重降噪，可生成统一的漏洞报告与修复建议，结果可用性提升 80% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defaultTab: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const tabs = ref([{ title: '漏洞检测' }, { title: '漏洞修复' }, { title: '安全知识问答' }, { title: '安全工具调用' }]);
|
||||
|
||||
const activeTab = ref(props.defaultTab);
|
||||
|
||||
const setActiveTab = (index) => {
|
||||
activeTab.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.defaultTab,
|
||||
(newVal) => {
|
||||
activeTab.value = newVal;
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值生效
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate .mod-tabs {
|
||||
margin: 0 auto;
|
||||
max-width: 1360px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 40px 0 20px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
-webkit-transition: all 0.4s ease-out;
|
||||
transition: all 0.4s ease-out;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li:after {
|
||||
background: #4bad52;
|
||||
bottom: -5px;
|
||||
content: '';
|
||||
display: none;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on,
|
||||
.pg-evaluate .mod-tabs .tab-hd li:hover {
|
||||
color: #4bad52;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd.EN li {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50, 50, 50, 0.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l {
|
||||
position: relative;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 584px;
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt {
|
||||
color: #fff;
|
||||
left: 57px;
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 169px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-tit {
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-desc {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: 26px 0 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 50px 0 0 83px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .item-list {
|
||||
padding-right: 78px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-tit {
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item {
|
||||
margin: 0 0 40px;
|
||||
padding: 0 0 0 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item .ICO {
|
||||
background-size: 100% auto;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-con h6 {
|
||||
color: #4bad52;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-l {
|
||||
background: url(@/assets/v3/bg1.B9IGVx_y.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAAXNSR0IArs4c6QAAAtZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcFhYWGxsbGxsbGhoaGhoaHx8fGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGRkZGhoaGhoaGQes7QAAAPF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKistLi8vMDEyMjQ1Njg5Ojs8Pj9AQUJDREVGSUpLTE1OT1BSU1RVVldZWltdXl9gYWJjZGZnaWprbG5vcHFyc3R2d3h5ent9fn+AgIGDhIWFhoeIiYuMjY6PkJKVlpeYmZucnZ6foKGjpKWlpqeoqaqrrK2trq+wsbKztba3uLu8vb6/wMLDxMXGx8jJysvMzc7P0NHS09TV1tjZ2tzd3t7f4OHi4uPk5ebn6Onq6uvs7e7v7/Dx8vP09fb3+Pn6+/v8/f3+/jZlGfIAAARzSURBVBgZtcGJf84FAMfx77PjGRs2c2QUm6VoylFyLMdmmKOkiGooUY4cqSgVy1JKIoq2pMOoxCK1ImfMNCamaZjYxR5b6/n8B/1+z+/Zs2fHq9dGvd/6v4XqxgRltNcNeZUNuhGdSiFWN+BL4LC/rttI2A4zdb0aZZEZsI2CMDVMt66yPA/DFFXGGrn1i1A9tCq9cqtM4SWkSloK0XIZSrbqodlVFsn0GVcjJTXLZZ+vTKlkqD5SOOkjKQ4WyjQepsjQuozn9C8e6ipLPAyS7EfIDpTJ9h35LSU9jTNcloGxqmUwRbfIxe8sc6Vn4QFZelSwQtJ60mQZ4Kxoq5rCS0mWJW5tB7Ur5GtVegtnL6n3+i5y8T1Ijl21vAYD5bEORxdVCj1Puk0eU2GcamuSwwFV6g9LVGUSJKhS8EV2qC4PU2KXxfcAvw+Ztymj4BqUF/361ctHyQuRWxRl3eQlwC63+L5yS4Rr1LA/1ibL8D5yC7JJjU+f7aNqWk8/gsWZs+uT5G+Pl2M5sSBc1YwrTpOCCykapCo9NjqAv3OgaGELuQRNPQd/ngWc38SoyqQKDkmKKeJKvNw6pzjBuXVsIvzcXh4hWyA5fqMD2NZHbtPh1O0y9L2Eo6tMHVaVQ/6CcI2EbYHy4rMaZqrVMyeB1DtlGgOZ4XLpcY5hknxnFEPhwmDJfoxjoarGvoOC1lLAtLNQviRQ0hx+CZNb816Suu+Bq0tbyTAFhshyc6Qsnct4Q4aguRchK1byiW4kb9NKIe02uXzPDrmMz4H82b4yrSTPR6abksG5xF/VhG6CSxNtcmnj5AmZXsIlRaYYiJYl/hSkR8jLHZnwQ4TchkO4DD3L+XHYoFQYLYNfMdPlFvoFnB8gjwGXYYm/Kk2m3EeGF7jQXPI7xIcyZZAoj2kOHI/ILawYElVlHnkyJbNVhuXslWkn76vKZHDeK7exDhxT5PEkDpsMr3CmkaR0Nsh0mCR5jLoM8+Qx4DxsDJHbKAiToT9siopcDhNl8ClgltwClsGVcfLScTeciJUlAibItBKXNJsMfSBOlu574XgvVWNPAj5oIZf9bJbJb74DnG83kSmJy3aZGi8ug4+DVdPQU1AyO0CGOdBbLkHRMSFyaVfCezL4jP0NLiaoDk13A9kJflKTXPY0VjW2zymNkDTyILAhTHXpVMofwNHHgpQAH/nI2yJYLP/70zHFqE5bKG4/OB0oeLfvStjcTB7+78C2u17PA44+eorD/qrDCJgnadQeDBlZcDrBV5YRhyF3H4bMBD+NgRmqrVEWmQEydV92AUvJT2sWvbhq52Usxav722TYTkEb1TIf4uVmfzDlDDXkp05sKktUGWtUU4cSUuWt44QVhy7+hcFZkLF2cpRNVZKgn2r4lKuRqs3e9e5A1dIsl72+qiYOFqr+JsAUefM/Qnag6s+2i/yW8jILRqshelawQlXaFrJVDbOcinvksQ5HFzVM6HnSbXK7D06+2VAH4XFZfA9wffJC5DJi//V6Sv+BfwBIbvfBNZtweQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA6CAMAAADMWVqUAAAAAXNSR0IArs4c6QAAAkNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUICAgHh4eHBwcGhoaGBgYFxcXFRUVHx8fHR0dHBwcGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYFxcXHBwcHBwcGxsbGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZHBwcGxsbGhoaGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGxsbGhoaGhoaHR0dGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaZrZiaQAAAMB0Uk5TAAECAwQFBgcICQoMDRAREhQVFhgZGhsdHh8gISIjJCUmJygpKywtLi8zNDU2Nzg6Oz09Pj9AQUJDRUZHSEpMTU9QUVJTVFRVVldYWVpaXF1eX2BhYmJjZGRlZ2lqa21vcHJzdXd3ent8fn+AgYKCg4WJi42Oj5GSlZiZm5yfoaSnqKmqq6yvsbK0tba3uLq7vsDBwsPGyMvN0dLT1djZ3N3e3+Di4+Tl5+jq6+zt7vDx8vLz9PX29vf4+fr7/P3+nMc1QAAAAuJJREFUSMfVlulfTFEYx2fmtk1laDGtWqzTKksJES0itEipLJGxJEsoJEsSIilZsoUWoqQyg8bcaX5/mnvvuTPN5864nUkv+L2Z5znnfufznPM8zzlH4RtHIbVCqjhQaMUcYgXyERb/AYtTyCrpX8PW5ola4xbWZdu7R3OK+YcvdIX5aUT5TY95abWexIpttsD6bDPdltgV+0UIZKrSLUzZix8nUoreg42gxXQl+uONQD5nBhtwiQ7b1kv2aZLhvWZ00GCqRh4ZHzHgp4C1opsGuwAMFYZypQDs49xoI2oosHgrHmsE6zks9ZlVQ5hcRIG1YjyEWDH9JAFZFAnwMKLeZgdfHQU6UmjSHQrsmvY85zN0jaMDklwMz4TFA/E0mEdguKNbBIRNe2ptgEtMrf8M9J1k7ANNGLU7UTdYWLs3OmNMGymju97iQAKLJjs1LMxZypywGuDeps33gSPET+yDyR7zG0zWppYNgA2TYv1oU3It0o7h5IzSY1ceTAFnk0SVcicq94nWiAYJxiVJ6N2trg/nMWGVt/BQgi0AMvnfbNfYNxU/edupA5ghtHNTTCf6dKvzKuuaTcBlnahyoIT7JtKAWunaqrmay87pBI4Sf8lLWBNskz1gz2ccGIQpWop53yHhtCjFgUgjvxLxPwZJB+Q5p1ulfwsMHvKyD5wCq7HZ2utjQFeq65oM8lc6eGnAKodognzoSjkAyJlFB8wDts8CYyzQOxzsgRrK++0dWm1mxDUzLJ3pVFgDzDqR+iQkgC2iwcJMeEVup9cw1W3Y/wFm7iTLBXLlj9fDwNeDi5WKRKCYL/fvuKhQFJB2kNNpPjSTYQTjHrzbwtdNFpA109WR3kNKbkJFsCe0F1VUflV1HVDIr3UCZ9y6TV/AfG5dxQB+xbiFLfsohGrdSRKwJ1lWaeVbfMUz46YBeLre/ReeOsT/bx+GO5bLavf//DDcu1JWFXP7xJ4N5rOUQt5S6jcJyGZLl4Al1gAAAABJRU5ErkJggg==);
|
||||
height: 29px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAAXNSR0IArs4c6QAAAuVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaMeyWdgAAAPZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLjAxMjM0Njc5Ojs8PkBBQkNFRkdJSktMTU5PUFFSU1RVVldYWVpbXF5fYGJjZGVnaGlqa2xtbm9wcnR1dnd4ent9fn+BgoOEh4iJio6PkZKTlJaXl5iZmpubnJ2en6ChoqOkpqeoqaqrrK2trq+xsrO0tbe4ubq7u7y9vb6+wMHCwsPExcbHx8jIycnKy8zNzs/R0tLT09TV1tfY2drb3Nzd3t/f4OHi4+Tl5efo6err7Ozt7u7v7/Dx8vLz9PX29/j4+fr7/P3+/H7PQAAABYhJREFUWMPtmGlYVGUUxw+IoCC4YEkpqAQpuKJSKi5pWmq2uJVLruReiguWCFJomUvu1qSpDZJWkKWm5lJauWQa5IaCQpg6EwjT4Mz8Pvdh7r0wwzCD2dOHns6n/32fO7/nveec95zzjogHC4+JkPs2Hfr/AKTHis8Whd8nZIYNKImTBhGfsjey0d9itLnL+XXFWH7DbkV7UwYF3ytkCsXBMhAHs+wYEXAvjDo7KPaWaFg7NO5z9sYNSdh4A6AwocYfVmvUZeC9IQcxBWmO9em+8BxgmOxTI0b4YaAAgBmO0XksCzgeXQPG8wY4GOefVMSFMVVC/OQxMPbzhPBKBtMEEREJdJVs3qNKsc50z/B+F860d5uxHS/BR37uGCsho56HtG/yPUxyA1kE6XU8nZ3oIiwdq2c8C3pHRquX5+Vwec7YNhVLYbmYe1XPiDRwNqjSc8TiS1q6XkqLsi82/gnrc24ccoSySj6N2GAFLJdvYci1ANb1USJS7zCMc+OQF2GsEoCElBFjS6D07YENRIdeAgcsMYJpgvjuhFluGHVzOeolIiIzLQCUzmtcybGN5hnh/Q8gxV2KvAbdRUSkq42ik3CjtVN0Wh4CWOvlhuGTx1a7SuZKQ3mLcj/nEPt+Afra7jbSD3qov0oX6QvNnCHxsM99RfmQ88pGZ2FN6LyfAudkG2bjpPty0qCcBEUG/wnABCdIn3IuNnV/8vqAWifa2oDSKfZ9hU7NJX9GS5HYOxS08lAC5nJTdftirLEdfO3eTjQDUJ7U/gbFnTzVkZ18rCauFibx2Q7WnK+zLWDC3NNjPbupuaQDqKUrEbLCRSQsA2yDPTJqw0uKHI1NOYWhZrK87fXuENZIj5AQeEqRCzmnqKlYwxXZzKTt1HVx1+l0ugzI1NntAkWKyuWk9tYZ8pXV9F8+UZTu6CmdTqfTRYvEUL1t1iDfuHmrm0iEXq/X74EDertdwqiofE5U2kmBsnqLq4raC/v0er2+rfrN0EfUrM9XJwMsYWpxLmOuIrNZoKhe0KKyYwJgmCJHYVVOWYtyMpQM3IJVKY++JuKVN4eAY2e4rXm/HQzUAoW+mYg02QJLlbXeEKuNDibHGO3S0lRyWKVmzy4wnT/9axnsUbtAKvneitzAEUfI6+SpMomb9dUylGyvlNYlKiPgmrYnyWNhlZbzqCLb2zTXiUTOzqdgbpT2PKviayJhgCOkoZnZql5DaWg1HbCJsSJ3xmNznsC2cFqVLczs93MJqZ2JpbX6cIw9ztn/AnQR7dCw2iUkjYoj1LUiKzTzL2Sb9rAKVvlVgdROg01ax1jPNd8qB3EmDO75gF377YZ9TZ0gTTLhkH+lIXV+1dNc7wZgS61rHx9XQ8m8wEqQgFlG2OQvIj61RMTrSwwhVSEB14GKLjm9HAqX9PUTHXrx7Z16DSwJXtI85YLN+vOCB0fBRBd1ZSS2cY9swFZfmwoATDmF/J5tAtjcWqS/yX76bxs47O0CksQpkTbwuLbS6c0rWs3IXxorIn3N3N0U/8p2G1hdDkuTKYuSBK172mtr50mJF7m6ID7WW0SksZG8KBGRrkbyXM5+zYsxn4fr/tXPbK9CjF0NhOEui+0zRgAOhVQLySJLbU7ZldLRwULHJw57By60rQ6SQ6oqt5LppvhPs2EYXcs15ATLVJmudUyXNqgUfnzCJWSdlunBJt5w28hijgPpHVxAJsIce9SWay6udvKaXgwcmdTCARI27iBA8sMikWthjceuGjzfAJC9csbTXTL4qkv/acvPAPzxA9w9e84G23xrcOsJHLnb5tzp9o0JCtpovw6m+dXwFhcydNm3Jcrv73y3YvhDIiLSempqysSwe7qVejVtl8mBdqFe///h8I9Doru1lX/F/gIjzb047a6x0QAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAAAAXNSR0IArs4c6QAABsRJREFUeNrNWWlsFVUUHrayRgRt37vfmS6QlqIlIFSkkIKhwSJVUCRgWARSZTVGQRBBCCAoRUV2UIxFlIQlrLKLQhVFtEBAERQECRaBKmWrCKX1mntm5r3pvJnSVyhx7o/Ou9t377nfOee7U02rnKeKP9LXDNHJNbQ79aCOGCQ24R9ILv9iH00QsZUP+xxOm5D2ck282/CuSgPVa2O5AUTf02t4Eu38XTAcG3CNa4/o8ZUCm1yDchggV6SWbiEdH3HLX5UCjQ948g+TItxaaQCuq13fdoNTGsOuCNbENBAd/HGloCWkmHG797sXEqdQxwRpi4MmrfJpmFbFqBVLmGa3zvD4mlpVE7YVU2qgCTsEJaU4vcaARrSiGU2oCG9J9BMzsBFHUYAb7KWFOI1d2A+Jv/XaPH0i+/Dv1B9NRbrYyUsaZi5wAyT2hmfKpnoWzrt4aKCITWbPxZDiIulWBGPofLNtOCRKtOrlDH6iO/bYIE5iK2ZjjNgMiQs0UkzFClyFxHxz8kOQmBMcLjrzsvhk9Qzev16enXbliYzgJ3EC0YGW1yGRZ77/Boks8/0yJL1stxUDt+dFtFfv/vtvAipisd4EPUXz+W9X24R24F1BV8I3kFjpdKOYBvzeX73fxJfRCQUMVoDRcbWwVhnZcowQ4Dl8jtV48jfYOt3MlmjkQeKAuYiPIel42bAvoBgS1/G2Wqsvijk8sVQPO/AjfHZp6j2yHk4w9EqMwlxxERLFlGK4Hy5A0qwyoi4W8V7PUNtAzlFnE+cFnFwDZyFptXlEyQxtlatisDkik5eX4hkWsIMH7AuyD59CYr/DJjZgTcMktTNfI+NXZD0xFV/jEv2IbGpieQd+UCnEm1JLGHalFf443Sl3mVwWcKSfk192GVTtwezu63W2o9gcn9hpZCQAf+uygDWNZqk9I9Fj4qo4rLKTQcDQkJjBUXZPXK1SEBMhccU5xAnsi0IhJNZ57HcQb6in+24TcUlNFisc9dshsT2ktwNY0zCZjflo6MwxDfCnCj92O9pzag5z8MEQiEtOV3IH1mvjJCR+CZUC4PBD7ilR9OP1jnXWxwqu784/qjWurxMSRbL/YSyDxHk9gzpSCrXQExrX1zTxFPcd54BtxTGhmBOk80mK4AiTZ6Q2u5FoKE+2BftVFC6zFOJnzmBF9micFMFuVCDe4XnSnfsdzEOfNddYhzrSeGzlk6lI+SlIRTGVzdzfPIg9jtRHx43uOtFQmxy3SjF2IVu8ikzqpWeIDmhFTcRMSPxBup6gN9fbUEf0xmjMptXGYsX4QBRTwfYoWgaY3UJzeqqYgW020VKIL8QU9BZfQuIzFx8IIZdZ341HF/masZmtpCrpuD+LrkBigd3QS5UyCOTdXEz0t7Z0Ao4Ek3y5gFua8+zTqmOaobQ58qmtKYxCX12rb3VRbHY+glei4Yg41yHFi2EA3xuw2TrezHq+T/WgVWx0Bd/DMnQKm+I7QyWUfuLu9oo4XsCaphgiDpvg56J8gfpoTKciSJppGXqc0rvxNV2Dis5xuktYwMfUSeKMOjbnSKywZSilLijHI2nYFFO5gXMhsYjSUIK3XASGxA3zlDlvLHAH9rdmg7UMC/grzm8a9QwVsob0N6511bzow6buqDrqCWEBb4OkVR7z3ROgl8FCMxaHTtJVtUb6wwJeB0mbPfNyCSSLIV8j5u2b6ONa5rGpM0NbxBpWoG5jdjOr+3iUK2Ya0ZtXMB7fQuHLqp5w54ExzVAHij59fXXdCg1Urb6o0BahwuFptzF8CDvc5/PVVQKJRhqysxiShnqQ6wkDOCxybTQCpdsTX9NIkkbHc5A03kOkpYdK+ZsCK12+3MOdOBLqGUbHfZBY6gGcymS4Lyzgb70VtpGAzZyMueo+6GFqI9IkhwV80D2RataN47KpT6iXlzk1TY9nFnYKC/iUigseIVhZY0spHYk88UxpIc9psZYRQMIArsZkHeYqEZY5lCzLMFUuYAHaWd9ytAD1MKn8wCKGT/Exe12sEC/hgKXfotPtEfTpQINEPhZTL0uJcJLLDgOY6ag3N+wlUjEZe/kzhiqXMD0oDILn2Ua8xxdpq5zAUjGW9kCKnWEA9+Udj6RZ2M2fEU0lRzk0IKi2XBxcdMa8gOmDJQ876H0xBWPwPA0QPURn9VkJ+ZSGbugtBtEImiBmYC0OiRuOkVexgYbopJXv8ceJfmIhcvneVJFSjF+xFqOorftH1XI8UT6Rikxk0WocxCkUoMgFRn3hO4tj+FwspBH0OBIr5V8CSRF6QxHjT9Ifogf0+Eh/ZD2P6+f/8/kPaURwNOuwtMAAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHBwcGxsbFhYWFRUVGxsbGhoaFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGBgYGxsbGhoaGRkZGRkZHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoahQXVxQAAAKZ0Uk5TAAECAwQFBgcICQoLDA0ODxITFxgcHSEiIyUmJygqKywtLi8xMjQ1ODo8PUBDREVHSUpLTFBTVFVYXF1fYGFjZWZnaWxub3J1d3h9foCBiYqNjpGSlJeYmZqbnZ6foKKjpKWmqKqrrK2vsLG0tba3vL2+wMHDw8XGx8jMztLT1NXV1tfY2drc3t/h4uPk5eXm5ufo6err7fDx8fLz9PX29/j5+vz9/ud+XxgAAAIaSURBVHic7ZTpVxJRGIdHtJS0yELMNNtMaLPFLNuppKxIC8v2fU/KysJyKtvBpI3KqDAL5Pk7O3eGphEBGb54Ooffl+e+895nzl3mjCSly4yj3ba0zQxZMwiRFpNRbeYZIAq+amNeUwgCDTU+GGktzF6bdQXih8skyeQahr6F2Xobh+DVMnVceRui7qnZaNYuiLWb/5YFzjA8rp/Y2z5untULsbaSzJpNrOxA8so2DcHLpRk0U0sk9Vkop9VRms6r9sGvvUUpe+vF/axM2SpsHQFfjVYv7+zpPd+sfTnlZ4HjlvHegj4YdmnzLKdRcm+ONmNtEIKNSdoUdxTuVGr1tBfwuetSAH7M1R5ajgHnyvXekkcQdhb8e9AB7cXiciL06r7zFX74tEErS9pi4LXqXjQvTqc62gqbdY1Szyhcna0WxQ/EBc+v1eUQo/bE0E+3vlO7IwyhCkW0Yzgu9SCeGPW+VqlrNdU5HF844RCJclCgEfYLNsEewW2wRXA3rHPYzbpdv8Ot8De7BKZDs6ANGgTrYbHgaqgYe5F5MS/mxf9dXOXxRHjoEYlxV+AI3BI8BdcEL8IFwetw0uPUxH3G/lVenRh7/fF5v4j//TOFgbcK+geCKgffqAwOfB8jhqSsc2PyRFmWPxD/mXVifJNl2SxJRv//asqE2HPzqaHcv5wQnRNtKzmLJk3cWWQwdQkx51PNUazKKSbpDyfEdItE0oMXAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-l {
|
||||
background: url(@/assets/v3/bg2.ED2KfGoJ.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABACAMAAABvC9RJAAAAAXNSR0IArs4c6QAAAoVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYHh4eFxcXHR0dHBwcHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoawUAFEAAAANZ0Uk5TAAECAwQFBgcICQoLDA0ODxARExQVFhcYGRobHB0eHyAiIiMkJSYnKCorLC0uLzIzNDY3ODo7PD0/QEFCQ0RGR0hJSktMTk9RU1VWV1lbXF1fYGJjZWdpamtsbG1vcHFzdHV2d3h5ent8fX5/gIGCg4aHiImKi4yNjo+QkZKTlJWWl5iam5yen6Gio6WnqKmqrK2usLKztLW2t7m7vL2/wMHCw8TFyMnKzM3Oz9HT1NXX2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fL09fb3+Pn6+/z9/kKeQQUAAAOySURBVHjarZb5X1RVGIe/ICiorBoGGSSlIUtkYxZFSWakhUtESFIhZmbZHgUFhYGtKKHYRlKZlCmoLGVZsgYoiwhc7vP39MPMwMw4M1w+n56f5v2e89x75j0z9x7JBwk3aE4s3NpoTtRnB1sW7v54GAD6ylKtzF++twOg5bn9FwBOF0b7nx+S0zAF9FfcISkg47MRYLzu4Xk+BVvVFcD4etN8Z7I49wRAd0mSt/mxHw0AnC9e5p7f+vrfAH1PR7rnCzZ/awCXD6zxcrHAB2rGgbHD6wOnszsrBwGTiRBfS37K3sFLb6yUpEVF5wDaXniZMZ/fchukvdkJ0JQXqHRgqHqt9Ix/JVTzsmqvAYuVDsWhkgVFUtQHDiVdVhXl/H9KRP5rBTFzUh65AkxsmYOSdhWjfRIzw4pi1NTU1NR0MJCihIs0WFGcVEp6ka7ZlU0/2hnmkKRSK4qTVzGKEnOvUWVdib4IQE+CdUWxjSacTJUUv79y981WFGn5ulWSVDgJjOdYUuxkmYycGsNcY135ij9iFN9NQ0rKXotKHy9JKnVslj8l0eZ4YPxOlaTaWZW0n8H4ZqkklTH5fPorUG2z2Wy2QF/Kil4A2sMl3WjfoHOuTyMvyidcy719n8keSYr7zmCqNk7+lQHeklTPT/ZyadIS95Z4UQYpknSQM96b6E05QUesUi9TYV3ZAOMdBqPJ/pRkWOuS5RnA0EYfhp6A+VoG2a7hLfBFpC9DuxmSgqbY6RrOh+0+DVXQIamZWutKM4cllYPhil1ZYXgFCiRl4cl2SYn4IFFSYD9n891YZVfK8z3Z0ctvkqR9mHddt+hEyLwu3AqPSZIi/qXJkhL6Dy2O12Uh5HmMRr0H74d5hO/Cg46Pwc2MrHQbTBoAOOv2u1emyZGZGWOcWegyGPQXk+1/wveuRmwn3S5/hQKon3mp6yHIlnbD6pls0Wmm1rteohrKZ6piBiVFw4aZGx+DXW7rDDoO70xXT2LES5mwbnq8Dg56dCP8VyhxFktGacvd2cMl52KD66AuyLPpEafgU2e6wwQYd+5M+HE46uUIGNkEDc6tePQXzB/ucRRxLfCl10NjyFFone7RwukOZvRAWYC8ElgOI1s8woA9Bsaz8sm2UTiwwDWJOga998sPyW1w3uUct7ETTsbJL2G1YLztuFHU52CWBmk2cvqh9V5J2twFF+6bVZAUcwQ4dNPqRjA/XGTFkPR4F1w1oDXDoiAprGQChndZP/NL0m21lTFzEvzyH16BnDy4upTwAAAAAElFTkSuQmCC);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2CAMAAAChp3phAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAKysrJCQkHBwcGhoaFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGBgYHR0dHBwcGxsbGRkZGRkZFxcXHBwcHBwcGxsbGhoaGBgYFxcXHBwcGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHR0dGRkZHBwcHBwcGxsbGxsbGxsbGRkZGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGxsbGRkZGxsbGxsbGxsbGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGBgYGhoaGhoaGxsbGRkZGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaY4gg2QAAAKZ0Uk5TAAECAwQGBwkKDA0ODxAREhMVGhscHh8hJCUmKCssLTAxMzQ1Njg6PT4/QEFCQ0ZMUVRWV1hZWltdXl9hZGVoaWprbG9wcnR3eHp6e3x9gIKDhIWGiImMj5CRkpOUlZaXl5ucn6KjqKmqq6yvsLS2uLm6u7y9v8DCw8XHyMnMzc/Q0tLT1NXW19jb3N3e3+Dh4uPk5ufo6+zt7vP19vj5+fr6+/z9/hUAYDEAAAJLSURBVHja7ZT5U9NAGIa3UhU1guJ9At7We0VRxKNFKd7iiUXRKpcKKFYBUUSJWm9AraC21pLk/TudbLYtaZPSrY4zjj6/9Psm3zOz+35JCbGncNkckhOregG8KcvB9CpgNOeJmi4NH6tcex4DXkHT8QpvCwkhznZE5oqpxQBlxTxgn93Q4m4rngM83VEMW05sJaQUNkw31JDNYzdTO5rS6EmogwimP27SuFqafo0dCfUZLlpcM/b71WZV1QDVANBU9V22amtaJkPZq8HDfr97P6Pef7pDRL1r6mv/AfWy0peVOn+nx+OhRePVq+g3qSv3ejzuzVNT1eoYW2C40lbNbzd2/Hq5WXVp0KLRKDBWbKfWAUo0GgNeOLm6AlgvSX58XkAIWRrGWUm6xdVtF6rZ7xl8kCTpE9qmEeI4CKyVpB+6upG/awE2JRuNOWF+UlTozezk9xpXjemnmdTdejMrqa4Gaih9YFzLMYTblPamqJcwQun27zimNyXAKUqVZExVwB2fz9cNlOsxfX0ynhCL6T6+Nfp8DYOIFJgSntLPz9E1ye6jKwnz5lDKXvNPdMmyfM87mRBS2ZBKrX7URdf6ZHng5pYJ/mAm4r/6R9QNwGhIGNPrL4qbkDXAlePCKH/rctbNEGaMq7km/AtqQZkV54EjrNgVQZvlxEK7GK5jmFc3EBQKMG8E9bwsB5aIqC5gEy9nxlAjotbhizNed+KhiPoejYn6ALSibJyKgM4jYCAQpwd4yYpzmdWTGTbZmVmlLQatLUni9dGU2Z8vQHe3JjoBkgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGRkZGRkZICAgGBgYFxcXFxcXHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHBwcGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoa7LJWmwAAAMR0Uk5TAAECAwQFBgcICQoLDA0OEhMUFRYXGBkaGxweHyAgISIlJigqKywtLjAxMjM0NTc4OTo8Pj9AQ0RKS01PUVNUVVdYWVpbXF1fYGFiY2RlZmhqa2xvcHFydHV2d3h6e3x+goOEhYaGh4iJiouMjo+TlZaZm5udo6SlpqeprKyur7Gys7e4ubu8vr/BwsLDxMbHyMvMzc/P0NHT1NXW2Nnc3N3e3+Hh4uPk5ebo6err7O3u7/Dw8fLz9PX29/f4+fr6+/z9/h/1AioAAAL8SURBVHja7Zb3UxNREMcXAqggIE0pig0VPRuggAURRUBARUVFBaUJKCLFw4Y99oqosYEUEQtEUBCICSYk3z/MyeUSknjx7jKOozN+f3l7b9/nbm/fvp1HJKhpDMMwUZzpF8swzHySpWyY1bacJtcbzdZzd3D0BR23GDJxLvgcIHMAV1fID96i9zgGpJK76sF5IMVdet6Y+bdPeshAvOPiAnlzkdaStlqrb0lcpBgeCqyzWIqnGNo5c/VdIJH3daFCOr4Q2ExEvl1g3cEzMT7FPNZB5Q6ej1FuLEP3H8N99NhmxU1fvhm+D49acc9h5IvuXAteBnPGEVjVb/EUAfGi+Fpg6JZSqXykA3RqGPoAfLimVCpbgRsSKuiAnv/oeOWkIqhpVYc1iofhgoBnnoNKLrWoVBro483xqon82oDXqic32V0OyxbbChVCOkg8TtMHhPwFdrjR4CgTBhQ2nPIAJ7/BEc9y+p9elNMEHgJsclow+Cvc24RsLo26d9zzV+yTjockbnD6nBqNyQsUkvA5d7jMbLVfPGKeGdwuAZ/Bp3mvPT5umSsUx89Bmzc7/A0a7OgYICs8vhljUaL4J5QRUS36gyfwE9D5E4UZkSGGBwHriWipCU22pQkmNJrHbpSK4SH8eT8DVHhbpla+xegs5/Mugge8AlRJXkRR1UaYUkkmTmEPAGg6zOdVk0ZS8Ylm5bO7l9stY9NckowHsGys1VYk5FceSg+yIVVsirSaF9dfjEdXOStDDp7wU2u6IAdf1uGsun8ndf9x6Xh9ukxpHHA39Ltw8nVHfCNlDhcLa4+lz3isceEvzlUQBWpdhqc7uz9tx9F21/EXEoUBIz2CGrfdrATdH8F1zntoEd7aqPLHn6Fvv5jsKejeAjBElAPEuKwOf4VL13W84FqzBjUkX9FG/sbBQhspHz8NTShnRGhwP0AunWtCCW8WAc+SZMGhNUDnVOtTKYCOy6xUnWrWAq0RE2/L6JRZ8PqGYPtovDZWX2mWqttsgfWS8wOVDhPNZXeUuAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-l {
|
||||
background: url(@/assets/v3/bg3.DKgYKiLO.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA4CAMAAACbrRsRAAAAAXNSR0IArs4c6QAAAmRQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVJycnFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcGhoaGhoaGRkZGBgYGBgYHR0dFxcXHBwcHBwcGxsbGhoaGhoaGRkZHBwcGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZHBwcGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaM9yYTAAAAMt0Uk5TAAECAwQFBgcICQoMDQ0ODxARFRYXGBkaGxwdHh8gISIjJScoKSorLCwtLi8xMjM3Ojs9Pj9AQkNERUdISktMTU5PUFJUVVhZXF1eX2BhY2VmZ2lqa2xubm9xcnR1d3h6e3x9fn+Bg4WGh4iJiouMjY2Oj5CRkpOUlZeYmZqam5ydn6Olpqmqq62ys7S4ubq7vr6/wcLDx8fIycrLy8zN0dLT1NXW19jZ2tvc3d7f3+Dh4+Tl5ujp6uvr7e7v8PHy9fb39/j5+vv8/f7mLvP7AAADPklEQVR42r3W+V8McRgH8E8bSki6LJahcrOOxaZylVhX7jORW+5jkVtCypkz951io4RUrpBVn3/K6/vdZq9se3jx+WWe3X29Z78z8zwzgzC9DzGYTJ3RKnr6ltLIgCkfRf2BmrwueImwT6JbUz28JYXcSj6LCYz2yCJLuwdGkUmWaQOjWE6+6BkYxVLyZa/AKBaRFTq/qXGQyMZmvtP6Sx1Z9L9oxEg108lkv6gj8eTo1jRu24WC5aGimmrOAjDYbO4kV5t388xcTVs0rUEcyDMxW7l8AGAKKYZlmzzAS+0808h6fjpbTJ4CcIAPAUwmo4GxZHleCbnSM00nBwFb+DUY2K/SGGA3q8KA87zumWazBkASqRP0EYBJkhaxCMA6vvNM1/A9gPFkH2CfSmMFLbTv2CMVPyaSiqCPAUxsoUWS1npbsFFSs0q7A4WSrm6LLuNXjXpBzHwCYIKk+bwGcfosnuloclNUXAmrAexVqVbMd1OGdnwtCzzToGJbc8+X9Kmt57VAeKX8+ufQNrop+hzJxlWi3KNSMd8Jd0hWJ7fZw1BSjRGy6KaLBdBR1ytYfuybMqSlDZF8i7xrCGRyNsjFN6/wnxqaWbZjTyWtw/ym+awMByJrmOtOgxSnp5k8XLeUcpfYnGCJKw3Z8oUsT5G1JrOOfDNDlAcbrtppDbPFZjvLXOlJ23VNEnWOrc6Qf3HLGx1OFiSmv5Z9FPuLxUmTHrJeAxxXaYSi1HGnoijKUb5SlHAHXcjvIYCJzV3lkGuBMWR/QW/b6BrXJ/ViB13rNK+zyfZAgmycY96pbdQTVdpB9pxB0Dsq/ThvQbrRaDROW5BhdabZTqM+S9I4SY84aI3jMjW60lr7qM8kQyQdI+g9Z6rbvDnKnZrYFCsG3hoqb6B6II3sDRx2paPIAe5U18jS9XsbeAVAl3pWbdxaz3IIet8bxQp54j7Hi3pak6h/iOk65APFhPNvn+e1vCuMLKyynO4v71kXc52pvqKiX2vqJZ7P8L+lX+bY80vQKWSqj9S9EU2k6V9TTXuRgeQ4WWiAEeQI/94lDIG/hjjTaovlm9X6weJLqlypn7FTbY7I5Rs38nN8TG/8dX4D3Yb6f19FH58AAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAMAAABxwuT6AAAAAXNSR0IArs4c6QAAAtxQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaAklNYAAAAPN0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8hIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCREVGR0hJSktMTU5PUFFSU1RVVldYWltdXl9gYWJjZGVoaWprbG1ub3BxcnN0dXZ3eXp7fH1+f4CBgoOEhYaHiImLjI6Pj5CRkpOUlZaYmZqbnJ2en6Gio6SlpqeoqaqrrK2ur7Cxs7S1tre4ubq7vL2+wMHCw8TFxsfHyMnKysvMzc7Q0dLT1NXW19na29zd3t/g4eLi4+Tl5ufo6err7O3v8PHy8/T19vf4+fr7/P3+kWOxigAABYhJREFUeAGlwYtf1fUBx+HP4QAKqMecXGTesaHmLR2zxgrUHLZNl6tBbmOpqRW2spWmxiJza5QjlZxpXrAyZlhu4hR0W5tMWYkrFNwmigKFcj0czvsf2Ov7+3HwIAeh7XnUM8fQ0ZMnjnTpS7t96e7TjVjqTmxOjVafjVrzKV15i5a41BfDtngAzrzx9MI5M7/57bS1ey4DfL6qv3ozMLMR2oueitMNjpkbzgL//kmQbumhq+DeFKNuph4E/jFJPXNkgjcvTgEln4Tr89WTiP1QnqCeOBY14H1WgcWWQuEQ3cKUC7A7WAGElUBOsDpNWZ61/dCBLWvTh6tTVDHkKIC9sEo+M7Ir6VSyZrg6hObDo+pmNbyhDuPeBnBXnnj3QMklL9D88mDZIkppS9ZNvuulKFSW4I1tULd9Qbgs0YsPtELdItlGXaV2pLroV0FlpCy3HYaG9QPkZ9ROL2wMkiWxld3q4kmYI8vYzyA/WjeZdhYK+suShXe6/Ljq+L0srrPwokPduD6AXbK4ajksPxvwTpMR9AEsUSDOHfBzWTJgrjq5mnhLlrWwUT4RU+fNnuBUh9DjeJNlhJ7nuDotgUkyYhv5MEi2eQUtALXbJ8gWfZG/O2Q8DuPkc5RzsuTiHiPLsMP4eDaFyrII0mSMhPXqMMjDr2SM9fCaLHdchHPPzRw+Zk52PRwbJCPoNOccMk7xV3X4Dtwj4xnckTKiLtD+bIgsQ/Pg/SAZCyBBxlo8LtleotYp4wSHZHkX74Pq9Bo8JqPfNbJkTIW5suVzWEaMl2UyZkKWbnAWcXWAjH2ckeFs5QnZzpIjYx6MlpHL1Qj5SYA0GT+FcBllvC7bF6ySsZj2YBmXyVEXZeyRMQviZBwkXzYPS2U8T7UMF6TKuPNkwW0yNnNKRjx8S0YehbKEwSIZr3Naxu1wr4z3ktY9LmMdl2QMhgdlbOMvsjjhERkvUy4jFu6Xsbqg9B4Zv+RTGSMgRcZOjsnWRIaMDJpkONt4SpakibK8zxEZCTBFRj4FslXxCxkPwWAZRyiWv4HNPC9jAUTKOM4u2Y7ytowZcJ+M5ZAkP+tgoowsrjlk1LBetq18IiOomhwZYf+hfIg6faOFd2QpI0/GUEiTbRner8rI5aJDxkIoiVWHxBo+HyNjHKTJeBjGyxYPy2TcDwtleQFqnhgkSSNeddN2nyybcA+WsY/L8qnikAxnGf8MlmWlB1qL9+4vBWqTZYlzs0VGv2vsks8ruF0yvgfLZZteiM2TGyvbOzQOk5EC8+UzDZbKUkTz19Uh/pm3jny4bXG0OqyATFn2UhOiTse5FC4j/guqYhXQ7DZOhcu408uLuiERVsuS0k7ZWAWQUk/1CFkOU+uSn3zqI2VZCXWz1M3P2mm6S5a5kCF/4z1sky29Fc/mGHUx7Q9QNUOWsI85H6outsCjst19BRqy7pCPM2mXFz4aJlsepKqriNO0JcsW9Rs3UJ694oG77k198s1aoG5lqGxrIFc3G3mFurHqELenBT91L7nU4ftejoWom8RWKifLZ8APdla0Alw/80qSUz4/bKIiUgGke7m+QP6+MulrA+XHkQn1kxXQAw14n1PPIvZD+Xj1YEol/DFBgTlSz0HhEPUoqgjYF6cAZpUAOcG6hZAVV8C9Y364uoh6pBAoTVEvBr7QADTlp8eHyDJg+tPF7cCFHwepdzF/wtJWUVr8508uYcvpr74Y3czftpZzQ/vJX9fwcbD64nc0j5FiZy/fkPPmb1/NTL/bJT0MGeqDebBe3RylPka96vcZFWHqZlIbO9Sr1TBfAWRDonoxqpGDCmRQNaVO3dp+WuIU0I/gMd1keLa/9+Cj7B5U0bI1288GaTr/q2vShLIuLv6rrEfV58v8ndT/5b+wy5acLtE3wwAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA8CAMAAAAAPFkHAAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGhoaGhoaGBgYGBgYHBwcGxsbGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGhoaGhoaFxcXGhoaGhoaGRkZGRkZHBwcGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa4vkYlwAAAMR0Uk5TAAECBAUGBwgJCgsNDg8QERITFBUWFxgbHB0eHyAhIiMkJScoKisuLzAxMjM0NDU3ODk6Ozw9Pj9AQkNFRkhJSk1OTk9QUVJTU1VVVldZW1xeX2BhYmNkZ2hpbG1vcHFydXl6e3t+f4CBhoePkJGSlZaWmZucnZ6goqOkpaipqqutrq+wsbK1t7i7vL+/wMHCxMXGycrLzM7P0dPW19na29zd3t/g4eLj5Ofo6uvs7e7u7/Dx8vLz9PX29/j5+fr7+/z9/hwDx/gAAAMQSURBVHja1db5X4xBAMfx2drY3EcRKmfESrnlyH0kFLlyE7mv3Lco5IxCtI4kZMtNrsq2nz/Ma55ntYfnyuvl9eL7y8wz+7x3duaZnWdEpDM40cJynASnLvWPKU2rW0EzA37vLDccjLBGh4Ez8LpPOdy0NuBQKiJPw3OnFToTZoY05Xrx3DlvkmNCZEJm6NdN/45pXmlTsbm+9IJhHuhSEW4yzI2SLtKkZvlvadH2VucKHxX6R/mq0NqqVuc1X/65Ge6cMClrwbh+jlZSW/KOCt90eK6vi7dObRmPgmezeJhFOqYM+HAqa3Rc2w4DU9de9YD3RC8rdK0H7s8O2J66rK8D91hTGnEIarLDgvvouKORhuUm1HYGbvf8fVom1MEKY7oVTms+jngXjeON6Dwv1+zaiyDWTV2sPm33kiddhU7GNlKgT/NglNBNHozUo1GfOKsvRbsaSvToBpoGKBX70Mnd/aTv1L5qZSUM0aElFCvl8vdAYQ+1McUFuFJkNfILW7RpVDOrZLlJXbhP2yvSo/4JFFvIXW26CORK7d9A6cjYTc3skY0u3Okx6W5c8mIpRGnSXGplkcM3+Y48QKUcJ6QLIdJBjjcRRmjSvdyTxS4q1B68diHSIEYIEQNpQojolrdiCC3gYkCvB3ks1x9k+HsNayJHkxZzThb9GigdFZfrZbdvrBm9MnxjFfWs0+m1zNespEqZ4eQm9WySLC86qr/hF/W/JPOpUSvL3gHnfeeJZLlJuRQpEloWqkJnwAz1cg3eNmotPHFSN/9qik/7ta+lQe8A6mw5hoyGKcIwO3kbrkltzzhqKG0vOCyC6ZIUNcf57DCi82GN79b9PhqQHCNaGXKCCaZve+jLaaGHH8dgf+b+4JSudFRRPdx/76CQj7dDto4MOwmTDUbjeEhzlvbsHoYjhvMfV03zYo32hBtQZBfGtgbyZCW/WnnI5dXKzpEPl9sIk8yBiUL5M1ySRS25Qt0fOplJkQKDA6hbpdlg/8t0YVJSUtIVbsniDftksc0i1c5fpZFDdWIzpdbzE3Z4x2LkwqSqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA+CAMAAAChgZ0aAAAAAXNSR0IArs4c6QAAAspQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGBgYGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaty+CnQAAAO10Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGRobHB0eHyAhIiMkJSYnKCkqKy0uLzAxMjM0NTY3OTs8PT4/QEFDREZHSElKS0xOUFFSU1RVVldYWVpbXF1eX2FiY2RlZmdoaWprbG1ub3BxcnN0dXh5e3x9fn+AgYKEhYaHiImKi4yNjo+QkZKTlJWXmJmam5ydnZ6foKGio6SmqKmqq6ytr7CxsrO0t7i7vL2+v8DBwsPExcbHyMrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4ePk5ebn6Onp6urr6+zt7u/w8fLz9PX29/j5+vr7/P3+lBpGjgAABH1JREFUGBmtwYl/zgUAx/Hv5jHP2OaYNYtoLETMNdcsQqzl6iBnUWIlcpvI0ZAZJaQtR6FSbQyJkjRjWHOFlmvGhrU9z+d/6Pk91zbz8uzZer9VLebWEX6qqUYbCuH26kDVSPcL2J3tqBoIPEvpiucHr7GQZVb1LcfaTzZxME/eatwivFXrtu3ad4j8h82y20mWvLWdMhNkN41iH3lpC2WmyW4+d+StVI7ERPfq0b1bl2wO+MrG9DsZ8lYK6XKYAMtMUp1kGCpvbWavnL6Dk8nrcmCbvLaJfXIK3ordxiB5bQMH5Bb79ckT2waqGtZzUP+DdRzS/yCZX1RVjfuPm/vB1BGRqiyJI6qSwMlppTicX9NND1jNUVWBaeIVbCwXcwoxbG+jClZyTJ41+xXYOzXCJCloUPJVKJ6o8hLJlEfd/oKMKLkFzCmAZJPKLCdLnjxzh9K3VEHz32CtyizlpDwIzuFOPz2g7k6Il9uHnJYHu7DGqZK6h7F0kMsicvRo0ZCghwi7wbXdP6TtyThw8OfDl/j3j6yTp878efbchUt5127kF9wpul+SO8VHLj9x3qyHicezb0PkEAnj5dCwX2xzlfG7zLnUlC8+3/jZJ2uTVq9a8dGyJYsXLpg/d/bMGdPfezd+yuQ398HFGNnNpshfhoB12KS3lNtCbpv1KLUSLFjm1ZLNIXbJUOcodgXhcukCA/RofS9Bepiku8TLsAASnwyZVEiG3IqYKg9Cd8PpYNWHYTKcJ0U2E6GFXLJZKk9837fwjlpDb9mEQKxsGsFQuaSTIo/a5DNfERAjmyArL8umKfSXy0HWy61tVF05Ne7zlFxibnK/o/xhpAzH2V9L0hIIlUsuCXJquQ+ujpLBZ9Zd+KaZ7EYXc2+EpOvMkmEs7B8+aBNskIv5PpPl0Pc6hjV+UtBODPmvSvJJgGu9ZPM9+2WXgl1mA7kMhC6ym1pKcXyf43CwacRx+LHT7GLYGmxOhexWMkzC2kR2Y05ZubjELLdPudyufYfIzl1T4UpPKWAr3C6CVSapUyZcPAR7GskuzMoCOQWFqZzQe7hZmskwrQTujZXBvNwKbPaT05cUPa6HWUWZYjm0mTMzXE4xublvyy38Pjt8VFl0CTt79ege1bVzxwWUyqNFsEiVPJFHXhM5vIFVHpl2w1wfVfT0GUqi5TQe5FmDLPiqocqLu4X1dbmMBV951jgNbs6oJ5eoNCgaJrfRYFIVmBItULhjQkzbpl1fWHwKyO6qMq+Bn6qk/S7KuTq5tsoZCf6qog5zDlsx3EoZUk8VvAL1VHUBrXoOiAxRJS9BoGpuONRXzQ2BhnILGTzqWbOqIQ6C5VR3tQXIHyfvxUKIHB7LxmGLvDYYQuWwFZLaB/XOgAny1iAIk10MzJGN714K/OWlgZC0dHniyo+TjpJfW4Ye0E9e6k+Z/bKrB2PkpV65OaezszKPHT3yN+dk1wZeVLWNhIEyJGJtomrzP0HeAMl3uoVk1UC3EshJvw65gaqJ7icw7ApVzZhHr9+24jlV8B9T0a94882ZyAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-l {
|
||||
background: url(@/assets/v3/bg4.C7YndXK7.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA4CAMAAACBkfufAAAAAXNSR0IArs4c6QAAAjpQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGRkZFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa67X1NQAAAL10Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcZGhscHyEiIyUmJygqLS4vMDEyMzQ1Nzg5Ojs8Pj9AQkNFRkdJSktMTU5PUFFSU1RVVldYXF1eX2JmZ2hrbG1ub3JzdXZ3eHp7fX5/gIKDhIaHiImKj5CRkpWWl5iam5yen6CipKWmqausra+ys7W5u72/wsPExcfJyszNzs/R1NfZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dy8/T19vf4+fr7/P3+eSKkTgAAAttJREFUeNrtlvlfTGEUxs9UktJiC61SokmkhEoIKVsSGWtCkZKKbJOiGU1IWZPQokWhzTRpaJ7/zae578x9Z+beWfj4zfPTuc8935n33nPueV/yV4qKIaZ4zlQwL5LzgkgJUa0WbJwzfZn3kPO2S2MT7mAHhX9u5rFqwbvIY+2Cl8kwpeCr+UWeEYJ8HtMJQdh/TA5rVpvVzRdAChsS8ppky92kyxWCbTqdj2S5Y1pF1RAvL2+byzIucQNJyjvt2ouBn7+GXtZm+JK7mlc0Iq5nvHiBe1TaRwDf7pcWFly69xnA4C53qEIj8GQLey5FshYwFbumzgNfdvBGah9Q7Yraa0JHuK217Blw1DkVoUfPEntzYQeMCU6xBhjiHN3wUTy2s0JPWZVDCSZckfo1FZBBmWJmBN9cOqrFaLAU5tuDJlLbzZKpSUEaxQDqpBdfBr1fHUvT2344ROvmDEklzq2SKcwe2wcsksYURhyTxU5gmkVRD5gsL74Pl2WxUgywaL3l4S0N8wo3ZTEVDCxa1cKUxIxesTIOWC4QItMHMzguiyUC6dJUPJBljw33C6r3GkaNNHYBBv8qljZkN4J0dAsjAVKUTxe0tl2yosyqfNoIlEhhBUA25YiZ0Xb3NZiMdqSWD6ONnGn1D3Q6NLPfW8wmO8XoMNAeamsFvwHOkgtVAJ9SeGNtJ4B6L1fcuVlAY50BsWoT8B644QqjnXPDsbfm5IE8VdU7AGOH5rcAlS65gJJJsUTTlSFEAW0ylbGV/+67XXrA8KFhf5DwWl4DKj4j6pGoChs2kG/rpZ0wHSGiInOiUnp/u9PI5v7mxka2v63sxmwe0W1xBD3VmtXvfDeNHIQxi4q02haP9m6K/YrpNI+3fKKECXxP8hyjlCmMrfEQK39+ndJnUP4n55I9V//6OJMdZZaGL0CF4J3msVbB2yR7nPlnh97AraKsAzOVMy0n8zjOW+z6a5DUb7XEj2EfmeDdAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAMAAACycDqVAAAAAXNSR0IArs4c6QAAAg1QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUEhISICAgHh4eHBwcGxsbGhoaGBgYFxcXFRUVHR0dHBwcGxsbGhoaGRkZGBgYFxcXHR0dHBwcHBwcGxsbGRkZGBgYHBwcGRkZGBgYHBwcGxsbGhoaGRkZGBgYHBwcGxsbGRkZGRkZGRkZHBwcGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGRkZGxsbGhoaGhoaGRkZGxsbGxsbGRkZGxsbGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaino4mQAAAK50Uk5TAAECAwQFBgcICQoMDQ4QERITFBUWGBobHB0fICEjJCUmKSstMzU3OTs8P0BCRkdISk5PUlVWV1laW1xfYGJmbG5vcXV2eHt8fH2AgYKEhIaIiYyNjpCSk5SWl5mZmpucnp+goaKkp6iqq66vs7S1tra3uLq7vL2+v8HDxcbJzM3Oz9DR0tTV19jZ29zd3uDi4+Xm5ufp6uvr7O7v8fLz8/T09fb3+Pn5+vv7/P3+pK9UKQAAAoNJREFUeNrt1utXTFEYx/HfyIyaSqSbRlNpIsklhCiUa8n9FlEk1xAq1yKXhESpUJIQRTPfv9GLuVTUzJlWyyvPq+esZ33OPnufvZ+1ZXUEFybJQXBhmSrZYPirir3EIaOR54+E2mcGSdZ+4e3ioMhGJ9C/ZHKyK9cX67xiiJ8eEzlazT05wSKPeET7Y64OuE1qgP8y4hH2Rioy3WZCkmH1RZhkG6bdrkYqlDlAR6hMo1Xrpkmmn/vaLjVSIWV2LTa4YmHyEIUF8yvdRNNFLDabxTAJt9m8aezqgw03/JJXdbtXzPY+hOScawMYCPFDkgFczaeyJEkVAHRXb7P6IXHFtX0AFEiKdUFbQVLgucxI2/MBeiQlAvQXhgQk4YdGgAFJpl7uD0NTegCS/QY+PuWeJNVwJ/UuOI9F+iHzq4Hzse85IEk7+TrTlN8DnWsmIyGF/dC6TCmwSpKywCFFVwI1CyYk6U0wtDdUyoMYSQofYbMkLW2Bb9vNkqRFRz7RUZIiSYosdcLdVEkqo9X9kkeckSRZigahOUOaU+05b0ctUk4n9OSbJEkPqHKTjIUmzxfY68BVnvQC+houPxyEuuQaoDLaUzenp0mSOT7ePDrR9d3wA8ojJCXchF/QkjlatsbH66/NH1XmgrPu3PQEvhdZAp+X6/R7d5vNxX4jR6yFS778OReNkHeU+PJqbhkb5YIvf2ZslCo6vI0l0clWI2Q5HPGsWD3DiYY6TC2cCJcUdw0OGWtK815Cb/3pe1/httlgH5t7xb3HnMdnGW99GaWf6dqXOn3d8j/5N2TLynERM4YkjS8dnuQ+lj2G7DB2hQtIzAl/RqgkxSRESVLEX1VNJX4DmRADv7Vqo6QAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAZVQTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHBwcGxsbGhoaFxcXHBwcGxsbGhoaGRkZGBgYGxsbHBwcGRkZGRkZGxsbGBgYHBwcGhoaGRkZGxsbGRkZGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoa3tD9qQAAAIZ0Uk5TAAECAwUGBwgJDQ4PEBEVFhcYGxwdISUmJykqLzc8PkJJSlBRVltdXl5gYWNlZmprbG5xcnZ3eHx9f4SFh4iJkJGUlZaXmJqbnJ6goKKjpKanqKmtrbGztbm8vb/Aw8TFxsrLzc7P0tbX2Nna3N3f4eLj5efp6uvu7/Hz9PX3+Pn6+/z8/f7+aEnfAAAB/ElEQVR42s2WaVfTQBRAp1AoYhVRRHEJirumtbhUcVesuNPihrhjRVRwX1CpYi33d3sySSbhMJ5mAni8X5I3yc3kvZeZE4GiIoxYgHgt41AyFzPy2BtfrI0YUAiJRpRDYnUoMhNzRIMcz0ux1Otww1yM0UdHrCimzMRYLKrYuF5La12xXd/wPUsnJi3LusszS1Hgm2VZqyIVp8i9IDjMVOSqxhYHuR8Eeb7UEdPX/UROMx4Mn1FBx0Gt2DTKc8/cBxv84ebXDHneJMe0Mx7CN5dPM77CHUwUYavvkdXnGJgH4GmnfP0S3J7nzSuOY8pvq6EfvmeXJXvewSM5d3vYk+LPML+hz72Uq0B1BjiXkvFVeDOq+DRnIbtc8B66+4cTzV5udMOyZrMq5nyOfIZud42crMHX97PwYLUcOAGvLg4EHFWblRBizQTk3Nbcgo89CbF2BN7KKqWG4UqDbkMOe+I4DK+U3chDOak1ldj0Unltv3jc4l3vg53CNwe0M+6oep7YT61D3VDmjvDMmW1aUXT6J2cZC244xaR3lrL0ORosq/9DbLFt+wkvbMVNpm3bXldX/Msut3fpRJHQEq04Rj8PUWjdrthkJHYFOQ/+M3FL2uGSFLPNUdkIm+UTClI0YhHEXQbkw6IJXQsQxx46fDAXgz6akM4oukVc/gDJXaMPEeEHHQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAArVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGhoaGRkZGRkZGRkZGxsbGxsbHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaefXWRQAAAOZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ2Nzg5Ojs8PUBBQkRFR0hJSktMTU9QUVJTVFZXXF1fYGFiY2RlZmdpamttbnB0dXZ3eHl6e3x9foCBgoSFhoeIiYqKi4yNjo+QkZGSk5SVl5iZmpubnJ2en6GhoqOlpqeoqqusra6vsLKztLW2t7i5uru8vb6+v8DExcfIycrMzc3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6urr7O3u7/Dx8vP09fb3+Pn6+/z9/v6gHUxNAAAEWElEQVR42pXW6UNUZRTH8d8MKjFkijoTblGampiaqUkupS1ILpVbaWqZK6YilJrZohmmWKhJuZRFmeZuhSWYW9mYikCJbLLEcqfv39GLO+PMMKvn1TnnPp97n3ufu0mhIr5Pr1jdaYzc3wT1Xzx8R8jyJmY0z74TtQluLh2buqoBFkWvsuFIoiT1PgOLo1UfwSGbmTuidpaNXiXZi2BJNCwdDtu8pb0IXoys+hsct/k27L9TY4/ItlJ3v39nhBHFNMvIbt06zNFIygYzJUkxw194fqhVkrSG4kjMAeMlWeeWAhTPskh6napIzA7jpbgv3TcXn8dK86JiaYo7AIXP2B2pZ+Gb2GhYF5gQ9z3ktJOk2O2QH7uAykgsxiB9P2yxmKV1G+R/wh8RF+AM5ZBj9ZTWXKhjV0S2FNhq9dbWXGBSRNbhHxof8W1McPGzJSLT441UDPaWaU383TOykp72deObuJEcjTKde56p0alus9blHb1Y4sK46nRevlz2H0aJ88TuDbO7hTadF/9EyDi1pFNQFLewCjDOHchdnZWV+1Zm5sqVGRnvZq9YkZmTX2gAlfPvClSjr0HLvhmO4BNxTPvKgKsprfuzmmHfQz6NhGEJ7R/r4tNI/hoap/ur96FszO3KNiX3gouUZHDmzbj7dvvJcljlqxbCr909Rc+1lQCkJANwa3OSZ0vSGZjrVc8aHIt35zHz6oHCXSbbUwA0LPNci/YFtDzhUd1ruHKvO7/vR2jIGax+Jhuu/u/Vw1nPAbuWUOm5ap/y7yB32q8YDiZJXib12AM3RrgHDGtmvfsSGaxxNweV02J+mnyYNL2JuiHuIRtp6iVJ2kul+wZI+IvGCQpkGlXDdfftlVjLNkm6p5Gl7j3txZWqYEzjWjjpfnZXcytW0mToYzam+ixLK6ZX4WUzexSekrSDC2bdxklB21DMcoJy81Qs18iW9CfvmFumwViFYhps8JqZbeEXSQ2ehT/NSYVm+o5zZpJOmZQAE82VhCnh2EQYZi4HrrbqB3MkSS/hSgzH2tUzT5KUCV1lv0ZzmiRt55QC2MZF3iglT5LmwOl46cEyGsdKOsKOQOYflyRNdXHeIUnJN6kfKZ1nrQ8bByl9b7SKEqsmGzi7mkOGVFP3iipY4FVDq6nvpYBos7yF4tuPX8otKKzlYz81RlPT/WLzD0VXoKSvdy8DLgIc81cZwd57J3r4Hr3t9PwGfmutakp9w6B2R2rAR2Q51TH+qiDBb0ApWYFnq1EwNJzqC2lBWGwtH4ZRWkddxyBM66nvHFrFV7EpmNIDBm+HVFoBA4MybceoCaUGNrM7uFKXMkKpDkVUJIZgei6Ush0L+y+6+omgynEEMhUuMsDZWo0ugQ1hlSXLBTsH+LaS81wYb0T6Mxl5CTg4s7dZJc3+1gXXRyli2DKrAcqLDh06WwFQtaxjZCWp/dxTLs+DYhyf3yEqJEnqlJb+wc7P1i2Y1Dn49v8BUIfpizuTif0AAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAAuhQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoa8hNQ3AAAAPd0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaHB0eHyAiIyUmJygpKissLS4vMTIzNDU2Nzg5Ojs8PT4/QEFCREZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV9hYmNkZWdpamtsbW5yc3V2d3h5ent8fX5/gYSFhoeIiYqKi4yNjo+QkZGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i4ubq7vL2+v8DBwsPExcbHyMnKy8zMzc3Oz9DR0tPU1NXW19jZ2tvc3d7f4OLj5OXm5ufo6erq6+zt7u/w8fLz9PX29/j5+vv8/f3+/vwH9BgAAATrSURBVEjHpVZ7UFRVGP+duwvrZQVCZeUlqPlEfEw5+QgqozJTEx0bzJpMRxudTJ2mJk3/k0zTBh+oNb4gQHECDS0UsVFSBx9TNI6jaKnxRoFdwJUfEyu3Py4Ly+XCXqdvZ+fe33fu73uc75zzHRN6EuvgZ5qf4CnlxewGsu5AzFORxBdUpXHx07C2keVrXp2xrp5caZy1lTwRAgDPXiE/Mcr6hvzJT323FZGrjLG2kLl+bhRslLfak6XyFnhnjXIy3+qpCP6TNcFeadtZO6SrZpLTQJj3uE2ryuUprcqswX6huA4AMD03VLlb3AYAV98Y6o1mBeoASIu/DANQtukHBaiHv5Ym6VQAkNNSwgAg8rv9FkDp/o2kl5+cOR/FcyKj5t3AwlSLaql36U/OlnPIZF8AsOwmsywrWOWNZnJydTaZ3G5fSiGzdvK61wIUsYxM7ohd2kXW8qCRtcXtHhlLu0gmeKUF3KdjgqdiVjMLhfdFOcXBinGdcGYD/4kysgVed7BivBu81cDSaGP71IM3oweWJuqI+CHh4aH+YcJV6YKAPFB6UtNSVVn919nyHmn9F86b3GMI17Iz7Ho0ecn6IOBJSVlljQsR1S4oUBAg18AUGho5zgTYkw61dLP2UgnZlPm+Td+XbWGGk7zVLZhFjWTGqN4mKvow6Xivq24jee9lbzM8rYxc76n4mLw4yHtlBl8hl3bC6U6eshqpqP95Nr3iBoNqeHOgsZUQ/jcr3bO2g/axRvvDxEZ+1T5FTm4w3o22sGEoIIDURPtYu+4ngcstAgICEtSn+D075Lr/gZUAAhxco284sIBauQqs5wMLzIjvg1/0N+yPsbjTqkCBgjYoUDDS+gjI2xAQdxbYyz/0WfnU5nyOWwFRwq0wIxa5AA695rgjICCEO42oYdiUZHa1H94uAGgDACVvxWSYEYZKAGMHDBiu9ff1xqjDm09a0i8dT4hfUt+xYUoRDnOQHx4CaEJFIRQoaiqKAgU390w9Yjs4IWr2bMdmcT7xpvtUr0WIj9kGBAOoRtFSrbfE7y3/flY5H86s4KRh5xLPt3sLh7AhuISNM4FMpmtZQQ0sjwOO8RiQUMd7AgX8FlhCXrJKtbOqfDPi9bqKABTAJw6FgEWCS4ECgXdTcGveYwDR5ayLS2dGN96CBjZ++AI5VVpHVsUCZ5ic4OSNcHV4QjXrLjNT5+JVytq1rLc838Ti4QDyebGJtzta+6QakgU6JY+6ONc2dxmwLCcIAC6TvDuic3h0MXlBb6m4e7QJAPAbeSayy/AFHkVESsoQYGBSft66QGDivv1WYPTeotOfysCc9N3AaeZqjuM0HsEYciL63ybJazLeJvsh2k6SxwVWshQ4xR2a3q2of4EPIlvTshAzX0Wr5MadJ/FmLBS1HkITvAKh1i4G55ZjXPRIFY1H6lqfB/KIC73fFAR88Bh4BF83akZrKyStt84gJdW+4hFyR5MQni9dvXVRu1HHmus0qcmtXVuOKXHmGFSo6H7MrF8HB+ChV28/KyFn8vq25KsoBzEF+1BVqPUmab1d/qgJqFtUoqKjnzcDt95xdEuiXfYzB1K/IDMA3zGjTABMfjIA+I6MAAAhCeAE93TLzSSLFmHpA4Fy9FVPIVlAwA6b+1Ty1Sn3dLuRa3tvF0Pj9KmDoHj/tT24gf8j/wFtkTXADxi+NgAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico6 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa99eAlwAAAO90Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYqKywtLi8wMTIzNDU3ODo7PD9AQkNERUZHSElKS0xNTk9QUVJTVFVXWVpbXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqSmp6ipqqusra+wsbKztLi5uru8vb6/wMHCwsPDxMTFxcbGx8fIyMnKysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9fb3+Pn6+/v8/f7U/243AAAEC0lEQVR42q2WfUwbZRzHv1faCohACxtmRaEDJ25DQNRoFBx/TA3DQIKbMrJsi4uR6HyLiv7nNLLEJRjjNkxkyWQZuswQjZnRVIcvS1QW+aPwB87h7Chv0t4XSZpNurXm7vpyK3ftrvWXyz2/33PPfZ57nt/Lc1lIIfll+YEQMpKHh/ykp3dtBghrLxXxtqTPOEKOP/1AS4+P/vYMGB8WSFrtGP2Pp8Ww9JMHsxR9bZoUy0fkoayo5XRTTIPyLnnYHDedbvoajDIeJPvN6g7nOY5lG4Qc4+/2a3u2kAZdlDvPFxL7zvKgzmizdrfDijHFz3WOq5PjsvprZaUxSA4gSoiul6RAmdz3JQAiTwdi0u4Oy3fbyTflYKsY6DElW7z+QwG2oUYMb3Fu3DmFrgOmCNiAbCTvsp0mu+VJ8gfIXtM7/MkYpJTc/h35SsTM/ph87xg/NQbJOs/z5KsxW6LM8S2D6zlA8jWVnX2U5N0GIbdO01Ou7thJHjGcgC0i3c642SnyrM14Gm9TUzpEjpamU5W2inRHKvSTIkdvQZKQ0pLKhopVpSX5qxCcuyoAeUUILlz2zi6MDS9cJ8TR2bpeb87QmS9OBFJDCrv25gDL5/70iSHcPCunUbjoyiIsxcW3VQGY2/fZlVROmSRn+9oKdQJ5x3GSP9+eFCG8LFJ8vyzZkHuGyIubkwww95G/1aTyWpuX/t36j3vIT+ypfV/tptist7Edh3Hy2SAsBYLcL0CrDU0BJV+XBx4d14Tc6bK6mwNAzffJPsNbDaDKlee5/5JWZeu2ijsCci1NJj7pNrEHZbu0CnVjM96+KCl+4IMzcnhI17Xti03T8uBvPm/rPiGunOJbjloVbYa6mz/IQ4pS5efrK5dTUY/9y4oqolgP4sCSokwMYttKyCYEXbFlF+lBihBdw1dwrl8BeQSuxagDUKAHsUk7JsuPl7A5ESI04nS07x+oUsf6RGPcyMmN+S7gQk0ixH4DZuIQR/y9Zxab6mKGXXoYkXmUJUJWA3/HQ0G1sablYDwgC1WQGaxJhBQj/qYPqgTqc4yMxox8FaQcq7MSC+IFeu+N6K3kTTrVhoyW/DfIwRUHef0UPbWK2kCWa0M66I+8uJc8pfGncd80J+9QMpGs04Y8x0lF2U0OF2ok4C/b/7WfekzSFuXFa4ldCZPc/b2Y2LqokYD4YddR28DIyAVYgfZKVSExxQrKJmQ/D8u6h0rwR7tPVU/W9ceLzo1rzNd5sF1eCkXnEJbqzTnV6ZyO2apfWgvMYeA4E+rGhqIwQkBYvstXCILSzv+VUGfqWwXZFbXIQPbQA1MYmYogu1jIBBFO+gtqQKSN7WxKcs6kajdAkIPtqYy/JDirdTQYaMPE/yL/AQn/nlzVMLtOAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-l {
|
||||
background: url(@/assets/v3/bg5.EqAxWS0a.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWHx8fHBwcGxsbGhoaGRkZFxcXHR0dHBwcHBwcGhoaGRkZGBgYFxcXHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGBgYGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGhoaGRkZGxsbGhoaGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaYKSRzgAAAJB0Uk5TAAEDBAUHCAkMDQ4PEBETFBUWFxkbHB0eIiMkJSgpKiwuMTIzNDg5Ozw+P0FERkhJSktOT1FSU1RVVlhZWlxdXl9gYWJlZmtsbW93eHyBhIeIjpCRk5SVlpeZnZ6jp6mutrjCw8TFxsfIzNDR0dTV1tfY29vc3t7f4eLj5ufp6uvt7u/x8/T19vf4+fv7/P3+HFNa1wAAAi1JREFUSMft1vlbTFEcx/FPqQxG2m6MZQaNpGiUiazJVoRsyXIThWQZIaJl0rQwTNP7T/bD3CbPjOiebD/0+emc53tfz/O9555znyP9JLlWoEhmCdgxYOhKoXuacylJKrE61/gGzNxsrmnthmTYpT0MfVskSaFRpje6srnvGFnvjPfMcccVroZD6cltpvLd4IskPelJPexygzsZWJhY0OAG36VvYeKBYyv4z+BK27btQcbtdLqg17Zte82v8VEWy4Yl4Uc9b6Lve9J5GI0+7Xm5VPyj/sJ/Fa/aGd5sigPPgHvrjLBnCIAuI3yaueNFt6DcBF/llVQOIRPcSny7WmCrCbYm+ToKj3OMVrs+BkR8ht+5dIT7+cY7LMI1rWAX2NpU+G/OsxFe1g/QHPvOLpYC/T9ZGzLOXlVgnIll4/2WSdpTuMJosS58h/1hqaraKZwpkc47FzHvOck66RRqg9IRXyb2jyUaq6amU7qNSHEHvR5J8vbTbg3SkrqHxmPB5uSwLwsz+5k05iMLmBhpzEySLCz/BMTn224Dnsy3/Zx5K9UmYCyrbVXNwGyj80wHMFDi/BDeAu1OoXkOJoOZuHKKTxMkUnfM6zAEkUJJKh2ED3BZknQiyfgXYjsycNnr6Wr/WDQgSWpK9nra6M6TpIIHtHj7EwclScHYsC8Uf1GU2XbZbskfcLqr80gNealxwQHJu88pBH1STXHWO5tuklOVJun8DQfDHK8OGGfbN0W21rQF0iFVAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAMAAACvSe/GAAAAAXNSR0IArs4c6QAAAORQTFRFAAAAAAAAAAAAAAAAAAAAMzMzICAgGhoaFxcXFRUVFBQUHh4eHBwcHR0dGhoaGhoaGRkZGBgYHBwcHBwcGxsbGhoaGRkZGBgYGxsbGRkZGRkZGxsbGBgYGhoaGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGRkZGRkZGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaTYzvEwAAAEt0Uk5TAAECAwQFCAoLDA0REiMnKCkrLS4vMTM1OD0+QklPVGRtdnp7fH+DhImKi5CQlZydn6Cho6WnqaqusLK0t7e6vsHCy8/R3OLm6/D5JIZOigAAASJJREFUeNrt1VlPg0AUhuFDB9z3VlzQ1rpXxaVYtVqlo3X9/v//MQykAk0snKGpF76XkPMkc0IYIlXF5rVKUR/g9VUg4DIO0IgDu5S/nQCYcYI+ce7krBwBNvP0uC8Q2J7Pnx8HbMb+HooGFlqqAyLRGt7iILARLkYSWRn2tzkIrPiqUyLhD688gh1oA8sd1Qkb+FkiE1i6Ux2Nbwf/QIaByta6HuClvhFtoIvnavVCA3jtXyzjAh7RmQ3SW6LKBg5rYWfNq+ZlLZWTBNaix7048Gs3SeA4frEUA1CpnzCFKUqpjCRgpF9kzcvxt/qDwMS+FQL1Od78E9qWB2m4eGEJ5i3QvoZ0ATlNXOEN74CcYi4hEKAxHwka80Tmnt+YpJH0DZhq6TgD/Ay+AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAt9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGxsbGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaU0yUGgAAAPR0Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYoKissLS4vMDEyMzQ1Njc4Ojs8P0BCQ0RFRkdISUpLTE1OT1BRUlNUVVdZWltdXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqOkpqeoqaqrrK2vsLGys7S4ubq7vL2+v8DBwsLDw8TExcXGxsfHyMjJycrKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP19vf4+fr7+/z9/lcEE90AAARdSURBVHjarZdrTFtlGMf/pzcKQ6Bchs7q6NgG0zFgTGdMFMY08EHZmOhQYdGImWZL8BLjNRpNRoKJUwwmG5sBs1Uy1DgZH3TZhjo+zIVEQz906ibhMu500P7rCMXWD6eXQ3vOaSs+H/o+z/ue8zvvcznPe6pFFEnJSXF7sSKp7HaSYy3rZJZ0MSIMLRRlsip8Sd86N7orJsYX5O8vPlDVPE/nE2GMdpKu2tgYx1MBoPgKnXsjGLFQ9B3kEa2or1tO0beT58hwtAyjnTyqDVgWO13BG4R2sm0vudFO52OqkI/INkkCLHbOlwaMF9imqyETLPbhAjXGg2THsiRaBnnFGDAqdKghE2BRZaCTf6Uvn3mUlKaohkwI6Bp5RlIFWh3Lp85cRbnCExXq7nYDBsQ8l5iXrtoAAJfWb4gPkgTMAjAcfDUVwLV3vwPgQLICRMEdHwDA9O0HqQCQa23WqAVQeVGA6UwpLlSa8+pGcOCwxg+ObycaU3cRmnb3zV0/vb0bDR9rtCoYWTGT9T+Tr/tNo5X8tJNfK6RYQbRDHCLfCNpGKznLQ/FBcJjkmxLbeJLkvfEVGz75G85Oib1wAfjmcryNscpFuyVk7nPxNxPidAd4Ukqpc9FmRvwQ1Lpo93fop1203bF8taSpSRcqKTlZX5a72nxrShY8E/8IQHIGPNMLI+NTtnPT8nUZ+fLtq75LaXfei6e/dEeHpB1sTAQW/7g27fDitjHAB/gyluagz8zamA9g4r1TS9GSMkzOHNuTplDIz5wi2Z+vihBec9H12Vq1S7Z3k+MVKhfojpEDRdGytmeSzgbl5Wbyq/Toud9ip+sRpcDWHUHXfg/0qQIgAALkRu8IkH0+x/2QTRZS2GsYeNgNFPWpbWM0H8Cm3uShbTflmtJbBketG4BD1ZcZALA/i7XPye2krAeNnwPAqkm0XIRPrJCw8ZXyHvEQP1E9XyDztJ9oM4jaNBWD38WjorLJybcj3cktwaFFUXUgU7FtYl5U7FbURkJ2wvN90O0MJUhGMGI9sNwdAanE2Tm/OoI0JYgJs37tx5uoCIcIpTgfmJuXQgxPlYWMxCTc8KvusygKh6Qn4Hpgbg6SJnbgRvnWoJEOBLaLCeSEQ7KBqVApSAKrWfRoJN4EAguMYU04JAuhO2cgeYFazb/0B41UBN1BDlZrwxviKCfv8+vV5C0K3YYMtPx3yK6I8+aeCY4Vi2opmSMPqaPTf+NL5A8yXxr3T3FY7K2F5FZ5SCOHRaWB7JOtgx2zHNkFAHeSO+Qh7/NXAEj6kOyXBF/ypdRbf8JkvXxpEAbg8Q2SRqIJNpRyGF+GPq8sG39WzUje4ryOUNNZtSbWvw4LTm/gGYJziy6xAP9BjMaQrofOB5x0hPWNzZk+eAGv+At44YUgjpODYX1m224BKCSLsQLZzzFofFipCNAoHuoxik/1EzQO0fmA+p0q50y0cTME6AA8v+KdeMbljoY4Rp8D/4v8C2Rr2YaJzeY6AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-l {
|
||||
background: url(@/assets/v3/bg6.hlVmcDno.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAMAAADhcastAAAAAXNSR0IArs4c6QAAAtNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHh4eGxsbGhoaGBgYFxcXFhYWFRUVFBQUHR0dHBwcGhoaEhISGRkZGRkZGBgYFxcXHh4eFxcXHR0dHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGBgYHBwcGBgYGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGBgYGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGRkZGxsbGBgYGhoaGRkZGxsbGRkZGxsbGhoaGBgYGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGhoaGBgYGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbHBwcGhoaGRkZHBwcGhoaGxsbGhoaGhoaGxsbGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaHBwcGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaHBwcGxsbGRkZGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGRkZGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbHBwcGhoaGhoaGxsbGhoaGxsbGhoaGxsbGxsbGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGRkZGhoavoj1/gAAAPB0Uk5TAAECAwQFBwgJCgsMDQ4PERMUFRYXGBkaGx0dHh8gISIiIyUmKCkqKywtLjAxMzU2Njg5Ojs8P0BBQkNERUZHSElKTE1OUFFVV1hZWltcXV1eX2FjZWZnaGlqa3BxcnN0dHV3eXp7fH1+gIOEhYeIiYqLjY+QkZOUlZaam5yeoKGhoqOkpaWmpqenqqytrrCxsbKztLW1t7i5uru7vb6/v7/BwsLDxMXFx8nKzM3O0NHR0tPU1NXW1tbX2NnZ2tvc3d7f4OHh4+Pk5eXm5ufo6err7O3u7u/w8PHx8vLz9PX29/f4+Pn6+vv7/Pz9/f7+0IfVbQAAA+dJREFUeNqd1vt/W3Mcx/FPLWJh7S6oDd1GU9cwVlUUXeuyGcNqdZvbMJvLrJShC5u6TNvJ5s4uGGHMjKkapi6rYG4TMdpVl8qWNssie/0JHueW5iRNT+PzSx7fT87zkXPO953POSJ6HX1SchVKVrWS5IrPzfn/GJoOzAqv7DvrU73wYUH6QUP6gXmXNXV105jU2b8O/KWpxz0Y+6z2jJTe8F/UE33T1Lw2QuT2QlNtUg+7I7EeL7kez3rYtAx4x+PxzE7cqFI/abW9oT1p9ZuMVD46RBboneXDDF0QTLVd+VKdintoE5HnIPr6Rmg5ytCn3VfaVy9A8HCR82G+1nBruAVWiMiCOPfYHoDtZf3c09w47fkixRHip2ud2Rq+6h9VHxrnSpEZYaIz03HOj7hVyyLpwwVwk1PRxy2EI0WkZBt89WR9arUSurUsBt/U19dPM3Ah3C2KBvZVKt0xzVjU/SYsTj/09hK+5ArPK8eM8we8yeX7e+un7RADtnm93mAqluE3TB7mChAHIhVyQPLlbtB+rm7IhBvPUdbNaVitMuATiFWk2N/98H4iPRnwdDhRSUuy3gCd+fs9y0digR/nW1GzFikyWi8pVmQWFFjgR/W0wIt6Z6JmiyPExlrgUUFNf8xSvXM8XKplo9bqtNX9XiElUG102nh6qGIfE0usauWvWKWvHd9DqNtkM2Nx7kSJQ7hS5OqaSSNWa3ucbAfAMuph9wUTA4Qr1wP/wsJT5jwzRQaJ1XIF2Ad7lNmQPoKtsLj2Qufokzuokezxu9r+NvJF9vhyPRs97Mwez4QiLRvXZ4+dcLFqX5XssSPIrpd3g7rf2eDy8qEOPRvPK/stY6ceMlj8GoQCsHTOWz9fo+z33i3wR8XgsD5z3Ho2XN3q0jRbMmJlbpx9L5xlNFppqaoz60xYnTliC2hfi8hhMEOdDrFJVvhmPRshvMbdg9XabPk1zwIv5y9t5jDN2LMt2mxZrIzGgfF1REeKeW5os0VqaLdZ4GNh7VzzzFH1msVdvD3QNR/hEEd/c8N4ju2pFBnt6B8/we5VX8I6byRyV2rQW2hr2EFv0+dsPVdEfqDT5/P52hPYeB7lSO7BaWG2jRFx7Uik5ae+14pCmKfYjts202OXjPUI4cYGVX/NujvVukV5M7hQy0YxlGfGG2nS0lLRnIiQgpdp2SiJMy+jzYU1Wlo6NptwiEC+SHUUaqdnqioffCAiD8GfJgzviRTHrF4m1LScmXitSOD4rIsi1hZWTV1rwmK3j4uq3zxlH7hO2KUetsRutyXfjSlvRIi7xaqc30Hr/BFp/bzzJlhakYMmF5nW/wHDiRiDSjYLFgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAMAAACsn+1dAAAAAXNSR0IArs4c6QAAAotQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOCgURgAAANh0Uk5TAAECAwQFBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYoKSorLC0uLzAxMjM0NTY4OTo7PD1AQUJDREVGR0hJS0xNTk9RUlNVVldZWltcXl9gYWJlZ2hpamtsb3Bxc3V2d3h5ent9fn+AgoSGh4iJiouMjY6PkJGSk5SVlpeam5yfoKGjpKepqqutrq+wsbKztLW2t7i5vL2+v8DBwsPFxsfKy8zNzs/Q0dLT1NXW19ja293e3+Dh4uTl5+jp6uvt7u/w8PHy8/T19vf4+fr7/P3+fNOr7AAAA5JJREFUeAHVwYlb0wUAx+Ev2zhcQZgZTIEyCo9MsYgE80wEs8ikpDKPMqjMzDCLLgU0ZKWUmlGmIRSm0qGWRyqp6SRImMixz5/Tw/ihO20bTz1P76sbi0nPsCpyqduc0LMnUxEqbsetZ41JkZgLnesfnfvaH7BSEbjld46nS9KIfVzJUPhepvdBuY1qxa7w7aFJhs2cU/iOUSnDMlwWhe0QtTKsoUvhq+FsjAY0cFDhmwVlciuCFxQBO66NVslc2sX3ZkUg8QR0HWi8DI6xioi10kW/XcmK1OS12z4rn67/J/P08h3f7Tc01VXOj1VYZh/Bx9lihWGVCy7W1VQP2nkGqLYoVMuh/RmzPD3SAlUK0T09HE2Rj4TdME+h+YSeTPkZeZGfFZJhTt5WAIthgkIxDTIVwE3dLFMoFoGrLxB4U6FYQlAbFIpxS4LK0X9utsORpKGYBzYNRR7YNBR5YNNQ5IFNQ5EHNoVs1Irq2g/mW+QhD2zyNG39VvuqsQokankn/Q5N0HUfwmO6LvkL+vW9FSM/UTvAdaKxDboKZBhWBfS+apJh4iVw7j/cCz9Z5et52HuHFLXQwYXb5JZ5DP50QmOa3KJ/oKvEIiXWwEb5SOqgPkr9JnVjlyRTaTfY40d/A21Pql8pFMqtAle2vC2FdA14F2eclFIPbQslmUquwscJko7ytQZYHVTIWxUtMsyDe1XYCg2pcsv8FU7nyNJHqQxf0Shvdg7I8ABkx52m+xWTDMOqYJ/iYbEMW2iWt3U4LRrwLKQq95f75SH/RJr0F+/L8CO75G0mPCc3y0GOSzLLi1nSds7fKrdcFyvkzdTA5amSFL0BFiqgKT3UxUvS3b9x5mb5GNNB36bCnGXN8KmCeANaXno4f50T1wz5md7CgG2JCiK6vA+39qcVQEJlG3DkCd1ATpMLrtSmKLDo9Mm36x8kTsyI078hbvyMOYMeSlNASVlzBs26L0Gepu504ulU2XD5iF15GE+99Qs0KHYLfloL5CXzFH72jpBbTCM4Xs+9K23Q+AW10FcsD7lOaHhqUtqgO7NePAknR6rfJvg8Sd7yz3E1S9fYLtCxNEperBUuvo2SNMXFbvkZ18V+XfMRFMhPORRJstM2Wv5KIFuG4T3UyF/cMZol0yXeUQDR7ZTJUARjFEAxpCgZtq4O5BTbZVhL5+pANsBMTSKoJhk2E9QiTTwf1JcyvHc+qMf/BiaidyHImEZ5AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABOCAMAAABG1vXNAAAAAXNSR0IArs4c6QAAAqZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGBgYGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaJuXLtAAAAOF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBobHB0eHyAiIyQlJigpKissLS4vMDEyMzQ2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlbXF1fYGNkZWZnaGlqbG1vcHN1dnd6e3x9f4CBgoOEhYeJiouMjY6PkJGTlJeYmZqcnZ+goaKkpaanqKipqqusrq+wsrO0tba3uLq7vL2+v8HCw8TFxsfJysvMzs/Q0tPV1tfY2drc3d7f4OHi4+Tl5ufo6err7O3u7/Dw8fHy8/T19vf4+fr7/P3+qN2dfQAABIBJREFUeNrdmPlfVFUYhy+LBIgigkKoWba4VCYpmGFmWCIKoWimpYaSkaQSFphGhVRuRRlRuFSYEBahljmhFqAi+xYEM8oyM89/0mdmmOGcOyvzY9+f3uU+nzvnvOe859xRFO8UF+8lOOGQ8cZ4r8ikBmhd4AUYWQwcm+zNOy9D3XPeDXSl/mCwl3Ok3O/RU+FLVo9qLMObftKAoMWek2v7wTt0Vj+6vbFRkTaN8xj9ib5HHCYmuiOjIdNhYlHv676u0aXwuMPE71A9xyWaCNEOE7N/haGce7xBFd+MPqixe/HCLKuOQq7Nmakq+GnaI9RoFg6VoH5ufapijxq7LfpXq+2xWL0OUAfKotsuNvP/jo4LmzEt1G+saFjKR+W3zTUx1H6fuzzIY1T3o0Gu6d0zHqH+J81Pd5TmbVm7YmXa9g/KdOZAtvu+8BdQmx/vNxoKWn2kHfglziU4rQo4b/+Mb+p1oMjFSbGoGf5McjyO9Gb4Y4YzctMA+kw/Z9nxhdDqpK+9Dd0uj4Mdwwyuc5R4Ba495HoOl3Vyd6F9OG6Qmknu5v/hbprsGsf0Frpmua96gp7fguSQzwWGn/WkNb8Bn8qRjbBTjgStyS8+d+LgqkAVexTDXNEPqOeyjxgIO6AbWb/9eaESOrmb71Q/Q1reCZ1AQ/nX5Y1A21J12xMCEzs4J2a36jEcn282Y4qMDG+SRtLAhVHvNVggT2NTrM17uo0h6Yr0Kjxpc6rQiOPspFlcrA+00zJB8EMGOGS174V3hNR7GGKl0T0DOaJ/hhar+TLEjCYCtXymKkgJ3eKhvBWsx81hbguVSZIHbtJTsFxwIw1kjJgXpdccoNFup3ewT/Q1thXVy24hXkrXWbMSFUVJsZg9FMkDqBxZH5AmxM9b+2C6Za1YVCaiedx02Nq/orPELNO2T7SYPRwW0V3WLj8PxGJk0+ajHmsvb4r+dvQWYy6IPTBRWqNmvQDLpE7DsMW4D1YIcb8milXoKep95B3QZTEmwQYx8S7IDTUNqQSKsp/6EauLvWIi5G8GfhiduLSyAWrkpvItFSNWNV/InVwPBTbvBAyqbl5XKRyxPqZFvrelgDFFUSKiw8xbzJioOl4sNTdpvTzFiqLoaQ0y3S6/VJQputF9YptgrA17qpH9cnLYvAvNqHKEBhV6VohUcF2N7rCh+9Ro6BDvi2fGYs/RDPHCGtxElQpt1Gg0Wv7RaDRtKjSk1bpvzNoGyTIqSkZzQDyy/K9xVTxYPywQJW3zKC0l6kru8eTIUXy+YfhBOVSBcY0naDbkq0JTb9I/zz2ZaqTS7ovlMS31Ue7IGC11EfbhF43cmu+aTNY6+Wk7DejWuSL3GNE+7ziV1IcxN9AZGFEMNx51lp1TB7c2O/xwCn6rF36e4vwnhZ8Grqyyu3YFbWkEfUGAy5lYdsl0LT2WLHxQh28uNd0OTs12u1w21JrW7Z3KT3Zte2lj+u7jF/Umv3qJJwvGP7H4jnyV7iiMUzxVQHx2yZU+I+i7Ln2e+YSvMlb5hHj9F4Jb/Qfbt6tIIlhQ6gAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 39px;
|
||||
width: 29px;
|
||||
}
|
||||
</style>
|
||||
66
src/views/Jyh/ProductServices/ProductServices2/ModTotal.vue
Normal file
66
src/views/Jyh/ProductServices/ProductServices2/ModTotal.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="mod-total"><h5>实验室已为超过 4000
|
||||
家客户提供卓越的安全服务</h5><h6>即刻行动，与实验室安全专家一同开启智能安全之旅！</h6><a href="javascript:;" class="EASE btn">申请试用</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModTotal"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-total {
|
||||
background-image: url(@/assets/v3/num-bg-wave.png);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 270px;
|
||||
padding: 67px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total h5 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
.mod-total h5,.mod-total h6 {
|
||||
color: #1a1a1a;
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.mod-total h6 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 29px
|
||||
}
|
||||
|
||||
.mod-total .btn {
|
||||
background: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 34px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 32px;
|
||||
margin: 0 30px;
|
||||
padding: 0 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total .btn:hover {
|
||||
background-color: #7aba4a;
|
||||
border-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
</style>
|
||||
50
src/views/Jyh/ProductServices/ProductServices2/index.vue
Normal file
50
src/views/Jyh/ProductServices/ProductServices2/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product2 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
|
||||
import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
|
||||
import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
|
||||
import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
41
src/views/Jyh/ProductServices/ProductServices2/indexOld.vue
Normal file
41
src/views/Jyh/ProductServices/ProductServices2/indexOld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
102
src/views/Jyh/ProductServices/ProductServices3/ModBanner.vue
Normal file
102
src/views/Jyh/ProductServices/ProductServices3/ModBanner.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="banner-container">
|
||||
<div class="txt-content wow fadejinzhiInUp">
|
||||
<h1 class="zh-title">软件供应链检测平台 (源链)</h1>
|
||||
<p class="en-desc">
|
||||
透视黑盒，溯源无忧
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="action-btn">
|
||||
了解研究方向
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mod-banner {
|
||||
/* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
|
||||
background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 520px; /* 增加高度以匹配大屏视觉 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中内容 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 增加一个深色遮罩，确保文字更清晰（可选） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zh-title {
|
||||
font-size: 48px; /* 增大字号 */
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.en-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
background-color: #C8161D;
|
||||
color: #ffffff;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #A01218;
|
||||
box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.mod-banner { height: 400px; }
|
||||
.zh-title { font-size: 32px; }
|
||||
.en-desc { font-size: 14px; }
|
||||
.banner-container { padding: 0 20px; }
|
||||
}
|
||||
</style>
|
||||
502
src/views/Jyh/ProductServices/ProductServices3/ModTabs.vue
Normal file
502
src/views/Jyh/ProductServices/ProductServices3/ModTabs.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<div class="mod-tabs">
|
||||
<ul class="tab-hd wow animated" style="visibility: visible">
|
||||
<li v-for="(tab, index) in tabs" :key="index" :class="{ on: activeTab === index }" @click="setActiveTab(index)">
|
||||
{{ tab.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-con con1 wow animated" v-show="activeTab === 0" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">平台服务</h4>
|
||||
<div class="l-desc">提供用户友好的 Web 界面和 API，支持项目管理、扫描任务配置、结果可视化和自定义报告。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>平台展示及用户交互</h6>
|
||||
<p>
|
||||
提供用户友好的 Web 界面和 API，支持项目管理、扫描任务配置、结果可视化和自定义报告。包括仪表盘、图表和交互式元素，帮助用户快速理解供应链风险。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>数据管理</h6>
|
||||
<p>
|
||||
负责内部和外部数据的采集、存储、清洗和更新，包括漏洞数据、组件信息、许可证文本和恶意代码特征。支持数据版本控制和一致性检查，确保数据准确性与时效性。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>高效管理</h6>
|
||||
<p>通过直观的界面和强大的 API，实现项目的高效管理和数据的准确维护，提升整体工作效率。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con2 wow animated" v-show="activeTab === 1" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">成分分析</h4>
|
||||
<div class="l-desc">
|
||||
覆盖主流包管理器（npm、PyPI、Maven等）、C/C++项目及二进制文件，全面识别组件、版本及潜在风险，输出标准化 SBOM 报告。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>全面成分识别</h6>
|
||||
<p>
|
||||
支持包管理器、C/C++项目及二进制文件的成分分析，通过依赖引擎、代码相似度检测、反编译与特征匹配等技术，自动识别组件、版本及潜在风险。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>特征检索与版本推断</h6>
|
||||
<p>
|
||||
基于 TF-IDF 特征检索技术，通过特征签名和组件召回模型全面匹配，从复杂依赖关系中精准定位版本来源，输出标准化 SBOM 格式化报告。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>深度依赖分析</h6>
|
||||
<p>支持多层级依赖关系分析，完整呈现软件供应链全貌，帮助企业快速定位潜在安全隐患与合规风险。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con5 wow animated" v-show="activeTab === 2" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">安全检测</h4>
|
||||
<div class="l-desc">综合多个数据源和引擎结果，检测供应链中的安全漏洞，并提供修复建议和优先级排序。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>供应链漏洞检测</h6>
|
||||
<p>
|
||||
综合多个数据源和引擎结果，检测供应链中的安全漏洞，并提供修复建议和优先级排序。支持漏洞影响范围分析与风险评估。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>恶意代码检测</h6>
|
||||
<p>集成恶意代码扫描功能，通过特征码和行为分析识别供应链中的恶意组件。支持投毒攻击检测与异常行为分析。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico3"></i>
|
||||
<div class="list-con">
|
||||
<h6>精准漏洞检测</h6>
|
||||
<p>在成分分析完成后自动匹配已知漏洞并评估风险等级，可提供修复建议与优先级排序，漏洞检出率提升 90% 以上。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico4"></i>
|
||||
<div class="list-con">
|
||||
<h6>恶意代码防护</h6>
|
||||
<p>在组件引入前自动检测恶意代码与异常行为，可识别后门、木马等安全威胁，恶意组件检出率提升 85% 以上。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con6 wow animated" v-show="activeTab === 3" style="visibility: visible">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">许可证合规</h4>
|
||||
<div class="l-desc">分析软件组件的许可证信息，检查兼容性和合规性，避免法律冲突。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico1"></i>
|
||||
<div class="list-con">
|
||||
<h6>许可证兼容性检测</h6>
|
||||
<p>分析软件组件的许可证信息，检查兼容性和合规性，避免法律冲突。支持多种开源许可证识别与冲突检测。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item">
|
||||
<i class="ICO ico2"></i>
|
||||
<div class="list-con">
|
||||
<h6>合规性保障</h6>
|
||||
<p>
|
||||
在组件识别后自动检测许可证兼容性与合规性问题，可避免法律风险与开源协议冲突，合规检测覆盖率达 98% 以上。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defaultTab: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const tabs = ref([{ title: '平台服务' }, { title: '成分分析' }, { title: '安全检测' }, { title: '许可证合规' }]);
|
||||
|
||||
const activeTab = ref(props.defaultTab);
|
||||
|
||||
const setActiveTab = (index) => {
|
||||
activeTab.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.defaultTab,
|
||||
(newVal) => {
|
||||
activeTab.value = newVal;
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值生效
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate .mod-tabs {
|
||||
margin: 0 auto;
|
||||
max-width: 1360px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 40px 0 20px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
-webkit-transition: all 0.4s ease-out;
|
||||
transition: all 0.4s ease-out;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li:after {
|
||||
background: #4bad52;
|
||||
bottom: -5px;
|
||||
content: '';
|
||||
display: none;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on,
|
||||
.pg-evaluate .mod-tabs .tab-hd li:hover {
|
||||
color: #4bad52;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd.EN li {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50, 50, 50, 0.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l {
|
||||
position: relative;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 584px;
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt {
|
||||
color: #fff;
|
||||
left: 57px;
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 169px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-tit {
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-desc {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: 26px 0 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 50px 0 0 83px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .item-list {
|
||||
padding-right: 78px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-tit {
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item {
|
||||
margin: 0 0 40px;
|
||||
padding: 0 0 0 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item .ICO {
|
||||
background-size: 100% auto;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-con h6 {
|
||||
color: #4bad52;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-l {
|
||||
background: url(@/assets/v3/bg1.B9IGVx_y.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAAXNSR0IArs4c6QAAAtZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcFhYWGxsbGxsbGhoaGhoaHx8fGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGRkZGhoaGhoaGQes7QAAAPF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKistLi8vMDEyMjQ1Njg5Ojs8Pj9AQUJDREVGSUpLTE1OT1BSU1RVVldZWltdXl9gYWJjZGZnaWprbG5vcHFyc3R2d3h5ent9fn+AgIGDhIWFhoeIiYuMjY6PkJKVlpeYmZucnZ6foKGjpKWlpqeoqaqrrK2trq+wsbKztba3uLu8vb6/wMLDxMXGx8jJysvMzc7P0NHS09TV1tjZ2tzd3t7f4OHi4uPk5ebn6Onq6uvs7e7v7/Dx8vP09fb3+Pn6+/v8/f3+/jZlGfIAAARzSURBVBgZtcGJf84FAMfx77PjGRs2c2QUm6VoylFyLMdmmKOkiGooUY4cqSgVy1JKIoq2pMOoxCK1ImfMNCamaZjYxR5b6/n8B/1+z+/Zs2fHq9dGvd/6v4XqxgRltNcNeZUNuhGdSiFWN+BL4LC/rttI2A4zdb0aZZEZsI2CMDVMt66yPA/DFFXGGrn1i1A9tCq9cqtM4SWkSloK0XIZSrbqodlVFsn0GVcjJTXLZZ+vTKlkqD5SOOkjKQ4WyjQepsjQuozn9C8e6ipLPAyS7EfIDpTJ9h35LSU9jTNcloGxqmUwRbfIxe8sc6Vn4QFZelSwQtJ60mQZ4Kxoq5rCS0mWJW5tB7Ur5GtVegtnL6n3+i5y8T1Ijl21vAYD5bEORxdVCj1Puk0eU2GcamuSwwFV6g9LVGUSJKhS8EV2qC4PU2KXxfcAvw+Ztymj4BqUF/361ctHyQuRWxRl3eQlwC63+L5yS4Rr1LA/1ibL8D5yC7JJjU+f7aNqWk8/gsWZs+uT5G+Pl2M5sSBc1YwrTpOCCykapCo9NjqAv3OgaGELuQRNPQd/ngWc38SoyqQKDkmKKeJKvNw6pzjBuXVsIvzcXh4hWyA5fqMD2NZHbtPh1O0y9L2Eo6tMHVaVQ/6CcI2EbYHy4rMaZqrVMyeB1DtlGgOZ4XLpcY5hknxnFEPhwmDJfoxjoarGvoOC1lLAtLNQviRQ0hx+CZNb816Suu+Bq0tbyTAFhshyc6Qsnct4Q4aguRchK1byiW4kb9NKIe02uXzPDrmMz4H82b4yrSTPR6abksG5xF/VhG6CSxNtcmnj5AmZXsIlRaYYiJYl/hSkR8jLHZnwQ4TchkO4DD3L+XHYoFQYLYNfMdPlFvoFnB8gjwGXYYm/Kk2m3EeGF7jQXPI7xIcyZZAoj2kOHI/ILawYElVlHnkyJbNVhuXslWkn76vKZHDeK7exDhxT5PEkDpsMr3CmkaR0Nsh0mCR5jLoM8+Qx4DxsDJHbKAiToT9siopcDhNl8ClgltwClsGVcfLScTeciJUlAibItBKXNJsMfSBOlu574XgvVWNPAj5oIZf9bJbJb74DnG83kSmJy3aZGi8ug4+DVdPQU1AyO0CGOdBbLkHRMSFyaVfCezL4jP0NLiaoDk13A9kJflKTXPY0VjW2zymNkDTyILAhTHXpVMofwNHHgpQAH/nI2yJYLP/70zHFqE5bKG4/OB0oeLfvStjcTB7+78C2u17PA44+eorD/qrDCJgnadQeDBlZcDrBV5YRhyF3H4bMBD+NgRmqrVEWmQEydV92AUvJT2sWvbhq52Usxav722TYTkEb1TIf4uVmfzDlDDXkp05sKktUGWtUU4cSUuWt44QVhy7+hcFZkLF2cpRNVZKgn2r4lKuRqs3e9e5A1dIsl72+qiYOFqr+JsAUefM/Qnag6s+2i/yW8jILRqshelawQlXaFrJVDbOcinvksQ5HFzVM6HnSbXK7D06+2VAH4XFZfA9wffJC5DJi//V6Sv+BfwBIbvfBNZtweQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA6CAMAAADMWVqUAAAAAXNSR0IArs4c6QAAAkNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUICAgHh4eHBwcGhoaGBgYFxcXFRUVHx8fHR0dHBwcGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYFxcXHBwcHBwcGxsbGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZHBwcGxsbGhoaGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGxsbGhoaGhoaHR0dGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaZrZiaQAAAMB0Uk5TAAECAwQFBgcICQoMDRAREhQVFhgZGhsdHh8gISIjJCUmJygpKywtLi8zNDU2Nzg6Oz09Pj9AQUJDRUZHSEpMTU9QUVJTVFRVVldYWVpaXF1eX2BhYmJjZGRlZ2lqa21vcHJzdXd3ent8fn+AgYKCg4WJi42Oj5GSlZiZm5yfoaSnqKmqq6yvsbK0tba3uLq7vsDBwsPGyMvN0dLT1djZ3N3e3+Di4+Tl5+jq6+zt7vDx8vLz9PX29vf4+fr7/P3+nMc1QAAAAuJJREFUSMfVlulfTFEYx2fmtk1laDGtWqzTKksJES0itEipLJGxJEsoJEsSIilZsoUWoqQyg8bcaX5/mnvvuTPN5864nUkv+L2Z5znnfufznPM8zzlH4RtHIbVCqjhQaMUcYgXyERb/AYtTyCrpX8PW5ola4xbWZdu7R3OK+YcvdIX5aUT5TY95abWexIpttsD6bDPdltgV+0UIZKrSLUzZix8nUoreg42gxXQl+uONQD5nBhtwiQ7b1kv2aZLhvWZ00GCqRh4ZHzHgp4C1opsGuwAMFYZypQDs49xoI2oosHgrHmsE6zks9ZlVQ5hcRIG1YjyEWDH9JAFZFAnwMKLeZgdfHQU6UmjSHQrsmvY85zN0jaMDklwMz4TFA/E0mEdguKNbBIRNe2ptgEtMrf8M9J1k7ANNGLU7UTdYWLs3OmNMGymju97iQAKLJjs1LMxZypywGuDeps33gSPET+yDyR7zG0zWppYNgA2TYv1oU3It0o7h5IzSY1ceTAFnk0SVcicq94nWiAYJxiVJ6N2trg/nMWGVt/BQgi0AMvnfbNfYNxU/edupA5ghtHNTTCf6dKvzKuuaTcBlnahyoIT7JtKAWunaqrmay87pBI4Sf8lLWBNskz1gz2ccGIQpWop53yHhtCjFgUgjvxLxPwZJB+Q5p1ulfwsMHvKyD5wCq7HZ2utjQFeq65oM8lc6eGnAKodognzoSjkAyJlFB8wDts8CYyzQOxzsgRrK++0dWm1mxDUzLJ3pVFgDzDqR+iQkgC2iwcJMeEVup9cw1W3Y/wFm7iTLBXLlj9fDwNeDi5WKRKCYL/fvuKhQFJB2kNNpPjSTYQTjHrzbwtdNFpA109WR3kNKbkJFsCe0F1VUflV1HVDIr3UCZ9y6TV/AfG5dxQB+xbiFLfsohGrdSRKwJ1lWaeVbfMUz46YBeLre/ReeOsT/bx+GO5bLavf//DDcu1JWFXP7xJ4N5rOUQt5S6jcJyGZLl4Al1gAAAABJRU5ErkJggg==);
|
||||
height: 29px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAAXNSR0IArs4c6QAAAuVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaMeyWdgAAAPZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLjAxMjM0Njc5Ojs8PkBBQkNFRkdJSktMTU5PUFFSU1RVVldYWVpbXF5fYGJjZGVnaGlqa2xtbm9wcnR1dnd4ent9fn+BgoOEh4iJio6PkZKTlJaXl5iZmpubnJ2en6ChoqOkpqeoqaqrrK2trq+xsrO0tbe4ubq7u7y9vb6+wMHCwsPExcbHx8jIycnKy8zNzs/R0tLT09TV1tfY2drb3Nzd3t/f4OHi4+Tl5efo6err7Ozt7u7v7/Dx8vLz9PX29/j4+fr7/P3+/H7PQAAABYhJREFUWMPtmGlYVGUUxw+IoCC4YEkpqAQpuKJSKi5pWmq2uJVLruReiguWCFJomUvu1qSpDZJWkKWm5lJauWQa5IaCQpg6EwjT4Mz8Pvdh7r0wwzCD2dOHns6n/32fO7/nveec95zzjogHC4+JkPs2Hfr/AKTHis8Whd8nZIYNKImTBhGfsjey0d9itLnL+XXFWH7DbkV7UwYF3ytkCsXBMhAHs+wYEXAvjDo7KPaWaFg7NO5z9sYNSdh4A6AwocYfVmvUZeC9IQcxBWmO9em+8BxgmOxTI0b4YaAAgBmO0XksCzgeXQPG8wY4GOefVMSFMVVC/OQxMPbzhPBKBtMEEREJdJVs3qNKsc50z/B+F860d5uxHS/BR37uGCsho56HtG/yPUxyA1kE6XU8nZ3oIiwdq2c8C3pHRquX5+Vwec7YNhVLYbmYe1XPiDRwNqjSc8TiS1q6XkqLsi82/gnrc24ccoSySj6N2GAFLJdvYci1ANb1USJS7zCMc+OQF2GsEoCElBFjS6D07YENRIdeAgcsMYJpgvjuhFluGHVzOeolIiIzLQCUzmtcybGN5hnh/Q8gxV2KvAbdRUSkq42ik3CjtVN0Wh4CWOvlhuGTx1a7SuZKQ3mLcj/nEPt+Afra7jbSD3qov0oX6QvNnCHxsM99RfmQ88pGZ2FN6LyfAudkG2bjpPty0qCcBEUG/wnABCdIn3IuNnV/8vqAWifa2oDSKfZ9hU7NJX9GS5HYOxS08lAC5nJTdftirLEdfO3eTjQDUJ7U/gbFnTzVkZ18rCauFibx2Q7WnK+zLWDC3NNjPbupuaQDqKUrEbLCRSQsA2yDPTJqw0uKHI1NOYWhZrK87fXuENZIj5AQeEqRCzmnqKlYwxXZzKTt1HVx1+l0ugzI1NntAkWKyuWk9tYZ8pXV9F8+UZTu6CmdTqfTRYvEUL1t1iDfuHmrm0iEXq/X74EDertdwqiofE5U2kmBsnqLq4raC/v0er2+rfrN0EfUrM9XJwMsYWpxLmOuIrNZoKhe0KKyYwJgmCJHYVVOWYtyMpQM3IJVKY++JuKVN4eAY2e4rXm/HQzUAoW+mYg02QJLlbXeEKuNDibHGO3S0lRyWKVmzy4wnT/9axnsUbtAKvneitzAEUfI6+SpMomb9dUylGyvlNYlKiPgmrYnyWNhlZbzqCLb2zTXiUTOzqdgbpT2PKviayJhgCOkoZnZql5DaWg1HbCJsSJ3xmNznsC2cFqVLczs93MJqZ2JpbX6cIw9ztn/AnQR7dCw2iUkjYoj1LUiKzTzL2Sb9rAKVvlVgdROg01ax1jPNd8qB3EmDO75gF377YZ9TZ0gTTLhkH+lIXV+1dNc7wZgS61rHx9XQ8m8wEqQgFlG2OQvIj61RMTrSwwhVSEB14GKLjm9HAqX9PUTHXrx7Z16DSwJXtI85YLN+vOCB0fBRBd1ZSS2cY9swFZfmwoATDmF/J5tAtjcWqS/yX76bxs47O0CksQpkTbwuLbS6c0rWs3IXxorIn3N3N0U/8p2G1hdDkuTKYuSBK172mtr50mJF7m6ID7WW0SksZG8KBGRrkbyXM5+zYsxn4fr/tXPbK9CjF0NhOEui+0zRgAOhVQLySJLbU7ZldLRwULHJw57By60rQ6SQ6oqt5LppvhPs2EYXcs15ATLVJmudUyXNqgUfnzCJWSdlunBJt5w28hijgPpHVxAJsIce9SWay6udvKaXgwcmdTCARI27iBA8sMikWthjceuGjzfAJC9csbTXTL4qkv/acvPAPzxA9w9e84G23xrcOsJHLnb5tzp9o0JCtpovw6m+dXwFhcydNm3Jcrv73y3YvhDIiLSempqysSwe7qVejVtl8mBdqFe///h8I9Doru1lX/F/gIjzb047a6x0QAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAAAAXNSR0IArs4c6QAABsRJREFUeNrNWWlsFVUUHrayRgRt37vfmS6QlqIlIFSkkIKhwSJVUCRgWARSZTVGQRBBCCAoRUV2UIxFlIQlrLKLQhVFtEBAERQECRaBKmWrCKX1mntm5r3pvJnSVyhx7o/Ou9t377nfOee7U02rnKeKP9LXDNHJNbQ79aCOGCQ24R9ILv9iH00QsZUP+xxOm5D2ck282/CuSgPVa2O5AUTf02t4Eu38XTAcG3CNa4/o8ZUCm1yDchggV6SWbiEdH3HLX5UCjQ948g+TItxaaQCuq13fdoNTGsOuCNbENBAd/HGloCWkmHG797sXEqdQxwRpi4MmrfJpmFbFqBVLmGa3zvD4mlpVE7YVU2qgCTsEJaU4vcaARrSiGU2oCG9J9BMzsBFHUYAb7KWFOI1d2A+Jv/XaPH0i+/Dv1B9NRbrYyUsaZi5wAyT2hmfKpnoWzrt4aKCITWbPxZDiIulWBGPofLNtOCRKtOrlDH6iO/bYIE5iK2ZjjNgMiQs0UkzFClyFxHxz8kOQmBMcLjrzsvhk9Qzev16enXbliYzgJ3EC0YGW1yGRZ77/Boks8/0yJL1stxUDt+dFtFfv/vtvAipisd4EPUXz+W9X24R24F1BV8I3kFjpdKOYBvzeX73fxJfRCQUMVoDRcbWwVhnZcowQ4Dl8jtV48jfYOt3MlmjkQeKAuYiPIel42bAvoBgS1/G2Wqsvijk8sVQPO/AjfHZp6j2yHk4w9EqMwlxxERLFlGK4Hy5A0qwyoi4W8V7PUNtAzlFnE+cFnFwDZyFptXlEyQxtlatisDkik5eX4hkWsIMH7AuyD59CYr/DJjZgTcMktTNfI+NXZD0xFV/jEv2IbGpieQd+UCnEm1JLGHalFf443Sl3mVwWcKSfk192GVTtwezu63W2o9gcn9hpZCQAf+uygDWNZqk9I9Fj4qo4rLKTQcDQkJjBUXZPXK1SEBMhccU5xAnsi0IhJNZ57HcQb6in+24TcUlNFisc9dshsT2ktwNY0zCZjflo6MwxDfCnCj92O9pzag5z8MEQiEtOV3IH1mvjJCR+CZUC4PBD7ilR9OP1jnXWxwqu784/qjWurxMSRbL/YSyDxHk9gzpSCrXQExrX1zTxFPcd54BtxTGhmBOk80mK4AiTZ6Q2u5FoKE+2BftVFC6zFOJnzmBF9micFMFuVCDe4XnSnfsdzEOfNddYhzrSeGzlk6lI+SlIRTGVzdzfPIg9jtRHx43uOtFQmxy3SjF2IVu8ikzqpWeIDmhFTcRMSPxBup6gN9fbUEf0xmjMptXGYsX4QBRTwfYoWgaY3UJzeqqYgW020VKIL8QU9BZfQuIzFx8IIZdZ341HF/masZmtpCrpuD+LrkBigd3QS5UyCOTdXEz0t7Z0Ao4Ek3y5gFua8+zTqmOaobQ58qmtKYxCX12rb3VRbHY+glei4Yg41yHFi2EA3xuw2TrezHq+T/WgVWx0Bd/DMnQKm+I7QyWUfuLu9oo4XsCaphgiDpvg56J8gfpoTKciSJppGXqc0rvxNV2Dis5xuktYwMfUSeKMOjbnSKywZSilLijHI2nYFFO5gXMhsYjSUIK3XASGxA3zlDlvLHAH9rdmg7UMC/grzm8a9QwVsob0N6511bzow6buqDrqCWEBb4OkVR7z3ROgl8FCMxaHTtJVtUb6wwJeB0mbPfNyCSSLIV8j5u2b6ONa5rGpM0NbxBpWoG5jdjOr+3iUK2Ya0ZtXMB7fQuHLqp5w54ExzVAHij59fXXdCg1Urb6o0BahwuFptzF8CDvc5/PVVQKJRhqysxiShnqQ6wkDOCxybTQCpdsTX9NIkkbHc5A03kOkpYdK+ZsCK12+3MOdOBLqGUbHfZBY6gGcymS4Lyzgb70VtpGAzZyMueo+6GFqI9IkhwV80D2RataN47KpT6iXlzk1TY9nFnYKC/iUigseIVhZY0spHYk88UxpIc9psZYRQMIArsZkHeYqEZY5lCzLMFUuYAHaWd9ytAD1MKn8wCKGT/Exe12sEC/hgKXfotPtEfTpQINEPhZTL0uJcJLLDgOY6ag3N+wlUjEZe/kzhiqXMD0oDILn2Ua8xxdpq5zAUjGW9kCKnWEA9+Udj6RZ2M2fEU0lRzk0IKi2XBxcdMa8gOmDJQ876H0xBWPwPA0QPURn9VkJ+ZSGbugtBtEImiBmYC0OiRuOkVexgYbopJXv8ceJfmIhcvneVJFSjF+xFqOorftH1XI8UT6Rikxk0WocxCkUoMgFRn3hO4tj+FwspBH0OBIr5V8CSRF6QxHjT9Ifogf0+Eh/ZD2P6+f/8/kPaURwNOuwtMAAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHBwcGxsbFhYWFRUVGxsbGhoaFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGBgYGxsbGhoaGRkZGRkZHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoahQXVxQAAAKZ0Uk5TAAECAwQFBgcICQoLDA0ODxITFxgcHSEiIyUmJygqKywtLi8xMjQ1ODo8PUBDREVHSUpLTFBTVFVYXF1fYGFjZWZnaWxub3J1d3h9foCBiYqNjpGSlJeYmZqbnZ6foKKjpKWmqKqrrK2vsLG0tba3vL2+wMHDw8XGx8jMztLT1NXV1tfY2drc3t/h4uPk5eXm5ufo6err7fDx8fLz9PX29/j5+vz9/ud+XxgAAAIaSURBVHic7ZTpVxJRGIdHtJS0yELMNNtMaLPFLNuppKxIC8v2fU/KysJyKtvBpI3KqDAL5Pk7O3eGphEBGb54Ooffl+e+895nzl3mjCSly4yj3ba0zQxZMwiRFpNRbeYZIAq+amNeUwgCDTU+GGktzF6bdQXih8skyeQahr6F2Xobh+DVMnVceRui7qnZaNYuiLWb/5YFzjA8rp/Y2z5untULsbaSzJpNrOxA8so2DcHLpRk0U0sk9Vkop9VRms6r9sGvvUUpe+vF/axM2SpsHQFfjVYv7+zpPd+sfTnlZ4HjlvHegj4YdmnzLKdRcm+ONmNtEIKNSdoUdxTuVGr1tBfwuetSAH7M1R5ajgHnyvXekkcQdhb8e9AB7cXiciL06r7zFX74tEErS9pi4LXqXjQvTqc62gqbdY1Szyhcna0WxQ/EBc+v1eUQo/bE0E+3vlO7IwyhCkW0Yzgu9SCeGPW+VqlrNdU5HF844RCJclCgEfYLNsEewW2wRXA3rHPYzbpdv8Ot8De7BKZDs6ANGgTrYbHgaqgYe5F5MS/mxf9dXOXxRHjoEYlxV+AI3BI8BdcEL8IFwetw0uPUxH3G/lVenRh7/fF5v4j//TOFgbcK+geCKgffqAwOfB8jhqSsc2PyRFmWPxD/mXVifJNl2SxJRv//asqE2HPzqaHcv5wQnRNtKzmLJk3cWWQwdQkx51PNUazKKSbpDyfEdItE0oMXAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-l {
|
||||
background: url(@/assets/v3/bg2.ED2KfGoJ.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABACAMAAABvC9RJAAAAAXNSR0IArs4c6QAAAoVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYHh4eFxcXHR0dHBwcHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoawUAFEAAAANZ0Uk5TAAECAwQFBgcICQoLDA0ODxARExQVFhcYGRobHB0eHyAiIiMkJSYnKCorLC0uLzIzNDY3ODo7PD0/QEFCQ0RGR0hJSktMTk9RU1VWV1lbXF1fYGJjZWdpamtsbG1vcHFzdHV2d3h5ent8fX5/gIGCg4aHiImKi4yNjo+QkZKTlJWWl5iam5yen6Gio6WnqKmqrK2usLKztLW2t7m7vL2/wMHCw8TFyMnKzM3Oz9HT1NXX2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fL09fb3+Pn6+/z9/kKeQQUAAAOySURBVHjarZb5X1RVGIe/ICiorBoGGSSlIUtkYxZFSWakhUtESFIhZmbZHgUFhYGtKKHYRlKZlCmoLGVZsgYoiwhc7vP39MPMwMw4M1w+n56f5v2e89x75j0z9x7JBwk3aE4s3NpoTtRnB1sW7v54GAD6ylKtzF++twOg5bn9FwBOF0b7nx+S0zAF9FfcISkg47MRYLzu4Xk+BVvVFcD4etN8Z7I49wRAd0mSt/mxHw0AnC9e5p7f+vrfAH1PR7rnCzZ/awCXD6zxcrHAB2rGgbHD6wOnszsrBwGTiRBfS37K3sFLb6yUpEVF5wDaXniZMZ/fchukvdkJ0JQXqHRgqHqt9Ix/JVTzsmqvAYuVDsWhkgVFUtQHDiVdVhXl/H9KRP5rBTFzUh65AkxsmYOSdhWjfRIzw4pi1NTU1NR0MJCihIs0WFGcVEp6ka7ZlU0/2hnmkKRSK4qTVzGKEnOvUWVdib4IQE+CdUWxjSacTJUUv79y981WFGn5ulWSVDgJjOdYUuxkmYycGsNcY135ij9iFN9NQ0rKXotKHy9JKnVslj8l0eZ4YPxOlaTaWZW0n8H4ZqkklTH5fPorUG2z2Wy2QF/Kil4A2sMl3WjfoHOuTyMvyidcy719n8keSYr7zmCqNk7+lQHeklTPT/ZyadIS95Z4UQYpknSQM96b6E05QUesUi9TYV3ZAOMdBqPJ/pRkWOuS5RnA0EYfhp6A+VoG2a7hLfBFpC9DuxmSgqbY6RrOh+0+DVXQIamZWutKM4cllYPhil1ZYXgFCiRl4cl2SYn4IFFSYD9n891YZVfK8z3Z0ctvkqR9mHddt+hEyLwu3AqPSZIi/qXJkhL6Dy2O12Uh5HmMRr0H74d5hO/Cg46Pwc2MrHQbTBoAOOv2u1emyZGZGWOcWegyGPQXk+1/wveuRmwn3S5/hQKon3mp6yHIlnbD6pls0Wmm1rteohrKZ6piBiVFw4aZGx+DXW7rDDoO70xXT2LES5mwbnq8Dg56dCP8VyhxFktGacvd2cMl52KD66AuyLPpEafgU2e6wwQYd+5M+HE46uUIGNkEDc6tePQXzB/ucRRxLfCl10NjyFFone7RwukOZvRAWYC8ElgOI1s8woA9Bsaz8sm2UTiwwDWJOga998sPyW1w3uUct7ETTsbJL2G1YLztuFHU52CWBmk2cvqh9V5J2twFF+6bVZAUcwQ4dNPqRjA/XGTFkPR4F1w1oDXDoiAprGQChndZP/NL0m21lTFzEvzyH16BnDy4upTwAAAAAElFTkSuQmCC);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2CAMAAAChp3phAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAKysrJCQkHBwcGhoaFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGBgYHR0dHBwcGxsbGRkZGRkZFxcXHBwcHBwcGxsbGhoaGBgYFxcXHBwcGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHR0dGRkZHBwcHBwcGxsbGxsbGxsbGRkZGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGxsbGRkZGxsbGxsbGxsbGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGBgYGhoaGhoaGxsbGRkZGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaY4gg2QAAAKZ0Uk5TAAECAwQGBwkKDA0ODxAREhMVGhscHh8hJCUmKCssLTAxMzQ1Njg6PT4/QEFCQ0ZMUVRWV1hZWltdXl9hZGVoaWprbG9wcnR3eHp6e3x9gIKDhIWGiImMj5CRkpOUlZaXl5ucn6KjqKmqq6yvsLS2uLm6u7y9v8DCw8XHyMnMzc/Q0tLT1NXW19jb3N3e3+Dh4uPk5ufo6+zt7vP19vj5+fr6+/z9/hUAYDEAAAJLSURBVHja7ZT5U9NAGIa3UhU1guJ9At7We0VRxKNFKd7iiUXRKpcKKFYBUUSJWm9AraC21pLk/TudbLYtaZPSrY4zjj6/9Psm3zOz+35JCbGncNkckhOregG8KcvB9CpgNOeJmi4NH6tcex4DXkHT8QpvCwkhznZE5oqpxQBlxTxgn93Q4m4rngM83VEMW05sJaQUNkw31JDNYzdTO5rS6EmogwimP27SuFqafo0dCfUZLlpcM/b71WZV1QDVANBU9V22amtaJkPZq8HDfr97P6Pef7pDRL1r6mv/AfWy0peVOn+nx+OhRePVq+g3qSv3ejzuzVNT1eoYW2C40lbNbzd2/Hq5WXVp0KLRKDBWbKfWAUo0GgNeOLm6AlgvSX58XkAIWRrGWUm6xdVtF6rZ7xl8kCTpE9qmEeI4CKyVpB+6upG/awE2JRuNOWF+UlTozezk9xpXjemnmdTdejMrqa4Gaih9YFzLMYTblPamqJcwQun27zimNyXAKUqVZExVwB2fz9cNlOsxfX0ynhCL6T6+Nfp8DYOIFJgSntLPz9E1ye6jKwnz5lDKXvNPdMmyfM87mRBS2ZBKrX7URdf6ZHng5pYJ/mAm4r/6R9QNwGhIGNPrL4qbkDXAlePCKH/rctbNEGaMq7km/AtqQZkV54EjrNgVQZvlxEK7GK5jmFc3EBQKMG8E9bwsB5aIqC5gEy9nxlAjotbhizNed+KhiPoejYn6ALSibJyKgM4jYCAQpwd4yYpzmdWTGTbZmVmlLQatLUni9dGU2Z8vQHe3JjoBkgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGRkZGRkZICAgGBgYFxcXFxcXHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHBwcGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoa7LJWmwAAAMR0Uk5TAAECAwQFBgcICQoLDA0OEhMUFRYXGBkaGxweHyAgISIlJigqKywtLjAxMjM0NTc4OTo8Pj9AQ0RKS01PUVNUVVdYWVpbXF1fYGFiY2RlZmhqa2xvcHFydHV2d3h6e3x+goOEhYaGh4iJiouMjo+TlZaZm5udo6SlpqeprKyur7Gys7e4ubu8vr/BwsLDxMbHyMvMzc/P0NHT1NXW2Nnc3N3e3+Hh4uPk5ebo6err7O3u7/Dw8fLz9PX29/f4+fr6+/z9/h/1AioAAAL8SURBVHja7Zb3UxNREMcXAqggIE0pig0VPRuggAURRUBARUVFBaUJKCLFw4Y99oqosYEUEQtEUBCICSYk3z/MyeUSknjx7jKOozN+f3l7b9/nbm/fvp1HJKhpDMMwUZzpF8swzHySpWyY1bacJtcbzdZzd3D0BR23GDJxLvgcIHMAV1fID96i9zgGpJK76sF5IMVdet6Y+bdPeshAvOPiAnlzkdaStlqrb0lcpBgeCqyzWIqnGNo5c/VdIJH3daFCOr4Q2ExEvl1g3cEzMT7FPNZB5Q6ej1FuLEP3H8N99NhmxU1fvhm+D49acc9h5IvuXAteBnPGEVjVb/EUAfGi+Fpg6JZSqXykA3RqGPoAfLimVCpbgRsSKuiAnv/oeOWkIqhpVYc1iofhgoBnnoNKLrWoVBro483xqon82oDXqic32V0OyxbbChVCOkg8TtMHhPwFdrjR4CgTBhQ2nPIAJ7/BEc9y+p9elNMEHgJsclow+Cvc24RsLo26d9zzV+yTjockbnD6nBqNyQsUkvA5d7jMbLVfPGKeGdwuAZ/Bp3mvPT5umSsUx89Bmzc7/A0a7OgYICs8vhljUaL4J5QRUS36gyfwE9D5E4UZkSGGBwHriWipCU22pQkmNJrHbpSK4SH8eT8DVHhbpla+xegs5/Mugge8AlRJXkRR1UaYUkkmTmEPAGg6zOdVk0ZS8Ylm5bO7l9stY9NckowHsGys1VYk5FceSg+yIVVsirSaF9dfjEdXOStDDp7wU2u6IAdf1uGsun8ndf9x6Xh9ukxpHHA39Ltw8nVHfCNlDhcLa4+lz3isceEvzlUQBWpdhqc7uz9tx9F21/EXEoUBIz2CGrfdrATdH8F1zntoEd7aqPLHn6Fvv5jsKejeAjBElAPEuKwOf4VL13W84FqzBjUkX9FG/sbBQhspHz8NTShnRGhwP0AunWtCCW8WAc+SZMGhNUDnVOtTKYCOy6xUnWrWAq0RE2/L6JRZ8PqGYPtovDZWX2mWqttsgfWS8wOVDhPNZXeUuAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-l {
|
||||
background: url(@/assets/v3/bg3.DKgYKiLO.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA4CAMAAACbrRsRAAAAAXNSR0IArs4c6QAAAmRQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVJycnFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcGhoaGhoaGRkZGBgYGBgYHR0dFxcXHBwcHBwcGxsbGhoaGhoaGRkZHBwcGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZHBwcGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaM9yYTAAAAMt0Uk5TAAECAwQFBgcICQoMDQ0ODxARFRYXGBkaGxwdHh8gISIjJScoKSorLCwtLi8xMjM3Ojs9Pj9AQkNERUdISktMTU5PUFJUVVhZXF1eX2BhY2VmZ2lqa2xubm9xcnR1d3h6e3x9fn+Bg4WGh4iJiouMjY2Oj5CRkpOUlZeYmZqam5ydn6Olpqmqq62ys7S4ubq7vr6/wcLDx8fIycrLy8zN0dLT1NXW19jZ2tvc3d7f3+Dh4+Tl5ujp6uvr7e7v8PHy9fb39/j5+vv8/f7mLvP7AAADPklEQVR42r3W+V8McRgH8E8bSki6LJahcrOOxaZylVhX7jORW+5jkVtCypkz951io4RUrpBVn3/K6/vdZq9se3jx+WWe3X29Z78z8zwzgzC9DzGYTJ3RKnr6ltLIgCkfRf2BmrwueImwT6JbUz28JYXcSj6LCYz2yCJLuwdGkUmWaQOjWE6+6BkYxVLyZa/AKBaRFTq/qXGQyMZmvtP6Sx1Z9L9oxEg108lkv6gj8eTo1jRu24WC5aGimmrOAjDYbO4kV5t388xcTVs0rUEcyDMxW7l8AGAKKYZlmzzAS+0808h6fjpbTJ4CcIAPAUwmo4GxZHleCbnSM00nBwFb+DUY2K/SGGA3q8KA87zumWazBkASqRP0EYBJkhaxCMA6vvNM1/A9gPFkH2CfSmMFLbTv2CMVPyaSiqCPAUxsoUWS1npbsFFSs0q7A4WSrm6LLuNXjXpBzHwCYIKk+bwGcfosnuloclNUXAmrAexVqVbMd1OGdnwtCzzToGJbc8+X9Kmt57VAeKX8+ufQNrop+hzJxlWi3KNSMd8Jd0hWJ7fZw1BSjRGy6KaLBdBR1ytYfuybMqSlDZF8i7xrCGRyNsjFN6/wnxqaWbZjTyWtw/ym+awMByJrmOtOgxSnp5k8XLeUcpfYnGCJKw3Z8oUsT5G1JrOOfDNDlAcbrtppDbPFZjvLXOlJ23VNEnWOrc6Qf3HLGx1OFiSmv5Z9FPuLxUmTHrJeAxxXaYSi1HGnoijKUb5SlHAHXcjvIYCJzV3lkGuBMWR/QW/b6BrXJ/ViB13rNK+zyfZAgmycY96pbdQTVdpB9pxB0Dsq/ThvQbrRaDROW5BhdabZTqM+S9I4SY84aI3jMjW60lr7qM8kQyQdI+g9Z6rbvDnKnZrYFCsG3hoqb6B6II3sDRx2paPIAe5U18jS9XsbeAVAl3pWbdxaz3IIet8bxQp54j7Hi3pak6h/iOk65APFhPNvn+e1vCuMLKyynO4v71kXc52pvqKiX2vqJZ7P8L+lX+bY80vQKWSqj9S9EU2k6V9TTXuRgeQ4WWiAEeQI/94lDIG/hjjTaovlm9X6weJLqlypn7FTbY7I5Rs38nN8TG/8dX4D3Yb6f19FH58AAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAMAAABxwuT6AAAAAXNSR0IArs4c6QAAAtxQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaAklNYAAAAPN0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8hIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCREVGR0hJSktMTU5PUFFSU1RVVldYWltdXl9gYWJjZGVoaWprbG1ub3BxcnN0dXZ3eXp7fH1+f4CBgoOEhYaHiImLjI6Pj5CRkpOUlZaYmZqbnJ2en6Gio6SlpqeoqaqrrK2ur7Cxs7S1tre4ubq7vL2+wMHCw8TFxsfHyMnKysvMzc7Q0dLT1NXW19na29zd3t/g4eLi4+Tl5ufo6err7O3v8PHy8/T19vf4+fr7/P3+kWOxigAABYhJREFUeAGlwYtf1fUBx+HP4QAKqMecXGTesaHmLR2zxgrUHLZNl6tBbmOpqRW2spWmxiJza5QjlZxpXrAyZlhu4hR0W5tMWYkrFNwmigKFcj0czvsf2Ov7+3HwIAeh7XnUM8fQ0ZMnjnTpS7t96e7TjVjqTmxOjVafjVrzKV15i5a41BfDtngAzrzx9MI5M7/57bS1ey4DfL6qv3ozMLMR2oueitMNjpkbzgL//kmQbumhq+DeFKNuph4E/jFJPXNkgjcvTgEln4Tr89WTiP1QnqCeOBY14H1WgcWWQuEQ3cKUC7A7WAGElUBOsDpNWZ61/dCBLWvTh6tTVDHkKIC9sEo+M7Ir6VSyZrg6hObDo+pmNbyhDuPeBnBXnnj3QMklL9D88mDZIkppS9ZNvuulKFSW4I1tULd9Qbgs0YsPtELdItlGXaV2pLroV0FlpCy3HYaG9QPkZ9ROL2wMkiWxld3q4kmYI8vYzyA/WjeZdhYK+suShXe6/Ljq+L0srrPwokPduD6AXbK4ajksPxvwTpMR9AEsUSDOHfBzWTJgrjq5mnhLlrWwUT4RU+fNnuBUh9DjeJNlhJ7nuDotgUkyYhv5MEi2eQUtALXbJ8gWfZG/O2Q8DuPkc5RzsuTiHiPLsMP4eDaFyrII0mSMhPXqMMjDr2SM9fCaLHdchHPPzRw+Zk52PRwbJCPoNOccMk7xV3X4Dtwj4xnckTKiLtD+bIgsQ/Pg/SAZCyBBxlo8LtleotYp4wSHZHkX74Pq9Bo8JqPfNbJkTIW5suVzWEaMl2UyZkKWbnAWcXWAjH2ckeFs5QnZzpIjYx6MlpHL1Qj5SYA0GT+FcBllvC7bF6ySsZj2YBmXyVEXZeyRMQviZBwkXzYPS2U8T7UMF6TKuPNkwW0yNnNKRjx8S0YehbKEwSIZr3Naxu1wr4z3ktY9LmMdl2QMhgdlbOMvsjjhERkvUy4jFu6Xsbqg9B4Zv+RTGSMgRcZOjsnWRIaMDJpkONt4SpakibK8zxEZCTBFRj4FslXxCxkPwWAZRyiWv4HNPC9jAUTKOM4u2Y7ytowZcJ+M5ZAkP+tgoowsrjlk1LBetq18IiOomhwZYf+hfIg6faOFd2QpI0/GUEiTbRner8rI5aJDxkIoiVWHxBo+HyNjHKTJeBjGyxYPy2TcDwtleQFqnhgkSSNeddN2nyybcA+WsY/L8qnikAxnGf8MlmWlB1qL9+4vBWqTZYlzs0VGv2vsks8ruF0yvgfLZZteiM2TGyvbOzQOk5EC8+UzDZbKUkTz19Uh/pm3jny4bXG0OqyATFn2UhOiTse5FC4j/guqYhXQ7DZOhcu408uLuiERVsuS0k7ZWAWQUk/1CFkOU+uSn3zqI2VZCXWz1M3P2mm6S5a5kCF/4z1sky29Fc/mGHUx7Q9QNUOWsI85H6outsCjst19BRqy7pCPM2mXFz4aJlsepKqriNO0JcsW9Rs3UJ694oG77k198s1aoG5lqGxrIFc3G3mFurHqELenBT91L7nU4ftejoWom8RWKifLZ8APdla0Alw/80qSUz4/bKIiUgGke7m+QP6+MulrA+XHkQn1kxXQAw14n1PPIvZD+Xj1YEol/DFBgTlSz0HhEPUoqgjYF6cAZpUAOcG6hZAVV8C9Y364uoh6pBAoTVEvBr7QADTlp8eHyDJg+tPF7cCFHwepdzF/wtJWUVr8508uYcvpr74Y3czftpZzQ/vJX9fwcbD64nc0j5FiZy/fkPPmb1/NTL/bJT0MGeqDebBe3RylPka96vcZFWHqZlIbO9Sr1TBfAWRDonoxqpGDCmRQNaVO3dp+WuIU0I/gMd1keLa/9+Cj7B5U0bI1288GaTr/q2vShLIuLv6rrEfV58v8ndT/5b+wy5acLtE3wwAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA8CAMAAAAAPFkHAAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGhoaGhoaGBgYGBgYHBwcGxsbGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGhoaGhoaFxcXGhoaGhoaGRkZGRkZHBwcGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa4vkYlwAAAMR0Uk5TAAECBAUGBwgJCgsNDg8QERITFBUWFxgbHB0eHyAhIiMkJScoKisuLzAxMjM0NDU3ODk6Ozw9Pj9AQkNFRkhJSk1OTk9QUVJTU1VVVldZW1xeX2BhYmNkZ2hpbG1vcHFydXl6e3t+f4CBhoePkJGSlZaWmZucnZ6goqOkpaipqqutrq+wsbK1t7i7vL+/wMHCxMXGycrLzM7P0dPW19na29zd3t/g4eLj5Ofo6uvs7e7u7/Dx8vLz9PX29/j5+fr7+/z9/hwDx/gAAAMQSURBVHja1db5X4xBAMfx2drY3EcRKmfESrnlyH0kFLlyE7mv3Lco5IxCtI4kZMtNrsq2nz/Ma55ntYfnyuvl9eL7y8wz+7x3duaZnWdEpDM40cJynASnLvWPKU2rW0EzA37vLDccjLBGh4Ez8LpPOdy0NuBQKiJPw3OnFToTZoY05Xrx3DlvkmNCZEJm6NdN/45pXmlTsbm+9IJhHuhSEW4yzI2SLtKkZvlvadH2VucKHxX6R/mq0NqqVuc1X/65Ge6cMClrwbh+jlZSW/KOCt90eK6vi7dObRmPgmezeJhFOqYM+HAqa3Rc2w4DU9de9YD3RC8rdK0H7s8O2J66rK8D91hTGnEIarLDgvvouKORhuUm1HYGbvf8fVom1MEKY7oVTms+jngXjeON6Dwv1+zaiyDWTV2sPm33kiddhU7GNlKgT/NglNBNHozUo1GfOKsvRbsaSvToBpoGKBX70Mnd/aTv1L5qZSUM0aElFCvl8vdAYQ+1McUFuFJkNfILW7RpVDOrZLlJXbhP2yvSo/4JFFvIXW26CORK7d9A6cjYTc3skY0u3Okx6W5c8mIpRGnSXGplkcM3+Y48QKUcJ6QLIdJBjjcRRmjSvdyTxS4q1B68diHSIEYIEQNpQojolrdiCC3gYkCvB3ks1x9k+HsNayJHkxZzThb9GigdFZfrZbdvrBm9MnxjFfWs0+m1zNespEqZ4eQm9WySLC86qr/hF/W/JPOpUSvL3gHnfeeJZLlJuRQpEloWqkJnwAz1cg3eNmotPHFSN/9qik/7ta+lQe8A6mw5hoyGKcIwO3kbrkltzzhqKG0vOCyC6ZIUNcf57DCi82GN79b9PhqQHCNaGXKCCaZve+jLaaGHH8dgf+b+4JSudFRRPdx/76CQj7dDto4MOwmTDUbjeEhzlvbsHoYjhvMfV03zYo32hBtQZBfGtgbyZCW/WnnI5dXKzpEPl9sIk8yBiUL5M1ySRS25Qt0fOplJkQKDA6hbpdlg/8t0YVJSUtIVbsniDftksc0i1c5fpZFDdWIzpdbzE3Z4x2LkwqSqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA+CAMAAAChgZ0aAAAAAXNSR0IArs4c6QAAAspQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGBgYGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaty+CnQAAAO10Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGRobHB0eHyAhIiMkJSYnKCkqKy0uLzAxMjM0NTY3OTs8PT4/QEFDREZHSElKS0xOUFFSU1RVVldYWVpbXF1eX2FiY2RlZmdoaWprbG1ub3BxcnN0dXh5e3x9fn+AgYKEhYaHiImKi4yNjo+QkZKTlJWXmJmam5ydnZ6foKGio6SmqKmqq6ytr7CxsrO0t7i7vL2+v8DBwsPExcbHyMrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4ePk5ebn6Onp6urr6+zt7u/w8fLz9PX29/j5+vr7/P3+lBpGjgAABH1JREFUGBmtwYl/zgUAx/Hv5jHP2OaYNYtoLETMNdcsQqzl6iBnUWIlcpvI0ZAZJaQtR6FSbQyJkjRjWHOFlmvGhrU9z+d/6Pk91zbz8uzZer9VLebWEX6qqUYbCuH26kDVSPcL2J3tqBoIPEvpiucHr7GQZVb1LcfaTzZxME/eatwivFXrtu3ad4j8h82y20mWvLWdMhNkN41iH3lpC2WmyW4+d+StVI7ERPfq0b1bl2wO+MrG9DsZ8lYK6XKYAMtMUp1kGCpvbWavnL6Dk8nrcmCbvLaJfXIK3ordxiB5bQMH5Bb79ckT2waqGtZzUP+DdRzS/yCZX1RVjfuPm/vB1BGRqiyJI6qSwMlppTicX9NND1jNUVWBaeIVbCwXcwoxbG+jClZyTJ41+xXYOzXCJCloUPJVKJ6o8hLJlEfd/oKMKLkFzCmAZJPKLCdLnjxzh9K3VEHz32CtyizlpDwIzuFOPz2g7k6Il9uHnJYHu7DGqZK6h7F0kMsicvRo0ZCghwi7wbXdP6TtyThw8OfDl/j3j6yTp878efbchUt5127kF9wpul+SO8VHLj9x3qyHicezb0PkEAnj5dCwX2xzlfG7zLnUlC8+3/jZJ2uTVq9a8dGyJYsXLpg/d/bMGdPfezd+yuQ398HFGNnNpshfhoB12KS3lNtCbpv1KLUSLFjm1ZLNIXbJUOcodgXhcukCA/RofS9Bepiku8TLsAASnwyZVEiG3IqYKg9Cd8PpYNWHYTKcJ0U2E6GFXLJZKk9837fwjlpDb9mEQKxsGsFQuaSTIo/a5DNfERAjmyArL8umKfSXy0HWy61tVF05Ne7zlFxibnK/o/xhpAzH2V9L0hIIlUsuCXJquQ+ujpLBZ9Zd+KaZ7EYXc2+EpOvMkmEs7B8+aBNskIv5PpPl0Pc6hjV+UtBODPmvSvJJgGu9ZPM9+2WXgl1mA7kMhC6ym1pKcXyf43CwacRx+LHT7GLYGmxOhexWMkzC2kR2Y05ZubjELLdPudyufYfIzl1T4UpPKWAr3C6CVSapUyZcPAR7GskuzMoCOQWFqZzQe7hZmskwrQTujZXBvNwKbPaT05cUPa6HWUWZYjm0mTMzXE4xublvyy38Pjt8VFl0CTt79ege1bVzxwWUyqNFsEiVPJFHXhM5vIFVHpl2w1wfVfT0GUqi5TQe5FmDLPiqocqLu4X1dbmMBV951jgNbs6oJ5eoNCgaJrfRYFIVmBItULhjQkzbpl1fWHwKyO6qMq+Bn6qk/S7KuTq5tsoZCf6qog5zDlsx3EoZUk8VvAL1VHUBrXoOiAxRJS9BoGpuONRXzQ2BhnILGTzqWbOqIQ6C5VR3tQXIHyfvxUKIHB7LxmGLvDYYQuWwFZLaB/XOgAny1iAIk10MzJGN714K/OWlgZC0dHniyo+TjpJfW4Ye0E9e6k+Z/bKrB2PkpV65OaezszKPHT3yN+dk1wZeVLWNhIEyJGJtomrzP0HeAMl3uoVk1UC3EshJvw65gaqJ7icw7ApVzZhHr9+24jlV8B9T0a94882ZyAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-l {
|
||||
background: url(@/assets/v3/bg4.C7YndXK7.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA4CAMAAACBkfufAAAAAXNSR0IArs4c6QAAAjpQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGRkZFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa67X1NQAAAL10Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcZGhscHyEiIyUmJygqLS4vMDEyMzQ1Nzg5Ojs8Pj9AQkNFRkdJSktMTU5PUFFSU1RVVldYXF1eX2JmZ2hrbG1ub3JzdXZ3eHp7fX5/gIKDhIaHiImKj5CRkpWWl5iam5yen6CipKWmqausra+ys7W5u72/wsPExcfJyszNzs/R1NfZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dy8/T19vf4+fr7/P3+eSKkTgAAAttJREFUeNrtlvlfTGEUxs9UktJiC61SokmkhEoIKVsSGWtCkZKKbJOiGU1IWZPQokWhzTRpaJ7/zae578x9Z+beWfj4zfPTuc8935n33nPueV/yV4qKIaZ4zlQwL5LzgkgJUa0WbJwzfZn3kPO2S2MT7mAHhX9u5rFqwbvIY+2Cl8kwpeCr+UWeEYJ8HtMJQdh/TA5rVpvVzRdAChsS8ppky92kyxWCbTqdj2S5Y1pF1RAvL2+byzIucQNJyjvt2ouBn7+GXtZm+JK7mlc0Iq5nvHiBe1TaRwDf7pcWFly69xnA4C53qEIj8GQLey5FshYwFbumzgNfdvBGah9Q7Yraa0JHuK217Blw1DkVoUfPEntzYQeMCU6xBhjiHN3wUTy2s0JPWZVDCSZckfo1FZBBmWJmBN9cOqrFaLAU5tuDJlLbzZKpSUEaxQDqpBdfBr1fHUvT2344ROvmDEklzq2SKcwe2wcsksYURhyTxU5gmkVRD5gsL74Pl2WxUgywaL3l4S0N8wo3ZTEVDCxa1cKUxIxesTIOWC4QItMHMzguiyUC6dJUPJBljw33C6r3GkaNNHYBBv8qljZkN4J0dAsjAVKUTxe0tl2yosyqfNoIlEhhBUA25YiZ0Xb3NZiMdqSWD6ONnGn1D3Q6NLPfW8wmO8XoMNAeamsFvwHOkgtVAJ9SeGNtJ4B6L1fcuVlAY50BsWoT8B644QqjnXPDsbfm5IE8VdU7AGOH5rcAlS65gJJJsUTTlSFEAW0ylbGV/+67XXrA8KFhf5DwWl4DKj4j6pGoChs2kG/rpZ0wHSGiInOiUnp/u9PI5v7mxka2v63sxmwe0W1xBD3VmtXvfDeNHIQxi4q02haP9m6K/YrpNI+3fKKECXxP8hyjlCmMrfEQK39+ndJnUP4n55I9V//6OJMdZZaGL0CF4J3msVbB2yR7nPlnh97AraKsAzOVMy0n8zjOW+z6a5DUb7XEj2EfmeDdAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAMAAACycDqVAAAAAXNSR0IArs4c6QAAAg1QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUEhISICAgHh4eHBwcGxsbGhoaGBgYFxcXFRUVHR0dHBwcGxsbGhoaGRkZGBgYFxcXHR0dHBwcHBwcGxsbGRkZGBgYHBwcGRkZGBgYHBwcGxsbGhoaGRkZGBgYHBwcGxsbGRkZGRkZGRkZHBwcGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGRkZGxsbGhoaGhoaGRkZGxsbGxsbGRkZGxsbGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaino4mQAAAK50Uk5TAAECAwQFBgcICQoMDQ4QERITFBUWGBobHB0fICEjJCUmKSstMzU3OTs8P0BCRkdISk5PUlVWV1laW1xfYGJmbG5vcXV2eHt8fH2AgYKEhIaIiYyNjpCSk5SWl5mZmpucnp+goaKkp6iqq66vs7S1tra3uLq7vL2+v8HDxcbJzM3Oz9DR0tTV19jZ29zd3uDi4+Xm5ufp6uvr7O7v8fLz8/T09fb3+Pn5+vv7/P3+pK9UKQAAAoNJREFUeNrt1utXTFEYx/HfyIyaSqSbRlNpIsklhCiUa8n9FlEk1xAq1yKXhESpUJIQRTPfv9GLuVTUzJlWyyvPq+esZ33OPnufvZ+1ZXUEFybJQXBhmSrZYPirir3EIaOR54+E2mcGSdZ+4e3ioMhGJ9C/ZHKyK9cX67xiiJ8eEzlazT05wSKPeET7Y64OuE1qgP8y4hH2Rioy3WZCkmH1RZhkG6bdrkYqlDlAR6hMo1Xrpkmmn/vaLjVSIWV2LTa4YmHyEIUF8yvdRNNFLDabxTAJt9m8aezqgw03/JJXdbtXzPY+hOScawMYCPFDkgFczaeyJEkVAHRXb7P6IXHFtX0AFEiKdUFbQVLgucxI2/MBeiQlAvQXhgQk4YdGgAFJpl7uD0NTegCS/QY+PuWeJNVwJ/UuOI9F+iHzq4Hzse85IEk7+TrTlN8DnWsmIyGF/dC6TCmwSpKywCFFVwI1CyYk6U0wtDdUyoMYSQofYbMkLW2Bb9vNkqRFRz7RUZIiSYosdcLdVEkqo9X9kkeckSRZigahOUOaU+05b0ctUk4n9OSbJEkPqHKTjIUmzxfY68BVnvQC+houPxyEuuQaoDLaUzenp0mSOT7ePDrR9d3wA8ojJCXchF/QkjlatsbH66/NH1XmgrPu3PQEvhdZAp+X6/R7d5vNxX4jR6yFS778OReNkHeU+PJqbhkb5YIvf2ZslCo6vI0l0clWI2Q5HPGsWD3DiYY6TC2cCJcUdw0OGWtK815Cb/3pe1/httlgH5t7xb3HnMdnGW99GaWf6dqXOn3d8j/5N2TLynERM4YkjS8dnuQ+lj2G7DB2hQtIzAl/RqgkxSRESVLEX1VNJX4DmRADv7Vqo6QAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAZVQTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHBwcGxsbGhoaFxcXHBwcGxsbGhoaGRkZGBgYGxsbHBwcGRkZGRkZGxsbGBgYHBwcGhoaGRkZGxsbGRkZGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoa3tD9qQAAAIZ0Uk5TAAECAwUGBwgJDQ4PEBEVFhcYGxwdISUmJykqLzc8PkJJSlBRVltdXl5gYWNlZmprbG5xcnZ3eHx9f4SFh4iJkJGUlZaXmJqbnJ6goKKjpKanqKmtrbGztbm8vb/Aw8TFxsrLzc7P0tbX2Nna3N3f4eLj5efp6uvu7/Hz9PX3+Pn6+/z8/f7+aEnfAAAB/ElEQVR42s2WaVfTQBRAp1AoYhVRRHEJirumtbhUcVesuNPihrhjRVRwX1CpYi33d3sySSbhMJ5mAni8X5I3yc3kvZeZE4GiIoxYgHgt41AyFzPy2BtfrI0YUAiJRpRDYnUoMhNzRIMcz0ux1Otww1yM0UdHrCimzMRYLKrYuF5La12xXd/wPUsnJi3LusszS1Hgm2VZqyIVp8i9IDjMVOSqxhYHuR8Eeb7UEdPX/UROMx4Mn1FBx0Gt2DTKc8/cBxv84ebXDHneJMe0Mx7CN5dPM77CHUwUYavvkdXnGJgH4GmnfP0S3J7nzSuOY8pvq6EfvmeXJXvewSM5d3vYk+LPML+hz72Uq0B1BjiXkvFVeDOq+DRnIbtc8B66+4cTzV5udMOyZrMq5nyOfIZud42crMHX97PwYLUcOAGvLg4EHFWblRBizQTk3Nbcgo89CbF2BN7KKqWG4UqDbkMOe+I4DK+U3chDOak1ldj0Unltv3jc4l3vg53CNwe0M+6oep7YT61D3VDmjvDMmW1aUXT6J2cZC244xaR3lrL0ORosq/9DbLFt+wkvbMVNpm3bXldX/Msut3fpRJHQEq04Rj8PUWjdrthkJHYFOQ/+M3FL2uGSFLPNUdkIm+UTClI0YhHEXQbkw6IJXQsQxx46fDAXgz6akM4oukVc/gDJXaMPEeEHHQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAArVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGhoaGRkZGRkZGRkZGxsbGxsbHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaefXWRQAAAOZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ2Nzg5Ojs8PUBBQkRFR0hJSktMTU9QUVJTVFZXXF1fYGFiY2RlZmdpamttbnB0dXZ3eHl6e3x9foCBgoSFhoeIiYqKi4yNjo+QkZGSk5SVl5iZmpubnJ2en6GhoqOlpqeoqqusra6vsLKztLW2t7i5uru8vb6+v8DExcfIycrMzc3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6urr7O3u7/Dx8vP09fb3+Pn6+/z9/v6gHUxNAAAEWElEQVR42pXW6UNUZRTH8d8MKjFkijoTblGampiaqUkupS1ILpVbaWqZK6YilJrZohmmWKhJuZRFmeZuhSWYW9mYikCJbLLEcqfv39GLO+PMMKvn1TnnPp97n3ufu0mhIr5Pr1jdaYzc3wT1Xzx8R8jyJmY0z74TtQluLh2buqoBFkWvsuFIoiT1PgOLo1UfwSGbmTuidpaNXiXZi2BJNCwdDtu8pb0IXoys+hsct/k27L9TY4/ItlJ3v39nhBHFNMvIbt06zNFIygYzJUkxw194fqhVkrSG4kjMAeMlWeeWAhTPskh6napIzA7jpbgv3TcXn8dK86JiaYo7AIXP2B2pZ+Gb2GhYF5gQ9z3ktJOk2O2QH7uAykgsxiB9P2yxmKV1G+R/wh8RF+AM5ZBj9ZTWXKhjV0S2FNhq9dbWXGBSRNbhHxof8W1McPGzJSLT441UDPaWaU383TOykp72deObuJEcjTKde56p0alus9blHb1Y4sK46nRevlz2H0aJ88TuDbO7hTadF/9EyDi1pFNQFLewCjDOHchdnZWV+1Zm5sqVGRnvZq9YkZmTX2gAlfPvClSjr0HLvhmO4BNxTPvKgKsprfuzmmHfQz6NhGEJ7R/r4tNI/hoap/ur96FszO3KNiX3gouUZHDmzbj7dvvJcljlqxbCr909Rc+1lQCkJANwa3OSZ0vSGZjrVc8aHIt35zHz6oHCXSbbUwA0LPNci/YFtDzhUd1ruHKvO7/vR2jIGax+Jhuu/u/Vw1nPAbuWUOm5ap/y7yB32q8YDiZJXib12AM3RrgHDGtmvfsSGaxxNweV02J+mnyYNL2JuiHuIRtp6iVJ2kul+wZI+IvGCQpkGlXDdfftlVjLNkm6p5Gl7j3txZWqYEzjWjjpfnZXcytW0mToYzam+ixLK6ZX4WUzexSekrSDC2bdxklB21DMcoJy81Qs18iW9CfvmFumwViFYhps8JqZbeEXSQ2ehT/NSYVm+o5zZpJOmZQAE82VhCnh2EQYZi4HrrbqB3MkSS/hSgzH2tUzT5KUCV1lv0ZzmiRt55QC2MZF3iglT5LmwOl46cEyGsdKOsKOQOYflyRNdXHeIUnJN6kfKZ1nrQ8bByl9b7SKEqsmGzi7mkOGVFP3iipY4FVDq6nvpYBos7yF4tuPX8otKKzlYz81RlPT/WLzD0VXoKSvdy8DLgIc81cZwd57J3r4Hr3t9PwGfmutakp9w6B2R2rAR2Q51TH+qiDBb0ApWYFnq1EwNJzqC2lBWGwtH4ZRWkddxyBM66nvHFrFV7EpmNIDBm+HVFoBA4MybceoCaUGNrM7uFKXMkKpDkVUJIZgei6Ush0L+y+6+omgynEEMhUuMsDZWo0ugQ1hlSXLBTsH+LaS81wYb0T6Mxl5CTg4s7dZJc3+1gXXRyli2DKrAcqLDh06WwFQtaxjZCWp/dxTLs+DYhyf3yEqJEnqlJb+wc7P1i2Y1Dn49v8BUIfpizuTif0AAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAAuhQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoa8hNQ3AAAAPd0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaHB0eHyAiIyUmJygpKissLS4vMTIzNDU2Nzg5Ojs8PT4/QEFCREZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV9hYmNkZWdpamtsbW5yc3V2d3h5ent8fX5/gYSFhoeIiYqKi4yNjo+QkZGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i4ubq7vL2+v8DBwsPExcbHyMnKy8zMzc3Oz9DR0tPU1NXW19jZ2tvc3d7f4OLj5OXm5ufo6erq6+zt7u/w8fLz9PX29/j5+vv8/f3+/vwH9BgAAATrSURBVEjHpVZ7UFRVGP+duwvrZQVCZeUlqPlEfEw5+QgqozJTEx0bzJpMRxudTJ2mJk3/k0zTBh+oNb4gQHECDS0UsVFSBx9TNI6jaKnxRoFdwJUfEyu3Py4Ly+XCXqdvZ+fe33fu73uc75zzHRN6EuvgZ5qf4CnlxewGsu5AzFORxBdUpXHx07C2keVrXp2xrp5caZy1lTwRAgDPXiE/Mcr6hvzJT323FZGrjLG2kLl+bhRslLfak6XyFnhnjXIy3+qpCP6TNcFeadtZO6SrZpLTQJj3uE2ryuUprcqswX6huA4AMD03VLlb3AYAV98Y6o1mBeoASIu/DANQtukHBaiHv5Ym6VQAkNNSwgAg8rv9FkDp/o2kl5+cOR/FcyKj5t3AwlSLaql36U/OlnPIZF8AsOwmsywrWOWNZnJydTaZ3G5fSiGzdvK61wIUsYxM7ohd2kXW8qCRtcXtHhlLu0gmeKUF3KdjgqdiVjMLhfdFOcXBinGdcGYD/4kysgVed7BivBu81cDSaGP71IM3oweWJuqI+CHh4aH+YcJV6YKAPFB6UtNSVVn919nyHmn9F86b3GMI17Iz7Ho0ecn6IOBJSVlljQsR1S4oUBAg18AUGho5zgTYkw61dLP2UgnZlPm+Td+XbWGGk7zVLZhFjWTGqN4mKvow6Xivq24jee9lbzM8rYxc76n4mLw4yHtlBl8hl3bC6U6eshqpqP95Nr3iBoNqeHOgsZUQ/jcr3bO2g/axRvvDxEZ+1T5FTm4w3o22sGEoIIDURPtYu+4ngcstAgICEtSn+D075Lr/gZUAAhxco284sIBauQqs5wMLzIjvg1/0N+yPsbjTqkCBgjYoUDDS+gjI2xAQdxbYyz/0WfnU5nyOWwFRwq0wIxa5AA695rgjICCEO42oYdiUZHa1H94uAGgDACVvxWSYEYZKAGMHDBiu9ff1xqjDm09a0i8dT4hfUt+xYUoRDnOQHx4CaEJFIRQoaiqKAgU390w9Yjs4IWr2bMdmcT7xpvtUr0WIj9kGBAOoRtFSrbfE7y3/flY5H86s4KRh5xLPt3sLh7AhuISNM4FMpmtZQQ0sjwOO8RiQUMd7AgX8FlhCXrJKtbOqfDPi9bqKABTAJw6FgEWCS4ECgXdTcGveYwDR5ayLS2dGN96CBjZ++AI5VVpHVsUCZ5ic4OSNcHV4QjXrLjNT5+JVytq1rLc838Ti4QDyebGJtzta+6QakgU6JY+6ONc2dxmwLCcIAC6TvDuic3h0MXlBb6m4e7QJAPAbeSayy/AFHkVESsoQYGBSft66QGDivv1WYPTeotOfysCc9N3AaeZqjuM0HsEYciL63ybJazLeJvsh2k6SxwVWshQ4xR2a3q2of4EPIlvTshAzX0Wr5MadJ/FmLBS1HkITvAKh1i4G55ZjXPRIFY1H6lqfB/KIC73fFAR88Bh4BF83akZrKyStt84gJdW+4hFyR5MQni9dvXVRu1HHmus0qcmtXVuOKXHmGFSo6H7MrF8HB+ChV28/KyFn8vq25KsoBzEF+1BVqPUmab1d/qgJqFtUoqKjnzcDt95xdEuiXfYzB1K/IDMA3zGjTABMfjIA+I6MAAAhCeAE93TLzSSLFmHpA4Fy9FVPIVlAwA6b+1Ty1Sn3dLuRa3tvF0Pj9KmDoHj/tT24gf8j/wFtkTXADxi+NgAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico6 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa99eAlwAAAO90Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYqKywtLi8wMTIzNDU3ODo7PD9AQkNERUZHSElKS0xNTk9QUVJTVFVXWVpbXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqSmp6ipqqusra+wsbKztLi5uru8vb6/wMHCwsPDxMTFxcbGx8fIyMnKysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9fb3+Pn6+/v8/f7U/243AAAEC0lEQVR42q2WfUwbZRzHv1faCohACxtmRaEDJ25DQNRoFBx/TA3DQIKbMrJsi4uR6HyLiv7nNLLEJRjjNkxkyWQZuswQjZnRVIcvS1QW+aPwB87h7Chv0t4XSZpNurXm7vpyK3ftrvWXyz2/33PPfZ57nt/Lc1lIIfll+YEQMpKHh/ykp3dtBghrLxXxtqTPOEKOP/1AS4+P/vYMGB8WSFrtGP2Pp8Ww9JMHsxR9bZoUy0fkoayo5XRTTIPyLnnYHDedbvoajDIeJPvN6g7nOY5lG4Qc4+/2a3u2kAZdlDvPFxL7zvKgzmizdrfDijHFz3WOq5PjsvprZaUxSA4gSoiul6RAmdz3JQAiTwdi0u4Oy3fbyTflYKsY6DElW7z+QwG2oUYMb3Fu3DmFrgOmCNiAbCTvsp0mu+VJ8gfIXtM7/MkYpJTc/h35SsTM/ph87xg/NQbJOs/z5KsxW6LM8S2D6zlA8jWVnX2U5N0GIbdO01Ou7thJHjGcgC0i3c642SnyrM14Gm9TUzpEjpamU5W2inRHKvSTIkdvQZKQ0pLKhopVpSX5qxCcuyoAeUUILlz2zi6MDS9cJ8TR2bpeb87QmS9OBFJDCrv25gDL5/70iSHcPCunUbjoyiIsxcW3VQGY2/fZlVROmSRn+9oKdQJ5x3GSP9+eFCG8LFJ8vyzZkHuGyIubkwww95G/1aTyWpuX/t36j3vIT+ypfV/tptist7Edh3Hy2SAsBYLcL0CrDU0BJV+XBx4d14Tc6bK6mwNAzffJPsNbDaDKlee5/5JWZeu2ijsCci1NJj7pNrEHZbu0CnVjM96+KCl+4IMzcnhI17Xti03T8uBvPm/rPiGunOJbjloVbYa6mz/IQ4pS5efrK5dTUY/9y4oqolgP4sCSokwMYttKyCYEXbFlF+lBihBdw1dwrl8BeQSuxagDUKAHsUk7JsuPl7A5ESI04nS07x+oUsf6RGPcyMmN+S7gQk0ixH4DZuIQR/y9Zxab6mKGXXoYkXmUJUJWA3/HQ0G1sablYDwgC1WQGaxJhBQj/qYPqgTqc4yMxox8FaQcq7MSC+IFeu+N6K3kTTrVhoyW/DfIwRUHef0UPbWK2kCWa0M66I+8uJc8pfGncd80J+9QMpGs04Y8x0lF2U0OF2ok4C/b/7WfekzSFuXFa4ldCZPc/b2Y2LqokYD4YddR28DIyAVYgfZKVSExxQrKJmQ/D8u6h0rwR7tPVU/W9ceLzo1rzNd5sF1eCkXnEJbqzTnV6ZyO2apfWgvMYeA4E+rGhqIwQkBYvstXCILSzv+VUGfqWwXZFbXIQPbQA1MYmYogu1jIBBFO+gtqQKSN7WxKcs6kajdAkIPtqYy/JDirdTQYaMPE/yL/AQn/nlzVMLtOAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-l {
|
||||
background: url(@/assets/v3/bg5.EqAxWS0a.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWHx8fHBwcGxsbGhoaGRkZFxcXHR0dHBwcHBwcGhoaGRkZGBgYFxcXHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGBgYGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGhoaGRkZGxsbGhoaGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaYKSRzgAAAJB0Uk5TAAEDBAUHCAkMDQ4PEBETFBUWFxkbHB0eIiMkJSgpKiwuMTIzNDg5Ozw+P0FERkhJSktOT1FSU1RVVlhZWlxdXl9gYWJlZmtsbW93eHyBhIeIjpCRk5SVlpeZnZ6jp6mutrjCw8TFxsfIzNDR0dTV1tfY29vc3t7f4eLj5ufp6uvt7u/x8/T19vf4+fv7/P3+HFNa1wAAAi1JREFUSMft1vlbTFEcx/FPqQxG2m6MZQaNpGiUiazJVoRsyXIThWQZIaJl0rQwTNP7T/bD3CbPjOiebD/0+emc53tfz/O9555znyP9JLlWoEhmCdgxYOhKoXuacylJKrE61/gGzNxsrmnthmTYpT0MfVskSaFRpje6srnvGFnvjPfMcccVroZD6cltpvLd4IskPelJPexygzsZWJhY0OAG36VvYeKBYyv4z+BK27btQcbtdLqg17Zte82v8VEWy4Yl4Uc9b6Lve9J5GI0+7Xm5VPyj/sJ/Fa/aGd5sigPPgHvrjLBnCIAuI3yaueNFt6DcBF/llVQOIRPcSny7WmCrCbYm+ToKj3OMVrs+BkR8ht+5dIT7+cY7LMI1rWAX2NpU+G/OsxFe1g/QHPvOLpYC/T9ZGzLOXlVgnIll4/2WSdpTuMJosS58h/1hqaraKZwpkc47FzHvOck66RRqg9IRXyb2jyUaq6amU7qNSHEHvR5J8vbTbg3SkrqHxmPB5uSwLwsz+5k05iMLmBhpzEySLCz/BMTn224Dnsy3/Zx5K9UmYCyrbVXNwGyj80wHMFDi/BDeAu1OoXkOJoOZuHKKTxMkUnfM6zAEkUJJKh2ED3BZknQiyfgXYjsycNnr6Wr/WDQgSWpK9nra6M6TpIIHtHj7EwclScHYsC8Uf1GU2XbZbskfcLqr80gNealxwQHJu88pBH1STXHWO5tuklOVJun8DQfDHK8OGGfbN0W21rQF0iFVAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAMAAACvSe/GAAAAAXNSR0IArs4c6QAAAORQTFRFAAAAAAAAAAAAAAAAAAAAMzMzICAgGhoaFxcXFRUVFBQUHh4eHBwcHR0dGhoaGhoaGRkZGBgYHBwcHBwcGxsbGhoaGRkZGBgYGxsbGRkZGRkZGxsbGBgYGhoaGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGRkZGRkZGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaTYzvEwAAAEt0Uk5TAAECAwQFCAoLDA0REiMnKCkrLS4vMTM1OD0+QklPVGRtdnp7fH+DhImKi5CQlZydn6Cho6WnqaqusLK0t7e6vsHCy8/R3OLm6/D5JIZOigAAASJJREFUeNrt1VlPg0AUhuFDB9z3VlzQ1rpXxaVYtVqlo3X9/v//MQykAk0snKGpF76XkPMkc0IYIlXF5rVKUR/g9VUg4DIO0IgDu5S/nQCYcYI+ce7krBwBNvP0uC8Q2J7Pnx8HbMb+HooGFlqqAyLRGt7iILARLkYSWRn2tzkIrPiqUyLhD688gh1oA8sd1Qkb+FkiE1i6Ux2Nbwf/QIaByta6HuClvhFtoIvnavVCA3jtXyzjAh7RmQ3SW6LKBg5rYWfNq+ZlLZWTBNaix7048Gs3SeA4frEUA1CpnzCFKUqpjCRgpF9kzcvxt/qDwMS+FQL1Od78E9qWB2m4eGEJ5i3QvoZ0ATlNXOEN74CcYi4hEKAxHwka80Tmnt+YpJH0DZhq6TgD/Ay+AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAt9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGxsbGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaU0yUGgAAAPR0Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYoKissLS4vMDEyMzQ1Njc4Ojs8P0BCQ0RFRkdISUpLTE1OT1BRUlNUVVdZWltdXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqOkpqeoqaqrrK2vsLGys7S4ubq7vL2+v8DBwsLDw8TExcXGxsfHyMjJycrKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP19vf4+fr7+/z9/lcEE90AAARdSURBVHjarZdrTFtlGMf/pzcKQ6Bchs7q6NgG0zFgTGdMFMY08EHZmOhQYdGImWZL8BLjNRpNRoKJUwwmG5sBs1Uy1DgZH3TZhjo+zIVEQz906ibhMu500P7rCMXWD6eXQ3vOaSs+H/o+z/ue8zvvcznPe6pFFEnJSXF7sSKp7HaSYy3rZJZ0MSIMLRRlsip8Sd86N7orJsYX5O8vPlDVPE/nE2GMdpKu2tgYx1MBoPgKnXsjGLFQ9B3kEa2or1tO0beT58hwtAyjnTyqDVgWO13BG4R2sm0vudFO52OqkI/INkkCLHbOlwaMF9imqyETLPbhAjXGg2THsiRaBnnFGDAqdKghE2BRZaCTf6Uvn3mUlKaohkwI6Bp5RlIFWh3Lp85cRbnCExXq7nYDBsQ8l5iXrtoAAJfWb4gPkgTMAjAcfDUVwLV3vwPgQLICRMEdHwDA9O0HqQCQa23WqAVQeVGA6UwpLlSa8+pGcOCwxg+ObycaU3cRmnb3zV0/vb0bDR9rtCoYWTGT9T+Tr/tNo5X8tJNfK6RYQbRDHCLfCNpGKznLQ/FBcJjkmxLbeJLkvfEVGz75G85Oib1wAfjmcryNscpFuyVk7nPxNxPidAd4Ukqpc9FmRvwQ1Lpo93fop1203bF8taSpSRcqKTlZX5a72nxrShY8E/8IQHIGPNMLI+NTtnPT8nUZ+fLtq75LaXfei6e/dEeHpB1sTAQW/7g27fDitjHAB/gyluagz8zamA9g4r1TS9GSMkzOHNuTplDIz5wi2Z+vihBec9H12Vq1S7Z3k+MVKhfojpEDRdGytmeSzgbl5Wbyq/Toud9ip+sRpcDWHUHXfg/0qQIgAALkRu8IkH0+x/2QTRZS2GsYeNgNFPWpbWM0H8Cm3uShbTflmtJbBketG4BD1ZcZALA/i7XPye2krAeNnwPAqkm0XIRPrJCw8ZXyHvEQP1E9XyDztJ9oM4jaNBWD38WjorLJybcj3cktwaFFUXUgU7FtYl5U7FbURkJ2wvN90O0MJUhGMGI9sNwdAanE2Tm/OoI0JYgJs37tx5uoCIcIpTgfmJuXQgxPlYWMxCTc8KvusygKh6Qn4Hpgbg6SJnbgRvnWoJEOBLaLCeSEQ7KBqVApSAKrWfRoJN4EAguMYU04JAuhO2cgeYFazb/0B41UBN1BDlZrwxviKCfv8+vV5C0K3YYMtPx3yK6I8+aeCY4Vi2opmSMPqaPTf+NL5A8yXxr3T3FY7K2F5FZ5SCOHRaWB7JOtgx2zHNkFAHeSO+Qh7/NXAEj6kOyXBF/ypdRbf8JkvXxpEAbg8Q2SRqIJNpRyGF+GPq8sG39WzUje4ryOUNNZtSbWvw4LTm/gGYJziy6xAP9BjMaQrofOB5x0hPWNzZk+eAGv+At44YUgjpODYX1m224BKCSLsQLZzzFofFipCNAoHuoxik/1EzQO0fmA+p0q50y0cTME6AA8v+KdeMbljoY4Rp8D/4v8C2Rr2YaJzeY6AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-l {
|
||||
background: url(@/assets/v3/bg6.hlVmcDno.png) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAMAAADhcastAAAAAXNSR0IArs4c6QAAAtNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHh4eGxsbGhoaGBgYFxcXFhYWFRUVFBQUHR0dHBwcGhoaEhISGRkZGRkZGBgYFxcXHh4eFxcXHR0dHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGBgYHBwcGBgYGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGBgYGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGRkZGxsbGBgYGhoaGRkZGxsbGRkZGxsbGhoaGBgYGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGhoaGBgYGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbHBwcGhoaGRkZHBwcGhoaGxsbGhoaGhoaGxsbGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaHBwcGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaHBwcGxsbGRkZGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGRkZGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbHBwcGhoaGhoaGxsbGhoaGxsbGhoaGxsbGxsbGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGRkZGhoavoj1/gAAAPB0Uk5TAAECAwQFBwgJCgsMDQ4PERMUFRYXGBkaGx0dHh8gISIiIyUmKCkqKywtLjAxMzU2Njg5Ojs8P0BBQkNERUZHSElKTE1OUFFVV1hZWltcXV1eX2FjZWZnaGlqa3BxcnN0dHV3eXp7fH1+gIOEhYeIiYqLjY+QkZOUlZaam5yeoKGhoqOkpaWmpqenqqytrrCxsbKztLW1t7i5uru7vb6/v7/BwsLDxMXFx8nKzM3O0NHR0tPU1NXW1tbX2NnZ2tvc3d7f4OHh4+Pk5eXm5ufo6err7O3u7u/w8PHx8vLz9PX29/f4+Pn6+vv7/Pz9/f7+0IfVbQAAA+dJREFUeNqd1vt/W3Mcx/FPLWJh7S6oDd1GU9cwVlUUXeuyGcNqdZvbMJvLrJShC5u6TNvJ5s4uGGHMjKkapi6rYG4TMdpVl8qWNssie/0JHueW5iRNT+PzSx7fT87zkXPO953POSJ6HX1SchVKVrWS5IrPzfn/GJoOzAqv7DvrU73wYUH6QUP6gXmXNXV105jU2b8O/KWpxz0Y+6z2jJTe8F/UE33T1Lw2QuT2QlNtUg+7I7EeL7kez3rYtAx4x+PxzE7cqFI/abW9oT1p9ZuMVD46RBboneXDDF0QTLVd+VKdintoE5HnIPr6Rmg5ytCn3VfaVy9A8HCR82G+1nBruAVWiMiCOPfYHoDtZf3c09w47fkixRHip2ud2Rq+6h9VHxrnSpEZYaIz03HOj7hVyyLpwwVwk1PRxy2EI0WkZBt89WR9arUSurUsBt/U19dPM3Ah3C2KBvZVKt0xzVjU/SYsTj/09hK+5ArPK8eM8we8yeX7e+un7RADtnm93mAqluE3TB7mChAHIhVyQPLlbtB+rm7IhBvPUdbNaVitMuATiFWk2N/98H4iPRnwdDhRSUuy3gCd+fs9y0digR/nW1GzFikyWi8pVmQWFFjgR/W0wIt6Z6JmiyPExlrgUUFNf8xSvXM8XKplo9bqtNX9XiElUG102nh6qGIfE0usauWvWKWvHd9DqNtkM2Nx7kSJQ7hS5OqaSSNWa3ucbAfAMuph9wUTA4Qr1wP/wsJT5jwzRQaJ1XIF2Ad7lNmQPoKtsLj2Qufokzuokezxu9r+NvJF9vhyPRs97Mwez4QiLRvXZ4+dcLFqX5XssSPIrpd3g7rf2eDy8qEOPRvPK/stY6ceMlj8GoQCsHTOWz9fo+z33i3wR8XgsD5z3Ho2XN3q0jRbMmJlbpx9L5xlNFppqaoz60xYnTliC2hfi8hhMEOdDrFJVvhmPRshvMbdg9XabPk1zwIv5y9t5jDN2LMt2mxZrIzGgfF1REeKeW5os0VqaLdZ4GNh7VzzzFH1msVdvD3QNR/hEEd/c8N4ju2pFBnt6B8/we5VX8I6byRyV2rQW2hr2EFv0+dsPVdEfqDT5/P52hPYeB7lSO7BaWG2jRFx7Uik5ae+14pCmKfYjts202OXjPUI4cYGVX/NujvVukV5M7hQy0YxlGfGG2nS0lLRnIiQgpdp2SiJMy+jzYU1Wlo6NptwiEC+SHUUaqdnqioffCAiD8GfJgzviRTHrF4m1LScmXitSOD4rIsi1hZWTV1rwmK3j4uq3zxlH7hO2KUetsRutyXfjSlvRIi7xaqc30Hr/BFp/bzzJlhakYMmF5nW/wHDiRiDSjYLFgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAMAAACsn+1dAAAAAXNSR0IArs4c6QAAAotQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOCgURgAAANh0Uk5TAAECAwQFBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYoKSorLC0uLzAxMjM0NTY4OTo7PD1AQUJDREVGR0hJS0xNTk9RUlNVVldZWltcXl9gYWJlZ2hpamtsb3Bxc3V2d3h5ent9fn+AgoSGh4iJiouMjY6PkJGSk5SVlpeam5yfoKGjpKepqqutrq+wsbKztLW2t7i5vL2+v8DBwsPFxsfKy8zNzs/Q0dLT1NXW19ja293e3+Dh4uTl5+jp6uvt7u/w8PHy8/T19vf4+fr7/P3+fNOr7AAAA5JJREFUeAHVwYlb0wUAx+Ev2zhcQZgZTIEyCo9MsYgE80wEs8ikpDKPMqjMzDCLLgU0ZKWUmlGmIRSm0qGWRyqp6SRImMixz5/Tw/ihO20bTz1P76sbi0nPsCpyqduc0LMnUxEqbsetZ41JkZgLnesfnfvaH7BSEbjld46nS9KIfVzJUPhepvdBuY1qxa7w7aFJhs2cU/iOUSnDMlwWhe0QtTKsoUvhq+FsjAY0cFDhmwVlciuCFxQBO66NVslc2sX3ZkUg8QR0HWi8DI6xioi10kW/XcmK1OS12z4rn67/J/P08h3f7Tc01VXOj1VYZh/Bx9lihWGVCy7W1VQP2nkGqLYoVMuh/RmzPD3SAlUK0T09HE2Rj4TdME+h+YSeTPkZeZGfFZJhTt5WAIthgkIxDTIVwE3dLFMoFoGrLxB4U6FYQlAbFIpxS4LK0X9utsORpKGYBzYNRR7YNBR5YNNQ5IFNQ5EHNoVs1Irq2g/mW+QhD2zyNG39VvuqsQokankn/Q5N0HUfwmO6LvkL+vW9FSM/UTvAdaKxDboKZBhWBfS+apJh4iVw7j/cCz9Z5et52HuHFLXQwYXb5JZ5DP50QmOa3KJ/oKvEIiXWwEb5SOqgPkr9JnVjlyRTaTfY40d/A21Pql8pFMqtAle2vC2FdA14F2eclFIPbQslmUquwscJko7ytQZYHVTIWxUtMsyDe1XYCg2pcsv8FU7nyNJHqQxf0Shvdg7I8ABkx52m+xWTDMOqYJ/iYbEMW2iWt3U4LRrwLKQq95f75SH/RJr0F+/L8CO75G0mPCc3y0GOSzLLi1nSds7fKrdcFyvkzdTA5amSFL0BFiqgKT3UxUvS3b9x5mb5GNNB36bCnGXN8KmCeANaXno4f50T1wz5md7CgG2JCiK6vA+39qcVQEJlG3DkCd1ATpMLrtSmKLDo9Mm36x8kTsyI078hbvyMOYMeSlNASVlzBs26L0Gepu504ulU2XD5iF15GE+99Qs0KHYLfloL5CXzFH72jpBbTCM4Xs+9K23Q+AW10FcsD7lOaHhqUtqgO7NePAknR6rfJvg8Sd7yz3E1S9fYLtCxNEperBUuvo2SNMXFbvkZ18V+XfMRFMhPORRJstM2Wv5KIFuG4T3UyF/cMZol0yXeUQDR7ZTJUARjFEAxpCgZtq4O5BTbZVhL5+pANsBMTSKoJhk2E9QiTTwf1JcyvHc+qMf/BiaidyHImEZ5AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABOCAMAAABG1vXNAAAAAXNSR0IArs4c6QAAAqZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGBgYGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaJuXLtAAAAOF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBobHB0eHyAiIyQlJigpKissLS4vMDEyMzQ2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlbXF1fYGNkZWZnaGlqbG1vcHN1dnd6e3x9f4CBgoOEhYeJiouMjY6PkJGTlJeYmZqcnZ+goaKkpaanqKipqqusrq+wsrO0tba3uLq7vL2+v8HCw8TFxsfJysvMzs/Q0tPV1tfY2drc3d7f4OHi4+Tl5ufo6err7O3u7/Dw8fHy8/T19vf4+fr7/P3+qN2dfQAABIBJREFUeNrdmPlfVFUYhy+LBIgigkKoWba4VCYpmGFmWCIKoWimpYaSkaQSFphGhVRuRRlRuFSYEBahljmhFqAi+xYEM8oyM89/0mdmmOGcOyvzY9+f3uU+nzvnvOe859xRFO8UF+8lOOGQ8cZ4r8ikBmhd4AUYWQwcm+zNOy9D3XPeDXSl/mCwl3Ok3O/RU+FLVo9qLMObftKAoMWek2v7wTt0Vj+6vbFRkTaN8xj9ib5HHCYmuiOjIdNhYlHv676u0aXwuMPE71A9xyWaCNEOE7N/haGce7xBFd+MPqixe/HCLKuOQq7Nmakq+GnaI9RoFg6VoH5ufapijxq7LfpXq+2xWL0OUAfKotsuNvP/jo4LmzEt1G+saFjKR+W3zTUx1H6fuzzIY1T3o0Gu6d0zHqH+J81Pd5TmbVm7YmXa9g/KdOZAtvu+8BdQmx/vNxoKWn2kHfglziU4rQo4b/+Mb+p1oMjFSbGoGf5McjyO9Gb4Y4YzctMA+kw/Z9nxhdDqpK+9Dd0uj4Mdwwyuc5R4Ba495HoOl3Vyd6F9OG6Qmknu5v/hbprsGsf0Frpmua96gp7fguSQzwWGn/WkNb8Bn8qRjbBTjgStyS8+d+LgqkAVexTDXNEPqOeyjxgIO6AbWb/9eaESOrmb71Q/Q1reCZ1AQ/nX5Y1A21J12xMCEzs4J2a36jEcn282Y4qMDG+SRtLAhVHvNVggT2NTrM17uo0h6Yr0Kjxpc6rQiOPspFlcrA+00zJB8EMGOGS174V3hNR7GGKl0T0DOaJ/hhar+TLEjCYCtXymKkgJ3eKhvBWsx81hbguVSZIHbtJTsFxwIw1kjJgXpdccoNFup3ewT/Q1thXVy24hXkrXWbMSFUVJsZg9FMkDqBxZH5AmxM9b+2C6Za1YVCaiedx02Nq/orPELNO2T7SYPRwW0V3WLj8PxGJk0+ajHmsvb4r+dvQWYy6IPTBRWqNmvQDLpE7DsMW4D1YIcb8milXoKep95B3QZTEmwQYx8S7IDTUNqQSKsp/6EauLvWIi5G8GfhiduLSyAWrkpvItFSNWNV/InVwPBTbvBAyqbl5XKRyxPqZFvrelgDFFUSKiw8xbzJioOl4sNTdpvTzFiqLoaQ0y3S6/VJQputF9YptgrA17qpH9cnLYvAvNqHKEBhV6VohUcF2N7rCh+9Ro6BDvi2fGYs/RDPHCGtxElQpt1Gg0Wv7RaDRtKjSk1bpvzNoGyTIqSkZzQDyy/K9xVTxYPywQJW3zKC0l6kru8eTIUXy+YfhBOVSBcY0naDbkq0JTb9I/zz2ZaqTS7ovlMS31Ue7IGC11EfbhF43cmu+aTNY6+Wk7DejWuSL3GNE+7ziV1IcxN9AZGFEMNx51lp1TB7c2O/xwCn6rF36e4vwnhZ8Grqyyu3YFbWkEfUGAy5lYdsl0LT2WLHxQh28uNd0OTs12u1w21JrW7Z3KT3Zte2lj+u7jF/Umv3qJJwvGP7H4jnyV7iiMUzxVQHx2yZU+I+i7Ln2e+YSvMlb5hHj9F4Jb/Qfbt6tIIlhQ6gAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 39px;
|
||||
width: 29px;
|
||||
}
|
||||
</style>
|
||||
66
src/views/Jyh/ProductServices/ProductServices3/ModTotal.vue
Normal file
66
src/views/Jyh/ProductServices/ProductServices3/ModTotal.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="mod-total"><h5>实验室已为超过 4000
|
||||
家客户提供卓越的安全服务</h5><h6>即刻行动，与实验室安全专家一同开启智能安全之旅！</h6><a href="javascript:;" class="EASE btn">申请试用</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModTotal"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-total {
|
||||
background-image: url(@/assets/v3/num-bg-wave.png);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 270px;
|
||||
padding: 67px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total h5 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
.mod-total h5,.mod-total h6 {
|
||||
color: #1a1a1a;
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.mod-total h6 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 29px
|
||||
}
|
||||
|
||||
.mod-total .btn {
|
||||
background: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 34px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 32px;
|
||||
margin: 0 30px;
|
||||
padding: 0 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total .btn:hover {
|
||||
background-color: #7aba4a;
|
||||
border-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
</style>
|
||||
50
src/views/Jyh/ProductServices/ProductServices3/index.vue
Normal file
50
src/views/Jyh/ProductServices/ProductServices3/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product3 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
|
||||
import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
|
||||
import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
|
||||
import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
41
src/views/Jyh/ProductServices/ProductServices3/indexOld.vue
Normal file
41
src/views/Jyh/ProductServices/ProductServices3/indexOld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
102
src/views/Jyh/ProductServices/ProductServices4/ModBanner.vue
Normal file
102
src/views/Jyh/ProductServices/ProductServices4/ModBanner.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="banner-container">
|
||||
<div class="txt-content wow fadejinzhiInUp">
|
||||
<h1 class="zh-title">智能终端安全监测平台 (源端)</h1>
|
||||
<p class="en-desc">
|
||||
守护终端，运行无界
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="action-btn">
|
||||
了解研究方向
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mod-banner {
|
||||
/* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
|
||||
background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 520px; /* 增加高度以匹配大屏视觉 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中内容 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 增加一个深色遮罩，确保文字更清晰（可选） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zh-title {
|
||||
font-size: 48px; /* 增大字号 */
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 24px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.en-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
background-color: #C8161D;
|
||||
color: #ffffff;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #A01218;
|
||||
box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.mod-banner { height: 400px; }
|
||||
.zh-title { font-size: 32px; }
|
||||
.en-desc { font-size: 14px; }
|
||||
.banner-container { padding: 0 20px; }
|
||||
}
|
||||
</style>
|
||||
491
src/views/Jyh/ProductServices/ProductServices4/ModTabs.vue
Normal file
491
src/views/Jyh/ProductServices/ProductServices4/ModTabs.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<div class="mod-tabs">
|
||||
<ul class="tab-hd wow animated" style="visibility: visible;">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{ on: activeTab === index }"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-con con1 wow animated" v-show="activeTab === 0" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">运行态监测</h4>
|
||||
<div class="l-desc">实时监控终端设备运行状态，识别异常行为与潜在威胁。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>静态语义分析</h6>
|
||||
<p>无需人工预筛查干预即可适应新型变种，技术架构无缝支持多种系统。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>合规性检测</h6>
|
||||
<p>自动检测应用是否符合安全规范要求，快速识别违规行为。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>精准高效检测</h6>
|
||||
<p>无需人工预筛查干预，在代码混淆等恶劣环境均可实现高精度检测，检测准确率高达 99%。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>极速处理能力</h6>
|
||||
<p>静态分析与动态级协同检测成倍增加效率，检测速度提升 6 倍以上。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con2 wow animated" v-show="activeTab === 1" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">调用链追踪分析</h4>
|
||||
<div class="l-desc">精准定位恶意逻辑核心，可视化展示攻击路径，分析准确率达88% 以上。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>隐蔽行为挖掘</h6>
|
||||
<p>专门针对"正常软件包含少量恶意代码"，通过图算法剥离伪装，精准定位恶意逻辑。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>程序逻辑分析</h6>
|
||||
<p>可视化展示软件函数调用等语义关系，辅助分析人员定位恶意逻辑核心。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>伪装检测</h6>
|
||||
<p>识别恶意代码的伪装手段，揭示隐藏的攻击行为。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>调用链追踪分析能力</h6>
|
||||
<p>无需全盘扫描分析，在复杂混淆代码中精准定位恶意逻辑核心，分析准确率达 88% 以上。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>可视化辅助</h6>
|
||||
<p>通过可视化语义关系图辅助分析人员快速理解攻击路径，分析效率提升70%。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con3 wow animated" v-show="activeTab === 2" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">持续免疫</h4>
|
||||
<div class="l-desc">自适应进化检测模型，秒级响应恶意变种，支持跨平台识别演进。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>增量模型训练</h6>
|
||||
<p>系统自动融入新发现的样本特征，模型实时迭代，无需人工干预。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>跨平台检测</h6>
|
||||
<p>支持Android、IoT等多种检测能力，广泛覆盖各类终端设备。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>概念漂移变种识别</h6>
|
||||
<p>有效防止长期威胁，识别同家族的恶意软件变种。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>持续防御能力</h6>
|
||||
<p>无需全盘重装引擎，在代码变更前识别恶意变种仅需秒级响应时间，可支持跨平台识别演进。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>自适应进化</h6>
|
||||
<p>持续更新演化，构建可抵抗概念漂移等持续演化威胁的检测框架，检测速度提升 6 倍以上。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-con con4 wow animated" v-show="activeTab === 3" style="visibility: visible;">
|
||||
<div class="item-l">
|
||||
<div class="l-txt">
|
||||
<h4 class="l-tit">态势可视化</h4>
|
||||
<div class="l-desc">强调Zero-day预警、家族溯源、全球态势、498+31 个恶意软件挖掘实绩。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-r">
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">核心能力</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>Zero-day预警</h6>
|
||||
<p>发现未知威胁立即触发高危告警，领先行业披露新型威胁。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>家族溯源分析</h6>
|
||||
<p>分析恶意软件的同源性，追踪攻击演化路径，揭示攻击组织关联。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico3"></i>
|
||||
<div class="list-con"><h6>全球态势大屏</h6>
|
||||
<p>实时展示全球威胁态势，提供宏观安全视角。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-list">
|
||||
<h5 class="list-tit">价值体现</h5>
|
||||
<div class="list-item"><i class="ICO ico1"></i>
|
||||
<div class="list-con"><h6>实战验证能力</h6>
|
||||
<p>已在 Google Play 实战中挖掘出 498 个普通 Zero-day 恶意软件及31个高隐蔽性Zero-day恶意软件，具备真正的未知威胁感知能力。</p></div>
|
||||
</div>
|
||||
<div class="list-item"><i class="ICO ico2"></i>
|
||||
<div class="list-con"><h6>智能预警体系</h6>
|
||||
<p>无需等待传统漏洞库更新，在威胁出现时立即预警并溯源分析，可领先行业披露 Zero-day 威胁。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defaultTab: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const tabs = ref([
|
||||
{ title: '运行态监测' },
|
||||
{ title: '调用链追踪分析' },
|
||||
{ title: '持续免疫' },
|
||||
{ title: '态势可视化' },
|
||||
]);
|
||||
|
||||
const activeTab = ref(props.defaultTab);
|
||||
|
||||
const setActiveTab = (index) => {
|
||||
activeTab.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.defaultTab,
|
||||
(newVal) => {
|
||||
activeTab.value = newVal;
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值生效
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate .mod-tabs {
|
||||
margin: 0 auto;
|
||||
max-width: 1360px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 40px 0 20px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
-webkit-transition: all .4s ease-out;
|
||||
transition: all .4s ease-out
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li:after {
|
||||
background: #4bad52;
|
||||
bottom: -5px;
|
||||
content: "";
|
||||
display: none;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on,.pg-evaluate .mod-tabs .tab-hd li:hover {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd li.on:after {
|
||||
display: block
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-hd.EN li {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: 0 2px 26px 7px rgba(50,50,50,.06);
|
||||
box-shadow: 0 2px 26px 7px #3232320f;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 60px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l {
|
||||
position: relative;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
height: 584px;
|
||||
width: 440px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt {
|
||||
color: #fff;
|
||||
left: 57px;
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 169px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-tit {
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-l .l-txt .l-desc {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin: 26px 0 0;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 50px 0 0 83px;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .item-list {
|
||||
padding-right: 78px;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-tit {
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item {
|
||||
margin: 0 0 40px;
|
||||
padding: 0 0 0 60px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-item .ICO {
|
||||
background-size: 100% auto;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .tab-con .item-r .list-con h6 {
|
||||
color: #4bad52;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 0 0 10px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-l {
|
||||
background: url(@/assets/v3/bg1.B9IGVx_y.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAAXNSR0IArs4c6QAAAtZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcFhYWGxsbGxsbGhoaGhoaHx8fGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGRkZGhoaGRkZGhoaGhoaGQes7QAAAPF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKistLi8vMDEyMjQ1Njg5Ojs8Pj9AQUJDREVGSUpLTE1OT1BSU1RVVldZWltdXl9gYWJjZGZnaWprbG5vcHFyc3R2d3h5ent9fn+AgIGDhIWFhoeIiYuMjY6PkJKVlpeYmZucnZ6foKGjpKWlpqeoqaqrrK2trq+wsbKztba3uLu8vb6/wMLDxMXGx8jJysvMzc7P0NHS09TV1tjZ2tzd3t7f4OHi4uPk5ebn6Onq6uvs7e7v7/Dx8vP09fb3+Pn6+/v8/f3+/jZlGfIAAARzSURBVBgZtcGJf84FAMfx77PjGRs2c2QUm6VoylFyLMdmmKOkiGooUY4cqSgVy1JKIoq2pMOoxCK1ImfMNCamaZjYxR5b6/n8B/1+z+/Zs2fHq9dGvd/6v4XqxgRltNcNeZUNuhGdSiFWN+BL4LC/rttI2A4zdb0aZZEZsI2CMDVMt66yPA/DFFXGGrn1i1A9tCq9cqtM4SWkSloK0XIZSrbqodlVFsn0GVcjJTXLZZ+vTKlkqD5SOOkjKQ4WyjQepsjQuozn9C8e6ipLPAyS7EfIDpTJ9h35LSU9jTNcloGxqmUwRbfIxe8sc6Vn4QFZelSwQtJ60mQZ4Kxoq5rCS0mWJW5tB7Ur5GtVegtnL6n3+i5y8T1Ijl21vAYD5bEORxdVCj1Puk0eU2GcamuSwwFV6g9LVGUSJKhS8EV2qC4PU2KXxfcAvw+Ztymj4BqUF/361ctHyQuRWxRl3eQlwC63+L5yS4Rr1LA/1ibL8D5yC7JJjU+f7aNqWk8/gsWZs+uT5G+Pl2M5sSBc1YwrTpOCCykapCo9NjqAv3OgaGELuQRNPQd/ngWc38SoyqQKDkmKKeJKvNw6pzjBuXVsIvzcXh4hWyA5fqMD2NZHbtPh1O0y9L2Eo6tMHVaVQ/6CcI2EbYHy4rMaZqrVMyeB1DtlGgOZ4XLpcY5hknxnFEPhwmDJfoxjoarGvoOC1lLAtLNQviRQ0hx+CZNb816Suu+Bq0tbyTAFhshyc6Qsnct4Q4aguRchK1byiW4kb9NKIe02uXzPDrmMz4H82b4yrSTPR6abksG5xF/VhG6CSxNtcmnj5AmZXsIlRaYYiJYl/hSkR8jLHZnwQ4TchkO4DD3L+XHYoFQYLYNfMdPlFvoFnB8gjwGXYYm/Kk2m3EeGF7jQXPI7xIcyZZAoj2kOHI/ILawYElVlHnkyJbNVhuXslWkn76vKZHDeK7exDhxT5PEkDpsMr3CmkaR0Nsh0mCR5jLoM8+Qx4DxsDJHbKAiToT9siopcDhNl8ClgltwClsGVcfLScTeciJUlAibItBKXNJsMfSBOlu574XgvVWNPAj5oIZf9bJbJb74DnG83kSmJy3aZGi8ug4+DVdPQU1AyO0CGOdBbLkHRMSFyaVfCezL4jP0NLiaoDk13A9kJflKTXPY0VjW2zymNkDTyILAhTHXpVMofwNHHgpQAH/nI2yJYLP/70zHFqE5bKG4/OB0oeLfvStjcTB7+78C2u17PA44+eorD/qrDCJgnadQeDBlZcDrBV5YRhyF3H4bMBD+NgRmqrVEWmQEydV92AUvJT2sWvbhq52Usxav722TYTkEb1TIf4uVmfzDlDDXkp05sKktUGWtUU4cSUuWt44QVhy7+hcFZkLF2cpRNVZKgn2r4lKuRqs3e9e5A1dIsl72+qiYOFqr+JsAUefM/Qnag6s+2i/yW8jILRqshelawQlXaFrJVDbOcinvksQ5HFzVM6HnSbXK7D06+2VAH4XFZfA9wffJC5DJi//V6Sv+BfwBIbvfBNZtweQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA6CAMAAADMWVqUAAAAAXNSR0IArs4c6QAAAkNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUICAgHh4eHBwcGhoaGBgYFxcXFRUVHx8fHR0dHBwcGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYFxcXHBwcHBwcGxsbGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZHBwcGxsbGhoaGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGxsbGhoaGhoaHR0dGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaHBwcGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaZrZiaQAAAMB0Uk5TAAECAwQFBgcICQoMDRAREhQVFhgZGhsdHh8gISIjJCUmJygpKywtLi8zNDU2Nzg6Oz09Pj9AQUJDRUZHSEpMTU9QUVJTVFRVVldYWVpaXF1eX2BhYmJjZGRlZ2lqa21vcHJzdXd3ent8fn+AgYKCg4WJi42Oj5GSlZiZm5yfoaSnqKmqq6yvsbK0tba3uLq7vsDBwsPGyMvN0dLT1djZ3N3e3+Di4+Tl5+jq6+zt7vDx8vLz9PX29vf4+fr7/P3+nMc1QAAAAuJJREFUSMfVlulfTFEYx2fmtk1laDGtWqzTKksJES0itEipLJGxJEsoJEsSIilZsoUWoqQyg8bcaX5/mnvvuTPN5864nUkv+L2Z5znnfufznPM8zzlH4RtHIbVCqjhQaMUcYgXyERb/AYtTyCrpX8PW5ola4xbWZdu7R3OK+YcvdIX5aUT5TY95abWexIpttsD6bDPdltgV+0UIZKrSLUzZix8nUoreg42gxXQl+uONQD5nBhtwiQ7b1kv2aZLhvWZ00GCqRh4ZHzHgp4C1opsGuwAMFYZypQDs49xoI2oosHgrHmsE6zks9ZlVQ5hcRIG1YjyEWDH9JAFZFAnwMKLeZgdfHQU6UmjSHQrsmvY85zN0jaMDklwMz4TFA/E0mEdguKNbBIRNe2ptgEtMrf8M9J1k7ANNGLU7UTdYWLs3OmNMGymju97iQAKLJjs1LMxZypywGuDeps33gSPET+yDyR7zG0zWppYNgA2TYv1oU3It0o7h5IzSY1ceTAFnk0SVcicq94nWiAYJxiVJ6N2trg/nMWGVt/BQgi0AMvnfbNfYNxU/edupA5ghtHNTTCf6dKvzKuuaTcBlnahyoIT7JtKAWunaqrmay87pBI4Sf8lLWBNskz1gz2ccGIQpWop53yHhtCjFgUgjvxLxPwZJB+Q5p1ulfwsMHvKyD5wCq7HZ2utjQFeq65oM8lc6eGnAKodognzoSjkAyJlFB8wDts8CYyzQOxzsgRrK++0dWm1mxDUzLJ3pVFgDzDqR+iQkgC2iwcJMeEVup9cw1W3Y/wFm7iTLBXLlj9fDwNeDi5WKRKCYL/fvuKhQFJB2kNNpPjSTYQTjHrzbwtdNFpA109WR3kNKbkJFsCe0F1VUflV1HVDIr3UCZ9y6TV/AfG5dxQB+xbiFLfsohGrdSRKwJ1lWaeVbfMUz46YBeLre/ReeOsT/bx+GO5bLavf//DDcu1JWFXP7xJ4N5rOUQt5S6jcJyGZLl4Al1gAAAABJRU5ErkJggg==);
|
||||
height: 29px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAAXNSR0IArs4c6QAAAuVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGxsbGhoaGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGxsbGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaMeyWdgAAAPZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLjAxMjM0Njc5Ojs8PkBBQkNFRkdJSktMTU5PUFFSU1RVVldYWVpbXF5fYGJjZGVnaGlqa2xtbm9wcnR1dnd4ent9fn+BgoOEh4iJio6PkZKTlJaXl5iZmpubnJ2en6ChoqOkpqeoqaqrrK2trq+xsrO0tbe4ubq7u7y9vb6+wMHCwsPExcbHx8jIycnKy8zNzs/R0tLT09TV1tfY2drb3Nzd3t/f4OHi4+Tl5efo6err7Ozt7u7v7/Dx8vLz9PX29/j4+fr7/P3+/H7PQAAABYhJREFUWMPtmGlYVGUUxw+IoCC4YEkpqAQpuKJSKi5pWmq2uJVLruReiguWCFJomUvu1qSpDZJWkKWm5lJauWQa5IaCQpg6EwjT4Mz8Pvdh7r0wwzCD2dOHns6n/32fO7/nveec95zzjogHC4+JkPs2Hfr/AKTHis8Whd8nZIYNKImTBhGfsjey0d9itLnL+XXFWH7DbkV7UwYF3ytkCsXBMhAHs+wYEXAvjDo7KPaWaFg7NO5z9sYNSdh4A6AwocYfVmvUZeC9IQcxBWmO9em+8BxgmOxTI0b4YaAAgBmO0XksCzgeXQPG8wY4GOefVMSFMVVC/OQxMPbzhPBKBtMEEREJdJVs3qNKsc50z/B+F860d5uxHS/BR37uGCsho56HtG/yPUxyA1kE6XU8nZ3oIiwdq2c8C3pHRquX5+Vwec7YNhVLYbmYe1XPiDRwNqjSc8TiS1q6XkqLsi82/gnrc24ccoSySj6N2GAFLJdvYci1ANb1USJS7zCMc+OQF2GsEoCElBFjS6D07YENRIdeAgcsMYJpgvjuhFluGHVzOeolIiIzLQCUzmtcybGN5hnh/Q8gxV2KvAbdRUSkq42ik3CjtVN0Wh4CWOvlhuGTx1a7SuZKQ3mLcj/nEPt+Afra7jbSD3qov0oX6QvNnCHxsM99RfmQ88pGZ2FN6LyfAudkG2bjpPty0qCcBEUG/wnABCdIn3IuNnV/8vqAWifa2oDSKfZ9hU7NJX9GS5HYOxS08lAC5nJTdftirLEdfO3eTjQDUJ7U/gbFnTzVkZ18rCauFibx2Q7WnK+zLWDC3NNjPbupuaQDqKUrEbLCRSQsA2yDPTJqw0uKHI1NOYWhZrK87fXuENZIj5AQeEqRCzmnqKlYwxXZzKTt1HVx1+l0ugzI1NntAkWKyuWk9tYZ8pXV9F8+UZTu6CmdTqfTRYvEUL1t1iDfuHmrm0iEXq/X74EDertdwqiofE5U2kmBsnqLq4raC/v0er2+rfrN0EfUrM9XJwMsYWpxLmOuIrNZoKhe0KKyYwJgmCJHYVVOWYtyMpQM3IJVKY++JuKVN4eAY2e4rXm/HQzUAoW+mYg02QJLlbXeEKuNDibHGO3S0lRyWKVmzy4wnT/9axnsUbtAKvneitzAEUfI6+SpMomb9dUylGyvlNYlKiPgmrYnyWNhlZbzqCLb2zTXiUTOzqdgbpT2PKviayJhgCOkoZnZql5DaWg1HbCJsSJ3xmNznsC2cFqVLczs93MJqZ2JpbX6cIw9ztn/AnQR7dCw2iUkjYoj1LUiKzTzL2Sb9rAKVvlVgdROg01ax1jPNd8qB3EmDO75gF377YZ9TZ0gTTLhkH+lIXV+1dNc7wZgS61rHx9XQ8m8wEqQgFlG2OQvIj61RMTrSwwhVSEB14GKLjm9HAqX9PUTHXrx7Z16DSwJXtI85YLN+vOCB0fBRBd1ZSS2cY9swFZfmwoATDmF/J5tAtjcWqS/yX76bxs47O0CksQpkTbwuLbS6c0rWs3IXxorIn3N3N0U/8p2G1hdDkuTKYuSBK172mtr50mJF7m6ID7WW0SksZG8KBGRrkbyXM5+zYsxn4fr/tXPbK9CjF0NhOEui+0zRgAOhVQLySJLbU7ZldLRwULHJw57By60rQ6SQ6oqt5LppvhPs2EYXcs15ATLVJmudUyXNqgUfnzCJWSdlunBJt5w28hijgPpHVxAJsIce9SWay6udvKaXgwcmdTCARI27iBA8sMikWthjceuGjzfAJC9csbTXTL4qkv/acvPAPzxA9w9e84G23xrcOsJHLnb5tzp9o0JCtpovw6m+dXwFhcydNm3Jcrv73y3YvhDIiLSempqysSwe7qVejVtl8mBdqFe///h8I9Doru1lX/F/gIjzb047a6x0QAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAAAAXNSR0IArs4c6QAABsRJREFUeNrNWWlsFVUUHrayRgRt37vfmS6QlqIlIFSkkIKhwSJVUCRgWARSZTVGQRBBCCAoRUV2UIxFlIQlrLKLQhVFtEBAERQECRaBKmWrCKX1mntm5r3pvJnSVyhx7o/Ou9t377nfOee7U02rnKeKP9LXDNHJNbQ79aCOGCQ24R9ILv9iH00QsZUP+xxOm5D2ck282/CuSgPVa2O5AUTf02t4Eu38XTAcG3CNa4/o8ZUCm1yDchggV6SWbiEdH3HLX5UCjQ948g+TItxaaQCuq13fdoNTGsOuCNbENBAd/HGloCWkmHG797sXEqdQxwRpi4MmrfJpmFbFqBVLmGa3zvD4mlpVE7YVU2qgCTsEJaU4vcaARrSiGU2oCG9J9BMzsBFHUYAb7KWFOI1d2A+Jv/XaPH0i+/Dv1B9NRbrYyUsaZi5wAyT2hmfKpnoWzrt4aKCITWbPxZDiIulWBGPofLNtOCRKtOrlDH6iO/bYIE5iK2ZjjNgMiQs0UkzFClyFxHxz8kOQmBMcLjrzsvhk9Qzev16enXbliYzgJ3EC0YGW1yGRZ77/Boks8/0yJL1stxUDt+dFtFfv/vtvAipisd4EPUXz+W9X24R24F1BV8I3kFjpdKOYBvzeX73fxJfRCQUMVoDRcbWwVhnZcowQ4Dl8jtV48jfYOt3MlmjkQeKAuYiPIel42bAvoBgS1/G2Wqsvijk8sVQPO/AjfHZp6j2yHk4w9EqMwlxxERLFlGK4Hy5A0qwyoi4W8V7PUNtAzlFnE+cFnFwDZyFptXlEyQxtlatisDkik5eX4hkWsIMH7AuyD59CYr/DJjZgTcMktTNfI+NXZD0xFV/jEv2IbGpieQd+UCnEm1JLGHalFf443Sl3mVwWcKSfk192GVTtwezu63W2o9gcn9hpZCQAf+uygDWNZqk9I9Fj4qo4rLKTQcDQkJjBUXZPXK1SEBMhccU5xAnsi0IhJNZ57HcQb6in+24TcUlNFisc9dshsT2ktwNY0zCZjflo6MwxDfCnCj92O9pzag5z8MEQiEtOV3IH1mvjJCR+CZUC4PBD7ilR9OP1jnXWxwqu784/qjWurxMSRbL/YSyDxHk9gzpSCrXQExrX1zTxFPcd54BtxTGhmBOk80mK4AiTZ6Q2u5FoKE+2BftVFC6zFOJnzmBF9micFMFuVCDe4XnSnfsdzEOfNddYhzrSeGzlk6lI+SlIRTGVzdzfPIg9jtRHx43uOtFQmxy3SjF2IVu8ikzqpWeIDmhFTcRMSPxBup6gN9fbUEf0xmjMptXGYsX4QBRTwfYoWgaY3UJzeqqYgW020VKIL8QU9BZfQuIzFx8IIZdZ341HF/masZmtpCrpuD+LrkBigd3QS5UyCOTdXEz0t7Z0Ao4Ek3y5gFua8+zTqmOaobQ58qmtKYxCX12rb3VRbHY+glei4Yg41yHFi2EA3xuw2TrezHq+T/WgVWx0Bd/DMnQKm+I7QyWUfuLu9oo4XsCaphgiDpvg56J8gfpoTKciSJppGXqc0rvxNV2Dis5xuktYwMfUSeKMOjbnSKywZSilLijHI2nYFFO5gXMhsYjSUIK3XASGxA3zlDlvLHAH9rdmg7UMC/grzm8a9QwVsob0N6511bzow6buqDrqCWEBb4OkVR7z3ROgl8FCMxaHTtJVtUb6wwJeB0mbPfNyCSSLIV8j5u2b6ONa5rGpM0NbxBpWoG5jdjOr+3iUK2Ya0ZtXMB7fQuHLqp5w54ExzVAHij59fXXdCg1Urb6o0BahwuFptzF8CDvc5/PVVQKJRhqysxiShnqQ6wkDOCxybTQCpdsTX9NIkkbHc5A03kOkpYdK+ZsCK12+3MOdOBLqGUbHfZBY6gGcymS4Lyzgb70VtpGAzZyMueo+6GFqI9IkhwV80D2RataN47KpT6iXlzk1TY9nFnYKC/iUigseIVhZY0spHYk88UxpIc9psZYRQMIArsZkHeYqEZY5lCzLMFUuYAHaWd9ytAD1MKn8wCKGT/Exe12sEC/hgKXfotPtEfTpQINEPhZTL0uJcJLLDgOY6ag3N+wlUjEZe/kzhiqXMD0oDILn2Ua8xxdpq5zAUjGW9kCKnWEA9+Udj6RZ2M2fEU0lRzk0IKi2XBxcdMa8gOmDJQ876H0xBWPwPA0QPURn9VkJ+ZSGbugtBtEImiBmYC0OiRuOkVexgYbopJXv8ceJfmIhcvneVJFSjF+xFqOorftH1XI8UT6Rikxk0WocxCkUoMgFRn3hO4tj+FwspBH0OBIr5V8CSRF6QxHjT9Ifogf0+Eh/ZD2P6+f/8/kPaURwNOuwtMAAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con1 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHBwcGxsbFhYWFRUVGxsbGhoaFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGBgYGxsbGhoaGRkZGRkZHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoahQXVxQAAAKZ0Uk5TAAECAwQFBgcICQoLDA0ODxITFxgcHSEiIyUmJygqKywtLi8xMjQ1ODo8PUBDREVHSUpLTFBTVFVYXF1fYGFjZWZnaWxub3J1d3h9foCBiYqNjpGSlJeYmZqbnZ6foKKjpKWmqKqrrK2vsLG0tba3vL2+wMHDw8XGx8jMztLT1NXV1tfY2drc3t/h4uPk5eXm5ufo6err7fDx8fLz9PX29/j5+vz9/ud+XxgAAAIaSURBVHic7ZTpVxJRGIdHtJS0yELMNNtMaLPFLNuppKxIC8v2fU/KysJyKtvBpI3KqDAL5Pk7O3eGphEBGb54Ooffl+e+895nzl3mjCSly4yj3ba0zQxZMwiRFpNRbeYZIAq+amNeUwgCDTU+GGktzF6bdQXih8skyeQahr6F2Xobh+DVMnVceRui7qnZaNYuiLWb/5YFzjA8rp/Y2z5untULsbaSzJpNrOxA8so2DcHLpRk0U0sk9Vkop9VRms6r9sGvvUUpe+vF/axM2SpsHQFfjVYv7+zpPd+sfTnlZ4HjlvHegj4YdmnzLKdRcm+ONmNtEIKNSdoUdxTuVGr1tBfwuetSAH7M1R5ajgHnyvXekkcQdhb8e9AB7cXiciL06r7zFX74tEErS9pi4LXqXjQvTqc62gqbdY1Szyhcna0WxQ/EBc+v1eUQo/bE0E+3vlO7IwyhCkW0Yzgu9SCeGPW+VqlrNdU5HF844RCJclCgEfYLNsEewW2wRXA3rHPYzbpdv8Ot8De7BKZDs6ANGgTrYbHgaqgYe5F5MS/mxf9dXOXxRHjoEYlxV+AI3BI8BdcEL8IFwetw0uPUxH3G/lVenRh7/fF5v4j//TOFgbcK+geCKgffqAwOfB8jhqSsc2PyRFmWPxD/mXVifJNl2SxJRv//asqE2HPzqaHcv5wQnRNtKzmLJk3cWWQwdQkx51PNUazKKSbpDyfEdItE0oMXAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-l {
|
||||
background: url(@/assets/v3/bg2.ED2KfGoJ.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABACAMAAABvC9RJAAAAAXNSR0IArs4c6QAAAoVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYHh4eFxcXHR0dHBwcHBwcGxsbGhoaGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGRkZHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGhoaGhoaHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoawUAFEAAAANZ0Uk5TAAECAwQFBgcICQoLDA0ODxARExQVFhcYGRobHB0eHyAiIiMkJSYnKCorLC0uLzIzNDY3ODo7PD0/QEFCQ0RGR0hJSktMTk9RU1VWV1lbXF1fYGJjZWdpamtsbG1vcHFzdHV2d3h5ent8fX5/gIGCg4aHiImKi4yNjo+QkZKTlJWWl5iam5yen6Gio6WnqKmqrK2usLKztLW2t7m7vL2/wMHCw8TFyMnKzM3Oz9HT1NXX2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fL09fb3+Pn6+/z9/kKeQQUAAAOySURBVHjarZb5X1RVGIe/ICiorBoGGSSlIUtkYxZFSWakhUtESFIhZmbZHgUFhYGtKKHYRlKZlCmoLGVZsgYoiwhc7vP39MPMwMw4M1w+n56f5v2e89x75j0z9x7JBwk3aE4s3NpoTtRnB1sW7v54GAD6ylKtzF++twOg5bn9FwBOF0b7nx+S0zAF9FfcISkg47MRYLzu4Xk+BVvVFcD4etN8Z7I49wRAd0mSt/mxHw0AnC9e5p7f+vrfAH1PR7rnCzZ/awCXD6zxcrHAB2rGgbHD6wOnszsrBwGTiRBfS37K3sFLb6yUpEVF5wDaXniZMZ/fchukvdkJ0JQXqHRgqHqt9Ix/JVTzsmqvAYuVDsWhkgVFUtQHDiVdVhXl/H9KRP5rBTFzUh65AkxsmYOSdhWjfRIzw4pi1NTU1NR0MJCihIs0WFGcVEp6ka7ZlU0/2hnmkKRSK4qTVzGKEnOvUWVdib4IQE+CdUWxjSacTJUUv79y981WFGn5ulWSVDgJjOdYUuxkmYycGsNcY135ij9iFN9NQ0rKXotKHy9JKnVslj8l0eZ4YPxOlaTaWZW0n8H4ZqkklTH5fPorUG2z2Wy2QF/Kil4A2sMl3WjfoHOuTyMvyidcy719n8keSYr7zmCqNk7+lQHeklTPT/ZyadIS95Z4UQYpknSQM96b6E05QUesUi9TYV3ZAOMdBqPJ/pRkWOuS5RnA0EYfhp6A+VoG2a7hLfBFpC9DuxmSgqbY6RrOh+0+DVXQIamZWutKM4cllYPhil1ZYXgFCiRl4cl2SYn4IFFSYD9n891YZVfK8z3Z0ctvkqR9mHddt+hEyLwu3AqPSZIi/qXJkhL6Dy2O12Uh5HmMRr0H74d5hO/Cg46Pwc2MrHQbTBoAOOv2u1emyZGZGWOcWegyGPQXk+1/wveuRmwn3S5/hQKon3mp6yHIlnbD6pls0Wmm1rteohrKZ6piBiVFw4aZGx+DXW7rDDoO70xXT2LES5mwbnq8Dg56dCP8VyhxFktGacvd2cMl52KD66AuyLPpEafgU2e6wwQYd+5M+HE46uUIGNkEDc6tePQXzB/ucRRxLfCl10NjyFFone7RwukOZvRAWYC8ElgOI1s8woA9Bsaz8sm2UTiwwDWJOga998sPyW1w3uUct7ETTsbJL2G1YLztuFHU52CWBmk2cvqh9V5J2twFF+6bVZAUcwQ4dNPqRjA/XGTFkPR4F1w1oDXDoiAprGQChndZP/NL0m21lTFzEvzyH16BnDy4upTwAAAAAElFTkSuQmCC);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 25px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2CAMAAAChp3phAAAAAXNSR0IArs4c6QAAAfVQTFRFAAAAAAAAAAAAAAAAAAAAKysrJCQkHBwcGhoaFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGBgYHR0dHBwcGxsbGRkZGRkZFxcXHBwcHBwcGxsbGhoaGBgYFxcXHBwcGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHR0dGRkZHBwcHBwcGxsbGxsbGxsbGRkZGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGxsbGRkZGxsbGxsbGxsbGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGBgYGhoaGhoaGxsbGRkZGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaY4gg2QAAAKZ0Uk5TAAECAwQGBwkKDA0ODxAREhMVGhscHh8hJCUmKCssLTAxMzQ1Njg6PT4/QEFCQ0ZMUVRWV1hZWltdXl9hZGVoaWprbG9wcnR3eHp6e3x9gIKDhIWGiImMj5CRkpOUlZaXl5ucn6KjqKmqq6yvsLS2uLm6u7y9v8DCw8XHyMnMzc/Q0tLT1NXW19jb3N3e3+Dh4uPk5ufo6+zt7vP19vj5+fr6+/z9/hUAYDEAAAJLSURBVHja7ZT5U9NAGIa3UhU1guJ9At7We0VRxKNFKd7iiUXRKpcKKFYBUUSJWm9AraC21pLk/TudbLYtaZPSrY4zjj6/9Psm3zOz+35JCbGncNkckhOregG8KcvB9CpgNOeJmi4NH6tcex4DXkHT8QpvCwkhznZE5oqpxQBlxTxgn93Q4m4rngM83VEMW05sJaQUNkw31JDNYzdTO5rS6EmogwimP27SuFqafo0dCfUZLlpcM/b71WZV1QDVANBU9V22amtaJkPZq8HDfr97P6Pef7pDRL1r6mv/AfWy0peVOn+nx+OhRePVq+g3qSv3ejzuzVNT1eoYW2C40lbNbzd2/Hq5WXVp0KLRKDBWbKfWAUo0GgNeOLm6AlgvSX58XkAIWRrGWUm6xdVtF6rZ7xl8kCTpE9qmEeI4CKyVpB+6upG/awE2JRuNOWF+UlTozezk9xpXjemnmdTdejMrqa4Gaih9YFzLMYTblPamqJcwQun27zimNyXAKUqVZExVwB2fz9cNlOsxfX0ynhCL6T6+Nfp8DYOIFJgSntLPz9E1ye6jKwnz5lDKXvNPdMmyfM87mRBS2ZBKrX7URdf6ZHng5pYJ/mAm4r/6R9QNwGhIGNPrL4qbkDXAlePCKH/rctbNEGaMq7km/AtqQZkV54EjrNgVQZvlxEK7GK5jmFc3EBQKMG8E9bwsB5aIqC5gEy9nxlAjotbhizNed+KhiPoejYn6ALSibJyKgM4jYCAQpwd4yYpzmdWTGTbZmVmlLQatLUni9dGU2Z8vQHe3JjoBkgAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con2 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGRkZGRkZICAgGBgYFxcXFxcXHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaHBwcGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoa7LJWmwAAAMR0Uk5TAAECAwQFBgcICQoLDA0OEhMUFRYXGBkaGxweHyAgISIlJigqKywtLjAxMjM0NTc4OTo8Pj9AQ0RKS01PUVNUVVdYWVpbXF1fYGFiY2RlZmhqa2xvcHFydHV2d3h6e3x+goOEhYaGh4iJiouMjo+TlZaZm5udo6SlpqeprKyur7Gys7e4ubu8vr/BwsLDxMbHyMvMzc/P0NHT1NXW2Nnc3N3e3+Hh4uPk5ebo6err7O3u7/Dw8fLz9PX29/f4+fr6+/z9/h/1AioAAAL8SURBVHja7Zb3UxNREMcXAqggIE0pig0VPRuggAURRUBARUVFBaUJKCLFw4Y99oqosYEUEQtEUBCICSYk3z/MyeUSknjx7jKOozN+f3l7b9/nbm/fvp1HJKhpDMMwUZzpF8swzHySpWyY1bacJtcbzdZzd3D0BR23GDJxLvgcIHMAV1fID96i9zgGpJK76sF5IMVdet6Y+bdPeshAvOPiAnlzkdaStlqrb0lcpBgeCqyzWIqnGNo5c/VdIJH3daFCOr4Q2ExEvl1g3cEzMT7FPNZB5Q6ej1FuLEP3H8N99NhmxU1fvhm+D49acc9h5IvuXAteBnPGEVjVb/EUAfGi+Fpg6JZSqXykA3RqGPoAfLimVCpbgRsSKuiAnv/oeOWkIqhpVYc1iofhgoBnnoNKLrWoVBro483xqon82oDXqic32V0OyxbbChVCOkg8TtMHhPwFdrjR4CgTBhQ2nPIAJ7/BEc9y+p9elNMEHgJsclow+Cvc24RsLo26d9zzV+yTjockbnD6nBqNyQsUkvA5d7jMbLVfPGKeGdwuAZ/Bp3mvPT5umSsUx89Bmzc7/A0a7OgYICs8vhljUaL4J5QRUS36gyfwE9D5E4UZkSGGBwHriWipCU22pQkmNJrHbpSK4SH8eT8DVHhbpla+xegs5/Mugge8AlRJXkRR1UaYUkkmTmEPAGg6zOdVk0ZS8Ylm5bO7l9stY9NckowHsGys1VYk5FceSg+yIVVsirSaF9dfjEdXOStDDp7wU2u6IAdf1uGsun8ndf9x6Xh9ukxpHHA39Ltw8nVHfCNlDhcLa4+lz3isceEvzlUQBWpdhqc7uz9tx9F21/EXEoUBIz2CGrfdrATdH8F1zntoEd7aqPLHn6Fvv5jsKejeAjBElAPEuKwOf4VL13W84FqzBjUkX9FG/sbBQhspHz8NTShnRGhwP0AunWtCCW8WAc+SZMGhNUDnVOtTKYCOy6xUnWrWAq0RE2/L6JRZ8PqGYPtovDZWX2mWqttsgfWS8wOVDhPNZXeUuAAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-l {
|
||||
background: url(@/assets/v3/bg3.DKgYKiLO.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA4CAMAAACbrRsRAAAAAXNSR0IArs4c6QAAAmRQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVJycnFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcGhoaGhoaGRkZGBgYGBgYHR0dFxcXHBwcHBwcGxsbGhoaGhoaGRkZHBwcGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZHBwcGxsbGxsbGhoaGhoaGhoaHBwcGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaM9yYTAAAAMt0Uk5TAAECAwQFBgcICQoMDQ0ODxARFRYXGBkaGxwdHh8gISIjJScoKSorLCwtLi8xMjM3Ojs9Pj9AQkNERUdISktMTU5PUFJUVVhZXF1eX2BhY2VmZ2lqa2xubm9xcnR1d3h6e3x9fn+Bg4WGh4iJiouMjY2Oj5CRkpOUlZeYmZqam5ydn6Olpqmqq62ys7S4ubq7vr6/wcLDx8fIycrLy8zN0dLT1NXW19jZ2tvc3d7f3+Dh4+Tl5ujp6uvr7e7v8PHy9fb39/j5+vv8/f7mLvP7AAADPklEQVR42r3W+V8McRgH8E8bSki6LJahcrOOxaZylVhX7jORW+5jkVtCypkz951io4RUrpBVn3/K6/vdZq9se3jx+WWe3X29Z78z8zwzgzC9DzGYTJ3RKnr6ltLIgCkfRf2BmrwueImwT6JbUz28JYXcSj6LCYz2yCJLuwdGkUmWaQOjWE6+6BkYxVLyZa/AKBaRFTq/qXGQyMZmvtP6Sx1Z9L9oxEg108lkv6gj8eTo1jRu24WC5aGimmrOAjDYbO4kV5t388xcTVs0rUEcyDMxW7l8AGAKKYZlmzzAS+0808h6fjpbTJ4CcIAPAUwmo4GxZHleCbnSM00nBwFb+DUY2K/SGGA3q8KA87zumWazBkASqRP0EYBJkhaxCMA6vvNM1/A9gPFkH2CfSmMFLbTv2CMVPyaSiqCPAUxsoUWS1npbsFFSs0q7A4WSrm6LLuNXjXpBzHwCYIKk+bwGcfosnuloclNUXAmrAexVqVbMd1OGdnwtCzzToGJbc8+X9Kmt57VAeKX8+ufQNrop+hzJxlWi3KNSMd8Jd0hWJ7fZw1BSjRGy6KaLBdBR1ytYfuybMqSlDZF8i7xrCGRyNsjFN6/wnxqaWbZjTyWtw/ym+awMByJrmOtOgxSnp5k8XLeUcpfYnGCJKw3Z8oUsT5G1JrOOfDNDlAcbrtppDbPFZjvLXOlJ23VNEnWOrc6Qf3HLGx1OFiSmv5Z9FPuLxUmTHrJeAxxXaYSi1HGnoijKUb5SlHAHXcjvIYCJzV3lkGuBMWR/QW/b6BrXJ/ViB13rNK+zyfZAgmycY96pbdQTVdpB9pxB0Dsq/ThvQbrRaDROW5BhdabZTqM+S9I4SY84aI3jMjW60lr7qM8kQyQdI+g9Z6rbvDnKnZrYFCsG3hoqb6B6II3sDRx2paPIAe5U18jS9XsbeAVAl3pWbdxaz3IIet8bxQp54j7Hi3pak6h/iOk65APFhPNvn+e1vCuMLKyynO4v71kXc52pvqKiX2vqJZ7P8L+lX+bY80vQKWSqj9S9EU2k6V9TTXuRgeQ4WWiAEeQI/94lDIG/hjjTaovlm9X6weJLqlypn7FTbY7I5Rs38nN8TG/8dX4D3Yb6f19FH58AAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAMAAABxwuT6AAAAAXNSR0IArs4c6QAAAtxQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaAklNYAAAAPN0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8hIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCREVGR0hJSktMTU5PUFFSU1RVVldYWltdXl9gYWJjZGVoaWprbG1ub3BxcnN0dXZ3eXp7fH1+f4CBgoOEhYaHiImLjI6Pj5CRkpOUlZaYmZqbnJ2en6Gio6SlpqeoqaqrrK2ur7Cxs7S1tre4ubq7vL2+wMHCw8TFxsfHyMnKysvMzc7Q0dLT1NXW19na29zd3t/g4eLi4+Tl5ufo6err7O3v8PHy8/T19vf4+fr7/P3+kWOxigAABYhJREFUeAGlwYtf1fUBx+HP4QAKqMecXGTesaHmLR2zxgrUHLZNl6tBbmOpqRW2spWmxiJza5QjlZxpXrAyZlhu4hR0W5tMWYkrFNwmigKFcj0czvsf2Ov7+3HwIAeh7XnUM8fQ0ZMnjnTpS7t96e7TjVjqTmxOjVafjVrzKV15i5a41BfDtngAzrzx9MI5M7/57bS1ey4DfL6qv3ozMLMR2oueitMNjpkbzgL//kmQbumhq+DeFKNuph4E/jFJPXNkgjcvTgEln4Tr89WTiP1QnqCeOBY14H1WgcWWQuEQ3cKUC7A7WAGElUBOsDpNWZ61/dCBLWvTh6tTVDHkKIC9sEo+M7Ir6VSyZrg6hObDo+pmNbyhDuPeBnBXnnj3QMklL9D88mDZIkppS9ZNvuulKFSW4I1tULd9Qbgs0YsPtELdItlGXaV2pLroV0FlpCy3HYaG9QPkZ9ROL2wMkiWxld3q4kmYI8vYzyA/WjeZdhYK+suShXe6/Ljq+L0srrPwokPduD6AXbK4ajksPxvwTpMR9AEsUSDOHfBzWTJgrjq5mnhLlrWwUT4RU+fNnuBUh9DjeJNlhJ7nuDotgUkyYhv5MEi2eQUtALXbJ8gWfZG/O2Q8DuPkc5RzsuTiHiPLsMP4eDaFyrII0mSMhPXqMMjDr2SM9fCaLHdchHPPzRw+Zk52PRwbJCPoNOccMk7xV3X4Dtwj4xnckTKiLtD+bIgsQ/Pg/SAZCyBBxlo8LtleotYp4wSHZHkX74Pq9Bo8JqPfNbJkTIW5suVzWEaMl2UyZkKWbnAWcXWAjH2ckeFs5QnZzpIjYx6MlpHL1Qj5SYA0GT+FcBllvC7bF6ySsZj2YBmXyVEXZeyRMQviZBwkXzYPS2U8T7UMF6TKuPNkwW0yNnNKRjx8S0YehbKEwSIZr3Naxu1wr4z3ktY9LmMdl2QMhgdlbOMvsjjhERkvUy4jFu6Xsbqg9B4Zv+RTGSMgRcZOjsnWRIaMDJpkONt4SpakibK8zxEZCTBFRj4FslXxCxkPwWAZRyiWv4HNPC9jAUTKOM4u2Y7ytowZcJ+M5ZAkP+tgoowsrjlk1LBetq18IiOomhwZYf+hfIg6faOFd2QpI0/GUEiTbRner8rI5aJDxkIoiVWHxBo+HyNjHKTJeBjGyxYPy2TcDwtleQFqnhgkSSNeddN2nyybcA+WsY/L8qnikAxnGf8MlmWlB1qL9+4vBWqTZYlzs0VGv2vsks8ruF0yvgfLZZteiM2TGyvbOzQOk5EC8+UzDZbKUkTz19Uh/pm3jny4bXG0OqyATFn2UhOiTse5FC4j/guqYhXQ7DZOhcu408uLuiERVsuS0k7ZWAWQUk/1CFkOU+uSn3zqI2VZCXWz1M3P2mm6S5a5kCF/4z1sky29Fc/mGHUx7Q9QNUOWsI85H6outsCjst19BRqy7pCPM2mXFz4aJlsepKqriNO0JcsW9Rs3UJ694oG77k198s1aoG5lqGxrIFc3G3mFurHqELenBT91L7nU4ftejoWom8RWKifLZ8APdla0Alw/80qSUz4/bKIiUgGke7m+QP6+MulrA+XHkQn1kxXQAw14n1PPIvZD+Xj1YEol/DFBgTlSz0HhEPUoqgjYF6cAZpUAOcG6hZAVV8C9Y364uoh6pBAoTVEvBr7QADTlp8eHyDJg+tPF7cCFHwepdzF/wtJWUVr8508uYcvpr74Y3czftpZzQ/vJX9fwcbD64nc0j5FiZy/fkPPmb1/NTL/bJT0MGeqDebBe3RylPka96vcZFWHqZlIbO9Sr1TBfAWRDonoxqpGDCmRQNaVO3dp+WuIU0I/gMd1keLa/9+Cj7B5U0bI1288GaTr/q2vShLIuLv6rrEfV58v8ndT/5b+wy5acLtE3wwAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA8CAMAAAAAPFkHAAAAAXNSR0IArs4c6QAAAk9QTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGhoaGhoaGBgYGBgYHBwcGxsbGxsbGhoaGhoaGRkZHR0dGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGhoaGhoaFxcXGhoaGhoaGRkZGRkZHBwcGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGRkZGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa4vkYlwAAAMR0Uk5TAAECBAUGBwgJCgsNDg8QERITFBUWFxgbHB0eHyAhIiMkJScoKisuLzAxMjM0NDU3ODk6Ozw9Pj9AQkNFRkhJSk1OTk9QUVJTU1VVVldZW1xeX2BhYmNkZ2hpbG1vcHFydXl6e3t+f4CBhoePkJGSlZaWmZucnZ6goqOkpaipqqutrq+wsbK1t7i7vL+/wMHCxMXGycrLzM7P0dPW19na29zd3t/g4eLj5Ofo6uvs7e7u7/Dx8vLz9PX29/j5+fr7+/z9/hwDx/gAAAMQSURBVHja1db5X4xBAMfx2drY3EcRKmfESrnlyH0kFLlyE7mv3Lco5IxCtI4kZMtNrsq2nz/Ma55ntYfnyuvl9eL7y8wz+7x3duaZnWdEpDM40cJynASnLvWPKU2rW0EzA37vLDccjLBGh4Ez8LpPOdy0NuBQKiJPw3OnFToTZoY05Xrx3DlvkmNCZEJm6NdN/45pXmlTsbm+9IJhHuhSEW4yzI2SLtKkZvlvadH2VucKHxX6R/mq0NqqVuc1X/65Ge6cMClrwbh+jlZSW/KOCt90eK6vi7dObRmPgmezeJhFOqYM+HAqa3Rc2w4DU9de9YD3RC8rdK0H7s8O2J66rK8D91hTGnEIarLDgvvouKORhuUm1HYGbvf8fVom1MEKY7oVTms+jngXjeON6Dwv1+zaiyDWTV2sPm33kiddhU7GNlKgT/NglNBNHozUo1GfOKsvRbsaSvToBpoGKBX70Mnd/aTv1L5qZSUM0aElFCvl8vdAYQ+1McUFuFJkNfILW7RpVDOrZLlJXbhP2yvSo/4JFFvIXW26CORK7d9A6cjYTc3skY0u3Okx6W5c8mIpRGnSXGplkcM3+Y48QKUcJ6QLIdJBjjcRRmjSvdyTxS4q1B68diHSIEYIEQNpQojolrdiCC3gYkCvB3ks1x9k+HsNayJHkxZzThb9GigdFZfrZbdvrBm9MnxjFfWs0+m1zNespEqZ4eQm9WySLC86qr/hF/W/JPOpUSvL3gHnfeeJZLlJuRQpEloWqkJnwAz1cg3eNmotPHFSN/9qik/7ta+lQe8A6mw5hoyGKcIwO3kbrkltzzhqKG0vOCyC6ZIUNcf57DCi82GN79b9PhqQHCNaGXKCCaZve+jLaaGHH8dgf+b+4JSudFRRPdx/76CQj7dDto4MOwmTDUbjeEhzlvbsHoYjhvMfV03zYo32hBtQZBfGtgbyZCW/WnnI5dXKzpEPl9sIk8yBiUL5M1ySRS25Qt0fOplJkQKDA6hbpdlg/8t0YVJSUtIVbsniDftksc0i1c5fpZFDdWIzpdbzE3Z4x2LkwqSqAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con3 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA+CAMAAAChgZ0aAAAAAXNSR0IArs4c6QAAAspQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGBgYGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaty+CnQAAAO10Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGRobHB0eHyAhIiMkJSYnKCkqKy0uLzAxMjM0NTY3OTs8PT4/QEFDREZHSElKS0xOUFFSU1RVVldYWVpbXF1eX2FiY2RlZmdoaWprbG1ub3BxcnN0dXh5e3x9fn+AgYKEhYaHiImKi4yNjo+QkZKTlJWXmJmam5ydnZ6foKGio6SmqKmqq6ytr7CxsrO0t7i7vL2+v8DBwsPExcbHyMrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4ePk5ebn6Onp6urr6+zt7u/w8fLz9PX29/j5+vr7/P3+lBpGjgAABH1JREFUGBmtwYl/zgUAx/Hv5jHP2OaYNYtoLETMNdcsQqzl6iBnUWIlcpvI0ZAZJaQtR6FSbQyJkjRjWHOFlmvGhrU9z+d/6Pk91zbz8uzZer9VLebWEX6qqUYbCuH26kDVSPcL2J3tqBoIPEvpiucHr7GQZVb1LcfaTzZxME/eatwivFXrtu3ad4j8h82y20mWvLWdMhNkN41iH3lpC2WmyW4+d+StVI7ERPfq0b1bl2wO+MrG9DsZ8lYK6XKYAMtMUp1kGCpvbWavnL6Dk8nrcmCbvLaJfXIK3ordxiB5bQMH5Bb79ckT2waqGtZzUP+DdRzS/yCZX1RVjfuPm/vB1BGRqiyJI6qSwMlppTicX9NND1jNUVWBaeIVbCwXcwoxbG+jClZyTJ41+xXYOzXCJCloUPJVKJ6o8hLJlEfd/oKMKLkFzCmAZJPKLCdLnjxzh9K3VEHz32CtyizlpDwIzuFOPz2g7k6Il9uHnJYHu7DGqZK6h7F0kMsicvRo0ZCghwi7wbXdP6TtyThw8OfDl/j3j6yTp878efbchUt5127kF9wpul+SO8VHLj9x3qyHicezb0PkEAnj5dCwX2xzlfG7zLnUlC8+3/jZJ2uTVq9a8dGyJYsXLpg/d/bMGdPfezd+yuQ398HFGNnNpshfhoB12KS3lNtCbpv1KLUSLFjm1ZLNIXbJUOcodgXhcukCA/RofS9Bepiku8TLsAASnwyZVEiG3IqYKg9Cd8PpYNWHYTKcJ0U2E6GFXLJZKk9837fwjlpDb9mEQKxsGsFQuaSTIo/a5DNfERAjmyArL8umKfSXy0HWy61tVF05Ne7zlFxibnK/o/xhpAzH2V9L0hIIlUsuCXJquQ+ujpLBZ9Zd+KaZ7EYXc2+EpOvMkmEs7B8+aBNskIv5PpPl0Pc6hjV+UtBODPmvSvJJgGu9ZPM9+2WXgl1mA7kMhC6ym1pKcXyf43CwacRx+LHT7GLYGmxOhexWMkzC2kR2Y05ZubjELLdPudyufYfIzl1T4UpPKWAr3C6CVSapUyZcPAR7GskuzMoCOQWFqZzQe7hZmskwrQTujZXBvNwKbPaT05cUPa6HWUWZYjm0mTMzXE4xublvyy38Pjt8VFl0CTt79ege1bVzxwWUyqNFsEiVPJFHXhM5vIFVHpl2w1wfVfT0GUqi5TQe5FmDLPiqocqLu4X1dbmMBV951jgNbs6oJ5eoNCgaJrfRYFIVmBItULhjQkzbpl1fWHwKyO6qMq+Bn6qk/S7KuTq5tsoZCf6qog5zDlsx3EoZUk8VvAL1VHUBrXoOiAxRJS9BoGpuONRXzQ2BhnILGTzqWbOqIQ6C5VR3tQXIHyfvxUKIHB7LxmGLvDYYQuWwFZLaB/XOgAny1iAIk10MzJGN714K/OWlgZC0dHniyo+TjpJfW4Ye0E9e6k+Z/bKrB2PkpV65OaezszKPHT3yN+dk1wZeVLWNhIEyJGJtomrzP0HeAMl3uoVk1UC3EshJvw65gaqJ7icw7ApVzZhHr9+24jlV8B9T0a94882ZyAAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-l {
|
||||
background: url(@/assets/v3/bg4.C7YndXK7.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA4CAMAAACBkfufAAAAAXNSR0IArs4c6QAAAjpQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWHx8fHR0dHBwcGxsbGRkZFxcXFxcXHR0dHBwcGxsbGhoaGhoaGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa67X1NQAAAL10Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcZGhscHyEiIyUmJygqLS4vMDEyMzQ1Nzg5Ojs8Pj9AQkNFRkdJSktMTU5PUFFSU1RVVldYXF1eX2JmZ2hrbG1ub3JzdXZ3eHp7fX5/gIKDhIaHiImKj5CRkpWWl5iam5yen6CipKWmqausra+ys7W5u72/wsPExcfJyszNzs/R1NfZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dy8/T19vf4+fr7/P3+eSKkTgAAAttJREFUeNrtlvlfTGEUxs9UktJiC61SokmkhEoIKVsSGWtCkZKKbJOiGU1IWZPQokWhzTRpaJ7/zae578x9Z+beWfj4zfPTuc8935n33nPueV/yV4qKIaZ4zlQwL5LzgkgJUa0WbJwzfZn3kPO2S2MT7mAHhX9u5rFqwbvIY+2Cl8kwpeCr+UWeEYJ8HtMJQdh/TA5rVpvVzRdAChsS8ppky92kyxWCbTqdj2S5Y1pF1RAvL2+byzIucQNJyjvt2ouBn7+GXtZm+JK7mlc0Iq5nvHiBe1TaRwDf7pcWFly69xnA4C53qEIj8GQLey5FshYwFbumzgNfdvBGah9Q7Yraa0JHuK217Blw1DkVoUfPEntzYQeMCU6xBhjiHN3wUTy2s0JPWZVDCSZckfo1FZBBmWJmBN9cOqrFaLAU5tuDJlLbzZKpSUEaxQDqpBdfBr1fHUvT2344ROvmDEklzq2SKcwe2wcsksYURhyTxU5gmkVRD5gsL74Pl2WxUgywaL3l4S0N8wo3ZTEVDCxa1cKUxIxesTIOWC4QItMHMzguiyUC6dJUPJBljw33C6r3GkaNNHYBBv8qljZkN4J0dAsjAVKUTxe0tl2yosyqfNoIlEhhBUA25YiZ0Xb3NZiMdqSWD6ONnGn1D3Q6NLPfW8wmO8XoMNAeamsFvwHOkgtVAJ9SeGNtJ4B6L1fcuVlAY50BsWoT8B644QqjnXPDsbfm5IE8VdU7AGOH5rcAlS65gJJJsUTTlSFEAW0ylbGV/+67XXrA8KFhf5DwWl4DKj4j6pGoChs2kG/rpZ0wHSGiInOiUnp/u9PI5v7mxka2v63sxmwe0W1xBD3VmtXvfDeNHIQxi4q02haP9m6K/YrpNI+3fKKECXxP8hyjlCmMrfEQK39+ndJnUP4n55I9V//6OJMdZZaGL0CF4J3msVbB2yR7nPlnh97AraKsAzOVMy0n8zjOW+z6a5DUb7XEj2EfmeDdAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAMAAACycDqVAAAAAXNSR0IArs4c6QAAAg1QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFRUVFBQUEhISICAgHh4eHBwcGxsbGhoaGBgYFxcXFRUVHR0dHBwcGxsbGhoaGRkZGBgYFxcXHR0dHBwcHBwcGxsbGRkZGBgYHBwcGRkZGBgYHBwcGxsbGhoaGRkZGBgYHBwcGxsbGRkZGRkZGRkZHBwcGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGRkZGxsbGhoaGhoaGRkZGxsbGxsbGRkZGxsbGhoaGhoaGhoaGxsbGRkZGxsbGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaino4mQAAAK50Uk5TAAECAwQFBgcICQoMDQ4QERITFBUWGBobHB0fICEjJCUmKSstMzU3OTs8P0BCRkdISk5PUlVWV1laW1xfYGJmbG5vcXV2eHt8fH2AgYKEhIaIiYyNjpCSk5SWl5mZmpucnp+goaKkp6iqq66vs7S1tra3uLq7vL2+v8HDxcbJzM3Oz9DR0tTV19jZ29zd3uDi4+Xm5ufp6uvr7O7v8fLz8/T09fb3+Pn5+vv7/P3+pK9UKQAAAoNJREFUeNrt1utXTFEYx/HfyIyaSqSbRlNpIsklhCiUa8n9FlEk1xAq1yKXhESpUJIQRTPfv9GLuVTUzJlWyyvPq+esZ33OPnufvZ+1ZXUEFybJQXBhmSrZYPirir3EIaOR54+E2mcGSdZ+4e3ioMhGJ9C/ZHKyK9cX67xiiJ8eEzlazT05wSKPeET7Y64OuE1qgP8y4hH2Rioy3WZCkmH1RZhkG6bdrkYqlDlAR6hMo1Xrpkmmn/vaLjVSIWV2LTa4YmHyEIUF8yvdRNNFLDabxTAJt9m8aezqgw03/JJXdbtXzPY+hOScawMYCPFDkgFczaeyJEkVAHRXb7P6IXHFtX0AFEiKdUFbQVLgucxI2/MBeiQlAvQXhgQk4YdGgAFJpl7uD0NTegCS/QY+PuWeJNVwJ/UuOI9F+iHzq4Hzse85IEk7+TrTlN8DnWsmIyGF/dC6TCmwSpKywCFFVwI1CyYk6U0wtDdUyoMYSQofYbMkLW2Bb9vNkqRFRz7RUZIiSYosdcLdVEkqo9X9kkeckSRZigahOUOaU+05b0ctUk4n9OSbJEkPqHKTjIUmzxfY68BVnvQC+houPxyEuuQaoDLaUzenp0mSOT7ePDrR9d3wA8ojJCXchF/QkjlatsbH66/NH1XmgrPu3PQEvhdZAp+X6/R7d5vNxX4jR6yFS778OReNkHeU+PJqbhkb5YIvf2ZslCo6vI0l0clWI2Q5HPGsWD3DiYY6TC2cCJcUdw0OGWtK815Cb/3pe1/httlgH5t7xb3HnMdnGW99GaWf6dqXOn3d8j/5N2TLynERM4YkjS8dnuQ+lj2G7DB2hQtIzAl/RqgkxSRESVLEX1VNJX4DmRADv7Vqo6QAAAAASUVORK5CYII=)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAMAAAClUqpcAAAAAXNSR0IArs4c6QAAAZVQTFRFAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcFBQUEhISIiIiICAgHh4eGBgYFxcXFhYWFRUVHBwcGxsbGhoaFxcXHBwcGxsbGhoaGRkZGBgYGxsbHBwcGRkZGRkZGxsbGBgYHBwcGhoaGRkZGxsbGRkZGRkZGxsbGBgYGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGRkZGxsbGxsbGhoaGRkZGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGRkZGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoa3tD9qQAAAIZ0Uk5TAAECAwUGBwgJDQ4PEBEVFhcYGxwdISUmJykqLzc8PkJJSlBRVltdXl5gYWNlZmprbG5xcnZ3eHx9f4SFh4iJkJGUlZaXmJqbnJ6goKKjpKanqKmtrbGztbm8vb/Aw8TFxsrLzc7P0tbX2Nna3N3f4eLj5efp6uvu7/Hz9PX3+Pn6+/z8/f7+aEnfAAAB/ElEQVR42s2WaVfTQBRAp1AoYhVRRHEJirumtbhUcVesuNPihrhjRVRwX1CpYi33d3sySSbhMJ5mAni8X5I3yc3kvZeZE4GiIoxYgHgt41AyFzPy2BtfrI0YUAiJRpRDYnUoMhNzRIMcz0ux1Otww1yM0UdHrCimzMRYLKrYuF5La12xXd/wPUsnJi3LusszS1Hgm2VZqyIVp8i9IDjMVOSqxhYHuR8Eeb7UEdPX/UROMx4Mn1FBx0Gt2DTKc8/cBxv84ebXDHneJMe0Mx7CN5dPM77CHUwUYavvkdXnGJgH4GmnfP0S3J7nzSuOY8pvq6EfvmeXJXvewSM5d3vYk+LPML+hz72Uq0B1BjiXkvFVeDOq+DRnIbtc8B66+4cTzV5udMOyZrMq5nyOfIZud42crMHX97PwYLUcOAGvLg4EHFWblRBizQTk3Nbcgo89CbF2BN7KKqWG4UqDbkMOe+I4DK+U3chDOak1ldj0Unltv3jc4l3vg53CNwe0M+6oep7YT61D3VDmjvDMmW1aUXT6J2cZC244xaR3lrL0ORosq/9DbLFt+wkvbMVNpm3bXldX/Msut3fpRJHQEq04Rj8PUWjdrthkJHYFOQ/+M3FL2uGSFLPNUdkIm+UTClI0YhHEXQbkw6IJXQsQxx46fDAXgz6akM4oukVc/gDJXaMPEeEHHQAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico4 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAArVQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaHBwcGhoaGhoaGRkZGRkZGRkZGxsbGxsbHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaefXWRQAAAOZ0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ2Nzg5Ojs8PUBBQkRFR0hJSktMTU9QUVJTVFZXXF1fYGFiY2RlZmdpamttbnB0dXZ3eHl6e3x9foCBgoSFhoeIiYqKi4yNjo+QkZGSk5SVl5iZmpubnJ2en6GhoqOlpqeoqqusra6vsLKztLW2t7i5uru8vb6+v8DExcfIycrMzc3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6urr7O3u7/Dx8vP09fb3+Pn6+/z9/v6gHUxNAAAEWElEQVR42pXW6UNUZRTH8d8MKjFkijoTblGampiaqUkupS1ILpVbaWqZK6YilJrZohmmWKhJuZRFmeZuhSWYW9mYikCJbLLEcqfv39GLO+PMMKvn1TnnPp97n3ufu0mhIr5Pr1jdaYzc3wT1Xzx8R8jyJmY0z74TtQluLh2buqoBFkWvsuFIoiT1PgOLo1UfwSGbmTuidpaNXiXZi2BJNCwdDtu8pb0IXoys+hsct/k27L9TY4/ItlJ3v39nhBHFNMvIbt06zNFIygYzJUkxw194fqhVkrSG4kjMAeMlWeeWAhTPskh6napIzA7jpbgv3TcXn8dK86JiaYo7AIXP2B2pZ+Gb2GhYF5gQ9z3ktJOk2O2QH7uAykgsxiB9P2yxmKV1G+R/wh8RF+AM5ZBj9ZTWXKhjV0S2FNhq9dbWXGBSRNbhHxof8W1McPGzJSLT441UDPaWaU383TOykp72deObuJEcjTKde56p0alus9blHb1Y4sK46nRevlz2H0aJ88TuDbO7hTadF/9EyDi1pFNQFLewCjDOHchdnZWV+1Zm5sqVGRnvZq9YkZmTX2gAlfPvClSjr0HLvhmO4BNxTPvKgKsprfuzmmHfQz6NhGEJ7R/r4tNI/hoap/ur96FszO3KNiX3gouUZHDmzbj7dvvJcljlqxbCr909Rc+1lQCkJANwa3OSZ0vSGZjrVc8aHIt35zHz6oHCXSbbUwA0LPNci/YFtDzhUd1ruHKvO7/vR2jIGax+Jhuu/u/Vw1nPAbuWUOm5ap/y7yB32q8YDiZJXib12AM3RrgHDGtmvfsSGaxxNweV02J+mnyYNL2JuiHuIRtp6iVJ2kul+wZI+IvGCQpkGlXDdfftlVjLNkm6p5Gl7j3txZWqYEzjWjjpfnZXcytW0mToYzam+ixLK6ZX4WUzexSekrSDC2bdxklB21DMcoJy81Qs18iW9CfvmFumwViFYhps8JqZbeEXSQ2ehT/NSYVm+o5zZpJOmZQAE82VhCnh2EQYZi4HrrbqB3MkSS/hSgzH2tUzT5KUCV1lv0ZzmiRt55QC2MZF3iglT5LmwOl46cEyGsdKOsKOQOYflyRNdXHeIUnJN6kfKZ1nrQ8bByl9b7SKEqsmGzi7mkOGVFP3iipY4FVDq6nvpYBos7yF4tuPX8otKKzlYz81RlPT/WLzD0VXoKSvdy8DLgIc81cZwd57J3r4Hr3t9PwGfmutakp9w6B2R2rAR2Q51TH+qiDBb0ApWYFnq1EwNJzqC2lBWGwtH4ZRWkddxyBM66nvHFrFV7EpmNIDBm+HVFoBA4MybceoCaUGNrM7uFKXMkKpDkVUJIZgei6Ush0L+y+6+omgynEEMhUuMsDZWo0ugQ1hlSXLBTsH+LaS81wYb0T6Mxl5CTg4s7dZJc3+1gXXRyli2DKrAcqLDh06WwFQtaxjZCWp/dxTLs+DYhyf3yEqJEnqlJb+wc7P1i2Y1Dn49v8BUIfpizuTif0AAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico5 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABACAMAAABm4HQzAAAAAXNSR0IArs4c6QAAAuhQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcGxsbGhoaGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGhoaGRkZGRkZGRkZGxsbGxsbGhoaHBwcGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGRkZGhoaGhoa8hNQ3AAAAPd0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaHB0eHyAiIyUmJygpKissLS4vMTIzNDU2Nzg5Ojs8PT4/QEFCREZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV9hYmNkZWdpamtsbW5yc3V2d3h5ent8fX5/gYSFhoeIiYqKi4yNjo+QkZGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i4ubq7vL2+v8DBwsPExcbHyMnKy8zMzc3Oz9DR0tPU1NXW19jZ2tvc3d7f4OLj5OXm5ufo6erq6+zt7u/w8fLz9PX29/j5+vv8/f3+/vwH9BgAAATrSURBVEjHpVZ7UFRVGP+duwvrZQVCZeUlqPlEfEw5+QgqozJTEx0bzJpMRxudTJ2mJk3/k0zTBh+oNb4gQHECDS0UsVFSBx9TNI6jaKnxRoFdwJUfEyu3Py4Ly+XCXqdvZ+fe33fu73uc75zzHRN6EuvgZ5qf4CnlxewGsu5AzFORxBdUpXHx07C2keVrXp2xrp5caZy1lTwRAgDPXiE/Mcr6hvzJT323FZGrjLG2kLl+bhRslLfak6XyFnhnjXIy3+qpCP6TNcFeadtZO6SrZpLTQJj3uE2ryuUprcqswX6huA4AMD03VLlb3AYAV98Y6o1mBeoASIu/DANQtukHBaiHv5Ym6VQAkNNSwgAg8rv9FkDp/o2kl5+cOR/FcyKj5t3AwlSLaql36U/OlnPIZF8AsOwmsywrWOWNZnJydTaZ3G5fSiGzdvK61wIUsYxM7ohd2kXW8qCRtcXtHhlLu0gmeKUF3KdjgqdiVjMLhfdFOcXBinGdcGYD/4kysgVed7BivBu81cDSaGP71IM3oweWJuqI+CHh4aH+YcJV6YKAPFB6UtNSVVn919nyHmn9F86b3GMI17Iz7Ho0ecn6IOBJSVlljQsR1S4oUBAg18AUGho5zgTYkw61dLP2UgnZlPm+Td+XbWGGk7zVLZhFjWTGqN4mKvow6Xivq24jee9lbzM8rYxc76n4mLw4yHtlBl8hl3bC6U6eshqpqP95Nr3iBoNqeHOgsZUQ/jcr3bO2g/axRvvDxEZ+1T5FTm4w3o22sGEoIIDURPtYu+4ngcstAgICEtSn+D075Lr/gZUAAhxco284sIBauQqs5wMLzIjvg1/0N+yPsbjTqkCBgjYoUDDS+gjI2xAQdxbYyz/0WfnU5nyOWwFRwq0wIxa5AA695rgjICCEO42oYdiUZHa1H94uAGgDACVvxWSYEYZKAGMHDBiu9ff1xqjDm09a0i8dT4hfUt+xYUoRDnOQHx4CaEJFIRQoaiqKAgU390w9Yjs4IWr2bMdmcT7xpvtUr0WIj9kGBAOoRtFSrbfE7y3/flY5H86s4KRh5xLPt3sLh7AhuISNM4FMpmtZQQ0sjwOO8RiQUMd7AgX8FlhCXrJKtbOqfDPi9bqKABTAJw6FgEWCS4ECgXdTcGveYwDR5ayLS2dGN96CBjZ++AI5VVpHVsUCZ5ic4OSNcHV4QjXrLjNT5+JVytq1rLc838Ti4QDyebGJtzta+6QakgU6JY+6ONc2dxmwLCcIAC6TvDuic3h0MXlBb6m4e7QJAPAbeSayy/AFHkVESsoQYGBSft66QGDivv1WYPTeotOfysCc9N3AaeZqjuM0HsEYciL63ybJazLeJvsh2k6SxwVWshQ4xR2a3q2of4EPIlvTshAzX0Wr5MadJ/FmLBS1HkITvAKh1i4G55ZjXPRIFY1H6lqfB/KIC73fFAR88Bh4BF83akZrKyStt84gJdW+4hFyR5MQni9dvXVRu1HHmus0qcmtXVuOKXHmGFSo6H7MrF8HB+ChV28/KyFn8vq25KsoBzEF+1BVqPUmab1d/qgJqFtUoqKjnzcDt95xdEuiXfYzB1K/IDMA3zGjTABMfjIA+I6MAAAhCeAE93TLzSSLFmHpA4Fy9FVPIVlAwA6b+1Ty1Sn3dLuRa3tvF0Pj9KmDoHj/tT24gf8j/wFtkTXADxi+NgAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 32px;
|
||||
width: 27px
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con4 .item-r .list-item .ico6 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAtBQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoa99eAlwAAAO90Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYqKywtLi8wMTIzNDU3ODo7PD9AQkNERUZHSElKS0xNTk9QUVJTVFVXWVpbXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqSmp6ipqqusra+wsbKztLi5uru8vb6/wMHCwsPDxMTFxcbGx8fIyMnKysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9fb3+Pn6+/v8/f7U/243AAAEC0lEQVR42q2WfUwbZRzHv1faCohACxtmRaEDJ25DQNRoFBx/TA3DQIKbMrJsi4uR6HyLiv7nNLLEJRjjNkxkyWQZuswQjZnRVIcvS1QW+aPwB87h7Chv0t4XSZpNurXm7vpyK3ftrvWXyz2/33PPfZ57nt/Lc1lIIfll+YEQMpKHh/ykp3dtBghrLxXxtqTPOEKOP/1AS4+P/vYMGB8WSFrtGP2Pp8Ww9JMHsxR9bZoUy0fkoayo5XRTTIPyLnnYHDedbvoajDIeJPvN6g7nOY5lG4Qc4+/2a3u2kAZdlDvPFxL7zvKgzmizdrfDijHFz3WOq5PjsvprZaUxSA4gSoiul6RAmdz3JQAiTwdi0u4Oy3fbyTflYKsY6DElW7z+QwG2oUYMb3Fu3DmFrgOmCNiAbCTvsp0mu+VJ8gfIXtM7/MkYpJTc/h35SsTM/ph87xg/NQbJOs/z5KsxW6LM8S2D6zlA8jWVnX2U5N0GIbdO01Ou7thJHjGcgC0i3c642SnyrM14Gm9TUzpEjpamU5W2inRHKvSTIkdvQZKQ0pLKhopVpSX5qxCcuyoAeUUILlz2zi6MDS9cJ8TR2bpeb87QmS9OBFJDCrv25gDL5/70iSHcPCunUbjoyiIsxcW3VQGY2/fZlVROmSRn+9oKdQJ5x3GSP9+eFCG8LFJ8vyzZkHuGyIubkwww95G/1aTyWpuX/t36j3vIT+ypfV/tptist7Edh3Hy2SAsBYLcL0CrDU0BJV+XBx4d14Tc6bK6mwNAzffJPsNbDaDKlee5/5JWZeu2ijsCci1NJj7pNrEHZbu0CnVjM96+KCl+4IMzcnhI17Xti03T8uBvPm/rPiGunOJbjloVbYa6mz/IQ4pS5efrK5dTUY/9y4oqolgP4sCSokwMYttKyCYEXbFlF+lBihBdw1dwrl8BeQSuxagDUKAHsUk7JsuPl7A5ESI04nS07x+oUsf6RGPcyMmN+S7gQk0ixH4DZuIQR/y9Zxab6mKGXXoYkXmUJUJWA3/HQ0G1sablYDwgC1WQGaxJhBQj/qYPqgTqc4yMxox8FaQcq7MSC+IFeu+N6K3kTTrVhoyW/DfIwRUHef0UPbWK2kCWa0M66I+8uJc8pfGncd80J+9QMpGs04Y8x0lF2U0OF2ok4C/b/7WfekzSFuXFa4ldCZPc/b2Y2LqokYD4YddR28DIyAVYgfZKVSExxQrKJmQ/D8u6h0rwR7tPVU/W9ceLzo1rzNd5sF1eCkXnEJbqzTnV6ZyO2apfWgvMYeA4E+rGhqIwQkBYvstXCILSzv+VUGfqWwXZFbXIQPbQA1MYmYogu1jIBBFO+gtqQKSN7WxKcs6kajdAkIPtqYy/JDirdTQYaMPE/yL/AQn/nlzVMLtOAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-l {
|
||||
background: url(@/assets/v3/bg5.EqAxWS0a.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcFRUVFBQUEhISIiIiICAgHh4eGxsbGhoaGBgYFxcXFhYWHx8fHBwcGxsbGhoaGRkZFxcXHR0dHBwcHBwcGhoaGRkZGBgYFxcXHBwcGhoaGhoaGRkZGRkZGxsbGxsbGhoaGRkZGRkZGBgYGxsbGhoaGRkZGRkZGBgYHBwcGxsbGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGhoaGhoaGhoaGRkZGhoaGRkZGxsbGhoaGRkZGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGxsbGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaYKSRzgAAAJB0Uk5TAAEDBAUHCAkMDQ4PEBETFBUWFxkbHB0eIiMkJSgpKiwuMTIzNDg5Ozw+P0FERkhJSktOT1FSU1RVVlhZWlxdXl9gYWJlZmtsbW93eHyBhIeIjpCRk5SVlpeZnZ6jp6mutrjCw8TFxsfIzNDR0dTV1tfY29vc3t7f4eLj5ufp6uvt7u/x8/T19vf4+fv7/P3+HFNa1wAAAi1JREFUSMft1vlbTFEcx/FPqQxG2m6MZQaNpGiUiazJVoRsyXIThWQZIaJl0rQwTNP7T/bD3CbPjOiebD/0+emc53tfz/O9555znyP9JLlWoEhmCdgxYOhKoXuacylJKrE61/gGzNxsrmnthmTYpT0MfVskSaFRpje6srnvGFnvjPfMcccVroZD6cltpvLd4IskPelJPexygzsZWJhY0OAG36VvYeKBYyv4z+BK27btQcbtdLqg17Zte82v8VEWy4Yl4Uc9b6Lve9J5GI0+7Xm5VPyj/sJ/Fa/aGd5sigPPgHvrjLBnCIAuI3yaueNFt6DcBF/llVQOIRPcSny7WmCrCbYm+ToKj3OMVrs+BkR8ht+5dIT7+cY7LMI1rWAX2NpU+G/OsxFe1g/QHPvOLpYC/T9ZGzLOXlVgnIll4/2WSdpTuMJosS58h/1hqaraKZwpkc47FzHvOck66RRqg9IRXyb2jyUaq6amU7qNSHEHvR5J8vbTbg3SkrqHxmPB5uSwLwsz+5k05iMLmBhpzEySLCz/BMTn224Dnsy3/Zx5K9UmYCyrbVXNwGyj80wHMFDi/BDeAu1OoXkOJoOZuHKKTxMkUnfM6zAEkUJJKh2ED3BZknQiyfgXYjsycNnr6Wr/WDQgSWpK9nra6M6TpIIHtHj7EwclScHYsC8Uf1GU2XbZbskfcLqr80gNealxwQHJu88pBH1STXHWO5tuklOVJun8DQfDHK8OGGfbN0W21rQF0iFVAAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAMAAACvSe/GAAAAAXNSR0IArs4c6QAAAORQTFRFAAAAAAAAAAAAAAAAAAAAMzMzICAgGhoaFxcXFRUVFBQUHh4eHBwcHR0dGhoaGhoaGRkZGBgYHBwcHBwcGxsbGhoaGRkZGBgYGxsbGRkZGRkZGxsbGBgYGhoaGxsbGhoaGhoaGhoaGRkZGxsbGxsbGhoaGRkZGRkZGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaTYzvEwAAAEt0Uk5TAAECAwQFCAoLDA0REiMnKCkrLS4vMTM1OD0+QklPVGRtdnp7fH+DhImKi5CQlZydn6Cho6WnqaqusLK0t7e6vsHCy8/R3OLm6/D5JIZOigAAASJJREFUeNrt1VlPg0AUhuFDB9z3VlzQ1rpXxaVYtVqlo3X9/v//MQykAk0snKGpF76XkPMkc0IYIlXF5rVKUR/g9VUg4DIO0IgDu5S/nQCYcYI+ce7krBwBNvP0uC8Q2J7Pnx8HbMb+HooGFlqqAyLRGt7iILARLkYSWRn2tzkIrPiqUyLhD688gh1oA8sd1Qkb+FkiE1i6Ux2Nbwf/QIaByta6HuClvhFtoIvnavVCA3jtXyzjAh7RmQ3SW6LKBg5rYWfNq+ZlLZWTBNaix7048Gs3SeA4frEUA1CpnzCFKUqpjCRgpF9kzcvxt/qDwMS+FQL1Od78E9qWB2m4eGEJ5i3QvoZ0ATlNXOEN74CcYi4hEKAxHwka80Tmnt+YpJH0DZhq6TgD/Ay+AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con5 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA6CAMAAAA+5Q8xAAAAAXNSR0IArs4c6QAAAt9QTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcHBwcGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGxsbGxsbGRkZGxsbGhoaGhoaGhoaHBwcGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaHBwcGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGRkZGhoaGRkZGhoaGRkZGxsbGhoaGxsbGhoaGxsbGhoaGxsbGhoaGxsbGRkZGxsbGRkZGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaU0yUGgAAAPR0Uk5TAAECAwQFBgcICQoLDA0ODxASExQVFhcYGRobHB0eHyAhIiMkJSYoKissLS4vMDEyMzQ1Njc4Ojs8P0BCQ0RFRkdISUpLTE1OT1BRUlNUVVdZWltdXl9gYWJjZGdoaGlqa25vb3Bxc3R1dnd4eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbn6ChoqOkpqeoqaqrrK2vsLGys7S4ubq7vL2+v8DBwsLDw8TExcXGxsfHyMjJycrKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP19vf4+fr7+/z9/lcEE90AAARdSURBVHjarZdrTFtlGMf/pzcKQ6Bchs7q6NgG0zFgTGdMFMY08EHZmOhQYdGImWZL8BLjNRpNRoKJUwwmG5sBs1Uy1DgZH3TZhjo+zIVEQz906ibhMu500P7rCMXWD6eXQ3vOaSs+H/o+z/ue8zvvcznPe6pFFEnJSXF7sSKp7HaSYy3rZJZ0MSIMLRRlsip8Sd86N7orJsYX5O8vPlDVPE/nE2GMdpKu2tgYx1MBoPgKnXsjGLFQ9B3kEa2or1tO0beT58hwtAyjnTyqDVgWO13BG4R2sm0vudFO52OqkI/INkkCLHbOlwaMF9imqyETLPbhAjXGg2THsiRaBnnFGDAqdKghE2BRZaCTf6Uvn3mUlKaohkwI6Bp5RlIFWh3Lp85cRbnCExXq7nYDBsQ8l5iXrtoAAJfWb4gPkgTMAjAcfDUVwLV3vwPgQLICRMEdHwDA9O0HqQCQa23WqAVQeVGA6UwpLlSa8+pGcOCwxg+ObycaU3cRmnb3zV0/vb0bDR9rtCoYWTGT9T+Tr/tNo5X8tJNfK6RYQbRDHCLfCNpGKznLQ/FBcJjkmxLbeJLkvfEVGz75G85Oib1wAfjmcryNscpFuyVk7nPxNxPidAd4Ukqpc9FmRvwQ1Lpo93fop1203bF8taSpSRcqKTlZX5a72nxrShY8E/8IQHIGPNMLI+NTtnPT8nUZ+fLtq75LaXfei6e/dEeHpB1sTAQW/7g27fDitjHAB/gyluagz8zamA9g4r1TS9GSMkzOHNuTplDIz5wi2Z+vihBec9H12Vq1S7Z3k+MVKhfojpEDRdGytmeSzgbl5Wbyq/Toud9ip+sRpcDWHUHXfg/0qQIgAALkRu8IkH0+x/2QTRZS2GsYeNgNFPWpbWM0H8Cm3uShbTflmtJbBketG4BD1ZcZALA/i7XPye2krAeNnwPAqkm0XIRPrJCw8ZXyHvEQP1E9XyDztJ9oM4jaNBWD38WjorLJybcj3cktwaFFUXUgU7FtYl5U7FbURkJ2wvN90O0MJUhGMGI9sNwdAanE2Tm/OoI0JYgJs37tx5uoCIcIpTgfmJuXQgxPlYWMxCTc8KvusygKh6Qn4Hpgbg6SJnbgRvnWoJEOBLaLCeSEQ7KBqVApSAKrWfRoJN4EAguMYU04JAuhO2cgeYFazb/0B41UBN1BDlZrwxviKCfv8+vV5C0K3YYMtPx3yK6I8+aeCY4Vi2opmSMPqaPTf+NL5A8yXxr3T3FY7K2F5FZ5SCOHRaWB7JOtgx2zHNkFAHeSO+Qh7/NXAEj6kOyXBF/ypdRbf8JkvXxpEAbg8Q2SRqIJNpRyGF+GPq8sG39WzUje4ryOUNNZtSbWvw4LTm/gGYJziy6xAP9BjMaQrofOB5x0hPWNzZk+eAGv+At44YUgjpODYX1m224BKCSLsQLZzzFofFipCNAoHuoxik/1EzQO0fmA+p0q50y0cTME6AA8v+KdeMbljoY4Rp8D/4v8C2Rr2YaJzeY6AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-l {
|
||||
background: url(@/assets/v3/bg6.hlVmcDno.png) no-repeat 50%;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico1 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAMAAADhcastAAAAAXNSR0IArs4c6QAAAtNQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiHh4eGxsbGhoaGBgYFxcXFhYWFRUVFBQUHR0dHBwcGhoaEhISGRkZGRkZGBgYFxcXHh4eFxcXHR0dHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGhoaGRkZGBgYHBwcGBgYGxsbGxsbGhoaGhoaGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGBgYGxsbGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGRkZGxsbGBgYGhoaGRkZGxsbGRkZGxsbGhoaGBgYGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGhoaGBgYGhoaGhoaGhoaGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGxsbGxsbHBwcGhoaGRkZHBwcGhoaGxsbGhoaGhoaGxsbGxsbGhoaGhoaGxsbGhoaGhoaGhoaGhoaHBwcGxsbGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaHBwcGxsbGRkZGhoaGhoaGRkZGhoaGhoaGxsbGhoaGhoaGRkZGRkZGRkZGhoaGhoaGhoaGxsbGhoaGhoaGxsbGhoaGRkZGhoaGxsbGhoaGRkZGhoaGhoaGxsbGhoaGhoaGhoaGhoaGxsbHBwcGhoaGhoaGxsbGhoaGxsbGhoaGxsbGxsbGhoaGxsbGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGxsbGRkZGhoaGRkZGhoaGRkZGhoaGhoaGhoaGhoaGxsbGhoaGxsbGhoaGhoaGxsbGhoaGhoaGRkZGhoaGRkZGhoaGRkZGhoaGRkZGhoavoj1/gAAAPB0Uk5TAAECAwQFBwgJCgsMDQ4PERMUFRYXGBkaGx0dHh8gISIiIyUmKCkqKywtLjAxMzU2Njg5Ojs8P0BBQkNERUZHSElKTE1OUFFVV1hZWltcXV1eX2FjZWZnaGlqa3BxcnN0dHV3eXp7fH1+gIOEhYeIiYqLjY+QkZOUlZaam5yeoKGhoqOkpaWmpqenqqytrrCxsbKztLW1t7i5uru7vb6/v7/BwsLDxMXFx8nKzM3O0NHR0tPU1NXW1tbX2NnZ2tvc3d7f4OHh4+Pk5eXm5ufo6err7O3u7u/w8PHx8vLz9PX29/f4+Pn6+vv7/Pz9/f7+0IfVbQAAA+dJREFUeNqd1vt/W3Mcx/FPLWJh7S6oDd1GU9cwVlUUXeuyGcNqdZvbMJvLrJShC5u6TNvJ5s4uGGHMjKkapi6rYG4TMdpVl8qWNssie/0JHueW5iRNT+PzSx7fT87zkXPO953POSJ6HX1SchVKVrWS5IrPzfn/GJoOzAqv7DvrU73wYUH6QUP6gXmXNXV105jU2b8O/KWpxz0Y+6z2jJTe8F/UE33T1Lw2QuT2QlNtUg+7I7EeL7kez3rYtAx4x+PxzE7cqFI/abW9oT1p9ZuMVD46RBboneXDDF0QTLVd+VKdintoE5HnIPr6Rmg5ytCn3VfaVy9A8HCR82G+1nBruAVWiMiCOPfYHoDtZf3c09w47fkixRHip2ud2Rq+6h9VHxrnSpEZYaIz03HOj7hVyyLpwwVwk1PRxy2EI0WkZBt89WR9arUSurUsBt/U19dPM3Ah3C2KBvZVKt0xzVjU/SYsTj/09hK+5ArPK8eM8we8yeX7e+un7RADtnm93mAqluE3TB7mChAHIhVyQPLlbtB+rm7IhBvPUdbNaVitMuATiFWk2N/98H4iPRnwdDhRSUuy3gCd+fs9y0digR/nW1GzFikyWi8pVmQWFFjgR/W0wIt6Z6JmiyPExlrgUUFNf8xSvXM8XKplo9bqtNX9XiElUG102nh6qGIfE0usauWvWKWvHd9DqNtkM2Nx7kSJQ7hS5OqaSSNWa3ucbAfAMuph9wUTA4Qr1wP/wsJT5jwzRQaJ1XIF2Ad7lNmQPoKtsLj2Qufokzuokezxu9r+NvJF9vhyPRs97Mwez4QiLRvXZ4+dcLFqX5XssSPIrpd3g7rf2eDy8qEOPRvPK/stY6ceMlj8GoQCsHTOWz9fo+z33i3wR8XgsD5z3Ho2XN3q0jRbMmJlbpx9L5xlNFppqaoz60xYnTliC2hfi8hhMEOdDrFJVvhmPRshvMbdg9XabPk1zwIv5y9t5jDN2LMt2mxZrIzGgfF1REeKeW5os0VqaLdZ4GNh7VzzzFH1msVdvD3QNR/hEEd/c8N4ju2pFBnt6B8/we5VX8I6byRyV2rQW2hr2EFv0+dsPVdEfqDT5/P52hPYeB7lSO7BaWG2jRFx7Uik5ae+14pCmKfYjts202OXjPUI4cYGVX/NujvVukV5M7hQy0YxlGfGG2nS0lLRnIiQgpdp2SiJMy+jzYU1Wlo6NptwiEC+SHUUaqdnqioffCAiD8GfJgzviRTHrF4m1LScmXitSOD4rIsi1hZWTV1rwmK3j4uq3zxlH7hO2KUetsRutyXfjSlvRIi7xaqc30Hr/BFp/bzzJlhakYMmF5nW/wHDiRiDSjYLFgAAAABJRU5ErkJggg==)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico2 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAMAAACsn+1dAAAAAXNSR0IArs4c6QAAAotQTFRFAAAAAAAAAAAAAAAAAAAAMzMzJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHx8fHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaOCgURgAAANh0Uk5TAAECAwQFBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYoKSorLC0uLzAxMjM0NTY4OTo7PD1AQUJDREVGR0hJS0xNTk9RUlNVVldZWltcXl9gYWJlZ2hpamtsb3Bxc3V2d3h5ent9fn+AgoSGh4iJiouMjY6PkJGSk5SVlpeam5yfoKGjpKepqqutrq+wsbKztLW2t7i5vL2+v8DBwsPFxsfKy8zNzs/Q0dLT1NXW19ja293e3+Dh4uTl5+jp6uvt7u/w8PHy8/T19vf4+fr7/P3+fNOr7AAAA5JJREFUeAHVwYlb0wUAx+Ev2zhcQZgZTIEyCo9MsYgE80wEs8ikpDKPMqjMzDCLLgU0ZKWUmlGmIRSm0qGWRyqp6SRImMixz5/Tw/ihO20bTz1P76sbi0nPsCpyqduc0LMnUxEqbsetZ41JkZgLnesfnfvaH7BSEbjld46nS9KIfVzJUPhepvdBuY1qxa7w7aFJhs2cU/iOUSnDMlwWhe0QtTKsoUvhq+FsjAY0cFDhmwVlciuCFxQBO66NVslc2sX3ZkUg8QR0HWi8DI6xioi10kW/XcmK1OS12z4rn67/J/P08h3f7Tc01VXOj1VYZh/Bx9lihWGVCy7W1VQP2nkGqLYoVMuh/RmzPD3SAlUK0T09HE2Rj4TdME+h+YSeTPkZeZGfFZJhTt5WAIthgkIxDTIVwE3dLFMoFoGrLxB4U6FYQlAbFIpxS4LK0X9utsORpKGYBzYNRR7YNBR5YNNQ5IFNQ5EHNoVs1Irq2g/mW+QhD2zyNG39VvuqsQokankn/Q5N0HUfwmO6LvkL+vW9FSM/UTvAdaKxDboKZBhWBfS+apJh4iVw7j/cCz9Z5et52HuHFLXQwYXb5JZ5DP50QmOa3KJ/oKvEIiXWwEb5SOqgPkr9JnVjlyRTaTfY40d/A21Pql8pFMqtAle2vC2FdA14F2eclFIPbQslmUquwscJko7ytQZYHVTIWxUtMsyDe1XYCg2pcsv8FU7nyNJHqQxf0Shvdg7I8ABkx52m+xWTDMOqYJ/iYbEMW2iWt3U4LRrwLKQq95f75SH/RJr0F+/L8CO75G0mPCc3y0GOSzLLi1nSds7fKrdcFyvkzdTA5amSFL0BFiqgKT3UxUvS3b9x5mb5GNNB36bCnGXN8KmCeANaXno4f50T1wz5md7CgG2JCiK6vA+39qcVQEJlG3DkCd1ATpMLrtSmKLDo9Mm36x8kTsyI078hbvyMOYMeSlNASVlzBs26L0Gepu504ulU2XD5iF15GE+99Qs0KHYLfloL5CXzFH72jpBbTCM4Xs+9K23Q+AW10FcsD7lOaHhqUtqgO7NePAknR6rfJvg8Sd7yz3E1S9fYLtCxNEperBUuvo2SNMXFbvkZ18V+XfMRFMhPORRJstM2Wv5KIFuG4T3UyF/cMZol0yXeUQDR7ZTJUARjFEAxpCgZtq4O5BTbZVhL5+pANsBMTSKoJhk2E9QiTTwf1JcyvHc+qMf/BiaidyHImEZ5AAAAAElFTkSuQmCC)
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-tabs .con6 .item-r .list-item .ico3 {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABOCAMAAABG1vXNAAAAAXNSR0IArs4c6QAAAqZQTFRFAAAAAAAAAAAAAAAAAAAAMzMzKysrJCQkICAgHBwcGhoaFxcXFRUVFBQUEhISIiIiICAgHh4eHBwcGxsbGhoaGBgYFxcXFhYWFRUVHR0dHBwcGxsbGhoaGRkZGRkZGBgYFxcXHR0dHBwcHBwcGxsbGhoaGRkZGBgYGBgYFxcXHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZHBwcHBwcGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGxsbGhoaGhoaGRkZGRkZGRkZGBgYHBwcGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGRkZGRkZGxsbGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGRkZGxsbGxsbGxsbGhoaGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGRkZGRkZGRkZGxsbGxsbGhoaGhoaGhoaGRkZGRkZGxsbGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGBgYGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGRkZGhoaGhoaGhoaGhoaGhoaGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGRkZGxsbGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGxsbGRkZGhoaGRkZGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaJuXLtAAAAOF0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBobHB0eHyAiIyQlJigpKissLS4vMDEyMzQ2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlbXF1fYGNkZWZnaGlqbG1vcHN1dnd6e3x9f4CBgoOEhYeJiouMjY6PkJGTlJeYmZqcnZ+goaKkpaanqKipqqusrq+wsrO0tba3uLq7vL2+v8HCw8TFxsfJysvMzs/Q0tPV1tfY2drc3d7f4OHi4+Tl5ufo6err7O3u7/Dw8fHy8/T19vf4+fr7/P3+qN2dfQAABIBJREFUeNrdmPlfVFUYhy+LBIgigkKoWba4VCYpmGFmWCIKoWimpYaSkaQSFphGhVRuRRlRuFSYEBahljmhFqAi+xYEM8oyM89/0mdmmOGcOyvzY9+f3uU+nzvnvOe859xRFO8UF+8lOOGQ8cZ4r8ikBmhd4AUYWQwcm+zNOy9D3XPeDXSl/mCwl3Ok3O/RU+FLVo9qLMObftKAoMWek2v7wTt0Vj+6vbFRkTaN8xj9ib5HHCYmuiOjIdNhYlHv676u0aXwuMPE71A9xyWaCNEOE7N/haGce7xBFd+MPqixe/HCLKuOQq7Nmakq+GnaI9RoFg6VoH5ufapijxq7LfpXq+2xWL0OUAfKotsuNvP/jo4LmzEt1G+saFjKR+W3zTUx1H6fuzzIY1T3o0Gu6d0zHqH+J81Pd5TmbVm7YmXa9g/KdOZAtvu+8BdQmx/vNxoKWn2kHfglziU4rQo4b/+Mb+p1oMjFSbGoGf5McjyO9Gb4Y4YzctMA+kw/Z9nxhdDqpK+9Dd0uj4Mdwwyuc5R4Ba495HoOl3Vyd6F9OG6Qmknu5v/hbprsGsf0Frpmua96gp7fguSQzwWGn/WkNb8Bn8qRjbBTjgStyS8+d+LgqkAVexTDXNEPqOeyjxgIO6AbWb/9eaESOrmb71Q/Q1reCZ1AQ/nX5Y1A21J12xMCEzs4J2a36jEcn282Y4qMDG+SRtLAhVHvNVggT2NTrM17uo0h6Yr0Kjxpc6rQiOPspFlcrA+00zJB8EMGOGS174V3hNR7GGKl0T0DOaJ/hhar+TLEjCYCtXymKkgJ3eKhvBWsx81hbguVSZIHbtJTsFxwIw1kjJgXpdccoNFup3ewT/Q1thXVy24hXkrXWbMSFUVJsZg9FMkDqBxZH5AmxM9b+2C6Za1YVCaiedx02Nq/orPELNO2T7SYPRwW0V3WLj8PxGJk0+ajHmsvb4r+dvQWYy6IPTBRWqNmvQDLpE7DsMW4D1YIcb8milXoKep95B3QZTEmwQYx8S7IDTUNqQSKsp/6EauLvWIi5G8GfhiduLSyAWrkpvItFSNWNV/InVwPBTbvBAyqbl5XKRyxPqZFvrelgDFFUSKiw8xbzJioOl4sNTdpvTzFiqLoaQ0y3S6/VJQputF9YptgrA17qpH9cnLYvAvNqHKEBhV6VohUcF2N7rCh+9Ro6BDvi2fGYs/RDPHCGtxElQpt1Gg0Wv7RaDRtKjSk1bpvzNoGyTIqSkZzQDyy/K9xVTxYPywQJW3zKC0l6kru8eTIUXy+YfhBOVSBcY0naDbkq0JTb9I/zz2ZaqTS7ovlMS31Ue7IGC11EfbhF43cmu+aTNY6+Wk7DejWuSL3GNE+7ziV1IcxN9AZGFEMNx51lp1TB7c2O/xwCn6rF36e4vwnhZ8Grqyyu3YFbWkEfUGAy5lYdsl0LT2WLHxQh28uNd0OTs12u1w21JrW7Z3KT3Zte2lj+u7jF/Umv3qJJwvGP7H4jnyV7iiMUzxVQHx2yZU+I+i7Ln2e+YSvMlb5hHj9F4Jb/Qfbt6tIIlhQ6gAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
height: 39px;
|
||||
width: 29px
|
||||
}
|
||||
|
||||
</style>
|
||||
66
src/views/Jyh/ProductServices/ProductServices4/ModTotal.vue
Normal file
66
src/views/Jyh/ProductServices/ProductServices4/ModTotal.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="mod-total"><h5>实验室已为超过 4000
|
||||
家客户提供卓越的安全服务</h5><h6>即刻行动，与实验室安全专家一同开启智能安全之旅！</h6><a href="javascript:;" class="EASE btn">申请试用</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModTotal"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-total {
|
||||
background-image: url(@/assets/v3/num-bg-wave.png);
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 270px;
|
||||
padding: 67px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total h5 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.7px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
.mod-total h5,.mod-total h6 {
|
||||
color: #1a1a1a;
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.mod-total h6 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 29px
|
||||
}
|
||||
|
||||
.mod-total .btn {
|
||||
background: #4bad52;
|
||||
border: 1px solid #4bad52;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 34px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 32px;
|
||||
margin: 0 30px;
|
||||
padding: 0 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mod-total .btn:hover {
|
||||
background-color: #7aba4a;
|
||||
border-color: #7aba4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
</style>
|
||||
50
src/views/Jyh/ProductServices/ProductServices4/index.vue
Normal file
50
src/views/Jyh/ProductServices/ProductServices4/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product4 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
|
||||
import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
|
||||
import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
|
||||
import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
41
src/views/Jyh/ProductServices/ProductServices4/indexOld.vue
Normal file
41
src/views/Jyh/ProductServices/ProductServices4/indexOld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
22
src/views/Jyh/ProductServices/index.vue
Normal file
22
src/views/Jyh/ProductServices/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModContent />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModContent from './ModContent.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
41
src/views/Jyh/ProductServices/indexOld.vue
Normal file
41
src/views/Jyh/ProductServices/indexOld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModTotal from './ModTotal.vue';
|
||||
|
||||
const activeTab = ref<string | number>('');
|
||||
|
||||
// 解析URL参数的方法
|
||||
const getUrlParam = (paramName: string): string | null => {
|
||||
// 获取当前URL的查询参数
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
// 返回指定参数的值
|
||||
return searchParams.get(paramName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 获取url中tab参数的值
|
||||
const tabParam = getUrlParam('tab');
|
||||
if (tabParam) {
|
||||
activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
|
||||
} else {
|
||||
activeTab.value = '1';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
217
src/views/Jyh/Situation/index.vue
Normal file
217
src/views/Jyh/Situation/index.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="situation-main-container">
|
||||
<header class="header-section">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="main-title">态势感知中心</h1>
|
||||
<div class="sub-title-container">
|
||||
<div class="title-line left"></div>
|
||||
<p class="sub-title">连接全球风险数据与开源生态价值的双模态视图</p>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div ref="sentinelRef" class="sentinel"></div>
|
||||
<nav class="tabs-nav" :class="{ 'is-fixed': isFixed }">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.id }"
|
||||
@click="activeTab = tab.id"
|
||||
>
|
||||
<span class="tab-icon"><i :class="tab.icon"></i></span>
|
||||
<span class="tab-text">{{ tab.label }}</span>
|
||||
<div class="active-bar"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="content-wrapper">
|
||||
<transition name="fade-scale" mode="out-in">
|
||||
<RiskMonitor v-if="activeTab === 'risk'" />
|
||||
<EcoValuePan v-else-if="activeTab === 'eco'" />
|
||||
<Community v-else-if="activeTab === 'whky'" />
|
||||
</transition>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,onMounted,onUnmounted } from 'vue';
|
||||
import RiskMonitor from '@/views/Jyh/security/index.vue';
|
||||
import EcoValuePan from '@/views/Jyh/ecosystem/index.vue';
|
||||
import Community from '@/views/Jyh/Community/index.vue';
|
||||
|
||||
const activeTab = ref('risk');
|
||||
|
||||
const tabs = [
|
||||
{ id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
|
||||
{ id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' },
|
||||
{ id: 'whky', label: '武汉市开源生态建设', icon: 'fas fa-chart-network' },
|
||||
];
|
||||
|
||||
const isFixed = ref(false);
|
||||
const sentinelRef = ref(null);
|
||||
|
||||
let observer = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 交叉观察者逻辑
|
||||
observer = new IntersectionObserver(([entry]) => {
|
||||
// entry.boundingClientRect.top < 0 表示哨兵已经滚到了视口上方以外
|
||||
// !entry.isIntersecting 表示哨兵不再可见
|
||||
isFixed.value = !entry.isIntersecting && entry.boundingClientRect.top < 0;
|
||||
}, {
|
||||
threshold: [0, 1],
|
||||
rootMargin: '-1px 0px 0px 0px' // 触发微调
|
||||
});
|
||||
|
||||
if (sentinelRef.value) {
|
||||
observer.observe(sentinelRef.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) observer.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.situation-main-container {
|
||||
min-height: 100vh;
|
||||
background: #020617; /* 深蓝黑底色 */
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部标题样式 */
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.main-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 4px;
|
||||
background: linear-gradient(to bottom, #fff 30%, #38bdf8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sub-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
|
||||
.sub-title {
|
||||
font-size: 1rem;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 100px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #38bdf8, transparent);
|
||||
&.left { transform: rotate(0deg); }
|
||||
&.right { transform: rotate(0deg); }
|
||||
}
|
||||
}
|
||||
}
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
.nav-placeholder {
|
||||
height: 60px; /* 需与你的 tabs-nav 实际高度一致 */
|
||||
}
|
||||
/* 科技 Tabs 样式 */
|
||||
.tabs-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.1);
|
||||
background: #020617;
|
||||
transition: all 0.3s;
|
||||
height: 60px; /* 固定高度方便占位 */
|
||||
|
||||
&.is-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2000;
|
||||
padding: 0 20px;
|
||||
background: rgba(2, 6, 23, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.3);
|
||||
animation: slideDown 0.4s ease-out; /* 可选：增加下滑动效 */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
|
||||
|
||||
.active-bar {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.active-bar {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: #38bdf8;
|
||||
box-shadow: 0 0 15px #38bdf8;
|
||||
transition: all 0.4s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 切换动画 */
|
||||
.fade-scale-enter-active, .fade-scale-leave-active {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.fade-scale-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
180
src/views/Jyh/Situation/indexold.vue
Normal file
180
src/views/Jyh/Situation/indexold.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="partner-swiper-container">
|
||||
<swiper
|
||||
class="swiper"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:effect="'fade'"
|
||||
:fadeEffect="{ crossFade: true }"
|
||||
:loop="false"
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
:speed="3000"
|
||||
>
|
||||
<swiper-slide class="slide bigscreen3" @click="handleSlideClick('kxky')">
|
||||
<!-- <div class="slide-content">-->
|
||||
<!-- <h2>可信开源态势感知中心</h2>-->
|
||||
<!-- <p>携手共建安全新生态</p>-->
|
||||
<!-- </div>-->
|
||||
<iframe src="http://222.20.126.217:10010/bigScreen/#/kxky" style="height: 100%;width: 100%" loading="lazy"></iframe>
|
||||
</swiper-slide>
|
||||
<swiper-slide class="slide bigscreen2" @click="handleSlideClick('page1')">
|
||||
<!-- <div class="slide-content">-->
|
||||
<!-- <h2>全球开源风险态势感知监控中心</h2>-->
|
||||
<!-- <p>金银湖实验室与您共同成长</p>-->
|
||||
<!-- </div>-->
|
||||
<iframe src="http://222.20.126.217:10010/bigScreen/#/security-situation-awareness" style="height: 100%;width: 100%" loading="lazy"></iframe>
|
||||
</swiper-slide>
|
||||
<swiper-slide class="slide bigscreen1" @click="handleSlideClick('page2')">
|
||||
<!-- <div class="slide-content">-->
|
||||
<!-- <h2>开源生态与贡献价值全景</h2>-->
|
||||
<!-- <p>携手共建安全新生态</p>-->
|
||||
<!-- </div>-->
|
||||
<iframe src="http://222.20.126.217:10010/bigScreen/#/ecosystem-and-contribution" style="height: 100%;width: 100%" loading="lazy"></iframe>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,onMounted,onUnmounted } from 'vue';
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Autoplay, EffectFade } from 'swiper/modules';
|
||||
import { useRouter } from 'vue-router';
|
||||
import "swiper/css";
|
||||
import "swiper/css/autoplay";
|
||||
import 'swiper/css/effect-fade'; // 渐变效果样式
|
||||
|
||||
const swiperRef = ref(null); // Swiper实例引用
|
||||
let autoplayTimer = null; // 自定义自动轮播定时器
|
||||
|
||||
const modules = [Autoplay, EffectFade];
|
||||
const router = useRouter();
|
||||
|
||||
const handleSlideClick = (pageType) => {
|
||||
switch(pageType) {
|
||||
case 'page1':
|
||||
window.open('http://222.20.126.217:10010/bigScreen/#/security-situation-awareness');
|
||||
break;
|
||||
case 'page2':
|
||||
window.open('http://222.20.126.217:10010/bigScreen/#/ecosystem-and-contribution');
|
||||
break;
|
||||
case 'kxky':
|
||||
window.open('http://222.20.126.217:10010/bigScreen/#/kxky');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const iframeSrcs = {
|
||||
kxky: 'http://localhost:8080/#/kxky',
|
||||
page1: 'http://localhost:8080/#/security-situation-awareness',
|
||||
page2: 'http://localhost:8080/#/ecosystem-and-contribution'
|
||||
};
|
||||
|
||||
|
||||
// 标记iframe是否已加载（用于延迟加载）
|
||||
const iframeLoaded = ref({
|
||||
kxky: false, // 初始加载第一个
|
||||
page1: false,
|
||||
page2: false
|
||||
});
|
||||
|
||||
// 监听slide切换：加载对应iframe
|
||||
const onSlideChange = () => {
|
||||
const swiper = swiperRef.value.swiper;
|
||||
const activeIndex = swiper.activeIndex;
|
||||
const keys = Object.keys(iframeLoaded.value);
|
||||
iframeLoaded.value[keys[activeIndex]] = true; // 切换时加载
|
||||
};
|
||||
|
||||
// 自定义循环轮播（替代Swiper的loop）
|
||||
const initCustomLoop = () => {
|
||||
// 清除原有定时器
|
||||
if (autoplayTimer) clearInterval(autoplayTimer);
|
||||
const swiper = swiperRef.value.swiper;
|
||||
const maxIndex = swiper.slides.length - 1;
|
||||
// 3000ms轮播一次，和原autoplay.delay一致
|
||||
autoplayTimer = setInterval(() => {
|
||||
let nextIndex = swiper.activeIndex + 1;
|
||||
if (nextIndex > maxIndex) nextIndex = 0; // 切回第一张
|
||||
swiper.slideTo(nextIndex, 800); // 800ms切换速度，和Swiper的speed一致
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 初始加载第一个iframe
|
||||
iframeLoaded.value.kxky = true;
|
||||
// 等待Swiper初始化完成后，启动自定义循环
|
||||
setTimeout(() => {
|
||||
initCustomLoop();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件销毁时清除定时器
|
||||
if (autoplayTimer) clearInterval(autoplayTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.partner-swiper-container {
|
||||
/*width: 100vw;*/
|
||||
/*height: 100vh;*/
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0f172a;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/*background: url(@/assets/v3/bigscreen/bigscreen1.png) center/cover no-repeat;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bigscreen1 {
|
||||
background: url(@/assets/v3/bigscreen/bigscreen1.png) center/cover no-repeat;
|
||||
}
|
||||
.bigscreen2 {
|
||||
background: url(@/assets/v3/bigscreen/bigscreen2.png) center/cover no-repeat;
|
||||
}
|
||||
.bigscreen3 {
|
||||
background: url(@/assets/v3/bigscreen/bigscreen3.png) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.slide-content h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slide-content h2::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 5rem;
|
||||
height: 2px;
|
||||
background: #38bdf8;
|
||||
margin: 0.5rem auto 0;
|
||||
}
|
||||
|
||||
.slide-content p {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
581
src/views/Jyh/TestingCenter/ReportDetail.vue
Normal file
581
src/views/Jyh/TestingCenter/ReportDetail.vue
Normal file
@@ -0,0 +1,581 @@
|
||||
<template>
|
||||
<div class="report-detail">
|
||||
<!-- 报告头部信息 -->
|
||||
<div class="report-header">
|
||||
<div class="risk-level">
|
||||
<d-tag :color="getRiskColor(reportData.riskLevel)" size="lg">
|
||||
{{ reportData.riskLevel || '无风险' }}
|
||||
</d-tag>
|
||||
</div>
|
||||
<div class="report-title">
|
||||
<h2>安全检测报告 - {{ reportData.target }}</h2>
|
||||
<p class="report-time">生成时间：{{ formatTime(reportData.completeTime) }}</p>
|
||||
</div>
|
||||
<div class="report-actions">
|
||||
<d-button variant="text" @click="copyReportLink">
|
||||
<i class="fa fa-link mr-1"></i> 复制报告链接
|
||||
</d-button>
|
||||
<d-button variant="text" @click="downloadReport">
|
||||
<i class="fa fa-download mr-1"></i> 下载报告
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息卡片 -->
|
||||
<d-card class="report-card mt-4">
|
||||
<div slot="header" class="card-header">基本信息</div>
|
||||
<d-descriptions column="2" bordered>
|
||||
<d-description-item term="任务ID">{{ reportData.taskId || '--' }}</d-description-item>
|
||||
<d-description-item term="检测类型">{{ getTypeText(reportData.type) }}</d-description-item>
|
||||
<d-description-item term="检测目标">{{ reportData.target || '--' }}</d-description-item>
|
||||
<d-description-item term="文件大小" v-if="reportData.type === 'file'">
|
||||
{{ reportData.fileSize ? formatFileSize(reportData.fileSize) : '--' }}
|
||||
</d-description-item>
|
||||
<d-description-item term="开始时间">{{ formatTime(reportData.startTime) || '--' }}</d-description-item>
|
||||
<d-description-item term="完成时间">{{ formatTime(reportData.completeTime) || '--' }}</d-description-item>
|
||||
<d-description-item term="检测时长">{{ formatDuration(reportData.duration) || '--' }}</d-description-item>
|
||||
<d-description-item term="检测项总数">{{ reportData.totalChecks || 0 }} 项</d-description-item>
|
||||
</d-descriptions>
|
||||
</d-card>
|
||||
|
||||
<!-- 风险概览卡片 -->
|
||||
<d-card class="report-card mt-4">
|
||||
<div slot="header" class="card-header">风险概览</div>
|
||||
<div class="risk-overview">
|
||||
<div class="risk-stats">
|
||||
<div class="risk-stat-item">
|
||||
<div class="stat-value">{{ reportData.riskStats?.critical || 0 }}</div>
|
||||
<div class="stat-label">
|
||||
<d-tag color="#c7000b" size="sm">致命漏洞</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-stat-item">
|
||||
<div class="stat-value">{{ reportData.riskStats?.high || 0 }}</div>
|
||||
<div class="stat-label">
|
||||
<d-tag color="#f66f6a" size="sm">高危漏洞</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-stat-item">
|
||||
<div class="stat-value">{{ reportData.riskStats?.medium || 0 }}</div>
|
||||
<div class="stat-label">
|
||||
<d-tag color="#fac20a" size="sm">中危漏洞</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-stat-item">
|
||||
<div class="stat-value">{{ reportData.riskStats?.low || 0 }}</div>
|
||||
<div class="stat-label">
|
||||
<d-tag color="#5e7ce0" size="sm">低危漏洞</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-chart">
|
||||
<!-- 使用 DChart 组件实现饼图 -->
|
||||
<d-chart :option="riskChartOption" style="width: 100%; height: 200px"></d-chart>
|
||||
</div>
|
||||
</div>
|
||||
</d-card>
|
||||
|
||||
<!-- 漏洞详情卡片 -->
|
||||
<d-card class="report-card mt-4">
|
||||
<div slot="header" class="card-header">漏洞详情</div>
|
||||
<d-table
|
||||
:data="vulnerabilities"
|
||||
:show-loading="loading"
|
||||
table-layout="auto"
|
||||
>
|
||||
<d-column field="vulnId" header="漏洞编号" :width="160"></d-column>
|
||||
<d-column field="vulnName" header="漏洞名称"></d-column>
|
||||
<d-column field="severity" header="风险等级">
|
||||
<template #default="scope">
|
||||
<d-tag :color="getSeverityColor(scope.row.severity)">{{ getSeverityText(scope.row.severity) }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="affectedComponents" header="受影响组件" :width="200">
|
||||
<template #default="scope">
|
||||
<div class="affected-components">
|
||||
<span v-for="(comp, idx) in scope.row.affectedComponents" :key="idx">
|
||||
{{ comp.name }}@{{ comp.version }}
|
||||
<template v-if="idx < scope.row.affectedComponents.length - 1">, </template>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column header="操作" :width="120">
|
||||
<template #default="scope">
|
||||
<d-button
|
||||
variant="text"
|
||||
size="sm"
|
||||
@click="showVulnDetail(scope.row)"
|
||||
>
|
||||
详情
|
||||
</d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-card>
|
||||
|
||||
<!-- 修复建议卡片 -->
|
||||
<d-card class="report-card mt-4">
|
||||
<div slot="header" class="card-header">修复建议</div>
|
||||
<div class="fix-suggestions">
|
||||
<div v-if="reportData.fixSuggestions && reportData.fixSuggestions.length">
|
||||
<div class="suggestion-item" v-for="(item, idx) in reportData.fixSuggestions" :key="idx">
|
||||
<h4 class="suggestion-title">
|
||||
<i class="fa fa-lightbulb-o text-warning mr-2"></i>
|
||||
建议 {{ idx + 1 }}: {{ item.title }}
|
||||
</h4>
|
||||
<p class="suggestion-content">{{ item.content }}</p>
|
||||
<a
|
||||
v-if="item.reference"
|
||||
:href="item.reference"
|
||||
target="_blank"
|
||||
class="suggestion-link"
|
||||
>
|
||||
查看详细指南 <i class="fa fa-external-link ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-suggestions">
|
||||
未发现需要修复的问题或暂无具体修复建议
|
||||
</div>
|
||||
</div>
|
||||
</d-card>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="report-footer mt-6">
|
||||
<d-button @click="$emit('close')" variant="secondary">关闭</d-button>
|
||||
<d-button @click="rescan" class="ml-2">重新检测</d-button>
|
||||
</div>
|
||||
|
||||
<!-- 漏洞详情弹窗 -->
|
||||
<d-modal
|
||||
v-model="vulnDetailVisible"
|
||||
title="漏洞详情"
|
||||
:width="700"
|
||||
>
|
||||
<div v-if="currentVuln" class="vuln-detail-modal">
|
||||
<div class="vuln-detail-header">
|
||||
<h3>{{ currentVuln.vulnName }}</h3>
|
||||
<d-tag :color="getSeverityColor(currentVuln.severity)">{{ getSeverityText(currentVuln.severity) }}</d-tag>
|
||||
</div>
|
||||
<div class="vuln-detail-content mt-4">
|
||||
<div class="vuln-section">
|
||||
<h4 class="section-title">漏洞描述</h4>
|
||||
<p class="section-content">{{ currentVuln.description || '无详细描述' }}</p>
|
||||
</div>
|
||||
<div class="vuln-section mt-3">
|
||||
<h4 class="section-title">受影响组件</h4>
|
||||
<ul class="section-list">
|
||||
<li v-for="(comp, idx) in currentVuln.affectedComponents" :key="idx">
|
||||
{{ comp.name }} (版本: {{ comp.version }}) - 路径: {{ comp.path || '未知' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="vuln-section mt-3">
|
||||
<h4 class="section-title">修复建议</h4>
|
||||
<p class="section-content">{{ currentVuln.fixSuggestion || '暂无具体修复建议' }}</p>
|
||||
</div>
|
||||
<div class="vuln-section mt-3">
|
||||
<h4 class="section-title">参考信息</h4>
|
||||
<div class="section-content">
|
||||
<p v-if="currentVuln.cveId">CVE: {{ currentVuln.cveId }}</p>
|
||||
<p v-if="currentVuln.cnnvdId">CNNVD: {{ currentVuln.cnnvdId }}</p>
|
||||
<a
|
||||
v-if="currentVuln.referenceUrl"
|
||||
:href="currentVuln.referenceUrl"
|
||||
target="_blank"
|
||||
class="reference-link"
|
||||
>
|
||||
官方漏洞详情 <i class="fa fa-external-link ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
// import { useToast } from 'devui';
|
||||
import { DChart } from 'vue-devui/echarts'; // 引入 DChart 组件
|
||||
|
||||
// 引入dayjs duration插件
|
||||
dayjs.extend(duration);
|
||||
|
||||
// 接收父组件传入的报告数据
|
||||
const props = defineProps({
|
||||
reportData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// 组件内部状态
|
||||
const loading = ref(false);
|
||||
const vulnDetailVisible = ref(false);
|
||||
const currentVuln = ref(null);
|
||||
const toast = useToast();
|
||||
|
||||
// 漏洞列表数据（从报告数据中提取）
|
||||
const vulnerabilities = ref(props.reportData.vulnerabilities || []);
|
||||
|
||||
// 显示漏洞详情
|
||||
const showVulnDetail = (vuln) => {
|
||||
currentVuln.value = vuln;
|
||||
vulnDetailVisible.value = true;
|
||||
};
|
||||
|
||||
// 重新检测
|
||||
const rescan = () => {
|
||||
$emit('close');
|
||||
$emit('rescan', props.reportData);
|
||||
};
|
||||
|
||||
// 复制报告链接
|
||||
const copyReportLink = () => {
|
||||
const dummyLink = `${window.location.origin}/scan/report/${props.reportData.taskId}`;
|
||||
navigator.clipboard.writeText(dummyLink).then(() => {
|
||||
toast.success({ content: '报告链接已复制到剪贴板', duration: 2000 });
|
||||
}).catch(() => {
|
||||
toast.error({ content: '复制失败，请手动复制', duration: 2000 });
|
||||
});
|
||||
};
|
||||
|
||||
// 下载报告
|
||||
const downloadReport = () => {
|
||||
toast.info({ content: '准备下载报告...', duration: 2000 });
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time) => {
|
||||
return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
|
||||
};
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 格式化时长
|
||||
const formatDuration = (ms) => {
|
||||
if (!ms) return '--';
|
||||
const d = dayjs.duration(ms, 'milliseconds');
|
||||
return `${d.minutes()}分${d.seconds()}秒`;
|
||||
};
|
||||
|
||||
// 风险等级颜色映射
|
||||
const getRiskColor = (level) => {
|
||||
const colorMap = {
|
||||
'致命': '#c7000b',
|
||||
'高危': '#f66f6a',
|
||||
'中危': '#fac20a',
|
||||
'低危': '#5e7ce0',
|
||||
'无风险': '#00b42a'
|
||||
};
|
||||
return colorMap[level] || 'default';
|
||||
};
|
||||
|
||||
// 检测类型文本映射
|
||||
const getTypeText = (type) => {
|
||||
const typeMap = {
|
||||
'file': '文件上传',
|
||||
'url': 'URL地址',
|
||||
'sbom': 'SBOM内容'
|
||||
};
|
||||
return typeMap[type] || type;
|
||||
};
|
||||
|
||||
// 漏洞严重程度文本映射
|
||||
const getSeverityText = (severity) => {
|
||||
const severityMap = {
|
||||
'critical': '致命',
|
||||
'high': '高危',
|
||||
'medium': '中危',
|
||||
'low': '低危'
|
||||
};
|
||||
return severityMap[severity] || severity;
|
||||
};
|
||||
|
||||
// 漏洞严重程度颜色映射
|
||||
const getSeverityColor = (severity) => {
|
||||
const colorMap = {
|
||||
'critical': '#c7000b',
|
||||
'high': '#f66f6a',
|
||||
'medium': '#fac20a',
|
||||
'low': '#5e7ce0'
|
||||
};
|
||||
return colorMap[severity] || 'default';
|
||||
};
|
||||
|
||||
// 风险图表配置（基于 echarts 格式）
|
||||
const riskChartOption = computed(() => {
|
||||
const riskStats = props.reportData.riskStats || {
|
||||
critical: 0,
|
||||
high: 0,
|
||||
medium: 0,
|
||||
low: 0
|
||||
};
|
||||
|
||||
// 转换为 echarts 所需的数据格式
|
||||
const chartData = [
|
||||
{ name: '致命漏洞', value: riskStats.critical, itemStyle: { color: '#c7000b' } },
|
||||
{ name: '高危漏洞', value: riskStats.high, itemStyle: { color: '#f66f6a' } },
|
||||
{ name: '中危漏洞', value: riskStats.medium, itemStyle: { color: '#fac20a' } },
|
||||
{ name: '低危漏洞', value: riskStats.low, itemStyle: { color: '#5e7ce0' } }
|
||||
].filter(item => item.value > 0); // 过滤掉数量为0的项
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '漏洞数量',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: chartData
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
// 监听报告数据变化，更新漏洞列表
|
||||
watch(() => props.reportData, () => {
|
||||
vulnerabilities.value = props.reportData.vulnerabilities || [];
|
||||
});
|
||||
|
||||
// 定义组件输出事件
|
||||
const emit = defineEmits(['close', 'rescan']);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.report-detail {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.risk-level {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
.report-time {
|
||||
color: var(--devui-text-secondary);
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
--devui-card-padding: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--devui-text-primary);
|
||||
}
|
||||
|
||||
.risk-overview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.risk-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
.risk-stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: var(--devui-text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.risk-chart {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.affected-components {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fix-suggestions {
|
||||
padding: 8px 0;
|
||||
|
||||
.suggestion-item {
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px dashed var(--devui-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.suggestion-title {
|
||||
font-weight: 600;
|
||||
color: var(--devui-text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.suggestion-content {
|
||||
color: var(--devui-text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.suggestion-link {
|
||||
color: var(--devui-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-suggestions {
|
||||
color: var(--devui-text-secondary);
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.report-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.vuln-detail-modal {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.vuln-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.vuln-section {
|
||||
padding: 8px 0;
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--devui-text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: var(--devui-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.section-list {
|
||||
color: var(--devui-text-secondary);
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
color: var(--devui-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .devui-descriptions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
::v-deep .devui-table {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
1121
src/views/Jyh/TestingCenter/index.vue
Normal file
1121
src/views/Jyh/TestingCenter/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
568
src/views/Jyh/ThreatIntelligence/index.vue
Normal file
568
src/views/Jyh/ThreatIntelligence/index.vue
Normal file
@@ -0,0 +1,568 @@
|
||||
<template>
|
||||
<div class="threat-page">
|
||||
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<h1 class="page-title">威胁情报库</h1>
|
||||
|
||||
<div class="main-search-wrapper">
|
||||
<div class="search-input-group">
|
||||
<input
|
||||
v-model="mainKeyword"
|
||||
type="text"
|
||||
placeholder="搜索关键字：IP地址 域名 恶意文件哈希"
|
||||
class="main-search-input"
|
||||
/>
|
||||
<button class="search-icon-btn">
|
||||
<i class="icon-search d-icon icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-illustration">
|
||||
<div class="shield-graphic"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-container">
|
||||
<div class="content-layout">
|
||||
|
||||
<div class="list-column">
|
||||
<div class="threat-list">
|
||||
<div
|
||||
v-for="(item, index) in threatList"
|
||||
:key="index"
|
||||
class="threat-card vuln-card"
|
||||
:class="getCardBorderClass(item.severity)"
|
||||
>
|
||||
<div class="card-top">
|
||||
<h3 class="threat-title vuln-title">{{ item.title }}</h3>
|
||||
<div class="threat-icon-wrapper vuln-icon-wrapper" :class="item.iconType">
|
||||
<i class="d-icon" :class="item.iconClass"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-meta">
|
||||
<span class="indicator-tag cnnvd-tag">
|
||||
{{ item.indicatorType }}：{{ item.indicatorValue }}
|
||||
</span>
|
||||
<span
|
||||
v-if="item.severity"
|
||||
class="severity-tag level-tag"
|
||||
:class="getLevelClass(item.severity)"
|
||||
>
|
||||
{{ item.severity }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<span class="date-item">首次发现：{{ item.firstSeen }}</span>
|
||||
<span class="date-item">最后活动：{{ item.lastActivity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
<d-pagination
|
||||
:total="125678"
|
||||
:page-size="10"
|
||||
:page-index="1"
|
||||
show-page-selector
|
||||
></d-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-column">
|
||||
<div class="filter-card">
|
||||
<div class="filter-header">高级筛选</div>
|
||||
|
||||
<div class="filter-body-expanded">
|
||||
<div class="filter-item">
|
||||
<label>威胁等级</label>
|
||||
<d-select v-model="filter.severity" placeholder="请选择" :options="severityOptions"></d-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>情报类型</label>
|
||||
<d-select v-model="filter.type" placeholder="请选择" :options="threatTypeOptions"></d-select>
|
||||
</div>
|
||||
<div v-if="!isFilterCollapsed" class="filter-item">
|
||||
<label>所属组织</label>
|
||||
<d-input v-model="filter.organization" placeholder="APT组织名称"></d-input>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>活动时间</label>
|
||||
<d-select v-model="filter.dateType" placeholder="时间类型" :options="dateTypeOptions"></d-select>
|
||||
</div>
|
||||
<div v-if="!isFilterCollapsed" class="filter-item">
|
||||
<label>查询时间</label>
|
||||
<div class="date-range-mock">
|
||||
<input placeholder="开始日期" class="date-input"/>
|
||||
<span class="separator">-</span>
|
||||
<input placeholder="结束日期" class="date-input"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<d-button variant="solid" color="primary" class="confirm-btn">查询</d-button>
|
||||
<d-button class="reset-btn">重置</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse-link">
|
||||
<a href="#" @click.prevent="isFilterCollapsed = !isFilterCollapsed">
|
||||
{{ isFilterCollapsed ? '展开' : '收起' }}
|
||||
<i class="d-icon" :class="isFilterCollapsed ? 'icon-chevron-down-2' : 'icon-chevron-up-2'"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-button class="download-btn" variant="solid" color="primary" icon="icon-download">
|
||||
<i class="d-icon icon-download"></i> 导出情报数据
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
const mainKeyword = ref('');
|
||||
const isFilterCollapsed = ref(false);
|
||||
|
||||
// 模拟威胁情报数据
|
||||
const threatList = ref([
|
||||
{
|
||||
title: '针对金融行业的钓鱼活动（C2: 192.168.1.1）',
|
||||
severity: '危急',
|
||||
indicatorType: 'IP',
|
||||
indicatorValue: '192.168.1.1',
|
||||
firstSeen: '2025-11-20',
|
||||
lastActivity: '2025-12-04',
|
||||
iconType: 'red',
|
||||
iconClass: 'icon-lock-private', // 模拟一个红色锁图标
|
||||
},
|
||||
{
|
||||
title: 'APT-XYZ组织最新使用的恶意域名',
|
||||
severity: '高危',
|
||||
indicatorType: 'Domain',
|
||||
indicatorValue: 'evil-updates.com',
|
||||
firstSeen: '2025-12-01',
|
||||
lastActivity: '2025-12-05',
|
||||
iconType: 'orange',
|
||||
iconClass: 'icon-lock-private',
|
||||
},
|
||||
{
|
||||
title: '新型勒索软件变种（Ransom.VariantA）',
|
||||
severity: '中危',
|
||||
indicatorType: 'Hash',
|
||||
indicatorValue: 'A1B2C3D4E5F67890',
|
||||
firstSeen: '2025-12-03',
|
||||
lastActivity: '2025-12-05',
|
||||
iconType: 'yellow',
|
||||
iconClass: 'icon-lock-private',
|
||||
},
|
||||
{
|
||||
title: '僵尸网络C&C服务器更新',
|
||||
severity: '中危',
|
||||
indicatorType: 'IP',
|
||||
indicatorValue: '203.0.113.44',
|
||||
firstSeen: '2025-12-04',
|
||||
lastActivity: '2025-12-04',
|
||||
iconType: 'yellow',
|
||||
iconClass: 'icon-lock-private',
|
||||
},
|
||||
{
|
||||
title: '普通信息泄漏警告',
|
||||
severity: '低危',
|
||||
indicatorType: 'URL',
|
||||
indicatorValue: 'example.com/login',
|
||||
firstSeen: '2025-12-05',
|
||||
lastActivity: '2025-12-05',
|
||||
iconType: 'blue',
|
||||
iconClass: 'icon-lock-private',
|
||||
},
|
||||
]);
|
||||
|
||||
// 筛选表单数据
|
||||
const filter = ref({
|
||||
severity: '',
|
||||
type: '',
|
||||
organization: '',
|
||||
dateType: '首次发现',
|
||||
});
|
||||
|
||||
const severityOptions = [
|
||||
{label: '危急', value: 'critical'},
|
||||
{label: '高危', value: 'high'},
|
||||
{label: '中危', value: 'medium'},
|
||||
{label: '低危', value: 'low'}
|
||||
];
|
||||
const threatTypeOptions = [
|
||||
{label: '恶意IP', value: 'ip'},
|
||||
{label: '恶意域名', value: 'domain'},
|
||||
{label: '恶意文件哈希', value: 'hash'}
|
||||
];
|
||||
const dateTypeOptions = [
|
||||
{label: '首次发现', value: 'first'},
|
||||
{label: '最后活动', value: 'last'}
|
||||
];
|
||||
|
||||
// 辅助函数：获取标签颜色类
|
||||
const getLevelClass = (severity) => {
|
||||
if (severity === '危急') return 'tag-critical';
|
||||
if (severity === '高危') return 'tag-high';
|
||||
if (severity === '中危') return 'tag-medium';
|
||||
return 'tag-low';
|
||||
};
|
||||
|
||||
// 辅助函数：获取卡片左边框颜色类
|
||||
const getCardBorderClass = (severity) => {
|
||||
if (severity === '危急') return 'border-critical';
|
||||
if (severity === '高危') return 'border-high';
|
||||
if (severity === '中危') return 'border-medium';
|
||||
return 'border-low';
|
||||
};
|
||||
|
||||
const highlightKeyword = (text) => {
|
||||
return text;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.threat-page {
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #0f1724;
|
||||
padding: 60px 0 100px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
/* 假设背景图路径正确 */
|
||||
background-image: url(@/assets/v3/louDong_back.4bfd0a5.png);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.main-search-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.main-search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-icon-btn {
|
||||
width: 50px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #3d7fff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-illustration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
background: radial-gradient(circle at 70% 50%, rgba(61, 127, 255, 0.1), transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1300px;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.content-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.list-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-column {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.threat-card {
|
||||
background-color: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.threat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.threat-card.border-low {
|
||||
border-left: 4px solid #3d7fff;
|
||||
}
|
||||
|
||||
/* 蓝色 (低危) */
|
||||
.threat-card.border-medium {
|
||||
border-left: 4px solid #feca57;
|
||||
}
|
||||
|
||||
/* 黄色 (中危) */
|
||||
.threat-card.border-high {
|
||||
border-left: 4px solid #ff9f43;
|
||||
}
|
||||
|
||||
/* 橙色 (高危) */
|
||||
.threat-card.border-critical {
|
||||
border-left: 4px solid #ff4757;
|
||||
}
|
||||
|
||||
/* 红色 (危急) */
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.threat-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.threat-title:hover {
|
||||
color: #3d7fff;
|
||||
}
|
||||
|
||||
.threat-icon-wrapper {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.threat-icon-wrapper.blue {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.threat-icon-wrapper.yellow {
|
||||
background-color: #fffbe6;
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.threat-icon-wrapper.orange {
|
||||
background-color: #fff2e8;
|
||||
color: #fa541c;
|
||||
}
|
||||
|
||||
.threat-icon-wrapper.red {
|
||||
background-color: #ffe6e6;
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
/* 新增红色图标背景 */
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.indicator-tag {
|
||||
background-color: #eff6ff;
|
||||
color: #3d7fff;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.severity-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag-low {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.tag-medium {
|
||||
background-color: #feca57;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag-high {
|
||||
background-color: #ff9f43;
|
||||
}
|
||||
|
||||
.tag-critical {
|
||||
background-color: #ff4757;
|
||||
}
|
||||
|
||||
/* 红色 */
|
||||
|
||||
.card-footer {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-body-expanded {
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.devui-select), :deep(.devui-input__inner) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range-mock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
flex: 1;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #3d7fff !important;
|
||||
border-color: #3d7fff !important;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.collapse-link {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.collapse-link a {
|
||||
color: #3d7fff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.collapse-link .d-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
background-color: #3d7fff !important;
|
||||
border-color: #3d7fff !important;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
526
src/views/Jyh/VulnerabilityDatabase/index.vue
Normal file
526
src/views/Jyh/VulnerabilityDatabase/index.vue
Normal file
@@ -0,0 +1,526 @@
|
||||
<template>
|
||||
<div class="vuln-page">
|
||||
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<h1 class="page-title">漏洞数据库</h1>
|
||||
|
||||
<div class="main-search-wrapper">
|
||||
<div class="search-input-group">
|
||||
<input
|
||||
v-model="mainKeyword"
|
||||
type="text"
|
||||
placeholder="搜索关键字：CNNVD编号 CVE编号"
|
||||
class="main-search-input"
|
||||
/>
|
||||
<button class="search-icon-btn">
|
||||
<i class="icon-search d-icon icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-illustration">
|
||||
<div class="shield-graphic"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-container">
|
||||
<div class="content-layout">
|
||||
|
||||
<div class="list-column">
|
||||
<div class="vuln-list">
|
||||
<div
|
||||
v-for="(item, index) in vulnList"
|
||||
:key="index"
|
||||
class="vuln-card"
|
||||
:class="getCardBorderClass(item.level)"
|
||||
>
|
||||
<div class="card-top">
|
||||
<h3 class="vuln-title" v-html="highlightKeyword(item.title)"></h3>
|
||||
<div class="vuln-icon-wrapper" :class="item.iconType">
|
||||
<i class="d-icon" :class="item.iconClass"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-meta">
|
||||
<span class="cnnvd-tag">CNNVD编号：{{ item.cnnvd }}</span>
|
||||
<span
|
||||
v-if="item.level"
|
||||
class="level-tag"
|
||||
:class="getLevelClass(item.level)"
|
||||
>
|
||||
{{ item.level }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<span class="date-item">收录时间：{{ item.createTime }}</span>
|
||||
<span class="date-item">更新时间：{{ item.updateTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
<d-pagination
|
||||
:total="317483"
|
||||
:page-size="10"
|
||||
:page-index="1"
|
||||
show-page-selector
|
||||
></d-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-column">
|
||||
<div class="filter-card">
|
||||
<div class="filter-header">高级搜索</div>
|
||||
|
||||
<div class="filter-body-expanded">
|
||||
<div class="filter-item">
|
||||
<label>危害等级</label>
|
||||
<d-select v-model="filter.level" placeholder="请选择" :options="levelOptions"></d-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>漏洞类型</label>
|
||||
<d-select v-model="filter.type" placeholder="请选择" :options="typeOptions"></d-select>
|
||||
</div>
|
||||
<div v-if="!isFilterCollapsed" class="filter-item">
|
||||
<label>厂商</label>
|
||||
<d-input v-model="filter.vendor" placeholder="请输入厂商"></d-input>
|
||||
</div>
|
||||
<div v-if="!isFilterCollapsed" class="filter-item">
|
||||
<label>时间类型</label>
|
||||
<d-select v-model="filter.dateType" placeholder="时间类型" :options="dateTypeOptions"></d-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>查询时间</label>
|
||||
<div class="date-range-mock">
|
||||
<input placeholder="开始日期" class="date-input"/>
|
||||
<span class="separator">-</span>
|
||||
<input placeholder="结束日期" class="date-input"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<d-button icon="search" variant="solid" color="primary" class="confirm-btn">确认</d-button>
|
||||
<d-button icon="refresh" class="reset-btn">取消</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse-link">
|
||||
<a href="#" @click.prevent="isFilterCollapsed = !isFilterCollapsed">
|
||||
{{ isFilterCollapsed ? '展开' : '收起' }}
|
||||
<i class="d-icon" :class="isFilterCollapsed ? 'icon-chevron-down-2' : 'icon-chevron-up-2'"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-button class="download-btn" variant="solid" color="primary" icon="icon-download">
|
||||
<i class="d-icon icon-download"></i> 下载漏洞数据
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
// 假设已安装 vue-devui，部分组件需要按需引入或全局注册
|
||||
// import { DButton, DSelect, DInput, DPagination } from 'vue-devui';
|
||||
|
||||
const mainKeyword = ref('');
|
||||
const isFilterCollapsed = ref(true); // 【新增：控制高级搜索的展开/收起】
|
||||
|
||||
// 模拟漏洞数据 (保持不变)
|
||||
const vulnList = ref([
|
||||
{
|
||||
title: 'FreePBX SQL注入漏洞',
|
||||
cnnvd: 'CNNVD-202512-423',
|
||||
level: '低危',
|
||||
createTime: '2025-12-04',
|
||||
updateTime: '2025-12-04',
|
||||
iconType: 'blue',
|
||||
iconClass: 'icon-bug'
|
||||
},
|
||||
{
|
||||
title: 'WordPress Plugin CSSIgniter Shortcodes 跨站脚本漏洞',
|
||||
cnnvd: 'CNNVD-202512-422',
|
||||
level: '中危',
|
||||
createTime: '2025-12-03',
|
||||
updateTime: '2025-12-04',
|
||||
iconType: 'yellow',
|
||||
iconClass: 'icon-bug'
|
||||
},
|
||||
{
|
||||
title: 'WordPress Plugin Modula Image Gallery 路径遍历漏洞',
|
||||
cnnvd: 'CNNVD-202512-421',
|
||||
level: '高危',
|
||||
createTime: '2025-12-03',
|
||||
updateTime: '2025-12-04',
|
||||
iconType: 'orange',
|
||||
iconClass: 'icon-bug'
|
||||
},
|
||||
{
|
||||
title: 'WordPress Plugin Modula Image Gallery 代码问题漏洞',
|
||||
cnnvd: 'CNNVD-202512-420',
|
||||
level: '高危',
|
||||
createTime: '2025-12-03',
|
||||
updateTime: '2025-12-04',
|
||||
iconType: 'orange',
|
||||
iconClass: 'icon-bug'
|
||||
},
|
||||
{
|
||||
title: 'WordPress Plugin MXChat 信息泄露漏洞',
|
||||
cnnvd: 'CNNVD-202512-419',
|
||||
level: '中危',
|
||||
createTime: '2025-12-03',
|
||||
updateTime: '2025-12-04',
|
||||
iconType: 'yellow',
|
||||
iconClass: 'icon-bug'
|
||||
},
|
||||
]);
|
||||
|
||||
// 筛选表单数据 (保持不变)
|
||||
const filter = ref({
|
||||
level: '',
|
||||
type: '',
|
||||
vendor: '',
|
||||
dateType: '收录时间',
|
||||
});
|
||||
|
||||
const levelOptions = [{label: '高危', value: 'high'}, {label: '中危', value: 'medium'}, {label: '低危', value: 'low'}];
|
||||
const typeOptions = [{label: 'SQL注入', value: 'sql'}, {label: 'XSS', value: 'xss'}];
|
||||
const dateTypeOptions = [{label: '收录时间', value: 'create'}, {label: '更新时间', value: 'update'}];
|
||||
|
||||
// 辅助函数 (保持不变)
|
||||
const getLevelClass = (level) => {
|
||||
if (level === '高危') return 'tag-high';
|
||||
if (level === '中危') return 'tag-medium';
|
||||
return 'tag-low';
|
||||
};
|
||||
|
||||
const getCardBorderClass = (level) => {
|
||||
if (level === '高危') return 'border-high';
|
||||
if (level === '中危') return 'border-medium';
|
||||
return 'border-low';
|
||||
};
|
||||
|
||||
const highlightKeyword = (text) => {
|
||||
return text;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 全局重置 */
|
||||
.vuln-page {
|
||||
//background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #0f1724;
|
||||
padding: 60px 0 100px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-image: url(@/assets/v3/louDong_back.4bfd0a5.png);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.main-search-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.main-search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-icon-btn {
|
||||
width: 50px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #3d7fff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-illustration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
background: radial-gradient(circle at 70% 50%, rgba(61, 127, 255, 0.1), transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1300px;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.content-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.list-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-column {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vuln-card {
|
||||
background-color: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.vuln-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.vuln-card.border-low {
|
||||
border-left: 4px solid #3d7fff;
|
||||
}
|
||||
|
||||
.vuln-card.border-medium {
|
||||
border-left: 4px solid #feca57;
|
||||
}
|
||||
|
||||
.vuln-card.border-high {
|
||||
border-left: 4px solid #ff9f43;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vuln-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.vuln-title:hover {
|
||||
color: #3d7fff;
|
||||
}
|
||||
|
||||
.vuln-icon-wrapper {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vuln-icon-wrapper.blue {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.vuln-icon-wrapper.yellow {
|
||||
background-color: #fffbe6;
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.vuln-icon-wrapper.orange {
|
||||
background-color: #fff2e8;
|
||||
color: #fa541c;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cnnvd-tag {
|
||||
background-color: #eff6ff;
|
||||
color: #3d7fff;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.level-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag-low {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.tag-medium {
|
||||
background-color: #feca57;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag-high {
|
||||
background-color: #ff9f43;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px; /* 展开时有间距 */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 展开状态下的表单容器
|
||||
.filter-body-expanded {
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* DevUI 组件样式覆盖 */
|
||||
:deep(.devui-select), :deep(.devui-input__inner) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range-mock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
flex: 1;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #3d7fff !important;
|
||||
border-color: #3d7fff !important;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.collapse-link {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #eee; /* 增加分隔线 */
|
||||
}
|
||||
|
||||
.collapse-link a {
|
||||
color: #3d7fff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
|
||||
.d-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
background-color: #3d7fff !important;
|
||||
border-color: #3d7fff !important;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
3880
src/views/Jyh/ecosystem/index.vue
Normal file
3880
src/views/Jyh/ecosystem/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
46
src/views/Jyh/ecosystem/json/china.js
Normal file
46
src/views/Jyh/ecosystem/json/china.js
Normal file
File diff suppressed because one or more lines are too long
1
src/views/Jyh/ecosystem/json/china.json
Normal file
1
src/views/Jyh/ecosystem/json/china.json
Normal file
File diff suppressed because one or more lines are too long
347
src/views/Jyh/ecosystem/talentMapChart.vue
Normal file
347
src/views/Jyh/ecosystem/talentMapChart.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div id="talentMapChart" class="chart"></div>
|
||||
|
||||
<!-- 右侧排行榜 -->
|
||||
<div class="map-rank-panel">
|
||||
<div class="panel-title">🏆 开源人才数量排行 TOP 5</div>
|
||||
<div class="rank-list">
|
||||
<div class="rank-item" v-for="(item, index) in topRegions" :key="index">
|
||||
<span :class="['rank-num', 'rank-' + (index + 1)]">{{ index + 1 }}</span>
|
||||
<span class="rank-name">{{ item.name }}</span>
|
||||
<span class="rank-score">{{ item.score }} 万人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref, onBeforeUnmount, computed} from 'vue';
|
||||
|
||||
// 初始化中国开源人才密度地图
|
||||
import * as echarts from "echarts";
|
||||
import geoJson from './json/china.json';
|
||||
|
||||
const talentMapChart = ref()
|
||||
|
||||
|
||||
// 中国开源人才密度地图数据
|
||||
const talentMapData = ref([
|
||||
{ name: '北京市', value: [116.4074, 39.9042, 141.15, 231.47] },
|
||||
{ name: '上海市', value: [121.4737, 31.2304, 269.83, 169.99] },
|
||||
{ name: '浙江省', value: [120.1551, 30.2794, 8.94, 90.98] },
|
||||
{ name: '广东省', value: [113.2644, 23.1291, 7.5, 149.76] },
|
||||
{ name: '台湾省', value: [121.5090, 25.0443, 32.75, 117.88] },
|
||||
{ name: '四川省', value: [104.0657, 30.6595, 1.01, 48.7] },
|
||||
{ name: '江苏省', value: [118.7780, 32.0472, 5.25, 56.28] },
|
||||
{ name: '湖北省', value: [114.3053, 30.5928, 1.84, 34.09] },
|
||||
{ name: '福建省', value: [119.3062, 26.0747, 1.39, 16.79] },
|
||||
{ name: '陕西省', value: [108.9480, 34.2632, 1.04, 21.38] },
|
||||
{ name: '重庆市', value: [106.5049, 29.5332, 1.61, 13.24] },
|
||||
{ name: '山东省', value: [120.3331, 36.0670, 1.02, 16.02] },
|
||||
{ name: '湖南省', value: [112.9822, 28.1944, 0.68, 14.25] },
|
||||
{ name: '安徽省', value: [117.2830, 31.8611, 0.93, 12.92] },
|
||||
{ name: '辽宁省', value: [123.4321, 41.8007, 0.77, 11.37] },
|
||||
{ name: '云南省', value: [102.7123, 25.0406, 0.1, 3.68] },
|
||||
{ name: '天津市', value: [117.1901, 39.1258, 7.79, 9.34] },
|
||||
{ name: '河南省', value: [113.6654, 34.7579, 0.55, 9.07] },
|
||||
{ name: '吉林省', value: [125.3245, 43.8171, 0.15, 2.7] },
|
||||
{ name: '江西省', value: [115.8581, 28.6820, 0.25, 4.17] },
|
||||
{ name: '广西壮族自治区', value: [108.3200, 22.8241, 0.14, 3.15] },
|
||||
{ name: '黑龙江省', value: [126.5349, 45.8038, 0.11, 5.13] },
|
||||
{ name: '澳门特别行政区', value: [113.5490, 22.1987, 737.5, 2.36] },
|
||||
{ name: '河北省', value: [114.5024, 38.0454, 0.26, 4.74] },
|
||||
{ name: '山西省', value: [112.5489, 37.8570, 0.25, 3.78] },
|
||||
{ name: '贵州省', value: [106.7135, 26.5783, 0.11, 1.93] },
|
||||
{ name: '内蒙古自治区', value: [111.6708, 40.8183, 0.01, 0.96] },
|
||||
{ name: '香港特别行政区', value: [114.1095, 22.3964, 1797.7, 197.75] },
|
||||
{ name: '新疆维吾尔自治区', value: [87.6168, 43.7928, 0.01, 0.77] },
|
||||
{ name: '甘肃省', value: [103.8235, 36.0580, 0.04, 1.46] },
|
||||
{ name: '海南省', value: [110.3312, 20.0319, 0.36, 1.25] },
|
||||
{ name: '宁夏回族自治区', value: [106.2782, 38.4664, 0.05, 0.27] },
|
||||
{ name: '西藏自治区', value: [91.1175, 29.6469, 0.01, 0.14] },
|
||||
{ name: '青海省', value: [101.7782, 36.6172, 0.01, 0.18] }
|
||||
]);
|
||||
|
||||
// 计算 TOP 5 地区
|
||||
const topRegions = computed(() => {
|
||||
const sorted = [...talentMapData.value]
|
||||
.map(item => ({
|
||||
name: item.name,
|
||||
score: item.value[3],
|
||||
density: item.value[2]
|
||||
}))
|
||||
.sort((a, b) => b.score - a.score);
|
||||
|
||||
return sorted.slice(0, 5);
|
||||
});
|
||||
// 挂载时初始化
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
initTalentMapChart()
|
||||
}, 100);
|
||||
});
|
||||
|
||||
const initTalentMapChart = () => {
|
||||
const el = document.getElementById('talentMapChart');
|
||||
if (!el) return;
|
||||
|
||||
if (talentMapChart.value) {
|
||||
talentMapChart.value.dispose();
|
||||
}
|
||||
|
||||
const myChart = echarts.init(el);
|
||||
talentMapChart.value = myChart;
|
||||
|
||||
// --- 修改后的加载逻辑：直接获取 JSON ---
|
||||
// 这里可以换成你本地项目的路径，例如：'/maps/china.json'
|
||||
const MAP_JSON_URL = 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json';
|
||||
|
||||
// 1. 注册地图数据
|
||||
echarts.registerMap('china', geoJson);
|
||||
|
||||
// 2. 调用渲染函数
|
||||
renderMap();
|
||||
|
||||
// 渲染地图的函数 (配置保持原有的科技感风格)
|
||||
function renderMap() {
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(17, 54, 122, 0.95)',
|
||||
borderColor: '#00A0FF',
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
textStyle: { color: '#6dd0e3', fontSize: 14 },
|
||||
formatter: (params: any) => {
|
||||
if (params.seriesType === 'scatter') {
|
||||
const data = params.data.value;
|
||||
const density = data[2];
|
||||
const total = data[3];
|
||||
// 内部辅助函数获取等级
|
||||
const getLevel = (d: number) => {
|
||||
if(d > 500) return '人才极高密度区';
|
||||
if(d > 100) return '人才高密度区';
|
||||
return '人才稳步增长区';
|
||||
};
|
||||
|
||||
return `
|
||||
<div style="line-height: 2;">
|
||||
<div style="font-weight: bold; color: #00F2FF; font-size: 16px; margin-bottom: 10px;">${params.name}</div>
|
||||
<div><span style="color: #6dd0e3;">人才密度：</span><span style="color: #00C0FF; font-weight: 700;">${density}</span> 人/km²</div>
|
||||
<div><span style="color: #6dd0e3;">人才总量：</span><span style="color: #00C0FF; font-weight: 700;">${total}</span> 万人</div>
|
||||
<div style="margin-top: 8px; padding: 4px 10px; background: rgba(0, 242, 255, 0.2); border-radius: 6px; color: #00F2FF; font-size: 12px;">${getLevel(density)}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 500,
|
||||
inRange: {
|
||||
color: ['#00A0FF', '#0063D0', '#004190'],
|
||||
symbolSize: [10, 60]
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
roam: true,
|
||||
scaleLimit: { min: 0.8, max: 4 },
|
||||
zoom: 2.6, // 调整为 standard zoom
|
||||
center: [104.5, 37.5],
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
color: '#CEF4FD'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(0, 30, 80, 0.6)',
|
||||
borderColor: 'rgba(0, 160, 255, 0.5)',
|
||||
borderWidth: 1.5,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 160, 255, 0.3)'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(0, 50, 120, 0.8)',
|
||||
borderColor: '#00C0FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '开源人才密度',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: talentMapData.value,
|
||||
symbolSize: (val: any) => Math.sqrt(val[2]) * 2 + 8,
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
const density = params.value[2];
|
||||
if (density >= 500) return '#FF4900';
|
||||
if (density >= 100) return '#FFAB00';
|
||||
return '#00C0FF';
|
||||
},
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 242, 255, 0.6)'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map-container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.map-container .chart {
|
||||
flex: 1;
|
||||
min-height: 600px;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(0, 20, 60, 0.4) 0%,
|
||||
rgba(0, 40, 100, 0.3) 100%);
|
||||
border-radius: 1rem;
|
||||
border: 2px solid rgba(0, 192, 255, 0.3);
|
||||
box-shadow: 0 8px 24px rgba(0, 192, 255, 0.2);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.map-rank-panel {
|
||||
width: 300px;
|
||||
border-radius: 1rem;
|
||||
border: 2px solid rgba(0, 192, 255, 0.3);
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 192, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 2px solid rgba(0, 242, 255, 0.3);
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
background: rgba(0, 192, 255, 0.08);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(0, 192, 255, 0.2);
|
||||
border-left: 3px solid #00A0FF;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.rank-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.15), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.rank-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.rank-item:hover {
|
||||
background: rgba(0, 192, 255, 0.2);
|
||||
border-color: #00F2FF;
|
||||
border-left-color: #00F2FF;
|
||||
box-shadow: 0 6px 16px rgba(0, 242, 255, 0.3);
|
||||
transform: translateX(5px) scale(1.02);
|
||||
}
|
||||
|
||||
.rank-num {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.rank-num.rank-1 {
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.rank-num.rank-2 {
|
||||
background: linear-gradient(135deg, #E8E8E8, #C0C0C0);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 4px 12px rgba(192, 192, 192, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.rank-num.rank-3 {
|
||||
background: linear-gradient(135deg, #CD7F32, #B8733C);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(205, 127, 50, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.rank-num.rank-4,
|
||||
.rank-num.rank-5 {
|
||||
background: rgba(0, 192, 255, 0.2);
|
||||
color: #00C0FF;
|
||||
font-weight: bold;
|
||||
border: 2px solid rgba(0, 192, 255, 0.4);
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.rank-score {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #00F2FF;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
468
src/views/Jyh/security/components/ChinaSecurityMap.vue
Normal file
468
src/views/Jyh/security/components/ChinaSecurityMap.vue
Normal file
@@ -0,0 +1,468 @@
|
||||
<template>
|
||||
<div class="china-security-map">
|
||||
<div ref="chartDiv" class="map-chart"></div>
|
||||
|
||||
<!-- 左侧省份威胁排行 -->
|
||||
<div class="info-panel panel-left">
|
||||
<div class="panel-title">🏛️ 省份威胁排行</div>
|
||||
<div class="province-ranking">
|
||||
<div class="rank-item" v-for="(item, index) in provinceRanking" :key="index">
|
||||
<div class="rank-badge" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
|
||||
<div class="rank-info">
|
||||
<div class="rank-province">{{ item.province }}</div>
|
||||
<div class="rank-threats">{{ item.threats.toLocaleString() }} 威胁</div>
|
||||
</div>
|
||||
<div class="rank-indicator" :style="{ background: item.riskLevel === 'high' ? '#ef4444' : item.riskLevel === 'medium' ? '#f59e0b' : '#10b981' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧安全态势面板 -->
|
||||
<div class="info-panel panel-right">
|
||||
<div class="panel-title">📈 安全态势分析</div>
|
||||
<div class="security-stats">
|
||||
<div class="stat-item" v-for="(stat, index) in securityStats" :key="index">
|
||||
<div class="stat-icon" :style="{ color: stat.color }">{{ stat.icon }}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" :style="{ color: stat.color }">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
<div class="stat-trend" :class="stat.trend">
|
||||
{{ stat.trend === 'up' ? '↗' : stat.trend === 'down' ? '↘' : '→' }} {{ stat.change }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 响应式数据
|
||||
const chartDiv = ref(null)
|
||||
const myChart = ref(null)
|
||||
|
||||
// 省份威胁排行
|
||||
const provinceRanking = ref([
|
||||
{ province: '北京', threats: 8420, riskLevel: 'high' },
|
||||
{ province: '上海', threats: 7350, riskLevel: 'high' },
|
||||
{ province: '广东', threats: 6870, riskLevel: 'high' },
|
||||
{ province: '浙江', threats: 5540, riskLevel: 'medium' },
|
||||
{ province: '江苏', threats: 4320, riskLevel: 'medium' },
|
||||
{ province: '山东', threats: 3890, riskLevel: 'medium' },
|
||||
{ province: '四川', threats: 2650, riskLevel: 'low' }
|
||||
])
|
||||
|
||||
// 安全态势统计
|
||||
const securityStats = ref([
|
||||
{ icon: '🔥', label: '活跃攻击', value: '2,847', color: '#ef4444', trend: 'up', change: 15 },
|
||||
{ icon: '🛡️', label: '防护成功', value: '15,692', color: '#10b981', trend: 'up', change: 8 },
|
||||
{ icon: '⚠️', label: '高危漏洞', value: '156', color: '#f59e0b', trend: 'down', change: 12 },
|
||||
{ icon: '🎯', label: '精准拦截', value: '98.7%', color: '#8b5cf6', trend: 'up', change: 2 }
|
||||
])
|
||||
|
||||
// 主要城市坐标映射
|
||||
const geoCoordMap = {
|
||||
'北京': [116.4074, 39.9042],
|
||||
'上海': [121.4737, 31.2304],
|
||||
'广州': [113.2644, 23.1291],
|
||||
'深圳': [114.0579, 22.5431],
|
||||
'杭州': [120.1551, 30.2741],
|
||||
'南京': [118.7969, 32.0603],
|
||||
'武汉': [114.3054, 30.5931],
|
||||
'成都': [104.0665, 30.5723],
|
||||
'西安': [108.9398, 34.3416],
|
||||
'重庆': [106.5516, 29.5630],
|
||||
'天津': [117.2008, 39.0842],
|
||||
'沈阳': [123.4315, 41.8057],
|
||||
'长沙': [112.9388, 28.2282],
|
||||
'郑州': [113.6254, 34.7466],
|
||||
'济南': [117.1205, 36.6519],
|
||||
'哈尔滨': [126.5358, 45.8023],
|
||||
'长春': [125.3245, 43.8868],
|
||||
'石家庄': [114.5149, 38.0428],
|
||||
'太原': [112.5489, 37.8706],
|
||||
'呼和浩特': [111.7519, 40.8414]
|
||||
}
|
||||
|
||||
import { loadChinaMap } from '@/utils/mapLoader'
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartDiv.value) return
|
||||
|
||||
// 省份威胁热力数据
|
||||
const provinceData = [
|
||||
{ name: '北京', value: 100 },
|
||||
{ name: '上海', value: 95 },
|
||||
{ name: '广东', value: 90 },
|
||||
{ name: '浙江', value: 75 },
|
||||
{ name: '江苏', value: 70 },
|
||||
{ name: '山东', value: 65 },
|
||||
{ name: '四川', value: 60 },
|
||||
{ name: '湖北', value: 55 },
|
||||
{ name: '河南', value: 50 },
|
||||
{ name: '湖南', value: 45 },
|
||||
{ name: '安徽', value: 40 },
|
||||
{ name: '河北', value: 38 },
|
||||
{ name: '福建', value: 35 },
|
||||
{ name: '江西', value: 32 },
|
||||
{ name: '重庆', value: 30 },
|
||||
{ name: '陕西', value: 28 },
|
||||
{ name: '辽宁', value: 25 },
|
||||
{ name: '天津', value: 22 },
|
||||
{ name: '山西', value: 20 },
|
||||
{ name: '吉林', value: 18 },
|
||||
{ name: '黑龙江', value: 15 },
|
||||
{ name: '内蒙古', value: 12 },
|
||||
{ name: '广西', value: 25 },
|
||||
{ name: '海南', value: 10 },
|
||||
{ name: '贵州', value: 15 },
|
||||
{ name: '云南', value: 20 },
|
||||
{ name: '西藏', value: 5 },
|
||||
{ name: '甘肃', value: 8 },
|
||||
{ name: '青海', value: 3 },
|
||||
{ name: '宁夏', value: 6 },
|
||||
{ name: '新疆', value: 10 },
|
||||
{ name: '台湾', value: 30 },
|
||||
{ name: '香港', value: 25 },
|
||||
{ name: '澳门', value: 15 }
|
||||
]
|
||||
|
||||
// 安全监控节点
|
||||
const securityNodes = [
|
||||
{ name: '北京安全中心', value: [...geoCoordMap['北京'], 100] },
|
||||
{ name: '上海监控点', value: [...geoCoordMap['上海'], 85] },
|
||||
{ name: '广州分析中心', value: [...geoCoordMap['广州'], 75] },
|
||||
{ name: '深圳预警站', value: [...geoCoordMap['深圳'], 70] },
|
||||
{ name: '杭州情报点', value: [...geoCoordMap['杭州'], 65] },
|
||||
{ name: '南京监测站', value: [...geoCoordMap['南京'], 60] },
|
||||
{ name: '武汉防护点', value: [...geoCoordMap['武汉'], 55] },
|
||||
{ name: '成都安全站', value: [...geoCoordMap['成都'], 50] }
|
||||
]
|
||||
|
||||
// 攻击路径数据
|
||||
const attackPaths = [
|
||||
{ coords: [geoCoordMap['北京'], geoCoordMap['上海']] },
|
||||
{ coords: [geoCoordMap['广州'], geoCoordMap['深圳']] },
|
||||
{ coords: [geoCoordMap['杭州'], geoCoordMap['南京']] },
|
||||
{ coords: [geoCoordMap['武汉'], geoCoordMap['成都']] }
|
||||
]
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
// 视觉映射组件
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
left: '20',
|
||||
bottom: '20',
|
||||
text: ['高风险', '低风险'],
|
||||
textStyle: { color: '#64748b', fontSize: 10 },
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8', '#0ea5e9']
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(255,255,255,0.95)',
|
||||
borderColor: '#e2e8f0',
|
||||
textStyle: { color: '#1f2937' },
|
||||
formatter: function(params) {
|
||||
if(params.seriesType === 'effectScatter') {
|
||||
return `${params.marker} ${params.name}<br/>安全指数: ${params.value[2]}`
|
||||
}
|
||||
if(!params.value) return params.name + ': 无数据'
|
||||
return `${params.name}<br/>威胁等级: ${params.value}`
|
||||
}
|
||||
},
|
||||
|
||||
geo: {
|
||||
map: 'china',
|
||||
roam: true,
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
color: '#64748b'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#f8fafc',
|
||||
borderColor: '#cbd5e1',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
color: '#1f2937'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#0ea5e9',
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(14, 165, 233, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
// 省份威胁热力图
|
||||
{
|
||||
name: '威胁分布',
|
||||
type: 'map',
|
||||
geoIndex: 0,
|
||||
data: provinceData
|
||||
},
|
||||
|
||||
// 安全监控节点
|
||||
{
|
||||
name: '安全节点',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: securityNodes,
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 8
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
scale: 2.5
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
color: '#1f2937',
|
||||
fontSize: 9,
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 1
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#10b981',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#10b981'
|
||||
},
|
||||
zlevel: 2
|
||||
},
|
||||
|
||||
// 攻击路径 (红色飞线)
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4,
|
||||
trailLength: 0.7,
|
||||
color: '#ef4444',
|
||||
symbolSize: 3
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#ef4444',
|
||||
width: 0,
|
||||
curveness: 0.2
|
||||
},
|
||||
data: attackPaths
|
||||
},
|
||||
|
||||
// 静态连线背景
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 0,
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: 6,
|
||||
effect: { show: false },
|
||||
lineStyle: {
|
||||
color: '#ef4444',
|
||||
width: 1,
|
||||
opacity: 0.3,
|
||||
curveness: 0.2
|
||||
},
|
||||
data: attackPaths
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.value = echarts.init(chartDiv.value)
|
||||
myChart.value.setOption(option)
|
||||
}
|
||||
|
||||
// 组件挂载
|
||||
onMounted(async () => {
|
||||
await loadChinaMap()
|
||||
initChart()
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value && myChart.value.resize()
|
||||
})
|
||||
})
|
||||
|
||||
// 组件卸载
|
||||
onUnmounted(() => {
|
||||
if (myChart.value) {
|
||||
myChart.value.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', () => {
|
||||
myChart.value && myChart.value.resize()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.china-security-map {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 信息面板通用样式 */
|
||||
.info-panel {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 260px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(14, 165, 233, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
padding: 16px;
|
||||
z-index: 10;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.panel-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0ea5e9;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(14, 165, 233, 0.2);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-left { left: 20px; }
|
||||
.panel-right { right: 20px; }
|
||||
|
||||
/* 省份威胁排行 */
|
||||
.province-ranking {
|
||||
.rank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(14, 165, 233, 0.05);
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-right: 12px;
|
||||
|
||||
&.rank-1 { background: #ef4444; }
|
||||
&.rank-2 { background: #f97316; }
|
||||
&.rank-3 { background: #eab308; }
|
||||
&.rank-4, &.rank-5, &.rank-6, &.rank-7 { background: #6b7280; }
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
flex: 1;
|
||||
|
||||
.rank-province {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.rank-threats {
|
||||
font-size: 10px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 安全态势统计 */
|
||||
.security-stats {
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(14, 165, 233, 0.05);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
&.up { color: #ef4444; }
|
||||
&.down { color: #10b981; }
|
||||
&.stable { color: #6b7280; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.info-panel {
|
||||
width: 220px;
|
||||
padding: 12px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.panel-left { left: 15px; }
|
||||
.panel-right { right: 15px; }
|
||||
}
|
||||
</style>
|
||||
371
src/views/Jyh/security/components/ThreatIntelMap.vue
Normal file
371
src/views/Jyh/security/components/ThreatIntelMap.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
在 Vue 3 项目中，直接搬运 Vue 2 代码不生效，主要原因有三点：生命周期钩子的变化、Ref 获取方式的变化、以及 全局变量挂载时机。
|
||||
|
||||
以下是针对 Vue 3 组合式 API (Composition API) 优化后的代码，建议直接替换：
|
||||
|
||||
核心修改说明：
|
||||
ref 声明：Vue 3 需要使用 const chartDiv = ref(null) 来声明模板引用。
|
||||
|
||||
生命周期：mounted 变为 onMounted，beforeDestroy 变为 onBeforeUnmount。
|
||||
|
||||
挂载时机：确保在 import world.js 之前，window.echarts 已经被赋值，否则 world.js 执行时依然会因为找不到 echarts 而报错。
|
||||
|
||||
Vue 3 适配版代码
|
||||
代码段
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div ref="chartDiv" class="global-map"></div>
|
||||
|
||||
<div class="panel panel-left">
|
||||
<div class="panel-title">🛡️ 漏洞类型分布 (Top 5)</div>
|
||||
<div class="stat-list">
|
||||
<div class="stat-item" v-for="(item, index) in vulnStats" :key="index">
|
||||
<div class="stat-label">
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="stat-value">{{ item.value }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: item.value + '%', background: item.color }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-right">
|
||||
<div class="panel-title">🌍 威胁情报地域排行</div>
|
||||
<div class="rank-list">
|
||||
<div class="rank-item" v-for="(item, index) in regionStats" :key="index">
|
||||
<span class="rank-num" :class="'top-' + (index + 1)">{{ index + 1 }}</span>
|
||||
<span class="rank-name">{{ item.name }}</span>
|
||||
<span class="rank-score">{{ item.score.toLocaleString() }} 次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade-slide">
|
||||
<div v-if="currentAlert" class="alert-card">
|
||||
<div class="alert-header">
|
||||
<span class="alert-icon">⚠️</span> 实时情报监测
|
||||
</div>
|
||||
<div class="alert-content">
|
||||
<div class="alert-title">{{ currentAlert.title }}</div>
|
||||
<div class="alert-desc">{{ currentAlert.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import worldJson from './world.json';
|
||||
|
||||
// 响应式数据
|
||||
const chartDiv = ref(null);
|
||||
let myChart = null;
|
||||
let timer = null;
|
||||
|
||||
const vulnStats = ref([
|
||||
{ name: 'XSS 跨站脚本', value: 32.1, color: '#ef4444' },
|
||||
{ name: 'SQL 注入', value: 11.9, color: '#f97316' },
|
||||
{ name: '内存缓冲区溢出', value: 10.9, color: '#eab308' },
|
||||
{ name: '输入验证不当', value: 9.3, color: '#3b82f6' },
|
||||
{ name: '信息泄露', value: 8.0, color: '#10b981' },
|
||||
]);
|
||||
|
||||
const regionStats = ref([
|
||||
{ name: 'United States', score: 435202 },
|
||||
{ name: 'India', score: 252054 },
|
||||
{ name: 'China (中国)', score: 184085 },
|
||||
{ name: 'Brazil', score: 174811 },
|
||||
{ name: 'Germany', score: 126397 },
|
||||
]);
|
||||
|
||||
const alerts = [
|
||||
{ title: "高危漏洞通告", desc: "Apache Log4j2 远程代码执行漏洞复现" },
|
||||
{ title: "僵尸网络活动", desc: "Mirai 变种正在扫描 IoT 设备端口 23" },
|
||||
{ title: "APT 组织活动", desc: "OceanLotus 组织针对金融行业的钓鱼攻击" },
|
||||
];
|
||||
|
||||
const currentAlert = ref(null);
|
||||
let alertIndex = 0;
|
||||
|
||||
const geoCoordMap = {
|
||||
'Beijing': [116.407395, 39.904211],
|
||||
'Shanghai': [121.473701, 31.230416],
|
||||
'Guangzhou': [113.264385, 23.129112],
|
||||
'Chengdu': [104.066541, 30.572269],
|
||||
'Washington': [-77.036871, 38.907192],
|
||||
'Moscow': [37.6173, 55.7558],
|
||||
};
|
||||
|
||||
// 逻辑方法
|
||||
const startAlertRotation = () => {
|
||||
currentAlert.value = alerts[0];
|
||||
timer = setInterval(() => {
|
||||
alertIndex = (alertIndex + 1) % alerts.length;
|
||||
currentAlert.value = null;
|
||||
setTimeout(() => {
|
||||
currentAlert.value = alerts[alertIndex];
|
||||
}, 500);
|
||||
}, 3500);
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
if (!chartDiv.value) return;
|
||||
echarts.registerMap('world', worldJson);
|
||||
const mapData = [
|
||||
{ name: 'China', value: 100 },
|
||||
{ name: 'United States', value: 80 },
|
||||
{ name: 'Russia', value: 60 },
|
||||
{ name: 'Brazil', value: 40 },
|
||||
{ name: 'Canada', value: 30 },
|
||||
{ name: 'Australia', value: 20 },
|
||||
{ name: 'India', value: 50 },
|
||||
{ name: 'Germany', value: 45 },
|
||||
{ name: 'United Kingdom', value: 40 },
|
||||
{ name: 'France', value: 35 },
|
||||
];
|
||||
|
||||
const scatterData = [
|
||||
{ name: '北京中心', value: [...geoCoordMap['Beijing'], 100] },
|
||||
{ name: '上海节点', value: [...geoCoordMap['Shanghai'], 80] },
|
||||
{ name: '广州节点', value: [...geoCoordMap['Guangzhou'], 70] },
|
||||
{ name: '成都节点', value: [...geoCoordMap['Chengdu'], 60] },
|
||||
{ name: '威胁源-US', value: [...geoCoordMap['Washington'], 90] },
|
||||
{ name: '威胁源-RU', value: [...geoCoordMap['Moscow'], 85] },
|
||||
];
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
left: '30',
|
||||
bottom: '30',
|
||||
text: ['高风险', '低风险'],
|
||||
textStyle: { color: '#fff' },
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#1e3c72', '#2a5298', '#24b6d8', '#facc15', '#ef4444']
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
borderColor: '#415A77',
|
||||
textStyle: { color: '#fff' },
|
||||
formatter: (params) => {
|
||||
if (params.seriesType === 'effectScatter') {
|
||||
return `${params.marker} ${params.name}<br/>威胁指数: ${params.value[2]}`;
|
||||
}
|
||||
if (!params.value) return params.name + ': 无数据';
|
||||
return `${params.name}<br/>受影响程度: ${params.value}`;
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'world',
|
||||
roam: true,
|
||||
zoom: 1.2,
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
areaColor: '#0f172a',
|
||||
borderColor: '#1e293b',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
areaColor: '#3b82f6',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Threat Distribution',
|
||||
type: 'map',
|
||||
geoIndex: 0,
|
||||
data: mapData
|
||||
},
|
||||
{
|
||||
name: 'Key Nodes',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: scatterData,
|
||||
symbolSize: (val) => val[2] / 5,
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
scale: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
textBorderColor: '#000',
|
||||
textBorderWidth: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#facc15',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#facc15'
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart = echarts.init(chartDiv.value);
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(async () => {
|
||||
await nextTick(); // 确保 DOM 已渲染
|
||||
setChart();
|
||||
startAlertRotation();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
}
|
||||
});
|
||||
|
||||
const handleResize = () => {
|
||||
myChart && myChart.resize();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// 背景：深邃的科技蓝黑渐变
|
||||
background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
|
||||
overflow: hidden;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.global-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- 侧边面板通用样式 --- */
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 260px;
|
||||
background: rgba(15, 23, 42, 0.8); /* 半透明深色背景 */
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(56, 189, 248, 0.2); /* 科技蓝边框 */
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
z-index: 10;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.panel-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #38bdf8;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-left { left: 20px; }
|
||||
.panel-right { right: 20px; }
|
||||
|
||||
/* 左侧：统计列表 */
|
||||
.stat-item {
|
||||
margin-bottom: 12px;
|
||||
.stat-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧：排行列表 */
|
||||
.rank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
.rank-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
color: #94a3b8;
|
||||
font-weight: bold;
|
||||
|
||||
&.top-1 { background: #ef4444; color: white; }
|
||||
&.top-2 { background: #f97316; color: white; }
|
||||
&.top-3 { background: #eab308; color: white; }
|
||||
}
|
||||
|
||||
.rank-name { flex: 1; color: #e2e8f0; }
|
||||
.rank-score { color: #38bdf8; font-weight: bold; }
|
||||
}
|
||||
|
||||
/* 底部告警卡片 (保持原有风格) */
|
||||
.alert-card {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* 居中显示 */
|
||||
width: 400px;
|
||||
background: rgba(17, 25, 40, 0.9);
|
||||
border: 1px solid #ef4444;
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
|
||||
z-index: 10;
|
||||
|
||||
.alert-icon { font-size: 20px; animation: pulse 1.5s infinite; }
|
||||
.alert-content {
|
||||
.alert-title { color: #ef4444; font-weight: bold; font-size: 14px; margin-bottom: 2px; }
|
||||
.alert-desc { color: #fff; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.2); opacity: 0.8; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.fade-slide-enter-active, .fade-slide-leave-active { transition: all 0.5s ease; }
|
||||
.fade-slide-enter-from, .fade-slide-leave-to { opacity: 0; transform: translate(-50%, 20px); }
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user