refactor(shared-visual): clean up shared styles
Remove the centralized SharedVisual/styles/index.scss file. Inline all component styles directly into each Vue component. Hardcode green default styles for BadgePill and ActionRow, remove dynamic tone classes. Replace the text arrow in ActionRow with the van-icon component. Update disabled states to use opacity-55 instead of is-disabled class. Fix font-700 to font-bold across components. Simplify component class names and remove unused code.
This commit is contained in:
duanshuwen
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="long-text-guide-card w-full">
|
||||
<div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
|
||||
<div class="w-full">
|
||||
<div v-if="mode === 'list'" class="w-full">
|
||||
<div v-for="item in cards" :key="item.id"
|
||||
class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
|
||||
:class="{ 'opacity-55': disabled }" @click="openDetail(item)">
|
||||
@@ -24,7 +24,7 @@
|
||||
<div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
|
||||
<div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
|
||||
<div
|
||||
class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-700"
|
||||
class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-bold"
|
||||
@click="closeDetail">
|
||||
<van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div class="visual-action-row flex items-center gap-[12px] p-[12px] bg-white rounded-18 "
|
||||
:class="{ 'is-disabled': disabled }" @click="handleClick">
|
||||
<div class="visual-action-row__icon flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold"
|
||||
:class="toneClass">
|
||||
<div class="flex items-center gap-[12px] p-[12px] bg-white rounded-18 " :class="{ 'opacity-55': disabled }"
|
||||
@click="handleClick">
|
||||
<div
|
||||
class="flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold text-[#047857] bg-[#ecfdf5]">
|
||||
<slot name="icon">{{ icon }}</slot>
|
||||
</div>
|
||||
<div class="visual-action-row__body flex-1">
|
||||
<div class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
|
||||
<div v-if="subtitle" class="visual-action-row__subtitle truncate">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
|
||||
<div v-if="subtitle" class="mt-1 text-slate-400 text-[11px] font-bold truncate">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
|
||||
<van-icon size="24" color="#CBD5E1" name="arrow-right"></van-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@@ -47,14 +47,8 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["action"]);
|
||||
|
||||
const toneClass = computed(() => `visual-action-row__icon--${props.tone}`);
|
||||
|
||||
const handleClick = () => {
|
||||
if (props.disabled) return;
|
||||
emit("action", props.payload);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="visual-badge flex items-center justify-center rounded-[5px] text-[10px] font-bold whitespace-nowrap"
|
||||
:class="toneClass">
|
||||
<div
|
||||
class="min-h-[20px] py-[2px] px-[8px] leading-[16px] flex items-center justify-center rounded-[5px] text-[10px] text-[#047857] bg-[#ecfdf5] font-bold whitespace-nowrap">
|
||||
<slot>{{ label }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,10 +18,4 @@ const props = defineProps({
|
||||
default: "slate",
|
||||
},
|
||||
});
|
||||
|
||||
const toneClass = computed(() => `visual-badge--${props.tone}`);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="[box-shadow:0_8px_24px_rgba(15,23,42,0.05)] w-full bg-white border border-[#f1f5f9] rounded-[24px] overflow-hidden"
|
||||
:class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease]': pressable, 'opacity-55': disabled }, variantClass]"
|
||||
:class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease] active:scale-985 active:opacity-92': pressable, 'opacity-55': disabled }, variantClass]"
|
||||
@click="handleClick">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { computed, defineEmits, defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
variant: {
|
||||
@@ -35,6 +35,13 @@ const handleClick = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
<style scoped>
|
||||
.visual-card-shell--soft {
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
|
||||
}
|
||||
|
||||
.visual-card-shell--detail {
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
.visual-card-shell {
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.visual-card-shell--soft {
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
|
||||
}
|
||||
|
||||
.visual-card-shell--detail {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.visual-card-shell.is-pressable {
|
||||
transition: transform 0.18s ease, opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.visual-card-shell.is-pressable:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.visual-card-shell.is-disabled,
|
||||
.visual-action-row.is-disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.visual-badge {
|
||||
min-height: 20px;
|
||||
padding: 2px 8px;
|
||||
box-sizing: border-box;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.visual-badge--slate {
|
||||
color: #475569;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.visual-badge--green {
|
||||
color: #047857;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.visual-badge--amber {
|
||||
color: #b45309;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.visual-badge--rose {
|
||||
color: #be123c;
|
||||
background: #fff1f2;
|
||||
}
|
||||
|
||||
.visual-badge--blue {
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.visual-badge--purple {
|
||||
color: #7c3aed;
|
||||
background: #f5f3ff;
|
||||
}
|
||||
|
||||
.visual-action-row {}
|
||||
|
||||
.visual-action-row__icon {}
|
||||
|
||||
.visual-action-row__icon--green {
|
||||
color: #047857;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.visual-action-row__icon--blue {
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.visual-action-row__icon--amber {
|
||||
color: #b45309;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.visual-action-row__icon--rose {
|
||||
color: #be123c;
|
||||
background: #fff1f2;
|
||||
}
|
||||
|
||||
.visual-action-row__body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.visual-action-row__title {}
|
||||
|
||||
.visual-action-row__subtitle {
|
||||
margin-top: 4px;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.visual-action-row__arrow {
|
||||
font-size: 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user