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

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

src/pages/realtimeInfo/pc/components/PageTop.vue

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

src/pages/realtimeInfo/pc/indexPC.vue

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

src/pages/realtimeInfo/pc/rank.vue

@@ -5,7 +5,7 @@
     <view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
       <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 class="strong">精选</text></text>
         <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"
           @keyup.enter="getNewsList" @blur="getNewsList" prefixIconStyle="font-size: 22px;color: #909399"
@@ -20,6 +20,7 @@
             v-model="form.keyword"
             placeholder="请输入搜索内容"
             class="input"
+            placeholder-style="color: #ccc"
             @keyup.enter="getNewsList"
             @clear="getNewsList"
             @blur="getNewsList"
@@ -60,17 +61,23 @@
       </view>
 
       <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"
       >
-        <el-pagination
+        <el-config-provider :locale="zhCn">
-          v-model:current-page="currentPage"
+          <el-pagination
-          :page-size="form.size"
+            popper-class="popper-style"
-          layout="prev, pager, next"
+            background
-          :total="form.total"
+            v-model:current-page="currentPage"
-          @current-change="currentChange"
+            :page-size="form.size"
-          @size-change="sizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
-        />
+            :total="form.total"
+            @current-change="currentChange"
+            @size-change="sizeChange"
+          >
+          </el-pagination>
+        </el-config-provider>
       </div>
     </view>
     <LoginPopup
@@ -93,6 +100,7 @@ import { Session } from "@/utils/storage";
 import { editTopNews } from "@/api/index";
 import { sendToken } from "@/api/index";
 import { useRoute, useRouter } from "vue-router";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const pageSizes = ref([10, 20, 30, 40]);
 const form = reactive({
@@ -240,6 +248,12 @@ const handlePopupErrorCallback = () => {
 <style scoped lang="scss">
 @import url("./index.css");
 
+.pc_all{
+
+  --el-color-primary: #ff9900;
+  
+}
+
 .top_title {
   display: flex;
   align-items: center;
@@ -249,6 +263,10 @@ const handlePopupErrorCallback = () => {
     font-size: 26px;
     color: #1a1a1a;
     font-weight: bold;
+
+    .strong {
+      color: #ff9900;
+    }
   }
 
   .title_icon {
@@ -338,7 +356,7 @@ const handlePopupErrorCallback = () => {
   }
 
   .item_title:hover {
-    color: #057cff;
+    color: #ff9900;
   }
 
   .item_title {
@@ -352,9 +370,7 @@ const handlePopupErrorCallback = () => {
   }
 
   .item_summary {
-    font-family:
+    font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
-      PingFangSC,
-      PingFang SC;
     font-weight: normal;
     font-size: 16px;
     color: #333333;
@@ -441,7 +457,7 @@ const handlePopupErrorCallback = () => {
   gap: 10px;
   flex-shrink: 0;
   border-radius: 0 10px 10px 0;
-  background: #007aff;
+  background: #ff9900;
 
   color: white;
   font-family:
@@ -480,4 +496,20 @@ const handlePopupErrorCallback = () => {
     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>

src/stores/shareStore.ts

@@ -54,14 +54,14 @@ export const useShareStore = defineStore("share", {
         params: { url },
         responseType: "json",
       }).then((res: any) => {
-        const data: IWxConfig = res.data.data;
+        const data: IWxConfig = res?.data?.data;
         // console.log("🚀 ~ getWeChatSdkData ~ data:", data);
         wx.config({
           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: [
             "updateAppMessageShareData",
             "updateTimelineShareData",