style(notice): replace scoped CSS with inline Tailwind classes
remove unused scoped CSS styles from both the notice page and notice message component, and replace all existing class-based styling with inline Tailwind utilities
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
<span class="text-[#0CCD58] text-[10px] text-[500]">
|
<span class="text-[#0CCD58] text-[10px] text-[500]">
|
||||||
{{ t("home.notice.publishedAt") }}{{ item.effectiveStartTime }}
|
{{ t("home.notice.publishedAt") }}{{ item.effectiveStartTime }}
|
||||||
</span>
|
</span>
|
||||||
<span class="text-[#0CCD58] text-[10px] text-[500] underline-text">
|
<span class="text-[#0CCD58] text-[10px] text-[500] underline decoration-[#0CCD58]">
|
||||||
{{ t("home.notice.detail") }}
|
{{ t("home.notice.detail") }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -21,8 +21,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="tipsMessage">
|
<div v-else-if="tipsMessage">
|
||||||
<div class="noMessage">
|
<div
|
||||||
<span class="noMessage-text text-[#0CCD58] text-[12px] text-[600]">
|
class="mt-[8px] inline-flex box-border w-fit max-w-full rounded-[8px] border border-[#C7D2FE] bg-[#EBEFFF] px-[12px] py-[4px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]">
|
||||||
|
<span
|
||||||
|
class="text-[#0CCD58] text-[12px] text-[600] leading-[18px] whitespace-normal [overflow-wrap:break-word] break-all">
|
||||||
{{ tipsMessage }}
|
{{ tipsMessage }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -80,30 +82,3 @@ const clickItem = (item) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.underline-text {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: #0CCD58;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noMessage {
|
|
||||||
display: inline-flex;
|
|
||||||
margin-top: 8px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
background: #EBEFFF;
|
|
||||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #C7D2FE;
|
|
||||||
width: fit-content;
|
|
||||||
max-width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noMessage-text {
|
|
||||||
line-height: 18px;
|
|
||||||
white-space: normal;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -13,7 +13,8 @@
|
|||||||
<div class="pt-[16px] px-[12px] pb-[24px] ">
|
<div class="pt-[16px] px-[12px] pb-[24px] ">
|
||||||
<div class="text-[#171717] text-[16px] font-semibold">{{ detailTitle }}</div>
|
<div class="text-[#171717] text-[16px] font-semibold">{{ detailTitle }}</div>
|
||||||
|
|
||||||
<div v-if="publishTime" class="notice-time-tag flex flex-row items-center mt-[16px]">
|
<div v-if="publishTime"
|
||||||
|
class="mt-[16px] inline-flex h-[28px] flex-row items-center rounded-[14px] border border-[#d6dde8] bg-[linear-gradient(180deg,#f4f7fb_0%,#e9eef6_100%)] px-[12px] py-[6px]">
|
||||||
<uni-icons type="clock" size="18" color="#5A6780" />
|
<uni-icons type="clock" size="18" color="#5A6780" />
|
||||||
<span class="text-[#171717] text-[12px] font-semibold ml-[8px]">{{ t("home.notice.publishedAt") }}{{
|
<span class="text-[#171717] text-[12px] font-semibold ml-[8px]">{{ t("home.notice.publishedAt") }}{{
|
||||||
publishTime }}</span>
|
publishTime }}</span>
|
||||||
@@ -83,15 +84,3 @@ watch(
|
|||||||
);
|
);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.notice-time-tag {
|
|
||||||
display: inline-flex;
|
|
||||||
height: 28px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
|
|
||||||
border: 1px solid #d6dde8;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user