feat: 更新实时信息页面样式和交互

- 修改PageTop组件底部线条颜色从蓝色(#007aff)到橙色(#ff9900)
- 将indexPC.vue中的content容器重命名为content-wrap,并添加背景色和内边距样式
- 更新文本字体族为"Microsoft YaHei"优先,调整文字颜色从#1a1a1a到#333
- 在rank.vue中增强编辑精选标题显示效果,精选文字使用强调样式
- 优化搜索输入框占位符样式颜色
- 重构分页组件,使用el-config-provider配置中文本地化,
  增加总数显示、页面大小选择器和跳转功能
- 添加Element Plus主题色自定义变量#ff9900
- 修复分享存储中的微信SDK数据访问安全问题,使用可选链操作符防止空指针异常
This commit is contained in:
傅光孟 2026-04-04 10:31:35 +08:00
parent 8c4231e45b
commit e30ac21f0c
4 changed files with 62 additions and 29 deletions

View File

@ -128,7 +128,7 @@ onLoad((e) => {
.line { .line {
width: 64px; width: 64px;
height: 4px; height: 4px;
background: #007aff; background: #ff9900;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }

View File

@ -2,7 +2,7 @@
<view class="pc_all"> <view class="pc_all">
<PageTop></PageTop> <PageTop></PageTop>
<view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }"> <view class="content-wrap" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
<view class="top" @click="goBack"> <view class="top" @click="goBack">
<image src="@/assets/zixun/icon_fanhui.png" class="icon_back" /> <image src="@/assets/zixun/icon_fanhui.png" class="icon_back" />
<text>返回列表</text> <text>返回列表</text>
@ -130,6 +130,11 @@ const handlePopupErrorCallback = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./index.css"); @import url("./index.css");
.content-wrap {
background-color: #fff;
padding: 0 120px;
}
.page_top { .page_top {
width: 100vw; width: 100vw;
height: 120rpx; height: 120rpx;
@ -249,9 +254,7 @@ const handlePopupErrorCallback = () => {
} }
.abstract { .abstract {
font-family: font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
PingFangSC,
PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #666666; color: #666666;
@ -311,12 +314,10 @@ const handlePopupErrorCallback = () => {
} }
.text { .text {
font-family: font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
PingFangSC,
PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #1a1a1a; color: #333;
line-height: 28px; line-height: 28px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;

View File

@ -5,7 +5,7 @@
<view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }"> <view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
<view class="top_title"> <view class="top_title">
<text class="pageTitle" v-if="pageType != 4">资讯头条榜</text> <text class="pageTitle" v-if="pageType != 4">资讯头条榜</text>
<text class="pageTitle" v-if="pageType == 4">编辑精选</text> <text class="pageTitle" v-if="pageType == 4">编辑<text class="strong">精选</text></text>
<image src="@/assets/zixun/top20_icon.png" class="title_icon" v-if="pageType != 4"></image> <image src="@/assets/zixun/top20_icon.png" class="title_icon" v-if="pageType != 4"></image>
<!-- <u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search" <!-- <u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search"
@keyup.enter="getNewsList" @blur="getNewsList" prefixIconStyle="font-size: 22px;color: #909399" @keyup.enter="getNewsList" @blur="getNewsList" prefixIconStyle="font-size: 22px;color: #909399"
@ -20,6 +20,7 @@
v-model="form.keyword" v-model="form.keyword"
placeholder="请输入搜索内容" placeholder="请输入搜索内容"
class="input" class="input"
placeholder-style="color: #ccc"
@keyup.enter="getNewsList" @keyup.enter="getNewsList"
@clear="getNewsList" @clear="getNewsList"
@blur="getNewsList" @blur="getNewsList"
@ -60,17 +61,23 @@
</view> </view>
<div <div
style="width: 100%; display: flex; justify-content: center" class="pagination"
style="width: 100%; display: flex; justify-content: flex-end"
v-if="pageType == 4 && newsList && newsList.length > 0" v-if="pageType == 4 && newsList && newsList.length > 0"
> >
<el-config-provider :locale="zhCn">
<el-pagination <el-pagination
popper-class="popper-style"
background
v-model:current-page="currentPage" v-model:current-page="currentPage"
:page-size="form.size" :page-size="form.size"
layout="prev, pager, next" layout="total, sizes, prev, pager, next, jumper"
:total="form.total" :total="form.total"
@current-change="currentChange" @current-change="currentChange"
@size-change="sizeChange" @size-change="sizeChange"
/> >
</el-pagination>
</el-config-provider>
</div> </div>
</view> </view>
<LoginPopup <LoginPopup
@ -93,6 +100,7 @@ import { Session } from "@/utils/storage";
import { editTopNews } from "@/api/index"; import { editTopNews } from "@/api/index";
import { sendToken } from "@/api/index"; import { sendToken } from "@/api/index";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const pageSizes = ref([10, 20, 30, 40]); const pageSizes = ref([10, 20, 30, 40]);
const form = reactive({ const form = reactive({
@ -240,6 +248,12 @@ const handlePopupErrorCallback = () => {
<style scoped lang="scss"> <style scoped lang="scss">
@import url("./index.css"); @import url("./index.css");
.pc_all{
--el-color-primary: #ff9900;
}
.top_title { .top_title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -249,6 +263,10 @@ const handlePopupErrorCallback = () => {
font-size: 26px; font-size: 26px;
color: #1a1a1a; color: #1a1a1a;
font-weight: bold; font-weight: bold;
.strong {
color: #ff9900;
}
} }
.title_icon { .title_icon {
@ -338,7 +356,7 @@ const handlePopupErrorCallback = () => {
} }
.item_title:hover { .item_title:hover {
color: #057cff; color: #ff9900;
} }
.item_title { .item_title {
@ -352,9 +370,7 @@ const handlePopupErrorCallback = () => {
} }
.item_summary { .item_summary {
font-family: font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
PingFangSC,
PingFang SC;
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
@ -441,7 +457,7 @@ const handlePopupErrorCallback = () => {
gap: 10px; gap: 10px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
background: #007aff; background: #ff9900;
color: white; color: white;
font-family: font-family:
@ -480,4 +496,20 @@ const handlePopupErrorCallback = () => {
box-shadow: 0 0 0 #fff; box-shadow: 0 0 0 #fff;
} }
} }
.pagination {
margin-top: 24px;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
// :deep(.el-pager li){
// border: 1px solid #ccc;
// background: transparent;
// }
}
:deep(.el-select-dropdown__item.is-selected) {
color: #ff9900
}
</style> </style>

View File

@ -54,14 +54,14 @@ export const useShareStore = defineStore("share", {
params: { url }, params: { url },
responseType: "json", responseType: "json",
}).then((res: any) => { }).then((res: any) => {
const data: IWxConfig = res.data.data; const data: IWxConfig = res?.data?.data;
// console.log("🚀 ~ getWeChatSdkData ~ data:", data); // console.log("🚀 ~ getWeChatSdkData ~ data:", data);
wx.config({ wx.config({
debug: false, debug: false,
appId: data.appId, appId: data?.appId,
timestamp: data.timestamp, timestamp: data?.timestamp,
nonceStr: data.nonceStr, nonceStr: data?.nonceStr,
signature: data.signature, signature: data?.signature,
jsApiList: [ jsApiList: [
"updateAppMessageShareData", "updateAppMessageShareData",
"updateTimelineShareData", "updateTimelineShareData",