|
|
@@ -1,37 +1,67 @@
|
|
|
<template>
|
|
|
- <view class="news-list-container">
|
|
|
+ <view class="tab-content">
|
|
|
+
|
|
|
+ <!-- <view class="col-12 m-b30">
|
|
|
+ <view class="card card-action action-elevate action-border-primary">
|
|
|
+ <view class="row g-0">
|
|
|
+ <view class="col-md-3">
|
|
|
+ <view class="card-header border-0 p-0 m-2 position-relative overflow-hidden">
|
|
|
+ <image src="/static/images/vu/news.jpg" alt="" class="img-fluid rounded" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="col-md-9 py-3 d-flex flex-column">
|
|
|
+ <view class="card-body px-3 py-2">
|
|
|
+ <a href="-" class="badge badge-sm bg-danger mb-1">Trading</a>
|
|
|
+ <h4><span class="text-2xs text-body"><i class="icon-calendar text-primary"></i> 2025-03-24 l
|
|
|
+ 10:30 AM</span><br>
|
|
|
+ <a href="-" class="text-dark">Dollar Index (ICE) Intraday:
|
|
|
+ caution</a>
|
|
|
+ </h4>
|
|
|
+ <p>We are thrilled to announce that CWG Markets has been honored
|
|
|
+ with the prestigious title of Leading Financial Services..</p>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
<!-- 列表 -->
|
|
|
<view v-if="list.length > 0" class="list">
|
|
|
- <view v-for="item in list" :key="item.id" class="news-item" @click="handleItemClick(item)">
|
|
|
- <view v-if="item.coverImage" class="img-wrap">
|
|
|
- <image class="cover-img" :src="imgUrl + item.coverImage" mode="aspectFill" />
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="title">{{ item.title }}</view>
|
|
|
- <view class="subtitle">{{ item.subTitle }}</view>
|
|
|
- <view class="meta">
|
|
|
- <text class="date">{{ formatDate(item.deliveryTime) }}</text>
|
|
|
+ <view v-for="item in list" :key="item.id" class="col-12 m-b30">
|
|
|
+ <view class="card card-action action-elevate action-border-primary" @click="handleItemClick(item)">
|
|
|
+ <view class="row g-0">
|
|
|
+ <view class="col-md-3">
|
|
|
+ <view class="card-header border-0 p-0 m-2 position-relative overflow-hidden">
|
|
|
+ <image v-if="item.coverImage" :src="imgUrl + item.coverImage" class="img-fluid rounded"
|
|
|
+ mode="widthFix" />
|
|
|
+ <view v-else class="placeholder-image"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="col-md-9 py-3 d-flex flex-column">
|
|
|
+ <view class="card-body px-3 py-2">
|
|
|
+ <!-- <a href="#" class="badge badge-sm bg-danger mb-1">Trading</a> -->
|
|
|
+ <h4>
|
|
|
+ <span class="text-2xs text-body"><i class="icon-calendar text-primary"></i> {{
|
|
|
+ formatDate(item.deliveryTime) }}</span><br>
|
|
|
+ <a href="#" class="text-dark">{{ item.title }}</a>
|
|
|
+ </h4>
|
|
|
+ <p>{{ item.subTitle }}</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 空状态 -->
|
|
|
- <view v-else-if="!loading && finished" class="empty">
|
|
|
+ <view v-else-if="!loading && list.length === 0" class="empty">
|
|
|
<cwg-empty-state />
|
|
|
</view>
|
|
|
<view class="table-loading-mask">
|
|
|
<uni-loading v-if="loading" />
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 加载更多状态 -->
|
|
|
- <view v-if="loadingMore" class="load-more">
|
|
|
- <text v-t11="'common.loading'" />
|
|
|
- </view>
|
|
|
- <view v-else-if="finished && list.length > 0" class="load-more">
|
|
|
- <text v-t11="'common.noMore'" />
|
|
|
- </view>
|
|
|
</view>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -132,135 +162,4 @@ defineExpose({ load, loadMore })
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/uni.scss";
|
|
|
-
|
|
|
-.news-list-container {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow-x: hidden;
|
|
|
-
|
|
|
- .list {
|
|
|
- display: grid;
|
|
|
- grid-row-gap: px2rpx(20);
|
|
|
- grid-column-gap: px2rpx(16);
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
-
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .news-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- padding: px2rpx(16);
|
|
|
- gap: px2rpx(12);
|
|
|
- background: #fff;
|
|
|
- border-radius: px2rpx(12);
|
|
|
- overflow: hidden;
|
|
|
- box-shadow:
|
|
|
- 0 2rpx 8rpx rgba(0, 0, 0, 0.04),
|
|
|
- 0 1rpx 2rpx rgba(0, 0, 0, 0.06);
|
|
|
- box-sizing: border-box;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1rpx solid rgba(0, 0, 0, 0.03);
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.98);
|
|
|
- box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.08);
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover {
|
|
|
- transform: translateY(-4rpx);
|
|
|
- box-shadow:
|
|
|
- 0 8rpx 24rpx rgba(0, 0, 0, 0.08),
|
|
|
- 0 4rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
|
- }
|
|
|
-
|
|
|
- &:hover .img-wrap .cover-img {
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
- /* #endif */
|
|
|
-
|
|
|
- .img-wrap {
|
|
|
- width: 100%;
|
|
|
- height: px2rpx(220);
|
|
|
- border-radius: px2rpx(8);
|
|
|
- overflow: hidden;
|
|
|
- flex-shrink: 0;
|
|
|
- position: relative;
|
|
|
- background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .cover-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- min-height: px2rpx(120);
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: px2rpx(17);
|
|
|
- font-weight: 600;
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
- line-height: 1.5;
|
|
|
- margin-bottom: px2rpx(8);
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- letter-spacing: 0.3rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .subtitle {
|
|
|
- font-size: px2rpx(14);
|
|
|
- color: #666666;
|
|
|
- line-height: 1.6;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: px2rpx(10);
|
|
|
- }
|
|
|
-
|
|
|
- .meta {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- font-size: px2rpx(12);
|
|
|
- color: #999999;
|
|
|
- padding-top: px2rpx(8);
|
|
|
- border-top: 1rpx solid #f0f0f0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.load-more {
|
|
|
- text-align: center;
|
|
|
- padding: px2rpx(10);
|
|
|
- font-size: px2rpx(14);
|
|
|
- color: var(--bs-heading-color);
|
|
|
-}
|
|
|
-
|
|
|
-.empty {
|
|
|
- text-align: center;
|
|
|
- padding: 100rpx 0;
|
|
|
- color: var(--bs-heading-color);
|
|
|
- font-size: px2rpx(14);
|
|
|
-}
|
|
|
</style>
|