1004 lines
23 KiB
Vue
1004 lines
23 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<PortalHeader />
|
||
|
||
<main class="container page-main">
|
||
<section class="headline-grid">
|
||
<NuxtLink to="/article/2" class="headline-main-title">
|
||
自治区信息中心赴南宁邕宁区（县）调研县域数字经济发展情况
|
||
</NuxtLink>
|
||
|
||
<div class="headline-content">
|
||
<div class="headline-left">
|
||
<NuxtLink to="/article/1" class="headline-image-card">
|
||
<img src="/images/video-poster.jpg" alt="中心赴南宁宁宁区调研" />
|
||
<div class="headline-image-title">“经桂通”平台推广应用培训会在南宁召开</div>
|
||
<div class="headline-image-date">2026-03-09</div>
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div class="headline-right">
|
||
<div class="subnav-strip" :style="{ backgroundImage: `url(${subnavStripImage})` }">
|
||
<span>党中央国务院信息</span>
|
||
<span>自治区党委政府信息</span>
|
||
<span>其他（厅委办）</span>
|
||
<span class="subnav-strip-more">更多</span>
|
||
</div>
|
||
<div class="news-links">
|
||
<NuxtLink
|
||
v-for="item in heroNews"
|
||
:key="item.id"
|
||
:to="getArticleLink(item.id)"
|
||
class="news-link-card"
|
||
>
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.summary }}</p>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-block">
|
||
<div class="section-heading image-heading">
|
||
<img :src="adImage" alt="广告位" />
|
||
<img :src="promoBannerImage" alt="决策咨询" />
|
||
</div>
|
||
|
||
<div class="article-columns two">
|
||
<div class="article-panel" v-for="group in consultingGroups" :key="group.title">
|
||
<div class="panel-heading">
|
||
<span>{{ group.title }}</span>
|
||
<NuxtLink :to="group.more">更多>></NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
|
||
<div class="article-text">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.summary }}</p>
|
||
<span>{{ item.date }}</span>
|
||
</div>
|
||
<img src="/images/video-poster.jpg" alt="文章配图" />
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="ad-banner blue">
|
||
<div>广告位</div>
|
||
</section>
|
||
|
||
<section class="section-block">
|
||
<div class="article-columns two">
|
||
<div class="article-panel" v-for="group in referenceGroups" :key="group.title">
|
||
<div class="panel-heading">
|
||
<span>{{ group.title }}</span>
|
||
<NuxtLink :to="group.more">更多>></NuxtLink>
|
||
</div>
|
||
<div class="article-list">
|
||
<NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
|
||
<div class="article-text">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.summary }}</p>
|
||
<span>{{ item.date }}</span>
|
||
</div>
|
||
<img src="/images/video-poster.jpg" alt="文章配图" />
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="experts-section">
|
||
<div class="section-heading experts-heading" :style="{ backgroundImage: `url(${expertSectionBgImage})` }">
|
||
<img class="experts-heading-title" :src="expertSectionTitleImage" alt="专家资讯" />
|
||
</div>
|
||
|
||
<div class="experts-tabs">
|
||
<div class="experts-tabs-left">
|
||
<button
|
||
type="button"
|
||
class="experts-tab-btn"
|
||
:class="{ active: activeExpertTab === 'viewpoint' }"
|
||
@click="activeExpertTab = 'viewpoint'"
|
||
>
|
||
专家试点
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="experts-tab-btn"
|
||
:class="{ active: activeExpertTab === 'dynamic' }"
|
||
@click="activeExpertTab = 'dynamic'"
|
||
>
|
||
专家动态
|
||
</button>
|
||
</div>
|
||
<NuxtLink to="/expert/apply" class="expert-apply-btn">
|
||
<img :src="expertApplyImage" alt="专家申请" />
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div class="experts-grid">
|
||
<NuxtLink v-for="item in filteredExpertCards" :key="item.id" :to="getArticleLink(item.id)" class="expert-card">
|
||
<img :src="item.image" :alt="item.title" />
|
||
<div class="expert-card-body">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.date }}</p>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="ad-banner image-banner">
|
||
<img :src="ad1Image" alt="单位企业广告" />
|
||
</section>
|
||
|
||
<section class="section-block">
|
||
<div class="article-columns two">
|
||
<div class="article-panel" v-for="group in thinkTankGroups" :key="group.title">
|
||
<div class="panel-heading">
|
||
<span>{{ group.title }}</span>
|
||
<NuxtLink :to="group.more">更多>></NuxtLink>
|
||
</div>
|
||
<div class="article-list" :class="{ 'logo-list-wrap': group.type === 'logos' }">
|
||
<template v-if="group.type === 'logos'">
|
||
<NuxtLink
|
||
v-for="item in group.items"
|
||
:key="item.title"
|
||
:to="group.more"
|
||
class="logo-card"
|
||
>
|
||
<div class="logo-circle">LOGO</div>
|
||
<span>{{ item.title }}</span>
|
||
</NuxtLink>
|
||
</template>
|
||
<template v-else>
|
||
<NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
|
||
<div class="article-text">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.summary }}</p>
|
||
<span>{{ item.date }}</span>
|
||
</div>
|
||
<img src="/images/video-poster.jpg" alt="文章配图" />
|
||
</NuxtLink>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="action-grid">
|
||
<NuxtLink v-for="item in actionLinks" :key="item.title" :to="item.to" class="action-card" :class="item.theme">
|
||
<span class="action-icon">{{ item.icon }}</span>
|
||
<span>{{ item.title }}</span>
|
||
</NuxtLink>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="footer-nav">
|
||
<div class="container footer-nav-inner">
|
||
<NuxtLink to="/about">友情链接</NuxtLink>
|
||
<NuxtLink to="/consultation">咨询服务</NuxtLink>
|
||
<NuxtLink to="/reference">决策成果研究文库</NuxtLink>
|
||
<NuxtLink to="/expert">政府智库学者库</NuxtLink>
|
||
</div>
|
||
</div>
|
||
<PortalFooter />
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
definePageMeta({
|
||
layout: 'blank'
|
||
})
|
||
|
||
usePageSeo({
|
||
title: '首页',
|
||
description: '广西决策咨询网首页'
|
||
})
|
||
|
||
const adImage = '/images/ad.png'
|
||
const ad1Image = '/images/ad1.png'
|
||
const promoBannerImage = '/images/jczx.png'
|
||
const subnavStripImage = '/images/%E5%9B%BE%E5%B1%82%2050.png'
|
||
const expertSectionTitleImage = '/images/zjzx.png'
|
||
const expertSectionBgImage = '/images/zjzxBg.png'
|
||
const expertApplyImage = '/images/zjsq.png'
|
||
|
||
type TextItem = {
|
||
id?: number
|
||
title: string
|
||
summary: string
|
||
date: string
|
||
}
|
||
|
||
type Group = {
|
||
title: string
|
||
more: string
|
||
items: TextItem[]
|
||
type?: 'logos'
|
||
}
|
||
|
||
type HeroNewsItem = {
|
||
id: number
|
||
title: string
|
||
summary: string
|
||
}
|
||
|
||
const heroNews: HeroNewsItem[] = [
|
||
{
|
||
id: 3,
|
||
title: '数字广西发展“十五五”规划编制工作座谈会在南宁召开',
|
||
summary: '会议认为，“十五五”时期是广西数字化发展全面深化、跨越提升的关键阶段，科学编制规划是贯彻落实数字广西建设的重要抓手。'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '广西发布县域数字经济“成绩单”，超七成县市区实现突破',
|
||
summary: '产业发展指数同比提升 9.6%，共有 64 个县（市、区）实现指数增长，县域数字产业活力与支撑能力持续增强。'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '中国—东盟人工智能指数体系加快构建',
|
||
summary: '围绕人工智能产业高质量发展，持续完善面向区域合作的评价指标体系与应用场景，为开放合作提供数据支撑。'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '“桂链”平台入选国家数据局数据基础设施建设典型案例',
|
||
summary: '案例立足“桂链”平台总体架构，聚焦区块链与数据基础设施协同建设，形成了可复制、可推广的经验做法。'
|
||
}
|
||
]
|
||
|
||
const createItems = (prefix: string, startId: number): TextItem[] => ([
|
||
{ id: startId, title: `${prefix}标题案例一`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' },
|
||
{ id: startId + 1, title: `${prefix}标题案例二`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' },
|
||
{ id: startId + 2, title: `${prefix}标题案例三`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' }
|
||
])
|
||
|
||
function getArticleLink(id: number) {
|
||
return `/article/${id}`
|
||
}
|
||
|
||
const consultingGroups: Group[] = [
|
||
{ title: '市县决策', more: '/consultation?type=city', items: createItems('市县决策', 101) },
|
||
{ title: '前沿观察', more: '/consultation?type=frontier', items: createItems('前沿观察', 111) },
|
||
{ title: '行业资讯', more: '/consultation?type=industry', items: createItems('行业资讯', 121) },
|
||
{ title: '企业动态', more: '/consultation?type=enterprise', items: createItems('企业动态', 131) }
|
||
]
|
||
|
||
const referenceGroups: Group[] = [
|
||
{ title: '政策原文', more: '/reference?type=policy', items: createItems('政策原文', 201) },
|
||
{ title: '东盟研究', more: '/reference?type=asean', items: createItems('东盟研究', 211) },
|
||
{ title: '翰墨文谈', more: '/hanmo', items: createItems('翰墨文谈', 221) },
|
||
{ title: '会员单位', more: '/membership', items: [
|
||
{ title: '华东科技', summary: '', date: '' },
|
||
{ title: '华西科技', summary: '', date: '' },
|
||
{ title: '华南科技', summary: '', date: '' },
|
||
{ title: '华北科技', summary: '', date: '' },
|
||
{ title: '华中科技', summary: '', date: '' },
|
||
{ title: '华海科技', summary: '', date: '' },
|
||
{ title: '华广科技', summary: '', date: '' },
|
||
{ title: '华创科技', summary: '', date: '' }
|
||
], type: 'logos' }
|
||
]
|
||
|
||
const thinkTankGroups: Group[] = [
|
||
{ title: '智库观察', more: '/think-tank?type=view', items: createItems('智库观察', 301) },
|
||
{ title: '建言献策', more: '/suggestions', items: createItems('建言献策', 311) },
|
||
{ title: '翰墨观察', more: '/hanmo', items: createItems('翰墨文谈', 321) },
|
||
{ title: '支撑单位', more: '/about', items: [
|
||
{ title: '华东科技', summary: '', date: '' },
|
||
{ title: '华西科技', summary: '', date: '' },
|
||
{ title: '华南科技', summary: '', date: '' },
|
||
{ title: '华北科技', summary: '', date: '' },
|
||
{ title: '华中科技', summary: '', date: '' }
|
||
], type: 'logos' }
|
||
]
|
||
|
||
type ExpertTab = 'viewpoint' | 'dynamic'
|
||
|
||
type ExpertCard = {
|
||
id: number
|
||
title: string
|
||
date: string
|
||
image: string
|
||
tab: ExpertTab
|
||
}
|
||
|
||
const activeExpertTab = ref<ExpertTab>('viewpoint')
|
||
|
||
const expertCards: ExpertCard[] = [
|
||
{ id: 401, title: '专家试点一', date: '2026-03-19', image: '/images/video-poster.jpg', tab: 'viewpoint' },
|
||
{ id: 402, title: '专家试点二', date: '2026-03-18', image: '/images/video-poster.jpg', tab: 'viewpoint' },
|
||
{ id: 403, title: '专家试点三', date: '2026-03-17', image: '/images/video-poster.jpg', tab: 'viewpoint' },
|
||
{ id: 404, title: '专家试点四', date: '2026-03-16', image: '/images/video-poster.jpg', tab: 'viewpoint' },
|
||
{ id: 405, title: '专家动态一', date: '2026-03-15', image: '/images/video-poster.jpg', tab: 'dynamic' },
|
||
{ id: 406, title: '专家动态二', date: '2026-03-14', image: '/images/video-poster.jpg', tab: 'dynamic' },
|
||
{ id: 407, title: '专家动态三', date: '2026-03-13', image: '/images/video-poster.jpg', tab: 'dynamic' },
|
||
{ id: 408, title: '专家动态四', date: '2026-03-12', image: '/images/video-poster.jpg', tab: 'dynamic' }
|
||
]
|
||
|
||
const filteredExpertCards = computed(() => expertCards.filter(item => item.tab === activeExpertTab.value))
|
||
|
||
const actionLinks = [
|
||
{ title: '资料下载', to: '/reference', icon: '⇩', theme: 'cyan' },
|
||
{ title: '申报模板', to: '/about/consultation', icon: '▣', theme: 'blue' },
|
||
{ title: '成果摘编', to: '/reference', icon: '▤', theme: 'green' },
|
||
{ title: '联系我们', to: '/contact', icon: '✆', theme: 'red' }
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
color: #1f2d3d;
|
||
}
|
||
|
||
.container {
|
||
width: min(1200px, calc(100% - 32px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.page-main {
|
||
padding: 14px 0 40px;
|
||
}
|
||
|
||
.headline-grid {
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.headline-content {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
|
||
gap: 34px;
|
||
align-items: start;
|
||
}
|
||
|
||
.headline-main-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 132px;
|
||
margin-bottom: 36px;
|
||
padding: 18px 24px 26px;
|
||
border-bottom: 1px solid #ececec;
|
||
color: #2236c6;
|
||
font-size: clamp(28px, 3.2vw, 42px);
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
|
||
.headline-left,
|
||
.headline-right,
|
||
.article-panel,
|
||
.experts-section {
|
||
background: #fff;
|
||
}
|
||
|
||
.headline-image-card {
|
||
display: block;
|
||
padding: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.headline-image-card img {
|
||
width: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
height: 430px;
|
||
}
|
||
|
||
.headline-image-title {
|
||
margin-top: 20px;
|
||
color: #2d2d2d;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 1.45;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.headline-image-date {
|
||
margin-top: 14px;
|
||
color: #8e8e8e;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 0 6px 10px;
|
||
}
|
||
|
||
.headline-right {
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.subnav-strip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
margin-bottom: 22px;
|
||
padding: 10px 22px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
min-height: 50px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.subnav-strip .active {
|
||
padding: 12px 18px;
|
||
background: rgba(255, 255, 255, 0.24);
|
||
clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.subnav-strip-more {
|
||
margin-left: auto;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.news-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.news-link-card {
|
||
padding: 18px 8px 20px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
|
||
.news-link-card h3 {
|
||
margin: 0 0 16px;
|
||
color: #3777c4;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.news-link-card p {
|
||
margin: 0;
|
||
color: #454545;
|
||
font-size: 14px;
|
||
line-height: 1.95;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.ad-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 90px;
|
||
margin: 0 0 28px;
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.image-banner {
|
||
min-height: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.image-banner img,
|
||
.image-heading img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.ad-banner.soft {
|
||
background:
|
||
linear-gradient(155deg, rgba(217, 15, 34, 0.95) 0 18%, transparent 18%),
|
||
linear-gradient(180deg, #fff4eb, #fff8f1);
|
||
color: #333;
|
||
}
|
||
|
||
.ad-banner.blue {
|
||
min-height: 74px;
|
||
background: #67add6;
|
||
color: #fff;
|
||
}
|
||
|
||
.ad-banner.scenic {
|
||
min-height: 110px;
|
||
background:
|
||
linear-gradient(rgba(48, 142, 205, 0.22), rgba(48, 142, 205, 0.22)),
|
||
url('/images/banner.png') center 62%/cover;
|
||
color: #fff;
|
||
}
|
||
|
||
.section-block {
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.section-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.image-heading {
|
||
margin-bottom: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.section-heading-title {
|
||
position: relative;
|
||
padding: 0 26px;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-heading-title::before,
|
||
.section-heading-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 14px;
|
||
width: 120px;
|
||
height: 1px;
|
||
background: #bfd5ea;
|
||
}
|
||
|
||
.section-heading-title::before {
|
||
right: 100%;
|
||
}
|
||
|
||
.section-heading-title::after {
|
||
left: 100%;
|
||
}
|
||
|
||
.section-heading-title span {
|
||
display: block;
|
||
color: #2f6da8;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.section-heading-title small {
|
||
color: #a6b9ca;
|
||
font-size: 11px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.article-columns.two {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 22px;
|
||
}
|
||
|
||
.article-panel {
|
||
padding: 4px 0 0;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 0 10px;
|
||
border-bottom: 1px solid #e6eef5;
|
||
}
|
||
|
||
.panel-heading span {
|
||
color: #2c6eaa;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.panel-heading a {
|
||
color: #9aa3aa;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.article-list {
|
||
padding-top: 6px;
|
||
}
|
||
|
||
.article-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 105px;
|
||
gap: 16px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px dashed #e8edf2;
|
||
}
|
||
|
||
.article-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.article-text h3 {
|
||
margin: 0 0 8px;
|
||
color: #2a2a2a;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.article-text p {
|
||
margin: 0 0 8px;
|
||
color: #6e7881;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.article-text span {
|
||
color: #a3aab0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.article-row img {
|
||
width: 105px;
|
||
height: 72px;
|
||
object-fit: cover;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.experts-section {
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.experts-heading {
|
||
justify-content: center;
|
||
margin-bottom: 18px;
|
||
min-height: 68px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.experts-heading-title {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 100%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.experts-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px solid #e6eef5;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.experts-tabs-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 26px;
|
||
}
|
||
|
||
.experts-tab-btn {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #798895;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.experts-tab-btn:hover {
|
||
color: #2c6eaa;
|
||
}
|
||
|
||
.experts-tab-btn.active {
|
||
color: #2c6eaa;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.expert-apply-btn {
|
||
display: block;
|
||
width: 116px;
|
||
line-height: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.expert-apply-btn img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.experts-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 18px;
|
||
}
|
||
|
||
.expert-card {
|
||
background: #fff;
|
||
border: 1px solid #edf2f5;
|
||
}
|
||
|
||
.expert-card img {
|
||
width: 100%;
|
||
height: 220px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.expert-card-body {
|
||
padding: 10px 10px 12px;
|
||
}
|
||
|
||
.expert-card-body h3 {
|
||
margin: 0 0 6px;
|
||
color: #d54235;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.expert-card-body p {
|
||
margin: 0;
|
||
color: #8f989f;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.logo-list-wrap {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 14px 10px;
|
||
}
|
||
|
||
.logo-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.logo-circle {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 50% 50%, #fff 0 24%, #1d2b4b 25% 36%, #7ea2d8 37% 44%, #0d1730 45% 100%);
|
||
color: #fff;
|
||
font-size: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.logo-card span {
|
||
color: #3d4d5a;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.action-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.action-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
min-height: 78px;
|
||
background: #fff;
|
||
border: 2px solid #dceaf3;
|
||
color: #5c8aa5;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.action-card span:last-child {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 34px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.action-card.cyan {
|
||
border-color: #cce9ef;
|
||
color: #55abc0;
|
||
}
|
||
|
||
.action-card.blue {
|
||
border-color: #d6e6f6;
|
||
color: #4e87c8;
|
||
}
|
||
|
||
.action-card.green {
|
||
border-color: #d9efe7;
|
||
color: #7db9aa;
|
||
}
|
||
|
||
.action-card.red {
|
||
border-color: #f4d8d6;
|
||
color: #db7f77;
|
||
}
|
||
|
||
.site-footer {
|
||
background: #fff;
|
||
}
|
||
|
||
.footer-nav {
|
||
background: #0f69b9;
|
||
}
|
||
|
||
.footer-nav-inner {
|
||
display: flex;
|
||
gap: 22px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.footer-nav a {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.headline-content,
|
||
.article-columns.two,
|
||
.experts-grid,
|
||
.action-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.headline-right,
|
||
.headline-left,
|
||
.experts-section {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.headline-main-title {
|
||
min-height: 108px;
|
||
margin-bottom: 24px;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.headline-image-card img {
|
||
height: 380px;
|
||
}
|
||
|
||
.headline-image-title,
|
||
.news-link-card h3 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.headline-image-date,
|
||
.news-link-card p,
|
||
.subnav-strip {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.logo-list-wrap {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
width: min(100%, calc(100% - 24px));
|
||
}
|
||
|
||
.headline-content {
|
||
gap: 18px;
|
||
}
|
||
|
||
.headline-right,
|
||
.headline-left,
|
||
.article-panel,
|
||
.experts-section {
|
||
padding: 0;
|
||
}
|
||
|
||
.headline-main-title {
|
||
min-height: auto;
|
||
margin-bottom: 18px;
|
||
padding: 10px 6px 18px;
|
||
font-size: 24px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.headline-image-card img {
|
||
height: 250px;
|
||
}
|
||
|
||
.headline-image-title,
|
||
.news-link-card h3 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.headline-image-date,
|
||
.news-link-card p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.subnav-strip {
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
padding: 12px 14px;
|
||
font-size: 13px;
|
||
min-height: 52px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.subnav-strip .active {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.news-link-card {
|
||
padding: 14px 0 16px;
|
||
}
|
||
|
||
.section-heading {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.section-heading-title {
|
||
padding: 0 0 0 2px;
|
||
text-align: left;
|
||
}
|
||
|
||
.section-heading-title::before,
|
||
.section-heading-title::after {
|
||
display: none;
|
||
}
|
||
|
||
.expert-apply-btn {
|
||
position: static;
|
||
transform: none;
|
||
margin-left: auto;
|
||
width: 100px;
|
||
}
|
||
|
||
.experts-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.expert-card img {
|
||
height: 170px;
|
||
}
|
||
|
||
.logo-list-wrap {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.article-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.article-row img {
|
||
width: 100%;
|
||
height: 180px;
|
||
}
|
||
|
||
.action-card,
|
||
.action-card span:last-child {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.footer-nav-inner {
|
||
flex-wrap: wrap;
|
||
gap: 10px 16px;
|
||
}
|
||
}
|
||
</style>
|