31 lines
3.4 KiB
Plaintext
31 lines
3.4 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<AppHeader title="新闻" />
|
|
<view class="news-tabs"><view v-for="item in tabs" :key="item" :class="tab == item ? 'news-tab active' : 'news-tab'" @click="tab=item"><text>{{ item }}</text></view></view>
|
|
<scroll-view scroll-y class="news-scroll">
|
|
<view class="news-content">
|
|
<view class="headline"><image class="headline-art" src="/static/images/news-city.png" mode="aspectFill"></image><view class="headline-copy"><text class="headline-tag">政策速递</text><text class="headline-title">普惠金融新政解读：小微企业迎来融资利好</text><text class="headline-date">2026-09-08</text></view></view>
|
|
<view class="article" v-for="item in articles" :key="item.title" @click="openArticle(item.title)"><view class="article-copy"><text class="article-title">{{ item.title }}</text><text class="article-summary">{{ item.summary }}</text><text class="article-meta">{{ item.category }} · {{ item.date }}</text></view><image class="article-art" :src="item.image" mode="aspectFill"></image></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
const tabs = ['推荐', '企业融资', '个人融资', '政策解读']
|
|
const tab = ref('推荐')
|
|
const articles = [
|
|
{ title: '如何提高个人贷款通过率', summary: '从征信、负债和收入三个维度做好申请准备。', category: '个人融资', date: '2026-09-05', image: '/static/images/news-calculator.png' },
|
|
{ title: '银行最新贷款产品汇总', summary: '本月值得关注的低息信用融资产品。', category: '产品观察', date: '2026-09-03', image: '/static/images/news-city.png' },
|
|
{ title: '小微企业融资材料清单', summary: '一次准备齐全，减少补充资料时间。', category: '企业融资', date: '2026-08-30', image: '/static/images/news-business.png' }
|
|
]
|
|
const openArticle = (title: string) => { uni.showToast({ title: title, icon: 'none' }) }
|
|
</script>
|
|
|
|
<style>
|
|
.news-tabs { height: 88rpx; flex-direction: row; align-items: center; background-color: #fff; border-bottom: 1rpx solid #e8eef6; padding: 0 22rpx; }.news-tab { flex: 1; height: 88rpx; justify-content: center; align-items: center; color: #78869a; font-size: 23rpx; }.news-tab.active { color: #0868f7; font-weight: 700; border-bottom: 4rpx solid #0868f7; }.news-scroll { height: calc(100vh - var(--status-bar-height) - 184rpx); }.news-content { padding: 24rpx 28rpx 70rpx; }
|
|
.headline { height: 260rpx; padding: 28rpx; border-radius: 18rpx; background-color: #0b2a66; flex-direction: row; overflow: hidden; position: relative; }.headline-copy { width: 65%; z-index: 2; }.headline-tag { color: #75caff; font-size: 21rpx; font-weight: 700; }.headline-title { color: #fff; font-size: 31rpx; line-height: 45rpx; font-weight: 800; margin-top: 16rpx; }.headline-date { color: #bfd7ff; font-size: 20rpx; margin-top: 18rpx; }.headline-art { position: absolute; right: 0; top: 0; width: 56%; height: 100%; opacity: .78; }
|
|
.article { min-height: 185rpx; padding: 28rpx 0; flex-direction: row; border-bottom: 1rpx solid #e6edf6; }.article-copy { flex: 1; padding-right: 20rpx; }.article-title { color: #1b2941; font-size: 28rpx; line-height: 41rpx; font-weight: 700; }.article-summary { color: #778499; font-size: 22rpx; line-height: 34rpx; margin-top: 10rpx; }.article-meta { color: #a0aaba; font-size: 19rpx; margin-top: 12rpx; }.article-art { width: 150rpx; height: 120rpx; border-radius: 12rpx; flex-shrink: 0; }
|
|
</style>
|