Compare commits
5 Commits
56172e39e3
...
d7db320ba2
| Author | SHA1 | Date | |
|---|---|---|---|
| d7db320ba2 | |||
| 331bb97db5 | |||
| 3995f7a613 | |||
| 6961b3c804 | |||
| adbbcc321d |
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 |
@ -58,7 +58,9 @@
|
|||||||
|
|
||||||
<!-- 下部版权信息 -->
|
<!-- 下部版权信息 -->
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<p class="copyright">{{ copyright }}</p>
|
<!-- <p class="copyright">{{ copyright }}</p> -->
|
||||||
|
<p class="copyright">© 2025 可信碳信息网 版权所有</p>
|
||||||
|
<p class="infrastructure">技术支持：上海市宝山区大数据中心</p>
|
||||||
<p class="infrastructure">基础设施：国家区块链网络基础底座（上海枢纽）</p>
|
<p class="infrastructure">基础设施：国家区块链网络基础底座（上海枢纽）</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 顶部菜单栏 -->
|
<!-- 顶部菜单栏 -->
|
||||||
<div class="nav-box">
|
<div class="nav-box">
|
||||||
<div class="logo-box">
|
<div class="logo-box" @click="goHome">
|
||||||
<img src="@/pages/index/assets/logo-name.png">
|
<img src="@/pages/index/assets/logo-name.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-box">
|
<div class="menu-box">
|
||||||
@ -20,9 +20,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="option-wrapper">
|
||||||
<div v-if="loginFlag" class="option-box">
|
<div v-if="loginFlag" class="option-box">
|
||||||
<div class="gzt">
|
<div class="gzt" @click="goyhzx">
|
||||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||||||
<span> 工作台</span>
|
<span> 工作台</span>
|
||||||
</div>
|
</div>
|
||||||
@ -31,15 +31,61 @@
|
|||||||
<div style="cursor: pointer;" @click="logoutHandler">退出登录</div>
|
<div style="cursor: pointer;" @click="logoutHandler">退出登录</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="option-box">
|
<div v-else class="option-box">
|
||||||
<div class="gzt">
|
<!-- <div class="gzt">
|
||||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||||||
<span> 工作台</span>
|
<span> 工作台</span>
|
||||||
</div>
|
</div> -->
|
||||||
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
||||||
<div>|</div>
|
<div>|</div>
|
||||||
<div style="cursor: pointer;" @click="gologin">登录</div>
|
<div style="cursor: pointer;" @click="gologin">登录</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -56,6 +102,21 @@ export default {
|
|||||||
return {
|
return {
|
||||||
curPage: "home",
|
curPage: "home",
|
||||||
loginFlag: false, //是否已完成登录
|
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: [
|
menuOptions: [
|
||||||
{
|
{
|
||||||
@ -115,7 +176,7 @@ export default {
|
|||||||
name: 'tbgtg',
|
name: 'tbgtg',
|
||||||
title: '碳报告托管：',
|
title: '碳报告托管：',
|
||||||
value: 'tgbcz',
|
value: 'tgbcz',
|
||||||
content: '碳报告存证',
|
content: '碳报告托管',
|
||||||
divider: true,
|
divider: true,
|
||||||
needLogin: true,
|
needLogin: true,
|
||||||
clientId: 'client_id_tfwzx',
|
clientId: 'client_id_tfwzx',
|
||||||
@ -140,7 +201,9 @@ export default {
|
|||||||
value: 'tjrsc',
|
value: 'tjrsc',
|
||||||
content: '碳金融市场',
|
content: '碳金融市场',
|
||||||
divider: true,
|
divider: true,
|
||||||
}, {
|
parentName: 'fwsc',
|
||||||
|
},
|
||||||
|
{
|
||||||
name: 'txqsc',
|
name: 'txqsc',
|
||||||
title: '碳需求市场',
|
title: '碳需求市场',
|
||||||
value: 'txqsc',
|
value: 'txqsc',
|
||||||
@ -154,29 +217,29 @@ export default {
|
|||||||
content: '碳数据市场',
|
content: '碳数据市场',
|
||||||
divider: true,
|
divider: true,
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'fwscsjlbc',
|
// name: 'fwscsjlbc',
|
||||||
title: '数据列表',
|
// title: '数据列表',
|
||||||
value: 'fwscsjlbc',
|
// value: 'fwscsjlbc',
|
||||||
content: '数据列表',
|
// content: '数据列表',
|
||||||
divider: true,
|
// divider: true,
|
||||||
}
|
// }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'gxnl',
|
name: 'gxnlpt',
|
||||||
title: '共性能力',
|
title: '共性能力',
|
||||||
disable: true
|
// disable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'qych',
|
name: 'qych',
|
||||||
title: '企业出海',
|
title: '企业出海',
|
||||||
disable: true
|
// disable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'hyzt',
|
name: 'hyzt',
|
||||||
title: '行业专题',
|
title: '行业专题',
|
||||||
disable: true
|
// disable: true
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -207,6 +270,46 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeUnmount() { },
|
beforeUnmount() { },
|
||||||
methods: {
|
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) {
|
handleDropdownClick(menu) {
|
||||||
this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
|
this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
|
||||||
@ -236,6 +339,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.curPage = menu.name;
|
this.curPage = menu.name;
|
||||||
|
// 关闭移动端菜单
|
||||||
|
this.closeMobileMenu();
|
||||||
let iframeUrl = menu.iframeUrl;
|
let iframeUrl = menu.iframeUrl;
|
||||||
if (iframeUrl) {
|
if (iframeUrl) {
|
||||||
//调用login.js内的authorize方法
|
//调用login.js内的authorize方法
|
||||||
@ -270,12 +375,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
gologin() {
|
gologin() {
|
||||||
|
this.closeMobileMenu();
|
||||||
this.$router.push("/login")
|
this.$router.push("/login")
|
||||||
// window.location.href = `/view/mhzc/login`;
|
// window.location.href = `/view/mhzc/login`;
|
||||||
},
|
},
|
||||||
|
|
||||||
goyhzx() {
|
goyhzx() {
|
||||||
this.$router.push("/yhzx")
|
this.closeMobileMenu();
|
||||||
|
this.$router.push("/yhzx/gzt")
|
||||||
// window.location.href = `/view/mhzc/yhzx`;
|
// window.location.href = `/view/mhzc/yhzx`;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -327,6 +434,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
async logoutHandler() {
|
async logoutHandler() {
|
||||||
|
this.closeMobileMenu();
|
||||||
const res = await logout();
|
const res = await logout();
|
||||||
const resVO = res.data;
|
const resVO = res.data;
|
||||||
if (resVO.dcdz) {
|
if (resVO.dcdz) {
|
||||||
@ -369,6 +477,11 @@ export default {
|
|||||||
}
|
}
|
||||||
.logo-box {
|
.logo-box {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-wrapper {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-box {
|
.option-box {
|
||||||
@ -389,6 +502,7 @@ export default {
|
|||||||
.option-box .gzt {
|
.option-box .gzt {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@ -426,4 +540,223 @@ export default {
|
|||||||
.meun-title-disable {
|
.meun-title-disable {
|
||||||
cursor: not-allowed !important;
|
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>
|
</style>
|
||||||
|
|||||||
@ -56,6 +56,10 @@ const router = new VueRouter({
|
|||||||
mode: 'history',
|
mode: 'history',
|
||||||
base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`,
|
base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`,
|
||||||
routes: [mainRoutes],
|
routes: [mainRoutes],
|
||||||
|
scrollBehavior(to, from, savedPosition) {
|
||||||
|
// 每次切换路由时滚动到顶部
|
||||||
|
return { x: 0, y: 0 };
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
|
|||||||
@ -24,7 +24,11 @@
|
|||||||
<div class="content-area">
|
<div class="content-area">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
<aside class="filter-sidebar">
|
<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-section">
|
||||||
<div class="filter-title">内容搜索</div>
|
<div class="filter-title">内容搜索</div>
|
||||||
@ -62,11 +66,22 @@
|
|||||||
|
|
||||||
<!-- 右侧服务卡片列表 -->
|
<!-- 右侧服务卡片列表 -->
|
||||||
<div class="card-list">
|
<div class="card-list">
|
||||||
<div
|
<div class="list-header">
|
||||||
v-for="(card, index) in cardList"
|
<div class="list-title-box">
|
||||||
:key="card.gxUuid"
|
<span class="list-icon">🛠️</span>
|
||||||
class="service-card"
|
<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"
|
||||||
|
class="service-card"
|
||||||
|
>
|
||||||
<!-- 卡片头部 -->
|
<!-- 卡片头部 -->
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-title-box">
|
<div class="card-title-box">
|
||||||
@ -107,6 +122,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
||||||
@ -245,6 +261,8 @@ export default {
|
|||||||
rzVisible: false,
|
rzVisible: false,
|
||||||
// 发布成功弹窗
|
// 发布成功弹窗
|
||||||
publishSuccessVisible: false,
|
publishSuccessVisible: false,
|
||||||
|
// 移动端筛选折叠状态
|
||||||
|
filterCollapsed: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -475,6 +493,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab {
|
.nav-tab {
|
||||||
|
position: relative;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
@ -484,28 +503,55 @@ export default {
|
|||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
transition: all 0.3s;
|
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 {
|
&:hover {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
border-bottom-color: #009a29;
|
|
||||||
|
&::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.publish-btn {
|
.publish-btn {
|
||||||
padding: 8px 20px;
|
padding: 8px 24px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #009a29;
|
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
transition: background 0.3s;
|
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&: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;
|
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 {
|
.filter-sidebar-content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
|
padding-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px dashed #e0e0e0;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-title {
|
.filter-title {
|
||||||
margin-bottom: 8px;
|
display: flex;
|
||||||
|
margin-bottom: 12px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 4px;
|
||||||
|
height: 14px;
|
||||||
|
background: linear-gradient(180deg, #009a29, #48C666);
|
||||||
|
border-radius: 2px;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-options {
|
.filter-options {
|
||||||
@ -570,24 +679,102 @@ export default {
|
|||||||
// 右侧卡片列表
|
// 右侧卡片列表
|
||||||
.card-list {
|
.card-list {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
display: flex;
|
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;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: calc((100% - 20px) / 2);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||||
transition: transform 0.3s, box-shadow 0.3s;
|
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 {
|
&:hover {
|
||||||
transform: translateY(-4px);
|
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 {
|
.empty-state {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
min-height: 300px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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) {
|
@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 {
|
.service-card {
|
||||||
width: 100%;
|
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>
|
</style>
|
||||||
|
|||||||
@ -54,21 +54,21 @@
|
|||||||
<h3 class="service-card-title">碳金融市场</h3>
|
<h3 class="service-card-title">碳金融市场</h3>
|
||||||
<p class="service-card-desc">打通"碳"与"钱"的通道。提供碳质押、碳回购、绿色信贷及碳基金对接服务。</p>
|
<p class="service-card-desc">打通"碳"与"钱"的通道。提供碳质押、碳回购、绿色信贷及碳基金对接服务。</p>
|
||||||
<div class="service-card-buttons">
|
<div class="service-card-buttons">
|
||||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/jrsc')">查看金融产品</t-button>
|
<t-button theme="primary" variant="outline" @click.stop="goToPage('/tjrsc')">查看金融产品</t-button>
|
||||||
<t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">金融机构入驻</t-button>
|
<t-button theme="primary" @click.stop="goToPage('/tjrsc')">金融机构入驻</t-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 碳数据市场 -->
|
<!-- 碳数据市场 -->
|
||||||
<div class="service-card" @click="goToPage('/fwsc/sjsc')">
|
<div class="service-card" @click="goToPage('/tsjsc')">
|
||||||
<div class="service-card-icon">
|
<div class="service-card-icon">
|
||||||
<span style="font-size: 48px">📊</span>
|
<span style="font-size: 48px">📊</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="service-card-title">碳数据市场</h3>
|
<h3 class="service-card-title">碳数据市场</h3>
|
||||||
<p class="service-card-desc">合规高效的碳数据流转平台。包括公共数据、社会性数据、因子库等多类数据库。</p>
|
<p class="service-card-desc">合规高效的碳数据流转平台。包括公共数据、社会性数据、因子库等多类数据库。</p>
|
||||||
<div class="service-card-buttons">
|
<div class="service-card-buttons">
|
||||||
<t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/sjsc')">进入交易大厅</t-button>
|
<t-button theme="primary" variant="outline" @click.stop="goToPage('/tsjsc')">进入交易大厅</t-button>
|
||||||
<t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">我要出售</t-button>
|
<t-button theme="primary" @click.stop="goToPage('/tsjsc')">我要出售</t-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -249,4 +249,126 @@ export default {
|
|||||||
flex: 1;
|
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>
|
</style>
|
||||||
|
|||||||
@ -25,7 +25,11 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
<aside class="filter-sidebar">
|
<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-section">
|
||||||
<div class="filter-title">关键词搜索</div>
|
<div class="filter-title">关键词搜索</div>
|
||||||
@ -384,6 +388,8 @@ export default {
|
|||||||
currentProductUuid: '',
|
currentProductUuid: '',
|
||||||
// 用户信息
|
// 用户信息
|
||||||
yhxx: {},
|
yhxx: {},
|
||||||
|
// 移动端筛选折叠状态
|
||||||
|
filterCollapsed: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -713,6 +719,53 @@ export default {
|
|||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
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 {
|
.filter-section {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -1361,14 +1414,116 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@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 {
|
.filter-sidebar {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-wrapper {
|
.filter-sidebar-content {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
flex-direction: column;
|
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>
|
</style>
|
||||||
|
|||||||
@ -11,7 +11,11 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
<div class="filter-sidebar">
|
<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-section">
|
||||||
<div class="filter-title">价格区间</div>
|
<div class="filter-title">价格区间</div>
|
||||||
@ -220,6 +224,8 @@ export default {
|
|||||||
downloads: '18',
|
downloads: '18',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
// 移动端筛选折叠状态
|
||||||
|
filterCollapsed: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -305,6 +311,55 @@ export default {
|
|||||||
border-radius: 8px;
|
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 {
|
.filter-section {
|
||||||
margin-bottom: 20px;
|
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>
|
</style>
|
||||||
|
|||||||
@ -24,7 +24,12 @@
|
|||||||
<div class="page-body">
|
<div class="page-body">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
<div class="sidebar">
|
<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 class="filter-list">
|
||||||
<div
|
<div
|
||||||
v-for="item in dataTypeList"
|
v-for="item in dataTypeList"
|
||||||
@ -33,9 +38,11 @@
|
|||||||
:class="{ active: selectedType === item.value }"
|
:class="{ active: selectedType === item.value }"
|
||||||
@click="handleTypeChange(item.value)"
|
@click="handleTypeChange(item.value)"
|
||||||
>
|
>
|
||||||
|
<span class="check-icon">{{ selectedType === item.value ? '✓' : '' }}</span>
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧数据库卡片列表 -->
|
<!-- 右侧数据库卡片列表 -->
|
||||||
@ -147,7 +154,9 @@ export default {
|
|||||||
tags: ['公益数据'],
|
tags: ['公益数据'],
|
||||||
price: '免费'
|
price: '免费'
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
// 移动端筛选折叠状态
|
||||||
|
filterCollapsed: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -229,6 +238,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab {
|
.nav-tab {
|
||||||
|
position: relative;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
@ -238,28 +248,55 @@ export default {
|
|||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
transition: all 0.3s;
|
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 {
|
&:hover {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
border-bottom-color: #009a29;
|
|
||||||
|
&::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.publish-btn {
|
.publish-btn {
|
||||||
padding: 8px 20px;
|
padding: 8px 24px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #009a29;
|
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
transition: background 0.3s;
|
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&: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;
|
width: 220px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
padding: 20px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
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 {
|
.sidebar-title {
|
||||||
padding-bottom: 12px;
|
display: flex;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 12px;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
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 {
|
.filter-list {
|
||||||
@ -292,25 +388,41 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-item {
|
.filter-item {
|
||||||
padding: 10px 16px;
|
display: flex;
|
||||||
|
padding: 10px 12px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background: #f5f5f5;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: all 0.3s;
|
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 {
|
&:hover {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
background: #f0f9f0;
|
background: #e8f5e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #fff;
|
color: #009a29;
|
||||||
background: #009a29;
|
background: #e8f5e9;
|
||||||
|
|
||||||
&:hover {
|
.check-icon {
|
||||||
color: #fff;
|
background: #009a29;
|
||||||
background: #007a1f;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -329,17 +441,35 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.database-card {
|
.database-card {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||||
transition: all 0.3s;
|
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 {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12);
|
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -419,4 +549,103 @@ export default {
|
|||||||
background: #fff3e0;
|
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>
|
</style>
|
||||||
|
|||||||
@ -24,17 +24,21 @@
|
|||||||
<div class="content-area">
|
<div class="content-area">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
<aside class="filter-sidebar">
|
<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-section">
|
||||||
<div class="filter-title">内容搜索</div>
|
<div class="filter-title">内容搜索</div>
|
||||||
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
|
<t-input v-model="filter.nr" placeholder="请输入关键词" @enter="onSearch" />
|
||||||
|
<div class="filter-buttons">
|
||||||
|
<t-button theme="primary" @click="onSearch">查询</t-button>
|
||||||
|
<t-button theme="default" @click="onReset">重置</t-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-buttons">
|
|
||||||
<t-button theme="primary" @click="onSearch">查询</t-button>
|
|
||||||
<t-button theme="default" @click="onReset">重置</t-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 服务地区 -->
|
<!-- 服务地区 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
@ -63,11 +67,22 @@
|
|||||||
<!-- 右侧需求卡片列表 -->
|
<!-- 右侧需求卡片列表 -->
|
||||||
<div class="demand-list">
|
<div class="demand-list">
|
||||||
<div class="list-header">
|
<div class="list-header">
|
||||||
<span class="list-title">碳需求市场</span>
|
<div class="list-title-box">
|
||||||
<span class="list-count">共 {{ page.total }} 条需求</span>
|
<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>
|
||||||
|
|
||||||
<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
|
<div
|
||||||
v-for="card in cardList"
|
v-for="card in cardList"
|
||||||
:key="card.gxUuid"
|
:key="card.gxUuid"
|
||||||
@ -103,8 +118,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
<div v-if="cardList.length === 0 && !loading" class="empty-state">
|
<div v-if="!loading && cardList.length === 0" class="empty-state">
|
||||||
<p>暂无需求信息</p>
|
<div class="empty-illustration">📋</div>
|
||||||
|
<p class="empty-text">暂无需求信息</p>
|
||||||
|
<p class="empty-hint">敬请期待更多优质需求上线</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -233,6 +250,8 @@ export default {
|
|||||||
rzVisible: false,
|
rzVisible: false,
|
||||||
// 发布成功弹窗
|
// 发布成功弹窗
|
||||||
publishSuccessVisible: false,
|
publishSuccessVisible: false,
|
||||||
|
// 移动端筛选折叠状态
|
||||||
|
filterCollapsed: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -428,6 +447,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab {
|
.nav-tab {
|
||||||
|
position: relative;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
@ -437,28 +457,55 @@ export default {
|
|||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
transition: all 0.3s;
|
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 {
|
&:hover {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
border-bottom-color: #009a29;
|
|
||||||
|
&::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.publish-btn {
|
.publish-btn {
|
||||||
padding: 8px 20px;
|
padding: 8px 24px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #009a29;
|
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
transition: background 0.3s;
|
box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&: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 {
|
.filter-sidebar-content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
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 {
|
.filter-section {
|
||||||
|
padding-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px dashed #e0e0e0;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-title {
|
.filter-title {
|
||||||
margin-bottom: 8px;
|
display: flex;
|
||||||
|
margin-bottom: 12px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 4px;
|
||||||
|
height: 14px;
|
||||||
|
background: linear-gradient(180deg, #009a29, #48C666);
|
||||||
|
border-radius: 2px;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-options {
|
.filter-options {
|
||||||
@ -524,20 +634,58 @@ export default {
|
|||||||
.list-header {
|
.list-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 20px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-title {
|
.list-title-box {
|
||||||
font-size: 20px;
|
display: flex;
|
||||||
font-weight: 600;
|
align-items: center;
|
||||||
color: #333;
|
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 {
|
.list-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #999;
|
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 {
|
.demand-card {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||||
transition: transform 0.3s, box-shadow 0.3s;
|
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 {
|
&:hover {
|
||||||
transform: translateY(-4px);
|
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 {
|
.empty-state {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 300px;
|
flex-direction: column;
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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;
|
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>
|
</style>
|
||||||
|
|||||||
@ -71,34 +71,34 @@
|
|||||||
<div class="option-item-box green">
|
<div class="option-item-box green">
|
||||||
<div class="option-item-box-title">碳数字身份证</div>
|
<div class="option-item-box-title">碳数字身份证</div>
|
||||||
<div class="option-btn-box ">
|
<div class="option-btn-box ">
|
||||||
<div class="btn">办证指南</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['办证指南'])">办证指南</div>
|
||||||
<div class="btn">碳证查询</div>
|
<div class="btn" @click="handleIframeNavigate(buttonLinks['碳证查询'])">碳证查询</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn">碳证核验</div>
|
<div class="btn" @click="handleIframeNavigate(buttonLinks['碳证核验'])">碳证核验</div>
|
||||||
<div class="btn">碳证核验</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['跨境互通'])">跨境互通</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-item-box blue">
|
<div class="option-item-box blue">
|
||||||
<div class="option-item-box-title">国家可信碳链</div>
|
<div class="option-item-box-title">国家可信碳链</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn">上链指南</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['上链指南'])">上链指南</div>
|
||||||
<div class="btn">上链标准</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['上链标准'])">上链标准</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn">上链工具</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
|
||||||
<div class="btn">碳证中心</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-item-box cyan">
|
<div class="option-item-box cyan">
|
||||||
<div class="option-item-box-title">绿色服务</div>
|
<div class="option-item-box-title">绿色服务</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn">服务市场</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
|
||||||
<div class="btn">需求市场</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['需求市场'])">需求市场</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="option-btn-box">
|
<div class="option-btn-box">
|
||||||
<div class="btn">数据市场</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['金融市场'])">金融市场</div>
|
||||||
<div class="btn">数据市场</div>
|
<div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -275,6 +275,25 @@ export default {
|
|||||||
require('@/pages/index/assets/home-top-bg2.jpg'),
|
require('@/pages/index/assets/home-top-bg2.jpg'),
|
||||||
require('@/pages/index/assets/home-top-bg3.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: {
|
components: {
|
||||||
@ -296,6 +315,37 @@ export default {
|
|||||||
this.topBannerHeight = 820;
|
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>
|
</script>
|
||||||
@ -994,19 +1044,196 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.nav-box {
|
/* 容器调整 */
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.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>
|
</style>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
|
<iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
|
||||||
</iframe>
|
</iframe>
|
||||||
<keep-alive v-else>
|
<keep-alive v-else>
|
||||||
<router-view />
|
<router-view @gotoIfreamPage="gotoIfreamPage" @gotoPage="gotoPage" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user