Merge branch 'dev'
This commit is contained in:
commit
331bb97db5
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,21 @@ export default {
|
||||
return {
|
||||
curPage: "home",
|
||||
loginFlag: false, //是否已完成登录
|
||||
mobileMenuOpen: false, //移动端菜单是否展开
|
||||
// 路由路径到菜单名的映射
|
||||
routeToMenuMap: {
|
||||
'/home': 'home',
|
||||
'/fwsc': 'fwsc',
|
||||
'/tfwsc': 'fwsc',
|
||||
'/txqsc': 'fwsc',
|
||||
'/tjrsc': 'fwsc',
|
||||
'/tsjsc': 'fwsc',
|
||||
'/yhzx': 'yhzx',
|
||||
'/gxnlpt': 'gxnlpt',
|
||||
'/qych': 'qych',
|
||||
'/hyzt': 'hyzt',
|
||||
'/login': 'login',
|
||||
},
|
||||
|
||||
menuOptions: [
|
||||
{
|
||||
@ -115,7 +176,7 @@ export default {
|
||||
name: 'tbgtg',
|
||||
title: '碳报告托管：',
|
||||
value: 'tgbcz',
|
||||
content: '碳报告存证',
|
||||
content: '碳报告托管',
|
||||
divider: true,
|
||||
needLogin: true,
|
||||
clientId: 'client_id_tfwzx',
|
||||
@ -140,7 +201,9 @@ export default {
|
||||
value: 'tjrsc',
|
||||
content: '碳金融市场',
|
||||
divider: true,
|
||||
}, {
|
||||
parentName: 'fwsc',
|
||||
},
|
||||
{
|
||||
name: 'txqsc',
|
||||
title: '碳需求市场',
|
||||
value: 'txqsc',
|
||||
@ -164,19 +227,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
|
||||
},
|
||||
]
|
||||
};
|
||||
@ -207,6 +270,46 @@ 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;
|
||||
const routeName = this.$route.name;
|
||||
|
||||
// 优先精确匹配路径
|
||||
if (this.routeToMenuMap[path]) {
|
||||
this.curPage = this.routeToMenuMap[path];
|
||||
return;
|
||||
}
|
||||
|
||||
// 尝试从路径中提取关键部分进行匹配
|
||||
if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
|
||||
this.curPage = 'fwsc';
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果都匹配不到，默认选中首页
|
||||
this.curPage = 'home';
|
||||
},
|
||||
//子菜单点击方法
|
||||
handleDropdownClick(menu) {
|
||||
this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
|
||||
@ -236,6 +339,8 @@ export default {
|
||||
}
|
||||
|
||||
this.curPage = menu.name;
|
||||
// 关闭移动端菜单
|
||||
this.closeMobileMenu();
|
||||
let iframeUrl = menu.iframeUrl;
|
||||
if (iframeUrl) {
|
||||
//调用login.js内的authorize方法
|
||||
@ -270,12 +375,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`;
|
||||
},
|
||||
|
||||
@ -327,6 +434,7 @@ export default {
|
||||
},
|
||||
|
||||
async logoutHandler() {
|
||||
this.closeMobileMenu();
|
||||
const res = await logout();
|
||||
const resVO = res.data;
|
||||
if (resVO.dcdz) {
|
||||
@ -369,6 +477,11 @@ export default {
|
||||
}
|
||||
.logo-box {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
@ -389,6 +502,7 @@ export default {
|
||||
.option-box .gzt {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@ -426,4 +540,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>
|
||||
@ -62,6 +66,17 @@
|
||||
|
||||
<!-- 右侧服务卡片列表 -->
|
||||
<div class="card-list">
|
||||
<div class="list-header">
|
||||
<div class="list-title-box">
|
||||
<span class="list-icon">🛠️</span>
|
||||
<span class="list-title">碳服务市场</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="list-count"><span class="count-dot"></span>共 {{ page.total }} 条服务</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-grid">
|
||||
<div
|
||||
v-for="(card, index) in cardList"
|
||||
:key="card.gxUuid"
|
||||
@ -107,6 +122,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
||||
@ -245,6 +261,8 @@ export default {
|
||||
rzVisible: false,
|
||||
// 发布成功弹窗
|
||||
publishSuccessVisible: false,
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -475,6 +493,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -484,28 +503,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -523,25 +569,88 @@ 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;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
@ -570,24 +679,102 @@ export default {
|
||||
// 右侧卡片列表
|
||||
.card-list {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.list-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #333 0%, #009a29 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
|
||||
.count-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(135deg, #009a29, #48C666);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc((100% - 20px) / 2);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -705,12 +892,37 @@ export default {
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
font-size: 48px;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
@ -743,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,6 +24,11 @@
|
||||
<div class="page-body">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<div class="sidebar">
|
||||
<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
|
||||
@ -33,10 +38,12 @@
|
||||
:class="{ active: selectedType === item.value }"
|
||||
@click="handleTypeChange(item.value)"
|
||||
>
|
||||
<span class="check-icon">{{ selectedType === item.value ? '✓' : '' }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧数据库卡片列表 -->
|
||||
<div class="content-area">
|
||||
@ -147,7 +154,9 @@ export default {
|
||||
tags: ['公益数据'],
|
||||
price: '免费'
|
||||
}
|
||||
]
|
||||
],
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -229,6 +238,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -238,28 +248,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,19 +307,78 @@ export default {
|
||||
width: 220px;
|
||||
height: fit-content;
|
||||
min-width: 220px;
|
||||
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;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
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 {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list {
|
||||
@ -292,25 +388,41 @@ export default {
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.check-icon {
|
||||
display: flex;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
background: #f0f9f0;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
color: #009a29;
|
||||
background: #e8f5e9;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #007a1f;
|
||||
.check-icon {
|
||||
background: #009a29;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -329,17 +441,35 @@ export default {
|
||||
}
|
||||
|
||||
.database-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -419,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,17 +24,21 @@
|
||||
<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>
|
||||
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
|
||||
</div>
|
||||
|
||||
<div class="filter-buttons">
|
||||
<t-button theme="primary" @click="onSearch">查询</t-button>
|
||||
<t-button theme="default" @click="onReset">重置</t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 服务地区 -->
|
||||
<div class="filter-section">
|
||||
@ -63,11 +67,22 @@
|
||||
<!-- 右侧需求卡片列表 -->
|
||||
<div class="demand-list">
|
||||
<div class="list-header">
|
||||
<div class="list-title-box">
|
||||
<span class="list-icon">📋</span>
|
||||
<span class="list-title">碳需求市场</span>
|
||||
<span class="list-count">共 {{ page.total }} 条需求</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="list-count"><span class="count-dot"></span>共 {{ page.total }} 条需求</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demand-grid">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>加载中...</p>
|
||||
</div>
|
||||
|
||||
<div class="demand-grid" v-else>
|
||||
<div
|
||||
v-for="card in cardList"
|
||||
:key="card.gxUuid"
|
||||
@ -103,8 +118,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
||||
<p>暂无需求信息</p>
|
||||
<div v-if="!loading && cardList.length === 0" class="empty-state">
|
||||
<div class="empty-illustration">📋</div>
|
||||
<p class="empty-text">暂无需求信息</p>
|
||||
<p class="empty-hint">敬请期待更多优质需求上线</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -233,6 +250,8 @@ export default {
|
||||
rzVisible: false,
|
||||
// 发布成功弹窗
|
||||
publishSuccessVisible: false,
|
||||
// 移动端筛选折叠状态
|
||||
filterCollapsed: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -428,6 +447,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -437,28 +457,55 @@ export default {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
border-radius: 1px;
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #009a29;
|
||||
border-bottom-color: #009a29;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #009a29;
|
||||
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #007a1f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -479,22 +526,85 @@ export default {
|
||||
.filter-sidebar-content {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
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;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: linear-gradient(180deg, #009a29, #48C666);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
@ -524,20 +634,58 @@ export default {
|
||||
.list-header {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 20px;
|
||||
.list-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.list-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #333 0%, #009a29 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
|
||||
.count-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(135deg, #009a29, #48C666);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 需求卡片网格
|
||||
@ -548,17 +696,35 @@ export default {
|
||||
}
|
||||
|
||||
.demand-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #009a29, #48C666);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -643,11 +809,77 @@ export default {
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
|
||||
.empty-illustration {
|
||||
margin-bottom: 20px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.loading-spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
border: 4px solid #e8f5e9;
|
||||
border-top-color: #009a29;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
@ -678,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>
|
||||
|
||||
@ -71,34 +71,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="handleIframeNavigate(buttonLinks['碳证查询'])">碳证查询</div>
|
||||
</div>
|
||||
<div class="option-btn-box">
|
||||
<div class="btn">碳证核验</div>
|
||||
<div class="btn">碳证核验</div>
|
||||
<div class="btn" @click="handleIframeNavigate(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>
|
||||
@ -275,6 +275,25 @@ export default {
|
||||
require('@/pages/index/assets/home-top-bg2.jpg'),
|
||||
require('@/pages/index/assets/home-top-bg3.jpg'),
|
||||
],
|
||||
inputValue: "",
|
||||
// 按钮跳转配置
|
||||
buttonLinks: {
|
||||
// 碳数字身份证
|
||||
'办证指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
|
||||
'碳证查询': 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query',
|
||||
'碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
|
||||
'跨境互通': '',
|
||||
// 国家可信碳链
|
||||
'上链指南': '',
|
||||
'上链标准': '',
|
||||
'上链工具': '',
|
||||
'碳证中心': '',
|
||||
// 绿色服务
|
||||
'服务市场': '/tfwsc',
|
||||
'需求市场': '/txqsc',
|
||||
'金融市场': '/tjrsc',
|
||||
'数据市场': '/tsjsc',
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
@ -296,6 +315,37 @@ export default {
|
||||
this.topBannerHeight = 820;
|
||||
}
|
||||
},
|
||||
// 封装跳转方法 - 外部链接新窗口，内部链接当前窗口
|
||||
handleNavigate(link) {
|
||||
if (!link) return;
|
||||
if (link.startsWith('http://') || link.startsWith('https://')) {
|
||||
window.open(link, '_blank');
|
||||
} else {
|
||||
this.$router.push(link);
|
||||
}
|
||||
},
|
||||
// iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
|
||||
handleIframeNavigate(url) {
|
||||
console.log('url', url);
|
||||
if (!url) return;
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
this.$emit('gotoIfreamPage', url);
|
||||
} else {
|
||||
this.$router.push(url);
|
||||
}
|
||||
},
|
||||
// 快捷搜索
|
||||
handleSearch() {
|
||||
if (this.inputValue) {
|
||||
console.log('搜索:', this.inputValue);
|
||||
// TODO: 实现搜索功能
|
||||
}
|
||||
},
|
||||
// 处理热门搜索点击
|
||||
handleHotSearch(keyword) {
|
||||
this.inputValue = keyword;
|
||||
this.handleSearch();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -994,19 +1044,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>
|
||||
@ -5,7 +5,7 @@
|
||||
<iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
|
||||
</iframe>
|
||||
<keep-alive v-else>
|
||||
<router-view />
|
||||
<router-view @gotoIfreamPage="gotoIfreamPage" @gotoPage="gotoPage" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user