feat: 添加登录状态相关UI改进和样式优化
- 在minihome页面添加z-index确保元素层级 - 修改rankDetail页面的标签颜色样式 - 在indexNewsInfo和RankListMini组件中添加登录状态判断 - 为未登录用户添加模糊效果和登录提示 - 新增登录解锁提示组件
This commit is contained in:
parent
f306788d8c
commit
a70819522e
|
|
@ -3,6 +3,7 @@
|
|||
<u-skeleton rows="5" title loading style="margin-bottom: 30rpx" v-if="loading"></u-skeleton>
|
||||
<view class="list" v-else>
|
||||
<view v-for="(item, index) in rankListLocal" :key="index" class="news-item" @click="goDetail(item, 0)">
|
||||
|
||||
<view class="rank-tag">
|
||||
<view v-if="index == 0" class="rank-text-top3">
|
||||
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_top_1.png" />
|
||||
|
|
@ -18,32 +19,32 @@
|
|||
|
||||
<!-- :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }" -->
|
||||
<view class="news-content">
|
||||
<text class="news-title">{{ item.title }}</text>
|
||||
<text class="news-desc">{{ item.summary }}</text>
|
||||
<view class="news-meta">
|
||||
<text style="">
|
||||
<text class="news-title">{{ item.title.slice(0, 3) }}</text>
|
||||
<text :class="['news-title', isLogin ? '' : 'mohu']">{{ item.title.slice(3, item.title.length
|
||||
- 1) }}</text>
|
||||
</text>
|
||||
<text :class="['news-desc', isLogin ? '' : 'mohu']">{{ item.summary }}</text>
|
||||
|
||||
<view :class="['news-meta', isLogin ? '' : 'mohu']">
|
||||
|
||||
<view>
|
||||
<text class="source">{{ item.source }}</text>
|
||||
<text class="time">{{
|
||||
dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
|
||||
}}</text>
|
||||
</view>
|
||||
<!-- <text class="score">
|
||||
<text v-if="index < 3">资讯评分：</text>
|
||||
{{ item.news_score }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view @click="isExp = !isExp" class="r_exp">
|
||||
<text v-if="isExp">收起</text>
|
||||
<text v-else>展开全部</text>
|
||||
<img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/up_icon.png" class="exp_up" v-if="isExp" />
|
||||
<img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/down_icon.png" class="exp_up" v-else />
|
||||
</view> -->
|
||||
|
||||
<!-- <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
|
||||
@handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" /> -->
|
||||
</view>
|
||||
<view class="lock_view" v-if="!isLogin">
|
||||
<image class="lock_icon"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/lock_icon%402x.png">
|
||||
</image>
|
||||
<text class="lock_text">海外独家资讯内容，<text style="color: #D13E3C">登录</text>后可查阅全文</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,6 +57,7 @@ import { Session } from "@/utils/storage";
|
|||
const isExp = ref(true);
|
||||
const rankListLocal = ref([]);
|
||||
const loading = ref(true);
|
||||
const isLogin = ref(uni.getStorageSync('token'))
|
||||
|
||||
watch(
|
||||
() => isExp.value,
|
||||
|
|
@ -145,7 +147,9 @@ const handlePopupErrorCallback = () => {
|
|||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-tag {
|
||||
|
|
@ -283,4 +287,39 @@ const handlePopupErrorCallback = () => {
|
|||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.mohu {
|
||||
filter: blur(7rpx);
|
||||
}
|
||||
|
||||
|
||||
.lock_view {
|
||||
background: linear-gradient(180deg, rgba(248, 244, 238, 0) 0%, #F8F4EE 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -10rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 74rpx;
|
||||
|
||||
.lock_icon {
|
||||
width: 27rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.lock_text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #7F6242;
|
||||
line-height: 33rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<view class="main">
|
||||
<view class="title">{{ props.data.title }}</view>
|
||||
<text style="margin-left: 40rpx;margin-right: 40rpx;display: flex;">
|
||||
<text class="title">{{ props.data.title?.slice(0, 3) }}</text>
|
||||
<text :class="['title', isLogin ? '' : 'mohu']">{{ props.data.title?.slice(3,
|
||||
props.data.title.length
|
||||
- 1) }}</text>
|
||||
</text>
|
||||
|
||||
<view class="author">
|
||||
<view class="name">
|
||||
<text class="text">来源:</text>
|
||||
|
|
@ -16,38 +22,25 @@
|
|||
|
||||
<!-- 两个标签 start -->
|
||||
<view class="r_r_tags">
|
||||
<view
|
||||
style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw"
|
||||
>
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #fff9ec; color: #ffb100"
|
||||
v-for="(item, index) in props.data.conceptLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
<view class="tag" style="background-color: #fff9ec; color: #ffb100"
|
||||
v-for="(item, index) in props.data.conceptLabels" :key="index">{{ item }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw"
|
||||
>
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #f5f8fe; color: #007aff"
|
||||
v-for="(item, index) in props.data.industryLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
<view class="tag" style="background-color: #f5f8fe; color: #007aff"
|
||||
v-for="(item, index) in props.data.industryLabels" :key="index">{{ item }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两个标签 end -->
|
||||
|
||||
<!-- 摘要 -->
|
||||
<view class="desc" v-if="props.data.summary">
|
||||
<view :class="['desc', isLogin ? '' : 'mohu']" v-if="props.data.summary">
|
||||
|
||||
<!-- <view class="bill_icon"></view> -->
|
||||
{{ props.data.summary }}
|
||||
</view>
|
||||
|
|
@ -61,12 +54,8 @@
|
|||
v-html="props.data.content">
|
||||
</text> -->
|
||||
|
||||
<rich-text
|
||||
class="articleDes"
|
||||
:class="props?.data?.needpay && 'needpay'"
|
||||
style="white-space: pre-wrap"
|
||||
v-html="props.data.content"
|
||||
></rich-text>
|
||||
<rich-text :class="['articleDes', isLogin ? '' : 'mohu']" style="white-space: pre-wrap"
|
||||
v-html="props.data.content"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- <view
|
||||
|
|
@ -88,6 +77,7 @@ import {
|
|||
onShareTimeline,
|
||||
} from "@dcloudio/uni-app";
|
||||
// import articleMock from "@/mock/article.js";
|
||||
const isLogin = ref(uni.getStorageSync('token'))
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -185,7 +175,7 @@ const handleSub = () => {
|
|||
|
||||
.title {
|
||||
padding-top: 16rpx;
|
||||
padding: 0 40rpx;
|
||||
// padding: 0 40rpx;
|
||||
// font-size: 40rpx;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
|
|
@ -305,4 +295,8 @@ const handleSub = () => {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mohu {
|
||||
filter: blur(7rpx);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,20 @@
|
|||
/> -->
|
||||
|
||||
<!-- 底部栏 评论 / 收藏 -->
|
||||
<Comment :data="data" @handleClickLike="handleClickLike" @handleClickStar="handleClickStar" />
|
||||
<Comment v-if="isLogin" :data="data" @handleClickLike="handleClickLike" @handleClickStar="handleClickStar" />
|
||||
|
||||
<view class="login_unlock" v-if="!isLogin">
|
||||
<view class="r_image">
|
||||
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/lock_banner%402x.png"></image>
|
||||
|
||||
<view class="image_text">
|
||||
<text class="image_text_title">登录解锁</text>
|
||||
<text class="image_text_sub_title">海外独家资讯内容，登录后可查阅全文</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login_unlock_btn">立即登录</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -50,6 +63,8 @@ import { getNavHeight } from "@/utils/util"
|
|||
|
||||
const stores = useShareStore();
|
||||
const curPages = getCurrentPages();
|
||||
const isLogin = ref<boolean>(uni.getStorageSync("token") ? true : false);
|
||||
|
||||
|
||||
const data = ref<any>({});
|
||||
const newType = ref<any>("");
|
||||
|
|
@ -262,4 +277,86 @@ const jumpDetail = (item: any) => {
|
|||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.login_unlock {
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100vw;
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.r_image {
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
.image_text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: start;
|
||||
justify-content: center;
|
||||
margin-left: 100rpx;
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.image_text_title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 42rpx;
|
||||
text-shadow: 0px 2px 8px rgba(43, 51, 75, 0.35);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.image_text_sub_title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #B5BED5;
|
||||
line-height: 33rpx;
|
||||
text-shadow: 0px 2px 8px rgba(43, 51, 75, 0.35);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 78vw;
|
||||
height: 128rpx;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.login_unlock_btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #D13E3C;
|
||||
border-radius: 44rpx;
|
||||
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 45rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
|
||||
<view :style="{
|
||||
position: 'sticky', top: getNavHeight() + 'px',
|
||||
backgroundColor: isScroll ? '#fff' : 'transparent'
|
||||
backgroundColor: isScroll ? '#fff' : 'transparent',
|
||||
zIndex: '9999'
|
||||
}" v-if="tabIndex == 0">
|
||||
<view class="r_sreach">
|
||||
<image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png">
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
<view class="list">
|
||||
<view v-for="(item, index) in list" :key="index" class="news-item" @click="goDetail(item)">
|
||||
<view class="news-content">
|
||||
|
||||
|
||||
<text class="news-title">{{ item.title }}</text>
|
||||
<text class="news-desc">{{ item.summary }}</text>
|
||||
<view class="news-meta">
|
||||
|
|
@ -207,22 +209,22 @@ onMounted(async () => {
|
|||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #3f80fa;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
background-color: #f5f8fe;
|
||||
color: #AF201E;
|
||||
background-color: #FAF3F2;
|
||||
}
|
||||
|
||||
.tag_item_act_yellow {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #ffa800;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
background-color: #fff9ec;
|
||||
color: #AF201E;
|
||||
background-color: #FAF3F2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue