feat: 移动端适配
This commit is contained in:
parent
adbbcc321d
commit
6961b3c804
BIN
txw-mhzc-web/src/pages/index/assets/logo.png
Normal file
BIN
txw-mhzc-web/src/pages/index/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 顶部菜单栏 -->
|
||||
<div class="nav-box">
|
||||
<div class="logo-box">
|
||||
<div class="logo-box" @click="goHome">
|
||||
<img src="@/pages/index/assets/logo-name.png">
|
||||
</div>
|
||||
<div class="menu-box">
|
||||
@ -20,9 +20,9 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="option-wrapper">
|
||||
<div v-if="loginFlag" class="option-box">
|
||||
<div class="gzt">
|
||||
<div class="gzt" @click="goyhzx">
|
||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||||
<span> 工作台</span>
|
||||
</div>
|
||||
@ -31,15 +31,61 @@
|
||||
<div style="cursor: pointer;" @click="logoutHandler">退出登录</div>
|
||||
</div>
|
||||
<div v-else class="option-box">
|
||||
<div class="gzt">
|
||||
<!-- <div class="gzt">
|
||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||||
<span> 工作台</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
||||
<div>|</div>
|
||||
<div style="cursor: pointer;" @click="gologin">登录</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端汉堡菜单按钮 -->
|
||||
<div class="hamburger-btn" @click="toggleMobileMenu">
|
||||
<div :class="['hamburger-icon', { active: mobileMenuOpen }]">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端菜单 -->
|
||||
<div :class="['mobile-menu', { open: mobileMenuOpen }]">
|
||||
<div class="mobile-menu-overlay" @click="toggleMobileMenu"></div>
|
||||
<div class="mobile-menu-content">
|
||||
<div class="mobile-menu-header">
|
||||
<img src="@/pages/index/assets/logo-name.png">
|
||||
<div class="close-btn" @click="toggleMobileMenu">×</div>
|
||||
</div>
|
||||
<div class="mobile-menu-list">
|
||||
<div v-for="(menu, index) in menuOptions" :key="index">
|
||||
<!-- 有子菜单的项 -->
|
||||
<t-dropdown v-if="menu.child" trigger="click" :options="menu.child" @click="handleMobileDropdownClick">
|
||||
<div class="mobile-menu-item" :class="{'active': curPage == menu.name}">
|
||||
<img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
|
||||
<span>{{ menu.title }}</span>
|
||||
<img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
|
||||
</div>
|
||||
</t-dropdown>
|
||||
<!-- 无子菜单的项 -->
|
||||
<div v-else class="mobile-menu-item" :class="{'active': curPage == menu.name, 'disable': menu.disable}" @click="gotoIfreamPage(menu)">
|
||||
<img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
|
||||
<span>{{ menu.title }}</span>
|
||||
<img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu-footer">
|
||||
<div v-if="loginFlag" class="mobile-auth-btns">
|
||||
<div class="mobile-auth-btn" @click="goyhzx">用户中心</div>
|
||||
<div class="mobile-auth-btn logout" @click="logoutHandler">退出登录</div>
|
||||
</div>
|
||||
<div v-else class="mobile-auth-btns">
|
||||
<div class="mobile-auth-btn activate">激活</div>
|
||||
<div class="mobile-auth-btn login" @click="gologin">登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -56,6 +102,7 @@ export default {
|
||||
return {
|
||||
curPage: "home",
|
||||
loginFlag: false, //是否已完成登录
|
||||
mobileMenuOpen: false, //移动端菜单是否展开
|
||||
// 路由路径到菜单名的映射
|
||||
routeToMenuMap: {
|
||||
'/home': 'home',
|
||||
@ -65,6 +112,9 @@ export default {
|
||||
'/tjrsc': 'fwsc',
|
||||
'/tsjsc': 'fwsc',
|
||||
'/yhzx': 'yhzx',
|
||||
'/gxnlpt': 'gxnlpt',
|
||||
'/qych': 'qych',
|
||||
'/hyzt': 'hyzt',
|
||||
'/login': 'login',
|
||||
},
|
||||
|
||||
@ -126,7 +176,7 @@ export default {
|
||||
name: 'tbgtg',
|
||||
title: '碳报告托管：',
|
||||
value: 'tgbcz',
|
||||
content: '碳报告存证',
|
||||
content: '碳报告托管',
|
||||
divider: true,
|
||||
needLogin: true,
|
||||
clientId: 'client_id_tfwzx',
|
||||
@ -153,7 +203,8 @@ export default {
|
||||
content: '碳金融市场',
|
||||
divider: true,
|
||||
parentName: 'fwsc',
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'txqsc',
|
||||
title: '碳需求市场',
|
||||
value: 'txqsc',
|
||||
@ -172,19 +223,19 @@ export default {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'gxnl',
|
||||
name: 'gxnlpt',
|
||||
title: '共性能力',
|
||||
disable: true
|
||||
// disable: true
|
||||
},
|
||||
{
|
||||
name: 'qych',
|
||||
title: '企业出海',
|
||||
disable: true
|
||||
// disable: true
|
||||
},
|
||||
{
|
||||
name: 'hyzt',
|
||||
title: '行业专题',
|
||||
disable: true
|
||||
// disable: true
|
||||
},
|
||||
]
|
||||
};
|
||||
@ -227,6 +278,26 @@ export default {
|
||||
},
|
||||
beforeUnmount() { },
|
||||
methods: {
|
||||
// 切换移动端菜单
|
||||
toggleMobileMenu() {
|
||||
this.mobileMenuOpen = !this.mobileMenuOpen;
|
||||
document.body.style.overflow = this.mobileMenuOpen ? 'hidden' : '';
|
||||
},
|
||||
// 关闭移动端菜单
|
||||
closeMobileMenu() {
|
||||
this.mobileMenuOpen = false;
|
||||
document.body.style.overflow = '';
|
||||
},
|
||||
// 返回首页
|
||||
goHome() {
|
||||
this.$router.push('/home');
|
||||
this.closeMobileMenu();
|
||||
},
|
||||
// 移动端子菜单点击
|
||||
handleMobileDropdownClick(menu) {
|
||||
this.handleDropdownClick(menu);
|
||||
this.closeMobileMenu();
|
||||
},
|
||||
// 根据当前路由更新菜单选中状态
|
||||
updateCurPageByRoute() {
|
||||
const path = this.$route.path;
|
||||
@ -282,6 +353,8 @@ export default {
|
||||
}
|
||||
|
||||
this.curPage = menu.name;
|
||||
// 关闭移动端菜单
|
||||
this.closeMobileMenu();
|
||||
let iframeUrl = menu.iframeUrl;
|
||||
if (iframeUrl) {
|
||||
//调用login.js内的authorize方法（如果需要的话）
|
||||
@ -317,12 +390,14 @@ export default {
|
||||
}
|
||||
},
|
||||
gologin() {
|
||||
this.closeMobileMenu();
|
||||
this.$router.push("/login")
|
||||
// window.location.href = `/view/mhzc/login`;
|
||||
},
|
||||
|
||||
goyhzx() {
|
||||
this.$router.push("/yhzx")
|
||||
this.closeMobileMenu();
|
||||
this.$router.push("/yhzx/gzt")
|
||||
// window.location.href = `/view/mhzc/yhzx`;
|
||||
},
|
||||
|
||||
@ -374,6 +449,7 @@ export default {
|
||||
},
|
||||
|
||||
async logoutHandler() {
|
||||
this.closeMobileMenu();
|
||||
const res = await logout();
|
||||
const resVO = res.data;
|
||||
if (resVO.dcdz) {
|
||||
@ -416,6 +492,11 @@ export default {
|
||||
}
|
||||
.logo-box {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
@ -437,6 +518,7 @@ export default {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
justify-content: space-around;
|
||||
@ -473,4 +555,223 @@ export default {
|
||||
.meun-title-disable {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* 汉堡菜单按钮 */
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.hamburger-icon span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(2) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(3) {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(1) {
|
||||
top: 8px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(3) {
|
||||
top: 8px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* 移动端菜单 */
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-menu.open {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mobile-menu-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
max-width: 80%;
|
||||
background: #fff;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-menu.open .mobile-menu-content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobile-menu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: #009a29;
|
||||
}
|
||||
|
||||
.mobile-menu-header img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-menu-list {
|
||||
padding: 10px 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mobile-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 20px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-menu-item img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mobile-menu-item .arrow {
|
||||
margin-left: auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mobile-menu-item.active {
|
||||
color: #009a29;
|
||||
background: #f0f9f0;
|
||||
}
|
||||
|
||||
.mobile-menu-item.disable {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mobile-menu-footer {
|
||||
padding: 16px 20px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-auth-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-auth-btn {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
border-radius: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mobile-auth-btn.activate {
|
||||
color: #333;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.mobile-auth-btn.logout {
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.nav-box {
|
||||
height: 64px;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-box {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -56,6 +56,10 @@ const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`,
|
||||
routes: [mainRoutes],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
// 每次切换路由时滚动到顶部
|
||||
return { x: 0, y: 0 };
|
||||
},
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
@ -24,7 +24,11 @@
|
||||
<div class="content-area">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<aside class="filter-sidebar">
|
||||
<div class="filter-sidebar-content">
|
||||
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
|
||||
<span class="toggle-text">筛选</span>
|
||||
<span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
|
||||
</div>
|
||||
<div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
|
||||
<!-- 内容搜索 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">内容搜索</div>
|
||||
@ -257,6 +261,8 @@ export default {
|
||||
rzVisible: false,
|
||||
// 发布成功弹窗
|
||||
publishSuccessVisible: false,
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -563,6 +569,53 @@ export default {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 移动端筛选栏折叠
|
||||
.filter-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.toggle-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
max-height: 1000px;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-sidebar-content.collapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
@ -902,8 +955,124 @@ export default {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fwsc-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
flex-direction: column;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
overflow-x: auto;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 12px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.fwsc-main {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.list-title-box .list-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-title-main {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
height: 60px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -54,21 +54,21 @@
|
||||
<h3 class="service-card-title">碳金融市场</h3>
|
||||
<p class="service-card-desc">打通"碳"与"钱"的通道。提供碳质押、碳回购、绿色信贷及碳基金对接服务。</p>
|
||||
<div class="service-card-buttons">
|
||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/jrsc')">查看金融产品</t-button>
|
||||
<t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">金融机构入驻</t-button>
|
||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/tjrsc')">查看金融产品</t-button>
|
||||
<t-button theme="primary" @click.stop="goToPage('/tjrsc')">金融机构入驻</t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 碳数据市场 -->
|
||||
<div class="service-card" @click="goToPage('/fwsc/sjsc')">
|
||||
<div class="service-card" @click="goToPage('/tsjsc')">
|
||||
<div class="service-card-icon">
|
||||
<span style="font-size: 48px">📊</span>
|
||||
</div>
|
||||
<h3 class="service-card-title">碳数据市场</h3>
|
||||
<p class="service-card-desc">合规高效的碳数据流转平台。包括公共数据、社会性数据、因子库等多类数据库。</p>
|
||||
<div class="service-card-buttons">
|
||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/sjsc')">进入交易大厅</t-button>
|
||||
<t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">我要出售</t-button>
|
||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/tsjsc')">进入交易大厅</t-button>
|
||||
<t-button theme="primary" @click.stop="goToPage('/tsjsc')">我要出售</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -249,4 +249,126 @@ export default {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.services-section {
|
||||
padding: 40px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.services-section {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.breadcrumb-box {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.banner-section {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 32px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.service-card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.service-card-desc {
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.service-card-buttons {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.t-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.breadcrumb-box {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banner-section {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.service-card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,11 @@
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<aside class="filter-sidebar">
|
||||
<div class="filter-sidebar-content">
|
||||
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
|
||||
<span class="toggle-text">筛选</span>
|
||||
<span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
|
||||
</div>
|
||||
<div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
|
||||
<!-- 内容搜索 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">关键词搜索</div>
|
||||
@ -384,6 +388,8 @@ export default {
|
||||
currentProductUuid: '',
|
||||
// 用户信息
|
||||
yhxx: {},
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -713,6 +719,53 @@ export default {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
// 移动端筛选栏折叠
|
||||
.filter-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.toggle-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
max-height: 1000px;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-sidebar-content.collapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
@ -1361,14 +1414,116 @@ export default {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.jrsc-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
flex-direction: column;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
overflow-x: auto;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
.filter-sidebar-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.jrsc-main {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.list-title-box .list-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,7 +11,11 @@
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<div class="filter-sidebar">
|
||||
<div class="filter-box">
|
||||
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
|
||||
<span class="toggle-text">筛选</span>
|
||||
<span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
|
||||
</div>
|
||||
<div :class="['filter-box', { collapsed: filterCollapsed }]">
|
||||
<!-- 价格区间 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">价格区间</div>
|
||||
@ -220,6 +224,8 @@ export default {
|
||||
downloads: '18',
|
||||
},
|
||||
],
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -305,6 +311,55 @@ export default {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// 移动端筛选栏折叠
|
||||
.filter-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.toggle-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
max-height: 1000px;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-box.collapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -584,4 +639,96 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.price-range {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.price-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.price-min,
|
||||
.price-max {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 16px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-buttons .btn-reset,
|
||||
.filter-buttons .btn-confirm {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,12 @@
|
||||
<div class="page-body">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-title">数据类型</div>
|
||||
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
|
||||
<span class="toggle-text">筛选</span>
|
||||
<span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
|
||||
</div>
|
||||
<div :class="['sidebar-content', { collapsed: filterCollapsed }]">
|
||||
<div class="sidebar-title">数据类型</div>
|
||||
<div class="filter-list">
|
||||
<div
|
||||
v-for="item in dataTypeList"
|
||||
@ -37,6 +42,7 @@
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧数据库卡片列表 -->
|
||||
@ -148,7 +154,9 @@ export default {
|
||||
tags: ['公益数据'],
|
||||
price: '免费'
|
||||
}
|
||||
]
|
||||
],
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -299,12 +307,62 @@ export default {
|
||||
width: 220px;
|
||||
height: fit-content;
|
||||
min-width: 220px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// 移动端筛选栏折叠
|
||||
.filter-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.toggle-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
max-height: 1000px;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-content.collapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
@ -491,4 +549,103 @@ export default {
|
||||
background: #fff3e0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-body {
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
flex-direction: column;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
overflow-x: auto;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card-footer .t-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.database-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,11 @@
|
||||
<div class="content-area">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<aside class="filter-sidebar">
|
||||
<div class="filter-sidebar-content">
|
||||
<div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
|
||||
<span class="toggle-text">筛选</span>
|
||||
<span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
|
||||
</div>
|
||||
<div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
|
||||
<!-- 内容搜索 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-title">内容搜索</div>
|
||||
@ -246,6 +250,8 @@ export default {
|
||||
rzVisible: false,
|
||||
// 发布成功弹窗
|
||||
publishSuccessVisible: false,
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -524,6 +530,53 @@ export default {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
// 移动端筛选栏折叠
|
||||
.filter-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.toggle-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
max-height: 1000px;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-sidebar-content.collapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
@ -857,4 +910,122 @@ export default {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xqsc-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
flex-direction: column;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
overflow-x: auto;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-sidebar-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.demand-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.demand-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.demand-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-actions .t-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.xqsc-main {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.secondary-nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.list-title-box .list-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.demand-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
height: 60px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.budget-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -54,34 +54,34 @@
|
||||
<div class="option-item-box green">
|
||||
<div class="option-item-box-title">碳数字身份证</div>
|
||||
<div class="option-btn-box ">
|
||||
<div class="btn">办证指南</div>
|
||||
<div class="btn">碳证查询</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['办证指南'])">办证指南</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['碳证查询'])">碳证查询</div>
|
||||
</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">碳证核验</div>
|
||||
<div class="btn">碳证核验</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['碳证核验'])">碳证核验</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['碳证核验'])">碳证核验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item-box blue">
|
||||
<div class="option-item-box-title">国家可信碳链</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">上链指南</div>
|
||||
<div class="btn">上链标准</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['上链指南'])">上链指南</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['上链标准'])">上链标准</div>
|
||||
</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">上链工具</div>
|
||||
<div class="btn">碳证中心</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item-box cyan">
|
||||
<div class="option-item-box-title">绿色服务</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">服务市场</div>
|
||||
<div class="btn">需求市场</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['需求市场'])">需求市场</div>
|
||||
</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">数据市场</div>
|
||||
<div class="btn">数据市场</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
|
||||
<div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -250,13 +250,55 @@ import Footer from '@/pages/index/components/footer/index.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: ""
|
||||
}
|
||||
inputValue: "",
|
||||
// 按钮跳转配置
|
||||
buttonLinks: {
|
||||
// 碳数字身份证
|
||||
'办证指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
|
||||
'碳证查询': '/yhzx/qyrenzheng',
|
||||
'碳证核验': '/yhzx/qyrenzheng',
|
||||
// 国家可信碳链
|
||||
'上链指南': 'https://www.kdocs.cn/l/xxx1',
|
||||
'上链标准': 'https://www.kdocs.cn/l/xxx2',
|
||||
'上链工具': 'https://www.kdocs.cn/l/xxx3',
|
||||
'碳证中心': '/yhzx/qyrenzheng',
|
||||
// 绿色服务
|
||||
'服务市场': '/tfwsc',
|
||||
'需求市场': '/txqsc',
|
||||
'数据市场': '/tsjsc',
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Footer,
|
||||
},
|
||||
}
|
||||
methods: {
|
||||
// 封装跳转方法
|
||||
handleNavigate(link) {
|
||||
if (!link) return;
|
||||
// 判断是外部链接还是内部链接
|
||||
if (link.startsWith('http://') || link.startsWith('https://')) {
|
||||
// 外部链接，打开新窗口
|
||||
window.open(link, '_blank');
|
||||
} else {
|
||||
// 内部链接，当前窗口跳转
|
||||
this.$router.push(link);
|
||||
}
|
||||
},
|
||||
// 快捷搜索
|
||||
handleSearch() {
|
||||
if (this.inputValue) {
|
||||
console.log('搜索:', this.inputValue);
|
||||
// TODO: 实现搜索功能
|
||||
}
|
||||
},
|
||||
// 处理热门搜索点击
|
||||
handleHotSearch(keyword) {
|
||||
this.inputValue = keyword;
|
||||
this.handleSearch();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -947,19 +989,196 @@ export default {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nav-box {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 容器调整 */
|
||||
.container {
|
||||
margin-top: 192px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* .option-box {
|
||||
display: none !important;
|
||||
/* 顶部区域 */
|
||||
.top-box {
|
||||
min-height: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.top-title img {
|
||||
height: auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.top-title-desc {
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.top-search-box {
|
||||
padding: 0 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.top-search-hot {
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 选项卡片区域 */
|
||||
.top-options-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
margin-top: 40px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.option-item-box {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.option-item-box-title {
|
||||
margin-top: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.option-btn-box {
|
||||
padding: 8px 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-btn-box .btn {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* 核心驱动区域 */
|
||||
.center-box {
|
||||
padding: 30px 16px;
|
||||
}
|
||||
|
||||
.center-box-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.center-box .content-box {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.center-box .item .name1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.center-box .item .name2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.center-box .item .name3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 三栏区域 */
|
||||
.gxnl-qych-hydt-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box > div {
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box .name1 {
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box .name2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.gxnl-box .item {
|
||||
height: 50px;
|
||||
padding: 12px;
|
||||
grid-template-columns: 48px 1fr 24px;
|
||||
}
|
||||
|
||||
.gxnl-box .item .text {
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 底部区域 */
|
||||
.bottom-box {
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.bottom-box .content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.bottom-box-content-title {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.bottom-box .content .desc {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.bottom-box .content .btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板适配 */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.top-options-box {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box {
|
||||
padding: 3% 5%;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box > div {
|
||||
height: 450px;
|
||||
}
|
||||
.menu-box {
|
||||
display: none !important;
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
@ -49,13 +49,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
gotoPage(name) {
|
||||
// this.$router.push({
|
||||
// name: name
|
||||
// })
|
||||
this.$router.push({ name })
|
||||
|
||||
// this.$router.replace({ name: name, force: true })
|
||||
|
||||
window.location.href = name
|
||||
// window.location.href = name
|
||||
},
|
||||
|
||||
gotoIfreamPage(iframeUrl) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user