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

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

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

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

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

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

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

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

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

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

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

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

@ -52,19 +52,18 @@
</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>
<LineHol v-if="lineTabIndex === 0" barColor="#3C74F1" :data="lineTopData"></LineHol>
<LineHol v-else-if="lineTabIndex === 1" barColor="#FFCC65" :data="lineTopData"></LineHol>
<LineHolYellow v-else-if="lineTabIndex === 2" barColor="#8B2DD4" :data="lineTopData"></LineHolYellow>
<div style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 20px">
<div class="tabs">
<div :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</div>
<div :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</div>
<div :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</div>
</div>
</div>
<view style="background-color: white; padding: 12pt">
<view class="tabs">
<view :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</view>
<view :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</view>
<view :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</view>
</view>
</view>
<LineHol v-if="lineTabIndex === 0" barColor="#FF8A00" :data="lineTopData"></LineHol>
<LineHol v-else-if="lineTabIndex === 1" barColor="#FF8A00" :data="lineTopData"></LineHol>
<LineHolYellow v-else-if="lineTabIndex === 2" barColor="#FF8A00" :data="lineTopData"></LineHolYellow>
</view>
<!-- <view style="background-color: white; margin-top: 40rpx">
@ -76,15 +75,17 @@
</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">
<indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle>
<!-- <indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle> -->
<view class="r_title">编辑精选</view>
<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="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_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 class="sreach_text">
<text>搜索资讯</text>
@ -108,6 +109,7 @@
</template>
<script setup>
import { onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, onUnmounted, reactive } from "vue";
import Line from "@/components/charts/Line.vue";
import bannerImg from "@/assets/zixun/banner_pic.png";
@ -168,9 +170,25 @@ async function getTopNum() {
lastRightNum.value = topNum.value.rightNum;
}
const newListAll = ref([]);
const pageData = reactive({
page: 1,
size: 20,
total: 0,
});
// 概念标签贴标
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
@ -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(() => {
clearInterval(timer);
});
@ -477,37 +506,60 @@ onMounted(async () => {
.tabs {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16rpx;
height: 30px;
border-radius: 10px;
.tab {
width: 100px;
height: 100%;
// width: 100px;
// height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border: 1px solid #e7e7e7;
color: #000;
padding: 10rpx 24rpx;
// border: 1px solid #e7e7e7;
color: #333;
font-size: 12px;
background: #f6f6f6;
border-radius: 8rpx;
}
.tab_left {
border-start-start-radius: 10px;
border-end-start-radius: 10px;
border-right: 0;
}
// .tab_left {
// border-start-start-radius: 10px;
// border-end-start-radius: 10px;
// border-right: 0;
// }
.tab_right {
border-start-end-radius: 10px;
border-end-end-radius: 10px;
border-left: 0;
}
// .tab_right {
// border-start-end-radius: 10px;
// border-end-end-radius: 10px;
// border-left: 0;
// }
.active {
border: 1px solid #ed971f;
background-color: #ed971f;
color: #fff;
font-weight: bold;
background-color: rgba(255, 153, 0, 0.1);
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;
height: 63rpx;
margin-left: 20rpx;
border: 1px solid #e7e7e7;
//border: 1px solid #e7e7e7;
margin-top: 5rpx;
// box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
color: #333;
background-color: #f7f8f9;
}
.sreach_icon {

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

@ -20,14 +20,25 @@
<!-- 搜索 start -->
<view class="sreach">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
@click="handleBack" />
<!-- <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
@click="handleBack" /> -->
<view style="width: 75vw">
<u-input v-model="keyWord" @change="handleChange" confirm-type="search" @confirm="getData()" prefixIcon="search"
style="flex: 1" placeholder="搜索资讯" class="sreach_input" :border="false" />
<view style="width: 100%; padding: 0 10rpx">
<u-input
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>
<text class="serach_btn" @click="getData()">搜索</text>
<!-- <text class="serach_btn" @click="getData()">搜索</text> -->
</view>
<!-- 搜索 end -->
@ -36,9 +47,13 @@
<!-- 加载更多的按钮 -->
<!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> -->
<view style="margin-top: 20vh">
<u-empty v-if="screenList.length === 0" 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 v-if="screenList.length === 0" style="margin-top: 20vh">
<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 v-if="finish && screenList.length > 0" class="noMore">
@ -51,8 +66,11 @@
<Pay :show="payShow" @onClick="handleClose" @handleSub="handleSub" />
<!-- 登录弹框 -->
<LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
@handlePopupSuccessCallback="handlePopupSuccessCallback" />
<LoginPopup
:show="LoginShow"
@handlePopupClose="handlePopupClose"
@handlePopupSuccessCallback="handlePopupSuccessCallback"
/>
</view>
</template>
@ -195,14 +213,20 @@ const getData = async () => {
screenResult = res.data.filter((item) => {
item.newType = "search";
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);
item.MarkInRedContent =
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;
});
if (screenList.value.length > 0) {
@ -244,17 +268,22 @@ onShow(() => {
}
.sreach_input {
background: rgba(118, 118, 128, 0.12);
width: 100%;
// width: 100%;
height: 70%;
border-radius: 20rpx;
padding: 0 20rpx;
border-radius: 100rpx;
margin-left: 10rpx;
border-radius: 20rpx;
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) {
background-color: rgba(118, 118, 128, 0.12);
.sreach_input:hover {
border: 1px solid #ff8a00;
}
.tabsListContainer {
@ -334,7 +363,9 @@ onShow(() => {
}
.serach_btn {
font-family: PingFangSC, PingFang SC;
font-family:
PingFangSC,
PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #d13e3c;