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:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user