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

feat: 优化处理了滚动条的问题

Browse Source
This commit is contained in:
zoujing
2025-08-13 19:29:11 +08:00
parent 6e365fd187
commit ef8d388837
8 changed files with 587 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/chat/ChatMoreTips.vue
View File

@@ -50,12 +50,6 @@ const sendReply = (text) => {
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
box-sizing: border-box;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.more-tips-item {

265
pages/chat/ChatQuickAccess.vue
View File

@@ -1,140 +1,143 @@
<template>
<view class="quick-access">
<view class="quick-access-scroll">
<view class="quick-access-item" v-for="(item, index) in itemList" :key="index" @click="sendReply(item)">
<image class="quick-access-item-bg" src="/static/quick/quick_icon_bg.png" mode="aspectFill"></image>
<view class="quick-access-item-title">
<image :src="item.icon"></image>
<text>{{ item.title }}</text>
</view>
<text class="quick-access-item-content">{{ item.content }}</text>
</view>
</view>
</view>
<view class="quick-access">
<view class="quick-access-scroll">
<view
class="quick-access-item"
v-for="(item, index) in itemList"
:key="index"
@click="sendReply(item)"
>
<image
class="quick-access-item-bg"
src="/static/quick/quick_icon_bg.png"
mode="aspectFill"
></image>
<view class="quick-access-item-title">
<image :src="item.icon"></image>
<text>{{ item.title }}</text>
</view>
<text class="quick-access-item-content">{{
item.content
}}</text>
</view>
</view>
</view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const itemList = ref([])
const emits = defineEmits(['replySent']);
const sendReply = (item) => {
emits('replySent', item); // 向父组件传递数据
}
onMounted(() => {
initData()
})
const initData = () => {
itemList.value = [
{
icon: '/static/quick/quick_icon_yuding.png',
title: '快速预定',
content: '预定门票、房间、餐食',
type: 'Command.quickBooking'
},
{
icon: '/static/quick/quick_icon_find.png',
title: '探索发现',
content: '探索玩法、出片佳地',
type: 'Command.discovery'
},
{
icon: '/static/quick/quick_icon_order.png',
title: '订单/工单',
content: '我的订单/工单',
type: 'MyOrder'
},
{
icon: '/static/quick/quick_icon_call.png',
title: '呼叫服务',
content: '加水、客房服务等',
type: 'Command.createWorkOrder'
}
]
}
import { onMounted, ref } from "vue";
const itemList = ref([]);
const emits = defineEmits(["replySent"]);
const sendReply = (item) => {
emits("replySent", item); // 向父组件传递数据
};
onMounted(() => {
initData();
});
const initData = () => {
itemList.value = [
{
icon: "/static/quick/quick_icon_yuding.png",
title: "快速预定",
content: "预定门票、房间、餐食",
type: "Command.quickBooking",
},
{
icon: "/static/quick/quick_icon_find.png",
title: "探索发现",
content: "探索玩法、出片佳地",
type: "Command.discovery",
},
{
icon: "/static/quick/quick_icon_order.png",
title: "订单/工单",
content: "我的订单/工单",
type: "MyOrder",
},
{
icon: "/static/quick/quick_icon_call.png",
title: "呼叫服务",
content: "加水、客房服务等",
type: "Command.createWorkOrder",
},
];
};
</script>
<style lang="scss" scoped>
.quick-access {
width: 100%;
&-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.quick-access-item {
flex: 0 0 104px;
border-radius: 8px;
margin: 4px 4px 8px 4px;
box-shadow: 0 2px 5px 0px rgba(0,0,0,0.1);
padding: 12px;
display: inline-flex;
flex-direction: column;
position: relative;
&:first-child {
margin-left: 12px;
}
&:last-child {
margin-right: 12px;
}
.quick-access-item-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 8px;
width: 128px;
height: 56px;
}
.quick-access-item-title {
display: flex;
align-items: center;
z-index: 1;
image {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #201F32;
line-height: 16px;
}
}
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 10px;
color: #678CAD;
line-height: 18px;
}
}
}
.quick-access {
width: 100%;
&-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.quick-access-item {
flex: 0 0 104px;
border-radius: 8px;
margin: 4px 4px 8px 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 12px;
display: inline-flex;
flex-direction: column;
position: relative;
&:first-child {
margin-left: 12px;
}
&:last-child {
margin-right: 12px;
}
.quick-access-item-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 8px;
width: 128px;
height: 56px;
}
.quick-access-item-title {
display: flex;
align-items: center;
z-index: 1;
image {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #201f32;
line-height: 16px;
}
}
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 10px;
color: #678cad;
line-height: 18px;
}
}
}
</style>

17
pages/chat/styles/ChatMainList.scss
View File

@@ -49,14 +49,6 @@
display: flex;
flex-direction: column;
.area-msg-list-content {
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.message-item-ai {
display: flex;
justify-content: flex-start;
@@ -140,15 +132,6 @@
align-items: center;
}
}
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
// 打字机光标闪烁动画
.typing-cursor {

361
pages/module/booking/QuickBookingContentList.vue
View File

@@ -1,201 +1,214 @@
<template>
<view class="container">
<ModuleTitle :title="commodityDTO.title" />
<view class="container-scroll">
<view v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
<view class="container">
<ModuleTitle :title="commodityDTO.title" />
<view class="container-scroll">
<view
v-for="(item, index) in commodityDTO.commodityList"
:key="`${item.commodityId}-${index}`"
>
<view class="mk-card-item" @click="placeOrderHandle(item)">
<!-- <view class="card-badge">超值推荐</view> -->
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
<view class="card-content">
<view class="card-title-column">
<text class="card-title">{{ item.commodityName }}</text>
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
<text class="card-tag">{{ tag }}</text>
</view>
</view>
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
</template>
<view class="card-bottom-row">
<view class="card-price-row">
<text class="card-price-fu">￥</text>
<text class="card-price">{{ item.commodityPrice }}</text>
<text class="card-unit">/人</text>
</view>
<!-- <view class="card-badge">超值推荐</view> -->
<image
class="card-img"
:src="item.commodityIcon"
mode="aspectFill"
/>
<view class="card-content">
<view class="card-title-column">
<text class="card-title">{{
item.commodityName
}}</text>
<view
class="card-tags"
v-for="tag in item.commodityTradeRuleList"
:key="tag"
>
<text class="card-tag">{{ tag }}</text>
</view>
</view>
<template
v-for="(
serviceItem, index
) in item.commodityServices"
:key="serviceItem.serviceTitle"
>
<view v-if="index < 3" class="card-desc"
>· {{ serviceItem.serviceTitle }}</view
>
</template>
<view class="card-bottom-row">
<view class="card-price-row">
<text class="card-price-fu">￥</text>
<text class="card-price">{{
item.commodityPrice
}}</text>
<text class="card-unit">/人</text>
</view>
<text class="card-btn">下单</text>
</view>
</view>
<text class="card-btn">下单</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { defineProps } from 'vue'
const props = defineProps({
commodityDTO: {
type: Object,
default: {}
}
})
/// 去下单
const placeOrderHandle = (item) => {
uni.navigateTo({
url: `/pages/goods/index?commodityId=${item.commodityId}`,
})
}
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
const props = defineProps({
commodityDTO: {
type: Object,
default: {},
},
});
/// 去下单
const placeOrderHandle = (item) => {
uni.navigateTo({
url: `/pages/goods/index?commodityId=${item.commodityId}`,
});
};
</script>
<style lang="scss" scoped>
.container {
.container {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
margin: 4px 0;
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
margin: 4px 0;
.mk-card-item {
position: relative;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
// height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
.mk-card-item {
position: relative;
.card-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
// height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
.card-img {
width: 188px;
height: 114px;
border-radius: 10px;
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */
}
.card-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
.card-content {
box-sizing: border-box;
padding: 10px 12px 0 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
width: 100%;
flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */
}
.card-img {
width: 188px;
height: 114px;
border-radius: 10px;
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */
}
.card-title-column {
display: flex;
align-items: start;
flex-direction: column;
width: 100%;
}
.card-content {
box-sizing: border-box;
padding: 10px 12px 0 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
width: 100%;
flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */
}
.card-title {
font-size: 16px;
font-weight: bold;
color: #222;
width: 100%;
/* 限制标题最多显示两行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */
}
.card-title-column {
display: flex;
align-items: start;
flex-direction: column;
width: 100%;
}
.card-tags {
display: flex;
flex-direction: row;
align-items: start;
padding: 6px 0;
}
.card-title {
font-size: 16px;
font-weight: bold;
color: #222;
width: 100%;
/* 限制标题最多显示两行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */
}
.card-tag {
background: #f5f5f5;
color: #ff6600;
font-size: 10px;
border-radius: 4px;
padding: 0 6px;
margin-left: 2px;
border: 1px solid #ff6600;
}
.card-tags {
display: flex;
flex-direction: row;
align-items: start;
padding: 6px 0;
}
.card-desc {
font-size: 13px;
color: #888;
margin-top: 2px;
}
.card-tag {
background: #f5f5f5;
color: #ff6600;
font-size: 10px;
border-radius: 4px;
padding: 0 6px;
margin-left: 2px;
border: 1px solid #ff6600;
}
.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
width: 100%;
}
.card-desc {
font-size: 13px;
color: #888;
margin-top: 2px;
}
.card-price-row {
.card-price-fu {
color: #ff6600;
font-size: 11px;
font-weight: normal;
}
.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
width: 100%;
}
.card-price {
color: #ff6600;
font-size: 16px;
font-weight: bold;
}
.card-unit {
font-size: 11px;
color: #888;
font-weight: normal;
margin-left: 2px;
}
}
.card-price-row {
.card-price-fu {
color: #ff6600;
font-size: 11px;
font-weight: normal;
}
.card-price {
color: #ff6600;
font-size: 16px;
font-weight: bold;
}
.card-unit {
font-size: 11px;
color: #888;
font-weight: normal;
margin-left: 2px;
}
}
.card-btn {
background: #ff6600;
color: #fff;
font-size: 15px;
border-radius: 20px;
padding: 0 18px;
height: 32px;
line-height: 32px;
}
}
}
}
.card-btn {
background: #ff6600;
color: #fff;
font-size: 15px;
border-radius: 20px;
padding: 0 18px;
height: 32px;
line-height: 32px;
}
}
}
}
</style>

360
pages/module/detail/DetailCardGoodsContentList.vue
View File

@@ -1,200 +1,214 @@
<template>
<view class="container">
<ModuleTitle title="相关商品" />
<view class="container-scroll">
<view v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
<view class="mk-card-item" @click="placeOrderHandle(item)">
<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
<view class="card-content">
<view class="card-title-column">
<text class="card-title">{{ item.commodityName }}</text>
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
<text class="card-tag">{{ tag }}</text>
</view>
</view>
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
</template>
<view class="card-bottom-row">
<view class="card-price-row">
<text class="card-price-fu">￥</text>
<text class="card-price">{{ item.specificationPrice }}</text>
<text class="card-unit">/人</text>
</view>
<text class="card-btn">下单</text>
</view>
</view>
<view class="container">
<ModuleTitle title="相关商品" />
<view class="container-scroll">
<view
v-for="(item, index) in commodityList"
:key="`${item.commodityId}-${index}`"
>
<view class="mk-card-item" @click="placeOrderHandle(item)">
<image
class="card-img"
:src="item.commodityPhoto"
mode="aspectFill"
/>
<view class="card-content">
<view class="card-title-column">
<text class="card-title">{{
item.commodityName
}}</text>
<view
class="card-tags"
v-for="tag in item.commodityTradeRuleList"
:key="tag"
>
<text class="card-tag">{{ tag }}</text>
</view>
</view>
<template
v-for="(
serviceItem, index
) in item.commodityServices"
:key="serviceItem.serviceTitle"
>
<view v-if="index < 3" class="card-desc"
>· {{ serviceItem.serviceTitle }}</view
>
</template>
<view class="card-bottom-row">
<view class="card-price-row">
<text class="card-price-fu">￥</text>
<text class="card-price">{{
item.specificationPrice
}}</text>
<text class="card-unit">/人</text>
</view>
<text class="card-btn">下单</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { defineProps } from 'vue'
const props = defineProps({
commodityList: {
type: Array,
default: []
}
})
/// 去下单
const placeOrderHandle = (item) => {
uni.navigateTo({
url: `/pages/goods/index?commodityId=${item.commodityId}`,
})
}
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
const props = defineProps({
commodityList: {
type: Array,
default: [],
},
});
/// 去下单
const placeOrderHandle = (item) => {
uni.navigateTo({
url: `/pages/goods/index?commodityId=${item.commodityId}`,
});
};
</script>
<style lang="scss" scoped>
.container {
margin: 6px 0 0;
.container {
margin: 6px 0 0;
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
margin: 4px 0;
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
margin: 4px 0;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.mk-card-item {
position: relative;
.mk-card-item {
position: relative;
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
// height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
// height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
.card-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
.card-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
.card-img {
width: 188px;
height: 114px;
border-radius: 10px;
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */
}
.card-img {
width: 188px;
height: 114px;
border-radius: 10px;
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */
}
.card-content {
box-sizing: border-box;
padding: 10px 12px 0 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
width: 100%;
flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */
}
.card-content {
box-sizing: border-box;
padding: 10px 12px 0 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
width: 100%;
flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */
}
.card-title-column {
display: flex;
align-items: start;
flex-direction: column;
width: 100%;
}
.card-title-column {
display: flex;
align-items: start;
flex-direction: column;
width: 100%;
}
.card-title {
font-size: 16px;
font-weight: bold;
color: #222;
width: 100%;
/* 限制标题最多显示两行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */
}
.card-title {
font-size: 16px;
font-weight: bold;
color: #222;
width: 100%;
/* 限制标题最多显示两行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */
}
.card-tags {
display: flex;
flex-direction: row;
align-items: start;
padding: 6px 0;
}
.card-tags {
display: flex;
flex-direction: row;
align-items: start;
padding: 6px 0;
}
.card-tag {
background: #f5f5f5;
color: #ff6600;
font-size: 10px;
border-radius: 4px;
padding: 0 6px;
margin-left: 2px;
.card-tag {
background: #f5f5f5;
color: #ff6600;
font-size: 10px;
border-radius: 4px;
padding: 0 6px;
margin-left: 2px;
border: 1px solid #ff6600;
}
}
.card-desc {
font-size: 13px;
color: #888;
margin-top: 2px;
}
.card-desc {
font-size: 13px;
color: #888;
margin-top: 2px;
}
.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
width: 100%;
}
.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
width: 100%;
}
.card-price-row {
.card-price-fu {
color: #ff6600;
font-size: 11px;
font-weight: normal;
}
.card-price-row {
.card-price-fu {
color: #ff6600;
font-size: 11px;
font-weight: normal;
}
.card-price {
color: #ff6600;
font-size: 16px;
font-weight: bold;
}
.card-unit {
font-size: 11px;
color: #888;
font-weight: normal;
margin-left: 2px;
}
}
.card-price {
color: #ff6600;
font-size: 16px;
font-weight: bold;
}
.card-unit {
font-size: 11px;
color: #888;
font-weight: normal;
margin-left: 2px;
}
}
.card-btn {
background: #ff6600;
color: #fff;
font-size: 15px;
border-radius: 20px;
padding: 0 18px;
height: 32px;
line-height: 32px;
}
}
}
}
.card-btn {
background: #ff6600;
color: #fff;
font-size: 15px;
border-radius: 20px;
padding: 0 18px;
height: 32px;
line-height: 32px;
}
}
}
}
</style>

111
pages/module/discovery/DiscoveryCradContentList.vue
View File

@@ -1,72 +1,67 @@
<template>
<view class="container">
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<view class="container">
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view
v-for="(item, index) in recommendTheme.recommendPostsList"
:key="index"
>
<view class="mk-card-item" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
</view>
</view>
</view>
</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);
}
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 {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
/* 隐藏滚动条 */
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;
}
}
}
}
image {
width: 188px;
height: 112px;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
}
}
}
}
</style>

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

@@ -44,12 +44,6 @@
overflow-x: auto;
margin-top: 4px;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.mk-card-item {
flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
width: 142px;