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:
parent
8c4231e45b
commit
e30ac21f0c
|
|
@ -128,7 +128,7 @@ onLoad((e) => {
|
|||
.line {
|
||||
width: 64px;
|
||||
height: 4px;
|
||||
background: #007aff;
|
||||
background: #ff9900;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
|
|
@ -311,12 +314,10 @@ const handlePopupErrorCallback = () => {
|
|||
}
|
||||
|
||||
.text {
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #1a1a1a;
|
||||
color: #333;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
|
|
|||
|
|
@ -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-config-provider :locale="zhCn">
|
||||
<el-pagination
|
||||
popper-class="popper-style"
|
||||
background
|
||||
v-model:current-page="currentPage"
|
||||
:page-size="form.size"
|
||||
layout="prev, pager, next"
|
||||
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:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-family: "Microsoft YaHei", "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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
timestamp: data.timestamp,
|
||||
nonceStr: data.nonceStr,
|
||||
signature: data.signature,
|
||||
appId: data?.appId,
|
||||
timestamp: data?.timestamp,
|
||||
nonceStr: data?.nonceStr,
|
||||
signature: data?.signature,
|
||||
jsApiList: [
|
||||
"updateAppMessageShareData",
|
||||
"updateTimelineShareData",
|
||||
|
|
|
|||
Loading…
Reference in New Issue