refactor(home-components): replace scss styles with tailwind utilities
Remove standalone .scss style files for home page components, update their vue templates to use inline Tailwind utility classes, and remove the associated scoped style imports.
This commit is contained in:
duanshuwen
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="tag-list">
|
||||
<div v-for="(item, index) in tags" :key="index" class="tag-item" @click="handleClick(item)">
|
||||
<span class="tag-text">{{ item }}</span>
|
||||
<div class="flex flex-wrap px-3 py-1.5">
|
||||
<div v-for="(item, index) in tags" :key="index"
|
||||
class="border border-white bg-white/50 rounded-lg px-2.5 py-1 mr-2 mb-2 inline-flex items-center justify-center"
|
||||
@click="handleClick(item)">
|
||||
<span class="text-[14px] text-[#0ccd58]">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,7 +38,3 @@ onMounted(() => {
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #fff;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
color: #0ccd58;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
|
||||
<div class="chat-ai-row">
|
||||
<div class="container">
|
||||
<div class="chat-ai">
|
||||
<div class="container-content">
|
||||
<img v-if="isLoading" class="loading-img" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
|
||||
<div class="w-full flex items-center justify-start">
|
||||
<div class="inline-block align-middle max-w-full overflow-x-hidden">
|
||||
<div class="px-3 min-w-0 max-w-full overflow-hidden break-all">
|
||||
<div class="flex items-center max-w-full">
|
||||
<img v-if="isLoading" class="mr-2 w-7.5 h-6.25" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
|
||||
<ChatMarkdown :key="textKey" :text="processedText" />
|
||||
<ChatLoading v-if="isLoading" />
|
||||
</div>
|
||||
@@ -62,7 +62,3 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
.chat-ai-row {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中气泡 */
|
||||
justify-content: flex-start; /* 默认左对齐 */
|
||||
}
|
||||
|
||||
.container {
|
||||
/* 气泡容器：内联块按内容自适应 */
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.chat-ai {
|
||||
padding: 0 12px; // 消息内容的内边距 左右12px
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.container-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%; // ✅ 限制最大宽度
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
margin-right: 8px;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<!-- 外层行容器：接收来自父组件的对齐类（如 flex justify-end） -->
|
||||
<div class="chat-mine-row">
|
||||
<div class="chat-mine bg-17294E">
|
||||
<div class="w-full flex justify-end">
|
||||
<div
|
||||
class="m-3 px-[16px] py-2 rounded-[15px] bg-[#17294E] inline-block w-auto overflow-x-auto align-top max-w-full">
|
||||
<span class="text-[15px] text-white">{{ text }}</span>
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -17,7 +18,3 @@ defineProps({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
.chat-mine-row {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-mine {
|
||||
margin: 12px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 15px;
|
||||
|
||||
/* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
v
|
||||
<template>
|
||||
<div class="welcome-content p-[12px]">
|
||||
<div class="wrap rounded-[20px]">
|
||||
<div class="flex items-center justify-between pl-[12px] pr-[12px]">
|
||||
<div class="p-3">
|
||||
<div class="bg-white/50 rounded-[20px]">
|
||||
<div class="flex items-center justify-between pl-3 pr-3">
|
||||
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
||||
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
||||
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
||||
@@ -86,7 +86,3 @@ const measureWelcomeHeight = (callback) => {
|
||||
|
||||
defineExpose({ measureWelcomeHeight });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
.wrap {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="w-full flex-1 mb-3">
|
||||
<div v-for="item in themeDTOList" :key="item.title">
|
||||
<RecommendPostsList :recommendTheme="item" />
|
||||
</div>
|
||||
@@ -31,7 +31,3 @@ onMounted(() => {
|
||||
loadDiscoveryCradComponent();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user