first commit
This commit is contained in:
dhp
652
demo-vue/src/views/ProductsDetail.vue
Normal file
652
demo-vue/src/views/ProductsDetail.vue
Normal file
@@ -0,0 +1,652 @@
|
||||
<!-- src/views/ProductsDetail.vue -->
|
||||
<template>
|
||||
<div class="products-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<HeaderComponent />
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main class="products-content">
|
||||
<!-- 头部 Banner 区域 -->
|
||||
<section class="products-banner">
|
||||
<div class="banner-wrapper">
|
||||
<h1 class="banner-title">多元布局，科技赋能，满足全行业设备与材料供应需求</h1>
|
||||
<p class="banner-description">
|
||||
依托多元业务矩阵与合规经营体系，我们以专业品质保障产品与服务的可靠、适配与高效。从设备研发制造到材料加工销售，从智能化设计到全球贸易，覆盖多场景需求，提供一站式解决方案。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品分类筛选 -->
|
||||
<section class="category-filter">
|
||||
<div class="filter-wrapper">
|
||||
<span class="filter-label">按分类筛选</span>
|
||||
<div class="filter-tags">
|
||||
<span
|
||||
v-for="(category, index) in categories"
|
||||
:key="index"
|
||||
:class="['filter-tag', { active: currentCategory === category }]"
|
||||
@click="selectCategory(category)"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品展示区域 -->
|
||||
<section class="products-grid">
|
||||
<div class="products-wrapper">
|
||||
<div class="product-card" v-for="(product, index) in filteredProducts" :key="product.name">
|
||||
<div class="product-image-section">
|
||||
<el-carousel
|
||||
height="340px"
|
||||
indicator-position="outside"
|
||||
:autoplay="false"
|
||||
:interval="3000"
|
||||
trigger="click"
|
||||
arrow="always"
|
||||
>
|
||||
<el-carousel-item v-for="(img, imgIndex) in product.images" :key="imgIndex">
|
||||
<img :src="img" :alt="product.name" class="product-img" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">{{ product.name }}</h3>
|
||||
|
||||
<div class="product-tags">
|
||||
<span class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{ tag }}</span>
|
||||
</div>
|
||||
|
||||
<p class="product-description">{{ product.description }}</p>
|
||||
|
||||
<div class="product-specs">
|
||||
<div class="specs-header">
|
||||
<span class="specs-title">基础配置</span>
|
||||
<span class="specs-subtitle">BASIC CONFIGURATION</span>
|
||||
</div>
|
||||
<div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.name)" :key="specIndex">
|
||||
<div class="spec-label-cn">{{ spec.label }}</div>
|
||||
<div class="spec-label-en">{{ spec.enLabel }}</div>
|
||||
<div class="spec-value-cn">{{ spec.value }}</div>
|
||||
<div class="spec-value-en">{{ spec.valueEn || '' }}</div>
|
||||
</div>
|
||||
<div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.name)">
|
||||
<span>{{ expandedIndices.has(product.name) ? '收起' : '查看更多' }}</span>
|
||||
<el-icon><ArrowDown v-if="!expandedIndices.has(product.name)" /><ArrowUp v-else /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 底部 Footer -->
|
||||
<FooterComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
||||
import HeaderComponent from '@/components/HeaderComponent.vue'
|
||||
import FooterComponent from '@/components/FooterComponent.vue'
|
||||
|
||||
import productImg1 from '@/assets/images/img1-1.png'
|
||||
import productImg2 from '@/assets/images/img1-2.png'
|
||||
import productImg3 from '@/assets/images/img2-1.png'
|
||||
import productImg4 from '@/assets/images/img2-2.png'
|
||||
import productImg5 from '@/assets/images/img3-1.png'
|
||||
import productImg6 from '@/assets/images/img3-2.jpg'
|
||||
import productImg7 from '@/assets/images/img4-1.png'
|
||||
import productImg8 from '@/assets/images/img4-2.png'
|
||||
import productImg9 from '@/assets/images/img5-1.png'
|
||||
import productImg10 from '@/assets/images/img5-2.png'
|
||||
import productImg11 from '@/assets/images/img6-1.png'
|
||||
import productImg12 from '@/assets/images/img6-2.png'
|
||||
import productImg13 from '@/assets/images/img7-1.png'
|
||||
import productImg14 from '@/assets/images/img7-2.png'
|
||||
import productImg15 from '@/assets/images/img8-1.png'
|
||||
import productImg16 from '@/assets/images/img8-2.png'
|
||||
import productImg17 from '@/assets/images/img9-1.png'
|
||||
import productImg18 from '@/assets/images/img9-2.png'
|
||||
import productImg19 from '@/assets/images/img10-1.png'
|
||||
import productImg20 from '@/assets/images/img11-1.png'
|
||||
import productImg21 from '@/assets/images/img12-1.png'
|
||||
|
||||
const categories = [
|
||||
'全部产品',
|
||||
'电动自行车系列',
|
||||
'电动摩托车系列',
|
||||
'民用三轮车系列',
|
||||
'小型农机车系列',
|
||||
]
|
||||
|
||||
const currentCategory = ref('全部产品')
|
||||
|
||||
const selectCategory = (category: string) => {
|
||||
currentCategory.value = category
|
||||
}
|
||||
|
||||
const expandedIndices = ref<Set<string>>(new Set())
|
||||
|
||||
const getVisibleSpecs = (product: any, productName: string) => {
|
||||
if (expandedIndices.value.has(productName)) {
|
||||
return product.specs
|
||||
}
|
||||
return product.specs.slice(0, 3)
|
||||
}
|
||||
|
||||
const toggleSpecs = (productName: string) => {
|
||||
if (expandedIndices.value.has(productName)) {
|
||||
expandedIndices.value.delete(productName)
|
||||
} else {
|
||||
expandedIndices.value.add(productName)
|
||||
}
|
||||
}
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '长虹',
|
||||
category: '电动自行车系列',
|
||||
images: [productImg1, productImg2],
|
||||
tags: [ '锂电铅酸', '长续航'],
|
||||
description: '长虹智能电动车 | 双电池可选 液压减震 碟刹安全。',
|
||||
specs: [
|
||||
{ value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
|
||||
{ value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
|
||||
{ value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
|
||||
{ value: '3.0-10, 铁轮真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
|
||||
{ value: '液压前叉、7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
|
||||
{ value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
|
||||
{ value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
|
||||
{ value: '透镜大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
|
||||
{ value: '1790*680*1060mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1790*680*1060mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'MU5PRO',
|
||||
category: '电动自行车系列',
|
||||
images: [productImg3, productImg4],
|
||||
tags: [ '锂电铅酸','大容量电池'],
|
||||
description: 'MU5PRO 长续航电动车 | 1000W 动力 90-100KM 续航。',
|
||||
specs: [
|
||||
{ value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
|
||||
{ value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
|
||||
{ value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
|
||||
{ value: '3.0-12中颗粒, 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
|
||||
{ value: '液压前叉，莲花座7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
|
||||
{ value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
|
||||
{ value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
|
||||
{ value: '大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
|
||||
{ value: '1940*670*1130mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1940*670*1130mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '超级骑士',
|
||||
category: '电动自行车系列',
|
||||
images: [productImg5, productImg6],
|
||||
tags: ['独立大容量电池', '前后碟刹', '智能解锁'],
|
||||
description: '超级骑士 通勤电动车 | 1200W 动力 NFC 智能解锁。',
|
||||
specs: [
|
||||
{ value: '锂电60V24AH', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
|
||||
{ value: '1200W', label: '电机', enLabel: 'MOTOR', valueEn: '800W sine wave motor' },
|
||||
{ value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: 'Dual 18-channel controller' },
|
||||
{ value: '轮胎90/90-12CY610 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: 'Front and rear 400-10 vacuum tires' },
|
||||
{ value: '液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Independent suspension' },
|
||||
{ value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front and rear disc brakes' },
|
||||
{ value: 'NFC', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
|
||||
{ value: '凸镜大灯;尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
|
||||
{ value: '1850*670*1150mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1850*670*1150mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '儿童载1.8',
|
||||
category: '民用三轮车系列',
|
||||
images: [productImg7, productImg8],
|
||||
tags: ['民用三轮', '重载', '嘉陵电控', '短途运输'],
|
||||
description: 'JL重载1.8民用三轮车，载重能力强，配备嘉陵磁浮电控系统，适合短途运输。',
|
||||
specs: [
|
||||
{ label: '整车尺寸', enLabel: 'DIMENSIONS', value: '3300*1380*1415', valueEn: '3300*1380*1415mm' },
|
||||
{ label: '动力系统', enLabel: 'POWER SYSTEM', value: '嘉陵磁浮电控系统1200W方壳', valueEn: 'Jialing maglev electronic control system 1200W' },
|
||||
{ label: '轮胎规格', enLabel: 'TIRE SPEC', value: '前400-12后450-12钢丝胎', valueEn: 'Front 400-12 Rear 450-12 steel wire tire' },
|
||||
{ label: '减震系统', enLabel: 'SHOCK SYSTEM', value: '43外簧减震', valueEn: '43 external spring shock absorber' },
|
||||
{ label: '后桥规格', enLabel: 'REAR AXLE', value: '全悬浮变档180', valueEn: 'Full floating gear shift 180' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '茉莉V1',
|
||||
category: '民用三轮车系列',
|
||||
images: [productImg9, productImg10],
|
||||
tags: ['民用三轮', '独立悬挂', '前后碟刹', '倒车影像'],
|
||||
description: '茉莉V1民用三轮车，时尚设计，独立悬挂，前后碟刹，配备倒车影像和暖风，驾乘舒适。',
|
||||
specs: [
|
||||
{ label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2750X1225X1670mm', valueEn: '2750X1225X1670mm' },
|
||||
{ label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
|
||||
{ label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
|
||||
{ label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
|
||||
{ label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
|
||||
{ label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
|
||||
{ label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '茉莉V2',
|
||||
category: '民用三轮车系列',
|
||||
images: [productImg11, productImg12],
|
||||
tags: ['民用三轮', '小巧', '独立悬挂', '城市代步'],
|
||||
description: '茉莉V2民用三轮车，小巧灵活，同样配备独立悬挂和暖风，适合城市代步。',
|
||||
specs: [
|
||||
{ label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2410X1225X1670mm', valueEn: '2410X1225X1670mm' },
|
||||
{ label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
|
||||
{ label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
|
||||
{ label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
|
||||
{ label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
|
||||
{ label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
|
||||
{ label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '雅迪冠能 IF8',
|
||||
category: '电动摩托车系列',
|
||||
images: [productImg13, productImg14],
|
||||
tags: ['石墨烯电池', '无刷电机', '前后碟刹', '长续航'],
|
||||
description: '雅迪冠能 IF8 电动摩托车 | 石墨烯三代 PLUS 电池 1200W 无刷电机 续航约 85km。',
|
||||
specs: [
|
||||
{ label: '电池', enLabel: 'BATTERY', value: 'TTFAR 石墨烯三代 PLUS 铅酸电池 72V23Ah（可选锂电版本）', valueEn: 'TTFAR Graphene 3rd PLUS lead-acid battery 72V23Ah (lithium version optional)' },
|
||||
{ label: '电机', enLabel: 'MOTOR', value: '1200W 直流无刷电机', valueEn: '1200W DC brushless motor' },
|
||||
{ label: '控制器', enLabel: 'CONTROLLER', value: '雅迪 TTFAR 智能控制器', valueEn: 'Yadea TTFAR intelligent controller' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
|
||||
{ label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉 + 后置双减震', valueEn: 'Hydraulic front fork + rear dual shock absorber' },
|
||||
{ label: '刹车', enLabel: 'BRAKE', value: '前后双碟刹', valueEn: 'Front and rear disc brakes' },
|
||||
{ label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航约 85km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage about 85km' },
|
||||
{ label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '高亮透镜大灯 + LED 尾灯 + 转向灯', valueEn: 'High-brightness lens headlights + LED taillights + turn signals' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '锋速幻影',
|
||||
category: '电动摩托车系列',
|
||||
images: [productImg15, productImg16],
|
||||
tags: ['双电池可选', '高性能电机', '前后碟刹', '长续航'],
|
||||
description: '锋速幻影 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
|
||||
specs: [
|
||||
{ label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah（可选）', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah (optional)' },
|
||||
{ label: '电机', enLabel: 'MOTOR', value: '1000W 高性能直流无刷电机', valueEn: '1000W high-performance DC brushless motor' },
|
||||
{ label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
|
||||
{ label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、后置液压减震', valueEn: 'Hydraulic front fork + rear hydraulic shock absorber' },
|
||||
{ label: '刹车', enLabel: 'BRAKE', value: '前 / 后碟刹', valueEn: 'Front and rear disc brakes' },
|
||||
{ label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航 90-100Km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage 90-100Km' },
|
||||
{ label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、LED 转向灯', valueEn: 'Lens headlights, LED taillights, LED turn signals' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '暗影骑士',
|
||||
category: '电动摩托车系列',
|
||||
images: [productImg17, productImg18],
|
||||
tags: ['双电池可选', '无刷电机', '前后碟刹', '长续航'],
|
||||
description: '暗影骑士 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
|
||||
specs: [
|
||||
{ label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah' },
|
||||
{ label: '电机', enLabel: 'MOTOR', value: '1000W 高性能无刷电机', valueEn: '1000W high-performance brushless motor' },
|
||||
{ label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '3.0-10 铁轮真空胎', valueEn: '3.0-10 Iron Wheel Vacuum Tire' },
|
||||
{ label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、7.0*290 液压减震', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
|
||||
{ label: '刹车', enLabel: 'BRAKE', value: '前/后碟刹', valueEn: 'Front and rear disc brakes' },
|
||||
{ label: '仪表', enLabel: 'DASHBOARD', value: '中速平表里程 90-100Km', valueEn: 'Medium speed flat road mileage 90-100km' },
|
||||
{ label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、动态流光转向灯', valueEn: 'Lens headlights, LED taillights, dynamic flow turn signals' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '动力王 6090 拖拉机',
|
||||
category: '小型农机车系列',
|
||||
images: [productImg19],
|
||||
tags: ['300 马力', '四驱动力', '液压系统', '智能导航'],
|
||||
description: '动力王 6090 拖拉机 | 300HP 六缸涡轮增压发动机 PowerShift 变速箱 全液压制动。',
|
||||
specs: [
|
||||
{ label: '发动机', enLabel: 'ENGINE', value: 'PowerTech™ PVS 6090 6 缸 9.0L 增压式帕四发动机', valueEn: '6-cylinder 9.0L H pressure Commc Engine' },
|
||||
{ label: '标定功率', enLabel: 'POWER RATING', value: '300HP / 220.5kW', valueEn: '300HP / 220.5kW' },
|
||||
{ label: '净功率', enLabel: 'NET POWER', value: '326.3HP / 240kW', valueEn: '326.3HP / 240kW' },
|
||||
{ label: '变速箱', enLabel: 'TRANSMISSION', value: '16×4 全动力换挡（PowerShift）', valueEn: '16×4 Full PowerShift Transmission' },
|
||||
{ label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速；187.5kW 输出功率', valueEn: '1000r/min Stand 187.5kW Output' },
|
||||
{ label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '4 组电控液压输出阀；最大提升力 288.3kN', valueEn: '4 Electro-Hydraulic Valves; Max. Lift 288.3kN' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '标配：600/70R30（前）/650/85R38（后）选装：420/85R34/480/80R50 双后轮', valueEn: 'Standard: 600/70 (R) 650/85R38 (R) Optional: 420/85R34/480/80 Rear' },
|
||||
{ label: '悬挂', enLabel: 'HITCH', value: '后置 3 类 / 4N 三点悬挂', valueEn: 'Category 3/4N R point Hitch' },
|
||||
{ label: '制动', enLabel: 'BRAKE', value: '全液压湿式制动系统', valueEn: 'Full Hydraulic Wet System' },
|
||||
{ label: '驾驶室', enLabel: 'CAB', value: '1750 系列豪华空气悬浮驾驶，冷暖空调', valueEn: '1750 Series Air S Premium Cab, Air Conditioning' },
|
||||
{ label: '导航', enLabel: 'NAVIGATION', value: 'CommandCenter 中文触屏显示；ATI 自动驾驶', valueEn: 'CommandCenter Display, ATI Auto' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '6613×3012-3351×3403mm', valueEn: '6613×3012-3351×3403mm' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '挑战者 MT665D 拖拉机',
|
||||
category: '小型农机车系列',
|
||||
images: [productImg20],
|
||||
tags: ['340 马力', '无级变速', '全液压制动', '全景驾驶室'],
|
||||
description: '挑战者 MT665D 农用拖拉机 | 340HP 六缸柴油发动机 CVT 无级变速 全液压湿式制动。',
|
||||
specs: [
|
||||
{ label: '发动机', enLabel: 'ENGINE', value: 'AGCO Power 8.4L 直列 6 缸柴油发动机', valueEn: 'AGCO Power 8.4L Inline 6-cylinder Diesel Engine' },
|
||||
{ label: '额定功率', enLabel: 'POWER RATING', value: '340HP / 253.5kW（发动机总功率）', valueEn: '340HP / 253.5kW (Engine Gross Power)' },
|
||||
{ label: '动力输出轴功率', enLabel: 'PTO POWER', value: '290HP / 216.3kW', valueEn: '290HP / 216.3kW' },
|
||||
{ label: '变速箱', enLabel: 'TRANSMISSION', value: '无级变速（CVT）双机械挡位', valueEn: 'Continuously Variable Transmission (CVT) with 2 Mechanical Ranges' },
|
||||
{ label: '动力输出轴', enLabel: 'PTO', value: '标准 1000r/min，支持双速调节', valueEn: 'Standard 1000r/min, with two-speed adjustment' },
|
||||
{ label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '中心闭心式液压系统，流量 160L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate 160L/min' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '标配：前 480/70R34，后 520/85R46 支持双轮胎选装', valueEn: 'Standard: Front 480/70R34, Rear 520/85R46 Dual Rear Wheels Optional' },
|
||||
{ label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥85kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥85kN' },
|
||||
{ label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
|
||||
{ label: '驾驶室', enLabel: 'CAB', value: '全景玻璃悬浮驾驶室，配备冷暖空调', valueEn: 'Panoramic Glass Suspended Cab with Air Conditioning System' },
|
||||
{ label: '燃油箱', enLabel: 'FUEL TANK', value: '约 632L 大容量油箱', valueEn: '632L Large Capacity Fuel Tank' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 5500×2700×3200mm', valueEn: 'Approx. 5500×2700×3200mm' },
|
||||
{ label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 11500kg', valueEn: 'Approx. 11500kg Operating Weight' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '雷霆 300HP 拖拉机',
|
||||
category: '小型农机车系列',
|
||||
images: [productImg21],
|
||||
tags: ['300 马力', '六缸发动机', '全动力换挡', '全液压制动'],
|
||||
description: '雷霆 300HP 拖拉机 | 六缸高压共轨柴油发动机 全动力换挡变速箱 全液压湿式制动。',
|
||||
specs: [
|
||||
{ label: '发动机', enLabel: 'ENGINE', value: '直列六缸高压共轨柴油发动机', valueEn: 'Inline 6-cylinder High-pressure Common Rail Diesel Engine' },
|
||||
{ label: '额定功率', enLabel: 'POWER RATING', value: '220kW / 约 300HP', valueEn: '220kW / Approx. 300HP Rated Power' },
|
||||
{ label: '变速箱', enLabel: 'TRANSMISSION', value: '全动力换挡变速箱', valueEn: 'Full PowerShift Transmission' },
|
||||
{ label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速', valueEn: '1000r/min Standard Speed PTO' },
|
||||
{ label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '闭心式液压系统，流量 ≥150L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate ≥150L/min' },
|
||||
{ label: '轮胎', enLabel: 'TIRES', value: '标配：前 540/65R30，后 650/85R38，支持双后轮', valueEn: 'Standard: Front 540/65R30, Rear 650/85R38, Dual Rear Wheels Optional' },
|
||||
{ label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥90kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥90kN' },
|
||||
{ label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
|
||||
{ label: '驾驶室', enLabel: 'CAB', value: '全景悬浮驾驶室，配备冷暖空调与减震座椅', valueEn: 'Panoramic Suspended Cab with Air Conditioning and Air Seat' },
|
||||
{ label: '燃油箱', enLabel: 'FUEL TANK', value: '约 500L 大容量油箱', valueEn: 'Approx. 500L Large Capacity Fuel Tank' },
|
||||
{ label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 6200×3000×3300mm', valueEn: 'Approx. 6200×3000×3300mm' },
|
||||
{ label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 10500kg', valueEn: 'Approx. 10500kg Operating Weight' }
|
||||
]
|
||||
},
|
||||
])
|
||||
|
||||
const filteredProducts = computed(() => {
|
||||
if (currentCategory.value === '全部产品') {
|
||||
return products.value
|
||||
}
|
||||
return products.value.filter(product => product.category === currentCategory.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.products-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.products-content {
|
||||
width: 100%;
|
||||
background: #f8f9fa;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.products-banner {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
|
||||
padding: 80px 0 60px;
|
||||
text-align: center;
|
||||
|
||||
.banner-wrapper {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 100px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0 0 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.banner-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.category-filter {
|
||||
background: #fff;
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
.filter-wrapper {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
padding: 40px 0 80px;
|
||||
|
||||
.products-wrapper {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 100px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.product-image-section {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 20px;
|
||||
|
||||
.product-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.product-specs {
|
||||
.specs-header {
|
||||
background: #ff5722;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.specs-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.specs-subtitle {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.spec-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.spec-label-cn {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spec-label-en {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
min-width: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spec-value-cn {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.spec-value-en {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.show-more-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 12px;
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.products-wrapper {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.products-wrapper {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.banner-wrapper,
|
||||
.filter-wrapper,
|
||||
.products-wrapper {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user