style(detail): improve detail page layout
This commit is contained in:
parent
c6ba742f9d
commit
0e2239b59f
|
|
@ -147,3 +147,41 @@ a {
|
|||
overflow: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-descriptions :is(.el-descriptions__table, .el-descriptions__body) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-descriptions .el-descriptions__cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.detail-descriptions .el-descriptions__label.el-descriptions__cell {
|
||||
width: 180px;
|
||||
min-width: 180px;
|
||||
white-space: nowrap;
|
||||
color: var(--text-900);
|
||||
font-weight: 600;
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
|
||||
.detail-descriptions .el-descriptions__content.el-descriptions__cell {
|
||||
color: var(--text-600);
|
||||
line-height: 1.7;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-descriptions .el-descriptions__label.el-descriptions__cell {
|
||||
width: 132px;
|
||||
min-width: 132px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,28 @@
|
|||
工厂详情
|
||||
<el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<div class="card" v-if="factory">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="工厂全称">{{ factory.factory_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="品牌">{{ factory.brand }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商">{{ factory.dealer_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品分类">{{ factory.product_category }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地区">{{ formatRegion(factory.province, factory.city, factory.district) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">{{ factory.address }}</el-descriptions-item>
|
||||
<el-descriptions-item label="官网">{{ factory.website }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户账号">{{ (factory.usernames || []).join('、') || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料数量">{{ factory.material_count }}</el-descriptions-item>
|
||||
<div class="card detail-card" v-if="factory">
|
||||
<el-descriptions :column="1" border class="detail-descriptions">
|
||||
<el-descriptions-item label="工厂全称">{{ displayText(factory.factory_name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="品牌">{{ displayText(factory.brand) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商">{{ displayText(factory.dealer_name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品分类">{{ displayText(factory.product_category) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地区">{{ displayRegion(factory) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">{{ displayText(factory.address) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="官网">
|
||||
<a
|
||||
v-if="factory.website"
|
||||
:href="factory.website"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="website-link"
|
||||
>
|
||||
{{ factory.website }}
|
||||
</a>
|
||||
<span v-else>-</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户账号">{{ displayList(factory.usernames) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料数量">{{ displayText(factory.material_count) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,6 +50,12 @@ onMounted(loadDetail)
|
|||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
const displayText = (value) => value || '-'
|
||||
|
||||
const displayList = (value) => (value?.length ? value.join('、') : '-')
|
||||
|
||||
const displayRegion = (item) => formatRegion(item.province, item.city, item.district) || '-'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -47,5 +64,9 @@ const goBack = () => {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
.website-link {
|
||||
color: var(--brand-500);
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<template>
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-title">
|
||||
材料详情
|
||||
<el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<div class="card" v-if="material">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="材料名称">{{ material.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="专业类别">{{ material.major_category_display }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料分类">{{ material.material_category }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料子类">{{ material.material_subcategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格型号">{{ material.spec }}</el-descriptions-item>
|
||||
<el-descriptions-item label="符合标准">{{ material.standard }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应用场景">{{ (material.application_scene_display || []).join('、') }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应用说明">{{ material.application_desc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="替代材料类型">{{ material.replace_type_display }}</el-descriptions-item>
|
||||
<el-descriptions-item label="竞争优势">{{ (material.advantage_display || []).join('、') }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优势说明">{{ material.advantage_desc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成本对比">{{ material.cost_compare }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成本说明">{{ material.cost_desc }}</el-descriptions-item>
|
||||
<el-descriptions-item label="案例">{{ material.cases }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属工厂">{{ material.factory_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质量等级">{{ material.quality_level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="耐久等级">{{ material.durability_level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="环保等级">{{ material.eco_level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="低碳等级">{{ material.carbon_level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总评分">{{ material.score_level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="连接方式">{{ material.connection_method }}</el-descriptions-item>
|
||||
<el-descriptions-item label="施工工艺">{{ material.construction_method }}</el-descriptions-item>
|
||||
<el-descriptions-item label="限制条件">{{ material.limit_condition }}</el-descriptions-item>
|
||||
<div class="card detail-card" v-if="material">
|
||||
<el-descriptions :column="1" border class="detail-descriptions">
|
||||
<el-descriptions-item label="材料名称">{{ displayText(material.name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="专业类别">{{ displayText(material.major_category_display) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料分类">{{ displayText(material.material_category) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材料子类">{{ displayText(material.material_subcategory) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格型号">{{ displayText(material.spec) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="符合标准">{{ displayText(material.standard) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应用场景">{{ displayList(material.application_scene_display) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应用说明">{{ displayText(material.application_desc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="替代材料类型">{{ displayText(material.replace_type_display) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="竞争优势">{{ displayList(material.advantage_display) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优势说明">{{ displayText(material.advantage_desc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成本对比">{{ formatPercent(material.cost_compare) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成本说明">{{ displayText(material.cost_desc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="案例">{{ displayText(material.cases) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属工厂">{{ displayText(material.factory_name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质量等级">{{ formatStarLevel(material.quality_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="耐久等级">{{ formatStarLevel(material.durability_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="环保等级">{{ formatStarLevel(material.eco_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="低碳等级">{{ formatStarLevel(material.carbon_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总评分">{{ formatStarLevel(material.score_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="连接方式">{{ displayText(material.connection_method) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="施工工艺">{{ displayText(material.construction_method) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="限制条件">{{ displayText(material.limit_condition) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-if="material.brochure_url" class="brochure">
|
||||
<div class="brochure-title">宣传页</div>
|
||||
|
|
@ -56,6 +56,14 @@ onMounted(loadDetail)
|
|||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
const displayText = (value) => value || '-'
|
||||
|
||||
const displayList = (value) => (value?.length ? value.join('、') : '-')
|
||||
|
||||
const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
|
||||
|
||||
const formatStarLevel = (value) => (value ? `${value}星` : '-')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -69,6 +77,12 @@ const goBack = () => {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.brochure-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue