zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 探索发等UI调整

Browse Source
This commit is contained in:
zoujing
2025-08-04 22:49:11 +08:00
parent 800052a900
commit 8325ec80ad
3 changed files with 161 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
pages/module/banner/ActivityListComponent.vue
View File

@@ -10,6 +10,7 @@
<swiper-item v-for="item in activityList" :key="item.id">
<view class="swiper-item">
<image :src="item.activityCover" mode="aspectFill"></image>
<view class="corner-btn">快速预定</view>
</view>
</swiper-item>
</swiper>
@@ -45,15 +46,32 @@
border-radius: 8px;
}
.swiper-item {
display: block;
height: 120px;
line-height: 120px;
text-align: center;
}
.swiper-item image {
width: 100%;
height: 100%;
border-radius: 8px;
position: relative;
display: block;
height: 120px;
line-height: 120px;
text-align: center;
image {
width: 100%;
height: 100%;
border-radius: 8px;
display: block;
}
.corner-btn {
position: absolute;
right: 12px;
bottom: 12px;
background-color: #ffeb00;
color: #333;
font-size: 14px;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;
line-height: 1.5;
}
}
}
</style>

70
pages/module/discovery/DiscoveryCradContentList.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<view class="container">
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
</view>
</view>
</view>
</template>
<script setup>
import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { RECOMMEND_POSTS_TITLE } from '@/constant/constant'
import { defineProps } from 'vue'
const props = defineProps({
recommendTheme: {
type: Object,
default: {}
}
})
const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, '');
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
}
</script>
<style lang="scss" scoped>
.container {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
image {
width: 188px;
height: 112px;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
}
}
}
}
</style>

105
pages/module/recommend/RecommendPostsList.vue
View File

@@ -3,8 +3,10 @@
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }} dd</text>
<image :src="item.coverPhoto" mode="aspectFill"></image>
<view class="overlay-gradient">
<text class="overlay-text">{{ item.topic }}</text>
</view>
</view>
</view>
</view>
@@ -12,9 +14,9 @@
<script setup>
import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { defineProps } from 'vue'
import { RECOMMEND_POSTS_TITLE } from '@/constant/constant.js'
import { defineProps } from 'vue'
const props = defineProps({
recommendTheme: {
type: Object,
@@ -23,9 +25,7 @@
})
const sendReply = (item) => {
// 向父组件传递数据
const topic = item.topic.replace(/^#/, '');
console.log("======>", topic)
const topic = item.userInputContent || item.topic.replace(/^#/, '');
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
}
@@ -33,41 +33,62 @@
<style lang="scss" scoped>
.container {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
image {
width: 188px;
height: 112px;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
}
}
}
}
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.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%;
}
}
}
</style>