Tcode运营平台改造升级-产品服务页面根据UI样式进行美化
This commit is contained in:
fmk1023
BIN
src/assets/v3/bj11.png
Normal file
BIN
src/assets/v3/bj11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -10,7 +10,7 @@
|
||||
<li><router-link to="/home" class="LNK">首页</router-link></li>
|
||||
|
||||
<li class="has-submenu">
|
||||
<router-link to="/products" class="LNK">产品服务</router-link>
|
||||
<router-link to="/ProductServices" class="LNK">产品服务</router-link>
|
||||
</li>
|
||||
|
||||
<li><router-link to="/solutions" class="LNK">解决方案</router-link></li>
|
||||
|
||||
@@ -265,6 +265,19 @@ export default [
|
||||
asideMenu: 'drawer' // 左侧菜单抽屉模式
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/ProductServices',
|
||||
name: 'ProductServices',
|
||||
component: () => import('@/views/Jyh/ProductServices/index.vue'),
|
||||
meta: {
|
||||
title: '可信开源态势感知平台 (源感)',
|
||||
reportTitle: '可信开源态势感知平台 (源感)',
|
||||
className: 'w-full min-w-full',
|
||||
hiddenFooter: true,
|
||||
hasMobile: true,
|
||||
asideMenu: 'drawer' // 左侧菜单抽屉模式
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/ProductServices/1',
|
||||
name: 'ProductServices1',
|
||||
|
||||
@@ -1,41 +1,103 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">全栈式开源安全检测与治理工具链</p></div>
|
||||
<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>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pg-evaluate .mod-banner {
|
||||
background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
|
||||
background-size: auto 100%;
|
||||
height: 460px;
|
||||
position: relative
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 177px;
|
||||
width: 1292px
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt .zh {
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px;
|
||||
text-align: left
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xCenter {
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
.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>
|
||||
@@ -1,41 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">全网态势，一屏尽览</p></div>
|
||||
<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>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pg-evaluate .mod-banner {
|
||||
background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
|
||||
background-size: auto 100%;
|
||||
height: 460px;
|
||||
position: relative
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 177px;
|
||||
width: 1292px
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt .zh {
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px;
|
||||
text-align: left
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xCenter {
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
.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>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product1 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +16,10 @@ 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>('');
|
||||
|
||||
@@ -34,7 +43,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -1,41 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">懂代码，更懂安全的 AI 专家</p></div>
|
||||
<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>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pg-evaluate .mod-banner {
|
||||
background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
|
||||
background-size: auto 100%;
|
||||
height: 460px;
|
||||
position: relative
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 177px;
|
||||
width: 1292px
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt .zh {
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px;
|
||||
text-align: left
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xCenter {
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
.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>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product2 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +16,10 @@ 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>('');
|
||||
|
||||
@@ -34,7 +43,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -1,41 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">透视黑盒，溯源无忧</p></div>
|
||||
<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>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pg-evaluate .mod-banner {
|
||||
background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
|
||||
background-size: auto 100%;
|
||||
height: 460px;
|
||||
position: relative
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 177px;
|
||||
width: 1292px
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt .zh {
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px;
|
||||
text-align: left
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xCenter {
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
.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>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product3 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +16,10 @@ 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>('');
|
||||
|
||||
@@ -34,7 +43,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -1,41 +1,102 @@
|
||||
<template>
|
||||
<div class="mod-banner">
|
||||
<div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">守护终端，运行无界</p></div>
|
||||
<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>
|
||||
export default {
|
||||
name: "ModBanner"
|
||||
}
|
||||
<script setup>
|
||||
// 使用 script setup 语法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pg-evaluate .mod-banner {
|
||||
background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
|
||||
background-size: auto 100%;
|
||||
height: 460px;
|
||||
position: relative
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 177px;
|
||||
width: 1292px
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 2; /* 位于遮罩层上方 */
|
||||
}
|
||||
|
||||
.pg-evaluate .mod-banner .txt .zh {
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
line-height: 56px;
|
||||
text-align: left
|
||||
.txt-content {
|
||||
max-width: 800px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xCenter {
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
.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>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModTotal />
|
||||
|
||||
<div class="secondEdition">
|
||||
<div class="product-content pg-evaluate">
|
||||
<ModBanner />
|
||||
<div class="component-box">
|
||||
<Product4 />
|
||||
</div>
|
||||
<ModTotal />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +16,10 @@ 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>('');
|
||||
|
||||
@@ -34,7 +43,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pg-evaluate {
|
||||
.product-content {
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="pg-evaluate">
|
||||
<ModBanner />
|
||||
<ModTabs :defaultTab="activeTab" />
|
||||
<ModContent />
|
||||
<ModTotal />
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,28 +9,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ModBanner from './ModBanner.vue';
|
||||
import ModTabs from './ModTabs.vue';
|
||||
import ModContent from './ModContent.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>
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user