refactor(home-components): migrate styles to tailwind and clean up legacy code

Replace custom CSS utility classes with Tailwind arbitrary value classes (e.g. color-CBD5E1 → text-[#cbd5e1]). Remove unused standalone SCSS style files for three home components. Swap legacy uni-icons to van-icon for arrow icons in LongTextGuideCard, and fix event emitter usage in DiscoveryCradContentList to use the imported events utility.
This commit is contained in:
duanshuwen
2026-05-29 19:51:17 +08:00
parent b25071a92b
commit 86f8e9adec
10 changed files with 69 additions and 352 deletions

View File

@@ -1,11 +1,12 @@
<template>
<div class="container">
<div>
<ModuleTitle :title="recommendTheme.themeName" />
<div class="container-scroll">
<div class="flex flex-row overflow-x-auto mt-1">
<div v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<div class="mk-card-item" @click="sendReply(item)">
<img class="card-img" :src="item.coverPhoto" mode="widthFix"></img>
<span class="card-text">{{ item.topic }}</span>
<div class="flex flex-col items-start w-[188px] h-[154px] bg-white rounded-[10px] mr-2 relative"
@click="sendReply(item)">
<img class="w-[188px] h-[112px]" :src="item.coverPhoto">
<span class="p-3 text-center font-medium text-xs text-[#333]">{{ item.topic }}</span>
</div>
</div>
</div>
@@ -13,8 +14,9 @@
</template>
<script setup>
import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import { defineProps } from "vue";
import { emitter } from '@/utils/events'
import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
const props = defineProps({
@@ -27,13 +29,9 @@ const props = defineProps({
const sendReply = (item) => {
if (item.userInputContentType && item.userInputContentType === '1') {
const commonItem = { type: item.userInputContent, title: item.topic }
uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
emitter.emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
return;
}
uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
};
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

View File

@@ -1,33 +0,0 @@
.container {
.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: #fff;
border-radius: 10px;
margin-right: 8px;
position: relative;
.card-img {
width: 188px;
height: 112px;
}
.card-text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333;
}
}
}
}