fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 更新UI组件样式和功能 

- 修改多个组件的颜色主题，包括标签背景色从#fff9ec调整为#fff2e9，
  文字颜色从#ffb100调整为#ff8125
- 调整间距单位，将rpx转换为pt单位以统一设计规范
- 更新字体家族配置，添加中文字体优先级列表
- 重构实时信息页面的布局结构和标签显示逻辑
- 优化搜索页面的输入框样式和交互体验
- 实现触底加载更多功能，提升用户体验
- 修复图表组件的轴标签显示问题，增加颜色配置
- 调整详情页面底部间距和分割线显示逻辑
This commit is contained in:
傅光孟 2026-04-04 20:32:47 +08:00
parent e30ac21f0c
commit ccc6d6da0c
8 changed files with 206 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/RankList.vue
View File

@ -26,7 +26,7 @@
<view class="r_tags"> <view class="r_tags">
<view <view
class="tag" class="tag"
style="background-color: #fff9ec; color: #ffb100" style="background-color: #fff2e9; color: #ff8125"
v-for="(item, index) in item.conceptLabels" v-for="(item, index) in item.conceptLabels"
:key="index" :key="index"
>{{ item }}</view >{{ item }}</view
@ -34,7 +34,7 @@
</view> </view>
</view> </view>
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw"> <view style="display: flex; margin-top: 4pt; overflow-x: auto; width: 100vw">
<view class="r_tags"> <view class="r_tags">
<view <view
class="tag" class="tag"
@ -268,7 +268,7 @@ function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 10px; margin-right: 6rpx;
} }
.rank-text-top3 { .rank-text-top3 {
@ -307,6 +307,15 @@ function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
} }
.news-title { .news-title {
font-family:
PingFangSC,
PingFang SC,
Helvetica,
Noto Sans SC,
Hiragino Sans GB,
Microsoft YaHei,
Arial,
sans-serif;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
@ -396,7 +405,7 @@ function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
.r_tags { .r_tags {
display: flex; display: flex;
gap: 10rpx; gap: 4pt;
.tag { .tag {
font-family: font-family:

40
src/components/article/indexNewsInfo.vue
View File

@ -21,7 +21,7 @@
<view class="r_tags"> <view class="r_tags">
<view <view
class="tag" class="tag"
style="background-color: #fff9ec; color: #ffb100" style="background-color: #fff2e9; color: #ff8125"
v-for="(item, index) in props.data.conceptLabels" v-for="(item, index) in props.data.conceptLabels"
:key="index" :key="index"
>{{ item }}</view >{{ item }}</view
@ -29,7 +29,7 @@
</view> </view>
</view> </view>
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw"> <view style="display: flex; margin-top: 4pt; overflow-x: auto; width: 100vw">
<view class="r_tags"> <view class="r_tags">
<view <view
class="tag" class="tag"
@ -229,7 +229,7 @@ const handleSub = () => {
.main { .main {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
padding-bottom: 120rpx; padding-bottom: 30rpx;
.title { .title {
padding-top: 16rpx; padding-top: 16rpx;
@ -242,7 +242,7 @@ const handleSub = () => {
/* 允许换行 */ /* 允许换行 */
overflow-wrap: break-word; overflow-wrap: break-word;
/* 在必要时单词内部断行 */ /* 在必要时单词内部断行 */
font-family: "SourceHanSansCN-Medium"; // font-family: "SourceHanSansCN-Medium";
} }
.author { .author {
@ -275,6 +275,15 @@ const handleSub = () => {
margin: 30rpx auto; margin: 30rpx auto;
color: #666666; color: #666666;
// font-size: 28rpx; // font-size: 28rpx;
font-family:
PingFangSC,
PingFang SC,
Helvetica,
Noto Sans SC,
Hiragino Sans GB,
Microsoft YaHei,
Arial,
sans-serif;
font-size: var(--h2-font-size); font-size: var(--h2-font-size);
// text-indent: 0.5em; // text-indent: 0.5em;
white-space: pre-wrap; white-space: pre-wrap;
@ -306,6 +315,15 @@ const handleSub = () => {
line-height: 50rpx; line-height: 50rpx;
text-align: justify; text-align: justify;
white-space: pre-wrap; white-space: pre-wrap;
font-family:
PingFangSC,
PingFang SC,
Helvetica,
Noto Sans SC,
Hiragino Sans GB,
Microsoft YaHei,
Arial,
sans-serif;
::v-deep { ::v-deep {
p { p {
@ -340,10 +358,12 @@ const handleSub = () => {
.r_tags { .r_tags {
display: flex; display: flex;
gap: 10rpx; gap: 4pt;
.tag { .tag {
font-family: PingFangSC, PingFang SC; font-family:
PingFangSC,
PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 22rpx; font-size: 22rpx;
color: #3f80fa; color: #3f80fa;
@ -379,7 +399,9 @@ const handleSub = () => {
} }
.etf_title { .etf_title {
font-family: PingFangSC, PingFang SC; font-family:
PingFangSC,
PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 30rpx; font-size: 30rpx;
color: #222222; color: #222222;
@ -394,7 +416,9 @@ const handleSub = () => {
background: #edf1f5; background: #edf1f5;
border-radius: 8rpx; border-radius: 8rpx;
font-family: PingFangSC, PingFang SC; font-family:
PingFangSC,
PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #666666; color: #666666;

2
src/components/articleList/index2.vue
View File

@ -155,7 +155,7 @@ const handleClick = (item: any) => {
word-break: break-all; word-break: break-all;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: bold; // font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #192236; color: #192236;
line-height: 45rpx; line-height: 45rpx;

7
src/components/charts/LineHol.vue
View File

@ -106,6 +106,10 @@ const initChart = () => {
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLabel: {
show: true,
color: "#999999"
}
}, },
], ],
yAxis: [ yAxis: [
@ -115,6 +119,7 @@ const initChart = () => {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 30, rotate: 30,
color: "#333333"
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -129,7 +134,9 @@ const initChart = () => {
label: { label: {
position: "right", position: "right",
show: true, show: true,
color: "#666666"
}, },
barWidth: '10pt',
itemStyle: { itemStyle: {
color: props.barColor, color: props.barColor,
normal: { normal: {

9
src/components/charts/LineHolYellow.vue
View File

@ -64,12 +64,17 @@ const initChart = () => {
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLabel: {
show: true,
color: "#999999",
},
}, },
yAxis: { yAxis: {
type: "category", type: "category",
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 30, rotate: 30,
color: "#333333",
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -94,7 +99,9 @@ const initChart = () => {
label: { label: {
position: "right", position: "right",
show: true, show: true,
color: "#666666"
}, },
barWidth: '10pt',
itemStyle: { itemStyle: {
color: "#FFCE34", color: "#FFCE34",
normal: { normal: {
@ -124,7 +131,7 @@ watch(
if (newVal) { if (newVal) {
initChart(); initChart();
} }
} },
); );
onMounted(async () => { onMounted(async () => {
// await getData(); // await getData();

8
src/pages/detail/indexNewsInfo.vue
View File

@ -18,7 +18,7 @@
<Article :data="data" /> <Article :data="data" />
<!-- 分割 --> <!-- 分割 -->
<view class="line"></view> <!-- <view class="line"></view> -->
<!-- 推荐栏目 --> <!-- 推荐栏目 -->
<!-- <Column <!-- <Column
:data="columnList" :data="columnList"
@ -28,11 +28,11 @@
/> --> /> -->
<!-- 底部栏 评论 / 收藏 --> <!-- 底部栏 评论 / 收藏 -->
<Comment <!-- <Comment
:data="data" :data="data"
@handleClickLike="handleClickLike" @handleClickLike="handleClickLike"
@handleClickStar="handleClickStar" @handleClickStar="handleClickStar"
/> /> -->
</view> </view>
</template> </template>
@ -287,7 +287,7 @@ const jumpDetail = (item: any) => {
.container { .container {
// background-color: #f5f5f5; // background-color: #f5f5f5;
padding-bottom: 112rpx; // padding-bottom: 112rpx;
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>

122
src/pages/realtimeInfo/indexRelease.vue
View File

@ -52,19 +52,18 @@
</view> --> </view> -->
</view> </view>
<view style="background-color: white; margin-top: -100rpx; position: relative; z-index: 9999"> <view style="background-color: white; margin-top: -100rpx; position: relative; z-index: 9999; margin-bottom: 12pt">
<indexMenuTitle title="近7天热度统计"></indexMenuTitle> <indexMenuTitle title="近7天热度统计"></indexMenuTitle>
<LineHol v-if="lineTabIndex === 0" barColor="#3C74F1" :data="lineTopData"></LineHol> <view style="background-color: white; padding: 12pt">
<LineHol v-else-if="lineTabIndex === 1" barColor="#FFCC65" :data="lineTopData"></LineHol> <view class="tabs">
<LineHolYellow v-else-if="lineTabIndex === 2" barColor="#8B2DD4" :data="lineTopData"></LineHolYellow> <view :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</view>
<view :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</view>
<div style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 20px"> <view :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</view>
<div class="tabs"> </view>
<div :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</div> </view>
<div :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</div> <LineHol v-if="lineTabIndex === 0" barColor="#FF8A00" :data="lineTopData"></LineHol>
<div :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</div> <LineHol v-else-if="lineTabIndex === 1" barColor="#FF8A00" :data="lineTopData"></LineHol>
</div> <LineHolYellow v-else-if="lineTabIndex === 2" barColor="#FF8A00" :data="lineTopData"></LineHolYellow>
</div>
</view> </view>
<!-- <view style="background-color: white; margin-top: 40rpx"> <!-- <view style="background-color: white; margin-top: 40rpx">
@ -76,15 +75,17 @@
</view> </view>
</view> --> </view> -->
<view style="background-color: white; padding-top: 40rpx"> <view style="background-color: white">
<view style="width: 100vw; display: flex; justify-content: space-between; align-items: center"> <view style="width: 100vw; display: flex; justify-content: space-between; align-items: center">
<indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle> <!-- <indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle> -->
<view class="r_title">编辑精选</view>
<view class="r_sreach"> <view class="r_sreach">
<!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> --> <!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> -->
<!-- <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image> --> <!-- <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image> -->
<view class="sreach" @click="goSreach"> <view class="sreach" @click="goSreach">
<view class="sreach_icon"> <view class="sreach_icon">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image> <!-- <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image> -->
<u-icon size="22" name="search" color="#999"></u-icon>
</view> </view>
<view class="sreach_text"> <view class="sreach_text">
<text>搜索资讯</text> <text>搜索资讯</text>
@ -108,6 +109,7 @@
</template> </template>
<script setup> <script setup>
import { onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, onUnmounted, reactive } from "vue"; import { ref, onMounted, onUnmounted, reactive } from "vue";
import Line from "@/components/charts/Line.vue"; import Line from "@/components/charts/Line.vue";
import bannerImg from "@/assets/zixun/banner_pic.png"; import bannerImg from "@/assets/zixun/banner_pic.png";
@ -168,9 +170,25 @@ async function getTopNum() {
lastRightNum.value = topNum.value.rightNum; lastRightNum.value = topNum.value.rightNum;
} }
const newListAll = ref([]);
const pageData = reactive({
page: 1,
size: 20,
total: 0,
});
// 概念标签贴标 // 概念标签贴标
async function getNewsList() { async function getNewsList() {
newsList.value = await getTopNewsAll({}); const result = await getTopNewsAll({});
// 存储所有数据
newListAll.value = [...result];
if (result && result.length > 0) {
// 获取总页数
pageData.total = Math.ceil(newListAll.value.length / pageData.size);
newsList.value = newListAll.value.slice(0, pageData.size);
} else {
newsList.value = [];
}
} }
// 热门行业top10 // 热门行业top10
@ -304,6 +322,17 @@ function goSreach() {
} }
} }
// 触底更新
onReachBottom(() => {
console.log("我到底了");
if (pageData.page < pageData.total) {
pageData.page += 1;
const start = (pageData.page - 1) * pageData.size;
const end = pageData.page * pageData.size;
newsList.value = newListAll.value.slice(0, end);
}
});
onUnmounted(() => { onUnmounted(() => {
clearInterval(timer); clearInterval(timer);
}); });
@ -477,37 +506,60 @@ onMounted(async () => {
.tabs { .tabs {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start;
gap: 16rpx;
height: 30px; height: 30px;
border-radius: 10px; border-radius: 10px;
.tab { .tab {
width: 100px; // width: 100px;
height: 100%; // height: 100%;
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid #e7e7e7; padding: 10rpx 24rpx;
color: #000; // border: 1px solid #e7e7e7;
color: #333;
font-size: 12px; font-size: 12px;
background: #f6f6f6;
border-radius: 8rpx;
} }
.tab_left { // .tab_left {
border-start-start-radius: 10px; // border-start-start-radius: 10px;
border-end-start-radius: 10px; // border-end-start-radius: 10px;
border-right: 0; // border-right: 0;
} // }
.tab_right { // .tab_right {
border-start-end-radius: 10px; // border-start-end-radius: 10px;
border-end-end-radius: 10px; // border-end-end-radius: 10px;
border-left: 0; // border-left: 0;
} // }
.active { .active {
border: 1px solid #ed971f; font-weight: bold;
background-color: #ed971f; background-color: rgba(255, 153, 0, 0.1);
color: #fff; color: #ff9900;
}
}
.r_title {
display: flex;
align-items: center;
padding-left: 12pt;
font-size: 32rpx;
font-weight: bold;
color: #333;
&::before {
content: "";
width: 4px;
height: 32rpx;
border-radius: 8rpx;
margin-right: 16rpx;
background: #ff9900;
} }
} }
@ -537,9 +589,11 @@ onMounted(async () => {
// width: 90vw; // width: 90vw;
height: 63rpx; height: 63rpx;
margin-left: 20rpx; margin-left: 20rpx;
border: 1px solid #e7e7e7; //border: 1px solid #e7e7e7;
margin-top: 5rpx; margin-top: 5rpx;
// box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1); // box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
color: #333;
background-color: #f7f8f9;
} }
.sreach_icon { .sreach_icon {

75
src/pages/sreachReq/index.vue
View File

@ -20,14 +20,25 @@
<!-- 搜索 start --> <!-- 搜索 start -->
<view class="sreach"> <view class="sreach">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon" <!-- <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
@click="handleBack" /> @click="handleBack" /> -->
<view style="width: 75vw"> <view style="width: 100%; padding: 0 10rpx">
<u-input v-model="keyWord" @change="handleChange" confirm-type="search" @confirm="getData()" prefixIcon="search" <u-input
style="flex: 1" placeholder="搜索资讯" class="sreach_input" :border="false" /> v-model="keyWord"
@change="handleChange"
confirm-type="search"
@confirm="getData()"
prefixIcon="search"
style="flex: 1"
placeholder="请输入关键字"
placeholderStyle="color: #ccc"
clearable
class="sreach_input"
:border="false"
/>
</view> </view>
<text class="serach_btn" @click="getData()">搜索</text> <!-- <text class="serach_btn" @click="getData()">搜索</text> -->
</view> </view>
<!-- 搜索 end --> <!-- 搜索 end -->
@ -36,9 +47,13 @@
<!-- 加载更多的按钮 --> <!-- 加载更多的按钮 -->
<!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> --> <!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> -->
<view style="margin-top: 20vh"> <view v-if="screenList.length === 0" style="margin-top: 20vh">
<u-empty v-if="screenList.length === 0" text="无搜索结果" width="157" height="100" <u-empty
icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"></u-empty> text="无搜索结果"
width="157"
height="100"
icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"
></u-empty>
</view> </view>
<!-- <view v-if="finish && screenList.length > 0" class="noMore"> <!-- <view v-if="finish && screenList.length > 0" class="noMore">
@ -51,8 +66,11 @@
<Pay :show="payShow" @onClick="handleClose" @handleSub="handleSub" /> <Pay :show="payShow" @onClick="handleClose" @handleSub="handleSub" />
<!-- 登录弹框 --> <!-- 登录弹框 -->
<LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose" <LoginPopup
@handlePopupSuccessCallback="handlePopupSuccessCallback" /> :show="LoginShow"
@handlePopupClose="handlePopupClose"
@handlePopupSuccessCallback="handlePopupSuccessCallback"
/>
</view> </view>
</template> </template>
@ -195,14 +213,20 @@ const getData = async () => {
screenResult = res.data.filter((item) => { screenResult = res.data.filter((item) => {
item.newType = "search"; item.newType = "search";
item.time = formatTimestamp(item.time); item.time = formatTimestamp(item.time);
item.MarkInRedTitle = item.title.replace(new RegExp(inputValue.value, "gi"), `<text style="color: #E7303F">$&</text>`); item.MarkInRedTitle = item.title.replace(
new RegExp(inputValue.value, "gi"),
`<text style="color: #E7303F">$&</text>`,
);
item.title = item.title.replace(keyWord.value, '<span style="color: red;">' + keyWord.value + "</span>"); item.title = item.title.replace(keyWord.value, '<span style="color: #ff8125;">' + keyWord.value + "</span>");
console.log("🚀 ~ getData ~ item.title :", item.title); console.log("🚀 ~ getData ~ item.title :", item.title);
item.MarkInRedContent = item.MarkInRedContent =
item.contentText && item.contentText &&
extractText(item.contentText, inputValue.value).replace(new RegExp(inputValue.value, "gi"), `<text style="color: #E7303F">$&</text>`); extractText(item.contentText, inputValue.value).replace(
new RegExp(inputValue.value, "gi"),
`<text style="color: #E7303F">$&</text>`,
);
return item; return item;
}); });
if (screenList.value.length > 0) { if (screenList.value.length > 0) {
@ -244,17 +268,22 @@ onShow(() => {
} }
.sreach_input { .sreach_input {
background: rgba(118, 118, 128, 0.12); // width: 100%;
width: 100%;
height: 70%; height: 70%;
border-radius: 20rpx;
padding: 0 20rpx; padding: 0 20rpx;
border-radius: 100rpx; border-radius: 20rpx;
margin-left: 10rpx; color: #333333;
// margin-left: 10rpx;
border: 1px solid rgba(0, 0, 0, 0);
background-color: #f7f8f9;
:deep(.u-icon__icon){
color: #999 !important;
}
} }
:deep(.u-input) { .sreach_input:hover {
background-color: rgba(118, 118, 128, 0.12); border: 1px solid #ff8a00;
} }
.tabsListContainer { .tabsListContainer {
@ -334,7 +363,9 @@ onShow(() => {
} }
.serach_btn { .serach_btn {
font-family: PingFangSC, PingFang SC; font-family:
PingFangSC,
PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #d13e3c; color: #d13e3c;