feat: 登录拦截功能完善

This commit is contained in:
duanshuwen
2025-09-13 22:01:50 +08:00
parent 11141ae436
commit 261fb16bd6
11 changed files with 139 additions and 119 deletions

View File

@@ -7,7 +7,9 @@
:key="index"
>
<view class="mk-card-item" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="aspectFill"></image>
<Interceptor />
<image class="card-img" :src="item.coverPhoto" mode="aspectFill" />
<view class="overlay-gradient">
<text class="overlay-text">{{ item.topic }}</text>
</view>
@@ -18,9 +20,11 @@
</template>
<script setup>
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant.js";
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
import { checkToken } from "@/hooks/useGoLogin";
import Interceptor from "@/components/Interceptor/index.vue";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
const props = defineProps({
recommendTheme: {
@@ -30,63 +34,13 @@ const props = defineProps({
});
const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, "");
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
checkToken().then(() => {
const topic = item.userInputContent || item.topic.replace(/^#/, "");
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
});
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
}
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin: 4px 0 6px;
.mk-card-item {
flex-shrink: 0; /* 关键:防止 flex 布局压缩子元素宽度 */
width: 142px;
height: 126px;
border-radius: 10px;
overflow: hidden;
margin-right: 8px;
position: relative;
image {
width: 100%;
height: 100%;
display: block;
}
/* 渐变背景层 */
.overlay-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* 渐变层高度,可调 */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.001) 0%,
rgba(0, 0, 0, 0.5) 100%
);
display: flex;
align-items: flex-end; /* 文字贴近底部 */
padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
box-sizing: border-box;
}
/* 渐变层上的文字 */
.overlay-text {
color: #fff;
font-weight: 500;
font-size: 12px;
text-align: left;
width: 100%;
}
}
}
@import "./styles/RecommendPostsList.scss";
</style>