feat(kol): marketplace + package detail views
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
import { UserOutlined, TagOutlined, TeamOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
|
||||
import type { KolPackageSummary } from "@geo/shared-types";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
package: KolPackageSummary;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "click", id: number): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
function handleClick() {
|
||||
emit("click", props.package.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card hoverable class="kol-package-card" @click="handleClick">
|
||||
<template #cover>
|
||||
<div v-if="props.package.cover_url" class="card-cover-image">
|
||||
<img alt="cover" :src="props.package.cover_url" />
|
||||
</div>
|
||||
<div v-else class="card-cover-fallback">
|
||||
<ThunderboltOutlined class="fallback-icon" />
|
||||
</div>
|
||||
</template>
|
||||
<a-card-meta>
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
{{ props.package.name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="card-description">
|
||||
<div class="kol-info">
|
||||
<a-avatar :src="props.package.kol_avatar_url" size="small">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<span class="kol-name">{{ props.package.kol_display_name }}</span>
|
||||
</div>
|
||||
<div class="industry-badge" v-if="props.package.industry">
|
||||
<a-tag color="blue">
|
||||
<template #icon><TagOutlined /></template>
|
||||
{{ props.package.industry }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat-item">
|
||||
<ThunderboltOutlined />
|
||||
{{ t('kol.marketplace.prompts', { count: props.package.prompt_count }) }}
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
<TeamOutlined />
|
||||
{{ t('kol.marketplace.subscribers', { count: props.package.subscriber_count }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-package-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kol-package-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-cover-image {
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-cover-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-cover-fallback {
|
||||
height: 160px;
|
||||
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fallback-icon {
|
||||
font-size: 48px;
|
||||
color: #bae0ff;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kol-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kol-name {
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.industry-badge {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-meta-title) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -32,6 +32,9 @@ import type {
|
||||
KolAssistSubmitResponse,
|
||||
KolAssistTask,
|
||||
KolPackageSummary,
|
||||
KolPackageDetail,
|
||||
KolSubscription,
|
||||
KolSubscriptionPromptCard,
|
||||
KolProfile,
|
||||
KolPromptDetail,
|
||||
KolPromptRevision,
|
||||
@@ -333,6 +336,29 @@ export const kolManageApi = {
|
||||
},
|
||||
};
|
||||
|
||||
export const kolMarketplaceApi = {
|
||||
list(params: { industry?: string; keyword?: string; limit?: number; offset?: number }) {
|
||||
return apiClient.get<KolPackageSummary[]>("/api/tenant/kol/marketplace", { params });
|
||||
},
|
||||
detail(id: number) {
|
||||
return apiClient.get<KolPackageDetail>(`/api/tenant/kol/marketplace/packages/${id}`);
|
||||
},
|
||||
subscribe(id: number) {
|
||||
return apiClient.post<KolSubscription, Record<string, never>>(
|
||||
`/api/tenant/kol/marketplace/packages/${id}/subscribe`,
|
||||
{},
|
||||
);
|
||||
},
|
||||
mySubscriptions() {
|
||||
return apiClient.get<KolSubscription[]>("/api/tenant/kol/marketplace/my-subscriptions");
|
||||
},
|
||||
mySubscriptionPrompts() {
|
||||
return apiClient.get<KolSubscriptionPromptCard[]>(
|
||||
"/api/tenant/kol/marketplace/my-subscription-prompts",
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const articlesApi = {
|
||||
list(params: ArticleListParams) {
|
||||
return apiClient.get<ArticleListResponse>("/api/tenant/articles", { params });
|
||||
|
||||
-14
@@ -5,20 +5,6 @@ declare module "@/views/KolDashboardView.vue" {
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module "@/views/KolMarketplaceView.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
|
||||
const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module "@/views/KolPackageDetailView.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
|
||||
const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module "@/views/KolGenerateView.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { SearchOutlined } from "@ant-design/icons-vue";
|
||||
import KolPackageCard from "@/components/kol/KolPackageCard.vue";
|
||||
import { kolMarketplaceApi } from "@/lib/api";
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const filters = reactive({
|
||||
industry: undefined as string | undefined,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const debouncedKeyword = ref("");
|
||||
let debounceTimer: number | null = null;
|
||||
|
||||
watch(() => filters.keyword, (newVal) => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer);
|
||||
debounceTimer = window.setTimeout(() => {
|
||||
debouncedKeyword.value = newVal;
|
||||
}, 300);
|
||||
});
|
||||
|
||||
const marketplaceParams = computed(() => ({
|
||||
industry: filters.industry === 'all' ? undefined : filters.industry,
|
||||
keyword: debouncedKeyword.value || undefined,
|
||||
}));
|
||||
|
||||
const marketplaceQuery = useQuery({
|
||||
queryKey: computed(() => ["kol", "marketplace", marketplaceParams.value]),
|
||||
queryFn: () => kolMarketplaceApi.list(marketplaceParams.value),
|
||||
});
|
||||
|
||||
const industryOptions = computed(() => [
|
||||
{ label: t("kol.marketplace.filter.all"), value: "all" },
|
||||
{ label: "科技", value: "科技" },
|
||||
{ label: "生活", value: "生活" },
|
||||
{ label: "财经", value: "财经" },
|
||||
{ label: "教育", value: "教育" },
|
||||
{ label: "娱乐", value: "娱乐" },
|
||||
{ label: "其他", value: "其他" },
|
||||
]);
|
||||
|
||||
function handleCardClick(id: number) {
|
||||
void router.push({ name: "kol-package-detail", params: { id: String(id) } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-marketplace">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<h1>{{ t("kol.marketplace.title") }}</h1>
|
||||
<p class="description">{{ t("route.templates.description") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-card">
|
||||
<div class="filter-item">
|
||||
<label>{{ t("kol.marketplace.filter.industry") }}</label>
|
||||
<a-select
|
||||
v-model:value="filters.industry"
|
||||
style="width: 160px"
|
||||
:options="industryOptions"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>{{ t("kol.marketplace.filter.keyword") }}</label>
|
||||
<a-input-search
|
||||
v-model:value="filters.keyword"
|
||||
style="width: 280px"
|
||||
:placeholder="t('common.search')"
|
||||
allow-clear
|
||||
>
|
||||
<template #enterButton>
|
||||
<a-button type="primary">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="marketplace-grid" v-if="marketplaceQuery.data.value?.length">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col
|
||||
v-for="pkg in marketplaceQuery.data.value"
|
||||
:key="pkg.id"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<KolPackageCard :package="pkg" @click="handleCardClick" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div v-else-if="marketplaceQuery.isPending.value" class="loading-state">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<a-empty :description="t('kol.marketplace.empty')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-marketplace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filters-card {
|
||||
padding: 20px 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.marketplace-grid {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
margin-top: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filters-card {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.filter-item :deep(.ant-select),
|
||||
.filter-item :deep(.ant-input-search) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,450 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
UserOutlined,
|
||||
TagOutlined,
|
||||
ThunderboltOutlined,
|
||||
TeamOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { kolMarketplaceApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const packageId = computed(() => Number(route.params.id));
|
||||
|
||||
const packageQuery = useQuery({
|
||||
queryKey: computed(() => ["kol", "package", packageId.value]),
|
||||
queryFn: () => kolMarketplaceApi.detail(packageId.value),
|
||||
enabled: computed(() => !isNaN(packageId.value)),
|
||||
});
|
||||
|
||||
const mySubscriptionPromptsQuery = useQuery({
|
||||
queryKey: ["kol", "my-subscription-prompts"],
|
||||
queryFn: () => kolMarketplaceApi.mySubscriptionPrompts(),
|
||||
});
|
||||
|
||||
const subscribeMutation = useMutation({
|
||||
mutationFn: (id: number) => kolMarketplaceApi.subscribe(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.submit"));
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "package", packageId.value] });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
},
|
||||
});
|
||||
|
||||
const pkg = computed(() => packageQuery.data.value);
|
||||
const subscription = computed(() => pkg.value?.subscription);
|
||||
|
||||
const subscriptionStatusMeta = computed(() => {
|
||||
if (!subscription.value) return null;
|
||||
switch (subscription.value.status) {
|
||||
case "pending":
|
||||
return { label: t("kol.package.pending"), color: "orange", icon: ClockCircleOutlined };
|
||||
case "active":
|
||||
return { label: t("kol.package.subscribed"), color: "success", icon: CheckCircleOutlined };
|
||||
case "expired":
|
||||
return { label: t("kol.package.expired"), color: "error", icon: ExclamationCircleOutlined };
|
||||
case "revoked":
|
||||
return { label: t("kol.package.revoked"), color: "default", icon: ExclamationCircleOutlined };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
function handleSubscribe() {
|
||||
if (pkg.value) {
|
||||
subscribeMutation.mutate(pkg.value.id);
|
||||
}
|
||||
}
|
||||
|
||||
function handleGenerate(promptId: number) {
|
||||
const subPrompt = mySubscriptionPromptsQuery.data.value?.find(
|
||||
(sp) => sp.prompt_id === promptId && sp.package_id === packageId.value
|
||||
);
|
||||
if (subPrompt) {
|
||||
void router.push({ name: "kol-generate", params: { subscriptionPromptId: String(subPrompt.id) } });
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
void router.push({ name: "kol-marketplace" });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-package-detail">
|
||||
<div class="detail-header">
|
||||
<a-button type="link" @click="goBack" class="back-btn">
|
||||
<template #icon><ArrowLeftOutlined /></template>
|
||||
{{ t("common.back") }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div v-if="packageQuery.isPending.value" class="loading-state">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="pkg" class="detail-content">
|
||||
<a-row :gutter="24">
|
||||
<a-col :xs="24" :lg="16">
|
||||
<section class="main-card">
|
||||
<div class="package-cover" v-if="pkg.cover_url">
|
||||
<img :src="pkg.cover_url" alt="cover" />
|
||||
</div>
|
||||
<div class="package-info">
|
||||
<div class="package-title-row">
|
||||
<h1 class="package-name">{{ pkg.name }}</h1>
|
||||
<a-tag color="blue" v-if="pkg.industry">
|
||||
<template #icon><TagOutlined /></template>
|
||||
{{ pkg.industry }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="kol-profile">
|
||||
<a-avatar :src="pkg.kol_avatar_url" :size="48">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<div class="kol-meta">
|
||||
<span class="kol-display-name">{{ pkg.kol_display_name }}</span>
|
||||
<p class="kol-bio" v-if="pkg.kol_bio">{{ pkg.kol_bio }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-row" v-if="pkg.tags?.length">
|
||||
<a-tag v-for="tag in pkg.tags" :key="tag">{{ tag }}</a-tag>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="description-section">
|
||||
<h3>{{ t("common.description") }}</h3>
|
||||
<p class="description-text">{{ pkg.description || t("common.noData") }}</p>
|
||||
</div>
|
||||
<div class="price-section" v-if="pkg.price_note">
|
||||
<h3>费用说明</h3>
|
||||
<p class="price-text">{{ pkg.price_note }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="prompts-section">
|
||||
<h3 class="section-title">
|
||||
<ThunderboltOutlined />
|
||||
{{ t("kol.marketplace.prompts", { count: pkg.prompts?.length || 0 }) }}
|
||||
</h3>
|
||||
<div class="prompts-list">
|
||||
<div v-for="prompt in pkg.prompts" :key="prompt.id" class="prompt-item">
|
||||
<div class="prompt-info">
|
||||
<span class="prompt-name">{{ prompt.name }}</span>
|
||||
<a-tag v-if="prompt.platform_hint" color="cyan" size="small">{{ prompt.platform_hint }}</a-tag>
|
||||
</div>
|
||||
<div class="prompt-action">
|
||||
<a-tooltip :title="subscription?.status !== 'active' ? '订阅后可用' : ''">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="subscription?.status !== 'active'"
|
||||
@click="handleGenerate(prompt.id)"
|
||||
>
|
||||
{{ t("kol.marketplace.prompts", { count: "" }).trim() }} 生成
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!pkg.prompts?.length" class="empty-prompts">
|
||||
<a-empty :description="t('common.noData')" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :lg="8">
|
||||
<a-card class="subscription-card">
|
||||
<h3 class="card-title">订阅状态</h3>
|
||||
<div v-if="!subscription" class="not-subscribed">
|
||||
<p class="status-text">您尚未订阅该 KOL 提示词包。</p>
|
||||
<a-button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
:loading="subscribeMutation.isPending.value"
|
||||
@click="handleSubscribe"
|
||||
>
|
||||
{{ t("kol.package.subscribe") }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-else class="subscription-info">
|
||||
<div class="status-badge">
|
||||
<a-tag :color="subscriptionStatusMeta?.color" class="status-tag">
|
||||
<template #icon><component :is="subscriptionStatusMeta?.icon" /></template>
|
||||
{{ subscriptionStatusMeta?.label }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="subscription-dates" v-if="subscription.status === 'active'">
|
||||
<div class="date-item">
|
||||
<span class="label">到期时间：</span>
|
||||
<span class="value">{{ subscription.end_at || '永不过期' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
v-if="subscription.status === 'expired' || subscription.status === 'revoked'"
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
:loading="subscribeMutation.isPending.value"
|
||||
@click="handleSubscribe"
|
||||
>
|
||||
重新订阅
|
||||
</a-button>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="package-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><TeamOutlined /> 已有订阅</span>
|
||||
<span class="stat-value">{{ pkg.subscriber_count }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><ThunderboltOutlined /> 包含 Prompt</span>
|
||||
<span class="stat-value">{{ pkg.prompt_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-package-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 0;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.package-cover {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.package-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.package-info {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.package-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kol-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.kol-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kol-display-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.kol-bio {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.tags-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description-section h3,
|
||||
.price-section h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description-text,
|
||||
.price-text {
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.prompts-section {
|
||||
margin-top: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prompts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.prompt-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f7f9fc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f3fa;
|
||||
}
|
||||
|
||||
.prompt-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.subscription-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e6edf5;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 14px;
|
||||
padding: 6px 12px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.subscription-dates {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.date-item .label {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.date-item .value {
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.package-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #595959;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user